*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 8

*

Oggetti e Contenuti

Con la conclusione della realizzazione della pagina di base, si può procedere alla realizzazione dell'intero sito.
Produciamo quindi le nostre pagine specifiche aprendo quindi 6 nuove pagine all'interno delle quali inserire l'intero codice della pagina base e le salveremo nella stessa directory con i loro rispettivi nomi, avremo pertanto :
- index.htm
- chi_siamo.htm
- prodotti.htm
- supporto.htm
- contatti.htm
- info.htm
Occorre quindi stabilire cosa inserire nelle pagine.
In genere la Home contiene i collegamenti e l'annuncio delle novità, una breve descrizione del sito, alcune immagini e occorrerebbe far si che la pagina sia rapidissima nel caricarsi e dai contenuti diretti ed immediati. I principi generali sono :

  1. Le novità si collocano nella parte alta della pagina e ben evidenziate
  2. Le immagini devono essere leggerissime e molto limitate nel numero
  3. I moduli eventualmente adibiti alla registrazione devono essere facili da individuare e da compilare
  4. Il testo deve essere leggibile, chiaro, semplice e diretto
  5. I links all'interno del testo devono essere evidenti e diversificati rispetto al testo

Nella nostra pagina di base abbiamo rispettato tutte queste direttive generali e non rimane altro che inserire il testo.
Faremo la stessa cosa per tutte le altre pagine e ci soffermeremo ora sulla produzione di Tabelle per Dati, di Moduli, di Scripts interattivi e di Immagini per dare al sito un minimo di interattività.

Tabelle di dati

Per gestire dati tabellari e far si che questi dati siano ben incolonnati e facili da consultare anche da chi usa tecnologie assistive, si usano le tabelle. Molti webdesigner usano le tabelle per creare la struttura delle pagine web, ma è un errore, le tabelle si usano per la gestione e l'impaginazione dei dati.
Supponiamo quindi di volere gestire una tabella.
Costruiamo la struttura passo a passo partendo dal corpo generale della tabella:


<table summary="descrizione dei dati contenuti e della loro suddivizione">
...
</table>

La struttura di una tabella prevede il marcatore generale (<table>) che deve sempre avere l'attributo "summary" (evidenziato in giallo) e che rappresenta una descrizione di come è strutturata la tabella e come sono suddivisi i dati al suo interno. Il fatto che in un normale browser non compaia non significa che questo attributo non sia importante per gli strumenti assistivi e la sua mancata presenza viene segnalata dagli editor xhtml e dal validatore del W3C.
Supponendo di voler mostrare il soggetto generale al quale la tabella si riferisce, inseriamo una cella di intestazione generale, come mostrato nel box sottostante:


<table summary="descrizione dei dati contenuti e della loro suddivizione">
<tr>
<th colspan="4" scope="colgroup">Soggetto</th>
</tr>
...
</table>

Si nota che la cella di intestazione generale è contenuta in una riga (tr). L'attributo "colpspan" indica che questa cella di intestazione è collegata a tutte le colonne componenti la tabella, nel nostro caso 4.
L'attributo "scope" con il valore "colgroup" indica che questa cella di intestazione è riferita a tutte le colonne della tabella. Il sintetizzatore vocale dei sistemi assistivi pronuncerà il titolo indicando all'utente che la tabella si riferisce a quel preciso soggetto.
A questo punto stabiliamo che la tabella debba avere 4 colonne e 4 righe con i dati. Produrremo questo codice :


<table summary="descrizione dei dati contenuti e della loro suddivizione">
<tr>
<th colspan="4" scope="colgroup">Soggetto</th>
</tr>
<tr>
<th scope="col" abbr="primo">1° soggetto</th>
<th scope="col" abbr="secondo">2° soggetto</th>
<th scope="col" abbr="terzo">3° soggetto</th>
<th scope="col" abbr="quarto">4° soggetto</th>
</tr>
<tr>
<td scope="row">riferimento 1</td>
<td>contenuti</td>
<td>contenuti</td>
<td>contenuti</td>
</tr>
<tr>
<td scope="row">riferimento 2</td>
<td>contenuti</td>
<td>contenuti</td>
<td>contenuti</td>
</tr>
<tr>
<td scope="row">riferimento 3</td>
<td>contenuti</td>
<td>contenuti</td>
<td>contenuti</td>
</tr>
<tr>
<td scope="row">riferimento 4</td>
<td>contenuti</td>
<td>contenuti</td>
<td>contenuti</td>
</tr>
</table>

Quando le colonne conservano dati riferiti ad un soggetto preciso, andrebbero dotate di "cella capitolo o di intestazione" (<th scope="col" abbr="nome abbreviato del soggetto" ) che permette di identificare il soggetto dei dati contenuti nelle celle posizionate sulla stessa colonna.
Quando le righe conservano dati riferiti ad un preciso soggetto, andrebbero dotate di identificazione di riga (<td scope="row">) in modo che sia facilitata l'identificazione dei contenuti di una cella riferiti ad una riga specifica.
Da un punto di vista grafico non cambia nulla, ma l'uso di sintetizzatori vocali per non vedenti, permette all'utente di sapere a quale intestazione ed a quale riga della tabella corrisponda un preciso dato. Potete vedere questa tabella in questa pagina
Le tabelle risentono ovviamente delle modificazioni grafiche imposte dai CSS e applicheremo quindi le nostre modiche affinché sia una tabella carina.


table{margin : 2%;
background : #fff;
border : 2px solid #666;
width : 96%;
}

th{background : #369;
color : #fff;
letter-spacing : 0.1em;
border : 1px solid #000;
}

td{background : #f5f5f5;
color : #666;
border : 1px solid #666;
width : 25%;
}

td:hover{background : #fff;
color : #000;
border : 1px solid #000;
}

Potete osservare la tabella finita in questa pagina.

Concludiamo con alcune raccomandazioni.
Le tabelle hanno una struttura complessa e sarebbe importante evitare di annidarle, questo perché oltre a rendere difficile la loro gestione e l'individuazione dei contenuti "via codice", possono creare gravi disturbi all'uso di sistemi assistivi.
Se la tabella è molto complessa potrebbe causare un sensibile appesantimento della pagina e sarebbe così opportuno evitare l'inclusione di immagini o di altri oggetti.
E' importante evitare le tabelle a fini di layout per evitare problemi al momento della linearizzazione dei contenuti che avviene con i sistemi assistivi.

Passiamo ora ad illustrare la produzione di Moduli usabili e accessibili

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto