Mais conteúdo relacionado Semelhante a Mobile Cross Platform (20) Mais de Nikolai Onken (15) Mobile Cross Platform1. 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
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
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
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
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
34. Engine of the web
http://www.flickr.com/photos/robadob/88901885/
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
54. What is a Widget?
• HTML
• CSS
• JavaScript
• config.xml
• zip it
• rename to *.wgt
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
66. W3C Widgets
...yes
not purely
but great
HTML
support
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
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
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
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
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
114. Do what your runtime
can do
Not more
Tuesday, July 13, 2010
116. CSS3 - mobile runtimes
are often ahead
Tuesday, July 13, 2010
117. Semantics?
A short story
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
127. Communications
• JSONP
• YQL: An amazing tool!
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
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
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
170. Thank you
@nonken
Tuesday, July 13, 2010