Comunicazione Web efficace e accessibilità dei siti scolastici

Università di Bergamo > Facoltà di Lettere e Filosofia > Marco Lazzari > Tesi > Case Study: WeBelotti.

CASE STUDY: WeBelotti,
il sito Web dell'Istituto "B. BELOTTI" di BERGAMO

La grammatica del sito e la validazione HTML

Il sito Web dell'ITCPA "B. Belotti" all'origine era codificato in HTML 4.01.

Le ultime specifiche del linguaggio HTML ¹ risalgono al 1997 e da quella data il linguaggio non ha subito sostanzialmente modifiche ufficiali. Infatti il W3C non ha standardizzato versioni successive alla 4.01 ma si è orientato alle tecnologie XML ², dando origine al linguaggio XHTML 1.0.

Con l'avvento della Legge Stanca il passaggio da HTML 4.0 a XHTML 1.0 è divenuto una necessità per i siti di pubblica utilità.

Il linguaggio XHTML ³ è una ridefinizione dell'HTML 4.01 come applicazione derivata da XML, ovvero XHTML rimane molto simile a HTML, ma eredita la rigidità sintattica propria dell'XML. Infatti il nuovo linguaggio possiede tutti i tag dell'HTML 4.01 senza nessuna aggiunta di nuovi tag, ma ne ridefinisce le regole sintattiche alla luce dell'XML.

Ciò è dovuto principalmente al bisogno delle applicazioni Web di possedere uno standard che sia il più possibile uguale per tutte le piattaforme (Windows, Linux, Mac, OS/2 ecc..).

Grazie al fatto che XHTML è un'applicazione derivata di XML, abbiamo i seguenti vantaggi:

XHTML, come applicazione XML, può sfruttare strumenti e applicazioni, ormai divenute standard, che operano con XML (Validatori XML, convertitori di tutti i tipi per XML, ecc);
Le pagine Web XHTML sono accessibili da tutti i dispositivi che ormai operano con il Web come telefonini, WebTV e tutto ciò che nascerà successivamente;
XHTML eredita l'estensibilità che XML possiede. Questo tipo di estensibilità permette la nascita di nuove versioni del linguaggio senza richiedere aggiornamenti di browser o applicazioni che gli apparecchi utilizzano per accedere a Internet. Basta fare riferimento al DTD corretto (Document Type Definition) per fare in modo che il dispositivo sia in grado di tradurre la nuova versione del linguaggio XHTML con cui la pagina Web è scritta.

I modi di scrittura di una pagina Web sono 3 e si differenziano per il tipo di applicazione delle regole del linguaggio:

XHTML STRICT: questa è la forma più rigorosa che vieta l'utilizzo dei tag relativi all'aspetto grafico del documento e vincola il controllo dell'aspetto grafico della pagina ai soli CSS.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"

XHTML TRANSITIONAL: questa variante ammette l'utilizzo di tag e attributi che agiscono sull'aspetto grafico della pagina Web.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"

XHTML FRAMESET: questa variante permette l'utilizzo dei frame nei documenti XHTML.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd"

Oltre alla versione 1.0 di XHTML, vi è la versione 1.1 ⁴.

Il W3C ha portato al termine la ridefinizione di un linguaggio di markup orientato solo alla struttura. E' basato infatti sulla DTD Strict di XHTML 1.0, ma tutti gli elementi e gli attributi di presentazione sono definitivamente esclusi. La dichiarazione DOCTYPE può dunque fare riferimento solo ad una DTD e non a tre:

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

Questa DTD è diversa dalle precedenti in quanto non contiene una lista di elementi e attributi con le regole che ne definiscono l'uso ma è costituita da diverse dichiarazioni che includono altrettanti moduli. Ciascun modulo definisce un insieme di elementi e attributi per una determinata classe di oggetti e può essere di due tipi: i Moduli Fondamentali, detti Core Modules e i Moduli di Estensione, detti Extension Modules che sono opzionali.

Attualmente i Moduli del primo tipo (Core Modules) ⁵ sono i seguenti:

Structure Module: raggruppa quei tag che definiscono la struttura del Documento XHTML come html, head, body
Text Module: raggruppa i tag di qualificazione testuale come h1, h2, div, code, p
Hypertext Module: raggruppa i tag che hanno a che fare con i link come a
List Module: raggruppa i tag di listing come ul, ol

I Moduli del secondo tipo (Extension Modules) ⁶ specificano invece particolari sezioni di un documento XHTML tra i quali:

Forms Module: raggruppa i tag dei form come form, input, select
Tables Module: raggruppa i tag di tabellazione table, tr, td
Images Module: raggruppa i tag di inserimento immagini come img
Frames Module: raggruppa i tag frameset, frame, noframe
Scripting Module: raggruppa i tag script e noscript.

Le specifiche sui moduli XHTML fanno parte di un'altra raccomandazione, quella sulla modularizzazione di XHTML ⁷.

Si è presa quindi la decisione di passare per gradi dall'HTML 4.01 all'XHTML 1.0 Strict per arrivare successivamente all'XHTML 1.1.

Qui di seguito sono illustrate le modifiche apportate al codice durante il passaggio per poter effettuare la validazione:

Formalizzazione del documento: il primo passo è stato l'adeguamento di tutte le dichiarazioni DTD all'inizio di ogni documento. Ho sostituito
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"

con

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"

e successivamente con

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

Dichiarazione di appartenenza a XML: ogni documento XHTML è, di fatto, un documento XML. Quindi il secondo passo è stato inserire l'appartenenza al formalismo XML sostituendo
meta http-equiv="Content-type" content='text/html; charset="ISO-8859-1"' <

con

?xml version="1.0" encoding="UTF-8" ?

Definizione dello spazio dei nomi: XHTML necessita della definizione di uno "spazio dei nomi" ⁸ all'interno della marcatura. Quindi il terzo passo è stato sostituire
html

con

html xmlns="http://www.w3.org/1999/xhtml"

Successivamente sono passata alla validazione del linguaggio XHTML 1.0 Strict con il MarkUp Validation Service ⁹ del W3C. Mi sono collegata al sito e ho inserito l'URL http://www.itc-belotti.org nel campo testo.

Il documento è risultato non valido a causa dei seguenti errori:

Modifica delle marcature e dei rispettivi attributi: in XHTML tutte le marcature e gli attributi devono essere scritte in minuscolo. Quindi il quarto passo è stata la sostituzione tutte le marcature e degli attributi in forma minuscola.
Chiusura delle marcature e inserimento dell'elemento vuoto: in XML non è permesso che una marcatura sia aperta ma non chiusa e questo si ripercuote su XHTML. Il quinto passo è stata la chiusura delle marcature "in linea" cioè con l'inserimento di un carattere / prima della chiusura e di uno spazio vuoto raccomandato dal W3C per risolvere i problemi d'interpretazione da parte di alcuni browser.
Eliminazione dell'attributo "target": l'attributo "target" è molto utile alla navigazione quando abbiamo la necessità di far aprire una pagina Web o un URL esterno in una nuova finestra o in un determinato frame. Nel valore di "target" va specificata una delle parole chiave predefinite per far aprire per aprire la pagina nello stesso frame ("_self"), per annullare i frame ("_top") o per aprire la pagina in una nuova finestra del browser ("_blank"). Questo attributo non può più essere utilizzato e la nuova pagina si deve aprire nella stessa finestra. Questa modifica è stata apportata con qualche remora in quanto l'utente, se si collega ad un sito esterno tramite un link, perde la possibilità di consultare i due siti contemporaneamente in due finestre ed è obbligato ad utilizzare il tasto "Indietro" per tornare al sito di partenza.

In seguito sono passata alla validazione del linguaggio XHTML 1.1 e come si può vedere dalla schermata, il documento è risultato non valido XHTML 1.1.

Figura 3. Pagina di rapporto del MarkUp Validation Service del W3C

Figura 3. Pagina di rapporto del MarkUp Validation Service del W3C

Gli errori riportati sono i seguenti:

Modifica dell'attributo "name": l'attributo "name" non deve più essere utilizzato per identificare un elemento con un identificativo, ma si deve ricorrere all'attributo "id". Il sesto passo è stato quindi la sostituzione di "name" con "id".
Sostituzione dell'attributo "lang": l'attributo "lang" specifica la lingua del contenuto dell'elemento e dei valori di attributo e consente ai programmi utente di riprodurre il contenuto in un modo più significativo, basato sulle consuetudini culturali accettate per una data lingua. Questo attributo deve essere sostituito con l'attributo "xml:lang" dell'XML.
Raggruppamento degli attributi "form": il form permette l'immissione di dati nella pagina. Il tag "form" funziona da contenitore di una serie di elementi quali "input", "option", "select", "label" che necessitano di essere raggruppati in un "div" o in un paragrafo.

Una volta corretti gli errori ho rivalidato il codice e ho ottenuto questa schermata di conformità della pagina alla sintassi XHTML 1.1 e il "bollino" che è possibile esporre.

bollino di conformità della pagina alla sintassi XHTML 1.1

Figura 4. Pagina di rapporto del MarkUp Validation Service del W3C

Figura 4. Pagina di rapporto del MarkUp Validation Service del W3C

Note

1 Definizione e specifiche dell'HTML all'indirizzo http://www.w3c.org/MarkUp. Ritorno al testo

2 Definizione e specifiche dell'XML all'indirizzo http://www.w3c.org/XML. Ritorno al testo

3 Definizione e specifiche dell'XHTML all'indirizzo http://www.w3c.org/MarkUp/#xhtml1. Ritorno al testo

4 Definizione e specifiche dell'XHTML 1.1 all'indirizzo http://www.w3c.org/MarkUp/#xhtml11. Ritorno al testo

5 Core Modules all'indirizzo http://www.w3.org/TR/2001. Ritorno al testo

6 Extension Modules all'indirizzo http://www.w3.org/TR/2001. Ritorno al testo

7 Modularizzazione di XHTML all'indirizzo http://www.w3c.org/MarkUp/modularization. Ritorno al testo

8 Lo spazio dei nomi permette la creazione e l'uso di marcatori ambigui, ovvero con lo stesso nome, ma in riferimento a significati e ambienti diversi utilizzando costrutti con nomi non equivoci http://www.html.it/xhtml/xhtml_04.htm. Ritorno al testo

9 MarkUp Validation Service all'indirizzo http://validator.w3.org. Ritorno al testo

Prosegue con: I CSS e la validazione dei fogli di stile.