Uno sguardo a HTML 5
HTML 5 è la nuova versione del popolare linguaggio HTML, e andrà a sosituire proprio HTML 4.1 e XHTML.
Lo standard è ancora in fase di definizione e il rilascio è previsto per la fine dell'anno.
Gli aspetti chiave che caratterizzano il nuovo standard sono 7:
- retrocompatibilità per facilitare chi già lavora con HTML, Javascript, CSS, ecc
- gestione degli errori ben definita
- nuove feature
- lo scripting non va utilizzato: cercare di specificare markup con le stesse funzionalità
- indipendente dal dispositivo
- logica open
- gli utenti non devono essere esposti agli errori di markup
In generale introduce molte funzionalità per rendere ancora più distaccata la struttura del documento dallo stile; ad esempio con i tag <menu>, <footer>, <nav>, <figure>, <article>.
Andiamo a vedere un pò più in dettaglio le novità.
Tanto per cominciare cosa è stato rimosso?
Prima di tutti i <frame>, proprio all'insegna dello svecchiamento; ad oggi quasi nessuno li usa per i problemi che comportano.
Poi sono stati eliminati tutti i tag che riguardano la formattazione dei testi come <u>, <center>, <font>, ecc.
Lo stile è totalmente delegato ai CSS.
E' stata migliorata la sintassi del doctype:
<!DCOTYPE html>
<title>Esempio di pagina html 5</title>
<p>Ciao mondo</p>
Inoltre sono stati i tag <head> e <body> non sono più obbligatori!
Rimangono per retrocompatibilità, ma come vedete dall'esempio non è necessario metterli.
Per rendere questo esempio compatibile con browser non compatibili si dovrebbe usare html5shiv.
La cosa è complicata.
Ma andiamo a vedete qualche aggiunta.
Tanto per cominciare i tag <audio> e <video>.
Questi tag permettono di inserire audio e video senza l'intervento di flash player.
Ovviamente è utile comunque inserire flash per retrocompatibilità i primi tempi.
Il problemi in questi casi riguarda i codec.
Firefox ha deciso di supportare solo ogg e theora, che sono open.
Safari invece spinge sui codec proprietari, ed è in grado di leggere mp3.
Opera e Chrome si schiereano su entrambi.
Quindi per fare un esempio:
<!DOCTYPE html>
<title>Esempio mp3</title>
<audio controls autobuffer><source src="file.mp3" /></audio>
verrà letto da Safari, Opera e Chrome, ma non da Firefox.
Comunque l'attributo controls dice al browser di mostrare i controlli del player audio, mentre autobuffer istruisce il browser sulla gestione del buffer.
Per quanto riguarda i video invece:
<!DOCTYPE html>
<title>Esempio video theora></title>
<video src="file.ogg" autoplay="autoplay" controls>
Questo codice non verrà letto da Safari, ma dagli altri browser.
Nota su IE: questo non supporta ancora HTML 5 e per quanto riguarda i codec Microsoft per ora non ha detto nulla.
Altra novità riguarda i forms.
HTML 5 ha inglobato i Web Forms 2.0,
Questo è uno standrad in sviluppo da qualche anno ma ancora mai pubblicato effettivamente.
Esempio:
<form>
<input name="testo" type="text" requires>
<button type="submit">Go</button>
</form>
L'attributo required permette di richiedere all'utente di inserire obbligatoriamente un valore.
Sarà il browsere a validare il tutto senza usare script.
Un altro esempio:
<input name="eta" type="number" min="18" max="30" required>
Mi sembra molto semplice no?
Un altro tag moooolte interessante è <canvas>.
Grazie a questo tag è possibile disegnare nel browser anche in 3 dimensioni, utilizzando Javascript e CSS.
Qui vi lascio un link dove vedere vari canvas perchè purtroppo Javascript non mi appartiene ancora: http://tinyurl.com/canvas-cartoon.
Sappiate solo che con canvas è possibile creare un Piant online.
Per sbirciare Paint.web: http://code.google.com/p/paintweb/.
Una cosa è certa: le novità sono molte.
I problemi ci saranno all'inizio con tutti i vari browser nuovi e vecchi che costringeranno a scrivere codice vecchio e nuovo.
Ma in molti si muovono:
- Safari, Firefox, Opera e Chrome già supportano HTML 5 (a parte il problema dei codec)
- Google ha detto che tra poco eliminerà il supporto a IE 6 per svecchiare il parco browser
- Youtube ha già una versione di HTML 5
Inoltre da quanto ho capito divenetrà quasi fondamentale conoscere Javascript.
Basti pensare che è possibile creare playlist audio e video nei rispettivi tag.
E basta vedere cosa è possibile fare con i canvas.
Speriamo che il passaggio totale sia il più breve possibile!
html 5 html xhtml javascript css tag
Commentami!