Html5 - Un anno dopo

Cristiano Rastelli

➜ Freelance (“Area Web”)

➜ Developer & Designer
(da oltre un decennio)

➜ Web + App UI + Mobile

➜ Passionate of UX, AI, Agile

W3C
WHATWG
STANDARD

HTML5
Rif: [1] [2] [3]

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

HTML5
Open Web Stack

NEWT
Rif: [4]

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]

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]

E molto altro ancora:
• drag&drop
• postMessage
• browser history
• editing nativo
• registerProtocolHandler
• querySelectorAll

Rif: [5]

Supporto da parte dei browser

Canvas
Audio/Video * * * *
Storage
Offline
Workers/Sockets
Form 2.0
Geolocation
Rif: [6] [7] [8] [9] [10]

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

Ci permette di “parlarne”.

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”
Google Trends per “HTML5”

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

Microsoft

Rif: [20]

World Wide Web Consortium

Rif: [11]

Frameworks
Multi-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/

No, non ho detto “polisucco”

Modernizr

http://www.modernizr.com/

HTML5 Shiv

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

HTML5 Boilerplate

http://html5boilerplate.com/

Initializr

http://initializr.com/

Baker

http://bakerframework.com/

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/

L’effetto iPad (1)

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

L’effetto iPad (2)

web-application
<html5>

browser (player)

native-application (shell)

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

Molteplicità + Compatibilità

Multi-Browser
Multi-Platform
Multi-Device

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

“Divitis”

Rif: [21] [22]

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

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

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

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]

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.

Grazie per l’attenzione.

Cristiano Rastelli
www.didoo.net

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/

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/

Html5 - Un anno dopo

More Related Content

Viewers also liked (20)

Similar to Html5 - Un anno dopo (20)

More from Cristiano Rastelli (20)

Html5 - Un anno dopo