Path: Home | Publications | Manuale | Indice | Gli standard per un sito web di qualità

Manuale per la qualità dei siti Web pubblici culturali

Gli standard per un sito web di qualità
Maurizio Vittoria

Tra i vari fattori che incidono sulla qualità di un sito web c’è anche la qualità del codice con il quale è stato costruito. Un codice si definisce di qualità innanzitutto quando segue le grammatiche formali definite per il Web: i protocolli standard.
Gli standard del Web sono delle tecnologie, riconosciute internazionalmente, ideate e sviluppate dai membri del W3C, <http://www.w3.org>, per costruire e interpretare i contenuti del Web stesso.
Chiamati Recommendations, essi sono indipendenti da: hardware, software, lingua, posizione geografica, abilità fisica o mentale dell’utente e, facilitando ogni tipo di comunicazione, tendono a portare il Web al massimo del suo potenziale e della sua interoperabilità.
L’applicazione degli standard del Web non blocca la fantasia o la creatività ma comporta invece una serie di vantaggi non indifferenti: ne elenchiamo qui i principali.

Compatibilità e durata a lungo termine dei documenti

Scrivere un codice che operi soltanto con un tipo di browser limita la fruizione del codice stesso da parte di un numero considerevole di altre applicazioni, odierne e future. Superando questa pratica si eviterà di essere costretti, prima o poi, a duplicare i documenti per poter farli gestire da altri browser e applicazioni.
La maggioranza degli standard del Web è stata concepita in modo da coniugare la retrocompatibilità con l’apertura ai futuri sviluppi della tecnologia. È stata posta cioè una particolare attenzione alla longevità dei documenti.
Come risultato si avrà che i documenti creati utilizzando delle versioni più vecchie degli standard saranno sempre fruibili anche con i browser di nuova generazione. Viceversa, i documenti creati con le ultime versioni degli standard continueranno a essere gestiti in modo accettabile anche dai browser più obsoleti, forse con un altro tipo di visualizzazione, ma senza perdita di informazioni.

Documenti più leggeri e adattabili

Utilizzando gli standard del Web si può ottenere una considerevole diminuzione del “peso” del documento, in termini di KiloBytes. Infatti, eliminando tutto il codice ridondante usato all’interno dell’HTML per definire l’aspetto puramente tipografico della pagina, ne risulterà un documento più snello ed essenziale. Ricorrendo ai “fogli di stile” in un documento separato per la definizione dell’aspetto visuale, si potrà avere una riduzione anche di più del 50% rispetto al precedente modo di operare.
Se i documenti saranno più “leggeri”, potranno essere scaricati con maggior velocità, con una maggiore soddisfazione da parte dell’utente, con una notevole riduzione dei costi, una riduzione del traffico in rete e un conseguente alleggerimento della banda passante.
Sarà più semplice, inoltre, adattare i documenti per essere meglio fruiti da molteplici tipi di dispositivi, quali le stampanti, i computer “palmari”, i telefonini ecc. Questo potrà allargare in modo considerevole il bacino d’utenza.

Sviluppo e manutenzione semplificati

Si è constatato che realizzare pagine web conformi agli standard, usando cioè una struttura logica dei tag, un corretto annidamento degli stessi e un’organizzazione del documento avulsa dalla sua presentazione visuale, riduce drasticamente i tempi di sviluppo. Inoltre, per uno sviluppatore che ha realizzato un sito web conforme agli standard, sarà più facile individuare e correggere eventuali errori. È molto più facile infatti riprendere in mano il codice per effettuare modifiche, per operazioni di manutenzione, o anche per radicali cambi di layout. Visto che i “fogli di stile” operano allo stesso modo, sia per una sola pagina web, sia per 10.000 pagine contemporaneamente, si intuisce che, effettuandovi delle rapide modifiche, è possibile cambiare l’aspetto di migliaia di pagine in un colpo solo, operando su pochi file.
Se il realizzatore del sito ha seguito le grammatiche formali, qualunque altro sviluppatore futuro sarà in grado di continuare il lavoro, modificare il codice, correggerlo o completarlo in qualsiasi forma, perché è stato usato un modo univoco di stesura.

Migliore accessibilità ai contenuti

Gli standard specifici (HTML, XML CSS, ecc.), oltre a favorire la longevità dei documenti e la loro interoperabilità, integrano già al loro interno degli elementi di accessibilità. L’obiettivo primario della loro esistenza è infatti arrivare a un accesso universale, indipendentemente da qualsiasi tipo di limitazione. L’applicazione degli standard favorisce in pieno quest’obiettivo.

Migliore indicizzazione da parte dei motori di ricerca
Usando una buona struttura logica del markup e separando il contenuto dalla sua presentazione, sarà più facile per i motori di ricerca indicizzare in modo corretto i documenti. Questi, rispondendo meglio agli algoritmi di ricerca, potranno perciò avere una maggiore visibilità ed essere trovati dall’utenza con maggior rapidità.

Come verificare il codice

Per essere sicuri di aver seguito le grammatiche formali di uno standard, è possibile usare gratuitamente uno strumento apposito, consultabile in rete e fornito dal W3C: il “W3C Validator”, <http://validator.w3.org/>.
Il “Validator” verifica in modo automatico l’esattezza del codice sottopostogli e restituisce un rapporto nel quale ribadisce l’esattezza del codice, oppure dove vengono evidenziati gli eventuali errori riscontrati rispetto alla DTD dichiarata.
L’uso del “Validator” è molto semplice: basta digitare in un apposito modulo l’indirizzo della pagina da verificare e farlo avviare. Dopo pochi secondi apparirà il rapporto. È possibile, sempre dalla pagina del “Validator”, verificare anche i documenti residenti nel proprio computer.
Una volta verificata la presenza di errori si potrà iniziare a correggerli, partendo dai primi della lista. Probabilmente, correggendo i primi errori, molti degli altri errori riportati di seguito nel primo rapporto spariranno nella successiva verifica. Questo perché un errore iniziale genera spesso, come conseguenza, degli errori “a cascata”, che non sussistono più dopo le prime correzioni. Si ripeterà la verifica tante volte quanto è necessario a correggere tutti gli errori e fino a quando il documento sarà considerato valido.
Visto che anche i “fogli di stile” devono seguire le grammatiche del proprio standard, si può approfittare di un altro strumento analogo e gratuito, il “CSS Validator”, <http://jigsaw.w3.org/css-validator/>, che verifica con le stesse modalità i fogli di stile.

Alcuni rapidi consigli per realizzare un codice di qualità

1. Utilizzare una corretta DTD
   DTD è l’acronimo di Document Type Definition; è la definizione del tipo di documento.
   Si tratta di una dichiarazione che informa il programma utente con quale versione di (X)HTML il codice è stato scritto, e deve essere inserita all’inizio di ogni documento.
   Il programma utente interpreterà il documento in modalità standard, secondo la versione indicata. Non utilizzando una DTD o utilizzando una DTD non conforme, potrebbero sorgere dei problemi nella corretta visualizzazione delle pagine web relative.
   Alcune DTD più recenti e consigliate:
   HTML 4.01
   <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
   XHTML 1.0
   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd”>
   XHTML 1.1
   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd”>
   
   
2. Usare una corretta codifica dei caratteri
   È necessario inserire nel codice la codifica dei caratteri, il character encoding. Questa consente al programma utente di capire quali tipi di carattere sono usati nel documento web. Se il programma utente non fosse in grado di capirlo, potrebbe presentare il documento con del testo illeggibile, specialmente nel caso di un sito web multilingue.
   Un esempio di character encoding da inserire tra le informazioni “meta”:
   <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />
   
   
3. Specificare la lingua del documento
   È opportuno specificare, tra le informazioni “meta”, la lingua primaria con la quale è stato redatto il documento.
   Esempio: <meta http-equiv=”Content-Language” content=”it” />
   Di conseguenza, all’interno del testo, si segnalano eventuali cambi di lingua.
   Esempio: <span xml:lang=”en”>English version</span>
   
   
4. Inserire il titolo del documento
   È un’informazione importante per il programma utente e per i programmi di indicizzazione, da inserire sempre nella testata del codice.
   Esempio: <title>Convegni</title>
   
   
5. Usare una buona struttura del codice
   Utilizzare il codice dando un senso logico agli elementi strutturali, dividendo il testo in blocchi e gerarchie. Ad esempio, porre le intestazioni in vari livelli (<h1>…<h6>) iniziando dal più alto, e fornire, quando possibile, elementi che diano valenze semantiche al markup, come: title=”…
   
   
6. Utilizzare l’elemento <links>
   Nella testata del codice è importante inserire dei legami a documenti esterni che aiutino la navigazione e forniscano informazioni supplementari ai programmi utente.
   Esempio: <link rel=”Mappa” title=”Mappa del sito” href=”mappa.html” />
   
   
7. Inserire altri metadati
   Oltre ai normali metadati che si usano nei documenti web, nella parte del codice a loro riservata è opportuno inserire dei metadati Dublin Core, standard internazionale ormai consolidato per l’accesso alle risorse digitali.
   Esempio: <meta name=”DC.Title” content=”Convegni” />
<meta name=”DC.Creator” content=”Mario Rossi” />
   
   
8. Layout delle pagine
   Usare possibilmente i “fogli di stile” per l’impaginazione delle pagine web, evitando l’uso di tabelle per questo scopo. L’abuso di tabelle, spesso annidate tra loro, porta a una maggior pesantezza dei documenti e a una loro generale diminuzione di accessibilità.