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.

Premessa

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

Maggior parte pagine Web non compatibili al 100% con recommendation W3C
Come se leggendo un libro trovassimo frasi come
"va a; teca p u, bro leg?"
User-agent devono prevedere eccezioni, codice in più per interpretare errori e visualizzare il visualizzabile
Più della metà degli utenti può avere problemi a consultare il Web
(senza considerare sistemi automatici)
Consiglio: scrivere sempre in XHTML(1...5...n)!
Vediamo alcune novità di (X)HTML5...

HTML 5: Principali novità

nuovi elementi per strutturare il testo in sezioni
nuovi controlli e nuovi elementi di input per i moduli (form)
memorizzazione locale di dati (applicazioni offline)
estensione a tutti i tag di attributi per l'accessibilità
grafica: nuovo elemento canvas che supporta javascript per le animazioni e migliore supporto per SVG
semplificazione e potenziamento audio e video
accesso ai sensori del computer/palmare
cache applicazione e database
canali di comunicazione bi-direzionale full-duplex (Web Sockets)
web workers (script in background e in parallelo)

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

Grafica 3D (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 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

drag and drop 1
drag and drop 2
percezione offline online
vari
Riconoscimento del volto (Funziona solo con browser compatibili con WebRTC)
Elaborazione video
Stato di implementazione HTML5 e CSS3

Applicazioni Web: il futuro prossimo

Realizzazione sistemi operativi basati quasi interamente sulla tecnologia Web
(componenti nativi ancora utilizzati per gli strati inferiori)
- Ubuntu tour interamente realizzato in HTML5 può dare un'idea
Situazione: due progetti guidano standardizzazione W3C:
- Boot To Gecko (B2G) di Mozilla
- Tizen di Intel e Samsung
Una demo di B2G:
Alcune immagini di Tizen

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