HTML5 (Cenni)

logo HTML5 Massimo Martinelli <massimo@w3c.it>
Ufficio Italiano W3C
Area della Ricerca CNR - via Moruzzi, 1 - 56124 Pisa


Master in Comunicazione e New Media
Ateneo Pontificio Regina Apostolorum
Corso: Architettura del Web


Presentazione: http://www.w3c.it/education/2012/upra/html5/
Versione pdf: http://www.w3c.it/education/2012/upra/html5.pdf

Formato XHTML realizzato usando il tool Slidy di Dave Raggett.
Slidy dovrebbe funzionare in tutti i browser moderni con Javascript abilitato.
Usare freccia destra/sinistra per muoversi da una slide all' altra.
Vedi la pagina di aiuto di Slidy per ulteriori informazioni.

Cover page W3C Office Logo Cover page Weblab Logo

Premessa

segnale stradale che indica al tempo stesso parcheggio e divieto di sosta segnale stradale che indica direzione

HTML 5: Principali novità

Nuovi elementi strutturali

Esempio di documento HTML5

<!DOCTYPE html>  <!-- Dichiarazione semplificata -->
<html lang="it">  <!-- dichiarazione lingua -->
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />  <!-- set di caratteri unicode -->
  </head>
<body>
  <p>ciao!</p>
</body>
<html>

canvas

<canvas id="myCanvas" width="300" height="200"> </canvas>
<script>var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(200,100,50,50);
ctx.fillStyle = "rgba(0, 0, 200, 0.3)";
ctx.fillRect (230, 40, 55, 50);
ctx.arc(75, 150, 20, 0, Math.PI*2, true); 
ctx.arc(175, 150, 20, 0, Math.PI, true);
ctx.fill();</script>

WebGL

Funziona solo con browser che supportano WebGL

Video

Video Incluso (embedded)

<video src="video.ogg" controls>Il tuo browser non supporta il tag video</video>.
 puoi scaricare il video al seguente indirizzo …

Video e scripting

<video controls>
   <source src="filmato1.ogg" type="video/ogg" />
   <source src="filmato2.mp4" type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' /> 
 Il tuo browser non supporta l'elemento video
</video>
var v = document.getElementsByTagName("video")[0];
v.play();

semplificazione e potenziamento rispetto alle precedenti recommendation

audio

audio

<audio controls='controls'>
  <source src='audio.ogg' type='audio/ogg; codecs=vorbis' />
  <source src='audio.mp3' type='audio/mpeg' />
  Il tuo browser non supporta il tag audio
</audio>

Memorizzazione locale

<script>
localStorage.setItem('nome', 'Ciao mondo!'); //salva nel db locale, chiave/valore
document.write(localStorage.getItem('nome')); //Ciao Mondo
localStorage.removeItem('nome'); // cancella la voce corrispondente nel db locale
</script>

Web SQL

var db = openDatabase('dbanagrafe', '1.0', 'database anagrafico', 2 * 1024 * 1024);
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS utenti (id unique, nominativo)');
  tx.executeSql('INSERT INTO utenti (id, nominativo) VALUES (1, "Giuseppe Verdi")');
  tx.executeSql('INSERT INTO utenti (id, nominativo) VALUES (2, "Anna Bianchi")');
  tx.executeSql('INSERT INTO utenti (id, nominativo) VALUES (3, "Mario Rossi")');
});

Geolocalizzazione

<script>
function ottieniPosizione(posizione){
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  var altezza = position.coords.altitude;
}

Esempio

form

<form>
  <p><label>url:<input type="url" /></label></p>
  <p><label>email:<input type="email" /></label></p>
  <p><label>number:<input type="number" min="0" max="10" step="2" value="6" /></label></p>
  <p><label>range:<input type="range" min="0" max="10" step="2" value="6" /></label></p>
  <p><label>date:<input type="date" /></label></p>
  <p><label>month:<input type="month"></label></p>
  <p><label>week:<input type="week"></label></p> 
  <p><label>time:<input type="time"></label></p>
  <p><label>datetime:<input type="datetime"></label></p>
  <p><label>color:<input type="color"></label></p>
  <p><label>required:<input required name="req"></label></p>
  <p><label>progress:<input type="progress"></label></p>
  <p><label>minlenght e maxlength: <input minlength="3" maxlength="5"></label></p>
  <p><input type="submit" value="Go"></p>
</form>

Visualizzazione del form (Opera)

esempi form html5 con Opera

Mobile

Personal Device Assistant (PDA): forte impulso allo sviluppo di HTML5

Esempio applicazioni: sensori PDA

Applicazione bussola mobile

Esempi

Applicazioni Web: il futuro prossimo star trek enterprise

Grazie per l'attenzione

Domande?


Se non è sul Web non esiste ...

...troverete le slide all'indirizzo http://www.w3c.it/education/2012/upra/html5/

Queste slide fanno parte del materiale predisposto per il corso Architettura del Web