These are the slides of my cross-platform talk at the Vodafone developer event in Madrid, July 2010 (At he same day as when the football team came back from south africa ;) )

1. Mobile app
development
Nikolai Onken
@nonken - uxebu
Tuesday, July 13, 2010

2. Important things first
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the
© Vodafone Group 2010 Vodafone Group. Other product and company names mentioned herein may be the
2 v1.0 April 2010 trade marks of their respective owners.
Tuesday, July 13, 2010

3. Tuesday, July 13, 2010

4. Tuesday, July 13, 2010

5. Tuesday, July 13, 2010

6. Tuesday, July 13, 2010

7. Tuesday, July 13, 2010

8. Tuesday, July 13, 2010

9. todays schedule
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the
© Vodafone Group 2010 Vodafone Group. Other product and company names mentioned herein may be the
4 v1.0 April 2010 trade marks of their respective owners.
Tuesday, July 13, 2010

10. Tuesday, July 13, 2010

11. • Widgets a.k.a. HTML5 apps
Tuesday, July 13, 2010

12. • Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
Tuesday, July 13, 2010

13. • Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
Tuesday, July 13, 2010

14. • Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
• Object browser
Tuesday, July 13, 2010

15. Widgets/HTML5 apps
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the
© Vodafone Group 2010 Vodafone Group. Other product and company names mentioned herein may be the
6 v1.0 April 2010 trade marks of their respective owners.
Tuesday, July 13, 2010

16. Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the
© Vodafone Group 2010 Vodafone Group. Other product and company names mentioned herein may be the
7 v1.0 April 2010 trade marks of their respective owners.
Tuesday, July 13, 2010

17. EventNinja, a mobile
app by example
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the
© Vodafone Group 2010 Vodafone Group. Other product and company names mentioned herein may be the
8 v1.0 April 2010 trade marks of their respective owners.
Tuesday, July 13, 2010

18. Tuesday, July 13, 2010

19. Tuesday, July 13, 2010

20. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Tuesday, July 13, 2010

21. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Tuesday, July 13, 2010

22. 30th July 2009
14 Stores
http://bit.ly/distimo-appstores
Tuesday, July 13, 2010

23. 30th July 2009
14 Stores
23rd September 2009
23 Stores
http://bit.ly/distimo-appstores
Tuesday, July 13, 2010

24. 30th July 2009
14 Stores
23rd September 2009
23 Stores
2nd December 2009
26 Stores
http://bit.ly/distimo-appstores
Tuesday, July 13, 2010

25. Tuesday, July 13, 2010

26. Objective-C
Tuesday, July 13, 2010

27. Objective-C Symbian C
Tuesday, July 13, 2010

28. Objective-C Symbian C Java
Tuesday, July 13, 2010

29. Objective-C Symbian C Java
Java
Tuesday, July 13, 2010

30. Objective-C Symbian C Java
Java .NET
Tuesday, July 13, 2010

31. Objective-C Symbian C Java
Java .NET ...
Tuesday, July 13, 2010

32. Cross Platform
Tuesday, July 13, 2010

33. HTML
Tuesday, July 13, 2010

34. Engine of the web
http://www.flickr.com/photos/robadob/88901885/
Tuesday, July 13, 2010

35. Tuesday, July 13, 2010

36. Tuesday, July 13, 2010

37. Tuesday, July 13, 2010

38. Tuesday, July 13, 2010

39. }
Tuesday, July 13, 2010

40. }?
Tuesday, July 13, 2010

41. Tuesday, July 13, 2010

42. Layout
index.html
Tuesday, July 13, 2010

43. Layout
index.html
Design
style.css
Tuesday, July 13, 2010

44. Layout
index.html
Design
style.css
AJAX Library
Tuesday, July 13, 2010

45. Layout
index.html
Design
style.css
AJAX Library
Database
Tuesday, July 13, 2010

46. Layout
index.html
Design
style.css
AJAX Library
Database
Tuesday, July 13, 2010

47. Layout
index.html
Design
style.css
AJAX Library
Database
Tuesday, July 13, 2010

48. Layout
index.html
Design
style.css
Configuration
AJAX Library config.xml
Database
Tuesday, July 13, 2010

49. Layout
index.html
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, July 13, 2010

50. Layout
index.html
=
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, July 13, 2010

51. Layout
index.html
Widget =
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, July 13, 2010

52. What is a Widget?
Tuesday, July 13, 2010

53. What is a Widget?
Tuesday, July 13, 2010

54. What is a Widget?
• HTML
• CSS
• JavaScript
• config.xml
• zip it
• rename to *.wgt
Tuesday, July 13, 2010

55. On any phone?
Tuesday, July 13, 2010

56. HTML
Tuesday, July 13, 2010

57. HTML
ti ve
na
Tuesday, July 13, 2010

58. HTML
ti ve
na
Tuesday, July 13, 2010

59. HTML
ti ve
na
Tuesday, July 13, 2010

60. HTML
ti ve
na
Tuesday, July 13, 2010

61. HTML
ti ve
na
Tuesday, July 13, 2010

62. W3C Widgets
ti ve
na
HTML
ti ve
na
Tuesday, July 13, 2010

63. W3C Widgets
ti ve
na
HTML
ti ve
na
Tuesday, July 13, 2010

64. W3C Widgets
ti ve
na
HTML
ti ve
na
Tuesday, July 13, 2010

65. W3C Widgets
...yes
Tuesday, July 13, 2010

66. W3C Widgets
...yes
not purely
but great
HTML
support
Tuesday, July 13, 2010

67. Almost for free
Tuesday, July 13, 2010

68. Almost for free
• Facebook widget
Tuesday, July 13, 2010

69. Almost for free
• Facebook widget
• Dashboard widget
Tuesday, July 13, 2010

70. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
Tuesday, July 13, 2010

71. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
Tuesday, July 13, 2010

72. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, July 13, 2010

73. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, July 13, 2010

74. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, July 13, 2010

75. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, July 13, 2010

76. Almost for free
• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...
Tuesday, July 13, 2010

77. DONE! http://www.flickr.com/photos/sundazed/2704578067/
Tuesday, July 13, 2010

78. A Phone is ...
Tuesday, July 13, 2010

79. http://www.flickr.com/photos/kratz/1984004945/
Tuesday, July 13, 2010

80. http://www.flickr.com/photos/mbiddulph/3087388964/
Tuesday, July 13, 2010

81. http://www.flickr.com/photos/redstamp/4222841946/
Tuesday, July 13, 2010

82. • Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...
Tuesday, July 13, 2010

83. Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL Spec
http://www.jil.org/
Tuesday, July 13, 2010

84. http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

85. http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

86. System Info
Network Info
Phone Info
File
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

87. System Info
Network Info
Phone Info
File
GPS
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

88. System Info
Network Info
Phone Info
File
GPS
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

89. System Info
Contacts
Network Info
Phone Info
File
GPS
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

90. System Info
Contacts
Network Info
Phone Info Camera
File
GPS
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

91. System Info
Contacts
Network Info
Phone Info Camera
File
Audio
GPS
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

92. System Info
Contacts
Network Info
Phone Info Camera
File
Audio
GPS SMS, MMS, ...
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010

93. if (Widget.Device.PowerInfo.isCharging){
alert("Battery is charging");
}
Tuesday, July 13, 2010

94. if (Widget.Device.PowerInfo.isCharging){
alert("Battery is charging");
}
var player = Widget.Multimedia.AudioPlayer;
player.open("myAudioFile.mp3");
player.play(1);
Tuesday, July 13, 2010

95. if (Widget.Device.PowerInfo.isCharging){
alert("Battery is charging");
}
var player = Widget.Multimedia.AudioPlayer;
player.open("myAudioFile.mp3");
player.play(1);
if (Widget.Device.RadioInfo.isRoaming){
alert("Money Money Money");
}
Tuesday, July 13, 2010

96. EventNinja
Tuesday, July 13, 2010

97. Layout
index.html
Design
Icon style.css
Configuration
AJAX Library config.xml
Database
Tuesday, July 13, 2010

98. Layout
index.html
Design
Icon style.css
Database
Configuration
AJAX Library config.xml
Tuesday, July 13, 2010

99. Events, Layout
index.html
a Calendar
Design
Icon style.css
Database
Configuration
AJAX Library config.xml
Tuesday, July 13, 2010

100. http://bit.ly/webdev-events
Tuesday, July 13, 2010

101. http://bit.ly/webdev-events
Tuesday, July 13, 2010

102. http://bit.ly/webdev-events
Tuesday, July 13, 2010

103. Tuesday, July 13, 2010

104. Tuesday, July 13, 2010

105. Tuesday, July 13, 2010

106. Tuesday, July 13, 2010

107. Tuesday, July 13, 2010

108. Tuesday, July 13, 2010

109. Tuesday, July 13, 2010

110. Tuesday, July 13, 2010

111. Tuesday, July 13, 2010

112. Tuesday, July 13, 2010

113. Mobile dev guide
Tuesday, July 13, 2010

114. Do what your runtime
can do
Not more
Tuesday, July 13, 2010

115. Remember JavaScript
Tuesday, July 13, 2010

116. CSS3 - mobile runtimes
are often ahead
Tuesday, July 13, 2010

117. Semantics?
A short story
Tuesday, July 13, 2010

118. Tuesday, July 13, 2010

119. <ul>
<li>Hi</li>
</ul>
Tuesday, July 13, 2010

120. <ul>
<li>Hi</li>
</ul>
<ul>
<li><a href=””>Hi</a></li>
</ul>
Tuesday, July 13, 2010

121. <ul>
<li>Hi</li>
</ul>
<ul>
<li><a href=””>Hi</a></li>
</ul>
<a href=””>Hi</a>
Tuesday, July 13, 2010

122. IE anyone?
Tuesday, July 13, 2010

123. IE anyone?
Tuesday, July 13, 2010

124. IE anyone?
Tuesday, July 13, 2010

125. Communications
Tuesday, July 13, 2010

126. Communications
• JSONP
Tuesday, July 13, 2010

127. Communications
• JSONP
• YQL: An amazing tool!
Tuesday, July 13, 2010

128. Scaling and ppi
Never use absolute sizing!
Tuesday, July 13, 2010

129. Testing
Tuesday, July 13, 2010

130. Stay on the desktop as
long as possible
Tuesday, July 13, 2010

131. Stay on the desktop as
long as possible
Really
Tuesday, July 13, 2010

132. Stay on the desktop as
long as possible
Really
Really
Tuesday, July 13, 2010

133. Stay on the desktop as
long as possible
Really
Really
Really
Tuesday, July 13, 2010

134. Stay on the desktop as
long as possible
Really
Really
Really
Really
Tuesday, July 13, 2010

135. Stay on the desktop as
long as possible
Really
Really
Really
Really
Really
Tuesday, July 13, 2010

136. Tools
• Dragonfly
• Firebug
Tuesday, July 13, 2010

137. Testing services
• Perfecto Mobile - http://vf.perfectomobile.com
Promocode: vfwidgets
• Ask for phones here
Tuesday, July 13, 2010

138. Set headers... and learn
Send iPhone headers from within Safari for example
Tuesday, July 13, 2010

139. Hmmmm, alert(“Hi”);
Tuesday, July 13, 2010

140. Create routines
Tuesday, July 13, 2010

141. Create routines
• Test the unbuild source on the desktop
Tuesday, July 13, 2010

142. Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
Tuesday, July 13, 2010

143. Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
• Test the build source on a mobile browser
Tuesday, July 13, 2010

144. Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
• Test the build source on a mobile browser
• Package and then test the app on the device
Tuesday, July 13, 2010

145. Object Browser
Tuesday, July 13, 2010

146. Tuesday, July 13, 2010

147. Tuesday, July 13, 2010

148. For devs?
Tuesday, July 13, 2010

149. Tuesday, July 13, 2010

150. Tuesday, July 13, 2010

151. Tuesday, July 13, 2010

152. Tuesday, July 13, 2010

153. Tuesday, July 13, 2010

154. Open Source
Tuesday, July 13, 2010

155. Open Source
• a developer must have
Tuesday, July 13, 2010

156. Open Source
• a developer must have
• developer.vodafone.com
http://developer.vodafone.com/object-browser
Tuesday, July 13, 2010

157. Open Source
• a developer must have
• developer.vodafone.com
http://developer.vodafone.com/object-browser
• github
http://github.com/wolframkriesing/object-browser
Tuesday, July 13, 2010

158. Tuesday, July 13, 2010

159. index.html
Tuesday, July 13, 2010

160. index.html
Tuesday, July 13, 2010

161. index.html
Tuesday, July 13, 2010

162. index.html
Tuesday, July 13, 2010

163. index.html
Tuesday, July 13, 2010

164. config.xml
Tuesday, July 13, 2010

165. config.xml
Tuesday, July 13, 2010

166. config.xml
Tuesday, July 13, 2010

167. config.xml
Tuesday, July 13, 2010

168. config.xml
Tuesday, July 13, 2010

169. Demo
Tuesday, July 13, 2010

170. Thank you
@nonken
Tuesday, July 13, 2010