Download - Mobile Cross Platform
Mobile app development
Nikolai Onken@nonken - uxebu
Tuesday, July 13, 2010
© Vodafone Group 2010 v1.0 April 20102
Important things first
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the
trade marks of their respective owners.
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
© Vodafone Group 2010 v1.0 April 20104
todays schedule
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the
trade marks of their respective owners.
Tuesday, July 13, 2010
Tuesday, July 13, 2010
• Widgets a.k.a. HTML5 apps
Tuesday, July 13, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
Tuesday, July 13, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
Tuesday, July 13, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
• Object browser
Tuesday, July 13, 2010
© Vodafone Group 2010 v1.0 April 20106
Widgets/HTML5 apps
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the
trade marks of their respective owners.
Tuesday, July 13, 2010
© Vodafone Group 2010 v1.0 April 20107
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the
trade marks of their respective owners.
Tuesday, July 13, 2010
© Vodafone Group 2010 v1.0 April 20108
EventNinja, a mobile app by example
Vodafone, the Vodafone logo, Vodafone 360 and Vodafone Live! are trade marks of the Vodafone Group. Other product and company names mentioned herein may be the
trade marks of their respective owners.
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Tuesday, July 13, 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Tuesday, July 13, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores
Tuesday, July 13, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores
Tuesday, July 13, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores2nd December 2009
26 Stores
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Objective-C
Tuesday, July 13, 2010
Objective-C Symbian C
Tuesday, July 13, 2010
Objective-C JavaSymbian C
Tuesday, July 13, 2010
Objective-C JavaSymbian C
Java
Tuesday, July 13, 2010
Objective-C JavaSymbian C
.NETJava
Tuesday, July 13, 2010
Objective-C JavaSymbian C
.NETJava ...
Tuesday, July 13, 2010
Cross Platform
Tuesday, July 13, 2010
HTML
Tuesday, July 13, 2010
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
}
Tuesday, July 13, 2010
}?
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Layoutindex.html
Tuesday, July 13, 2010
Designstyle.css
Layoutindex.html
Tuesday, July 13, 2010
Designstyle.css
Layoutindex.html
AJAX Library
Tuesday, July 13, 2010
Database
Designstyle.css
Layoutindex.html
AJAX Library
Tuesday, July 13, 2010
Layoutindex.html
Designstyle.css
Database
AJAX Library
Tuesday, July 13, 2010
Layoutindex.html
Designstyle.css
Database
AJAX Library
Tuesday, July 13, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Tuesday, July 13, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Icon
Tuesday, July 13, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
=Icon
Tuesday, July 13, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Widget =Icon
Tuesday, July 13, 2010
What is a Widget?
Tuesday, July 13, 2010
What is a Widget?
Tuesday, July 13, 2010
What is a Widget?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
• rename to *.wgt
Tuesday, July 13, 2010
On any phone?
Tuesday, July 13, 2010
HTML
Tuesday, July 13, 2010
HTML
nativ
e
Tuesday, July 13, 2010
HTML
nativ
e
Tuesday, July 13, 2010
HTML
nativ
e
Tuesday, July 13, 2010
HTML
nativ
e
Tuesday, July 13, 2010
HTML
nativ
e
Tuesday, July 13, 2010
HTML
nativ
e
W3C Widgets
nativ
e
Tuesday, July 13, 2010
HTML
nativ
e
W3C Widgets
nativ
e
Tuesday, July 13, 2010
HTML
nativ
e
W3C Widgets
nativ
e
Tuesday, July 13, 2010
...yes
W3C Widgets
Tuesday, July 13, 2010
...yes
W3C Widgets
not purely
but greatHTML
support
Tuesday, July 13, 2010
Almost for free
Tuesday, July 13, 2010
Almost for free
•Facebook widget
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Tuesday, July 13, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Tuesday, July 13, 2010
DONE!http://www.flickr.com/photos/sundazed/2704578067/
Tuesday, July 13, 2010
A Phone is ...
Tuesday, July 13, 2010
http://www.flickr.com/photos/kratz/1984004945/
Tuesday, July 13, 2010
http://www.flickr.com/photos/mbiddulph/3087388964/
Tuesday, July 13, 2010
http://www.flickr.com/photos/redstamp/4222841946/
Tuesday, July 13, 2010
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Address book
• Watch
• Alarm clock
• ...
Tuesday, July 13, 2010
Multiple Ways
• W3C Spechttp://w3.org/2009/dap/
• JIL Spechttp://www.jil.org/
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
Tuesday, July 13, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
SMS, MMS, ...
Tuesday, July 13, 2010
if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging");}
Tuesday, July 13, 2010
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
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
EventNinja
Tuesday, July 13, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Tuesday, July 13, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Tuesday, July 13, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Events,a Calendar
Tuesday, July 13, 2010
http://bit.ly/webdev-events
Tuesday, July 13, 2010
http://bit.ly/webdev-events
Tuesday, July 13, 2010
http://bit.ly/webdev-events
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Mobile dev guide
Tuesday, July 13, 2010
Do what your runtime can do
Not more
Tuesday, July 13, 2010
Remember JavaScript
Tuesday, July 13, 2010
CSS3 - mobile runtimes are often ahead
Tuesday, July 13, 2010
Semantics?A short story
Tuesday, July 13, 2010
Tuesday, July 13, 2010
<ul> <li>Hi</li></ul>
Tuesday, July 13, 2010
<ul> <li>Hi</li></ul>
<ul> <li><a href=””>Hi</a></li></ul>
Tuesday, July 13, 2010
<ul> <li>Hi</li></ul>
<ul> <li><a href=””>Hi</a></li></ul>
<a href=””>Hi</a>Tuesday, July 13, 2010
IE anyone?
Tuesday, July 13, 2010
IE anyone?
Tuesday, July 13, 2010
IE anyone?
Tuesday, July 13, 2010
Communications
Tuesday, July 13, 2010
• JSONP
Communications
Tuesday, July 13, 2010
• JSONP
• YQL: An amazing tool!
Communications
Tuesday, July 13, 2010
Scaling and ppiNever use absolute sizing!
Tuesday, July 13, 2010
Testing
Tuesday, July 13, 2010
Stay on the desktop as long as possible
Tuesday, July 13, 2010
Stay on the desktop as long as possible
Really
Tuesday, July 13, 2010
Stay on the desktop as long as possible
ReallyReally
Tuesday, July 13, 2010
Stay on the desktop as long as possible
ReallyReallyReally
Tuesday, July 13, 2010
Stay on the desktop as long as possible
ReallyReallyReallyReally
Tuesday, July 13, 2010
Stay on the desktop as long as possible
ReallyReallyReallyReallyReally
Tuesday, July 13, 2010
Tools
• Dragonfly
• Firebug
Tuesday, July 13, 2010
Testing services
• Perfecto Mobile - http://vf.perfectomobile.comPromocode: vfwidgets
• Ask for phones here
Tuesday, July 13, 2010
Set headers... and learn
Send iPhone headers from within Safari for exampleTuesday, July 13, 2010
Hmmmm, alert(“Hi”);
Tuesday, July 13, 2010
Create routines
Tuesday, July 13, 2010
Create routines
• Test the unbuild source on the desktop
Tuesday, July 13, 2010
Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
Tuesday, July 13, 2010
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
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
Object Browser
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
For devs?
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Tuesday, July 13, 2010
Open Source
Tuesday, July 13, 2010
Open Source
•a developer must have
Tuesday, July 13, 2010
Open Source
•a developer must have
•developer.vodafone.comhttp://developer.vodafone.com/object-browser
Tuesday, July 13, 2010
Open Source
•a developer must have
•developer.vodafone.comhttp://developer.vodafone.com/object-browser
•githubhttp://github.com/wolframkriesing/object-browser
Tuesday, July 13, 2010
Tuesday, July 13, 2010
index.html
Tuesday, July 13, 2010
index.html
Tuesday, July 13, 2010
index.html
Tuesday, July 13, 2010
index.html
Tuesday, July 13, 2010
index.html
Tuesday, July 13, 2010
config.xml
Tuesday, July 13, 2010
config.xml
Tuesday, July 13, 2010
config.xml
Tuesday, July 13, 2010
config.xml
Tuesday, July 13, 2010
config.xml
Tuesday, July 13, 2010
Demo
Tuesday, July 13, 2010
@nonken
Thank you
Tuesday, July 13, 2010