Cell. +39 3479684755
Il Blog di Instant Websites
Layout a 2 o più colonne con Flexbox
Abbiamo esaminato in un precedente articolo le proprietà base di Flexbox, una delle novità introdotte con CSS3: https://lnx.instantwebsites.it/iwblog/2019/01/introduzione-a-flexbox/
Vedremo ora come utilizzare Flexbox per creare un layout composto a titolo di esempio da 3 colonne affiancate in un contenitore.
Tutti gli esempi che verranno creati possono essere visualizzati aprendo questa pagina e visualizzando il codice sorgente della stessa.
Definiamo un contenitore che identificheremo inizialmente con la classe .box avente sfondo blu e tre colonne che identificheremo con le classi .colonna1, .colonna2 e .colonna3.
Ognuna di queste ultime ha una larghezza di 300px ed ha sfondo colorato differenziato.
Nell’ESEMPIO N. 1, i div .colonna assumono il normale comportamento degli elementi a livello di blocco e si dispongono uno sopra all’altro.
Per affiancarli, potremmo adottare la tecnica basata su: display: table-cell, cambiando la natura di tali elementi (vedi questo articolo: https://lnx.instantwebsites.it/iwblog/2013/02/layout-a-piu-colonne-con-la-proprieta-display-table-cell/) ma usando Flexbox otterremo maggiore flessibilità, potendo anche ridisporre le colonne stesse in un ordine diverso da quello definito dal codice HTML.
Passiamo dunque all’ESEMPIO N. 2 nel quale al contenitore chiamato stavolta .box2 viene assegnata la proprietà display: flex;.
I tre elementi interni si dispongono uno di fianco all’altro, mantenendo le loro dimensioni se lo spazio è sufficiente e riducendole proporzionalmente quando la viewport assume una dimensione insufficiente (per verificare ciò, rimpicciolire la finestra del browser per simulare la viewport di dispositivi più piccoli).
Il tag picture
L’introduzione del web design reattivo tramite HTML5 e CSS3 ha introdotto la possibilità di ottenere il ridimensionamento automatico di un’immagine, fino ad occupare lo spazio orizzontale disponibile e mantenendone le proporzioni, tramite la regola:
img { max-width: 100%; height: auto; }
Fino a qui, niente di nuovo; d’altronde, quella sopra esposta è una regola che compare sistematicamente nel foglio di stile base di qualsiasi sito.
Ci sono però dei casi nei quali la semplice reattività di un’immagine non si traduce in un risultato apprezzabile dal punto di vista pratico.
Immaginiamo un’immagine di intestazione che, vista nella viewport di uno schermo ampio, occupa tutta la larghezza ed una certa altezza, ad es. 1920×850 pixel.
Nel momento in cui la viewport viene ridotta e l’immagine ridimensionata proporzionalmente, quest’ultima finirà con il risultare estremamente piccola e quindi inutile dal punto di vista del risultato. Eseguendo i classici “conticini” scolastici, si fa in fretta a capire: nella viewport di uno smartphone, 1920×850 diventa 480×213 pixel.
Per prevenire questo problema, una soluzione tradizionale consiste nel posizionare l’immagine non come elemento <img> bensì come sfondo del contenitore; man mano che la viewport viene ridotta, tale contenitore occupa sempre il 100% dello spazio disponibile ed una certa altezza minima mentre l’immagine di sfondo non si adatta, sicché ne verrà mostrata solo una parte.
Potete vedere un esempio di questa tecnica nella homepage del sito https://ottolina.com/ (grafica del sito by modus comunicazione visiva).
Si tratta di una tecnica funzionale ma con un possibile effetto sgradito: verrà mostrata solo una parte dell’immagine – tipicamente quella centrale – sicché si perderanno molti dettagli della stessa.
E’ indispensabile quindi scegliere un’immagine che mantenga un effetto accettabile anche in tale contesto.
Da menzionare, senza però raccomandarla, un’alternativa molto comoda ma, per così dire, estrema: rinunciare del tutto a mostrare l’immagine stessa quando la viewport scende al di sotto di una certa dimensione.
Esiste una terza possibilità che è finalizzata ad ottimizzare l’esperienza utente al prezzo di una preventiva preparazione di due o più immagini alternative: il tag picture di HTML5.
Nuova ondata di e-mail pirata
Stanno arrivando numerose e-mail, apparentemente inviate da Aruba, con l’invito a rinnovare un certo servizio effettivamente attivato con tale società.
Lo scopo è ovviaemente quello di acquisire i dati della vostra carta di credito.
Si rammenta che il metodo più veloce per individuare una truffa è quello di posizionare il cursore sopra al link “RINNOVA” o analogo, senza cliccare; nell’angolo in basso a sinistra dello schermo comparirà l’indirizzo della pagina che sarebbe aperta e che, ovviamente, non è appoggiato su aruba.it.
Una precauzione opportuna è quella di creare uno scadenziario dei servizi, in maniera tale da confrontare la scadenza indicata nella mail ricevuta – che solitamente è immediata – con quella annotata.
Attenzione anche ad un altro tipo di hacking: e-mail apparentemente provenienti da un fornitore di energia, con l’indicazione di un pagamento ingente già scaduto e la copia della bolletta in allegato: si tratta di files in formato .xls o .xlsx di Excel, verosimilmente con virus macro incorporati.
A monte di tutto, la prima regola da seguire è la seguente: prestate sempre la massima attenzione a tutte le mail che ricevete (mai leggerle sovrappensiero!) e dubitate di qualsiasi mail che vi chieda di fornire dati personali e/o di pagare, verificandone accuratamente 1) la provenienza e 2) la fondatezza della richiesta.
Inoltre, acquistate un pacchetto software antivirus serio e completo: quelli gratuiti difficilmente garantiscono una protezione efficace contro le minacce più sofisticate che girano sul web.