HTML5 – Cosa cambia?

Chi di voi non si è mai posto questa domanda, soprattutto adesso che l’argomento scotta 🙂 ?

Quanti si sono chiesti effettivamente cosa comporterà l’introduzione di questa tecnologia al loro attuale approccio riguardo lo sviluppo di applicazioni per il web? Quali benefici porta?

HTML 5, rispetto al predecessore HTML 4.01, da luogo ad una serie di innovazioni, mirate a soddisfare tutte quelle esigenze di interazione e multimedialità che una qualsiasi applicazione Web 2.0 necessita.

Senza dare origine ad un grande ed estenuante lavoro di sviluppo, sarà possibile costruire wiki, forum di discussione, dar luogo a drag-and-drop, ricerche di contenuti, chat realtime, il tutto senza preoccuparsi di problemi di compatibilità cross-browser.

Vuoi sapere quali sono i principali cambiamenti e le più importanti innovazioni?

Per i più curiosi di seguito troveranno la presentazione di alcune caratteristiche fontamentali di HTML 5!


Template

Il modo con cui viene strutturata una pagina è cambiato,  andando a semplificare da un lato il lavoro di sviluppo della pagina.

Quanti di noi si sono trovati svariate volte a dover costruire un “castello” di div per creare la struttura del proprio web site?

Con HTML 5 possiamo – facoltativamente – ricorrere all’utilizzo di tag specifici  per ogni sezione che desideriamo attribuire alla struttura della nostra pagina, attuo a contestualizzare meglio sia se stesso che tutti gli altri e questo tornerà a vantaggio di una miglior consultazione da parte di tutti gli utenti che utilizzano, invece che del computer di casa, altri device per la navigazione su web.

Vediamone un esempio:

Struttura standard HTML 4.01

html4-template

Struttura proiettata in HTML 5

html5-template

 

La differenza tra le due strutture è che nella versione che adotta HTML 5, le varie sezioni si distinguono meglio – cosa buona e giusta per i motori di ricerca – ovviamente è da tener presente che in qualsiasi momento possiamo sempre utilizzare i nostri tag comunemente usati fino ad oggi quali ad esempio i DIV.

Naturalmente questi  tag possono esssere nidificati come meglio si crede a seconda del contesto che devono ricoprire, ad esempio, per una pagina che visualizza una serie di articoli da poter acquistare, il nostro codice potrà essere composto da una section che andando a comprendere tutta la lista di articoli sarà costituito quindi da tanti tag article,header, section e footer quanti sono gli articoli che visualizza la pagina :

<!DOCTYPE html>

<html>

<header>Elenco degli articoli venduti:</header>

<nav>

<ul>

<li><a href=”……</a></li>

<li><a href=”……</a></li>

</ul>

</nav>

<section>

<article>

<header>Articolo 1</header>

<section>

<figure>

<img src=”/img/articolo01.png” alt=”Articolo 01” />

</figure>

<p>Contenuto rappresentativo del primo articolo</p></section>

<footer>- dettagli -</footer>

</article>

<article>

<header>Articolo 2</header>

<section>

<figure>

<img src=”/img/articolo02.png” alt=”Articolo 02” />

</figure>

<p> Contenuto rappresentativo del secondo articolo </p>

</section>

<footer> – dettagli -</footer>

</article>

</section>

</html>

Video & Audio

Nel voler includere un file multimediale quale audio o video nella nostra pagina e voler permettere all’utente di gestire in pieno il file multimediale, magari correlando il tutto da un player, non dovremmo più preoccuparci di problemi quali: la visualizzazione,  la compatibilità, l’ integrazione e l’utilizzo di plug-in esterni.

HTML 5 permette infatti di creare un player Javascript andando a scrivere il codice direttamente nella propria pagina.

Esempio di utilizzo del tag video

<video width=”400” height=”300” controls=”controls” preload=”none” src=”/multimedia/video.mp4”></video>

 

Esempio di utilizzo del tag audio

<audio controls=”controls” src=”/multimedia/track01.ogg”></audio>

Canvas

Questo oggetto, che può essere giunto al vostro orecchio come il futuro rivale delle attuali tecnologie di grafica vettoriale dedicate al web, risulta uno strumento semplice e potente per disegnare dalle semplici linee e figure geometriche a vere e proprie immagini.

Il tutto può essere visto come un’area (o tela) in cui poter dar via libera al nostro lato artistico attraverso l’utilizzo di specifiche API che possono dar luogo ad un semplice grafico come ad un piccolo video-gioco.

Geolocation API

Quante sono ad oggi le applicazioni più trafficate dagli utenti  prive della possibilità di far comunicare la propria posizione geografica ed eventualmente conoscere quella altrui?

L’uomo fondamentalmente è curioso, sente la necessità di conoscere la posizione di altre persone come la necessità di dare il proprio contributo, poter dire dire “io ci sono!” oppure un semplice “sono quì!”.

HTML 5 viene incontro a tutti coloro che tramite dall’applicazione vogliono poter soddisfare questa richiesta che piace tanto agli utenti , permettendo agli sviluppatori di Web 2.0 di implementare la gestione dei dati geografici e geospaziali per potersi così sbizzarrire nell’utilizzarle come meglio si crede. Tutto questo mediante l’utilizzo di semplici API dedicate pronte ad essere supportate da qualsiasi browser che non disponga di nessun plug-in o di altra caratteristica particolare se non quella di supportare HTML 5.

Offline storage

Pensate di essere in viaggio, su un treno, ne approfittate per compilare il modulo di note spese che comodamente viene distribuito dalla  web application dell’azienda. Siete arrivati alla fine del modulo, la terza pagina, che finalmente vede la presenza in fondo del tanto amato tastino “Conferma ed Invia”, quando contemporaneamente alla sua pressione il treno entra in una galleria e perdete la linea dal vostro dispositivo mobile.

Volete poter creare applicazioni che evitino di perdere il lavoro svolto in assenza (improvvisa o meno) di rete? Avete intenzione di  poter rendere la vostra applicazione utilizzabile in qualsiasi situazione senza scatenare attacchi di panico all’utente o altri motivi di non utilizzo del vostro prodotto?

Un cambiamento, molto importante che porta l’introduzione dell’HTML 5, è proprio il lavoro offline.

Un’applicazione web può essere concepita in modo tale da far scaricare al device dell’utente tutti quei file necessari a far si che si possa permettere la consultazione e l’inputazione (il lavoro quindi) in assenza di rete.

Questo è sicuramente un altro cambiamento a favore dei dispositivi mobili ma che trova piena approvazione in tutta la gamma di device che permettono la navigazione sul web.

La logica di questa funzionalità ha inizio online, ovviamente, contattando il web site desiderato e scaricando in backgound alla prima visita tutti i file che l’applicazione ritiene necessari per un eventuale lavoro offline.

Quando si è in assenza di rete, il browser riconoscerà l’assenza di linea e permetterà il lavoro offline per poi, quando il device dell’ritornerà online, aggiornare le modifiche apportate contattando l’effettivo server web.

Web Workers

Con questo termine si identifica il meccanismo con cui è possibile lanciare delle esecuzioni dall’applicazione web senza rimanere fermi nella sua consultazione in attesa che questa esecuzione sia venuta a termine.

Questo è possibile grazie alla possibilità di demandare a threads che lavorano in background tutti i processi che in alternativa avrebbero anche solo rischiato di mettere in sospensione l’utilizzo della pagina web.

In realtà si tratta di codice Javascrpt che viene eseguito in modo asincrono e con il quale è possibile effettuare sia calcoli complessi che operazioni di I/O.

Insomma..quanto dobbiamo aspettare?

Concludo dando la mia risposta a tutti coloro che navigando su web hanno tentato di capire quando sarà effettivamente il momento giusto per iniziare a rodarsi riguardo questa  tecnologia (non vi nascondo che sarei molto interessato a leggere la vostra opinione a riguardo 🙂 ).

Beh, personalmente trovo che questo è il momento in cui si deve iniziare ad avere il primo approccio concreto con questa tecnologia, consiglio vivamente di iniziare a fare le prime prove,le prime esperienze su HTML 5, soprattutto per chi ha intenzione di non farsi cogliere impreparato, magari per opportunità di business e provare a cavalcare la cresta dell’onda.

E’ vero che ancora non tutti i browser sono compatibili al 100% con HTML 5, d’altro canto esiste una libreria chiamata modernizr che mette a disposizione sia la verifica della compatibilità del browser, sia la possibilità di aggirare l’eventuale non compatibilità, il tutto grazie ad una libreria Javascript da includere nel proprio sorgente (si tratta di pochi KB).

Letture collegate:

Una guida completa – http://xhtml.html.it/guide/leggi/203/guida-html5/

Manuale utente dei tag – http://www.webmasterpoint.org/funzione/9/tag_HTML_5/A.html

Esempi di utilizzo (utilizzate Chrome oppure verificare la compatibilità del browser) – http://html5demos.com/

UX Designer for passion & Team Leader @Vivido Srl. Life is too short for learn all.. why not combine our knowledge?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *