HTML e CSS. Lezioni 11-12
11 Responsive Images
In Responsive Design, abbiamo imparato a utilizzare le query multimediali per creare layout separati per dispositivi mobili, tablet e desktop. Proprio come le query multimediali ci consentono di presentare in modo condizionale regole CSS diverse, vogliamo visualizzare immagini diverse in base al dispositivo dell'utente.
Per rendere le nostre immagini reattive, ora dobbiamo prendere in considerazione tre cose:
- Le dimensioni del dispositivo
- Le dimensioni dell'immagine
- La risoluzione dello schermo del dispositivo
Retina screens
Gli schermi Retina hanno il doppio di pixel per pollice rispetto agli schermi a risoluzione standard. Vale a dire, ogni pixel retina è l'equivalente di 4 pixel standard. Questo ha un grande impatto sul modo in cui le immagini vengono visualizzate in un browser web.
Per eseguire correttamente il rendering su un dispositivo retina, un'immagine deve essere grande il doppio delle dimensioni finali del display. Ad esempio, se desideri aggiungere un'immagine di 500×250 pixel alla pagina, il file immagine corrispondente deve essere di 1000×500 pixel.
Responsive svg images
Il modo più semplice per risolvere tutti questi problemi è con le immagini SVG; poiché sono basati su vettori, gli SVG evitano i problemi di risoluzione dello schermo che vedremo nella prossima sezione.
Responsive PNG, GIF and JPG
A volte è necessario includere una foto. Le immagini PNG, GIF e JPG sono 'immagini raster', il che significa che sono definite pixel per pixel anziché con vettori. Di conseguenza, sono molto più sensibili alla risoluzione dello schermo rispetto agli SVG.
Dispositivi diversi hanno requisiti di immagine diversi. Fortunatamente, l'HTML fornisce un modo per scegliere l'immagine migliore per il dispositivo dell'utente. Nelle prossime sezioni, daremo un'occhiata a tre scenari per l'ottimizzazione delle immagini reattive:
Uno schermo a risoluzione standard che non necessita di un'immagine di qualità retina.
- Un dispositivo mobile retina che può utilizzare un'immagine di qualità standard perché è stato ridimensionato così tanto.
- Un layout desktop che utilizza un'immagine larga e un layout mobile associato che utilizza un'immagine più alta.
L'attributo srcset punta a un elenco di file immagine alternativi, insieme alle proprietà che definiscono quando il browser dovrebbe utilizzarli. L'1x dice al browser di visualizzare illustration-small.png su schermi a risoluzione standard. Il 2x significa che illustration-big.png è per gli schermi retina.
Ottimizzazione della larghezza dello schermo utilizzando srcset
Possiamo salvare alcuni byte extra per i dispositivi non retina. Purtroppo, la tecnica srcset di cui sopra manca un importante caso d'uso per immagini più grandi: se l'utente ha uno smartphone retina, scaricherà l'immagine ad alta risoluzione anche quando la versione standard sarebbe sufficiente.
La lezione qui è che vogliamo ottimizzare le immagini più grandi in base alle loro dimensioni di rendering finali, non solo alla risoluzione dello schermo del dispositivo.
12 Semantic HTML
Semantic html
'HTML semantico' si riferisce all'idea che tutto il tuo markup HTML dovrebbe trasmettere il significato sottostante del tuo contenuto, non il suo aspetto. Abbiamo già scritto HTML semantico (ad esempio, usando strong al posto di b) ma c'è un intero insieme di elementi progettati al solo scopo di aggiungere più significato al layout generale di una pagina web. Si chiamano 'elementi di sezionamento' e hanno un aspetto simile a questo:
Ogni documento HTML ha uno 'schema', che è il modo in cui i motori di ricerca e gli screen reader visualizzano la gerarchia del contenuto nella pagina. Gli elementi di intestazione da <h1> a <h6> contribuiscono tutti alla struttura del documento di una pagina.
Le intestazioni sono alcune delle cose più semantiche in una pagina web. Svolgono un ruolo significativo nel modo in cui i motori di ricerca determinano ciò che è importante nella tua pagina web. Inoltre, gli elementi HTML semantici che stiamo per trattare aggiungono più significato e talvolta addirittura alterano il comportamento di struttura predefinito discusso qui.
Definire gli stili grafici con i CSS è il modo in cui trasmettiamo la struttura di una pagina web agli umani. Contrassegnandolo con <header>, <article>, <figure> e altri elementi di sezionamento HTML, siamo in grado di rappresentare quegli stili visivi anche per le macchine.