Verso un web accessibile e usabile
<!DOCTYPE> e <HEAD>: chi ben comincia... Articolo letto: 5528 voltedi Christian FusiGli elementi che appaiono in una pagina (x)html prima e all'interno della sezione <HEAD>: qual è la loro funzione? Come vanno scelti? Parleremo del doctype, di come fornire importanti informazioni sul nostro sito tramite i metadati e di quali accorgimenti si possono già adottare in questa parte del codice per rendere il sito più accessibile. Sommario IntroduzioneIn questo articolo descriveremo gli elementi che appaiono in una pagina (x)html prima e all'interno della sezione <HEAD>. Spiegheremo la loro funzione e come vanno scelti. Parleremo del doctype, di come fornire importanti informazioni sul nostro sito tramite i metadati e di quali accorgimenti si possono già adottare in questa parte del codice per rendere il sito più accessibile. Il <!DOCTYPE>
Il primo elemento che deve/dovrebbe comparire nel codice della nostra pagina web è il
<!DOCTYPE> (Document Type Declaration)
che serve a dichiarare quale versione HTML o XHTML abbiamo utilizzato per scriverla e quindi a quale
DTD (Document Type Definition) facciamo riferimento.
Per esempio quello qui sotto è il
doctype di HTML 4.01 transitional conprensivo di URL
Facciamo un passo indietro nel tempo per essere più chiari.
L'HTML è nato come derivazione dell' SGML, un
linguaggio standard ISO piuttosto complesso che comporta necessariamente la conformità con una DTD,
ovvero con un documento (spesso esterno) che, definendo i <TAG> e la loro sintassi,
specifica esattamente ciò che posso/devo/non-posso scrivere nel mio codice.
L'HTML non è però uno standard e un doctype non è obbligatorio.
1)Controllo del codice da parte dei validatori
2)Rendering della pagina da parte dei browser Le tre modalità di funzionamento dei browser sono:
Quest'ultima modalità, disponibile solo con Mozilla (dall' 1.1) e Netscape 7, è uguale alla standard tranne che nella gestione del valore di line-height. Questo, sebbene implementato dai CSS2, in Explorer viene calcolato diversamente. Rispettando gli standard, Mozilla e Netscape mostrerebbero in confronto ad Internet Explorer un margine inferiore vuoto alla base delle immagini (se queste sono state allineate disponendole in celle di tabella, il problema diviene molto evidente). Per non avere tale diversità di visualizzazione Mozilla e Netscape hannno scelto di poter gestire *solo* questa regola come se si fosse in Quirk mode. Alcuni dei comportamenti assunti dai browser in modalità Quirk sono molto noti dai webdesigner (e lo sono anche le "contromisure" come i boxmodel hacks di IE5), altri meno anche se documentati sui siti ufficiali dei browser. Fate attenzione però che i browser si "mettono" in modalità Quirk anche per motivi diversi da quello di una scelta precisa dello sviluppatore. Può accadere ad esempio per la presenza/mancanza della URL nel doctype, oppure se iniziate un documento html con qualcosa di diverso dal doctype come un prologo XML, oppure se il doctype non lo mettete proprio. Si è tentato di riassumere le possibili combinazioni browser/doctype in questa tabella di Henri Sivonen. Il tag <HTML>Subito dopo il doctype scriviamo necessariamente il tag <HTML>. Così diciamo agli useragent che quanto è contenuto tra esso e la sua chiusura (</HTML>) è codice html. Possono essere specificati al suo interno anche gli attributi:
Un esempio:
<HEAD>: i META-TAG
Finalmente ci siamo, ora apriamo la nostra sezione <head> e ci mettiamo dentro il primo dei suoi tag:
Esistono molti altri meta-tag che ora non descriveremo. Servono a gestire i motori di ricerca, fare refresh e reindirizzamenti,
fornire informazioni sul sito del tipo: autore, copyright, software usato per generare le pagine, scadenza e aggiornamento dei contenuti.
In certi casi, esempio in grandi archivi di documenti, fornire metadati è essenziale per catalogarli, ma è necessario
che la forma utilizzata per definirli sia comune a tutti. In questo senso nascono standard di descrizione delle risorse in formato elettronico come il noto Dublin Core.
Ora capirete il perchè del "DC" negli esempi qui sotto:
Accessibilità e usabilitàSi può rendere un sito accessibile e usabile già in questa parte del codice. Vedremo due esempi in cui ciò avviene. I. I fogli di stile.
Partiamo dall'assunto che tutte le informazioni
necessarie alla formattazione della nostra pagina (la sua "presentazione") le forniremo tramite un foglio .css esterno.
Per essere attenti all'usabilità però, i fogli di stile saranno più di uno:
avremo quelli legati ai vari device (schermo, stampante, PDA, dispositivi alternativi come braille o sintetizzatori vocali)
e quello semplificato necessario per la retrocompatibilità coi vecchi browser (su tutti NN4).
Il mio consiglio è di strutturare il codice in questo modo:
In rosa: il link al file basic-style.css ovvero al foglio di stile piuttosto semplice che abbiamo creato per i vecchi browser,
quelli che non gestiscono molte delle specifiche CSS2.
Un appunto: esiste la pratica del "browser sniffing", ovvero tramite javascript
si tenta di capire quale browser usa l'utente e gli si passa il foglio di stile adeguato.
Io la eviterei, nella maggior parte dei casi, poichè rispetto ai vantaggi che può offrire,
essa richiede troppa attenzione sia nella scelta del codice javascript
(che potrebbe sbagliarsi o peggio crashare) che nella realizzazione dei diversi fogli.
II: I tag link di navigazione Anche se i browser più diffusi, mi riferisco a IE5.x e IE6, non supportano questa soluzione, dovete sapere che grazie al tag <link rel=" "> si posso creare dei pulsanti standard che appariranno nella barra di navigazione del browser. In questo modo potete fornire velocemente un alternativa per accedere alle pagine più importanti del vostro sito, come Home, Mappa, Autore, Help, Cerca, capitoli di un documento o fornire tasti come Precedente e Successivo. Degli esempi ed un elenco dei valori possibili dell'attributo REL lo trovate qui, sul W3C. <LINK rel="alternate" >
Con il tag <LINK> come abbiamo visto possiamo specificare fogli di stile, dare una mano all'accessibilità e, aggiungiamo,
linkare altri elementi utili del nostro sito.
Negli esempi del W3C [il link citato sopra] c'erano anche altre due possibilità:
Questo esempio mostra come si possa segnalare alle applicazioni che ne fanno uso (aggregatori, motori di ricerca basati sui feed, ecc.ecc.) la presenza di un feed RSS generato dal nostro sito ). Lo stesso si può fare con un altro formato di metadati come FOAF, ma attenzione al giusto formato MIME nell'attributo TYPE (per FOAF è "application/rdf+xml"). Infine, se servisse, si posso fornire versione alternative della pagina in un altra lingua. Per approfondire
|
The bat! V3The Bat! è un programma di posta elettronica sicuro contro i virus ed efficace
contro lo spam. |