Download - Html5 - Un anno dopo
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]
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