Connect.gt

Condividiamo idee e conoscenza dal 2003...
...dopo 17 anni una Nuova Storia è nata
Scopri di più

HTML5 (o Web Applications 1.0) è la nuova release, attualmente ancora catalogata come draft(in italiano: bozza), del linguaggio di markup HTML.


Premessa

Lo sviluppo di HTML si è interrotto nel 1999 con la presentazione di HTML4.

Da allora, il W3C ha lavorato sulle modifiche da apportare a HTML, e di conseguenza ai parsers che lo interpretano, per completare il passaggio da SGML (Standard Generalized Markup Language) a XML, dando vita a tutti quei linguaggi XML based tipo SVG e Xforms.


Dal 2004, Apple, Opera e Mozilla Foundation hanno istituito il Web Hypertext Application Technology Working Group' (WhatWG) per avviare il progetto di aggiornamento e sviluppo di nuove funzionalità che HTML 4.0 non ha mai avuto. Successivamente, il W3C si è unito al gruppo per rendere HTML5 un nuovo standard.


HTML5 riutilizza la maggior parte degli elementi già presenti in HTML 4 e ne aggiunge altri specifici e specializzati.

Con HTML5 si continuerà a scrivere il codice sorgente come lo si fa ora con HTML 4, anzi la sintassi e le sue regole, probabilmente, potranno godere di regole meno restrittive.



Le novità principali

HTML5, sebbene le sue specifiche siano ancora considerate bozze, introduce molte novità in termini di nuovi elementi e di funzionalità applicative.

Grazie alle ultime release dei browsers forniti dai fondatori del WhatWG, è già possibile poter utilizzare molti dei nuovi elementi strutturali, inline e funzionali previsti: questo perchè implementano le interfacce(API) progettate dal WhatWG.



Nuovi elementi strutturali e semantici

Tra le novità già supportate dai browsers di cui sopra, ci sono soprattutto nuovi elementi per comporre in maniera più precisa, e con coscienza, la struttura delle pagine.

Attualmente sono stati introdotti i seguenti elementi:

  • <section />: in astratto può rappresentare un capitolo di un libro o un sotto capitolo.
  • <header />: rappresenta l'intestazione della pagina (non sostituisce <head />). Nato per dare un significato a quell'area, in alto alla pagina, che solitamente è racchiusa da <div id="header" />.
  • <footer />: può rappresentare il fondo della pagina come la firma in fondo ad un articolo.
  • <nav />: è da utilizzarsi per racchiudere un gruppo di link utili alla navigazione. Potrebbe essere utilizzato per la creazione di menù.
  • <article />: generalizzando rappresenterebbe una qualsiasi scrittura indipendente e di senso compiuto come un post in un blog o un articolo di giornale.
  • <aside />: nato per rappresentare una nota, un suggerimento o qualsiasi informazione aggiuntiva, ma esterna, al flusso narrativo principale della pagina.
  • <figure />: rappresenta un blocco di elementi, o meglio, un insieme chiuso nel quale possiamo trovare una legenda che descrive ed introduce un video, un'immagine, una canzone o anche un iframe.
  • <dialog />: utile per riportare un dialogo tra varie persone. Può contenere i seguenti elementi:
    • <dt />: per indicare colui che sta parlando;
    • <dd />: per contenere le parole dette;



Nuovi elementi semantici inline

Rispetto a HTML 4, nel quale erano presenti solo gli elementi <var />, <code /> e <samp />, HTML5 introduce una serie di elementi inline in grado di rappresentare caratteristiche come il tempo, qualità come il sarcasmo ed entità basilari come numeri.


I più popolari sono:

  • <m /> o mark: il testo racchiuso in questo elemento è in qualche modo da mettere in risalto, senza però essere necessariamente enfatizzato.
  • <time />: questo elemento rappresenta un momento ben determinato nel tempo, come per esempio 16:43, 06 Dicembre, 1975.
  • <meter />: utilizzato per rappresentare un valore numerico misurabile come ad esempio potrebbero essere uno stipendio EUR9999, l'esito di un exit-poll 44% o una temperatura 33°.
  • <progress />: è la rappresentazione dello stato di avanzamento di un processo, potrebbe essere visualizzata mediante la classica barra di avanzamento tipica delle applicazioni desktop.



Nuove funzionalità

Grazie all'introduzione degli elementi <audio /> e <video />, ogni browser HTML5 compliant permetterà l'ascolto e la visione dei più diffusi formati multimediali senza necessità alcuna di plug-in proprietari.


HTML5 prevede il supporto nativo al drag&drop degli oggetti visibili e permetterà il salvataggio in locale di dati remoti per lavorare off-line.



Interattività


Al fine di migliorare l'interattività delle pagine con l'utente, HTML5 introduce altri specifici elementi:

  • <details />: racchiude piccole informazioni, di poco conto, che potrebbero anche non essere mostrate di default;
  • <datagrid />: rappresenta il classico controllo griglia(grid) necessario per poter eseguire operazioni di ordinamento e modifica sulle celle di una tabella piuttosto che un nodo di un albero(tree) o una semplice lista.
  • <menu />: contiene una lista di bottoni o di elementi command e rappresenta un menu funzionale o una toolbar.
  • <command />: rappresenta un tasto, un interruttore o qualunque cosa che attivata possa scatenare un evento.



Multimedialità


Attualmente queste caratteristiche non sono ancora del tutto supportate dai nuovi browsers.


Dal punto di vista multimediale, HTML5 offrirà comodi elementi per l'ascolto musicale e la visione di movies. E' interessante far notare che attualmente ogni browser in circolazione ha bisogno di plug-in aggiuntivi per poter visualizzare l'ampia scelta di formati video.

Uno degli obiettivi auto-imposti nelle specifiche è la normalizzazione dello streaming video, attraverso un formato standard ed open-source.

Gli elementi multimediali introdotti nelle specifiche sono:

  • <video />: da utilizzarsi per lo streaming video.
  • <audio />: per poter fare ascoltare un brano musicale da una pagina html.



HTML5 e motori di ricerca

Molti elementi introdotti dal nuovo linguaggio sono nati per aggiungere informazioni semantiche alle varie aree di una pagina. Per esempio il nuovo elemento <footer /> sta ad indicare la chiusura (non necessariamente il fondo pagina) della porzione di pagina nella quale esso stesso è contenuto: poco importa che sia il fondo dell'elemento <body /> o del più recente <article /> .

Questo valore aggiunto permetterà a noi, che scriviamo il codice, quanto ai motori di ricerca, di attribuire un significato intrinseco al testo contenuto nelle differenti aree della pagina.



Tool per lo sviluppo

Sviluppare un sito in HTML5 è tutt'altro che semplice, sopratutto se si vuole partire da zero e se come è giusto che sia si vuole tenere una buona retro compatibilità per tutti i browser che non supportano tutte (in genere parliamo di Internet Explorer) o parte delle featured introdotte.

Per questo motivo ci sono molti tool che aiutano lo sviluppatore sopratutto nella fase di partenza.

Boilerplate: è un template per HTML5 che raccoglie lo studio e lo sforzo di oltre 100 sviluppatori, con diverse librerie Javascript, alcune delle quali, come in particolare la libreria modernizr.js serve per mantenere una retro compatibilità con le vecchie versioni di browser che non supportano HTML5. Questo permette di avere una base sicura per sviluppare una nuova applicazione, o sito web in HTML5. Nel link di questo strumento troverete anche un link ad un'altra risorsa fondamentale: Initializr che si trova nel link "Get a custom Build" e che serve appunto a realizzare un template in HTML5 selezionando i componenti necessari, ed includendo quindi solo le librerie desiderate.

Bootstrap è un'altro template per HTML5, si tartta di un template realizzato dagli sviluppatori di [Twitter] ed ha bisogno quindi di ben poche presentazioni. Anche in questo casi si tratta di un sistema che permette un livello ottimale di retro compatibilità.

HTML5 Please: con questo strumento potete verificare, prima di usarle in un progetto, le funzioni ed i comandi che attualmente sono già utilizzabili e funzionanti sulla maggior parte dei browser attualmente utilizzati. Basta inserire una qualsiasi istruzione sia HTML5 che CSS3 per poter sapere se sono pronte da usare

HTML5 Test: è un sito utile per testare il borwser in uso e verificare quanto di HTML5 è effettivamente supportato dal browser che si sta utilizzando.

Fonti e link utili



Articolo a cura di mirkoagrati 01:10, Gen 16, 2010 (CET) e di gabrielem 16:40, Lug 23, 2013 (CET)


  • Questa pagina è stata modificata per l'ultima volta il 23 lug 2013 alle 16:40.
  • Questa pagina è stata letta 1 444 volte.