WEB DESIGN FROM GROUND TO TOP | #DOLABWEBDESIGN LESSON 6

“Stasera una pioggia di codice cadrà sulle vostre teste!” tuona, scherzosamente, Andrea Barghigiani dando il via alla lezione. Siamo già a metà del nostro percorso, i dolabber sono in posizione davanti ai loro pc, pronti per inserire nuove stringhe di codice su Atom.
 
Diamo forma alla Testata e al Footer
Ricordiamo, sempre, che la Testata (header) e il Footer sono le parti essenziali di un sito. La testata sarà la nostra facciata, sarà la prima cosa che i nostri visitatori vedranno, conterrà cose come il nostro logo, i collegamenti ai social, il menù. Il footer, invece,sarà la parte dove il nostro visitatore “stazionerà” a fine scroll, dovranno esserci le informazioni sullo sviluppatore del sito e tutti i nostri contatti, sarà importante, dedicar loro molta attenzione.
 
“Normalizziamo”
“Ogni browser ha una propria religione” ci dice Andrea, per questo è essenziale utilizzare un file (normalize.css) che “normalizzi”, che consenta, cioè, coerenza cross-browser dello stile degli elementi HTML.
Il CSS3 richiede, per fortuna, l’intelligenza umana e va progettato ed organizzato con criterio. Vanno, ad esempio, specificati gli spazi nei paragrafi (<p>) per migliorare la leggibilità e se decidiamo di scegliere un font particolare, dobbiamo cercarne uno compatibile con più sistemi operativi possibili, possiamo anche utilizzare font squirrel per generare nuovi formati.
 
Data Sanitization and validation
Dobbiamo sempre controllare che la stringa sia scritta in maniera corretta e che il codice non sia malevolo. Fortunatamente l’html5 ha permesso di avere dei valori di input grazie ai quali possiamo controllare che non ci siano errori. Per controllare, invece, che il nostro codice sia pulito e al fine di indicizzare meglio il sito esistono dei “validatori” che seguono gli standard del consorzio w3c.
 
!important
Se vogliamo dare un valore unico a tutto il codice possiamo utilizzare un selettore universale in CSS3 (*{ ). Se, invece, vogliamo, che un valore prenda il sopravvento, surclassando il normale ordine a cascata del mio codice o eventuali precedenti comandi, si potrebbe utilizzare il comando !important. Può sembrare una scorciatoia facile, ma rende il codice meno pulito.
“Ogni volta che usi !important una fatina muore” sentenzia Andrea e con questa perla di saggezza e una grossa risata si conclude un’altra intensa serata di programmazione.
 
Mentre si spengono i computer e si sistemano le borse i commenti sono tanti, tra le risate per le fatine e i feedback di fine lezione si respira un’aria allegra. Il corso è davvero denso di nozioni, ma Andrea non è solo molto bravo nelle spiegazioni, riesce anche a rendere la lezione divertente e questo è un grande merito.
L’appuntamento è alla prossima lezione: continueremo a parlare di codici, naturalmente, e di come dare carattere al nostro sito con le immagini e organizzare i contenuti.
Stay Tuned!
E se sei uno smanettone del web, non potrai perdere il corso “Crea il Tuo e-commerce con WordPress“, che partirà il 23 Maggio. Molti conoscono la facilità d’uso e la vocazione al marketing di WordPress, ma creare un e-commerce che faccia vendere non è da tutti. Con questo workshop imparerai i trucchi che ti permetteranno di vendere prodotti o servizi con il tuo sito o blog, anche se non sei un programmatore.
Marilena Tonnetti