Con questa approfondita introduzione ai linguaggi e alle tecnologie che ruotano intorno a HTML5 vogliamo spiegare le ragioni storiche che ci hanno portato fin qui: le tendenze dei prossimi anni nel campo delle tecnologie per i contenuti web affondano le loro radici in una serie di eventi, di spinte e controspinte, di enormi interessi da parte dei grandi gruppi del mondo informatico che è necessario conoscere per capire bene anche le motivazioni alla base delle scelte tecniche che contraddistinguono HTML5 e le tecnologie associate.

Cominciamo con questo articolo una nuova serie di appuntamenti dedicati alle tecnologie emergenti per la distribuzione di contenuti web. Dopo questo primo articolo, in cui tracceremo un quadro generale della attuale situazione, in parte ricollegandoci anche a quanto pubblicato recentemente nella rubrica Aperitif Technologique [1], dedicheremo i prossimi articoli della serie a una analisi dettagliata, proprio dal punto di vista tecnico e operativo, delle novità e delle caratteristiche di HTML5, CSS3 e JavaScript.

Concluderemo infine la serie dedicando spazio a Sencha Touch, un framework HTML5 per lo sviluppo di applicazioni destinate ai dispositivi mobili: ne vedremo le funzionalità e presenteremo alcuni esempi operativi.

Ripercorrere i principali episodi che hanno contraddistinto la nascita, l’affermazione e l’evoluzione di HTML non è solo un esercizio di ricostruzione storica, ma è la chiave per capire il come e il perche’ le scelte dell’immediato futuro andranno in una direzione piuttosto che in un’altra. Serve inoltre a farsi un’idea più distaccata (e speriamo più oggettiva) sulle “guerre commerciali” che si stanno attualmente conducendo sugli standard e che troppo spesso non vengono comprese appieno e diventano, anche fra gli addetti ai lavori, quasi uno scontro tra fazioni avverse.

Per anni, i documenti ipertestuali scritti in HTML sono stati gli unici documenti consultabili sul web (e ne costituiscono ancora oggi la colonna portante): è chiaro quindi come storia del linguaggio HTML e nascita e affermazione del World Wide Web corrano in maniera strettamente parallela. HTML nasce nel 1991 ad opera di un ricercatore del CERN di Ginevra, Tim Berners-Lee, che intendeva sviluppare un linguaggio semplice per lo scambio di informazioni tra i vari centri di ricerca universitari.

La prima versione del linguaggio, mai pubblicata ufficialmente, viene introdotta dal suo creatore con un documento contenente poche decine di marcatori, sviluppati a partire da un linguaggio preesistente, lo Standard Generalized Markup Language (SGML). La prima versione ufficiale del linguaggio, ratificata dall’Internet Engineering Task Force, è la versione 2.0 del 1995 e contiene il tag , introdotto dal browser Mosaic.

La caratteristica di essere un linguaggio interpretato rende l’HTML fortemente influenzato dalle scelte dei maggiori produttori di browser: infatti, chi realizza il browser determina con le implementazioni effettive del programma quale sarà la corretta visualizzazione dei tag, decidendo l’aderenza effettiva dei diversi browser agli standard e la compatibilità dei tag.

Per evitare che ognuno faccia un po’ “a modo suo”, diventa importante quindi garantire un corretto sviluppo del web e dei suoi linguaggi; a tale scopo, nel 1996 nasce un organismo neutrale rispetto alle aziende che interagiscono nella rete: il World Wide Web Consortium (W3C) alla cui testa c’è lo stesso Tim Berners-Lee. Va detto però, per chiarezza, che del W3C fanno parte, fin da subito, anche rappresentanti delle aziende a quel tempo principali attori di questo nuovo mondo.

Figura 1 – I principali passi dello sviluppo di HTML / XHTML effettuati finora, riportati in parallelo temporale con le diverse versioni dei più noti browser.

Tutto questo non riuscì comunque a evitare la cosiddetta guerra dei browser (1996-1998 circa): in modo arbitrario, gli sviluppatori di Netscape Navigator e di Internet Explorer introdussero nel linguaggio funzionalità e marcatori proprietari, dando origine a una serie di “dialetti” HTML e a una diminuzione della standardizzazione che costringeva i web designer a scegliere il browser per cui “ottimizzare” la visione. Il W3C dovette svolgere una difficile attività di mediazione che condusse in modo laborioso a successive elaborazioni del linguaggio, la cui ultima versione è HTML 4.01, rilasciata nel 1999.

All’inizio del nuovo millennio HTML 4.01 si converte in XHTML 1.0: praticamente una riscrittura di HTML secondo il criterio di rigore formale dell’XML. Questo fatto stimola gli sviluppatori al rispetto degli standard web, visto che nel frattempo i principali browser si sono impegnati per lo sviluppo di prodotti conformi alle specifiche ufficiali del linguaggio (anche per l’intervento del Web Standards Project) e a supportare adeguatamente i CSS (Cascading StyleSheets).

Nel 2001, la versione successiva XHTML 1.1 diviene un vero linguaggio XML, completo in ogni suo aspetto e caratterizzato dal giusto rigore: ha un solo doctype che non accetta i tag deprecati e richiede il corretto namespace (text/xml), cosa che crea difficoltà nel rendering preciso delle pagine da parte di Internet Explorer.

Il W3C a questo punto prevede un’evoluzione del linguaggio verso una struttura modulare e con una forte connotazione semantica dei marcatori, un linguaggio in cui i vari elementi di una pagina web (struttura dei testi, moduli, tabelle, ecc.) sono descritti in moduli separati che possono essere gestiti indipendentemente tra loro. Nel 2002 inizia così a lavorare a XHTML 2.0 che si discosta dalle versioni precedenti perdendo la retro-compatibilità con le versioni precedenti.

Questa operazione del W3C, legittima da un punto di vista del rigore e dell’eleganza formale e sostanziale, trascura però la difficoltà di far evolvere il web in maniera condivisa attraverso gli standard, senza peraltro buttare via ciò che di buono era stato fatto dai principali agenti del cambiamento ossia chi detta gli standard (W3C) e chi li deve recepire (vendor dei browser). E inoltre si è in un periodo in cui il web evolve verso un’esperienza sempre più multimediale (Rich Internet Application): sono gli anni in cui Flash diviene progressivamente sempre più maturo, con un potente linguaggio di scripting (ActionScript) e un’efficace gestione dei contenuti audio e video.

XHTML 2.0 rischia pertanto di perdere la compatibilità con standard faticosamente raggiunti (soprattutto dai device/browser); inoltre il W3C sembra rispondere solo con straordinaria lentezza al dilagare dei contenuti RIA scritti in Flash. Tutto ciò spinge uno sviluppatore di Opera, Ian Hickson, a ipotizzare una via alternativa: estendere l’HTML già esistente con elementi che permettano lo sviluppo di web application. Il W3C respinge tale proposta e questo spinge Hickson a fondare il Web Hypertext Application Technology Working Group [2] (WHATWG), che produce due documenti inerenti l’integrazione del linguaggio HTML (Web Forms 2.0 e Web Apps 1.0): tali specifiche in seguito confluiscono nell’HTML5.

Con un post pubblicato dallo stesso Tim Berners-Lee nell’ottobre del 2006, il W3C ammette che XHTML 2.0 non riesce a decollare, riconosce l’attività del WHATWG e dà il via allo sviluppo dell’HTML5. Inizialmente c’è una incongruenza nella scrittura del nome del nuovo linguaggio, con grafie che variano tra HTML5 “senza spazio” (presente nelle specifiche del WHATWG) e HTML 5 “con lo spazio” più corretto per uniformità rispetto al nome delle versioni precedenti realizzate dal W3C. Attualmente la grafia senza spazio sembra essere la più diffusa e accettata, [3] anche dal W3C. Nel 2009 il W3C decide di abbandonare definitivamente il percorso inerente il linguaggio XHTML 2.0 spostando parte delle risorse su HTML 5, che si propone di diventare il nuovo linguaggio ufficiale del web.

HTML5, di fatto, ancora è ben lungi dall’essere completato. Ma quali sono i tempi necessari per arrivare a un livello di completamento sufficientemente avanzato? Abbiamo visto come alla base della “insofferenza” di molti attori di questo scenario ci siano le metodiche e i tempi di lavoro del W3C. Fin dall’inizio, proprio per garantire imparzialità nelle scelte e adozioni ben ponderate, il W3C ha organizzato i suoi lavori in maniera molto paritaria, collaborativa, partecipata e “democratica”: le successive bozze (“draft”) delle specifiche vengono discusse in maniera iterativa, con successivi miglioramenti fino ad arrivare a un testo condiviso. Questo processo implica per sua natura una relativa lentezza nel giungere a conclusioni definitive.

Di contro, il WHATWG, come detto peraltro molto bene nell’intervista già citata [1], ha una struttura molto più agile e gerarchizzata, il cui “editor” ha un potere decisionale molto grande. I tempi per giungere a conclusione dei lavori si accorciano, a scapito però di scelte magari meno ponderate e meno condivise e in cui pesano ancor di più le politiche dei grandi gruppi del mondo informatico/web: al WHATWG partecipano inizialmente a titolo personale dei professionisti provenienti da Apple, Mozilla e Opera, che poi sono stati supportati dalle rispettive aziende (cui poi si è unita anche Microsoft). In questo nuovo quadro, il W3C si limita a ratificare certe scelte, magari emendandole anche in maniera sensibile.

Ma quand’è che potremo vedere HTML5 (e le tecnologie annesse) finalmente completate? Inizialmente si è è partiti con stime forse troppo ottimiste.

Figura 2 – Nel 2006, queste erano le tappe previste dal World Wide Web Consortium per lo sviluppo di HTML5. I tempi si sono notevolmente allungati tanto che siamo da poco giunti alla Working Draft.

Forse perche’ scottati da tali previsioni rivelatesi poi sbagliate, si è passati a stime fin troppo caute, che parlano di futuro non proprio immediato, cioè di circa 15 anni ancora.

Figura 3 – Nel 2008 Ian Hickson, anche in leggera polemica con le lunghe procedure tipiche del W3C, aveva previsto le milestone riportate nella tabella, posticipando a data da definirsi l’effettivo completamento dell’iter.

Da una stima ragionevole, invece, si può prevedere che il linguaggio, almeno a livello accettabile, sarà pronto per la fine del 2012, anche in considerazione del supporto e dello sforzo implementativo messo in campo dai principali colossi di Internet per avere pronti al più presto dei browser HTML5 compliant.

Tra i più fervidi fautori dell’evoluzione del linguaggio verso HTML 5 dobbiamo annoverare Steve Jobs, il quale ha dichiarato nel sito Apple [4] che tutti gli apparecchi della sua azienda sono pronti a supportare i nuovi standard web e che Safari, il browser Apple, risulta essere uno degli strumenti più aggiornati in termini di compatibilità con HTML 5, CSS 3 e JavaScript.

Quello che colpisce in queste affermazioni è la considerazione fatta circa l’integrazione degli standard web. In pratica il linguaggio HTML 5 non viene visto più come un entità isolata, ma come uno strumento fortemente integrato ad altre tecnologie web, in particolare i CSS3 e le API JavaScript. Quindi, con un processo di inclusione, all’interno della definizione di HTML5 si possono intendere tutte le tecnologie che sono utilizzate per creare applicazioni web lato client (HTML, CSS, JavaScript). Questo meccanismo di integrazione tra linguaggi non deve sorprenderci: d’altronde, Ian Hickson ipotizza il nuovo standard chiamandolo inizialmente proprio Web Apps 1.0.
In pratica, si assiste a un cambiamento di paradigma: da pagine e documenti (XHTML 1.1) ad applicazioni web (HTML5).

Il World Wide Web durante il suo ormai ventennale processo evolutivo è diventato un ambiente complesso, fatto di componenti crossmediali che richiedono strumenti di programmazione sempre più integrati e complementari fra di loro. Occorre per questo riconoscere a Tim Berners-Lee una notevole visione strategica: fin dagli albori del suo progetto negli anni Novanta, pur senza disporre degli idonei strumenti di sviluppo, l’inventore del WWW aveva pensato a un modello concettuale tripartito del web. Un ambiente dove alla struttura delle pagine web, definita con il neonato linguaggio HTML, si accompagnasse la possibilità di gestire molteplici tipi di interfacce personalizzate in base ai device (compito ricoperto dopo vari anni dai CSS). La terza gamba su cui poggia questo ambiente sono i cosiddetti comportamenti, ossia l’interazione sempre più spinta con l’utente, affidata alle API JavaScript (si pensi alla ricchezza di funzioni di cui dispone un framework JavaScript come JQuery).

Tornando alle parole pubblicate da Steve Jobs sul suo sito, non sorprende il suo appoggio agli standard web cosiddetti open, definiti altamente sicuri, affidabili ed efficienti. Gli stessi argomenti (soprattutto le problematiche relative alla carenza di sicurezza) sono stati utilizzati dallo stesso Jobs per giustificare il mancato supporto delle applicazioni scritte in Flash sugli iPhone.

Le specifiche emerse durante lo sviluppo di HTML5 da parte del WHATWG danno ai web designer nuovi strumenti per rendere più coinvolgente l’esperienza degli utenti, per gestire interazioni complesse, per sviluppare contenuti multimediali con un’efficace integrazione di audio e video, per creare interfacce grafiche complesse e multidevice, per supportare gli apparati con funzioni di geolocalizzazione.

Ma allora quale futuro può essere pronosticato per Adobe Flash, un prodotto solido, maturo con un linguaggio di scripting efficace e con un’eccellente gestione dei file audio e video? Ci sarà ancora spazio per le animazioni precedute dalla consueta barra di caricamento? Dovremo ancora prestare attenzione agli aggiornamenti del Flash player per aver accesso completo a questi contenuti? Pur essendo una tecnologia proprietaria, èprobabile che Flashcontinuerà ad essere utilizzato per lo sviluppo di applicazioni multimediali complesse (ad esempio i giochi on-line, siti web con ambienti tridimensionali, ecc.) oppure per le applicazioni su dispositivi embedded (basti pensare che alcune interfacce delle centraline domotiche sono realizzate con questo software).

I prossimi articoli della serie affronteranno nel dettaglio le caratteristiche e le novità di HTML5, CSS3 e JS API vedendo come queste componenti interagiscano per creare un’esperienza sempre più ricca e multimediale. Anche in questo articolo di introduzione, comunque, vogliamo anticipare brevemente le caratteristiche salienti emerse già nelle prime working draft di HTML5 fin qui presentate.

In particolare, l’evoluzione e le innovazioni di HTML5 si concentrano sugli argomenti riportati di seguito.

• Nuovi marcatori con valore semantico, che permettono di dividere la pagina in sezioni logiche (header, footer, article, section etc.).
• Nuove tipologie di input per i form con funzioni di controllo diretto sul completamento dei dati immessi (slider, campi di ricerca, barre di progresso etc.).
• Presenza degli attributi ARIA (Accessible Rich Internet Application) per massimizzare l’accessibilità delle pagine web nelle RIA secondo gli standard del WAI (Web Accessibility Initiative).
• Inserimento e gestione diretta dei contenuti audio e video.
• Possibilità di gestire le forme vettoriali nei documenti web (possibilità di disegno grazie al marcatore associato a opportuni script, oppure inserimento del formato immagine vettoriale SVG).

Gli sviluppi di CSS3 per la presentazione dei layout web comprendono:

• Gestione “tipografica” della pagina web (possibilità di incolonnamento dei testi, incorporamento di font, gestione di effetti sul testo come tratto e ombreggiatura, etc.).
• Effetti visuali (opacità, sfumature, angoli arrotondati, ombre, modello di colore HSL, sfondi multipli sotto gli oggetti, etc.).
• Effetti dinamici gestiti nativamente(transizione, animazione e trasformazione).

Negli anni, le funzioni che possono essere definite tramite script JS si sono moltiplicate esponenzialmente. Le ultime tendenze rafforzano tale potenza e tendono a semplificarne la gestione rendendola più ordinata.

• Semplificazione della gestione del DOM.
• Nuovo sistema di gestione della memoria cache e miglioramento delle prestazioni nelle sessioni.
• Funzionalità di drag’n’drop all’interno delle pagine web.
• Salvataggio dinamico dei dati lato client per garantire la funzionalità delle applicazioni anche nei momenti in cui non si è connessi al server (local storage).
• Geolocalizzazione basata su diversi sistemi.

Anche se la versione finale delle specificheè lontana, i browser sono già decisamente compatibili almeno con quanto è stato finora realizzato, soprattutto quei browser che hanno una variante mobile importante. Una visione di insieme sul livello di compatibilità dei diversi browser è riportata nella pagina HTML5 Readiness [5], come mostrato in figura 5.

 

Figura 5 – La schermata di HTML5 Readiness. Il sito reale fornisce un alto livello di interazione che permette di interpretare facilmente il significato del grafico. È interessante inoltre analizzare il progressivo aumento della compatibilità dei browser avvenuto nell’ultimo triennio: i produttori si stanno impegnando verso HTML5.

Per valutare l’attuale compatibilità dei browser con le specifiche HTML5 fin qui pubblicate, abbiamo effettuato alcuni semplici test comparativi utilizzando il sito HTML5test [6] che permette di valutare, su base 300, sia una complessiva rispondenza alle specifiche, sia il dettaglio di ciò che effettivamente è supportato e di ciò che quel browser non supporta ancora.

Come molti lettori sapranno, i principali browser sono basati su “motori” di rendering. Google Chrome e Apple Safari condividono il medesimo motore: Webkit. Esso dimostra di essere attualmente il piu compatibile con i nuovi standard, seguito da Opera (motore Presto) e da Firefox (motore Gecko). Deludente risulta la prestazione di Internet Explorer 8 (basato su Trident) ma, ad onor del vero, va detto che la nuova versione di Explorer 9, attualmente in versione beta, fornisce un supporto migliorato agli standard anche grazie a un nuovo motore per i JavaScript (Chakra).

Figura 6 – La tabella di riepilogo del test di compatibilità con HTML5: sono mostrati i valori globali raggiunti da diversi browser “desktop” e “mobile”.

Il progressivo aumento del “peso” rappresentato dai dispositivi mobili sul web dell’immediato futuro è stato più volte ricordato nel corso dell’ultimo anno, anche su queste pagine. La vendita di smartphone è aumentata, si sono affermate le offerte di connessione pacchettizate, e soprattutto è cambiato il loro modo di utilizzo e il tipo di utilizzatore finale: si è passati da dispositivi di lavoro per professionisti (Palm, Blackberry) a device (iPhone, Android) “always connected” per utenti di tipologia molto più variegata, specie con la diffusione dei social network (i dispositivi mobili rappresentano il cosiddetto “web in piedi”).

Figura 7 – La schermata del test di compatibilità con uno smartphone Google Android versione 2.1 (la versione 2.2 fa segnare un netto miglioramento).

È chiaro come questi strumenti fungano da catalizzatore ed elemento accelerante verso quel cambiamento di paradigma rappresentato proprio da HTML5, CSS3 e API JS.

Figura 8 – La schermata del test di compatibilità con un iPhone: ottimi punteggi!

Resta certamente importante anche il “web seduto”, sebbene spostato sempre di più su notebook tranne in quei casi in cui si usino workstation dedicate ad applicazioni particolari che richiedono hardware specifico e un’elevata potenza di elaborazione.

Ma un altro aspetto che assume il valore di nuova frontiera, è quello rappresentato dal “web sdraiato” o “web sul divano”, ossia la possibilità di fruire dei contenuti web in compagnia (amici, famiglia) in un ambito prevalentemente domestico, con l’affermazione di televisori (o di decoder) dotati di interfacce di connessione diretta al web. Il recente annuncio della Google TV va proprio in questa direzione.

In tal senso, diventano cruciali alcune caratteristiche di HTML5 di cui abbiamo già fatto menzione quali l’inserimento diretto di audio e video nelle pagine. E viene in primo piano l’importanza rivestita dall’adozione di codec audio e video all’interno delle nuove specifiche: in particolare sui codec video (MPEG-4, H.264, Ogg Theora, VP8) si gioca una battaglia importante, ed è quindi necessario che gli strumenti siano realmente open e presentino il massimo della compatibilità con i browser, garantendo video di alta qualità pur con un bitrate relativamente basso.

Figura 9 – Uno dei modelli di televisore già pronti per la connessione a Internet: Google TV sarà la nuova frontiera?

È auspicabile che si arrivi alla definizione di codec audio e video standard supportati da tutti i browser: in tal modo i siti che erogano la risorsa video non dovranno inviare i video all’utente in modo “personalizzato” a seconda del browser usato. Ci spieghiamo meglio con un semplice esempio: nel caso A, l’utente usa Safari su Mac, il sito riconosce il browser e invia il video codificato con H.264; nel caso B, l’utente usa Firefox su Windows, il sito riconosce il browser e invia il video codificato Ogg Theora. Torneremo ad approfondire questo argomento in una delle successive puntate, ma è chiaro fin d’ora come ciascun produttore spinga per l’adozione dei codec più congeniali alla propria politica (si pensi che milioni di dispositivi iPhone e iPad supportano solo H.264 che peraltro è un formato proprietario, di Apple, e non open).

Il percorso di elaborazione e approvazione definitiva di HTML5 è ancora lontano dall’essere completato. In conseguenza di questo fatto, i produttori dei principali strumenti di sviluppo IDE stanno inserendo strumenti accessori e integrazioni al funzionamento dei software stessi, cercando di tenere il passo con gli aggiornamenti e le integrazioni apportate al linguaggio a mano a mano che vengono rilasciate le diverse draft.

La versione CS5 di Dreamweaver dispone di un pacchetto di aggiornamenti (CS5 11.0.3 updater) che contiene al suo interno il CS5 HTML5 Pack per poter disporre degli strumenti di sviluppo aggiornati alla versione 5 del linguaggio. Anche per le versioni CS3 e CS4 di Dreamweaver si può procedere ad un aggiornamento delle funzionalità utilizzando l’Adobe Extension Manager e installando l'”HTML5 Pack for Dreamweaver CS3 and CS4″ dal sito Dreamweaver Exchange.

Aptana, il popolare IDE su base Eclipse per lo sviluppo web, dichiara che supporterà i marcatori e il doctype del nuovo linguaggio a partire dalla versione 3 del software che attualmente è in beta release e può essere scaricato gratuitamente.

L’ultima versione di Expression Web di Microsoft dispone di un supporto basilare per i tag di HTML5. Tale supporto dovrà essere migliorato e integrato anche per l’ambiente di sviluppo Visual Studio, visto che Internet Explorer 9 fornirà una compatibilità più robusta ai nuovi standard web.

In questo primo articolo della serie abbiamo analizzato le ragioni storiche e tecniche che sono alla base dell’evoluzione del nuovo linguaggio HTML. HTML5, CSS3 e API JavaScript sono tecnologie web che incarnano in modo attualizzato il modello concettuale tripartito (struttura, interfacce, comportamenti) così come era stato ipotizzato fin dagli inizi degli anni Novanta, con la creazione del WWW. Nella definizione dei nuovi standard si stanno seguendo processi più veloci e diretti che in passato, ma nei quali il peso dei grandi gruppi commerciali del mondo Internet si fa sentire in maniera più pesante.

La serie continuerà nei prossimi numeri con la presentazione dettagliata di esempi e parti di codice in cui, vedendo all’opera HTML5, CSS3, API JS e, successivamente, strumenti di sviluppo per il mobile, affronteremo le caratteristiche di questo nuovo panorama per lo sviluppo lato client.

[1] “HTML5, il canale mobile e il futuro del web”, Aperitif Technologique, MokaByte
https://www.mokabyte.it/cms/article.run?articleId=6SX-KQG-ZQZ-7IL_7f000001_26000063_a8777b04

[8] Jeremy Keith, “HTML5 for Web Designers”, A Book Apart, 2010