HTML5: introduzione alle novità

HTML 5: introduzione alle novitàIl mondo del web, dal punto di vista del linguaggio, è da anni arenato sul vecchio HTML 4, attivo dal lontano 1999, come Wikipedia riporta. Finalmente qualcosa si è messo è più o meno standardizzato i browser moderni hanno iniziato a supportare il nuovo HTML5 (prima bozza pubblicata dal W3C il 22 gennario 2008 ancora priva di molte parti). Il documento più aggiornato sul sito whatwg.org.

Quali le novità di questo linguaggio? Principalmente sopperire ad alcuni vuoti "operativi" con nuovi tag rivolti alla usabilità e alla semantica. Attenzione però: l’HTML 5, secondo il W3C è tutt’ora in fase di bozza (draft).

 

Browser compatibili

Tutti i browser di nuova generazione supportano HTML 5: Chrome, Firefox 3.5, Opera e Safari. Ops mi sono dimenticato qualcuno? No: IE non supporta l’HTML 5, evidentemente aspettano quel treno che si chiama standard de jure

Per dovere di cronaca vi pubblico le statistiche di utilizzo dei browser, aggiornate ad Agosto 2009, fonte w3schools:

2009 IE7 IE6 IE8 IEx Firefox Chrome Safari Opera
August 15.1% 13.6% 10.6% 39.3% 47.4% 7.0% 3.3% 2.1%

Potete notare che la famiglia IE è seconda a Firefox!

 

Nuovi tag

Partiamo con l’indicare il nuovo doctype, finalmente con una forma che non richiede la memoria rinforzata e nemmeno il copia incolla violento. Infatti è semplicissimo:

<!doctype html>

I nuovi tag si dividono in Layout, Multimedia, DHTML e altri tag.

 

HTML 5 Layout tag

  • article: il contenuto base della pagina
  • aside: il contenuto extra
  • figure: contenuto aggiuntivo che necessità di una nota
  • footer: il piede della pagina
  • header: la testata della pagina
  • nav: sezione di navigazione
  • section: definizione di sezioni

L’utilizzo di questi layout tag permette poi di richiamarli "per nome" nel css. Se ad esempio vogliamo ridefinire i soli tag LI del menù di navigazione, programmato all’interno di <nav>…</nav> sarà sufficiente scrivere nel CSS:

nav li{
   color: red;
}

I tag definiti in questo modo sono inoltre raggiungibili via DOM / javascript.

HTML 5 Multimedia tag

  • audio: indica uno stream audio
  • source: indica la sorgente video o audio
  • video: indica uno stream video

HTML 5 DHTML

  • canvas: gestione di contenitori per grafica dinamica, interagibili via javascript / DOM
  • command: definizione dei pulsanti
  • datagrid: referenzia una tabella dinamica
  • dataList: referenzia una lista di informazioni in un menù a tendina
  • details: dichiarazione di elementi aggiuntivi della pagina, come popup
  • output: referenzia l’output di uno script o di un calcolo
  • progress: la barra di avanzamento

 I tag definiti in questo modo sono raggiungibili via DOM / javascript e dotati di proprietà esposte.

 

Altri tag

  • dialog: per definire una conversazione di tipo chat
  • hgroup: raggruppa dei tag header
  • mark: utile per creare delle referenze
  • meter: per la definizione di misure
  • time: per data e ora.

Per l’elenco completo di tutti i tag HTML 5, potete far fede a questa pagina: elenco tag HTML5.

[ad name=”postintra”]

 

Nuove funzionalità

Tuffiamoci nelle nuove "estensioni" di funzionalità che l’HMTL5 prevede.

 

Regular expression e validazioni

Una delle nuove importanti funzionalità dell’HTML5 è quella di supportare nei tag di input la validazione senza scrivere nemmeno una riga di Javascript. Ad esempio per inserire un campo input che validi obbligatoriamente un campo di tipo data possiamo scrivere:

<p>Enter a date: <input name="day" required="required" title="Use format yyyy-mm-dd" type="date"></p>
 

Ma non basta, la validazione supporta anche espressioni Regular Expression (reg exp): fantastico. Guardate come valida il codice postale americano:

<p>Enter a US ZIP Code or Canadian Postal Code:
<input name="postCode" required="required" pattern="([0-9]{5}(-[0-9]{4})?)|([A-Z][0-9][A-Z]\s+[0-9][A-Z][0-9])" title="US: 99999-1234; Canadian: A1B&nbsp;2C3" type="text"></p>

 

Non male vero? Ma non è tutto è possibile addirittura stabilire il min e il max per un campo numerico. Ma per le reference complete vi rimando alla definizione di INPUT, dove sono spiegati gli attributi autocomplete, list, required, pattern, min, max, step, placeholder, …

 

Supporto SVG

SVG è l’acronimo di Scalable Vector Graphics, una definizione ormai antica, mai sfruttata, di immagini vettoriali per il web. Finalmente sarà possibile definire un bel cerchio in questo modo:

<circle cx="50" cy="50" r="30"
style="stroke:none; fill:#ff0000;"/>

Senza obbligatoriamente usare una GIF: guardate che bel gattino!

 

Canvas

Ne abbiamo già parlato prima ma merita qualche riga in più. Il nuovo tag consente, tramite javascript, di creare onfly forme geometriche e di interagire con loro. Ad esempio per creare un cerchio possia scrivere:

var canvas =
document.getElementById("simpleCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath(); // the circle
ctx.fillStyle = "#ff0000";
ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.save();

 

Sitografia

Questa era solo una vecole presentazione di quello che HTML5 offre. L’obiettivo è quello di incuriosire, se poi volete approfondire ecco alcuni interessanti link. Il consiglio per capire meglio? Provare con qualche demo page e la sintassi sotto mano!

 

Loading Facebook Comments ...

9 pensieri su “HTML5: introduzione alle novità

  1. Francesco

    Molte di queste cose si potevano fare col sempplice uso di coldfusion. Vedo che forse si sta capendo che la semplificazione del codice aiuta.

    Vero è che un programmatore puro potrebbe storcere il naso, perchè vorrebbe avere controllo sul codice, comunque la creazione al volo di datagrid mi pare utilissima, come tutto il resto d’altronde. Direi che è proprio una bella novità, era ora!!!

    Rispondi
  2. AleCss

    Post molto interessante, bravo Merlinox…Lo leggo solo ora, perché finalmente sto cercando anch’io di upgradarmi un po’ a questo nuovo HTML5… 😉

    Ho guardato la pagina del gatto…E sbirciato il codice…a momenti svengo…ma che casino è tutta quella roba?!? :))

    Rispondi
  3. Merlinox Autore articolo

    @AleCss per definire una forma vettoriale l’unico sistema è indicarne i punti e il comportamento delle linee. Ahimè quella è la sua versione “serializzata”. Se ti capita di provare Silverlight vedrai che anche lì le forme si esprimono in un modo omologo. Anche dentro un file .ai ci sono le medesime informazioni: magari un po’ ottimizzate 😉 Ecco un link se vuoi approfondire in merito al SVG.

    Rispondi
  4. Pingback: Youtube compilation

  5. Pingback: Youtube: embed vs iframe

Lascia un commento

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