Uno sguardo a HTML 5

Mattepuffo's logo
Uno sguardo a HTML 5

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!


Condividi

Commentami!