HTML5 for Mobile
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 for Mobile

on

  • 3,182 views

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

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.

Statistics

Views

Total Views
3,182
Views on SlideShare
2,998
Embed Views
184

Actions

Likes
10
Downloads
83
Comments
1

5 Embeds 184

http://www.whymca.org 178
http://www.geekagenda.it 3
http://paper.li 1
http://www.linkedin.com 1
https://www.linkedin.com 1

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…
  • Slide meravigliose. Voto: 10.
    Mi spiace di esseremi perso lo speech live. Spero di poterne vedere la versione registrata.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 for Mobile Presentation Transcript

  • 1. HTML5FOR MOBIІLECHIMERA 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 @areaweb2 / 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ІLE4 / 65
  • 6. Osservaziіone #15 / 65
  • 7. Definizione di “web mobile” mobile non-mobile6 / 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 Google8 / 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=277029 / 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-s11 / 65
  • 14. Definizione di “web mobile” Ma allora è mobile!12 / 65
  • 15. Osservaziіone #213 / 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 g15 / 65
  • 18. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65
  • 19. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65
  • 20. Definizione di “web mobile” Dimensioni: 1x0.7x1.2 cm Peso: 162 g15 / 65
  • 21. Definizione di “web mobile” Questo è web? Questo è mobile? Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  • 22. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  • 23. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  • 24. Definizione di “web mobile” Dimensioni: 1x0.7x1.5 metri Peso: 245 kg16 / 65
  • 25. Definizione di “web mobile” Internet Explorer 7 CSS2 (with paged-media) + CSS3 Selectors JavaScript 1.1 + DOM2 + AJAX17 / 65
  • 26. HTML5 CRASH COURSE18 / 65
  • 27. Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML520 / 65
  • 28. Cosa si intende con “HTML5” W3C WHATWG STANDARD HTML520 / 65
  • 29. Cosa si intende con “HTML5” HTML5 CSS3 GEO Font-embeddiіng JЈavascriіpt “magiіcs” Local-database Webworkers Websockets21 / 65
  • 30. La parola magica del momento HTML522 / 65
  • 31. HTML5 IІN BREVE23 / 65
  • 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. 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. MOBILE THE BONNIІE SIІTUATIІON26 / 65
  • 35. HTML5 for “mobile”?27 / 65
  • 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. HTML5 Mobile Boilerplate29 / 65
  • 38. Ottimizzazione siti “mobili”30 / 65
  • 39. Vere “applicazioni” web-based http://37signals.com/svn/posts/2761-launch-basecamp-mobile31 / 65
  • 40. Gamification of HTML532 / 65
  • 41. Angry Birds for Chrome33 / 65
  • 42. Browser mobili sono i più evoluti http://www.slideshare.net/jamesgpearce/building-cross-platform-mobile-web-apps-792521534 / 65
  • 43. Un mondo difficile...X / 65
  • 44. Un mondo difficile... o forse no?X / 65
  • 45. In continua ebollizione...35 / 65
  • 46. In continua ebollizione... Continua corsa in avanti dei browser-vendor35 / 65
  • 47. In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs35 / 65
  • 48. In continua ebollizione... Continua corsa in avanti dei browser-vendor Continua proliferazione di draft & specs Continua frammentazione delle feature supportate35 / 65
  • 49. ... come piovessero dal cielo!36 / 65
  • 50. Confini sempre meno delimitati37 / 65
  • 51. Confini sempre meno delimitati37 / 65
  • 52. “Hortus conclusus”? Non più...38 / 65
  • 53. Equilibrio (molto) precario39 / 65
  • 54. HTML5 is the new Flash?40 / 65
  • 55. FOR REAL41 / 65
  • 56. 42 / 65
  • 57. X / 65
  • 58. X / 65
  • 59. X / 65
  • 60. X / 65
  • 61. X / 65
  • 62. X / 65
  • 63. 43 / 65
  • 64. X / 65
  • 65. X / 65
  • 66. X / 65
  • 67. X / 65
  • 68. X / 65
  • 69. Quindi è già un sito “mobile”!44 / 65
  • 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. 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. Quali contenuti “in mobilità”? ✓ header grafico/visuale ✓ programma della giornata ✓ presentazioni dei relatori ✓ mappa punti di interesse ✓ footer loghi/credits46 / 65
  • 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. LET’S CODE!48 / 65
  • 75. IІn the begiіnniіng...49 / 65
  • 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. X / 65
  • 78. X / 65
  • 79. X / 65
  • 80. X / 65
  • 81. X / 65
  • 82. X / 65
  • 83. X / 65
  • 84. X / 65
  • 85. Step #151 / 65
  • 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. X / 65
  • 88. X / 65
  • 89. X / 65
  • 90. X / 65
  • 91. Step #253 / 65
  • 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. X / 65
  • 94. X / 65
  • 95. X / 65
  • 96. X / 65
  • 97. Step #355 / 65
  • 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. X / 65
  • 100. X / 65
  • 101. X / 65
  • 102. X / 65
  • 103. X / 65
  • 104. X / 65
  • 105. X / 65
  • 106. X / 65
  • 107. At last...57 / 65
  • 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. X / 65
  • 110. X / 65
  • 111. X / 65
  • 112. X / 65
  • 113. Landscape (90°) Portrait Landscape (-90°)X / 65
  • 114. What about Androiіd ?59 / 65
  • 115. X / 65
  • 116. X / 65
  • 117. ... and Wiіn Phone 7 ?60 / 65
  • 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. 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. 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. CONCLUSIІONIІ62 / 65
  • 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. Grazie per l’attenzione. Cristiano Rastelli www.didoo.net @areaweb