Matteo Bicocchi - Introducing HTML5

<!doctype html>…e via, verso nuove avventure

Matteo BicocchiOpen Lab s.r.l.Graphic designer, creative code developerhttp://pupunzi.open-lab.com

HTMLCosa è?

HTML Cosa è?

L’Hyper Text markup language è un linguaggio di markup

con funzionalità descrittive dei contenuti, interpretato dai browser.

WWWBreve storia

Inizio anni ’901.000.000 di utenti

WWW

HTML 1.0

1994

WWW

nasce il W3C

WWW

Nel ’9510.000.000 di utenti

WWW

Nel ’99200.000.000 di utenti

HTML 4.01javascript

WWW

Oggi1,735,000,000 utenti

WWWLa guerra dei browser

WWW

W3C1994 2009

WWW

W3CIl World Wide Web Consortium

W3C

W3CHTTP, URL, HTML, XHTML, XML, SVG,

PNG, WAI

W3C

W3C

XHTML 1CSS 2

Dal 1999

W3C

W3C

XHTML 2CSS 3

oggi

W3C

WHATWG

HTML5

W3C2004

2007

W3C

XHTML 2.0

Sintassi troppo restrittiva

I produttori di browser non hanno implementato le specifiche

Ottobre 2006

…The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work. …

Tim Berners-LeeReinventing HTML

(http://dig.csail.mit.edu/breadcrumbs/node/166)

W3C

HTML5

retro compatibilità

Quasi tutti i produttori di browser hanno già implementato parte

delle specifiche

HTML5Futuro prossimo

HTML5

PAGINE WEB

DESIGN

HTML 4.01

HTML5

APPLICAZIONI WEB

USER INTERFACE

HTML 5

HTML5

WEB FORMS 2

TAG SEMANTICI

APIs

Cosa c’è di nuovo?

HTML5TAG SEMANTICI

HTML5

HTML 4 HTML5

HTML5

HTML5

HTML 4.01 HTML5

SINTASSI

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<! doctype html>

<script type=“text/javascript”><style type=“text/css”>

<script><style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset=utf-8>

<p> … </p> <p> …

HTML5

<ARTICLE>Definisce un contenuto che è indipendente dal contesto e che mantiene il suo senso anche al di fuori della pagina; può essere ripetuto sulla pagina.

<SECTION> Definisce una sezione, un capitolo, un qualsiasi elemento che ha una sua intestazione.

<HEADER> Definisce l’intestazione della pagina o della sezione; può essere ripetuto sulla pagina su più SECTION o ARTICLE.

<FOOTER> Può essere ripetuta sulla pagina e definisce la chiusura della pagina o della sezione.

<NAV>Definisce un’insieme di link finalizzati alla navigazione dei contenuti; può essere ripetuto sulla pagina.

TAG STRUTTURALI

HTML5

<ASIDE> Definisce una nota, una integrazione o qualsiasi parte testuale secondaria rispetto al contenuto.

<FIGURE>Definisce l’insieme di un’immagine e della sua didascalia (<LEGEND>).

<DIALOG> Definisce un dialogo tra due o più interlocutori (<DT> per il soggetto, <DD> per la sentenza).

<ADDRESS>definisce le informazioni sull’autore della pagina o dell’articolo.

<TIME>, <METER>Una seroe di Tag che definiscono misure.

<OUTPUT>Definisce un’area dedicata all’output di uno script.

…

TAG NON STRUTTURALI

HTML5

contenteditable, contextmenu, data-yourvalue,draggable, hidden, item, itemprop, spellcheck, Subject

ATTRIBUTI GLOBALI

ATTRIBUTI EVENTI

onstorage, onmousewheel, onmessage, ondrag, ondragend,ondragenter, ondragleave, ondragover, ondragstart, ondrop, …

HTML5

Ma possiamo già utilizzare questi nuovi elementi?

HTML5

<style>

header, article, section, … {display:block}

HTML5

<script>

document.createElement("article");

HTML5WEB FORMS 2

HTML5

search, tel, url, email, datetime, date, month, week, time, number, range, color…

INPUT TYPE

placeholder, autofocus, required, pattern (validazione gestita via reg ex)…

ATTRIBUTI SPECIFICI

HTML5

HTML5APIs

HTML5

Attributi: autobuffer, autoplay, controls, loop …Metodi: video.play(), video.pause(), video.load(), …Eventi: ontimeupdate; oncanplay; onended;Offset: video.duration, video.currentTime, video.startTime, video.readyState, …

<video width="320" height="240” controls> <source src="myVideo.ogv" type='video/ogg; codecs="theora, vorbis"’> (MOZ, OPERA) <source src="myVideo.mp4" type='video/mp4; codecs="mp4a. h264"'> (WEBKIT) (OTHERS)

</video>

VIDEO

HTML5

Attributi: autobuffer, autoplay, controls, loop …Metodi: audio.play(), audio.pause(), audio.load(), …Eventi: ontimeupdate; oncanplay; onended, …Offset: audio.duration, audio.currentTime, audio.startTime, audio.readyState, …

<audio width="320" controls> <source src="myAudio.ogg” > (MOZ) <source src="myAudio.mp3”> (WEBKIT) (OTHERS)

</audio>

AUDIO

HTML5

<canvas id=”myCanvas" width=”500” height=”500” >  (OTHERS)

</canvas>

//scriptvar canvas = document.createElement('canvas'); canvas.height = 100; canvas.width = 300; var ctx = canvas.getContext("2d”);ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);

CANVAS & SVG

HTML5

sessionStorage.setItem('value', this.value); sessionStorage.getItem('value'); sessionStorage.clear();

localStorage.setItem('value', this.value); localStorage.getItem('value'); localStorage.clear();

var database = openDatabase("Database Name", "Database Version");database.executeSql("SELECT * FROM test", function(result1) { // do something with the results database.executeSql("DROP TABLE test", function(result2) { // do some more stuff alert("My second database query finished executing!"); });});

STORAGESESSION STORAGE

LOCAL STORAGE

DATABASE STORAGE

HTML5 <!DOCTYPE HTML> <html manifest="clock.manifest">

<head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css">

</head> <body>

<p>The time is: <output id="clock"></output></p> </body>

</html>

/* clock.css */ output { font: 2em sans-serif; }

/* clock.js */ setTimeout(function () { document.getElementById('clock').value = new Date(); }, 1000);

-- clock.manifest -- MIME type text/cache-manifestCACHE MANIFEST

clock.html clock.css clock.jsimages/logo.png

OFFLINE

HTML5

<!– top window (http://html5demos.com) –><script>addEvent(document.querySelector('form'), 'submit', function (e) {

win.postMessage( document.getElementById("message").value, "http://jsbin.com" );

if (e.preventDefault) e.preventDefault(); // otherwise set the returnValue property of the original event to false (IE) e.returnValue = false;

}); </script>

<!– frame window --><script> addEvent(window, "message", function(e){

if ( e.origin !== "http://html5demos.com" )return; document.getElementById("test").innerHTML = e.origin + " said: " + e.data;

});</script>

POSTMESSAGE

HTML5

// nella paginavar worker = new Worker("worker.js"); //receive message from the worker worker.onmessage = function(event){

console.debug(event.data.name); //"Nicholas" };//send object to the workerworker.postMessage({ name: "Nicholas" });

// in worker.js //receive message from the page self.onmessage = function(event){

//send message back to the page var name = event.data.name; //comes through fine! this.postMessage(event.data);

};

WEB WORKERS

HTML5

/* DnD event listeners */

dropContainer.addEventListener("drop", handleDrop, false);

handleDrop = function (evt) { var dt = evt.dataTransfer,

files = dt.files || false, count = files.length, acceptedFileExtensions = /^.*\.(ttf|otf|woff)$/i;

for (var i = 0; i < count; i++) { var file = files[i], droppedFullFileName = file.name, droppedFileName, droppedFileSize; if(droppedFullFileName.match(acceptedFileExtensions)) {

droppedFileSize = Math.round(file.size/1024) + "kb” ; processData(file, droppedFileName, droppedFileSize);

} else { alert("Invalid file extension. Will only accept ttf, otf or woff font files");

} } };

processData = function (file, name, size) { doSomething();

};

DRAG&DROP

HTML5

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { error('not supported'); }

function success(position){console.debug(position.coords.latitude, position.coords.longitude)

}

GEOLOCATION

HTML5Prossimo futuro?

HTML5

HTML5

Le specifiche dell’HTML5 sono attualmente in fase di definizione; I browser più “seri” (leggi tutti tranne IE) supportano già molte delle nuove features ed esistono librerie javascript per la gestione dei fall backs.

http://remysharp.com/2009/01/07/html5-enabling-script/http://www.modernizr.com/

Iniziare ad usare il nuovo DOCTYPE non costa nulla così come costa poco iniziare ad adottare i nuovi TAG.

Goolge e Youtube usano già HTML5 per le loro pagine e le loro applicazioni … Questo porterà velocemente alla pubblicazione definitiva degli standard dell’HTML5 ed all’adeguamento a questi anche di quei browser che, fino ad oggi, hanno pensato di poter fare a meno di seguire una linea comune (leggi IE).

Alcuni riferimenti sul web:

http://www.whatwg.org/ http://diveintohtml5.org/ http://html5doctor.com/ (Bruce Lawson) http://a.deveria.com/caniuse/ (When can I use…) http://html5demos.com/ (Remy Sharp) http://www.alistapart.com/articles/previewofhtml5

Javascript for compability:

http://remysharp.com/2009/01/07/html5-enabling-script/ http://www.modernizr.com/

Buon viaggioe… attenti alle buche!

Technology

Matteo Bicocchi - Introducing HTML5