4 Creare contenuti per il web - Andrea Giachetti

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