Requisito 1 – Prima applicazione e verifica

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.

Potrebbero interessarti anche i seguenti articoli

  • Requisito 1 – Enunciato, motivazione ed implementazioneRequisito 1 – Enunciato, motivazione ed implementazione Enunciato: Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti […]
  • Requisiti 2 e 3Requisiti 2 e 3 Requisito 2 Enunciato: Non è consentito l'uso dei frame nella realizzazione di nuovi siti. In sede di prima applicazione, per i siti Web esistenti già […]
  • Requisiti 11, 12, 13, 14Requisiti 11, 12, 13, 14 Requisito 11 Enunciato: Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i […]
  • Requisiti 15, 16, 17Requisiti 15, 16, 17 Requisito 15 Enunciato: Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati; […]
  • Requisiti 19, 20, 21, 22Requisiti 19, 20, 21, 22 Requisito 19 Enunciato: Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi anche se letti indipendentemente dal proprio […]
Condividi:

Informazioni sull'autore

Roberto Castaldo
Roberto Castaldo
Sono nato e vivo a Napoli, ed opero professionalmente nel mondo dell'informatica da più di vent'anni. In realtà l'informatica, insieme alla musica e ad altre poche cose, è stato da sempre un mio chiodo fisso, e la buona sorte mi ha aiutato a trasformarlo in un mestiere. Sin dalle mie primissime esperienze lavorative - insegnavo dattilografia ed i primi rudimenti di informatica in una scuola privata - mi sono trovato a mio agio nel settore della formazione e della divulgazione, certamente aiutato dai miei studi classici. Nel 1987 ho iniziato la mia attività come insegnante d'informatica in un Istituto Professionale Statale - per circa due anni sono stato il più giovane insegnante di ruolo d'Italia. Ho avuto svariate esperienze anche nel settore privato come sviluppatore (TPascal - lo ricordate? - VB, ASP e, più di recente VB.NET ed ASP.NET), ma soprattutto come docente e come divulgatore. Ho effettuato attività di formazione presso le più grandi realtà imprenditoriali italiane (IBM, Omnitel, Telecom Italia, TIM, Unicredito, Ekip, BNL, SSGRR), ma anche all'estero in qualità di docente e/o progettista di percorsi formativi; gli argomenti spaziano dal mondo Office fino al multimedia ed alla programmazione avanzata ASP ed ASP.NET. Ho collaborato con l'Istituto Italiano per gli Studi Filosofici di Napoli, ho redatto articoli/tutorial per un'importante rivista informatica (Win98 Magazine), ed ho partecipato allo sviluppo di CD-Rom Multimediali (IBM, Selfin, BNL) curando personalmente la registrazione dei commenti audio ed il montaggio delle musiche (CoolEdit), l'eventuale connessione a database remoti, l'assemblaggio degli elementi testuali, grafici e multimediali (Director 8) fino alla creazione del master definitivo. Negli anni 1998-2000 ho collaborato con la Gazzetta dello Sport Online curando, in occasione dei più importanti avvenimenti sportivi (Mondiali ed Europei di calcio, Giro d'Italia, Campionato di Serie A) le pagine contenenti la traduzione in inglese e francese degli articoli in italiano. Il mio compito consisteva nell'inviare ai miei traduttori la cronaca in italiano, riceverne la traduzione, creare le pagine inglesi e francesi del sito www.gazzetta.it e pubblicarle sul server, il tutto entro 90 minuti dalla fine dell'evento. Nel frattempo, mi avvicinavo in maniera sempre più approfondita alle problematiche legate all'accessibilità di siti web, progettando percorsi di formazione ad hoc, ed aderendo entusiasticamente al progetto webaccessibile.org. Sono stato per diversi mesi membro del XML Protocol Working Group del W3C, ed attualmente partecipo ai lavoro del WAI Web Content Accessibility Guidelines (WCAG) Working Group e del E&O Education ad Outreach Working Group.

Commenti

Nessun commento

    Rispondi

    Link e informazioni