HTML5

Che cos’è HTML5? Ecco le mie riflessioni su HTML5 partendo da alcuni articoli, grafici e post presenti in rete.

HTML5 è la nuova moda del momento, innegabilmente. Contrariamente a quanto avviene spesso per vocaboli di moda e di marketing, però, HTML5 è davvero una realtà rivoluzionaria che cambierà sensibilmente il nostro modo di vivere e fruire il web – e dunque un elemento sicuramente presente, probabilmente importante della nostra vita.

Un insieme di tecnologie

Partiamo col dire che HTML5 non è una tecnologia o un linguaggio di markup ma un insieme di tecnologie: sotto il “capello” (e il logo…) HTML5 sono incluse sostanzialmente tutte le più recenti novità relative allo sviluppo web e alla creazione di web applications. Vediamole una ad una per capire ancora meglio di cosa stiamo parlando.

1. Semantica per le nostre pagine e un markup più facile

Dopo svariati studi (di Opera e di Google) ci si è accorti, qualche anno fa, che i web designers utilizzavano con più frequenza alcuni nomi di classi quali “header”, “footer”, “nav”, “article” per identificare più o meno sempre gli stessi delle proprie pagine (alzi la mano chi non ha usato “header” o “footer” come classi del proprio div di intestazione o di chiusura della pagina). Si è dunque pensato che sarebbe stato utile introdurre dei nuovi tag per identificare questi elementi comuni e ricorrenti, dando così anche un valore semantico a queste parti di una pagina.

Per rendere più facile la fruizione e la creazione di markup, poi, è stata di gran lunga semplificata la parte di “validazione”, in particolare rispetto a documenti XML quali XHTML. E’ sufficiente ricordare che il doctype, una volta una pappardella infinita, adesso è un semplice:

<!DOCTYPE html>

Basta questo per indicare che il nostro documento è una pagina HTML5.

2. Offline e storage

HTML5 è l’insieme di tecnologie che vuole trasformare Internet da un semplice catalogo di pagine di testo in un immenso archivio di applicazioni web, ovvero strumenti con funzionalità avanzate e interfaccia user-friendly per “fare cose”, non solo per consultare documenti.

In questo senso, le due tecnologie che rendono possibile la “magia” di una vera e propria applicazione scritta in HTML5 sono:

App Cache: per dire al browser quali file (HTML, immagini, CSS, JavaScript) salvare in locale così da consentire una navigazione e un utilizzo dell’applicazione anche quando si è offline
Local Storage: un’evoluzione dei cookies, molto più facile da gestire e soprattutto con 5 mega (almeno) di spazio a disposizione per salvare dati direttamente dal browser, senza passare da un database centralizzato (e quindi raggiungibile solo quando connessi)

3. API di accesso ai device

HTML5 vuole essere la tecnologia di sviluppo del futuro. E il futuro non è solo più il nostro caro desktop o notebook: iPhone, Android, iPad, altri tablet – questi sono gli strumenti con cui oggi e soprattutto domani si utilizzerà il web.

Per sfruttare al massimo le funzionalità di tutti questi device HTML5 prevede l’utilizzo di una serie di API (ovvero di “interfacce di programmazione”) per accedere a caratteristiche e dati specifici dei vari terminali: attualmente è già implementata e funzionante sulla maggior parte dei browser, telefonini e tablet la geolocalizzazione (il device comunica al browser la posizione dell’utente e dunque il nostro JavaScript può agire di conseguenza) ma sono già in fase avanzata di progettazione altre API per utilizzare ad esempio la fotocamera, la lista dei contatti o i dispositivi audio.

4. Web Sockets

Uno dei problemi più ardui che ogni developer affronta nella sua carriera è far comunicare il il browser con il server senza dover ogni volta ricaricare la pagina, aprendo cioè una connessione diretta e aggiornabile a prescindere dal resto della pagina.

Web Sockets risolve proprio questo problema: questa tecnologia (non ancora del tutto diffusa e implementata per problemi legati alla sicurezza ma comunque già abbastanza “matura” e funzionante, ad esempio, su iPhone) consente di creare un canale di comunicazione full-duplex tra il browser e il server, dando così la possibilità di “dialogare” in maniera semplice e user-friendly per creare, ad esempio, applicazioni di chat in realtime o altre applicazioni che richiedono uno scambio costante di informazioni fra client e server (o fra vari client, passando dal server).

5. Multimedia

In sintesi si tratta del supporto nativo nei browser di audio e video all’interno del browser. HTML5 ha introdotto i due tag

6. Grafica, disegno ed effetti 3D

Oltre al citato canvas, ricordiamo anche SVG: due strumenti per disegnare (il primo in “bitmap”, il secondo vettoriale) direttamente sulla nostra pagina web utilizzando semplicemente un tag

 <canvas>

e un po’ di JavaScript. Il risultato? Beh, sarebbe troppo lunga la lista di esempi e possibilità di utilizzo di canvas e SVG, ma date un’occhiata a questo gioco stile Doom — tutto in JavaScript!

7. Web Workers

Di fatto JavaScript sta diventando un linguaggio sempre più complesso e potente, richiedendo in alcuni casi una quantità di risorse non indifferente. Purtroppo, questo vuol dire spesso rallentare tutto il browser, rendendo la navigazione nel resto della pagina o l’utilizzo di altre finestre quasi impossibile.

Per risolvere questo problema è stata inventata la tecnologia Web Workers, ovvero un sistema per “slegare” un’attività intensiva dal resto dell’interfaccia utente: in sostanza, si decide che una funzione deve essere eseguita senza che questa blocchi l’utilizzo del sito e dunque, mentre si attendono i risultati (ad esempio di un calcolo complesso o di una query su un altro server) è possibile comunque utilizare le altre funzionalità della web app e navigare sulla pagina come se nulla stesse impegnando in maniera intensiva il processore e il browser.

8. CSS3?

Senza voler entrare in una polemica che ha scosso il mondo del web development da quando il W3C ha deciso di includere anche CSS3 nel “cappello” di HTML5 (la polemica ruota intorno al il fatto che per i puristi CSS3 riguarda la presentazione di un documento e dunque è una cosa slegata da HTML5 che invece riguarda il contenuto, i dati) ricordiamo solo che, contestualmente alle novità che abbiamo indicato, è nato per l’appunto CSS3, ovvero un nuovo standard CSS con un sacco di nuove ed esaltanti caratteristiche per rendere a dir poco strabilianti dal punto di vista grafico le nostre pagine web.

Problemi

I problemi principali di HTML5 sono due:

non è ancora una standard definito ma ancora, e per un bel po’, una specifica in fase definizione. Tutte le tecnologie che vi abbiamo indicato in questo tutorial sono abbastanza “chiuse” e dunque possono essere utilizzate con tranquillità ma è bene ricordare che lo standard finale, a quanto pare, non sarà finito entro il 2014
il problema principale è che il supporto di queste funzionalità non è ancora total fra i vari browser e (soprattutto in ambito CSS3) sussistono ancora delle soluzioni “proprietarie” ad esempio per alcuni tag e classi. E’ bene dunque utilizzare sempre sia delle librerie tipo Modernizr che ci avvertono su quali funzionalità sono supportate dal browser che sta visualizzando le nostre pagine e soprattutto progettare la nostra web app per avere delle soluzioni di fallback (pensiamo ad esempio ad una soluzione Flash per i browser che non accettano il tag.

</div> ## Browser A questo punto sorge una domanda: quale è il reale supporto degli attuali browser ad uno standard in continuo divenire? Vi consiglio questo sito: <http://html5readiness.com/>

Rappresenta graficamente lo stato di avanzamento del supporto ai singoli elementi HTML5 per ogni browser. Inoltre il link <http://beta.html5test.com/> vi permette di testare e dare un punteggio al vostro browser attuale. Semplicemente visitate la pagina e vedete il vostro voto. Buon HTML5! Questo articolo proviene dalla rielaborazione di una serie di articoli trovati in rete, come ad esempio: * <http://www.whatwg.org/specs/web-apps/current-work/multipage/> * http://www.html5rocks.com/en/mobile/mobifying.html</wbr> * <http://www.html5today.it/tutorial/che-cos-html5> * <http://code.google.com/intl/it/speed/articles/mobile.html> * <http://www.h5td.me/117> * [http://people.mozilla.com/~prouget/ie9/ie9\_vs\_fx4.html](http://people.mozilla.com/~prouget/ie9/ie9_vs_fx4.html)

2011-11-22 ARTICOLI
mobile sviluppo tecnologia web