Successfully reported this slideshow.

Html5 - Un anno dopo

2,865 views

Published on

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.

Published in: Technology

Html5 - Un anno dopo

  1. 1. HTML5Un anno dopo...
  2. 2. Cristiano Rastelli ➜ Freelance (“Area Web”) ➜ Developer & Designer (da oltre un decennio) ➜ Web + App UI + Mobile ➜ Passionate of UX, AI, Agile
  3. 3. DEFINIZIONE
  4. 4. W3CWHATWGSTANDARDHTML5 Rif: [1] [2] [3]
  5. 5. HTML5
  6. 6. HTML5CSS3 GEOFont-embeddingJavascript “magics”Local-databaseWebworkers Websockets
  7. 7. HTML5Open Web StackNEWT Rif: [4]
  8. 8. BREVEMENTE
  9. 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. 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. 11. HTML5 in due minuti... E molto altro ancora: • drag&drop • postMessage • browser history • editing nativo • registerProtocolHandler • querySelectorAll Rif: [5]
  12. 12. Supporto da parte dei browserCanvasAudio/Video * * * *StorageOfflineWorkers/SocketsForm 2.0Geolocation Rif: [6] [7] [8] [9] [10]
  13. 13. +1 ANNO
  14. 14. 5Come già previstoHTML5 è subitodiventata unabuzzword…
  15. 15. Ci permette di “parlarne”.
  16. 16. Ci permette di “vendere”.
  17. 17. Ci permette di “bullarci”
  18. 18. Rif: [11] [12] [13]
  19. 19. Contrordine, compagni!HTML5
  20. 20. Contrordine, compagni! HTML
  21. 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. 22. Flash is (almost) dead Rif: [17]
  23. 23. HTML5 è ormai “mainstream” Google Trends per “HTML5” http://www.google.com/trends?q=html5
  24. 24. Apple Rif: [18]
  25. 25. Google Rif: [19]
  26. 26. Microsoft Rif: [20]
  27. 27. Microsoft Rif: [20]
  28. 28. World Wide Web Consortium Rif: [11]
  29. 29. Adobe
  30. 30. Adobe
  31. 31. HTML5 “toolboxes”
  32. 32. FrameworksMulti-device & Multi-platform
  33. 33. SproutCore http://www.sproutcore.com/
  34. 34. The-M-Project http://www.the-m-project.org/
  35. 35. Appcelerator (a.k.a. Titanium) http://www.appcelerator.com
  36. 36. PhoneGap http://www.phonegap.com/
  37. 37. Sencha Touch http://www.sencha.com/products/touch/
  38. 38. Jo http://joapp.com/
  39. 39. Jo http://joapp.com/
  40. 40. Polyfills
  41. 41. No, non ho detto “polisucco”
  42. 42. Modernizr http://www.modernizr.com/
  43. 43. HTML5 Shiv http://code.google.com/p/html5shiv/
  44. 44. Boilerplates
  45. 45. HTML5 Boilerplate http://html5boilerplate.com/
  46. 46. Initializr http://initializr.com/
  47. 47. Baker http://bakerframework.com/
  48. 48. Font-services
  49. 49. Typekit http://typekit.com/
  50. 50. Fontdeck http://fontdeck.com/
  51. 51. Fontspring http://www.fontspring.com/fontface
  52. 52. Kernest http://kernest.com/
  53. 53. Typotheque http://www.typotheque.com/webfonts
  54. 54. Fonts.com http://webfonts.fonts.com/
  55. 55. FontShop http://www.fontshop.com
  56. 56. The League of Moveable Type http://www.theleagueofmoveabletype.com/
  57. 57. ESPERIENZA
  58. 58. L’effetto iPad
  59. 59. L’effetto iPad (1) Se non si vede oppure non funziona su iPad, non esiste.
  60. 60. L’effetto iPad (2) web-application <html5> browser (player) native-application (shell)
  61. 61. iTunes Store è in HTML!
  62. 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. 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. 64. Requisiti di progetto
  65. 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. 66. Confini ben delimitati
  67. 67. Molteplicità + Compatibilità Multi-Browser Multi-Platform Multi-Device
  68. 68. “Hortus conclusus”
  69. 69. CONCRETAMENTE
  70. 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. 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. 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. 73. “Divitis” Rif: [21] [22]
  74. 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. 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. 76. CSS3 • @font-face (font-embedding) • @media-orientation (iPad/iPhone) • multiple backgrounds • gradients • rounded corners • box & text shadows • alpha colors (rgba) • transitions & transformations
  77. 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. 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. 79. @media-orientation
  80. 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. 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. 82. NoSQL Day (Brescia - 25 marzo 2011) Rif: [23]
  83. 83. PREVISIONI
  84. 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. 85. Grazie per l’attenzione. Cristiano Rastelli www.didoo.net
  86. 86. REFERENZE
  87. 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. 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/

×