Html5 - Un anno dopo
88
HTML5 Un anno dopo...
-
Upload
cristiano-rastelli -
Category
Technology
-
view
140 -
download
3
description
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.
Transcript of 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
