Un esempio da non seguire: presentazioni con l'HTML
Cominciamo con l'analizzare la versione che non segue criteri di accessibilità: quella, cioè, realizzata tramite l'uso di elementi e attributi di presentazione dell'HTML (i brani di codice sono tratti dal file tabforma.htm), nonché tramite l'uso di tabelle di impaginazione ("layout tables", in inglese), pratica tuttora diffusissima per ottenere griglie del tipo di quella in figura 1, mostrata nella lezione precedente.
Di seguito sono riportate le parti principali del codice HTML utilizzato per realizzare il solo menu di navigazione, visibile nella colonna di sinistra della pagina di esempio.
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN"
"http://www.w3.org/tr/html4/loose.dtd">
<html lang="it">
<head>
<title>
Esempio di impaginazione realizzato per mezzo di tabelle
</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="5" width=
"100%" bgcolor="#FFFFFF">
[...]
<tr>
<td width="25%" valign="top" bgcolor="#FFFFFF">
<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td width="100%" bgcolor="#808080">
<table border="0" cellpadding="4" cellspacing="1"
width="100%">
<tr>
<td width="100%" bgcolor="#FFFF66">
<b><font face="Tahoma">Menu di
navigazione</font></b>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#EEEEEE">
<b><a href="tabforma.htm"><font face=
"Tahoma" size="2">Voce di menu
n.01</font></a></b>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<b><a href="tabforma.htm"><font face=
"Tahoma" size="2">Voce di menu
n.02</font></a></b>
</td>
</tr>
[...]
<tr>
<td width="100%" bgcolor="#EEEEEE">
<b><a href="tabforma.htm"><font face=
"Tahoma" size="2">Voce di menu
n.11</font></a></b>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<b><a href="tabforma.htm"><font face=
"Tahoma" size="2">Voce di menu
n.12</font></a></b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
[...]
</table>
</body>
</html>
La prima cosa che si può notare leggendo questo estratto di codice è che, per ottenere il tipo di impaginazione illustrato nella >figura 1, è stato necessario inserire più tabelle l'una dentro l'altra, come in un gioco di scatole cinesi. Nel listato sopra riportato, che riguarda come abbiamo detto il solo menu di navigazione, le tabelle annidate sono tre (gli elementi table sono evidenziati in grassetto su sfondo giallo). In tutta la pagina, come si potrà constatare leggendone il listato integrale, sono state utilizzate ben dodici tabelle di impaginazione.
Se ne sarebbero forse potute utilizzare di meno, ma al costo di ricorrere – per i numerosi bordi da 1 pixel di spessore - all'uso di immagini spaziatrici, inserite ciascuna in un'apposita cella, che avrebbero finito per complicare ulteriormente la già intricata struttura tabellare.
Notiamo poi la ridondante quantità di codice necessaria per realizzare, con una simile tecnica, una singola voce di menu:
<tr>
<td width="100%" bgcolor="#FFFFFF">
<b><a href="tabforma.htm"><font face=
"Tahoma" size="2">Voce di menu
n.02</font></a></b>
</td>
</tr>
Di tutto questo blocco di codice, l'unico testo visibile nella pagina è la scritta "Voce di menu n.02" (evidenziata in grassetto nel listato). Tutto il resto, con la sola esclusione dell'elemento A, serve per specificare la formattazione e va ripetuto pari pari per ogni voce di menu.
Ultimi articoli Web design
Metro, il "linguaggio di design" di Windows 8I principi ispiratori del "linguaggio di design" utilizzato da... |
Bootstrap: il framework di TwitterSviluppare applicazioni web sfruttando il framework con cui è stato... |
Sfondi a tutta pagina con jQueryCome avere degli sfondi a tutta pagina sui vostri siti web, per... |
Grid design, dalla tipografia al webDesign coerenti e layout consistenti, usando principi di... |
Art Direction e DesignCapire la differenza tra la direzione artistica di un progetto e il... |
Guide Web design
Guida Progettazione siti webDall'analisi dei requisiti fino allo sviluppo e alla promozione:... |
Guida Pubblicare un sito webLe verifiche fondamentali da effettuare prima del lancio di un nuovo... |
Guida Web WritingSaper scrivere per il Web è una delle armi per attirare utenti e per... |
Newsletter @Grafica e Web Design
Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |