Html5 - Un anno dopo
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Html5 - Un anno dopo

on

  • 2,815 views

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

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.

Statistics

Views

Total Views
2,815
Views on SlideShare
2,739
Embed Views
76

Actions

Likes
5
Downloads
39
Comments
1

1 Embed 76

http://wgd2013.wikispaces.com 76

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 - Un anno dopo Presentation Transcript

  • 1. HTML5Un 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. W3CWHATWGSTANDARDHTML5 Rif: [1] [2] [3]
  • 5. HTML5
  • 6. HTML5CSS3 GEOFont-embeddingJavascript “magics”Local-databaseWebworkers Websockets
  • 7. HTML5Open Web StackNEWT 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 browserCanvasAudio/Video * * * *StorageOfflineWorkers/SocketsForm 2.0Geolocation Rif: [6] [7] [8] [9] [10]
  • 13. +1 ANNO
  • 14. 5Come già previstoHTML5 è subitodiventata unabuzzword…
  • 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. FrameworksMulti-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 avanzatoProssimi 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> DOPOPRIMA <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“Its taken 20 years because theunderlying standards had to evolvefrom the proprietary Mac and Windowsplatforms. But they have both adoptedHTML5 as a future direction.So that means in future a lot of appswill be running in HTML5 in bothmobile 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/