HTML5Un anno dopo...

Cristiano Rastelli

➜ Freelance (“Area Web”)

➜ Developer & Designer(da oltre un decennio)

➜ Web + App UI + Mobile

➜ Passionate of UX, AI, Agile

DEFINIZIONE

HTML5

W3CWHATWGSTANDARD

Rif: [1] [2] [3]

HTML5

HTML5CSS3 GEO

Local-databaseWebworkers Websockets

Font-embeddingJavascript “magics”

HTML5Open Web Stack

NEWTRif: [4]

BREVEMENTE

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

HTML5 in due minuti...

Rif: [5]

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

HTML5 in due minuti...

Rif: [5]

E molto altro ancora:

• drag&drop

• postMessage

• browser history

• editing nativo

• registerProtocolHandler

• querySelectorAll

HTML5 in due minuti...

Rif: [5]

Canvas

Audio/Video

Storage

Offline

Workers/Sockets

Form 2.0

Geolocation

Supporto da parte dei browser

Rif: [6] [7] [8] [9] [10]

* * * *

+1 ANNO

5Come già previstoHTML5 è subitodiventata una buzzword…

Ci permette di “parlarne”.

Ci permette di “vendere”.

Ci permette di “bullarci”

Rif: [11] [12] [13]

Contrordine, compagni!

HTML5

Contrordine, compagni!

HTML

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]

Flash is (almost) dead

Rif: [17]

HTML5 è ormai “mainstream”

http://www.google.com/trends?q=html5

Google Trends per “HTML5”

Apple

Rif: [18]

Google

Rif: [19]

Microsoft

Rif: [20]

Microsoft

Rif: [20]

World Wide Web Consortium

Rif: [11]

Adobe

Adobe

HTML5 “toolboxes”

FrameworksMulti-device & Multi-platform

SproutCore

http://www.sproutcore.com/

The-M-Project

http://www.the-m-project.org/

Appcelerator (a.k.a. Titanium)

http://www.appcelerator.com

PhoneGap

http://www.phonegap.com/

Sencha Touch

http://www.sencha.com/products/touch/

Jo

http://joapp.com/

Jo

http://joapp.com/

Polyfills

No, non ho detto “polisucco”

Modernizr

http://www.modernizr.com/

HTML5 Shiv

http://code.google.com/p/html5shiv/

Boilerplates

HTML5 Boilerplate

http://html5boilerplate.com/

Initializr

http://initializr.com/

Baker

http://bakerframework.com/

Font-services

Typekit

http://typekit.com/

Fontdeck

http://fontdeck.com/

Fontspring

http://www.fontspring.com/fontface

Kernest

http://kernest.com/

Typotheque

http://www.typotheque.com/webfonts

Fonts.com

http://webfonts.fonts.com/

FontShop

http://www.fontshop.com

The League of Moveable Type

http://www.theleagueofmoveabletype.com/

ESPERIENZA

L’effetto iPad

L’effetto iPad (1)

Se non si vede oppure non funziona su iPad, non esiste.

L’effetto iPad (2)

web-application<html5>

native-application (shell)

browser (player)

iTunes Store è in HTML!

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

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

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

Requisiti di progetto

Confini ben delimitati

Molteplicità + Compatibilità

Multi-Browser

Multi-Platform

Multi-Device

“Hortus conclusus”

CONCRETAMENTE

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”!

Svolta davvero “epocale”!

Progressive Enhancement

Graceful Degradation

Sviluppo per IE6, poi lo faccio andare bene anche su Firefox, Chrome e Safari

Sviluppo per browser di tipo evoluto (iPad compreso)facendo in modo che su browser più vecchi

si veda comunque in modo decente

<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]-->

“Divitis”

Rif: [21] [22]

“Divitis”

Rif: [21] [22]

<body> <div id=”boxWrapper”> <div id=”boxHeaderWrap”> <div id=”boxHeader”/> <div id=”boxMenu”/> </div> <div id=”boxRoot”> <div class=”heading”> <h1/> </div> <div id=”boxMain”> ……… </div> </div> </div> <div id=”boxFooter”>…</div></body>

PR

IMA

“Divitis”

Rif: [21] [22]

<body> <div id=”boxWrapper”> <div id=”boxHeaderWrap”> <div id=”boxHeader”/> <div id=”boxMenu”/> </div> <div id=”boxRoot”> <div class=”heading”> <h1/> </div> <div id=”boxMain”> ……… </div> </div> </div> <div id=”boxFooter”>…</div></body>

PR

IMA

<body> <section> <aside> <header/> <nav/> </aside> <article> <hgroup> <h1/> </hgroup> <section> ……… </section> </article> </section> <footer>…</footer></body>

DO

PO

CSS3

• @font-face (font-embedding)

• @media-orientation (iPad/iPhone)

• multiple backgrounds

• gradients

• rounded corners

• box & text shadows

• alpha colors (rgba)

• transitions & transformations

@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; }

@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; }

@media-orientation

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;

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;

NoSQL Day (Brescia - 25 marzo 2011)

Rif: [23]

PREVISIONI

“It's taken 20 years because the underlying standards had to evolve from the proprietary Mac and Windows platforms. But they have both adoptedHTML5 as a future direction.

So that means in future a lot of appswill be running in HTML5 in both mobile and non-mobile form”

Eric Schmidt - CEO Google Inc.

HTML5, la piattaforma

www.didoo.net

Grazie per l’attenzione.

Cristiano Rastelli

REFERENZE

http://www.w3.org/TR/html5/[1]

Links[2]

[3]

[4]

http://dev.w3.org/html5/spec/

http://www.whatwg.org/html/

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/

http://ie.microsoft.com/testdrive/[20]

Links[21]

[22]http://en.wiktionary.org/wiki/divitis

http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/

»

»»

http://diveintohtml5.org/

»

http://html5doctor.com/

»

http://html5demos.com/

»

http://html5gallery.com/

http://html5test.com/

http://www.html5rocks.com/

[23] http://nosqlday.it