4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
84<br />
solo <strong>per</strong> gli elementi block-level) si controlla con textalign che può assumere valori<br />
left, right, justify.<br />
Come abbiamo già visto, <strong>il</strong> colore del testo si controlla con color:nomecolore; quello<br />
dello sfondo con background:valore; qui <strong>il</strong> valore oltre che di colore può anche essere<br />
transparent, cioè si può rendere lo sfondo trasparente. Un'ulteriore possib<strong>il</strong>ità è quella di<br />
mettere come sfondo dell'elemento un'immagine, in tal caso si indica:<br />
background:url(indirizzoimmagine) con eventuale indicazioni su come<br />
l'immagine vada scalata o ripetuta ( repeat, norepeat, repeatx, repeaty,<br />
fixed, scroll )<br />
✔ Nota: valori ut<strong>il</strong>izzab<strong>il</strong>i <strong>per</strong> i colori<br />
Abbiamo visto molti esempi, ma non abbiamo descritto in dettaglio come effettivamente si<br />
controllano i valori dei colori degli elementi, <strong>per</strong> cui rimediamo.<br />
Esistono in HTML/CSS 16 nomi di colori predefiniti che consentono l'uso della semplice<br />
sintassi color=”nome”. Questi sono: aqua, black, blue, fuchsia, gray,<br />
green, lime, maroon, navy, olive, purple, red, s<strong>il</strong>ver, teal,<br />
white, yellow.<br />
Per controllare invece le sfumature della tinta in dettaglio, possiamo ut<strong>il</strong>izzare due differenti<br />
notazioni: la prima è quella esadecimale, che si può ottenere scrivendo, ad esempio,<br />
color=”#RRGGBB” negli elementi HTML e color:#RRGGBB nelle regole CSS, ove RR,<br />
GG, BB sono, appunto, numeri esadecimali di due cifre che codificano numeri da 0 a 255 <strong>per</strong> le<br />
componenti rispettivamente di rosso, verde e blu. Pur essendo poco intuitivo (le cifre<br />
esadecimali vanno da 0 a F) <strong>il</strong> metodo è <strong>il</strong> più usato; ad esempio color=#00ff00 vuol dire<br />
verde saturo, color=#400040 è un violetto poco saturo (rosso+blu) eccetera. Nelle regole<br />
di st<strong>il</strong>e si può comunque usare la notazione RGB anche in decimale, ut<strong>il</strong>izzando<br />
color=rgb(r,g,b), con valori 0-255 o <strong>per</strong>centuali, come in color:rgb(200,0,255)<br />
o color:rgb(10%,50%,100%).<br />
✔ Nota: la leggib<strong>il</strong>ità del testo sul <strong>web</strong><br />
Al di là del come si possa tecnicamente variare l'aspetto del testo delle pagine, ha senso<br />
chiedersi se esistano delle regole sensate <strong>per</strong> scegliere nei nostri documenti tipologia, colori o<br />
dimensioni dei caratteri in modo da renderli più efficaci e gradevoli, cioè qual è la scelta che<br />
migliora l'usab<strong>il</strong>ità del sito. Uno dei criteri <strong>per</strong> rendere più efficiente l'ut<strong>il</strong>izzo dei siti <strong>web</strong> è<br />
certamente quello di rendere più leggib<strong>il</strong>i le informazioni ut<strong>il</strong>i. A questo scopo si sono fatti vari<br />
studi s<strong>per</strong>imentali misurando, ad esempio, la velocità di lettura (cronometrando l'esecuzione di<br />
opportuni task). Si è notato che tale velocità dipende da tipo e dimensione dei caratteri. I tipi di<br />
caratteri si dividono in due principali famiglie: con grazie (es Times) e senza grazie, cioè<br />
abbellimenti ai bordi (es. Arial). Esistono poi i vari st<strong>il</strong>i (corsivo, grassetto). Si è visto che i<br />
font senza grazie sono più leggib<strong>il</strong>i sullo schermo (a differenza che sulla carta) e che sullo<br />
schermo <strong>il</strong> corsivo è meno leggib<strong>il</strong>e (<strong>per</strong> via dell'aliasing, cioè degli artefatti che si creano a<br />
causa della dimensione finita dei punti dello schermo o pixel). La dimensione più grande<br />
migliora la leggib<strong>il</strong>ità e valgono ovviamente le considerazioni viste prima <strong>per</strong> i colori (l'azzurro<br />
è meno leggib<strong>il</strong>e, i contrasti di luminosità vanno preferiti a quelli di tinta). Il minuscolo è più