Un passo preliminare e importante in un progetto web è la realizzazione di un prototipo grafico. Esso è utile per evidenziare la struttura e gli elementi stilistici di base che saranno poi tradotti in codice XHTML (per la struttura) o CSS (per lo stile).
La struttura
Iniziamo con la struttura. Ecco l'immagine del prototipo strutturale realizzato con Fireworks.
La pagina principale del nostro blog (X-blog) è costituita da sei sezioni:
- Sezione principale: è quella che contiene tutte le altre e che definisce lo spazio della pagina destinato al blog
- Testata: qui inseriremo il logo
- Menu: barra di navigazione orizzontale con link alle sezioni interne del sito
- Contenuto: è una sorta di box che definisce la sezione centrale, a sua volta distinta in due sottosezioni
- Navigazione: contiene link esterni suddivisi in categorie
- Post: qui verranno inseriti i post di X-blog
Al momento di tradurre in XHTML questa struttura non faremo uso di tabelle. Ogni elemento deve fare il suo lavoro. Quando vorremo mostrare la classifica della serie A, useremo una tabella. Qui si tratta di definire sezioni, blocchi di contenuto generici e in XHTML l'elemento da usare è <div>.
Lo stile
A questo punto possiamo dare un pò di vita alla nuda collezione di box annidati vista in precedenza. È il momento creativo. Qui imposteremo colori, margini, font, spaziature. Ed anche questa volta è opportuno, prima di mettere mano al nostro editor CSS preferito, preparare il terreno con un buon prototipo grafico.
Da questa immagine potete farvi un'idea abbastanza precisa di come apparirà X-blog. Analizziamo alcuni dettagli:
- il font principale è Verdana, ma nel CSS vanno definiti caretteri alternativi
- la sezione menu ha uno sfondo giallo con testo rosso
- lo sfondo della sezione navigazione richiama quello della testata
- l'intestazione delle categorie va differenziata dai link: la prima sarà definita con un tag <h1>, i secondi con un <p>
- nella sezione post abbiamo questa struttura: titolo del post (<h1>), data (<h2>), testo (<p>)
Codice
Ora si può finalmente tradurre l'idea in codice. Ovviamente definiremo la struttura in XHTML, lo stile in un CSS.
Nel listato 3 abbiamo riportato il codice del documento "blog.html", la pagina principale. Notate innanzituto il rispetto delle regole di base XHTML (DOCTYPE, namespace, chiusura degli elementi, uso delle minuscole). Osservate poi la pulizia e l'essenzialità. La DTD usata è quella Strict. Il listato 4 contiene invece una versione commentata dello stesso documento: vi aiuterà a chiarire ogni aspetto relativo alla struttura. Attenzione però: il codice di questo documento vi serva da punto di riferimento, non consideratelo come un punto d'arrivo. Nella nostra applicazione esso sarà generato automaticamente grazie alla magia di XSL. Certo, il gioco potrebbe anche finire qui. Ma pensate al momento in cui dovrete inserire nuovi post. Vi sembra comodo dover intervenire ogni volta sul documento XHTML? Il nostro obbiettivo è separare i contenuti dalla presentazione. Quindi, ancora un pò di pazienza, ci arriveremo.
Nel foglio di stile "mainstyle.css" definiamo invece le regole di formattazione. Anche di questo file forniamo, nel listato 5, una versione commentata. Il CSS è piuttosto semplice.
Dopo le regole generiche per il tag <body>, contiene sei id (contraddistinti dal simbolo #), uno per ciascuna sezione:
- sezprinc
- testata
- menu
- contenuto
- navigazione
- post
Di ognuno sono definite le regole di formattazione (larghezza, margini, bordi, colori, font, etc) e ognuno viene associato ad un <div> nel file XHTML tramite l'attributo id:
<div id="sezprinc">, <div id="menu">, etc.
Inoltre, sono stati creati dei selettori contestuali. Visto che intendiamo usare il tag <p> o <h1> in diverse sezioni e visto che devono avere una formattazione diversa si usa questa particolare forma di selettore. Con #navigazione h1 stabilisco come deve apparire l'elemento <h1> all'interno della sezione navigazione, con #post h1 come appare nella sezione post.
Ricordiamo che tutti i documenti sono contenuti nell'allegato file dei materiali. Volendo testare il tutto, scompattate lo zip e aprite nel browser il documento "blog.html".
E le tabelle?
Ritorniamo ad un punto appena accennato. Il layout di X-blog è fatto senza tabelle. È una tecnica ancora non completamente matura, ma che comincia a dare buoni frutti proprio nel settore dei siti personali e dei blog. La non perfetta implementazione dei browser costringe ancora a usare vari trucchetti per superare alcune incompatibilità. Nei browser recenti (quinta e sesta generazione di Explorer, Netscape e Opera, più Mozilla) non avrete problemi. Rimangono i browser datati. Per questi il supporto di questo tipo di layout è carente. Ma un blog è un sito personale e se non si sperimenta qui non vedo dove. Le tecniche per l'implementazione di layout senza tabelle sono molte. La sezione riferimenti contiene un elenco di ottimi siti dedicati all'argomento. Nella prossima lezione ci limiteremo a spiegare il metodo usato per X-blog.
Riferimenti
La sezione riferimenti di questa lezione intende darvi un quadro dell'implementazione di layout senza tabelle, basati solo sui CSS:
Introduzione al layout con i CSS: introduzione? È un articolo completo, ben scritto, ricco di esempi, il migliore sull'argomento. Eric Costello sul sito di Apple.
CSS layout tecniques: il sito personale dello stesso Costello
CSS Edge: esperimenti con i CSS di Eric Meyer
Box Lesson: raccolta incomparabile di trucchi, tecniche e layout pronti per l'uso.
