HTML5 for Mobile

3,175 views

Published on

In questa presentazione condivido la mia "esperienza sul campo" nel prendere un sito web (www.nosqlday.it) inizialmente realizzato in HTML5+CSS3 ma con il solo target "desktop", e renderlo non solo compatibile o ottimizzato, ma addirittura "speciale" per la visualizzazione su dispositivi mobili.

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
3,175
On SlideShare
0
From Embeds
0
Number of Embeds
210
Actions
Shares
0
Downloads
88
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

HTML5 for Mobile

  1. 1. HTML5FOR MOBIІLECHIMERA o REALTÀ?Cristiano Rastelli
  2. 2. Cristiano Rastelli ➜ Freelance (“Area Web”) ➜ Developer & Designer (da oltre un decennio) ➜ Web + App UI + Mobile ➜ Passionate of UX, AI, Agile www.didoo.net @areaweb2 / 65
  3. 3. Che ci faccio io qui? http://www.flickr.com/photos/megan_russell/1444187600/3 / 65
  4. 4. Cosa facevo ieri a quest’ora?X / 65
  5. 5. WEB & MOBIІLE4 / 65
  6. 6. Osservaziіone #15 / 65
  7. 7. Definizione di “web mobile” mobile non-mobile6 / 65
  8. 8. Definizione di “web mobile” mobile non-mobile ???6 / 65
  9. 9. Definizione di “web mobile”7 / 65
  10. 10. Definizione di “web mobile” “Tablet Survey - April 2011” - AdMob for Google8 / 65
  11. 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=277029 / 65
  12. 12. Definizione di “web mobile”10 / 65
  13. 13. Definizione di “web mobile” "The Mobile Movement: Understanding Smartphone Consumers" - GoogleMobileAds http://www.youtube.com/watch?v=CjUcq_E4I-s11 / 65
  14. 14. Definizione di “web mobile” Ma allora è mobile!12 / 65
  15. 15. Osservaziіone #213 / 65
  16. 16. Definizione di “web mobile” http://iphonetowp7andback.didoo.net/14 / 65
  17. 17. Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65
  18. 18. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65
  19. 19. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65
  20. 20. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65
  21. 21. Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  22. 22. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  23. 23. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  24. 24. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  25. 25. Definizione di “web mobile” Internet Explorer 7 CSS2 (with paged-media) + CSS3 Selectors JavaScript 1.1 + DOM2 + AJAX17 / 65
  26. 26. HTML5 CRASH COURSE18 / 65
  27. 27. Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML520 / 65
  28. 28. Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML520 / 65
  29. 29. Cosa si intende con “HTML5” HTML5 CSS3 GEO Font-embeddiіng JЈavascriіpt “magiіcs” Local-database Webworkers Websockets21 / 65
  30. 30. La parola magica del momento HTML522 / 65
  31. 31. HTML5 IІN BREVE23 / 65
  32. 32. 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 sintassi24 / 65
  33. 33. 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
  34. 34. MOBILE THE BONNIІE SIІTUATIІON26 / 65
  35. 35. HTML5 for “mobile”?27 / 65
  36. 36. 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
  37. 37. HTML5 Mobile Boilerplate29 / 65
  38. 38. Ottimizzazione siti “mobili”30 / 65
  39. 39. Vere “applicazioni” web-based http://37signals.com/svn/posts/2761-launch-basecamp-mobile31 / 65
  40. 40. Gamification of HTML532 / 65
  41. 41. Angry Birds for Chrome33 / 65
  42. 42. Browser mobili sono i più evoluti http://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-792521534 / 65
  43. 43. Un mondo difficile...X / 65
  44. 44. Un mondo difficile... o forse no?X / 65
  45. 45. In continua ebollizione...35 / 65
  46. 46. In continua ebollizione... Continua corsa in avanti dei browser-vendor35 / 65
  47. 47. In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs35 / 65
  48. 48. In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs Continua frammentazione delle feature supportate35 / 65
  49. 49. ... come piovessero dal cielo!36 / 65
  50. 50. Confini sempre meno delimitati37 / 65
  51. 51. Confini sempre meno delimitati37 / 65
  52. 52. “Hortus conclusus”? Non più...38 / 65
  53. 53. Equilibrio (molto) precario39 / 65
  54. 54. HTML5 is the new Flash?40 / 65
  55. 55. FOR REAL41 / 65
  56. 56. 42 / 65
  57. 57. X / 65
  58. 58. X / 65
  59. 59. X / 65
  60. 60. X / 65
  61. 61. X / 65
  62. 62. X / 65
  63. 63. 43 / 65
  64. 64. X / 65
  65. 65. X / 65
  66. 66. X / 65
  67. 67. X / 65
  68. 68. X / 65
  69. 69. Quindi è già un sito “mobile”!44 / 65
  70. 70. 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/credits45 / 65
  71. 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/credits45 / 65
  72. 72. Quali contenuti “in mobilità”? ✓ header grafico/visuale ✓ programma della giornata ✓ presentazioni dei relatori ✓ mappa punti di interesse ✓ footer loghi/credits46 / 65
  73. 73. 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
  74. 74. LET’S CODE!48 / 65
  75. 75. IІn the begiіnniіng...49 / 65
  76. 76. 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.js50 / 65
  77. 77. X / 65
  78. 78. X / 65
  79. 79. X / 65
  80. 80. X / 65
  81. 81. X / 65
  82. 82. X / 65
  83. 83. X / 65
  84. 84. X / 65
  85. 85. Step #151 / 65
  86. 86. “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 detection52 / 65
  87. 87. X / 65
  88. 88. X / 65
  89. 89. X / 65
  90. 90. X / 65
  91. 91. Step #253 / 65
  92. 92. “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 necessari54 / 65
  93. 93. X / 65
  94. 94. X / 65
  95. 95. X / 65
  96. 96. X / 65
  97. 97. Step #355 / 65
  98. 98. “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 pagina56 / 65
  99. 99. X / 65
  100. 100. X / 65
  101. 101. X / 65
  102. 102. X / 65
  103. 103. X / 65
  104. 104. X / 65
  105. 105. X / 65
  106. 106. X / 65
  107. 107. At last...57 / 65
  108. 108. “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 POI58 / 65
  109. 109. X / 65
  110. 110. X / 65
  111. 111. X / 65
  112. 112. X / 65
  113. 113. Landscape (90°) Portrait Landscape (-90°)X / 65
  114. 114. What about Androiіd ?59 / 65
  115. 115. X / 65
  116. 116. X / 65
  117. 117. ... and Wiіn Phone 7 ?60 / 65
  118. 118. 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.aspx61 / 65
  119. 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.aspx61 / 65
  120. 120. 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.aspx61 / 65
  121. 121. CONCLUSIІONIІ62 / 65
  122. 122. 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
  123. 123. Grazie per l’attenzione. Cristiano Rastelli www.didoo.net @areaweb

×