1. LEZIONE 03 - CSS e progettazione responsive

  2. I FOG L I DI STI L E

  • HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici.
  • I fogli di stile (Cascading Style Sheets) definiscono come i vari elementi che compongono un documento verranno mostrati su un media specifico (schermo, stampante, dispositivo mobile).
  •  CSS è il linguaggio che usa il web designer per realizzare un interfaccia. • La prima fase di un design è la progettazione.

  1. Progettazione WEB e concetto di accessibilità

  2. ACCESSIBILITÀ
  • Consentire l’accesso a tutti gli utenti indipendentemente dal dispositivo che usano.
  • Consentire l’accesso a tutti gli utenti indipendentemente dalla loro abilità. • Tenere conto dei dispositivi che supportano gli utenti diversamente abili.
  • Con legge 9 gennaio 2004 n.4 e i successivi decreti attuativi è obbligatorio per i siti Web della Pubblica Amministrazione e della aziende private che lavorano con la Pubblica Amministrazione seguire precise regole di accessibilità.
  • http://www.webaccessibile.org/
  1. TECNICHE RESPONSIVE
  • Progettare interfacce diverse che consentano di mostrare con efficienza le stesse informazioni su dispositivi diversi.
  • Utilizzare specifiche tecniche CSS per mostrare lo stesso contenuto HTML in maniera diversa sui diversi dispositivi sulla base di quanto progettato.
  1. DEVICE PIXEL RATIO
  • Il device pixel ratio è il rapporto tra le dimensioni fisiche (in pixel) dello schermo di un dispositivo e le sue dimensioni logiche, le dimensioni usate, cioè, per visualizzare gli oggetti sullo schermo.
ESEMPI DI PIXEL RATIO
  • APPLE IPAD Dimensioni fisiche: 1536 x 2048 Dimensioni logiche: 768 x 1024 Pixel ratio: 2.0
  • APPLE IPHONE 6 Dimensioni fisiche: 750 x 1254 Dimensioni logiche: 375 x 627 Pixel ratio: 2.0
  • NOKIA LUMIA 520 Dimensioni fisiche: 448 x 746 Dimensioni logiche: 320 x 533 Pixel ratio: 1.4
  • SAMSUNG GALAXY NOTE III Dimensioni fisiche: 1080 x 1920 Dimensioni logiche: 360 x 640 Pixel ratio: 3.0
  • LG G4 Dimensioni fisiche: 1440 x 2560 Dimensioni logiche: 360 x 640 Pixel ratio: 4.0
TIPI DI DISPOSITIVO
  • <768px
    •  Smartphone
    • Smartphone orizzontali
  • ≥768px < 992px
    • Tablet verticali
    • Tablet piccoli verticali
    • Tablet piccoli orizzontali
  • ≥992px < 1200px
    • Tablet orizzontali
    • Lap top
    • Net book
  • ≥1200px
    • Desktop

COME SI COLLEGA UN FOGLIO DI STILE A UNA PAGINA WEB

INSERIMENTO
  • ​​​Un foglio di stile può essere esterno e interno:
  • È esterno un foglio di stile definito in un file separato dal documento.
  • Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento.
  1. FOGLI COLLEGATI
  • Uso dell'elemento <LINK>
  • La dichiarazione va sempre collocata all'interno della sezione <HEAD> del documento.
  • L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
    • rel descrive il tipo di relazione tra il documento e il file collegato. È sempre obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
    • href serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio
    • type identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
    • media con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.
FOGLI INCORPORATI
  • I fogli incorporati sono quelli inseriti direttamente nel documento (X)HTML tramite l'elemento <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>

  1. COME SONO COSTRUITE LE REGOLE

  • Un foglio di stile è costituito da una serie di regole che stabiliscono come un elemento (identificato da un selettore) viene reso su un media: 
    • selettore { proprietà1: valore  ; proprietà2; valore  ;}

  1. IMPORTANZA DELLA SINTASSI

  • Quando elaboro un dato, il processo di codifica e decodifica sono automatici.
  • Quando elaboro un codice aggiungo un livello superiore di codifica non più automatica, ma elaborata da me. 
  • Un linguaggio è l’insieme di regole (sintassi, ortografia, punteggiatura) che fa si che il codice (istruzioni) che scrivo siano correttamente interpretate dal computer. 
  • In CSS l’elemento sintattico principale è la punteggiatura.
  • Se sbaglio il nome di una proprietà o un valore, semplicemente la regola verrà ignorata
  • Se sbaglio o tralascio la punteggiatura potrebbe non essere interpretato l’intero codice.  Se tralascio la parentesi graffa chiusa, tutto il codice che segue non verrà interpretato.