Confronto menù semantico - menù con tabelle

In quest'articolo esamineremo due menù, graficmanete identici, ma realizzati con tecniche molto diverse fra loro. Il primo è un menù realizzato con una tabelle che realizzai nel lontano 2001, il secondo è la sua riscrittura com codice semantico.

Per poter valutare un menù od una pagina web dobbiamo però considera il periodo in cui è stata creata, infatti il mio menu del 2001 attualmente è criticabile per molti aspetti, ma in quel periodo (a parte le mie scarse conoscenze dei CSS) la percentuale dei navigatori con browsers che non supportavano in modo sufficiente i CSS era elevata. Nel 2001 il browser che la faceva da padrone era IE 5, ma netscape 4 era ancora diffuso. Se vi ricordate in quegli anni dovunque si trovano cd-rom con il programmino per entrare in internet ed oltre ad altri programmi era presente anche netscape 4 (prima 4.5 poi 4.7) ed explorer (5 o 5.5), quindi la probabilità che qualcuno usasse netscape esisteva, anche se IE era più performante. Ora la situazione è radicalmente cambiata, infatti con l'uscita di IE 6 molti hanno aggiornato il loro browsers, ma non solo, cambiando il pc o il sistema operativo si sono trovati già installato IE 6, mentre i fedelissimi di netscape da prima hanno aggiornato a NS 6 per poi passare a Mozilla. Quest'ultimo, basandosi sul motore di gecko (di derivazione Netscape) ha attirato i fedeli di netscape ed i nemici di IE, inoltre le grandi falle di sicurezza di IE (causate per lo più da funzioni proprietarie di Microsoft) hanno indirizzato molti utenti su Mozilla nelle sue varie versioni fra le quali FireFox. Oltre a questo bisogna anche ricordare che in quel periodo (specialmente in Italia) nessuno parlava ancora di standard e di usabilità, figuriamo del web semantico. In quel periodo la facevano da padroni i web designer, il sito doveva essere come una fotografia perfetto ed uguale su qualsiasi browsers, aggiungo per windows anche perchè rendere un sito perfetto anche per software che giravano su altri sistemi operativi era praticamente impossibile e quindi si faceva finta di nulla, anzi si metteva sito ottimizato per xxxx e ci si lavava la coscienza facendo credere all'utente che era lui ad avere il browser sbagliato... In quel periodo creare un sito che si presentasse in modo differente sui vari browsers o versioni diverse di IE era quasi un'eresia e allora si andava giù pesante con tabelle, immagini trasparenti per ottenere sempre la stessa spaziatura, menù fatti con immagini e rollover perchè si vedessero ovunque nello stesso identico modo, i css erano poco utilizzati perchè erano resi in maniera differente e quindi si preferiva la formattazione in linea tramite i tag dell'HTML 3.2.
A quel tempo anch'io volevo che la grafica dei miei siti fosse sempre identica ovunque, l'unica cosa su cui non ho mai concordato erano i menù fatti con le immagini, questo perchè dover creare due immagini per ogni links lo trovavo troppo laborioso e poi in caso di modifica del testo di un link si dovevano ricreare altre 2 immagini. La mia soluzione (e anche di molti altri) per creare un menu praticamente uguale sui vari browsers senza dover usare immagini era quello di usare le tabelle!
Lo stesso sistema usato da molti per incolonnare perfettamente le immagini-links, ma ora le cose sono cambiate, i browsers sono migliori e l'attenzione agli standard è aumentata.

Dopo questa lunga premessa, passiamo al vero confronto fra i menù ed analizziamo i pro e i contro.

Graficamente i 2 menu sono perfettamente identici, in questa pagina potete vedere come si presentano con alcuni browsers attualmente in circolazione, i problemi come già detto nascono con i browsers di vecchia generazione, ma questo lo vedremo dopo, ora passiamo ai codici.

Codice nella pagina del menù realizzato in maniera classica:
<table border="0" width="170"> <tr> <td bgcolor="#FF0000">menù</td> </tr> <tr> <td bgcolor="#FFFF00"><a href="rocca.htm"> homepage</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="doverocca.htm"> dove siamo</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="storia.htm"> storia</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="chiese-monumenti.htm"> da visitare</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="eventi/index.htm"> eventi, manifestazioni</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="javascript:linkpremio()"> premio letterario</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="terremoto/index.htm"> il terremoto</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="javascript:linkfoto()">foto </a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="curiosita.htm"> curiosità</a></td> </tr> <tr> <td bgcolor="#FFFF00" class="titoli-menu">Le frazioni</td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';">Sant'Anna</td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="sancarlo/principale.htm"> San Carlo</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="santacaterina/principale.htm"> Santa Caterina</a></td> </tr> <tr> <td bgcolor="#FFFF00" class="titoli-menu">download</td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="download/calendario/index.htm"> il calendario</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="download/sfondi_dt.htm"> sfondi per il desktop</a></td> </tr> <tr> <td bgcolor="#FFFF00" class="titoli-menu">ufficio postale</td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="guestbook.htm"> il libro degli ospiti</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="contattaci.htm"> contattaci</a> </td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="mailinglist.htm"> mailing list</a></td> </tr> <tr> <td bgcolor="#FFFF00" class="titoli-menu">e in più</td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="freemail.htm"> caselle e-mail gratis</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="faq.htm"> FAQ</a></td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="links.htm"> links</a></td> </tr> <tr> <td bgcolor="#FFFF00" class="titoli-menu">webmaster</td> </tr> <tr> <td bgcolor="#FF0000" onmouseover="this.className='cella-on'" onmouseout="this.className='cella-off';"><a href="../link/enrico.htm"> Enrico Masenga</a></td> </tr> </table>

124 righe di codice nella pagine per un menù con 27 voci, ma non è ancora finita qui, in questo menù al passaggio sui links questi cambiano colore e anche lo sfondo della cella cambiava colore. Il primo effetto era ottenuto con i CSS che erano già utilizzati ma in modo blando, il secondo era ottenuto tramite gli eventi onMouseOver e onMouseOut di JavaScript che al passaggio si occupavano di cambiale la classe di stile (assegnata anche questa nel CSS) a seconda dello stato. Per cambiare lo sfondo avevo scelto il sistema di cambiare una classe associata alla cella perchè era un sistema più snello e pratico di alcuni JavaScript in circolazione che in modo relativamente complesso cambiavano le proprietà della cella anche con netscape 4, il mio sistema di cambio dello sfondo invece non era compatibile con questo browser, ma dato la sua scarsa diffusione e l'effetto non indispensabile avevo preferito questo sistema.

Per completezza vi metto anche il CSS relativo a questo menù: A:LINK{ Color : #ffffff; font-size : 12 pt; text-decoration : none; font-weight : bold; } A:VISITED{ Color : #ffff00; font-size : 12 pt; text-decoration : none; font-weight : bold; } A:HOVER{ Color : #00ff00; font-size : 12 pt; text-decoration : underline; font-weight : bold; } td{ text-align : center; color : #FF0000; } .cella-on{ background-color: #FF6A6A; } .cella-off{ background-color: #FF0000; } .titoli-menu{ Color : #FF0000; font-size : 13 pt; font-weight : bold; }

Riepilogando per questo menù occorrevano 124 righe di codice html più 33 righe di CSS, tutto questo codice però mi permetteva di avere praticamente la stessa visualizzazione sia con IE che con Netscape 4 e attualmente permette di ottenere lo stessa resa con tutti i browsers. Esiste però un problema che si riscontra utilizza Jaws, che è uno screen reader utilizzato dai non vedenti, infatti questo programma legge anche i comandi onMouseOver e Out che messi nei tag <td> . Per risolvere il problema si potrebbe semplicemente eliminare questi eventi ed usare le funzioni dei CSS che ho usato per la nuova versione del menù, ma perchè limitarci solo a questa piccola miglioria quando potremmo avere di più?

Vediamo la versione moderna di questo menù che graficamente resta identico come potete constatare in questa pagina.
<div id="menu"> <ul> <li>menù</li> <li><a class="mtitolo" href="rocca.htm">homepage</a></li> <li><a href="doverocca.htm">dove siamo</a></li> <li><a href="storia.htm">storia</a></li> <li><a href="chiese-monumenti.htm">da visitare</a></li> <li><a href="eventi/index.htm">eventi, manifestazioni</a></li> <li><a href="premioletterario/index.htm" onclick="linkpremio(); return false">premio letterario</a></li> <li><a href="terremoto/index.htm" target="_top">il terremoto</a></li> <li><a href="immagini/foto.htm" onclick="linkfoto(); return false">foto</a></li> <li><a href="curiosita.htm">curiosità</a></li> <li>Le frazioni</li> <li><a href="santanna/principale.htm">Sant'Anna</a></li> <li><a href="sancarlo/principale.htm">San Carlo</a></li> <li><a href="santacaterina/principale.htm">Santa Caterina</a></li> <li>download</li> <li><a href="download/calendario/index.htm">il calendario</a></li> <li><a href="download/sfondi_dt.htm">sfondi per il desktop</a></li> <li>ufficio postale</li> <li><a href="guestbook.htm">il libro degli ospiti</a></li> <li><a href="contattaci.htm">contattaci</a></li> <li><a href="mailinglist.htm">mailing list</a></li> <li>e in più</li> <li><a href="freemail.htm">caselle e-mail gratis</a></li> <li><a href="faq.htm">FAQ</a></li> <li><a href="links.htm">links</a></li> <li>webmaster</li> <li><a href="../link/enrico.htm" target="_top">Enrico Masenga</a></li> <ul> <div>

Mi sono bastate 31 righe, escludendo le prime 2 e ultime 2 dove è presente solo un tag di fatto per 27 voci del menu mi bastano 27 righe, inoltre come potete vedere il codice sorgente è molto più leggibile e quindi, aggiungere, rimuovere o modificare un link con un editor testuale o anche con blocco note risulta semplice ed immediato. Con le tabelle era un impresa complessa.
Ovviamente però il foglio di stile cresce, in quanto ho dovuto aggiungere quei componeti di grafica eliminati dalla pagina, ma il guadagno in termini di peso totale rimane comunque ancora netto, inoltre nel caso questo menu venga inserito in più pagine e si utilizzi un CSS esterno quest'ultimo viene caricato solo la prima volta. Ma ora vediamo il CSS associato:
#menu ul{ list-style-type:none; margin:0px; padding:0px; } #menu li{ margin-bottom: 1px; } #menu strong{ display:block; width: 170px; margin:0px; padding: 2px 6px; background-color: #ffff00; Color : #ff0000; font-size : 17px; font-weight : bold; text-align: center; } #menu a:link{ display:block; width: 170px; padding: 2px 6px; background-color: #ff0000; Color : #ffffff; font-size : 15px; font-weight : bold; text-decoration : none; text-align: center; } #menu a:visited{ display:block; width: 170px; padding: 2px 6px; background-color: #ff0000; Color : #ffff00; font-size : 15px; font-weight : bold; text-decoration : none; text-align: center; } #menu a:hover{ background-color: #ff6a6a; Color : #00ff00; font-size : 15px; font-weight : bold; text-decoration : underline; text-align: center; } #menu strong.linkm{ display:block; width: 170px; padding: 2px 6px; background-color: #ff0000; Color : #ffffff; font-size : 18px; font-weight : bold; text-align: center; }

Come potete vedere il CSS è cresciuto, ora è di 57 righe, comunque, come già detto il saldo è positivo.
Se analizziamo il peso delle pagina e dei CSS vediamo che la pagina con il vecchio menù pesava 6 kb e il CSS 2 kb per un totale di 8 kb,
con il nuovo menù la pagina pesa 3 kb (quindi la metà) e il CSS è cresciuto un pochino ora pesa 3 kb, quindi in totale 6 kb.

Ora 2 kb risparmiati fanno sorridere ed in effetti il risparmi su una singola pagina è trascurabile, inizierebbe ad essere più considerevole nel caso avessimo questo menù in tutte le pagine e usassimo un CSS esterno, in questo caso riusciremmo a risparmiare si solo 3 kb, ma per ogni pagina. Nel caso un utente visitasse 10 pagine avremmo già risparmiato 30 kb, ma la vera motivazione di passare a questo menù non è il risparmio di peso che è comunque sempre basso.

I grandi vantaggi risiedono nella maggior leggibilità del codice che ci permette di operare molto velocemente con programmi non visuali, oppure ci permette di delegare ad altri, anche se non esperti, l'aggiunta la rimozione o la modifica di un link, mentre noi dovremo intervenire solo per le modifiche grafiche del menù. In questo modo mostriamo notevole professionalità perché, creiamo un sistema pratico nella gestione ordinaria (volendo potremmo anche farlo notare al committente), ma in caso di modifiche di un certo rilievo (il cambio di grafica) dovranno comunque chiamare noi.
Un altro grande vantaggio risiede nel fatto che cambiando semplicemente il CSS potremmo avere una grafica completamente diversa per il nostro menù senza dover intervenire nelle pagine, questo ritorna estremamente comodo nel caso il menù risieda in più pagine, usando poi linguaggi come javascript oppure linguaggi lato server si potrebbe anche portare fuori la parte residente nelle pagine del menù. Altro vantaggio è la possibilità, tramite javascript o linguaggi lato server o direttamente per chi usa browsers come Opera e Firefox, di poter servire su richiesta un CSS diverso e quindi poter visualizzare un menù con altre caratteristiche grafiche. L'unica cosa da fare è creare un CSS alternativo con un'altra grafica. In questa pagina trovate lo stesso menù (senza alcuna modifica) con associato un differente CSS, si presenta in maniera completamente diversa e per chi usa Opera o Mozilla-Firefox può anche provare a selezionare lo stile alternativo e vedrà ancora una grafica differente dello stesso menù. Con le tabelle non era neanche immaginabile una cosa del genere.
Esiste ancora un ulteriore vantaggio che deriva dal fatto che questo menù è semanticamente corretto. In un prossimo articolo spiegherò l'importanza della semantica nella progettazione di un sito, ora mi limito a spiegare a grandi linnee i vantaggi per il menù.
Normalmente i webmaster considerano che il sito sia visto solo da utenti umani, in più molte volte non prendono in considerazione i diversamente abili, quello che non è mai preso in considerazone però è "l'utente elettronico" cioè tutti quei software che analizzano il nostro sito e lo indicizzano nei motori di ricerca (ma ne esistono anche altri). Lo sviluppatore vuole sempre che il sito sia ben posizionato nei risultati delle ricerche, ma molte volte invece di lavorare bene creando un codice corretto perde tempo a cercare trucchi per ingannare e per ottenere una miglior indicizzazione da parte dal motore di ricerca. L'esempio più clamoroso di questo sono stati i meta-tag che, da strumento utile sono diventati inutilizzabili da parte dei motori di ricerca, in quando molti inseriscono frasi e parole tali da ottenere un buon posizionamento ma che non rappresentano il reale contenuto del sito. Se ci pensate un attimo, nel momento in cui tutti utilizzano queste tecnica esse diventa perfettamente inutile, annullandosi reciprocamente. Molti motori hanno cambiato il loro algoritmo e in futuro svilupperanno algoritmi che sempre più premieranno i siti con codice semanticamente corretto, semplicemente perchè un sito che utilizza i tag per il loro scopo è più facile da indicizzare perchè un programma è in grado di comprendere al meglio i contenuti.
Un menu è una lista di links e quindi la logica ci dice che questi links debbono essere contenuti nei tag che rappresentano le liste, questo permetterà anche ad un software di capire cosa si trova davanti. Nel futoro standard xhtml 2 è già prevista l'introduzione di nuovi tag che permettano ai software di individuare meglio alcuni elementi, fra questi ci sarà il tag <nl> (navigation list) che dovrà contenere tutti i menù, attualmente e per un po' di anni non sarà ancora supportato dai browsers, però la sua sintassi è identica a quelle delle liste, l'unica cosa che cambia è il tag di apertura da <ul> (o <ol>) a <nl> e quello di chiusura da </ul> (o </ol>) a </nl> , quindi usando un menù semanticamente corretto ci basterà cambiare 2 lettere per poter trasformare un menù valido in html o xhtml 1 (o 1.1) in un menù valido per xhtml 2, uno standard che attulamente è solo in fase di progettazione, questo ci permette una longevità del codice elevatissima. Invece nel caso usassimo le tabelle per il menù non potremmo neanche validarlo come xhtml 1.1 .
Altro vantaggio del menù realizzato con una lista si riscontra utilizzando un lettore dello schermo (normalmente usati dai non vedenti), infatti questi programmi quando incontrano una lista anticipano all'utente il numero di voci (cosa che non avviene con un menù realizzato tramite una tabella), quindi diamo modo al software di fornire un'informazione che un vedente ricaverebbe guardando la pagina, sarà poi l'utente a decidere se sentirsi tutti i nostri links oppure no, scelta negata all'utente se il menù fosse impaginato con una tabella.
Altra caratteristica semantica che ho inserito nel menù è l'elemento , questo è un tag logico e non di formattazione come molto credono, infatti questo tag serve a racchiudere una parte di testo di maggior importanza, oppure nel nostro caso una voce più importante delle altre, io lo ho usato per identificare le voci (quelle in giallo) che rappresentano un raggruppamento di altre voci, a questo tag poi ho assegnato uno stile diverso per rendere la voce subito identificabile anche agli utenti umani. A livello strettamente semantico comunque mi permane un dubbio, forse un tag <h *>, che rapresentano i titoli, sarebbe stato ugualmente valido, ma il fatto che in realtà quelle sono comunque delle voci della stressa lista e non veri titolo mi ha fatto propendere per .
Il colore diverso di alcune voci rende il menù più usabile, ma questa caratteristica era già presente nella vecchia versione, in questa è diventato più usabile anche per i programmi.
Un altro vantaggio del menù semantico è che l'area dei links è estasa a tutta la superfice di questi e non solo alle scritte. Per ottenere lo stesso effetto con un menù realizzato con le tabelle, in rete, si trovano le soluzioni più disparate/disperate. Una di queste è l'inserimento della cella nel link, soluzione profondamente scorrette perchè non solo inserisce un tag di tipo blocco in uno inline, ma sconvolge anche la gerarchia dei nodi del documento e questo potrebbe creare non pochi problemi. Altra soluzione è quella di usare delle immagini lincate delle dimensione delle celle, ovviamente per ogni links si dovrebbe creare almeno 2 imagini, una per il link a riposo e l'altra per quando il mouse ci passa sopra. Le immagini dovranno poi essere gestite con gli eventi onMouseOver e Out, in modo simile a quanto facevo con le classi e con i relativi svantaggi già descritti. Ulteriore soluzione è quella di mettere l'evento onclick nella cella, questo però crea gli stessi problemi che abbiamo già visto per onMouseOver e Out, ma non solo, questo sistema ci obbligherebbe a scrivere una seconda volta la pgina di destinazione nell'evento onclick con relativo appesantimento del codice e della sua gestione. Qualcuno suggerisce anche di usare solo l'evento onclick, senza neppure inserire il tag <a>, soluzione assurda perchè completamente inaccessibile a chi per qualche motivo ha javascript disabilitato oppure utilizza uno screen reader. Tutto questo si può evitare con la soluzione pulita, semantica, accessibile e anche usabile che ho usato nel menù semantico, quella di estendere tramite i CSS l'area cliccabile dei links.

Gli svantaggi.
Come in qualsiasi cosa nella vita esistono dei vantaggi ma anche degli svantaggi. L'unico svantaggio di questo menù semantico risiede nel fatto che con Netscape 4 e IE 4 la grafica è resa in maniera orrenda (qui potete vedere come si presenta con Netscape 4), come già detto però questi browsers sono scomparsi dalla circolazione e quindi possiamo sorvolare sulla cattiva resa del menù oppure potremmo decidere di nascondere il solo il CSS del menù a Netscape 4 e IE4(come faccio su Rocca web) senza dover creare un'altro menù apposito che complicherebbe la gestione del sito. In questo caso il menù si presenta diverso, ma comunque è gradevole oltre ad essere perfettamente accessibile ed usabile come potete verificare guardando questa schermata di Rocca web visto con Netscape 4. Un web designer della vecchia scuola potrebbe aver difficoltà ad accettare questo, ma ragionando un attimo e vedendo le statistiche si potrebbe rendere conto che netscape e ie 4 sono scomparsi e quindi dovrebbe rivedere le sue idee e cogliere i vantaggi di un menù semanticamente corretto.