Il documento illustra come modificare l'aspetto grafico di un sito web, analogamente a mente, corpo e trucco: la programmazione rappresenta la logica di funzionamento, la struttura è data dal codice HTML e lo stile è gestito attraverso i fogli di stile CSS. Viene spiegato l'importanza dell'ereditarietà e di come il trucco (stili) debba essere separato dalla struttura del corpo (HTML) per facilitare eventuali modifiche future. Inoltre, viene presentata la priorità con cui il browser applica le regole CSS e l'importanza dell'esperienza pratica nella gestione del design web.

1. Alla “faccia” del sito Come cambiare “aspetto” grafico a un sito web senza scomodare i programmatori

2. Mente, Corpo, Make-UP Mente : la programmazione è la “mente” di un sito, ovvero le istruzioni che governano le varie funzioni presenti nelle pagine web Corpo : la “struttura”, il corpo appunto, è come si presenta un sito Make-UP : il “trucco” di un sito deve essere intercambiabile, indipendente da cosa pensa la “mente” o da com’è fatto il “corpo”... al fine di poter cambiare stile

3. Sito = file e cartelle su internet un sito è un insieme di file e cartelle che sono un computer collegati a internet 24h/24h http://www.retecontabile-er.it/Riservata/Login/Login_Form.cfm vuole dire che nel “compuer” www.retecontabile-er.it c’è una cartella denominata Riservata , dentro alla quale ce n’è un’altra che si chiama Login ; all’interno di quest’ultima c’è un file che si chiama Login_Form.cfm i file sono testuali, ovvero che si possono leggere col semplice blocco note di windows dentro ai file che compongono un sito internet ci sono le “ istruzioni della mente ” e le “ parti del corpo ”

4. Mente, Corpo (reprised...) Istruzioni della mente : le righe dei file che iniziano cone “ <CF ” sono la programmazione, ovvero le istruioni che governano il funzionamento del sito (a pannaggio dei programmatori) Parti del Corpo : la righe dei file che descrivono la “struttura” del sito sono il famoso “codice HTML” <corpo> <testa> sono un zuccone <occhio /> <occhio /> <bocca><lingua /></bocca> </testa> <braccio> <mano><dito ... /><dito ... /><dito ... /><dito ... /><dito ... /></mano> [...] </braccio> [...] </corpo>

5. Make-UP (reprised...) dov’è il “trucco” : il codice (le righe) che descrivono il “make-up”, ovvero lo stile, con cui si presenta il “corpo”, ovvero il sito NON dovrebbero essere dentro questi file: se ho gli occhi marroni non è necessario che “scriva” in ogni occhio che è il suo colore è marrone se un giorno mi metto le lenti a contatto verdi non devo modificare il corpo, ma solo lo stile dov’è lo stile : il codice CSS , i “famosi” fogli di stile sono esterni ai file del sito (tipicamente in una cartella a parte): se il font del sito sia sempre “Arial” NON devo scriverlo in tutti file, ma solo una volta, nel foglio di stile se voglio stampare il sito su carta, basta che scelga il foglio di stile opportuno, senza modificare i file che compongono il sito

6. Conoscere il proprio corpo per creare lo stile migliore Il corpo è composto da elementi disposti con una struttura gerarchica che assomiglia alle scatole cinesi la struttura del sito, creata tramite il linguaggio HTML, descrive il cosiddetto “box-model” (box=scatola)

7. Conoscere il proprio corpo per creare lo stile migliore: ereditarietà se la pelle del “corpo” è rosa , anche la pelle delle braccia, delle mani, delle gambe è rosa se una scatola ha una caratteristica (tipicamente) tale caratteristica viene EREDITATA anche dalle scatole in essa contenute

8. Collegare il Make-UP al corpo Se nei file del sito NON devo mettere lo stile, dove creo il collegamento fra le varie parti del corpo (struttura HTML) alle proprietà stilistiche (CSS)? USANDO il nome degli elementi html tutti i link di colore rosso: a {color:red} RAGGRUPPANDO in classi gli elementi con caratteristiche comuni tutte le righe della tabella di classe=”dispari”, grigie: tr.dispari {background-color:gray} IDENTIFICANDO univocamente un elemento che ha caratteristiche particolare il titolo con ID=”main” bordato di verde: h2#main {color:red} con l’EREDITARIETA’ indicando un elemento in base all’elemento che lo contiene (in modo ricorsivo ) la riga di menù dentro al blocco “navigazione”, a sua volta incluso nel blocco “header”, deve essere in grassetto: #header div.navigazione ul li {font-weight:bold}

9. In che ordine viene applicato il trucco? Le palpebre sono di base “rosa”; quando vado al lavoro, in genere, metto lo stile “gestionale” nel quale il colore degli occhi è corretto con l’ombretto viola. Sempre nel contesto “gestionale”, può succedere che entri nel mio ufficio l’amante e io entro nella funzione “piano dei conti”, apponendo un ulteriore ritocco all’ombretto, rendendolo dorato foglio di stile “generic.css”  .occhi {color: pink} foglio di stile “gestionale.css”  .occhi {color: violet} foglio di stile “pianoconti.css”  .occhi {color: gold} a PARITA’ DI PRIORITA’ le regole di stile CSS vengono applicate in ordine inverso a come appaio dichiarate. In poche parole, l’ultima è quella che conta Questo è importante perchè io posso avere: più fogli di stile più dichiarazioni nello stesso foglio di stile dichiarazioni di stile anche internamente ai file del sito (anche se sconsigliato) dichiarazioni di stile anche all’interno dei singoli elementi HTML (sconsigliatissimo)

10. Con che priorità viene applicato il trucco? Non è banale capire con che priorità il browser internet (Internet Explorer, Firefox, ecc.) applica lo stile a una pagina web. Questi software si occupano infatti di “leggere” il codice HTML e applicarvi sopra le dichiarazioni di stile CSS (proprio come mettere una maschera di trucco sul viso) Ci sono regole legate anche alla logica e altre che si acquisiscono solo con l’esperienza sul campo; segue un tentativo di indicare l’ordine di priorità N.B. : ricordare che la miglior regola è il “buon senso” Proprietà HTML CSS 1 identificativo <h2 id=”main”>...</h2> h2#main {...} 2 identificativo (non strettamente correlato all’elemento) <p id=”main”>...</p> oppure <li id=”main”>...</li> [...] #main {...} 3 ereditarietà multipla, diretta e univoca <div id=”header”> <div class=”content”> <p><h1>...</h1></p> </div> </div> div#header div.content p h1 {...} 4 ereditarietà diretta e univoca <div id=”header”> <h1>...</h1> </div> div#header h1 {...} 5 ererditarietà diretta non univoca <div><h1>...</h1></div> div h1 {...} 6 ereditarietà indiretta univaoca <div id=”header”> <div class=”content”> <p><h1>...</h1></p> </div> </div> div#header h1 {...} 7 ereditarietà indiretta non univoca <div id=”header”> <div class=”content”> <p><h1>...</h1></p> </div> </div> div h1 {...}

11. Ora che so in che modo e ordine sono applicate le proprietà... Devo pensare e decidere cosa voglio modificare in termini di stile tutte le caratteristiche di un elemento in tutto il sito? (ad esempio, il font utilizzato nel sito...perchè il Times New Roman fa schifo!) le caratteristiche di un elemento solo in alcune pagine? (ad esempio, il colore di sfondo delle pagine della categoria “Servizi”) le caratteristiche di un elemento specifico? (ad esempio, una tabella particolare presente solo nella funzione consulta archivi) Devo controllare le pagine web di cui sto per modificare lo stile per conoscere la struttura HTML, fondamentale per utilizzare l’ereditarietà Nel sito retecontabile-er.it, devo sempre lavorare (salvo eccezioni) all’interno del “blocco” <div id=”dStandardContent”>...</div> , dunque le dichiarazioni dovrebbero iniziare tutte con # dStandardContent (anche al fine di non intaccare lo stile dell’intestazione e del menu di navigazione del sito) Devo aprire il file “.css” opportuno (a seconda che voglia apportare modifiche stilistiche a tutto il sito, solo alle pagine di una categorie oppure alle sole pagine relative ad una funzione specifica) Devo aprire il sito http://www.w3schools.com/css/css_reference.asp in cui trovo tutte le possibili proprietà CSS e gli elementi a cui sono applicabili

12. Sicuro sicuro che è sufficiente quello che ho imparato? Se l’ereditarietà o la struttura HTML non sono sufficienti a distinguere un elemento o un gruppo di elementi per definirne lo stile peculiare, puoi aggiungere all’HTML (con il beneplacito del programmatore;-) gli attributi ID o CLASS ad esempio, se in una tabella vuoi evidenziare le righe dispari rispetto alle pari è necessario che nell’HTML ci sia l’attributo class nelle righe pari (o dispari) <table> <tr><td>tizio</td><td>caio</td><td>sempronio</td></tr> <tr class=’pari’ ><td>qui</td><td>quo</td><td>qua</td></tr> [...] <tr><td>topolino</td><td>minnie</td><td>pluto</td></tr> <tr class=’pari’ ><td>drupi</td><td>scialpi</td><td id=”ghinazzi” >pupo</td></tr> </table> /* CSS */ td {bacground-color: transparent} tr.pari {bacground-color: pink} td#ghinazzi {bacground-color: green} Come anticipato, molto importante è l’esperienza, perchè: Internet Explorer si comporta in modo anomalo con i margini e con le dimensioni alcuni elementi html NON accettano lo stile (nell’esempio sopra si noti che lo sfondo è stato attribuito alla singola cella (<TD>) perchè la riga (<TR>) non lo accetta ... tizio caio sempronio qui quo qua topolino minnie pluto drupi scialpi pupo

13. Qualcos’altro di interessante o utile? margin, padding, border... guarda la figura a lato per capire qual è lo “spazio d’azione” di queste 3 proprietà link (<a>) i link hanno 4 “pseudo-proprietà” per definire il momento in cui ci sono sopra (hover) con il mouse, il momento in cui li clicco (active), quello in cui sono già stati visitati (visited) e, naturalmente, lo stato iniziale (link) uso a {...} per definire caratteristiche per il link in qualunque stato esso si trovi (ad es.: il tipo di font) uso a:link {...} per definire le proprietà nel link NON visitato e senza mouse sopra uso a:visited {...} per definire le proprietà nel link visitato e senza mouse sopra uso a:hover {...} per definire le proprietà nel link quando c’è il mouse sopra uso a:active {...} per definire le proprietà nel link quando sto cliccando L’ORDINE IN CUI SONO PRESENTATI VA MANTENUTO!!! (LoVe HAte)

14. Per concludere... ...se avete bisogno, fatemi un fischio;-)