Il racconto a posteriori (questa presentazione fa seguito a quella tenuta poco più di un anno fa, sempre in occasione della UGIALT.net Conference) di quello che è stato effettivamente lo sviluppo e l'adozione di questo linguaggio, che ormai molti indicano come la vera piattaforma di sviluppo del futuro, il rischio che si intravede di una nuova buzzword stile "web 2.0", alcune esperienze dirette e le lezioni che ne ho potuto trarre.

1. HTML5
Un anno dopo...

2. Cristiano Rastelli
➜ Freelance (“Area Web”)
➜ Developer & Designer
(da oltre un decennio)
➜ Web + App UI + Mobile
➜ Passionate of UX, AI, Agile

3. DEFINIZIONE

4. W3C
WHATWG
STANDARD
HTML5
Rif: [1] [2] [3]

5. HTML5

6. HTML5
CSS3 GEO
Font-embedding
Javascript “magics”
Local-database
Webworkers Websockets

7. HTML5
Open Web Stack
NEWT
Rif: [4]

8. BREVEMENTE

9. HTML5 in due minuti...
Novità nel linguaggio:
• introduzione di nuovi elementi semantici
• introduzione di nuovi attributi (anche “custom”)
• eliminazione elementi/attributi obsoleti
• definizione di un nuovo doctype
• definizione di nuove regole di sintassi
Rif: [5]

10. HTML5 in due minuti...
Introduzione di nuove API per semplificare lo
sviluppo di applicazioni web:
• disegno bidimensionale su canvas
• riproduzione audio/video integrata
• gestione di storage di dati locali
• geo-localizzazione dell’utente
• gestione dello stato offline delle pagine web
• utilizzo di processi paralleli e in background
Rif: [5]

11. HTML5 in due minuti...
E molto altro ancora:
• drag&drop
• postMessage
• browser history
• editing nativo
• registerProtocolHandler
• querySelectorAll
Rif: [5]

12. Supporto da parte dei browser
Canvas
Audio/Video * * * *
Storage
Offline
Workers/Sockets
Form 2.0
Geolocation
Rif: [6] [7] [8] [9] [10]

13. +1 ANNO

14. 5
Come già previsto
HTML5 è subito
diventata una
buzzword…

15. Ci permette di “parlarne”.

16. Ci permette di “vendere”.

17. Ci permette di “bullarci”

18. Rif: [11] [12] [13]

19. Contrordine, compagni!
HTML5

20. Contrordine, compagni!
HTML

21. HTML5 diventa HTML
“After that we realised that the demand for new features in
HTML remained high […] we moved to a new development
model, where the technology is not versioned and instead
we just have a living document that defines the technology
as it evolves.”
“The WHATWG HTML spec can now be considered a "living
standard". […] it made no sense for us to keep referring to
it as merely a draft. We will no longer be following the
"snapshot" model of spec development […]”
WHATWG - "HTML is the new HTML5"
Rif: [14] [15] [16]

22. Flash is (almost) dead
Rif: [17]

23. HTML5 è ormai “mainstream”
Google Trends per “HTML5”
http://www.google.com/trends?q=html5

24. Apple
Rif: [18]

25. Google
Rif: [19]

26. Microsoft
Rif: [20]

27. Microsoft
Rif: [20]

28. World Wide Web Consortium
Rif: [11]

29. Adobe

30. Adobe

31. HTML5 “toolboxes”

32. Frameworks
Multi-device & Multi-platform

33. SproutCore
http://www.sproutcore.com/

34. The-M-Project
http://www.the-m-project.org/

35. Appcelerator (a.k.a. Titanium)
http://www.appcelerator.com

36. PhoneGap
http://www.phonegap.com/

37. Sencha Touch
http://www.sencha.com/products/touch/

38. Jo
http://joapp.com/

39. Jo
http://joapp.com/

40. Polyfills

41. No, non ho detto “polisucco”

42. Modernizr
http://www.modernizr.com/

43. HTML5 Shiv
http://code.google.com/p/html5shiv/

44. Boilerplates

45. HTML5 Boilerplate
http://html5boilerplate.com/

46. Initializr
http://initializr.com/

47. Baker
http://bakerframework.com/

48. Font-services

49. Typekit
http://typekit.com/

50. Fontdeck
http://fontdeck.com/

51. Fontspring
http://www.fontspring.com/fontface

52. Kernest
http://kernest.com/

53. Typotheque
http://www.typotheque.com/webfonts

54. Fonts.com
http://webfonts.fonts.com/

55. FontShop
http://www.fontshop.com

56. The League of Moveable Type
http://www.theleagueofmoveabletype.com/

57. ESPERIENZA

58. L’effetto iPad

59. L’effetto iPad (1)
Se non si vede oppure non
funziona su iPad, non esiste.

60. L’effetto iPad (2)
web-application
<html5>
browser (player)
native-application (shell)

61. iTunes Store è in HTML!

62. Adozione nei progetti recenti
Chi Cosa Come
Quotidiano Web-App per iPad CSS3
Quotidiano Mobile Web Version CSS3
Finanziaria Gestionale Web CSS3 + Chrome-only
Evento Sito Web HTML5 + CSS3 avanzato
Scuola Sito Web HTML5 + CSS3
Banca Magazine Web HTML5 + CSS3 avanzato

63. Adozione nei progetti recenti
Chi Cosa Come
Quotidiano Web-App per iPad CSS3
Quotidiano Mobile Web Version CSS3
Finanziaria Gestionale Web CSS3 + Chrome-only
Evento Sito Web HTML5 + CSS3 avanzato
Scuola Sito Web HTML5 + CSS3
Banca Magazine Web HTML5 + CSS3 avanzato
Prossimi progetti: 6 su 6 con HTML5+CSS3 avanzati

64. Requisiti di progetto

65. Requisiti di progetto
“Il sito andrà sviluppato per versioni
di Internet Explorer 7 e superiori.
In una fase immediatamente
successiva al lancio, verrà valutata
l’opportunità di realizzare versioni
ad-hoc per iPad, tablet e terminali
mobili.
Si richiede infine che, in una fase
successiva, il sito sia compatibile
anche con Internet Explorer 6.”

66. Confini ben delimitati

67. Molteplicità + Compatibilità
Multi-Browser
Multi-Platform
Multi-Device

68. “Hortus conclusus”

69. CONCRETAMENTE

70. Frameworks & co.
• HTML5 Shiv: it really rules!
• Domani: Modernizr (forse)
• Boilerplates: si può imparare
molto studiando come sono
realizzati, ma in un contesto di
“hortus-conclusus” spesso
sono troppo o generici o
specifici per essere usati
• Molto “trial & error”!

71. Svolta davvero “epocale”!
Progressive Enhancement
Sviluppo per IE6, poi lo faccio andare bene
anche su Firefox, Chrome e Safari
Graceful Degradation
Sviluppo per browser di tipo evoluto (iPad compreso)
facendo in modo che su browser più vecchi
si veda comunque in modo decente

72. <HEAD/>
<!-- [META TAGS] -->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- [FILE CSS] -->
<link rel="stylesheet" href="style.css" media="screen" />
<link rel="stylesheet" href="style_iphone.css" media="screen and (max-device-width: 480px)" />
<link rel="stylesheet" href="style_ipad.css" media="screen and (min-device-width: 768px) and
(max-device-width: 1024px)" />
<!-- [ICONS] -->
<link rel="apple-touch-icon" href="/home_icon.png"/>
<link rel="apple-touch-startup-image" href="/splash_image.png" />
<!--[if lt IE 9]>
<script src="script/js/html5shim.js"></script>
<![endif]-->

73. “Divitis”
Rif: [21] [22]

74. “Divitis”
<body>
<div id=”boxWrapper”>
<div id=”boxHeaderWrap”>
<div id=”boxHeader”/>
<div id=”boxMenu”/>
</div>
<div id=”boxRoot”>
PRIMA
<div class=”heading”>
<h1/>
</div>
<div id=”boxMain”>
………
</div>
</div>
</div>
<div id=”boxFooter”>…</div>
</body>
Rif: [21] [22]

75. “Divitis”
<body> <body>
<div id=”boxWrapper”> <section>
<div id=”boxHeaderWrap”> <aside>
<div id=”boxHeader”/> <header/>
<div id=”boxMenu”/> <nav/>
</div> </aside>
<div id=”boxRoot”> <article>
DOPO
PRIMA
<div class=”heading”> <hgroup>
<h1/> <h1/>
</div> </hgroup>
<div id=”boxMain”> <section>
………
………
</div> </section>
</div> </article>
</div> </section>
<div id=”boxFooter”>…</div>
<footer>…</footer>
</body> </body>
Rif: [21] [22]

76. CSS3
• @font-face (font-embedding)
• @media-orientation (iPad/iPhone)
• multiple backgrounds
• gradients
• rounded corners
• box & text shadows
• alpha colors (rgba)
• transitions & transformations

77. @font-face
@font-face {
font-family: 'MySuperWebFont';
src: url('superwebfont.eot');
src: local('☺'), url('superwebfont.woff') format('woff'), url('superwebfont.ttf')
format ('truetype'), url('superwebfont.svg#webfontc2vQD8pF') format('svg');
font-weight: normal;
font-style: normal;
}
p { font-family: MySuperWebFont, Verdana, Arial, sans; }

78. @font-face
@font-face {
font-family: 'MySuperWebFont';
src: url('superwebfont.eot');
src: local('☺'), url('superwebfont.woff') format('woff'), url('superwebfont.ttf')
format ('truetype'), url('superwebfont.svg#webfontc2vQD8pF') format('svg');
font-weight: normal;
font-style: normal;
}
p { font-family: MySuperWebFont, Verdana, Arial, sans; }

79. @media-orientation

80. Sfruttare il “cascade”
/* ---- layout ---- */
margin: 0px; padding: 0px;
/* ---- formatting ---- */
font-family: Helvetica, Arial, sans-serif; font-size: 16px; color: #333333;
background: #E4E4E4 url(xxx.png) repeat-x top left;
border: 10px solid #FFFFFF;
/* ---- css3 ---- */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba), to(rgba));
background-image: -moz-linear-gradient(rgba, rgba);
-webkit-background-size: 1200px 375px;
-moz-background-size: 1200px 375px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

81. Sfruttare il “cascade”
/* ---- layout ---- */
margin: 0px; padding: 0px;
/* ---- formatting ---- */
font-family: Helvetica, Arial, sans-serif; font-size: 16px; color: #333333;
background: #E4E4E4 url(xxx.png) repeat-x top left;
border: 10px solid #FFFFFF;
/* ---- css3 ---- */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba), to(rgba));
background-image: -moz-linear-gradient(rgba, rgba);
-webkit-background-size: 1200px 375px;
-moz-background-size: 1200px 375px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

82. NoSQL Day (Brescia - 25 marzo 2011)
Rif: [23]

83. PREVISIONI

84. HTML5, la piattaforma
“It's taken 20 years because the
underlying standards had to evolve
from the proprietary Mac and Windows
platforms. But they have both adopted
HTML5 as a future direction.
So that means in future a lot of apps
will be running in HTML5 in both
mobile and non-mobile form”
Eric Schmidt - CEO Google Inc.

85. Grazie per l’attenzione.
Cristiano Rastelli
www.didoo.net

86. REFERENZE

87. Links
[1] http://www.w3.org/TR/html5/
[2] http://dev.w3.org/html5/spec/
[3] http://www.whatwg.org/html/
[4] http://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/
[5] http://robertnyman.com/2009/10/14/an-introduction-to-html5/
[6] http://caniuse.com/
[7] http://www.html5test.com/
[8] http://www.findmebyip.com/
[9] http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
[10] http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
[11] http://www.w3.org/html/logo/
[12] http://www.webstandards.org/2011/01/18/regarding-the-html5-logo/
[13] http://adactio.com/journal/4289/
[14] http://blog.whatwg.org/html-is-the-new-html5
[15] http://www.zeldman.com/2011/01/27/html5-vs-html/
[16] http://www.456bereastreet.com/archive/201101/html_beyond_html5/
[17] http://www.apple.com/hotnews/thoughts-on-flash/
[18] http://www.apple.com/html5/
[19] http://www.html5rocks.com/

88. Links
[20] http://ie.microsoft.com/testdrive/
[21] http://en.wiktionary.org/wiki/divitis
[22] http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/
[23] http://nosqlday.it
» http://diveintohtml5.org/
» http://html5doctor.com/
» http://html5demos.com/
» http://html5gallery.com/
» http://html5test.com/
» http://www.html5rocks.com/