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.

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

122. CONCLUSIІONIІ
62 / 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