The HTTP protocol was created in 1990 and led to the establishment of the World Wide Web by English physicist Tim Berners-Lee. It led to what is now the world's most used language, HTML (Hyper Text Markup Language). HTML5 is being developed as the next major revision of HTML: what is it about? What will it change?

1. <!doctypehtml>
…e via, verso nuove avventure
Matteo Bicocchi
Open Lab s.r.l.
Graphic designer, creative code developer
http://pupunzi.open-lab.com

2. HTML
Cosa è?

3. HTML Cosa è?
L’Hyper Text markup language
è un linguaggiodimarkup
con
funzionalitàdescrittivedeicontenuti,
interpretatodai browser.

4. WWW
Breve storia

5. WWW
Inizio anni ’90
1.000.000 di utenti
HTML 1.0

6. WWW
1994
nasce il W3C

7. WWW
Nel ’95
10.000.000 di utenti

8. WWW
Nel ’99
200.000.000 di utenti
HTML 4.01
javascript

9. WWW
Oggi
1,735,000,000 utenti

10. WWW
La guerra dei browser

11. WWW
1994 2009
W3C

12. WWW

13. W3C
Il World Wide Web Consortium

14. W3C
HTTP,W3C
URL, HTML,
XHTML, XML, SVG,
PNG, WAI

15. W3C
W3C
Dal 1999
XHTML 1
CSS 2

16. W3C
W3C
oggi
XHTML 2
CSS 3

17. W3C
WHATWG 2004
W3C 2007
HTML5

18. W3C
XHTML 2.0
Sintassi troppo restrittiva
I produttori di browser non hanno
implementato le specifiche

19. 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-Lee
Reinventing HTML
(http://dig.csail.mit.edu/breadcrumbs/node/166)

20. W3C
HTML5
retro compatibilità
Quasi tutti i produttori di browser
hanno già implementato parte
delle specifiche

21. HTML5
Futuroprossimo

22. HTML5
HTML 4.01
PAGINE WEB
DESIGN

23. HTML5
HTML 5
APPLICAZIONI WEB
USER INTERFACE

24. HTML5
Cosa c’è di nuovo?
TAG SEMANTICI
WEB FORMS 2
APIs

25. HTML5
TAG SEMANTICI

26. HTML5

27. HTML5

28. HTML5
SINTASSI
HTML 4.01 HTML5
<! DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01//EN"
<! doctype html>
"http://www.w3.org/TR/html4/strict.dt
d">
<meta http-equiv="Content-Type"
<meta charset=utf-8>
content="text/html; charset=utf-8" />
<script type=“text/javascript”> <script>
<style type=“text/css”> <style>
<p> … </p> <p>…

29. HTML5
TAG STRUTTURALI
<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.

30. HTML5
TAG NON STRUTTURALI
<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.
…

31. HTML5
ATTRIBUTI GLOBALI
contenteditable, contextmenu, data-yourvalue,
draggable, hidden, item, itemprop, spellcheck, Subject
ATTRIBUTI EVENTI
onstorage, onmousewheel, onmessage, ondrag, ondragend,
ondragenter, ondragleave, ondragover, ondragstart, ondrop, …

32. HTML5
Ma
possiamogiàutilizzarequestinuo
vielementi?

33. HTML5
<style>
header, article, section, … {display:block}

34. HTML5
<script>
document.createElement("article");

35. HTML5
WEB FORMS 2

36. HTML5
INPUT TYPE
search, tel, url, email, datetime, date, month, week,
time, number, range, color…
ATTRIBUTI SPECIFICI
placeholder, autofocus, required, pattern (validazionegestita via reg ex)…

37. HTML5

38. HTML5
APIs

39. HTML5
<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)
<!-- flash fall back -->(OTHERS)
</video>
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, …

40. HTML5
<audio width="320" controls>
<source src="myAudio.ogg” >(MOZ)
<source src="myAudio.mp3”>(WEBKIT)
<!-- flash fall back -->(OTHERS)
</audio>
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, …

41. HTML5
<canvas id=”myCanvas" width=”500” height=”500” >
<!-- fall back -->(OTHERS)
</canvas>
//script
var 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);

42. HTML5
SESSION STORAGE
sessionStorage.setItem('value', this.value);
sessionStorage.getItem('value');
sessionStorage.clear();
LOCAL STORAGE
localStorage.setItem('value', this.value);
localStorage.getItem('value');
localStorage.clear();
DATABASE STORAGE
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!");
});
});

43. HTML5
<!-- clock.html -->
<!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-manifest
CACHE MANIFEST
clock.html
clock.css
clock.js
images/logo.png

44. 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>

45. HTML5
// nellapagina
var worker = new Worker("worker.js");
//receive message from the worker
worker.onmessage = function(event){
console.debug(event.data.name); //"Nicholas"
};
//send object to the worker
worker.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);
};

46. 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();
};

47. HTML5
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
function success(position){
console.debug(position.coords.latitude, position.coords.longitude)
}

48. HTML5
Prossimofuturo?

49. HTML5

50. 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 fallbacks.
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.
Goolgee Youtubeusano 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).

51. 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 viaggio
e… attenti alle buche!