Prima applicazione

In caso di prima applicazione nel caso si utilizzino DTD di tipo Transitional l’enunciato richiede di evitare sia l’uso di attributi di formattazione, a favore dell’utilizzo di fogli di stile, sia l’apertura di nuove finestre. L’allineamento, i margini e il posizionamento degli elementi nella presentazione di una pagina vanno gestiti tramite fogli di stile: lo sviluppatore, tuttavia, deve garantire la possibilità di lettura dei contenuti della pagina anche in mancanza dei fogli di stile stessi, al fine di garantirne l’accesso e la fruibilità agli utenti che utilizzano lettori solo testo o vocali.

Allineamento: utilizzando le proprietà text-indent, text-align, word-spacing, letter-spacing e white-space è possibile formattare il testo aumentando/diminuendo gli spazi, definendo l’allineamento e controllando il comportamento dello spazio bianco. Con la regola text-align: center, per esempio, sarà possibile eliminare l’elemento <center>, ormai obsoleto.

Margini: le proprietà margin, margin-top, margin-right, margin-bottom, margin-left consentono di definire i margini dell’elemento (<div>, <blockquote>,…) all’interno del quale verranno forniti i contenuti.

Posizionamento: le proprietà float, position, top, right, bottom, left consentono di posizionare l’oggetto nella pagina.

Si consiglia di evitare l’uso degli stili creati con l’attributo HTML “style”: nelle versioni più recenti di XHTML (1.1 e successive) tale elemento è stato deprecato per garantire una maggiore separazione di contenuto e presentazione.

In HTML utilizzando i frame, si consente l’utilizzo dell’attributo target che consente di definire la destinazione del collegamento. Questa pratica dedicata ai frame è stata poi spesso utilizzata in modo scorretto, a causa della disponibilità di alcuni valori per l’attributo target che consentono di aprire nuove finestre o di aprire il contenuto di un frame sull’intera finestra del browser.

<a href="ultime_notizie.htm" class="external">Ultime Notizie</a>

Utilizzando l’attributo class=”external” selezionando il collegamento verrà aperta la pagina ultime_notizie.html in una nuova finestra. L’esempio così come riportato non è corretto rispetto ai requisiti di questo punto di controllo, in quanto non informiamo l’utente che la pagina sarà aperta in una nuova finestra. È quindi quantomeno necessario informare l’utente, utilizzando l’attributo title:

<a href="ultime_notizie.htm" class="external"
title="Attenzione: si aprirà una nuova Finestra">Ultime Notizie</a>

Inoltre nella nuova finestra l’utente non troverebbe la propria cronologia di navigazione, in quanto non esistendo una pagina precedente il pulsante Precedente del browser risulterebbe disattivato, e perderebbe quindi l’orientamento.

Anche per questo motivo l’attributo target non è disponibile in HTML 4.01 Strict e XHTML 1.0 Strict e scompare completamente a partire da XHTML 1.1.

Verifica del requisito

Il controllo del codice va effettuato secondo il tipo di grammatica utilizzata. Per quanto riguarda i contenuti web, solitamente si utilizza il validatore per il linguaggio di marcatura del W3C mentre per i fogli di stile CSS si utilizza il validatore dei fogli di stile fornito sempre dal W3C.

Controllo della validità del linguaggio di marcatura

Il W3C rende disponibile agli sviluppatori un sistema di controllo automatico della sintassi di una pagina Web, ovvero il Markup Validation Service <http://validator.w3.org/>. La pagina Web si presenta con una veste grafica gradevole contenente due moduli.

  • Validate by URL. Richiede l’indirizzo della pagina Web che si desidera validare.
  • Validate by File. Richiede la selezione di un documento in locale dovrà essere trasferito on-line per essere validato.

Selezionando Extended interface, è possibile personalizzare la modalità di validazione del contenuto e dove dovremmo selezionare le opzioni:

  • outline: per la visualizzazione della struttura degli elementi di intestazione. In caso di mancanza di un elemento, il validatore segnalerà l’elemento mancante (es: <h2> missing!).
  • show source: per visualizzare il sorgente della pagina, al fine di poter identificare con un click la riga che causa l’errore di validazione.

Impostando correttamente questi parametri e avendo soprattutto cura di rispettare le grammatiche formali dichiarate per il documento, possiamo segnalare la pagina al validatore che, in caso di errori, ci comunicherà:

  • la riga e la colonna dove inizia l’errore, con un collegamento ipertestuale alla riga di codice riportata nella pagina;
  • la rappresentazione di parte della linea di codice contenente l’errore, con posizionamento del punto di errore;
  • il messaggio di errore, in alcuni casi con collegamento ad una pagina descrittiva del tipo di errore.

Se nella modalità avanzata selezioniamo anche la voce “Verbose Output”, verranno fornite indicazioni aggiuntive relative agli errori individuati all’interno del documento. Un errore dei più comuni è il seguente:

non SGML character number 146

Questo errore normalmente si riscontra quando, all’interno di sistemi CMS o di editor visuali, si procede a un copia e incolla di contenuti provenienti da sistemi di gestione testi (word processor).

L’errore indica che è stato utilizzato un carattere illegale. In HTML/XHTML per la codifica dei caratteri (salvo diversa dichiarazione) si utilizza solitamente lo standard ISO8859-1, che dichiara 65 caratteri non definiti (da 0 a 31 inclusi e da 127 a 159 inclusi). Il W3C Markup Validator ha individuato nel testo uno di questi caratteri, nel nostro caso il carattere 146, che in un browser potrà essere mostrato come un apice rovesciato o una particolare virgoletta, ma che nel sistema di un altro utente potrebbe essere un carattere totalmente diverso o non essere visibile del tutto.

Figura 4.1 Interfaccia del W3C Markup Validator.

Il W3C consiglia di sostituire questo carattere con il suo equivalente tra i caratteri definiti in ASCII tra il numero 32 e il numero 126, oppure di utilizzare l’appropriata entità identificativa del carattere come indicato sul sito del W3C <http://www.w3.org/MarkUp/html3/latin1.html>.

Nel caso di contenuti in lingue diverse da quelle europee, è consigliato utilizzare come codifica utf-8 che consente l’uso di un maggior numero di caratteri e riconosce anche alcuni caratteri solitamente indicati come errori SGML in ISO8859-1 quali, ad esempio, le virgolette tipografiche e i tre puntini di sospensione.

Quando si utilizza un sistema di gestione dei contenuti (CMS), un altro classico errore è dato dai collegamenti che contengono le variabili necessarie a far funzionare correttamente la nuova pagina:

<a href="pagina.asp?id=1&cat=2&zzz=a">Pagina 1</a>

Il validatore, in presenza di tale istruzione, indicherà diversi errori di definizione di identità:

l'identità "cat" non è definita
l'identità "zzz" non è definita

L’errore è causato da un errato utilizzo della codifica HTML: quando il validatore individua il carattere &, ritiene che successivamente sarà definita l’entità identificativa di un carattere e quindi l’utilizzo della semplice & per la separazione dei parametri è un errore: bisogna codificare & con la sua equivalente entità identificativa, &amp;. Nel nostro esempio, per superare la validazione automatica del W3C Markup Validation Service il codice dovrà essere modificato come segue:

<a href="pagina.asp?id=1&amp;cat=2&amp;zzz=a">Pagina 1</a>

Altri errori possono essere causati dall’utilizzo di attributi proprietari definiti da alcuni editor visuali, attributi che non fanno parte delle DTD dichiarate e quindi non utilizzabili e per i quali il messaggio di errore è:

There is no attribute "XXXXX"

Attenzione all’effetto a cascata degli errori: spesso gli errori successivi all’attuale vengono visualizzati esclusivamente perché un determinato elemento (quello con l’errore corrente) non risulta chiuso.

L’elenco delle domande più frequenti sugli errori di validazione è disponibile all’interno del sito del W3C nella sezione dedicata <http://validator.w3.org/docs/errors.html> al W3C Markup Validation Service.

Se al termine della validazione verrà visualizzato il messaggio No errors found!, è possibile apporre il logo Valid HTML o XHTML (a seconda del tipo di documento) sulla pagina, seguendo le indicazioni riportate nella pagina dedicata alla spiegazione delle norme per la riproduzione del logo.

Logicamente, se si utilizzano ulteriori linguaggi di marcatura nel documento (X)HTML, per esempio codice MathML, anch’essi verranno validati secondo lo schema DTD assegnato.

Nel sito del W3C sono presenti alcune DTD con integrati linguaggi come MathML o SVG utilizzabili a tal fine <http://www.w3.org/QA/2002/04/valid-dtd-list.html>.

Attenzione comunque che il validatore del W3C non è infallibile: non controlla la ricchezza di marcatura (quindi acronimi, abbreviazione e citazioni o quoting) e soprattutto non controlla eventuali modifiche del codice della pagina. Tramite DOM Injection, ad esempio, con del codice javascript richiamato da un documento esterno è possibile modificare degli attributi e degli elementi contenuti nella pagina in modo da superare la validazione automatica ma variando il contenuto della pagina web aggiungendo elementi ed attributi non validi. Il caso più classico è un javascript esterno per aggiungere l’attributo class=”external” alle pagine XHTML 1.0 Strict.

Ecco un esempio da evitare in quanto se un valutatore identifica tale errata procedura dovrà segnalarlo sul modulo di valutazione come mancato superamento del Requisito 1:

function linkesterno() {
for (var i=0; i<document.links.length; i++) {
if (document.links[i].className=="linkEsterno") {
document.links[i].class="external";
}
}
}

In questo esempio a qualsiasi elemento contrassegnato dalla classe “linkesterno” il codice Javascript forza l’inserimento dell’elemento class=”external”. All’interno della pagina il codice sarà simile al seguente:

<a href="pagina.html" class="linkEsterno">Pagina</a>

mentre il codice reale fornito al browser ed identificabile con applicativi come DOM Inspector <http://www.ieinspector.com> sarà:

<a href="pagina.html" class="linkEsterno" class="external">Pagina</a>

Tramite questo codice il W3C Markup Validator non potrà identificare a violazione della DTD, mentre l’esperto valutatore potrà chiaramente identificarla.

Il valutatore, al fine di verificare l’applicazione del requisito dovrà inoltre utilizzare strumenti di supporto per:

  • verificare che la DTD dichiarata sia conforme al requisito 1, ovvero per tutti i nuovi siti internet sia utilizzata la DTD HTML 4.01 Strict, XHTML 1.0 Strict o XHTML 1.1;
  • verificare il corretto utilizzo degli elementi di intestazione, delle citazioni e delle liste;
  • verificare la presenza di immagini che sostituiscono oggetti rappresentabili tramite linguaggi di marcatura;
  • verificare l’utilizzo e il corretto utilizzo di elementi ed attributi secondo le specifiche del linguaggio di marcatura utilizzato.

Tramite la Barra dell’accessibilità è possibile utilizzare:

Validazione

W3C HTML Validator – Valida HTML (nuova finestra). Consente di inviare direttamente il documento alla validazione (Punto di controllo 3.2) e di verificare la corretta corrispondenza degli elementi di intestazione (Punto di controllo 3.5).

CSS

Elementi ed attributi deprecati (Nuova finestra). Visualizza gli elementi e gli attributi deprecati (Punto di controllo 11.2).

Struttura

Intestazioni. Visualizza tutti gli elementi d’intestazione sulla pagina corrente (Punto di controllo 3.5).

Struttura delle intestazioni (Nuova finestra). Visualizza il titolo del documento e le sue intestazioni (da <h1> ad <h6> compreso il contenuto) in una nuova finestra. (Punto di controllo 3.5).

Elementi di lista. Visualizza le liste ordinate, non ordinate, di intestazioni presenti sulla pagina corrente (Punto di controllo 3.6).

Blockquote / q. Visualizza gli elementi <blockquote> e <q> presenti all’interno della pagina (Punto di controllo 3.7).

Sorgente

Visualizza codice generato. Consente di visionare il codice generato per verificare l’eventuale modifica di elementi ed attributi tramite DOM (Punto di controllo 3.2).

Visualizza parte del codice. Consente di visionare il codice generato per il contenuto selezionato al fine di consentire l’identificazione di utilizzo scorretto di elementi ed attributi, modificati tramite DOM (Punto di controllo 3.2).

Evidenzia nel sorgente. Contiene una serie di sottovoci che consentono di evidenziare elementi ed attributi specifici all’interno del sorgente generato.

DOM Inspector. Consente di verificare con dei programmi esterni le eventuali modifiche al codice tramite DOM (Punto di controllo 3.2).

L’esperto dovrà quindi accedere al codice della pagina HTML e verificare manualmente l’uso corretto degli elementi e degli attributi secondo le regole definite dalle specifiche delle grammatiche formali utilizzate.

Controllo della validità dei fogli di stile

Come per le pagine Web, anche per i fogli di stile il W3C ha creato un’applicazione di validazione, disponibile sia on-line sia con possibilità di utilizzo in locale. Nel nostro esempio utilizzeremo la versione on-line <http://jigsaw.w3.org/css-validator/>, di cui ho personalmente curato la traduzione in lingua italiana.

Per procedere con la validazione del foglio di stile, sarà sufficiente digitare l’URL del foglio di stile o della pagina Web che lo contiene (se lo stile è interno al documento). Il risultato della validazione, in caso di mancanza di errori gravi, può essere di due tipi: validazione corretta ma con avvisi oppure validazione corretta senza avvisi. Nel primo caso il foglio di stile risulta valido ma sono presenti alcuni avvisi relativi, ad esempio, al mancato utilizzo di caratteri di tipo generico, fatto che può compromettere il livello di accessibilità delle pagine.

Nel caso fossero presenti errori di sintassi, ogni errore verrà segnalato con indicazione della riga e dell’attributo errato consentendo un facile intervento per la correzione del foglio di stile.

Gli errori più frequenti nei fogli di stile sono i seguenti:

  • mancanza degli elementi di chiusura: è necessario apporre il punto e virgola al termine della dichiarazione di ogni proprietà e apporre la parentesi graffa chiusa per terminare l’elenco delle proprietà di un elemento;
  • utilizzo di gruppi di caratteri senza prevedere almeno un carattere di tipo generico (per esempio, sans-serif), oppure utilizzo di nomi per tipi di caratteri contenenti spazi che non vengono racchiusi tra apici (per esempio, “Times New Roman”);
  • utilizzo di valori non validi per i colori: si consiglia di usare sempre valori di tipo esadecimale anteponendo il carattere #;
  • utilizzo di nomi non validi, come “.bell’immagine”.

Al termine della verifica dei suddetti punti l’esperto potrà quindi dichiarare la conformità al requisito.