Tabella sta a layout come panna sta a trichechi
Siete convinti a voler partecipare al torneo di golf che il vostro club sta organizzando: è l'occasione giusta per far vedere a quell'insolente dell'avvocato Turcheselli di che pasta siete fatti. Perchè voi siete bravi, avete lo swing giusto, emanate classe da tutti i pori. Perfetto: su le scarpette, il guanto, sacca in spalla e via verso la prima delle diciotto buche.
Siete belli come il sole, e la camicia nuova mezze maniche risalta ottimamente con il verde del campo. Tutto perfetto, tranne un piccolo particolare: avete portato solo il putter.
Pallaaa!
Usare le tabelle per impaginare i propri documenti è esattamente come partecipare ad un torneo di golf con una mazza sola: stupido e controproducente.
L'html è un linguaggio ricco, e le sue gemme preziose sono i tag, disponibili in un centinaio di esemplari unici. Un linguaggio di markup ha il compito e il pregio di descrivere il contenuto, attribuirgli un significato aggiunto, in modo tale che esso possa essere compreso anche da una macchina.
Spesso mi domando come questo sia un concetto incompreso e sottovalutato. A parte i vantaggi pratici di un codice ricco e corretto - primo tra tutti una migliore indicizzazione da parte dei motori di ricerca - usare le tabelle per strutturare le nostre pagine significa usare html al minimo delle sue capacità (se fosse una macchina, sarebbe come usarla sempre in retromarcia, sia per andare a fare la spesa che per andare a trovare i propri parenti all'altro capo del Paese).
Insomma, abbiamo più di cento tag per dare vita ai nostri contenuti e noi usiamo sempre e solo quei tre quattro legati all'ormai mitico table. A questo punto la spiegazione a questo strambo atteggiamento è una sola: hanno tutti paura di questo maledetto codice. O perlomeno, io non riesco a trovare altre risposte plausibili.
Vola! Vola!
Chi apre il proprio editor visuale e comincia a creare rettangoli in maniera forsennata, vuoi per piazzarci dentro immagini, vuoi testo, vuoi chessoìo, la maggior parte delle volte non si rende conto di cosa stia facendo, o meglio, forse sta semplicemente pensando nel modo sbagliato.
Il web non è la carta stampata e di conseguenza trovo fuorviante pensare ad esso come se lo fosse. La sua vera potenza è la sua semplicità, la possibilità data a tutti di condividere. Se io voglio che un mio articolo venga letto da un ampio numero di interessati, e scelgo il web come mezzo di diffusione, allora dovrò entrare nel meccanismo e seguire certe regole, che, credetemi, sono tutto fuori che limitative o repressive, al contrario. Se voglio che il mio articolo venga trovato da un motore di ricerca, bè, sarà mio primo interesse scriverlo in modo tale da facilitarne l'indicizzazione.
Basta fare un bel respiro, fermarsi un attimo e analizzare il contenuto che vogliamo pubblicare: cosa vogliamo dire, a chi, in quale tono? Concentrarsi sul contenuto è essenziale, perchè è proprio quello che in fondo ci ha messo in moto davanti alla tastiera; i fronzoli stilistici, le superficialità, gli spazi riempiti di zucchero filato, tutto questo non ha senso e deve stare fuori dalla porta del web, fuori dalla porta della nostra persona.
Tranquillo, non morde
La storia ci insegna che la paura genera nell'uomo un irragionevole comportamento: non spaventiamoci per niente e cerchiamo di avvicinarci, tranquilli e sereni. Il codice non morde.
Riprendiamo dall'esempio dell'articolo che vogliamo pubblicare: un qualsiasi web designer della domenica aprirebbe il suo fidato Front Page, Dreamweaver (per tipi fighi) o altro, e comincerebbe, di fronte alla pagina bianca, piazzando subito una bella tabella al centro. Da qualche parte il testo dovremo pur metterlo, no?
Secondo passaggio: suddivisione in tre celle, una per il titolo, una per la data e una per il testo e le immagini. E poi via, andiamo subito a riempire la prima con un titolo accattivante; a questo punto selezioniamo il testo e lo rendiamo grassetto, rosso, Verdana 7pt tramite la barra delle proprietà. Stessa cosa per la data e il resto dell'articolo. Ah, che meraviglia: colorato, bello e luminoso (merito soprattutto della gif animata che evidenzia il pulsante per tornare all'home page).
Andiamo a vedere il codice di questa soluzione.
Cosa c'è di strano, direte? E se io vi dico che tutto quello che basta (e che lavora meglio) ècodice:<table width="938" height="334" border="0"> <tr> <td height="169"> <font color="#FF0000" size="7" face="Verdana, sans-serif"> Tabella sta a layout come panna sta a trichechi </font> </td> </tr> <tr> <td> <font color="#999999" face="Verdana, sans-serif">26 aprile 2005</font> </td> </tr> <tr> <td>Ciao a tutti, questo è il mio articolo.</td> </tr> </table>
voi cosa rispondete? Che sono matto? Tre righe al posto di diciassette? Impossibile, direte, eppure è proprio così: l'essenzialità è ciò che conta. Niente, siete ancora sbigottiti? Per l'ultima volta: vi assicuro che la mia soluzione è un miliardo di volte più efficace della vostra. Vediamo perchè.codice:<h1>Tabella sta a layout come panna sta a trichechi</h1> <span>26 aprile 2005</span> Ciao a tutti, questo è il mio articolo.</p>
Guarda la luna, non il dito
Accennavamo prima al fatto che un linguaggio di markup serve a descrivere il contenuto, non a dargli una forma. Seguendo questo semplicissimo principio ne deriva che tutto ciò che andrà a comporre il codice html del nostro articolo sarà una serie di tag che andranno a descriverlo al meglio, individuando le sue diverse parti (titolo, data, autore, ...). Tutto qui.
A questo punto direte: «Sono capace anch'io di passare da diciassette righe di codice a sole tre, eliminando tutti gli elementi atti a determinare la visualizzazione finale sul monitor!». Bene, bravi, allora fatelo!
Il trucco sta tutto qui: separare il contenuto dalla presentazione. Via tutti i tag font, via tutte quelle celle di tabella, via tutti quegli attributi di stile: l'importante è solo ed esclusivamente il contenuto. Una volta ottenuta una struttura di markup solida, pura, coerente e autoesplicativa allora sì che potremo divertirci a colorare lo sfondo e piazzare in giro immagini colorate.
Per gestire tutta questa parte grafica ci affideremo ai css, ovvero l'innovativo (e veramente semplice) linguaggio per il web nato proprio per questo scopo, che ci permette in maniera intuitiva di traghettare tutti gli attributi di stile in uno o più file esterni, da collegare poi a ogni documento. Risultato? Codice html pulito e semantico e gestione della grafica centralizzata. Tradotto in termini pratici? Ordine. Meraviglioso e fruttuoso ordine.
Sì, non capite? Ci viene servita la possibilità di concentrarci su una cosa per volta, evitando inutili ripetizioni ed ottimizzando il nostro tempo e la nostra produttività
Lui gioca da solo in quanto indossa scarpe diverse
Attenzione: tutto questo discorso non è incentrato a discriminare o demonizzare le tabelle, quanto piuttosto il loro uso sbagliato e dannoso. Le tabelle vanno usate per intabellare dati tabellari, e sono uno strumento di tutto rispetto, nonchè abbastanza complicate da utilizzare nel modo corretto.
Insomma, come per tutti gli altri tag, le tabelle vanno utilizzate prettamente per lo scopo per cui sono state inventate.
P.S. Articoli come questi pensate possano tornarvi utili se uniti tutti in una collezione? Gli argomenti verrebbero trattati tutti in questo modo, e spazierebbero dagli standard all'accessibilità e affini. Che ne pensate? E' un progetto che abbiamo in mente gizax, andrea.paiola ed io. Si accettano pareri.
Rispondi quotando
E' così banale da capire! Vabbè, andiamo avanti.
