Repository 32bit  Forum
Repository 64bit  Wiki

XHTML 1.1, CSS e Accessibilità da zero: differenze tra le versioni

Da Slacky.eu.
(Pop up e nuove finestre)
(Pagina 1)
Riga 568: Riga 568:
<h4>pagina 1</h4>
<h4>pagina 1</h4>
</div>
</div>
  +
<div id="barra">
  +
<p class="floatleft pulsanti">::<a href="index.html">home</a></p>
  +
<p class="floatleft pulsanti">pagina 1</p>
  +
<p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
  +
<p class="clearer">&amp;nbsp;</p>
  +
</div>
<div class="colonne floatleft" id="colonnasinistra">
<div class="colonne floatleft" id="colonnasinistra">
<p>:: <a href="index.html">home</a></p>
<p>:: <a href="index.html">home</a></p>
Riga 573: Riga 579:
<p>:: <a href="">pagina 2</a></p>
<p>:: <a href="">pagina 2</a></p>
</div>
</div>
  +
</pre>
  +
E, fin qui, tranne per il fatto che, nei menu, ad essere linkata è la home, è praticamente tutto uguale. Poi...
  +
<pre>
<div class="colonne floatleft" id="colonnagrande">
<div class="colonne floatleft" id="colonnagrande">
<p>- <a href="#blocco1">blocco 1</a></p>
<p>- <a href="#blocco1">blocco 1</a></p>

Versione delle 15:29, 29 set 2006

Lo scopo di questa guida è di permettere a chi non ha familiarità con il web-building lato source di cominciare dal meglio, cioè dallo standard più avanzato della codifica: l'XHTML 1.1. Saranno evitati, perciò, i passaggi intermedi e si ci abituerà da subito anche all'utilizzo dei CSS, nel rispetto dell'accessibilità.

Indice

Premessa

Una caratteristica di questa guida è l'estrema stringatezza (poche chiacchiere e molti fatti), in coerenza all'ideale connotazione di una pagina web: efficace, ma quanto più leggera possibile. Di fatto impareremo a realizzare un semplicissimo sito, sperando che il resto rimanga affidato alla vostra voglia di approfondire.

Primi passi

Apriamo un editor testuale (il più semplice possibile, per ora) e digitiamo...

<html></html>

Abituiamoci da subito ad aprire e chiudere i tag (è una buona norma per non dimenticarli aperti).

Posizionamoci al centro dei due tag e premiamo due volte invio, per ottenere...

<html>

</html>

Procedendo allo stesso modo, continuiamo...

<html>
<head>
    <title>La mia prima pagina XHTML</title>
</head>
</html>

Notate come la riga del tag title sia indentata rispetto a head. Anche questa è una buona abitudine: adottate una corretta indentazione per rendere il codice ordinato e leggibile.

Andiamo avanti...

<html>
<head>
    <title>La mia prima pagina XHTML</title>
</head>
<body>
    <h1>Benvenuti nella mia prima pagina XHTML</h1>
    <h3>
        &Egrave; un esercizio fatto seguendo l'<em>how-to</em> di 
        wikislacky.
    </h3>
    <hr />
    <p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
    <p style="text-align:right">Questo &egrave; un paragrafo con allineamento a destra.</p>
    <p style="text-align:center">Questo &egrave; un paragrafo con allineamento al centro.</p>
    <p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
La prima pagina

Non lasciatevi vincere dalla tentazione del classico copia-incolla con le parti in codice di questa guida: rischiereste di perdere il senso di cosa state facendo.

Bene, salviamo il file come prova1.html (per esempio) e apriamolo. Partirà il nostro browser di default e visualizzerà la pagina che vediamo a destra.

Proviamo una cosa: nella finestra del browser che visualizza la nostra pagine, clicchiamo col tasto destro e apriamo il sorgente... Visto? E' quello che abbiamo scritto noi.


Alcuni chiarimenti:

head 
ospita le informazioni di intestazione (il titolo, i meta-tag, i link a file esterni, etc.).
body 
è il corpo della pagina.
h1, h2 ... 
sono blocchi di intestazione (servono per i titoli...).
&Egrave; etc. 
sono le cosiddette htmlentities, che servono a visualizzare correttamente i caratteri speciali (in rete sono disponibili maggiori informazioni - ad esempio qui).
hr 
visualizza una linea.
è un blocco di testo (paragrafo);
style 
serve a definire lo stile del tag. Ecco il nostro primo incontro coi CSS. In questo caso abbiamo a che fare con css in-linea, ma esistono alternative (lo vedremo...).
br 
serve ad andare a capo nel corso dello stesso blocco.
em 
un tag per rendere enfatizzato il testo racchiuso (corsivo, in pratica); per il grassetto, useremo strong; i vecchi tag, i, b e u non sono più ammessi (per il sottolineato, si ricorre allo stile).

Dichiaramoci

Bene, il codice è corretto, ma la nostra pagina ancora non è XHTML.

Per rimediare, al posto del tag di apertura html mettiamo questo blocco...

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">

E, nella head, aggiungiamo...

<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

Risalviamo la pagina e riapriamola: è uguale a prima, ma ora la nostra pagina è dichiaratamente XHTML 1.1.

Rispetto all'HTML non è che cambi molto: semplicemente la codifica dev'essere molto più rigorosa, mancano molti dei parametri dei tag (specialmente quelli relativi alla formattazione, che viene totalmente affidata ai CSS) e si devono seguire delle semplici regole (ma vedremo tutto strada facendo).

Facciamo conoscenza con i CSS

Apriamo un nuovo documento col nostro editor e cominciamo subito a scrivere...

body {background:#ffffaa;}

Fermiamoci un attimo: quel #ffffaa è la notazione esadecimale di un colore; le tre coppie di caratteri indicano la saturazione dei tre colori base del formato RGB (red, green, blue); il minimo è 00, il massimo è ff (i due estremi sono #000000 - il nero - e #ffffff - il bianco). Per approfondire l'argomento questa, però, non è la sede più adatta (dobbiamo essere sintetici, no?). Le uniche cose che vorrei precisare sono:

  • che è preferibile usare colori della serie web-safe (quelli in cui i caratteri di ogni coppia sono uguali, come in questo caso);
  • che in questi casi si può adottare la notazione breve, ovvero riducendo la coppia ad un solo carattere (nel caso #ffa).
Il ricorso alla notazione breve, anche se può sembrare una sciocchezza, è importante per il fatto che, in un foglio di stile consistente, il peso del file si ridurrebbe in maniera sensibile. Non dimentichiamo che uno dei nostri scopi è quello di creare file leggeri (è per la stessa ragione che è preferibile non andare a capo tra un parametro e l'altro del foglio di stile).

Torniamo a noi...

body {background:#ffa; color:#567; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;}
h3 {color:#a00}
.destra {text-align:right;}
.centro {text-align:center;}

Precisazioni:

background 
il colore di sfondo (si può optare per un'immagine con background-image:url(percorso/nomeimmagine)).
color 
il colore del carattere.
font-family 
una famiglia di font omogenei (bisogna raggruppare i font in base alle tre macro-aree: serif, sans-serif e monospace).
il punto all'inizio di un nome 
sta ad indicare che si tratta di una classe, ovvero una categoria omogenea con gli stessi attributi (se, invece c'è un #, sta ad indicare un id, un identificativo univoco, ovvero che esiste un solo blocco con quelle caratteristiche).

Salviamo il nuovo file come stile.css.

Adesso, nella nostra prova.html, tra i tag head e /head, inseriamo...

<link rel="stylesheet" href="stile.css" type="text/css" />

... dicendo, cioè, alla nostra pagina web di andarsi a vedere lo stile memorizzato in quel file.

A questo punto, lo stile inserito all'interno dei singoli tag non serve più. Serve, invece, il richiamo alle classi css (quelle che nel file cominciano coun un punto: ad esempio .destra). Quindi, toglieremo style="text-align:right", sostituendo con class="destra" e così via...

Avremmo potuto inserire lo stile all'interno della stessa pagina web, così:

...
<head>
    <style type="text/css>
    <!--
      body {background:#eff; color:#567; font-family:Arial, Helvetica, sans-serif; 
            margin:0; padding:0;}
      .destra {text-align:right;}
      .centro {text-align:center;}
    //-->
    </style>
    ...
</head>

Ma la cosa sarebbe stata improduttiva: infatti, un unico foglio di stile esterno ha diversi vantaggi, tra cui il fatto di poter essere usato da infinite pagine; inoltre, eventuali modifiche vanno fatte una volta sola...

Ora il codice della pagina sarà, quindi, così:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
    <title>La mia prima pagina XHTML</title>
    <link rel="stylesheet" href="stile.css" type="text/css" />
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
    <h1>Benvenuti nella mia prima pagina XHTML</h1>
    <h3>
        &Egrave; un esercizio fatto seguendo l'<em>how-to</em> di 
        wikislacky.
    </h3>
    <hr />
    <p>Questo &egrave; un paragrafo <em>normale</em> con allineamento a sinistra.</p>
    <p class="destra">Questo &egrave; un paragrafo con allineamento a destra.</p>
    <p class="centro">Questo &egrave; un paragrafo con allineamento al centro.</p>
    <p>In questo paragrafo c'&egrave; <br />un'andata a capo</p>
</body>
</html>
La prima pagina - con stile

Salviamo la pagina con un altro nome: prova1stile.html, per esempio (non dimentichiamo di salvare anche il foglio di stile che abbiamo modificato). Riapriamo la pagina.

Ecco quello che abbiamo... →

Dunque:

  • è cambiato il colore di sfondo;
  • è cambiato il carattere;
  • è cambiato il colore del sottotitolo.


Acquisendo dimestichezza con i CSS, riusciremo ad ottenere praticamente qualsiasi formattazione.

D'ora in poi, non farò molte precisazioni sul CSS. Maggiori informazioni possono essere ricavate dalle risorse che indico in Collegamenti esterni.

I layout

Una delle decisioni più ardue che si trova ad affrontare un web-builder è quella della scelta del layout da adottare, al cospetto del sempre più vario panorama di risoluzioni monitor.

Sinteticamente, credo che le alternative siano principalmente tre:

  • layout proporzionale;
  • layout centrato a dimensioni fisse;
  • layout posizionato a sinistra a dimensioni fisse.

Nel proporzionale, le dimensioni cambiano al cambiare della finestra del browser e, nell'ambito del CSS, vengono espresse in %; in quelli a dimensioni fisse, invece, il layout di norma è ampio poco meno degli 800 pixel, che corrispondono alla dimensione orizzontale della minor risoluzione monitor ormai in circolazione; in questi casi, le dimensioni nel CSS vengono, di norma, espresse in px (ma non per tutto).

Per il nostro sito d'esempio useremo il secondo caso, il layout centrato, ma, in una pagina, anche il terzo, quello spostato a sinistra.

Il layout spostato a sinistra, che spesso ritroviamo in molte pagine web (anche autorevoli), a volte non è tanto frutto di una scelta, quanto di un errore nel CSS; per averne conferma dovremmo visualizzarlo sotto Windows e con Internet Explorer: se viene visualizato al centro, quel sito è stato testato solo con quel browser. Vedremo in seguito come evitare questo errore...
Se fatto per scelta, invece, quel tipo di layout può riservare anche delle soddisfazioni, ma bisogna adottare qualche accorgimento per renderlo esteticamente più gradevole (adozione di sfondi per tutta la pagina, barre proporzionali, etc...).

Tabelle o non tabelle, questo è il dilemma

Proviamo con una tabella: cominciamo con lo stile...

body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
      text-align:center; font-size:1em}
h3 {color:#a00}
h4 {color:#ffa; text-align:center; background:#aaa; margin: 4px 0 0 0}
table {width:780px; margin:0 auto; padding:0; border:2px solid #7af; text-align:left; 
    background:#fff}
td{vertical-align:top}
.destra {text-align:right;}
.centro {text-align:center;}
#testatina{background:#fff}
#cellasinistra {width:100px; border-right:2px solid #ddd; font-weight:bold; font-size:95%}
#celladestra {width:120px; background:#eee; font-size:90%}

Salviamolo come stile2.css.

E ora la pagina... Attenzione a modificare il link al foglio di stile (aggiungiamo il 2).

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
    <title>La mia prima pagina XHTML</title>
    <link rel="stylesheet" href="stile2.css" type="text/css" />
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
    <table summary="layout della pagina">
    	<tr>
            <td colspan="3" id="testatina">
              <h1>Benvenuti nella mia prima pagina XHTML</h1>
             <h3>
               &Egrave; un esercizio fatto seguendo l'<em>how-to</em> di 
               wikislacky.
             </h3>
             <h4>home</h4>
            </td>
	</tr>
        <tr>
          <td id="cellasinistra">
            <p>:: home</p>
            <p>:: <a href="">pagina 1</a></p>
            <p>:: <a href="">pagina 2</a></p>
          </td>
          <td>
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum
            </p>
          </td>
          <td id="celladestra">
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor 
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </td>
	</tr>
    </table>
</body>
</html>
La prima pagina - con layout

Salviamo come prova2.html ed apriamola. Ecco il risultato: →

Bruttina, non c'è che dire. Provvederemo...
Alcune precisazioni:

table 
una tabella nella pagina - il parametro summary serve a dare una breve descrizione del contenuto della tabella. È uno dei dictat della cosiddetta accessibilità (ne riparleremo).
tr 
una nuova riga della tabella.
td 
una cella nella riga - se c'è il parametro colspan="n", significa che la cella deve raggruppare n colonne delle altre righe (ad esempio, la prima raggruppa tre colonne), così come rowspan funzionerebbe per le righe.
è uno dei tag più importanti, in quanto indica un collegamento iper testuale (il famoso link).
D'ora in poi, come per i CSS, non darò molte altre indicazioni per l'(x)html, altrimenti corriamo il rischio di abbandonare l'intenzionale stringatezza. Maggiori informazioni possono essere ricavate dalle risorse che indico in Collegamenti esterni.

Il float

Bene o male, abbiamo il nostro layout ottenuto con una tabella. Dimentichiamolo!

Le tabelle dovrebbero essere usate esclusivamente allo scopo per cui sono nate e, cioè, per l'esposizione di dati tabellari. Di sicuro non dovrebbero essere usate (e invece se n'è abusato) per la realizzazione di layout. Al nostro scopo, bisogna ricorrere ai CSS e, in particolare, al parametro float.

Riprendiamo il nostro stile2.css, eliminiamo le righe table, td, #testatina, #celladestra, #cellasinistra e modifichiamo il resto. Questo è il risultato finale (attenzione alle modifiche dei valori pre-esistenti):

body {background:#aef; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
      text-align:center; font-size:1em}
h3 {line-height:2em; color:#a00; margin:0; padding:0}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0}
p {margin:10px 6px; padding:0}
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}

Salviamo come stile3.css (è preferibile lasciare i vecchi file per controllare eventuali errori a ritroso...).

Riprendiamo la nostra pagina e modifichiamo così:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
    <title>La mia prima pagina XHTML</title>
    <link rel="stylesheet" href="stile3.css" type="text/css" />
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
    <div id="layout">
        <div>
             <h1>Benvenuti nella mia prima pagina XHTML</h1>
             <h3>
               &Egrave; un esercizio fatto seguendo l'<em>how-to</em> di 
               wikislacky.
             </h3>
             <h4>home</h4>
	</div>
        <div class="floatleft" id="colonnasinistra">
            <p>:: home</p>
            <p>:: <a href="">pagina 1</a></p>
            <p>:: <a href="">pagina 2</a></p>
	</div>
        <div class="floatleft" id="colonnacentro">
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum
            </p>
        </div>
        <div id="colonnadestra">
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor 
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
	<p class="clearer"> </p>
    </div>
</body>
</html>

Salviamo come prova3.html ed apriamola. Come possiamo vedere, le differenze, rispetto a prima, sono minime (e, lavorando un po' coi CSS, potremmo toglierle; ma per ora, può andare così). Abbiamo eliminato la tabella, ottenendo lo stesso risultato, con almeno due vantaggi: abbiamo alleggerito la pagina e siamo rimasti coerenti al contenuto semantico della pagina.

Arricchiamo la pagina

Una pagina web così, però, è sinceramente improponibile. Vediamo di migliorarla un po'...

Immagini

Io non sono un fan delle immagini sul web (a meno che non servano effettivamente), ma almeno un logo lo vogliamo mettere? Prendiamone uno in prestito: il bel logo nella home di Slacky. Clicchiamoci sopra col destro e salviamolo nella stessa directory delle nostre prove.

Veramente sarebbe preferibile organizzare il proprio sito con delle sotto-directory: immagini, file, documenti... Ma ognuno può regolarsi come meglio crede.

Aggiungiamo la seguenti righe nel foglio di stile:

img {border:0}
.imgsinistra {margin:4px 6px 0 0}

E la seguente riga nella pagina, esattamente all'inizio del div del titolo:

              <img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />

Mentre, dopo </h3>, inseriamo:

              <p class="clearer">&nbsp;</p>

Che, qualora non si fosse capito, serve ad allineare il layout dopo dei blocchi con float.

Notato l'accorpamento dell classi di stile (class="floatleft imgsinistra")? Coi i CSS, è conveniente adottare la modularità e l'ereditarietà dei parametri: ad esempio, possiamo impostare una caratteristica generale a livello di tag (il padding per esempio) e caratteristiche particolari a livello di classe (che poi si possono accorpare, come in questo caso); infine, i casi unici si definiscono a livello di id.

Salviamo tutto e vediamo che succede.

Uhmm..., l'immagine è stata pensata per uno sfondo nero e, quindi, o cambiamo immagine o cambiamo sfondo. Optiamo per lo sfondo...

Miglioriamo lo stile

Nel foglio di stile, reinseriamo l'id #testatina con background:#000. Ma così i titoli non si vedrebbero e, allora, impostiamo lo stile per h1 e cambiamo quello di h3. Il foglio di stile va comunque sistemato aggiungendo o modificando alcuni parametri. Questo è il risultato complessivo, che salveremo come stile4.css:

body {background:#aaa; color:#345; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;
      text-align:center; font-size:1em}
h1 {line-height:2em; color:#eee; font-size:150%; margin:0 6px; padding:0}
h3 {line-height:2em; color:#aaf; margin:0; padding:0 6px}
h4 {color:#ffa; text-align:center; background:#aaa; margin:4px 0 0 0; padding:0}
div {padding:0; line-height:1.2em}
p {margin:6px; padding:0}
img {border:0; margin:0; padding:0}
/*----------------------- CLASSI -----------------------*/
.destra {text-align:right;}
.centro {text-align:center;}
.clearer {clear:both; height:1px; overflow:hidden; margin:-1px;}
.floatleft {float:left; margin:0;}
.imgsinistra {margin:4px 6px 0 0}
/*------------------------- ID -------------------------*/
#layout {width:780px; margin:0 auto; border:2px solid #7af; text-align:left; background:#fff}
#testatina {background:#000}
#colonnacentro {width:540px; border-left:2px solid #ddd;}
#colonnasinistra {width:100px; font-weight:bold; font-size:95%}
#colonnadestra {float:right; width:120px; background:#eee; font-size:90%}
#piede {border-top:1px solid #7af; text-align:center; font-size:90%}
Ho inserito i divisori in commento solo per maggiore chiarezza. D'ora in poi, non riporterò sempre l'intero foglio, ma vi inviterò ad inserire righe nell'una o l'altra sezione.

Aggiungiamo un pie' di pagina

Subito al di sotto dell'ultimo p class="clearer", inseriamo questa parte:

        <div id="piede">
          <p>
            Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
            limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
          </p>
        </div>

Altezza dei blocchi

Una cosa che salta agli occhi, rispetto alla tabella, è che i div delle tre colonne non sono alti uguali (lo si nota dal bordo sinistro della colonna centrale). L'inconveniente può essere superato impostando un'altezza minima.

Aggiungiamo nel CSS la classe .colonne (per pulizia, mettiamola nella sezione delle classi):

.colonne {min-height:400px; height:auto !important; height:400px}
Normalmente sarebbe bastato il parametro min-height (coi browser degni di questo nome), ma esiste un browser ben diffuso che certe cose non le capisce e necessita di informazioni diverse: il suo nome è Internet Explorer. E allora, min-height serve per i browser seri, height per IE. Ma height, per un browser serio, imposta una dimensione fissa (mentre noi vogliamo impostarne una minima) e allora si interpone quell'auto con flag !important, che esclude il successivo e che IE, parimenti, non capisce.

La compatibilità cross-browser è uno dei punti più spinosi per un web-builder e le maggiori difficoltà nascono proprio per le deficienze di IE, specialmente per il mancato supporto per i CSS2.
Un altro problema è quello, accennato, della centratura del layout: la soluzione normale è quella del margin:0 auto, impostato al livello del blocco (o della tabella) che si deve centrare (ricordiamoci che margin può avere o 4 o 2 valori; se sono 4, si riferiscono rispettivamente, ai margini superiore, destro, sinistro e inferiore; se sono 2, si riferiscono, a coppia, ai margini verticali e orizzontali). IE, come detto, non riconosce il valore auto, quindi bisogna dichiarare, a livello superiore (nel nostro caso, il body), un text-align:center (che non sarebbe normale, essendo un parametro per il testo).
Un altro accorgimento opportuno, quando si ha a che fare con blocchi float, è quello di impostare il parametro line-height (l'interlinea del testo, più o meno): altrimenti, col solito IE, si corre il rischio di assistere a misteriose sparizioni di porzioni di testo!
Sensibili differenze di resa tra un browser e l'altro, sono anche spesso dovute al padding dei blocchi (il padding è la distanza del testo dai bordi del blocco): la cosa migliore è impostarlo a 0 e definire la distanza col margin annidando i paragrafi (ad esempio, dentro un div con padding:0, posizioniamo un p, con margin:6px).
Come avrete notato, inoltre, in merito alle dimensioni del testo, ho utilizzato gli em, come unità di misura a livello base e le percentuali per le altre chiamate: lo scopo, anche in questo caso, è di venire incontro alle difficoltà di IE, con particolare riferimento al ridimensionamento del testo (fondamentale per l'accessibilità).
Un problema irrisolto, infine, riguarda l'incapacità di IE di visualizzare la trasparenza delle immagini .png, costringendo i poveri sviluppatori a dover ripiegare sulle .gif.

Speriamo almeno che qualcuno di questi problemi sia risolto con l'IE 7...

Nella pagina, aggiungiamo la classe .colonne alle tre colonne, appunto, ovvero...

        <div class="colonne floatleft" id="colonnasinistra">
...
        <div class="colonne floatleft" id="colonnacentro">
...
        <div class="colonne" id="colonnadestra">

Aggiungiamo un altro menu

La nostra pagina ha già un menu nella colonna sinistra, ma se noi volessimo la classica barra?

Innanzitutto una premessa: molte delle barre, che vediamo nel corso delle nostre navigazioni, sono dei menu rollover in javascript (quelle, per intenderci, che fanno aprire dei sottomenu quando ci si posiziona sopra col puntatore). La maggior parte di queste barre (se non tutte) sono deprecate secondo i dettami dell'usabilità e dell'accessibilità e, quindi, personalmente ne sconsiglio l'uso, come sconsiglio il ricorso, se non per effettive necessità, alle tecnologie lato-client.

Permettetemi un'altra breve postilla, stavolta sulla tecnologia lato-client.

Un web-builder dovrebbe avere la padronanza completa delle pagine che ha costruito e sapere, quindi, in anticipo, cos'è che vedrà un visitatore. Nel momento in cui ricorre a tecnologia lato-client (javascript, applet e compagnia bella), questa certezza non ce l'ha più, per la semplici ragione che il visitatore potrebbe non essere in grado di visualizzare correttamente le pagine (considerate l'eventualità che il javascript sia disattivato nelle impostazioni del browser o che il visitatore non sia o non si senta in grado di installare un plug-in). Considerando il fatto che, nella maggior parte dei casi, si può rinunciare a tale tipo di tecnologia, che motivo c'è di abusarne?
E se proprio non possiamo fare a meno di qualche applet, di qualche animazione in flash, ricordiamoci almeno di inserirla secondo i canoni dell'xhtml, utilizzando correttamente, pertanto, il tag object (per cui rimando alle risorse sull'html citate sotto).

Nel foglio di stile aggiungiamo, fra i tag...

a {text-decoration:none; font-weight:bold; font-size:95%}
/* i link sottolineati non li posso soffrire... */

... fra gli id...

#barra {background:#900; margin-bottom:1px}

...e, tra le classi...

.pulsanti {width:120px; background:#009; text-align:center; color:#ffa; 
          font-weight:bold; font-size:85%}
.pulsanti a {color:#fff; text-decoration:none}
/* ovvero impostiamo uno stile diverso per i link della classe .pulsanti */
.pulsanti a:hover {color:#ffa}
/* ovvero impostiamo un altro colore per il rollover su quei link  */

Ora, nella nostra pagina, subito dopo la chiusura del div testatina, inseriamo:

        <div id="barra">
            <p class="floatleft pulsanti">home</p>
            <p class="floatleft pulsanti">::<a href="pagina1.html">pagina 1</a></p>
            <p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
            <p class="clearer">&nbsp;</p>
        </div>

Aggiungiamo dei box

Tra le classi del CSS inseriamo:

.box {margin:10px 4px; padding:8px; font-size:85%; border:2px groove #fff}
.boxgiallo {background:#ffa; color:#000;}
.boxceleste {background:#eef; color:#005;}

E, nella pagina, all'interno della colonna sinistra (dopo i link)...

            <div class="box boxgiallo">
              <p class="centro">
                Bannerino<br/>o sondaggio<br />
                o amenit&agrave;<br />varie
              </p>
            </div>

E, nella colonna centrale, dopo il paragrafo testo...

            <div class="box boxceleste">
              <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </div>

Vediamo i risultati

La nostra index

Salviamo come prova4.html e riapriamo la pagina. Il risultato lo vediamo a destra: andiamo un po' meglio, no? Certo, lo stile è un argomento estremamente soggettivo...

Il punto fondamentale è che vediamo praticamente la stessa cosa con tutti i browser.


Aggiungiamo pagine al nostro sito

Cominciamo col rinominare la nostra prova4.html a index.html. Inoltre, nella seconda voce (pagina1) della colonna sinistra, modifichiamo così:

            <p>:: <a href="pagina1.html">pagina 1</a></p>

Dopo aggiungiamo questa riga negli id del CSS:

#colonnagrande {background:#efe; border-left:2px solid #ddd; max-width:670px}

Pagina 1

Ora facciamo qualche modifica al codice della pagina (da notare, tra l'altro, che ora la voce pagina 1 dei menu non è linkata, mentre lo è home):

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
    <title>La mia prima pagina XHTML</title>
    <link rel="stylesheet" href="stile4.css" type="text/css" />
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
<head>
<body>
    <div id="layout">
        <div id="testatina">
             <img src="logo.gif" alt="il logo della nostra pagina" class="floatleft imgsinistra" />
             <h1><a id="top">Benvenuti nella mia prima pagina XHTML</a></h1>
             <h3>
               &Egrave; un esercizio fatto seguendo l'<em>how-to</em> di 
               wikislacky.
             </h3>
             <p class="clearer">&nbsp;</p>
             <h4>pagina 1</h4>
	</div>
        <div id="barra">
            <p class="floatleft pulsanti">::<a href="index.html">home</a></p>
            <p class="floatleft pulsanti">pagina 1</p>
            <p class="floatleft pulsanti">::<a href="">pagina 2</a></p>
            <p class="clearer">&nbsp;</p>
        </div>
        <div class="colonne floatleft" id="colonnasinistra">
            <p>:: <a href="index.html">home</a></p>
            <p>:: pagina 1</p>
            <p>:: <a href="">pagina 2</a></p>
	</div>

E, fin qui, tranne per il fatto che, nei menu, ad essere linkata è la home, è praticamente tutto uguale. Poi...

        <div class="colonne floatleft" id="colonnagrande">
            <p>- <a href="#blocco1">blocco 1</a></p>
            <p>- <a href="#blocco2">blocco 2</a></p>
            <p>- <a href="#blocco3">blocco 3</a></p>
            <p>- <a href="#blocco4">blocco 4</a></p>
            <h5><a id="blocco1">blocco 1</a></h5>
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum.<br />
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum.
            </p>
            <h5><a id="blocco2">blocco 2</a></h5>
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum<br />
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum.
            </p>
            <h5><a id="blocco3">blocco 3</a></h5>
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum<br />
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum.
            </p>
            <h5><a id="blocco4">blocco 4</a></h5>
            <p>
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum<br />
               Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
               irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
               pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
               officia deserunt mollit anim id est laborum.
            </p>
            <p class="destra"><a href="#top">top &uarr;</a></p>
        </div>
	<p class="clearer">&nbsp;</p>
        <div id="piede">
            <p>
            Il contenuto di questo sito &egrave; liberamente fruibile e non esiste alcuna
            limitazione d'uso.<br />Tutti i diritti concessi. <em>Copyleft 2006</em>
            </p>
        </div>
    </div>
</body>
</html>
Pagina 1

Salviamo come pagina1.html.

Praticamente, ci siamo costruiti una specie di template, ovvero un modello da ripetere in tutte le pagine del sito. Di fatto abbiamo cambiato soltanto il codice dalla seconda colonna in poi. Per ora non conosciamo il web dinamico, altrimenti sapremmo che una simile operazione diverrebbe inutile con una tecnologia lato server, sfruttando, in particolare, l'inclusione e la modularità...

Apriamo la nostra index.html e, in uno dei due menu, clicchiamo sulla voce Pagina 1. Vedremo aprirsi la nostra nuova pagina... →


Le ancore

Nella pagina appena costruita abbiamo visto un tipo particolare di link, quello interno o ancora. È particolarmente utile quando la pagina è molto estesa e vogliamo porre un indice in testa alla stessa.

Praticamente metteremo...

<a id="nomeparagrafo">Nome paragrafo</a>

...al titolo del paragrafo (precedentemente, al posto di id avremmo potuto usare name, ma, nell'XHTML 1.1, quel parametro non è più ammesso), mentre, alla voce in indice...

<a href="#nomeparagrafo">Nome paragrafo in indice</a>

È anche buona cosa mettere un'ancora di rimando all'inizio della pagina (nel caso #top).

Pagina 2

Per la seconda pagina, abbandoneremo temporaneamente il nostro template per sperimentare un layout diverso. Vedremo anche qualche piccola chicca, resa possibile dal posizionamento assoluto.

In essa proveremo a costruire anche un semplice form: per ora sarà solo estetico purtroppo (un form, per funzionare, ha bisogno di tecnologia lato-server), ma vedremo, comunque, come creare un form secondo i canoni.

Creiamo un nuovo foglio di stile (è inutile appesantire quell'altro):

body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;
      font-size:1em; background:#ddd}
div {margin:0; padding:0}
p {margin:12px; padding:0;}
a {color:#fff; text-decoration:none}
a:hover {color:#ffa}
.barra {background:#009; margin:0; padding:0; color:#fff; font-weight:bold}
.titoli {position:absolute; font-weight:bold; font-style:oblique;
         font-size: 500%;}
#bar2 {margin: 90px 0 0 0}
#titolo {top:20px; left:14px; z-index:10; color:#800}
#rilievo {top:19px; left:13px; z-index:8; color:#fff}
#ombra {top:25px; left:19px; z-index:6; color:#888}
#titolo2 {top:20px; left:314px; z-index:10; color:#ddd}
#rilievo2 {top:19px; left:313px; z-index:8; color:#888}
#ombra2 {top:21px; left:315px; z-index:6; color:#fff}
#blocco {margin:10px 0; padding:0; width:780px; background:#fff;
         border:2px dashed #ddd}

Salviamo come altrostile.css.

Creiamo una nuova pagina: incolliamo (per stavolta) tutta l'intestazione dell'altra fino al link dello stile e poi...

...
   <link rel="stylesheet" href="altrostile.css" type="text/css" />
   <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>
   <div class="barra"><p><a href="index.html">torna alla homepage</a></p></div>
   <p class="titoli" id="titolo">XHTML</p>
   <p class="titoli" id="rilievo">XHTML</p>
   <p class="titoli" id="ombra">XHTML</p>
   <p class="titoli" id="titolo2">1.1</p>
   <p class="titoli" id="rilievo2">1.1</p>
   <p class="titoli" id="ombra2">1.1</p>
   <p class="barra" id="bar2">&nbsp;</p>
   <div id="blocco">
      <p>
         Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
         exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
         officia deserunt mollit anim id est laborum.
      </p>
   </div>
   <p class="barra">&nbsp;</p>
</body>
</html>

Salviamo come pagina2.html e proviamo ad aprila subito: tralasciamo i commenti sulla resa grafica (per ora non ci badiamo tanto), ma cosa vi pare del titolo XHTML in rilievo e ombreggiato? E dell'1.1 addirittura incassato? Molti avrebbero inserito un'immagine per rendere effetti simili; noi abbiamo fatto tutto col semplice testo! Questo è reso possibile dal posizionamento assoluto: abbiamo assegnato ai tre id del titolo una posizione assoluta, con una certa distanza da bordo superiore (top) e una certa distanza dal bordo sinistro (left); abbiamo anche stabilito la terza dimensione, ovvero il layer o livello, rispetto al fondo, con quello z-index.

In questo caso, abbiamo adottato un layout sinistro a dimensioni fisse. Il posizionamento assoluto, infatti, si rende praticamente inapplicabile con un layout che non abbia una visualizzazione fissa rispetto ai bordi (ad esempio, quello centrato dove la distanza dal bordo sinistro cambia col variare della dimensione della finestra).

È anche vero che si potrebbe utilizzare il posizionamento relativo, ma, personalmente ho riscontrato, almeno con le prove che ho fatto, che il risultato non è identico per tutti i browser.

Un form

Come promesso, aggiungeremo ora un form alla nostra pagina.

Innanzitutto, aggiungiamo qualche riga al nostro altrostile.css e salviamolo:

fieldset {margin:10px}
label {display:block; margin:6px;}
legend {font-style:oblique; color:#009}
.piccolo {font-size:90%}
.breve {float:left; width:12em;}
.cl {clear:both}
.campi {border:2px ridge #568}
#invio {margin:20px 400px}

Nel codice della nostra pagina 2, posizionamoci nel blocco principale, proprio al di sotto del segnaspazio in latino (sotto la chiusura del p) e scriviamo:

      <form action="" method="post">
        <fieldset>

           <fieldset>

             <legend>informazioni principali</legend>
<!-- ESEMPI DI CAMPI TIPO 'TEXT' -->
             <label class="piccolo breve" for="nome" accesskey="1">Nome [1]:</label>
             <input class="campi" type="text" name="nome" id="nome" tabindex="1" />
             <br class="cl" />

             <label class="piccolo breve" for="cognome" accesskey="2">Cognome [2]:</label>
             <input class="campi" type="text" name="cognome" id="cognome" tabindex="2" />
             <br class="cl" />
<!-- ESEMPI DI SELEZIONE TIPO 'RADIO' -->
             <label class="piccolo breve" for="sesso">Sesso [3 4]:</label>
             <input class="campi" type="radio" name="sesso" id="sesso" value="m" accesskey="3"
               checked="checked" /> m &nbsp;&nbsp;
             <input class="campi" type="radio" name="sesso" value="f" accesskey="4" /> f
             <br class="cl" />

             <label class="piccolo breve" for="username" accesskey="5">Username [5]:</label>
             <input class="campi" type="text" name="username" id="username" tabindex="5" />
             <br class="cl" />
<!-- ESEMPIO DI CAMPO TIPO 'PASSWORD' -->
             <label class="piccolo breve" for="password" accesskey="6">Password [6]:</label>
             <input class="campi" type="password" name="password" id="password" tabindex="6" />
             <br class="cl" />

           </fieldset>

           <fieldset>

             <legend>altre informazioni</legend>
<!-- ESEMPIO DI TABELLA DI SELEZIONE -->
             <label class="piccolo breve" for="impiego" accesskey="7">Impiego [7]:</label>
             <select name="impiego" id="impiego" tabindex="7">
                <optgroup label="dipendente">
                  <option value="pubblico" selected="selected">pubblica amministrazione</option>
                  <option value="privato">privato</option>
                </optgroup>
                <optgroup label="professionista">
                  <option value="avvocato">avvocato</option>
                  <option value="ingegnere">ingegnere</option>
                </optgroup>
                <optgroup label="imprenditore">
                  <option value="commercio">commercio</option>
                  <option value="servizi">servizi</option>
                </optgroup>
             </select>
<!-- ESEMPI DI SELEZIONE TIPO 'CHECKBOX' -->
             <p class="piccolo">Interessi - seleziona una o pi&ugrave; opzioni [8 9 a]:</p>
             <p class="piccolo">
               <input class="campi" type="checkbox" name="informatica" id="informatica" accesskey="8" 
                tabindex="8" checked="checked" /> informatica
             </p>
             <p class="piccolo">
               <input class="campi" type="checkbox" name="viaggi" id="viaggi" accesskey="9" 
                tabindex="9" checked="checked" /> viaggi
             </p>
             <p class="piccolo">
               <input class="campi" type="checkbox" name="libri" id="libri" accesskey="a" 
                tabindex="10" checked="checked" /> libri
             </p>
<!-- ESEMPIO DI CAMPO DI TESTO ESTESO 'TEXTAREA' -->
             <label class="piccolo" for="motivo">Motivo della registrazione [b]:</label>
             <textarea class="campi" cols="40" rows="12" name="motivo" id="motivo" accesskey="b" 
              tabindex="11">Intendo registrarmi perché </textarea>

           </fieldset>

           <fieldset>

             <legend>invio</legend>
             <p id="invio"><input type="submit" value="invia il modulo" /></p>

           </fieldset>

        </fieldset>
      </form>

Pagina 2

Salviamo il file e apriamo la pagina. Ecco il nostro form! →

Come ho anticipato, il form che abbiamo costruito è solo una maschera vuota: con il parametro action, noi stabiliamo la destinazione del form (la stessa pagina, lasciando vuoto), dove, però, ad accogliere ed elaborare i dati ci vorrebbe uno script in php o perl o altra tecnologia lato-server.

Bene, il nostro mini-sito è finito, ma ci sarebbero dei ritocchi da fare: li vedremo nella prossima sezione.

Accessibilità

Con una definizione un po' semplicistica, possiamo dire che l'accessibilità è la disponibilità di una pagina web nei confronti dell'accesso ai suoi contenuti da parte di visitatori non vedenti o ipo-vedenti: tali visitatori, di fatto, dovrebbero essere messi nelle condizioni di interagire con la pagina tanto efficacemente quanto gli utenti normo-dotati.

Finora ne abbiamo parlato poco, ma ciò non significa che non abbiamo fatto niente: uniformandoci agli standard dell'XHTML 1.1, infatti, ci siamo portati avanti nel rispetto dell'accessibilità (l'aderenza agli standard è uno dei presupposti fondamentali).

Ancora, però, abbiamo qualcosa da fare...

Le access keys

Le access keys non sono altro che delle scorciatoie da tastiera da impostare, ad esempio, per i link fondamentali (come quelli dei menu).

Adottarle è molto semplice: basta inserire, all'interno dei tag a, il parametro accesskey="x", dove x sarà un carattere indicativo per il link. Ad esempio, metteremo...

- <a href="index.html" accesskey="h" title="pagina principale - accesskey h">home</a>
- <a href="pagina1.html" accesskey="1" title="pagina 1 - accesskey 1">home</a>
- ...

Il parametro title serve a visualizzare (o far dire ad un sintetizzatore vocale) informazioni aggiuntive sul link e, in questo caso, anche la presenza dell'accesskey.

Per accedere ai link, l'utente premerà alt+chiave (e invio su certi browser) o ctrl+chiave su mac-os.

Sequenze di link

Se dobbiamo rispettare l'accessibilità, non potremo far succedere sfilze di link senza alcun carattere divisore (occhio che la regola vale anche se i link sono inseriti in blocchi p o div diversi). Ecco la ragione per cui abbiamo fatto precedere ogni voce di menu da quel :: (avremmo potuto usare > _ - | etc.).

Immagini - testo alternativo e descrizione

Non abuseremo delle immagini, ma, quando comunque le inseriremo, avremo sempre cura di dare una breve descrizione delle stesse con il parametro alt. Qualora, poi, l'immagine sia particolarmente rappresentativa, inseriremo una descrizione più approfondita e lo faremo con il parametro longdesc="nomefile.txt" (può anche essere una pagina html), che, di fatto, non è altro che un richiamo ad un file esterno, contenente la descrizione. Vicino all'immagine, poi, avremo cura di porre un link allo stesso file, così (ad esempio):

<a href="descrizione.txt" title="descrizione dell'immagine">[d]</a>

Ordine e sequenzialità

Molto spesso si ha a che fare con siti che letteralmente disorientano il visitatore con una gran confusione di box, link, voci di menu disordinate e disperse per lo schermo... Se un sito del genere può disorientare un vedente, che effetto può avere su di una persona che non ci vede?

Per tale motivo, è opportuno rispettare un certo ordine ed una certa sequenzialità nelle nostre pagine, considerando che ci saranno persone che si dovranno muovere a forza di tab, guidate da quello che un sintetizzatore vocale può leggere.

Ridimensionamento

Abbiamo preparato la nostra bella veste grafica e siamo tutti soddisfatti. Ma ci siamo chiesti che effetto avrebbe un ridimensionamento del testo? Abbiamo considerato che quei caratteri piccoli, che, per noi, rendono il sito bello fico, per altri possono significare... non leggo una mazza...?

E allora, teniamo presenti due cose fondamentali:

  1. rendiamo i caratteri ridimensionabili anche da parte dei browser poco capaci (IE); è preferibile, pertanto, usare unità di misura che non diano problemi da questo punto di vista (gli em, per esempio);
  2. testiamo la resa grafica del sito con diversi ridimensionamenti; assicuriamoci che la modifica del corpo del carattere non vada a sconvolgere il layout con effetti disastrosi (non solo dal punto di vista estetico).

Rispetto della semantica

Se una voce di menu richiama una pagina che parla di cinema, eviteremo di scrivere, per esempio, La grande illusione... Le voci di menu, i titoli, i sottotitoli dovrebbero essere chiari e decisamente rappresentativi dei contenuti cui si riferiscono.

Allo stesso modo, se dobbiamo enfatizzare una parte di testo, eviteremo di usare un generico span richiamante una classe di stile: la stessa classe possiamo richiamarla in un tag em, così il testo sarà riprodotto enfatizzato dall'eventuale sintetizzatore.

Form accessibili

Un esempio pratico di come dovrebbe essere costruito un form accessibile l'abbiamo visto in Pagina 2. Qui mi limiterò ad alcuni chiarimenti.

Non faremo mai mancare il tag label (di fatto, un'etichetta) ai campi di input e il parametro tabindex agli stessi input (per impostare la successione degli spostamenti azionando il tab). È anche opportuno ricorrere, come abbiamo fatto nel menu, alle accesskey per le label.

Le opzioni in un campo di selezione dovrebbero essere raggruppate per categorie omogenee, per mezzo del tag optgroup.

Le caselle di selezione checkbox o radio dovrebbero essere sempre seguite, non precedute, dal testo corrispondente e, tra le opzioni, è sempre opportuno che una sia selezionata. Allo stesso modo, nei campi textarea, dovrebbe già essere visualizzato un breve testo d'esempio.

Eviteremo le tabelle per formattare il form e ricorreremo, invece ai tag fieldset e legend per organizzarlo.

Pop up e nuove finestre

Il parametro target (che permetteva di dirottare un link in una nuova finestra o in una diversa frame) è vietato già dall'XHTML 1.0 Strict. Molti suggeriscono di aggirare l'ostacolo ricorrendo al javascript. Ma, se il nostro scopo è quello di rendere il sito accessibile, non ricorreremo a simili sotterfugi. Niente nuove finestre, quindi: la navigazione deve avvenire tutta nella finestra principale. Se un utente preferisce altrimenti, può aprire una nuova finestra premendo contemporaneamente shift (o una nuova scheda con ctrl, se il suo browser ne è capace).

Allo stesso modo, eviteremo come la peste i pop-up e le menate simili.

Le briciole di pane

Altro accorgimento, sacrosanto anche nell'ottica della cosiddetta usabilità, è quello di inserire nelle pagine le briciole di pane (è un evidente richiamo a Pollicino...), ovvero l'itinerario dei passaggi che abbiamo fatto, con i link a ritroso. Sarebbe qualcosa del genere, insomma:

<a href="index.html">home</a> &rarr; <a href="pagina.html">pagina</a> &rarr; sezione etc. 

che visualizzerebbe: homepagina → sezione.

Esistono anche degli script per gestirle. Momentaneamente noi le inseriremo staticamente.


Mi sono limitato a considerare solo alcuni degli aspetti fondamentali dell'accessibilità. Maggiori informazioni possono essere ricavate dalle risorse che indico in Collegamenti esterni.

Validazione

Il fatto che abbiamo dichiarato la nostra DTD (Document Type Definition) in testa alla pagina e che ci siamo sforzati di non commettere errori, non significa che la nostra codifica sia effettivamente conforme agli standard. Per esserne sicuri, dovremo sottoporci al rigido esame dei validatori del W3C (World Wide Web Consortium) e non solo...

Validare l'XHTML

Per validare l'XHTML dovremo collegarci a...

http://validator.w3.org/

... dove potremo optare tra l'indicazione dell'url (se la nostra pagina è on-line), l'input diretto del codice e il caricamento della pagina da locale (quest'ultima opzione, però, non è possibile se la nostra pagina contiene scripting lato-server).

Validare i CSS

Per i CSS...

http://jigsaw.w3.org/css-validator/

... dove troviamo le stesse opzioni di prima.

È da tener presente che il validatore CSS è molto severo (infatti non è raro incorrere in lunghe serie di warnings). Il foglio, tuttavia, se non vengono visualizzati errori, è valido e quei warnings debbono essere intesi come consigli per migliorare lo stile.

Validare l'accessibilità

Qui le cose si fanno più complicate...

È da tener presente, innanzitutto, che vi sono tre livelli di accessibilità, secondo gli standard WAI (Web Accessibility Initiative): A, AA e AAA (l'ultimo è il più completo). Il W3C, in questo caso, si affida alla nostra discrezionalità e raccomanda di validare preventivamente l'XHTML ed i CSS. Esistono, tuttavia, altri strumenti che offrono una certa validazione. Eccone alcuni:

La validazione non è immediata come negli altri casi e i responsi di tali strumenti vanno studiati un po'. Unendo le risorse, comunque, si può giungere ad una conclusione attendibile.

Congratulazioni

Nel momento in cui i vari validatori ci porgono le loro congratulazioni per aver elaborato del codice conforme, potremo optare o meno per l'inserimento dei famosi, prestigiosi bollini di validità nella nostra home-page. Non limitiamo la cosa ad un banale sfoggio: se abbiamo fatto le cose per bene, pavoneggiarsi un po' non è un crimine; ma lo scopo primario di tale ostentazione dovrebbe essere quello di dare l'esempio, di stimolare l'emulazione negli altri.

Per la cronaca, le pagine che abbiamo costruito sono risultate perfettamente conformi alla validazione dell'XHTML 1.1 e dei CSS. Presumibilmente, saranno anche conformi agli standard WAI AAA per l'accessibilità.

Conclusioni

Quello che abbiamo fatto si propone di essere solo un input e, ripetendo parte della premessa, ribadisco che il seguito è affidato al vostro entusiasmo e alla vostra disponibilità ad approfondire. Uno dei prossimi passi, per esempio, potrebbe essere costituito da un bel tuffo nel web dinamico, con particolare riferimento alla coppia open-source per eccellenza: php-mysql...

Vorrei, tuttavia, che considerassimo anche ciò che non abbiamo fatto:

  1. non abbiamo costruito il classico paginone con il nostro programma di grafica preferito;
  2. non lo abbiamo dato in pasto allo stesso programma o ad altro software per affettarlo in tante porzioni di immagine (magari .gif), da sistemare in tante tabelle, magari annidate, con le spaziature forzate a suon di immagini di un pixel, mettendo immagini anche per rendere sfondi uniformi o, addirittura, parti di testo;
  3. non abbiamo elaborato ulteriormente il tutto con un programma di web-authoring, curando la formattazione in modalità grafica, che si sarebbe poi tradotta, però, in CSS in linea tag per tag o, peggio, in obsoleti parametri html.

Eppure, tutto questo costituisce routine per molti cosiddetti professionisti del web... Io non escludo che producano pagine estremamente curate dal punto di vista estetico. Nulla da dire contro la cura: anche l'occhio vuole la sua parte e, in fondo, il web è un'arte a 360 gradi! Ma proviamo a verificare il peso delle pagine, a riscontrare i tempi di caricamento (c'è ancora tanta gente che viaggia a 56 Kb...), senza parlare di usabilità, accessibilità... La bravura di uno sviluppatore si vede anche nel saper sezionare la grafica, nel saper elaborare il codice a mano, nel saper ricorrere ai CSS quando si tratta di rendere sfondi uniformi o barre o box...

Se vogliamo ritenerci veri sviluppatori, c'è poco da dire: dobbiamo tendere ad un web...

  • leggero;
  • razionale;
  • usabile;
  • accessibile.

Se poi è anche bello..., ben venga!

Questo è quanto.

Collegamenti esterni

Questa è una serie limitata di collegamenti. Con un po' di buona volontà e grazie ai motori di ricerca, la lista si potrebbe ulterioriormente incrementare...

L'ordine dei link è meramente casuale.

HTML - XHTML

CSS

Accessibilità

L'ultimo link è particolarmente utile, in quanto non è altro che un ulteriore ricco elenco di risorse sull'accessibilità (in inglese).



Autore: ninobi

Sul web: http://ninobi.altervista.org.

E-mail: aschenaz@gmail.com

↑ indice

Strumenti personali
Namespace

Varianti