jQuery Mobile presentation in Zurich, Switzerland

1. max firtman
@firt firt.mobi
Zurich, Oct 21 2011
Tuesday, November 1, 11

2. Danke
Tuesday, November 1, 11

3. http://akosma.com http://invisible.ch
@akosma @jcfischer
Tuesday, November 1, 11

4. Learn more?
Tuesday, November 1, 11

5. http://mobile-training.ch
Tuesday, November 1, 11

6. m b er
ove
17 .N
15 .-
http://mobile-training.ch
Tuesday, November 1, 11

7. m b er
ove
17 .N
15 .-
/op en
r/ch
d“ o
B ir 1400
„ Early HF
C
http://mobile-training.ch
Tuesday, November 1, 11

8. who am I?
mobile+web developer
mobilexweb.com blog
@firt
Tuesday, November 1, 11

9. where?
Tuesday, November 1, 11

10. where?
buenos aires ~ argentina
Tuesday, November 1, 11

11. where?
buenos aires ~ argentina
patagonia
football
meat & wine
tango
Tuesday, November 1, 11

12. books
Image from my house
Tuesday, November 1, 11

13. Tuesday, November 1, 11

14. Using the Latest Today
Mobile
HTML5
coming soon...
Estelle Weyl
& Maximiliano Firtman also by @estellevw
Tuesday, November 1, 11

15. Tuesday, November 1, 11

16. you have
a question for me
Tuesday, November 1, 11

17. the answer is no
Tuesday, November 1, 11

18. why mobile?
Tuesday, November 1, 11

19. 2015 is coming...
Tuesday, November 1, 11

20. Tuesday, November 1, 11

21. mobile devices are our
flying cars
Tuesday, November 1, 11

22. mobile is more about
users
Tuesday, November 1, 11

23. mobile
Tuesday, November 1, 11

24. mobile
‣ absolutely personal
Tuesday, November 1, 11

25. mobile
‣ absolutely personal
‣ +5 billions
Tuesday, November 1, 11

26. mobile
‣ absolutely personal
‣ +5 billions
‣ will be the 1st browsing device...
soon
Tuesday, November 1, 11

27. mobile
‣ absolutely personal
‣ +5 billions
‣ will be the 1st browsing device...
soon
‣ make us focus
Tuesday, November 1, 11

28. mobile
‣ absolutely personal
‣ +5 billions
‣ will be the 1st browsing device...
soon
‣ make us focus
‣ read our context...
Tuesday, November 1, 11

29. mobile
‣ absolutely personal
‣ +5 billions
‣ will be the 1st browsing device...
soon
‣ make us focus
‣ read our context...
‣ ... always...
Tuesday, November 1, 11

30. mobile
‣ absolutely personal
‣ +5 billions
‣ will be the 1st browsing device...
soon
‣ make us focus
‣ read our context...
‣ ... always...
‣ ... and everywhere.
Tuesday, November 1, 11

31. then... what is the
problem?
Tuesday, November 1, 11

32. mobile is a
minefield
Photo by World of Good (Flickr)
Malvinas / Falklands Islands
Tuesday, November 1, 11

33. lots of questions
Photo by wayneandwax (Flickr)
Tuesday, November 1, 11

34. we need to learn
lots of questions
Tuesday, November 1, 11

35. lots of platforms
Tuesday, November 1, 11

36. mobile web appears
Tuesday, November 1, 11

37. native
vs
web
Tuesday, November 1, 11

38. WAIT!
Tuesday, November 1, 11

39. Are you sure?
Tuesday, November 1, 11

40. native code
vs
javascript
Tuesday, November 1, 11

41. browser
vs
installed apps
& stores
Tuesday, November 1, 11

42. lack of definitions
Tuesday, November 1, 11

43. when we say mobile web
Tuesday, November 1, 11

44. when we say mobile web
from a developer’s
perspective it’s using HTML,
CSS and JavaScript to
develop mobile apps
Tuesday, November 1, 11

45. when we say mobile web
from a developer’s
perspective it’s using HTML,
CSS and JavaScript to
develop mobile apps
(browser or installed)
Tuesday, November 1, 11

46. what are the
problems with
mobile web?
Tuesday, November 1, 11

47. we are second class
producers
Tuesday, November 1, 11

48. Testing & debugging
Tuesday, November 1, 11

49. Standards!
Tuesday, November 1, 11

50. Photo by Ben Millett (Flickr)
Tuesday, November 1, 11

51. Tuesday, November 1, 11

52. Are you
sure?
Photo by Ricky David (Flickr)
Tuesday, November 1, 11

53. What is ?
Tuesday, November 1, 11

54. html5
Tuesday, November 1, 11

55. html5
‣ w3c standards (all in draft)
Tuesday, November 1, 11

56. html5
‣ w3c standards (all in draft)
‣ some are other w3c standards
Tuesday, November 1, 11

57. html5
‣ w3c standards (all in draft)
‣ some are other w3c standards
‣ de-facto standards
Tuesday, November 1, 11

58. html5
‣ w3c standards (all in draft)
‣ some are other w3c standards
‣ de-facto standards
‣ w3c ex-standards
Tuesday, November 1, 11

59. html5
‣ w3c standards (all in draft)
‣ some are other w3c standards
‣ de-facto standards
‣ w3c ex-standards
‣ everything “new” on the web
Tuesday, November 1, 11

60. mobile browsers
Tuesday, November 1, 11

61. mobile browsers
‣ too many
Tuesday, November 1, 11

62. mobile browsers
‣ too many
‣ (some) too limited
Tuesday, November 1, 11

63. mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
Tuesday, November 1, 11

64. mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (some) proxy based
Tuesday, November 1, 11

65. mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (some) proxy based
‣ (most) without documentation
Tuesday, November 1, 11

66. mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (some) proxy based
‣ (most) without documentation
‣ (most) without a name
Tuesday, November 1, 11

67. mobile browsers
‣ too many
‣ (some) too limited
‣ (some) too innovative
‣ (some) proxy based
‣ (most) without documentation
‣ (most) without a name
‣ (most) without debugging tools
Tuesday, November 1, 11

68. mobile browsers
Tuesday, November 1, 11

69. mobile browsers
‣ (some) focus-based
Tuesday, November 1, 11

70. mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
Tuesday, November 1, 11

71. mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
‣ (some) touch-based
Tuesday, November 1, 11

72. mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
‣ (some) touch-based
‣ (some) multitouch-based
Tuesday, November 1, 11

73. mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
‣ (some) touch-based
‣ (some) multitouch-based
‣ (some) with zooming support
Tuesday, November 1, 11

74. mobile browsers
‣ (some) focus-based
‣ (some) cursor-based
‣ (some) touch-based
‣ (some) multitouch-based
‣ (some) with zooming support
‣ (most) unknown for web devs
Tuesday, November 1, 11

75. jQuery mobile
Tuesday, November 1, 11

76. what is ... ?
Tuesday, November 1, 11

77. what is not ...?
Tuesday, November 1, 11

78. jQuery mobile is not...
Tuesday, November 1, 11

79. jQuery mobile is not...
‣ alternative mobile jQuery framework
Tuesday, November 1, 11

80. jQuery mobile is not...
‣ alternative mobile jQuery framework
‣ SDK for native/hybrid compilation
Tuesday, November 1, 11

81. jQuery mobile is not...
‣ alternative mobile jQuery framework
‣ SDK for native/hybrid compilation
‣ a framework for doing all using JS
Tuesday, November 1, 11

82. jQuery mobile is not...
‣ alternative mobile jQuery framework
‣ SDK for native/hybrid compilation
‣ a framework for doing all using JS
‣ the solution for every app
Tuesday, November 1, 11

83. jQuery mobile is...
Tuesday, November 1, 11

84. jQuery mobile is...
a cross-platform UI
framework for creating
webapps for touch-enabled
smartphones and tablets
Tuesday, November 1, 11

85. webapp?
Tuesday, November 1, 11

86. a webapp can be...
Tuesday, November 1, 11

87. a webapp can be...
‣ a website or service based on the
browser
Tuesday, November 1, 11

88. a webapp can be...
‣ a website or service based on the
browser
‣ a full-screen (chromeless) app on the
browser
Tuesday, November 1, 11

89. a webapp can be...
‣ a website or service based on the
browser
‣ a full-screen (chromeless) app on the
browser
‣ a hybrid -native app through stores-
Tuesday, November 1, 11

90. why jQuery mobile?
Tuesday, November 1, 11

91. Tuesday, November 1, 11

92. Tuesday, November 1, 11

93. typeof html5 != boolean
Tuesday, November 1, 11

94. features
Tuesday, November 1, 11

95. features
Tuesday, November 1, 11

96. features
‣ non-intrusive semantic html5 code
Tuesday, November 1, 11

97. features
‣ non-intrusive semantic html5 code
‣ open sourced
Tuesday, November 1, 11

98. features
‣ non-intrusive semantic html5 code
‣ open sourced
‣ lightweight
Tuesday, November 1, 11

99. features
‣ non-intrusive semantic html5 code
‣ open sourced
‣ lightweight
‣ multiplatform with progressive
enhancement
Tuesday, November 1, 11

100. features
‣ non-intrusive semantic html5 code
‣ open sourced
‣ lightweight
‣ multiplatform with progressive
enhancement
‣ accessibility support
Tuesday, November 1, 11

101. features
‣ non-intrusive semantic html5 code
‣ open sourced
‣ lightweight
‣ multiplatform with progressive
enhancement
‣ accessibility support
‣ customizable
Tuesday, November 1, 11

102. features
‣ non-intrusive semantic html5 code
‣ open sourced
‣ lightweight
‣ multiplatform with progressive
enhancement
‣ accessibility support
‣ customizable
‣ includes javascript api
Tuesday, November 1, 11

103. you don’t need to know
Tuesday, November 1, 11

104. you don’t need to know
‣ html5
Tuesday, November 1, 11

105. you don’t need to know
‣ html5
‣ css 3
Tuesday, November 1, 11

106. you don’t need to know
‣ html5
‣ css 3
‣ javascript
Tuesday, November 1, 11

107. you don’t need to know
‣ html5
‣ css 3
‣ javascript
‣ jQuery
Tuesday, November 1, 11

108. you don’t need to know
‣ html5
‣ css 3
‣ javascript
‣ jQuery
but... you should :)
Tuesday, November 1, 11

109. Tuesday, November 1, 11

110. Tuesday, November 1, 11

111. what do we need?
Tuesday, November 1, 11

112. what do we need?
Tuesday, November 1, 11

113. what do we need?
‣ a text editor
Tuesday, November 1, 11

114. what do we need?
‣ a text editor
‣ a browser
Tuesday, November 1, 11

115. what do we need?
‣ a text editor
‣ a browser
‣ and the framework?
Tuesday, November 1, 11

116. what do we need?
‣ a text editor
‣ a browser
‣ and the framework?
‣ and hybrid compilers?
Tuesday, November 1, 11

117. what do we need?
‣ a text editor
‣ a browser
‣ and the framework?
‣ and hybrid compilers?
‣ and emulators and simulators?
Tuesday, November 1, 11

118. what do we need?
‣ a text editor
‣ a browser
and the framework?
‣
‣ and hybrid compilers?
‣ and emulators and simulators?
www.mobilexweb.com/emulators
Tuesday, November 1, 11

119. warning!
Tuesday, November 1, 11

120. still not stable
Tuesday, November 1, 11

121. but near...
Tuesday, November 1, 11

122. Tuesday, November 1, 11

123. compatibility
rc2
Tuesday, November 1, 11

124. compatibility
Tuesday, November 1, 11

125. compatibility
‣ iOS
‣ Android
‣ BlackBerry >= 5.0
‣ Symbian touch
‣ HP webOS
‣ Windows Phone
‣ Opera Mini, Opera Mobile, Firefox
‣ Bada, Meego, Kindle 3+, ...
‣ Others?
Tuesday, November 1, 11

126. the framework
Tuesday, November 1, 11

127. the framework today
Tuesday, November 1, 11

128. the framework today
‣ a javascript file
Tuesday, November 1, 11

129. the framework today
‣ a javascript file
‣ a css file and a group of images
Tuesday, November 1, 11

130. the framework today
‣ a javascript file
‣ a css file and a group of images
‣ self-hosted
Tuesday, November 1, 11

131. the framework today
‣ a javascript file
‣ a css file and a group of images
‣ self-hosted
‣ CDN - “stable” versions
Tuesday, November 1, 11

132. the framework today
‣ a javascript file
‣ a css file and a group of images
‣ self-hosted
‣ CDN - “stable” versions
‣ CDN - latest versions
Tuesday, November 1, 11

133. the framework tomorrow
Tuesday, November 1, 11

134. the framework tomorrow
‣ a custom javascript file
Tuesday, November 1, 11

135. the framework tomorrow
‣ a custom javascript file
‣ a base css file
Tuesday, November 1, 11

136. the framework tomorrow
‣ a custom javascript file
‣ a base css file
‣ a theme css file and a group of
images
Tuesday, November 1, 11

137. Tuesday, November 1, 11

138. Tuesday, November 1, 11

139. <div data-role="page" id="page1">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button">Go to page 2</a>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
Tuesday, November 1, 11

140. <div data-role="page" id="page1">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button">Go to page 2</a>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
Tuesday, November 1, 11

141. <div data-role="content">
<ul data-role="listview">
<li>iPhone
<li>Android
<li>BlackBerry
<li>Symbian
<li>webOS
<li>MeeGo
<li>Bada
</ul>
</div>
Tuesday, November 1, 11

142. <div data-role="content">
<ul data-role="listview">
<li>iPhone
<li>Android
<li>BlackBerry
<li>Symbian
<li>webOS
<li>MeeGo
<li>Bada
</ul>
</div>
Tuesday, November 1, 11

143. features
Tuesday, November 1, 11

144. features
‣ fixed toolbars
Tuesday, November 1, 11

145. features
‣ fixed toolbars
‣ list, content and form rich controls
Tuesday, November 1, 11

146. features
‣ fixed toolbars
‣ list, content and form rich controls
‣ theming and color swatches
Tuesday, November 1, 11

147. features
‣ fixed toolbars
‣ list, content and form rich controls
‣ theming and color swatches
‣ transitions
Tuesday, November 1, 11

148. features
‣ fixed toolbars
‣ list, content and form rich controls
‣ theming and color swatches
‣ transitions
‣ ajax
Tuesday, November 1, 11

149. Icon Description value
Info (i) info
Home icon home
Search icon search
Tuesday, November 1, 11

150. Tuesday, November 1, 11

151. advanced topics
Tuesday, November 1, 11

152. advanced topics
‣ using javascript for loading content
Tuesday, November 1, 11

153. advanced topics
‣ using javascript for loading content
‣ theming and customization
Tuesday, November 1, 11

154. advanced topics
‣ using javascript for loading content
‣ theming and customization
‣ styling for non-compatible devices
Tuesday, November 1, 11

155. advanced topics
‣ using javascript for loading content
‣ theming and customization
‣ styling for non-compatible devices
‣ javascript api & events
Tuesday, November 1, 11

156. advanced topics
‣ using javascript for loading content
‣ theming and customization
‣ styling for non-compatible devices
‣ javascript api & events
‣ html5 (geolocation, offline storage,
offline access, accelerometer)
Tuesday, November 1, 11

157. you can reach a good
thank you!
experience
firt.mobi
twitter: @firt
mobilexweb.com
https://www.ch-open.ch/auswertung/
Pictures)from)freedigitalphotos.net)
Tuesday, November 1, 11