LAU

1. Gli standard web

I professionisti del web ben comprendono i vantaggi di utilizzare gli standard:

• sviluppo e manutenzione più semplici: utilizzare HTML semantico e meglio strutturato rende più semplice e veloce capire il codice creato da qualcun altro;
• compatibilità con browser futuri: quando utilizzate standard definiti e codice valido rendete le vostre pagine resistenti nel tempo riducendo il rischio che browser futuri non siano in grado di capire il codice che avete usato;
• download e visualizzazione delle pagine più veloci: meno HTML significa file di dimensioni più contenute e download più veloci. I browser moderni visualizzano le pagine più velocemente quando sono conformi agli standard rispetto a quando sono elaborate con un codice obsoleto;
• migliore accessibilità: l'HTML semantico, separando struttura e presentazione, rende più semplice l'interpretazione del contenuto per i lettori di schermo e i dispositivi alternativi di navigazione;
• migliori quotazioni sui motori di ricerca: la separazione di contenuto e presentazione fa in modo che il contenuto sia la parte più consistente della dimensione finale dei file. In aggiunta alla marcatura semantica, questo migliora le quotazioni sui motori di ricerca;
• adattamento più semplice: un documento marcato semanticamente può essere facilmente adattato alla stampa e ai dispositivi di navigazione alternativi come i palmari e i cellulari, semplicemente collegandolo a un CSS diverso. È anche possibile fare cambiamenti alla presentazione dell'intero sito modificando solo il foglio di stile.

Tratto da Developing with web standards [link esterno] di Roger Johansson (traduzione italiana a cura di Franco Carcillo e Mirko Corli).

In relazione all'uso del linguaggio di marcatura il requisito n° 1 della legge 4/2004 [link esterno] afferma:

Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate, nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l'aspetto semantico. In particolare, per i linguaggi a marcatori [HTML ( HypertText Markup Language ) e XHTML ( eXtensible HyperText Markup Language ):
a) Per tutti i siti di nuova realizzazione, utilizzare almeno la versione 4.01 dell'HTML o preferibilmente la versione 1.0 dell'XHTML, in ogni caso con DTD ( Document Type Definition - Definizione del Tipo di Documento) di tipo Strict; ...

La legge consiglia quindi l'utilizzo dell'XHTML 1.0 Strict preferendolo all'HTML 4.01 Strict.
L'XHTML (acronimo di eXtensible HyperText Markup Language, Linguaggio di marcatura di ipertesti estensibile) associa alcune proprietà dell' XML con le caratteristiche dell'HTML: un file XHTML è un pagina HTML scritta in conformità con lo standard XML. La conversione dell'HTML 4.01 strict in XHTML 1.0 strict è una operazione veloce e di facile realizzazione. Per un approfondimento sulle differenze fra i due linguaggi consultare la guida di HTML.it.

Ma qual'è il vantaggio reale di utilizzare l'XHTML anzichè l'HTML? Ed esistono degli svantaggi?

Il vantaggio più ovvio è in prospettiva: ovvero una pagina XHTML risulta pronta per l'eventuale transizione all'XML. Ma è necessario approfondire la questione.

torna su

2. XHTML trattato come HTML

Nel caso in cui lo sviluppatore scelga l'utilizzo dell'XHTML, i browser come interpretano questo linguaggio?

La risposta è che la maggior parte dei browser interpreta comunque l'XHTML come se fosse HTML poichè:

• la maggior parte degli sviluppatori usa la tipologia del contenuto (content type) dell'HTML (text/html);
• quasi tutti i server sono impostati per inviare al browser il content type dell'HTML quando la pagina ha una estensione .html, .asp, .php o simili.

I browser, intepretando la pagina XHTML come HTML, sono costretti addirittura a un lavoro aggiuntivo, per quanto impercettibile: rilevano le modifiche XHTML e le correggono riportandole alle casistiche dell'HTML, come se fossero presenti errori nella pagina. La pagina è visualizzata quindi come un normale HTML ma i browser vengono costretti ad effettuare correzioni sul linguaggio. Nell'HTML, per esempio, il tag <br /> non dovrebbe contenere al suo interno la propria chiusura; la chiusura viene intrerpretata dal browser come un errore da correggere.

Da notare che queste considerazioni hanno persuaso alcuni esperti a tornare ad utilizzare o a mantenere l'HTML 4.01 per lo sviluppo dei siti web. Si veda per esempio il sito web di Eric Meyer e 456BereaStreet.

torna su

3. XHTML trattato come XML

Per ovviare al problema appena esposto, gli sviluppatori potrebbero tentare di fornire al browser la tipologia del contenuto propria dell'XHTML (application/xhtml+xml) e salvare il file con l'estensione ".xhtml". Ma questa azioni determinerebbe i seguenti svantaggi:

• Internet Explorer non è in grado di supportare il codice XHTML. Quando i documenti sono inviati come "application/xhtml+xml", Internet Explorer non li riconosce come una pagina web e quindi mostra all'utente la finestra di download. Questo problema persiste ancora su Internet Explorer 7;
• per quanto riguarda gli script, "document.write()" non funziona nei documenti XHTML trattati come XML;
• un minimo errore di sintassi presente nel codice XHTML determina la mancata visualizzazione dell'intera pagina come avviene per esempio con i file dei feed RSS;
• molti server web non sono configurati per l'estensione ".xhtml".

Alcune tecniche in linguaggio PHP e ASP permettono la negoziazione del contenuto (content negotiation) cioè la possibilità di fornire contenuti diversi a seconda di quello che i browser supportano. Per esempio, è possibile inviare ad Internet Explorer l'XHTML come HTML (text/html) mentre a Firefox l'XHTML come XML (application/xhtml+xml).

La negoziazione del contenuto però non risolve il problema che un minimo errore nel codice XHTML inviato come XML determina la mancata visualizzazione dell'intera pagina.

Immagine del messaggio di errore di XML:

I vantaggi di far interpretare il codice XHTML con il content type adeguato sono i seguenti:

• orientarsi al XML pensando al futuro ed alla interoperabilità e cioè la capacità di cooperare e di scambiare informazioni o servizi con altri sistemi o prodotti in maniera più o meno completa e priva di errori, con affidabilità e con ottimizzazione delle risorse.
• utilizzare i linguaggi orientati all'XML all'interno delle proprie pagine web: per esempio il linguaggio MathML che permette di rappresentare i simboli e le formule matematiche in modo chiaro o il linguaggio SVG che permette di descrivere figure bidimensionali statiche e animate.

torna su

4. Il web del futuro

Il W3C ha creato due gruppi di lavoro che si occupano di sviluppare i due linguaggi del futuro: l'XHTML 2 [link esterno] e l'X/HTML 5. Un gruppo di lavoro esterno denominato WHATWG (Web Hypertext Application Technology Working group) [link esterno] collabora con il W3C alla relizzazione dell'X/HTML 5, il cui rilascio allo stadio di raccomandazione è previsto entro al fine del 2010.
L'XHTML 2 è giunto allo stato di bozza pubblica ma è ancora lontano dallo stadio di raccomandazione.

Fino ad oggi l'HTML ha avuto un gran successo proprio per la sua semplicità e per la capacità dei browser di correggere gli errori presenti nel codice mentre l'XHTML non ha ottenuto il successo sperato.

Oggi, però, esistono due importanti necessità:

• scrivere codice HTML che funzioni nello stesso modo in tutti i dispositivi hardware e favorire così l'interoperabilità;
• "progettazione universale" e cioè fare in modo che le pagine web siano fruibili da parte di tutti gli utenti.

Queste due necessità richiedono che lo sviluppo delle pagine web rispetti gli standard e le regole di accessibilità.

I due nuovi standard in fase di sviluppo rispondono a queste richieste in modo diverso:

• l'XHTML 2 richiede che tutte le pagine rispettino gli standard in modo rigido. Un errore nel codice o il codice non standard infatti determinerebbe la mancata visualizzazione dell'intera pagina web. Questa visione obbligherebbe tutti gli sviluppatori ad adeguarsi agli standard. I sostenitori del codice XHTML 2 affermano che la rigidità è l'unica strada per poter realizzare il web del futuro.
• l'X/HTML 5 invece ritiene importante che il successo del web nasca proprio dalla flessibilità del linguaggio e dalla visualizzaione delle pagine anche se non standard o conententi errori. Il gruppo di lavoro dell'X/HTML 5 vuole creare un nuovo HTML che sia orientato al futuro ma allo stesso tempo sia clemente con coloro che non si adeguano agli standard. Una delle principali novità del nuovo linguaggio è creare un sistema di correzione dell'errore univoco (parse error) che permette ai browser di correggere nello stesso modo il codice non conforme alle specifiche senza bloccare la visualizzazione delle pagine. Il linguaggio HTML 5 sarà compatibile con le versioni HTML precedenti e potrà essere servito sia come HTML (text/html) sia come XHTML (application/xhtml+xml). L'X/HTML 5 è una via di mezzo fra il vecchio HTML e il rigido XHTML 2.

torna su

5. L'XHTML 2

Le novità che emergono dalle bozze pubblicate dal W3C rispetto all'XHTML 1.0 sono in continua evoluzione e di conseguenza possono essere soggette a modifiche.

Alcune novità sono le seguenti:

• elementi semantici dedicati per la creazione di liste di navigazione, <nl></nl>, con un elemento <label></label> che contiene il titolo della lista:

<nl> 
<label>Ti trovi in:</label> 
<li href="http://lau.csi.it/realizzare/">
Realizzare</li>
<li href=" http://lau.csi.it/
realizzare/accessibilita">Accessibilità</li> 
<li>Sottotitolazione</li> 
</nl>

• ogni elemento può essere un collegamento. L'attributo href può essere aggiunto ad ogni elemento per trasformarlo in un collegamento:

<q href="http:lau.csi.it">Il laboratorio di Accessibilità ed Usabilità del CSI-Piemonte</q> 
              

• per quanto riguarda le liste di definizione è stato introdotto l'elemento <di></di> che permette di raggruppare termini e definizioni:

<dl>
<di>
<dt>parabola</dt> 
<dd>particolare figura contenuta nel piano</dd>
<dd>racconto breve il cui scopo è spiegare un concetto difficile con uno più semplice o dare un insegnamento morale</dd> 
</di> 
</dl>

• non esiste più l'elemento <iframe></iframe>;
• nuovo modo di utilizzare gli heading. L'elemento <h></h> viene utilizzato con l'elemento di raggruppamento <section></section>. In questo modo è possibile comprendere più facilmente le relazioni gerarchiche:

<h>...</h>
<p>...</p>
<section>
        <h>...</h>
        <p>...</p>
        <h>...</h>
        <p>...</p>
        <section> 
               <h>...</h>
               <p>...</p>
               <section>
                       <h>...</h>
                       <p>...</p>
               </section>
               <h>...</h> 
               <p>...</p>
       </section>
       <h>...</h>
       <p>...</p>
</section>
              

• per quanto riguarda la scrittura degli esempi di codice, l'elemento <blockcode></blockcode> può essere usato al posto degli elementi <pre> e <code> per scrivere blocchi di codice:

<blockcode class="Perl"> 
sub squareFn { my $var = shift; return $var * $var ; }
</blockcode>

• l'elemento <separator/> sostituisce l'elemento <hr />. Il nome dell'elemento <hr /> (riga orizzontale) indica l'esistenza di una linea orizzontale mentre in realtà fu ideato per separare una parte del documento dall'altra. Il nome <separator> è invece più chiaro;
• l'attributo edit sostituisce gli elementi <del> e <ins> per indicare le parti di contenuto che sono state modificate:

<p>This is <span edit="deleted">cool</span>
<span edit="inserted">way cool</span>!</p> 

• inserimento dell'attributo role che permette di aggiungere informazioni sulle caratteristiche di ogni elemento aiutando sia motori di ricerca che le tecnologie assistive ad interpretare meglio le pagine web. Per esempio l'attributo role può indicare che una lista di navigazione è utilizzata come briciole di pane:

<nl role="breadcrumbs"> 
<label>Ti trovi in:</label> 
<li href="http://lau.csi.it/index.shtml">Home</li> 
<li href="http://lau.csi.it/realizzare/">Realizzare</li> 
<li href="http://lau.csi.it/realizzare/accessibilita">Accessibilità</li> 
<li>Sottotitolazione</li> 
</nl> 
              

• l'elemento <object></object> ha le stesse funzioni di <img>. Il testo contenuto nei tag di apertura e chiusura ha la stessa funzione svolta dall'attributo alt;

Nella specifica permangono gli elementi <img>,<a></a> e gli h numerati che possono generare confusione con i nuovi elementi introdotti.

Da notare che XHTML 2 supporterà un nuovo meccanismo per i form denominato "Xforms" che fornirà più funzionalità: la possibilità, per esempio, che alcuni valori siano calcolati partendo da altri oppure precaricare i dati in un form come valori d'inizio e poi aggiornarli, in stile Ajax, senza però bisogno di utilizzare script.

torna su

6. L'X/HTML 5

Lo sviluppo dell'X/HTML 5 ha come obiettivo:

• creare uno standard web meno rigido rispetto al codice XHTML 2. In questo modo le pagine saranno visualizzabili anche con la presenza di minimi errori presenti nel codice;
• inserire il "parsing dell'errore" e cioè fare in modo che gli errori presenti nelle pagine web vengano corretti in ugual modo dai browser;
• creare un codice flessibile e più compatibile rispetto al codice XHTML 2.

Il successo del web viene attribuito da molti studiosi del web proprio alla flessibilità del codice HTML e alla correzione degli errori da parte dei browser; ancora oggi infatti la maggior parte dei documenti HTML contiene errori nel codice.

Le novità che emergono dalle bozze pubblicate dal W3C rispetto all'X/HTML 5 sono in continua evoluzione e di conseguenza possono essere soggette a modifiche.

Html 5 introduce nuovi elementi che rendono più semplice creare la struttura di una pagina. In particolare i nuovi elementi introdotti (header, nav, section, article, aside, footer) rappresentano le varie sezioni che prima erano definite tramite <div>:

• l'elemento <header></header> rappresenta l'intestazione di una sezione e può contenere diversi sotto-header:

<header> <h1>Il LAU</h1> 
<p>Laboratorio di Accessibilità ed Usabilità</p> 
</header>

• l'elemento <nav></nav> rappresenta una sezione di link di navigazione:

<nav> 
<ul> 
<li><a href="/">Home</a></li>
<li><a href="/accessibilita">Accessibilità</a></li>
<li><a href="/usabilita">Usabilità</a></li>
<li><a href="/about">About</a></li> 
</ul>
</nav>

• l'elemento <article></article> rappresenta una parte indipendente della pagina che, per esempio, può essere utilizzata per contenere le notizie, articoli dei blog o commenti :

<article id="commento2"> 
<header> 
<h4><a href="#commento2" rel="bookmark">Commento2</a> 
del <a href="http://lau.csi.it">LAU</a></h4> 
<p><time datetime="2008-05-30T14:00Z">May 30th, 2008 at 14:00</time> 
</header>
<p>Buon articolo</p> 
</article>

• l'elemento <section></section> rappresenta una sezione generica del documento per esempio un capitolo:

<section> 
<h1>Capitolo 1:</h1> 
<p>L'accessibilità e l'usabilità del web ...</p> 
</section>

• l'elemento <aside></aside> include contenuti relativi alle informazioni vicine (spesso usato per definire le barre laterali):

<aside> 
<h1>Archivio</h1> 
<ul> 
<li><a href="dic07/">Dicembre 2007</a></li>
<li><a href="nov07/">Novembre 2007</a></li>
<li><a href="ott07/">Ottobre 2007</a></li>
</ul>
</aside>

• l'elemento <footer></footer> contiene i contenuti inseriti infondo alla pagina (autore del sito, copyrights, etc.):

<footer>2008 LAU</footer>

L'X/HTML 5 cerca di migliorare i controlli della riproduzione dei contenuti multimediali:

• l'elemento <video></video> permette di incorporare un video. L'elemento contiene anche un attributo chiamato poster che permette anche di impostare un'immagine che verrà visualizzata durante il caricamento del video :

<video src="video.ogv" controls poster="poster.jpg" 
width="320" height="240">
 <a href="video.ogv">Download movie</a> 
</video>

• l'elemento <audio></audio> permette di incorporare un file audio:

<audio src="music.oga" controls>
 <a href="music.oga">Download song</a>
</audio>

• l'elemento <source> specifica i file video o audio alternativi che il browser può scegliere in base alle impostazioni del PC dell'utente che ne richiede la visione o l'ascolto :

<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" 
media="handheld">
<source src="video.ogv" type="video/ogg;
codecs=theora, vorbis">
<source src="video.mp4" 
type="video/mp4"> 
</video> 
<audio> 
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

• per aver maggior controllo sul player multimediale esiste la relativa API che offre metodi ed elementi aggiuntivi (play, pause, etc.).

Inoltre, riportiamo i seguenti ulteriori nuovi elementi:

• l'elemento <dialog></dialog> rappresenta una conversazione. Contiene l'elemento <dt></dt> che identifica chi parla e gli elementi interni <dd></dd> che rappresentano cosa dice:

<dialog>
<dt>Socrate</dt>
<dd>Dunque, neppure chi diviene ricco sfugge all'infelicità, ma solo chi diviene saggio</dd>
<dt>Alcibiade</dt>
<dd>Evidentemente</dd>
<dt>Socrate</dt>
<dd>Non hanno dunque bisogno di mura, di triremi e di arsenali gli stati, caro Alcibiade, se avranno a prosperare in felicità, nè hanno bisogno di masse e di grandezza prive di virtù</dd>
<dt>Alcibiade</dt>
<dd>Veramente no</dd>
<dt>Socrate</dt>
<dd> Così se t'appresti a metter mano agli affari dello stato, correttamente e nobilmente, tu devi far parte ai cittadini della tua virtù.</dd>
<dt>Alcibiade</dt>
<dd>Sicuro.</dd>
</dialog>

• l'elemento <figure></figure> con l'elemento figlio <legend></legend> sono utili per l'inserimento delle didascalie alle immagini:

<figure>
<img src="convegno.jpg" alt="I relatori del convegno" /><legend>Video del convegno il "Web per tutti"</legend>
</figure>

• l'elemento <input> è migliorato per supportare email, url, dati numerici e tipi di dati relativi a date e al tempo;
• l'elemento <canvas></canvas> permette di includere in una pagina web oggetti grafici gestiti per mezzo di javascript. Per ulteriori informazioni su questo elemento visionare il tutorial Mozilla [link esterno]

torna su

7. Cosa scegliere

Le specifiche XHTML 2 ed X/HTML 5 sono ancora in evoluzione e sono possibili ulteriori modifiche e miglioramenti. Il loro sviluppo evidenzierà problematiche e potenzialità.

In un futuro di coesistenza dei due linguaggi, l'XHTML 2.0 sarà utilizzato per le sue caratteristiche di rigidità per esempio in ambito aziendale quando è necessario scambiare molti dati favorendo l'interoperabilità. Con la sua semantica sofisticata e le stringenti regole di XML, l'XHTML è un linguaggio adatto per le imprese e le attività che richiedono pesanti scambi di dati e massima interoperabilità.
Il futuro HTML potrà essere, invece, scelto da chi ha bisogno della massima compatibilità.
Il codice HTML 5 sarà utilizzato da chi preferisce la retro-compatibilità con i programmi utente basati sul tipo di media "text/html".

In questo momento, potremmo chiederci se conviene sviluppare le pagine utilizzando l'HTML 4.01 o l'XHTML 1.0 trattato come HTML. Per le ragioni fin qui elencate, non vediamo grandi differenze reali.

torna su

8. Riferimenti

Incontro con il team di XHTML 2 [link esterno]
su xhtml.com

Incontro con il team di X/HTML 5 [link esterno]
su xhtml.com

X/HTML 5 contro XHTML 2 [link esterno]
su xhtml.com

Serving XHTML as HTML [link esterno]
su xhtml.com

Serving XHTML as XML [link esterno]
su xhtml.com

A Preview of HTML 5 [link esterno]
a cura di Lachlun Hunt su alistapart.com.

Un'anteprima di HTML 5 [link esterno]
su HTML.it (traduzione dell'articolo di Lachlun Hunt)

Il futuro di HTML e di XHTML [link esterno]
a cura di Michele Diodati su diodati.org

Domande e risposte sull'HTML 5 [link esterno]
a cura di Maurizio Boscarol su ecologiadeisitiweb.net

Domande frequenti su HTML e XHMTL [link esterno]
a cura del W3C (traduzione italiana a cura di Pasquale Popolizio)

Html 5 differences from HTML 4 [link esterno]
a cura del W3C

HTML 5 [link esterno]
a cura del W3C

XHTML 2 [link esterno]
a cura del W3C

Xhtml autentico [link esterno]
su wazzubi.com

Il futuro del web
su wazzubi.com

Sending XHTML as text/html Considered Harmful
a cura di Ian Hickson (traduzione italiana a cura di Gabriele Romanato su csszibaldone.com)

Beware of XHTML
su webdevout.net (traduzione italiana a cura di Ezio Melotti e Roberto Mereu)

torna su