4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
leggib<strong>il</strong>e del maiuscolo (la ragione sta nel fatto che in<br />
realtà non leggiamo lettera <strong>per</strong> lettera le parole, ma di<br />
solito le riconosciamo dalla struttura grafica<br />
complessiva, più riconoscib<strong>il</strong>e nel minuscolo <strong>per</strong> via<br />
delle diverse altezze dei caratteri. Altra cosa da notare:<br />
sul <strong>web</strong> non leggiamo tipicamente tutti i <strong>contenuti</strong>, ma<br />
esistono delle tendenze consolidate a cercare le<br />
informazioni interessanti in determinate regioni. Jacob<br />
Nielsen (www.useit.com) ha studiato <strong>il</strong> fenomeno,<br />
trovando con es<strong>per</strong>imenti di eye tracking, che lo<br />
sguardo degli utenti sull'interfaccia del browser <strong>web</strong> si<br />
concentra, di solito, in un pattern ad F nella parte in<br />
alto a sinistra (Figura 40). E' buona norma, quindi,<br />
inserire nelle pagine in tali posizioni ed evidenziare, ad<br />
esempio, con elenchi puntati, le informazioni più<br />
importanti. Si può osservare che la maggior parte dei<br />
siti <strong>web</strong> è strutturato proprio in questo modo.<br />
<strong>Creare</strong> <strong>contenuti</strong> <strong>per</strong> <strong>il</strong> <strong>web</strong>: (X)HTML e CSS in dettaglio 85<br />
4.11 Gestione del layout con le regole di st<strong>il</strong>e<br />
Figura 40: Il pattern di lettura ad F<br />
verificato negli es<strong>per</strong>imenti di Eye<br />
Tracking (da www.useit.com) . Le zone<br />
evidenziate sono quelle in cui si sofferma<br />
di più lo sguardo degli utenti.<br />
L'altra cosa importante che le regole di st<strong>il</strong>e <strong>per</strong>mettono fac<strong>il</strong>mente di realizzare è la gestione<br />
dell'aspetto grafico (spazi, organizzazione, caselle, ecc.) che si indica generalmente con <strong>il</strong><br />
termine layout.<br />
La gestione degli spazi è importantissima <strong>per</strong> rendere efficace <strong>il</strong> contenuto ed evidenziare le<br />
parti importanti. Nell'(X)HTML standard le possib<strong>il</strong>ità di gestione del layout erano limitate, non<br />
si potevano posizionare le parti a piacimento, tanto che <strong>per</strong> creare struttura, colonne, spazi <strong>per</strong><br />
menu, eccetera si dovevano usare spesso le tabelle, seppure impropriamente.<br />
L'uso dei CSS consente, invece, un'organizzazione completa e flessib<strong>il</strong>e, separando, tra l'altro<br />
l'impaginazione dal contenuto e dando così la possib<strong>il</strong>ità di cambiare <strong>il</strong> layout senza toccare <strong>il</strong><br />
contenuto. Esso consente anche di creare i cosiddetti layout “liquidi”, cioè che cambiano<br />
quando si ridimensiona la finestra del browser.<br />
La gestione dell'impaginazione è semplice: <strong>il</strong> documento (X)HTML, infatti, è strutturato in<br />
sezioni logiche cui si possono assegnare vari tipi di attributi. Se si vuole raggruppare una parte<br />
di documento e rendere la stessa posizionab<strong>il</strong>e ovunque sull'interfaccia, basta includerla<br />
all'interno di un elemento block generico come .<br />
Si crea così un modello di documento a “box”, dove ogni sezione (div) è, appunto, come una<br />
scatola che include <strong>contenuti</strong>, e di cui si possono controllare posizionamento, spazio circostante,<br />
bordi esterni, margini e così via.<br />
Le “scatole” si possono posizionare all'interno della pagina in due modi: nel flusso del<br />
documento (vengono, cioè, rappresentate dal browser dall'alto in basso nell'ordine in cui sono<br />
presentate, come accade col semplice HTML) o posizionandole liberamente in coordinate esatte<br />
rispetto al genitore (posizionamento assoluto), alla finestra del browser (posizionamento fisso) o<br />
relativamente alla posizione determinata dal flusso (posizionamento relativo). Le scatole si<br />
possono anche sovrapporre, e la visib<strong>il</strong>ità sarà gestib<strong>il</strong>e con un attributo con cui specificare la<br />
profondità (z-index).