HTML5 for Mobile
11 likes1,374 views
Il documento discute l'uso di HTML5 per la creazione di applicazioni web e mobile, evidenziando la sua importanza nella definizione del 'web mobile'. Viene analizzato come HTML5 possa migliorare l'esperienza utente, grazie a nuove funzionalità, semplificazione dello sviluppo e capacità di gestire contenuti specifici per dispositivi mobili. Inoltre, invita a considerare attentamente le strategie e tecnologie da adottare nel design di siti web mobile.
HTML5 for Mobile
- 1. HTML5 FOR MOBIІLE CHIMERA o REALTÀ? Cristiano Rastelli
- 2. Cristiano Rastelli ➜ Freelance (“Area Web”) ➜ Developer & Designer (da oltre un decennio) ➜ Web + App UI + Mobile ➜ Passionate of UX, AI, Agile www.didoo.net @areaweb 2 / 65
- 3. Che ci faccio io qui? http://www.flickr.com/photos/megan_russell/1444187600/ 3 / 65
- 4. Cosa facevo ieri a quest’ora? X / 65
- 5. WEB & MOBIІLE 4 / 65
- 6. Osservaziіone #1 5 / 65
- 7. Definizione di “web mobile” mobile non-mobile 6 / 65
- 8. Definizione di “web mobile” mobile non-mobile ??? 6 / 65
- 9. Definizione di “web mobile” 7 / 65
- 10. Definizione di “web mobile” “Tablet Survey - April 2011” - AdMob for Google 8 / 65
- 11. Definizione di “web mobile” NIELSEN - Q1 2011 Mobile Connected Device Report Watching TV Lying in bed In the bathroom With friends/family Waiting for something Shopping Attending a meeting/class Commuting Other 0 6 12 18 24 30 http://blog.nielsen.com/nielsenwire/?p=27702 9 / 65
- 12. Definizione di “web mobile” 10 / 65
- 13. Definizione di “web mobile” "The Mobile Movement: Understanding Smartphone Consumers" - GoogleMobileAds http://www.youtube.com/watch?v=CjUcq_E4I-s 11 / 65
- 14. Definizione di “web mobile” Ma allora è mobile! 12 / 65
- 15. Osservaziіone #2 13 / 65
- 16. Definizione di “web mobile” http://iphonetowp7andback.didoo.net/ 14 / 65
- 17. Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- 18. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- 19. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- 20. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g 15 / 65
- 21. Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- 22. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- 23. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- 24. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg 16 / 65
- 25. Definizione di “web mobile” Internet Explorer 7 CSS2 (with paged-media) + CSS3 Selectors JavaScript 1.1 + DOM2 + AJAX 17 / 65
- 26. HTML5 CRASH COURSE 18 / 65
- 28. Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML5 20 / 65
- 29. Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML5 20 / 65
- 30. Cosa si intende con “HTML5” HTML5 CSS3 GEO Font-embeddiіng JЈavascriіpt “magiіcs” Local-database Webworkers Websockets 21 / 65
- 31. La parola magica del momento HTML5 22 / 65
- 32. HTML5 IІN BREVE 23 / 65
- 33. 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 24 / 65
- 34. In due minuti... Introduzione di nuove API per semplificare lo sviluppo di applicazioni web: • disegno vettoriale/bitmap su canvas (bidimensionale) • riproduzione audio/video integrata • gestione di storage di dati locali • geo-localizzazione dell’utente • gestione dello stato offline delle pagine web • e molto altro ancora... 25 / 65
- 35. MOBILE THE BONNIІE SIІTUATIІON 26 / 65
- 36. HTML5 for “mobile”? 27 / 65
- 37. HTML5 for “mobile”! • geo-localizzazione dell’utente • gestione dello stato offline delle pagine web • gestione di storage di dati locali • disegno vettoriale/bitmap su canvas (bidimensionale) • cross-browser + cross-platform + cross-device • “write once, run anywhere” • semplicità dei linguaggi + bassa curva di apprendimento • interazione con “gesture” (eventi touch) 28 / 65
- 38. HTML5 Mobile Boilerplate 29 / 65
- 39. Ottimizzazione siti “mobili” 30 / 65
- 40. Vere “applicazioni” web-based http://37signals.com/svn/posts/2761-launch-basecamp-mobile 31 / 65
- 41. Gamification of HTML5 32 / 65
- 42. Angry Birds for Chrome 33 / 65
- 43. Browser mobili sono i più evoluti http://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-7925215 34 / 65
- 44. Un mondo difficile... X / 65
- 45. Un mondo difficile... o forse no? X / 65
- 46. In continua ebollizione... 35 / 65
- 47. In continua ebollizione... Continua corsa in avanti dei browser-vendor 35 / 65
- 48. In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs 35 / 65
- 49. In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs Continua frammentazione delle feature supportate 35 / 65
- 50. ... come piovessero dal cielo! 36 / 65
- 51. Confini sempre meno delimitati 37 / 65
- 52. Confini sempre meno delimitati 37 / 65
- 53. “Hortus conclusus”? Non più... 38 / 65
- 54. Equilibrio (molto) precario 39 / 65
- 55. HTML5 is the new Flash? 40 / 65
- 56. FOR REAL 41 / 65
- 57. 42 / 65
- 58. X / 65
- 59. X / 65
- 60. X / 65
- 61. X / 65
- 62. X / 65
- 63. X / 65
- 64. 43 / 65
- 65. X / 65
- 66. X / 65
- 67. X / 65
- 68. X / 65
- 69. X / 65
- 70. Quindi è già un sito “mobile”! 44 / 65
- 71. Quali contenuti “in mobilità”? • donazione con paypal • sede hotel • segnalazione sui social • pausa pranzo • header grafico/visuale • pernottamenti • elenco degli sponsor • mappa punti di interesse • come arrivare • introduzione conferenza • programma della giornata • iscrizione • presentazioni dei relatori • donazione con paypal • footer loghi/credits 45 / 65
- 72. Quali contenuti “in mobilità”? • donazione con paypal • sede hotel • segnalazione sui social • pausa pranzo • header grafico/visuale • pernottamenti • elenco degli sponsor • mappa punti di interesse • come arrivare • introduzione conferenza • programma della giornata • iscrizione • presentazioni dei relatori • donazione con paypal • footer loghi/credits 45 / 65
- 73. Quali contenuti “in mobilità”? ✓ header grafico/visuale ✓ programma della giornata ✓ presentazioni dei relatori ✓ mappa punti di interesse ✓ footer loghi/credits 46 / 65
- 74. Una versione veramente “mobile” • Utilizzare il codice esistente (HTML, CSS e JS) senza doverlo duplicare e creare una seconda versione del sito ? • Limitare i contenuti visualizzati alle sole informazioni interessanti e/o significative rispetto al contesto d’uso. • Sfruttare le peculiarità del device per aggiungere al sito funzioni/interazioni tipiche del contesto “mobile” 47 / 65
- 75. LET’S CODE! 48 / 65
- 76. IІn the begiіnniіng... 49 / 65
- 77. Struttura del sito web HTML • index.html CSS • style.css JЈS • jquery.min.js (framework) • jquery.scroll.js (smooth scrolling) • html5.js (per IE<9) • interaction.js 50 / 65
- 78. X / 65
- 79. X / 65
- 80. X / 65
- 81. X / 65
- 82. X / 65
- 83. X / 65
- 84. X / 65
- 85. X / 65
- 86. Step #1 51 / 65
- 87. “Mobilizzazione” HTML • Aggiungere meta-tag per dispositivi mobile • Aggiungere script per gestione eventi “touch” • Aggiungere css per adattamento a schermo 320x480 px CSS • Adattare elementi a schermo 320x480 px • Nascondere contenuti non necessari JЈS • Gestire il caso “mobile” usando user-agent detection 52 / 65
- 88. X / 65
- 89. X / 65
- 90. X / 65
- 91. X / 65
- 92. Step #2 53 / 65
- 93. “Inception” HTML • Togliere script esterni per evitare chiamate inutili • Gestire meglio la visualizzazione verticale dei contenuti CSS • Evitare eccessivo scroll verticale • Re-impaginare elenchi programma/relatori JЈS • Inserire via dom-manipulation gli script esterni • Rimuovere dal dom gli elementi non necessari 54 / 65
- 94. X / 65
- 95. X / 65
- 96. X / 65
- 97. X / 65
- 98. Step #3 55 / 65
- 99. “Adaptation” HTML • Gestire l’elenco dei POI come lista <ul> • Aggiungere meta-informazioni al programma CSS • Evidenziare il talk in corso nel programma • Impaginare elenco POI JЈS • Gestire toggling degli elementi per contenuti aggiuntivi • Rimuovere link di tipo “ancora” all’interno della pagina 56 / 65
- 100. X / 65
- 101. X / 65
- 102. X / 65
- 103. X / 65
- 104. X / 65
- 105. X / 65
- 106. X / 65
- 107. X / 65
- 108. At last... 57 / 65
- 109. “Orientation” CSS • Gestire i diversi stati di orientamento del device JЈS • Implementare una soluzione fallback per simulare il comportamento di media-orientation con iOS 3.2 • Gestire geolocalizzazione dei POI 58 / 65
- 110. X / 65
- 111. X / 65
- 112. X / 65
- 113. X / 65
- 114. Landscape (90°) Portrait Landscape (-90°) X / 65
- 115. What about Androiіd ? 59 / 65
- 116. X / 65
- 117. X / 65
- 118. ... and Wiіn Phone 7 ? 60 / 65
- 119. WP7 = Internet Explorer 7 • CSS3 Media Queries • CSS3 Media Orientation • onOrientationChange event • gradients, rounded corners, box/text shadows, selectors, transitions, transformations • @font-face http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 61 / 65
- 120. WP7 = Internet Explorer 7 • CSS3 Media Queries • CSS3 Media Orientation • onOrientationChange event • gradients, rounded corners, box/text shadows, selectors, transitions, transformations • @font-face http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 61 / 65
- 121. WP7 = Internet Explorer 7 MANGO = IE9 CSS3 Media Queries • • CSS3 Media Orientation • onOrientationChange event • gradients, rounded corners, box/text shadows, selectors, transitions, transformations • @font-face http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 61 / 65
- 123. Take-away points ➜ Capite con attenzione quali strategie/tecnologie volete adottare per lo sviluppo di un sito “mobile”. ➜ Valutate se davvero vi occorre un secondo sito web. ➜ Provate a sfruttare le possibilità, offerte dall’HTML5, in modo intelligente e non convenzionale. ➜ Avete il DOM. Usatelo! Giocateci!! Manipolatelo!!! 63 / 65
- 124. Grazie per l’attenzione. Cristiano Rastelli www.didoo.net @areaweb