HTML5 – Da dove iniziare

Proseguiamo la nostra analisi delle novità dei nuovi standard per il web HTML 5 e CSS3.

La definizione dell’HTML5 ha portato la comunità web a trattare, sempre con maggiore frequenza, e a discutere le novità che questo ambito ha in serbo per noi. Come accennato nel mio post precedente, vorrei chiarire, nelle prossime settimane, cosa ci aspetta e, con qualche esempio pratico, iniziare a mettere mano al codice.

I nuovi tag

La varietà dei nuovi elementi messi a disposizione dalle specifiche HTML5 non può che rallegrare ogni programmatore. Qui di seguito esponiamo una lista di alcuni nuovi elementi che HTML5 ci mette a disposizione. Chiaramente l’HTML5 non è pronto per essere utilizzato in modo definitivo sui nostri siti internet, quindi non iniziare da subito a tradurre i tuoi siti in HTML5. La metamorfosi nel nostro codice dovrà avvenire gradualmente e, per ogni nuovo TAG introdotto da HTML5 dovrà esserci un approfondimento delle funzionalità, così da offrire le migliori opportunità ai tuoi siti internet.

• <article> Definisce un articolo, una news, un post di un blog…
• <aside> Definisce un contenuto relativo ad un contenuto, ad esempio una sidebar informativa
• <audio> Utilizza un suono, musica o stream audio in generale
• <canvas> Definisce un elemento grafico, come immagini, disegni, grafici, ecc…
• <command> Crea un pulsante (radio – checkbox – button)
• <datagrid> Crea un albero contenente elementi selezionabili
• <datalist> Definisce una lista di dati selezionabili. Può essere utilizzato come menu dropdown sotto ad una input-box
• <details> Definisce i dettagli di un elemento che un utente può vedere o, cliccando, nascondere
• <embed> Inserisce un contenuto embedded, ad esempio un plugin
• <event-source> Definisce una sorgente per gli eventi inviati dal serve
• <figure> Utilizzato per raggruppare alcuni elementi
• <footer> Crea una parte “footer” nella pagina web
• <header> Definisce un header della pagina. L’intestazione del sito internet
• <nav> Crea una sezione contenente link di navigazione, la tipica navbar
• <output> Utilizza differenti tipi di output
• <progress> Definisce una barra di avanzamento, utile per identificare il caricamento di un elemento o di una funzionalità
• <section> Definisce le sezioni di un documento. Capitoli, headers, footers, ecc…
• <source> Specifica le risorse per gli elementi multimediali come <video> e <audio>
• <time> Specifica data e ora
• <video> Mostra un video, un movie-clip o un stream video in generale

Nei prossimi post metteremo direttamente mano ad alcuni di questi nuovi tag.

Novità semantiche

Una parte fondamentale nello sviluppo web è la disposizione degli elementi nelle strutture dei nostri siti. HTML5 ci aiuta a definire alcune sezioni della nostra pagina web tramite nuovi elementi che, probabilmente, potranno anche aiutare i bot che analizzano i nostri siti per l’indicizzazione sui motori di ricerca. Ecco alcuni di questi elementi:

1. <nav>
2. <section>
3. <article>
4. <header>
5. <footer>
6. <aside>

Per comprendere al meglio l’utilizzazione di questi elementi è necessario considerarli come tag sostitutivi di alcuni DIV che di solito inseriamo nei nostri siti internet. Quindi, ad esempio, potremo sostituire <div class=”header”> con <header> con la possibilità di definirne più di 1 per pagina.

Le API

Una feature importante che HTML5 ci offre è costituita dall’introduzione delle API. Queste API vengono integrate da alcuni elementi HTML5 elencati in questo post. Ecco alcune API che il W3C ha definito per HTML5:

• API per il disegno 2D che possono essere utilizzate con <canvas>
• API per la riproduzione di filmati e audio utilizzando <video> e <audio>
• API che permettono lo sviluppo di applicazioni WEB che funzionino OFFLINE
• API per il drag&drop
• API che gestiscano la cronologia e che permettono alle pagine di prevenire il click sul tasto “INDIETRO” del browser
• API per il messaging cross-document

Come si può notare l’obiettivo di queste API è di facilitare la creazione di applicazione WEB. Possiamo dire che non vediamo l’ora di poter mettere le mani soprattutto sulle API per la creazione di applicazioni WEB che funzionino OFFLINE così da emulare i migliori servizi di Google.

Concludendo

Nonostante tutta questa carne al fuoco dobbiamo sempre ricordarci che, per quanto sperimentare le nuove tecniche offerte è, per noi programmatori, necessario, l’utilizzazione dell’HTML5 non sarà questione di mesi. Grandi sviluppatori, come Google, stanno spingendo per velocizzare le procedure di definizione delle specifiche e per migliorare le compatibilità cross-browser. Non illudiamoci, però… alcuni browser non ci faranno fare una vita tranquilla!