Mobile app development
Nikolai Onken@nonken - uxebu
Friday, October 29, 2010
Friday, October 29, 2010
@nonken
Friday, October 29, 2010
Friday, October 29, 2010
We open the mobile web.
Friday, October 29, 2010
© Vodafone Group 2010 v1.0 April 20105
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.
Friday, October 29, 2010
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
Friday, October 29, 2010
• Widgets a.k.a. HTML5 apps
• EventNinja, a mobile app by example
• Mobile development guide
• Object browser
Friday, October 29, 2010
© Vodafone Group 2010 v1.0 April 20107
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.
Friday, October 29, 2010
© Vodafone Group 2010 v1.0 April 20108
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.
Friday, October 29, 2010
© Vodafone Group 2010 v1.0 April 20109
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.
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores2nd December 2009
26 Stores
Friday, October 29, 2010
October 201096 Apptores - WOA
http://www.wipconnector.com/appstores
Friday, October 29, 2010
Friday, October 29, 2010
Objective-C
Friday, October 29, 2010
Objective-C Symbian C
Friday, October 29, 2010
Objective-C JavaSymbian C
Friday, October 29, 2010
Objective-C JavaSymbian C
Java
Friday, October 29, 2010
Objective-C JavaSymbian C
.NETJava
Friday, October 29, 2010
Objective-C JavaSymbian C
.NETJava ...
Friday, October 29, 2010
Cross Platform
Friday, October 29, 2010
HTML
Friday, October 29, 2010
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Friday, October 29, 2010
http://bit.ly/tomiahonen-2010-almanac
Friday, October 29, 2010
http://bit.ly/tomiahonen-2010-almanac
71% of all phoneshave a modern xTML web browser.
Friday, October 29, 2010
App Store without Apple!
Friday, October 29, 2010
Your Appshop facts
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
• It feels native
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
}
Friday, October 29, 2010
}?
Friday, October 29, 2010
Friday, October 29, 2010
Layoutindex.html
Friday, October 29, 2010
Designstyle.css
Layoutindex.html
Friday, October 29, 2010
Designstyle.css
Layoutindex.html
AJAX Library
Friday, October 29, 2010
Database
Designstyle.css
Layoutindex.html
AJAX Library
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX Library
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX Library
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Icon
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
=Icon
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Widget /html5 app =
Icon
Friday, October 29, 2010
What is a HTML5 app?
Friday, October 29, 2010
What is a HTML5 app?
Friday, October 29, 2010
What is a HTML5 app?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
• rename to *.wgt
Friday, October 29, 2010
On any phone?
Friday, October 29, 2010
...yes
W3C Widgets
Friday, October 29, 2010
...yes
W3C Widgets
not purely
but greatHTML
support
Friday, October 29, 2010
Almost for free
Friday, October 29, 2010
Almost for free
•Facebook widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
A Phone is ...
Friday, October 29, 2010
http://www.flickr.com/photos/kratz/1984004945/
Friday, October 29, 2010
http://www.flickr.com/photos/mbiddulph/3087388964/
Friday, October 29, 2010
http://www.flickr.com/photos/redstamp/4222841946/
Friday, October 29, 2010
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Address book
• Watch
• Alarm clock
• ...
Friday, October 29, 2010
Multiple Ways
• W3C Spechttp://w3.org/2009/dap/
• JIL > WAChttp://www.jil.org/
• BONDI Spechttp://bondi.omtp.org/
• Your own Spec :)http://phonegap.com/
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
Friday, October 29, 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
SMS, MMS, ...
Friday, October 29, 2010
if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging");}
Friday, October 29, 2010
if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging");}
var player = Widget.Multimedia.AudioPlayer;player.open("myAudioFile.mp3");player.play(1);
Friday, October 29, 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");}
Friday, October 29, 2010
EventNinja
Friday, October 29, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Friday, October 29, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Friday, October 29, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Events,a Calendar
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Mobile dev guide
Friday, October 29, 2010
Do what your runtime can do
Not more
Friday, October 29, 2010
Remember JavaScript
Friday, October 29, 2010
CSS3 - mobile runtimes are often ahead
Friday, October 29, 2010
Semantics?A short story
Friday, October 29, 2010
Friday, October 29, 2010
<ul> <li>Hi</li></ul>
Friday, October 29, 2010
<ul> <li>Hi</li></ul>
<ul> <li><a href=””>Hi</a></li></ul>
Friday, October 29, 2010
<ul> <li>Hi</li></ul>
<ul> <li><a href=””>Hi</a></li></ul>
<a href=””>Hi</a>Friday, October 29, 2010
IE anyone?
Friday, October 29, 2010
IE anyone?
Friday, October 29, 2010
IE anyone?
Friday, October 29, 2010
Communications
Friday, October 29, 2010
• JSONP
Communications
Friday, October 29, 2010
• JSONP
• YQL: An amazing tool!
Communications
Friday, October 29, 2010
Scaling and ppiNever use absolute sizing!
Friday, October 29, 2010
Testing
Friday, October 29, 2010
Best Practices
Friday, October 29, 2010
Best Practices• test on the desktop
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your friend!
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your friend!
• simplify your CSS
Friday, October 29, 2010
Ripple
Friday, October 29, 2010
Libraries
Friday, October 29, 2010
What is out there?
Friday, October 29, 2010
What is out there?
•XUI
Friday, October 29, 2010
What is out there?
•XUI
•Jo
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
•jQuery Mobile (coming)
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
Friday, October 29, 2010
What is out there?
•XUI
•Jo
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
•...
Friday, October 29, 2010
EmbedJSan approach to cross platform development
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
The Supported Devices
... and there will be moreto embed JavaScript on
Friday, October 29, 2010
http://www.flickr.com/photos/tacoekkel/25538919/
Friday, October 29, 2010
http://www.flickr.com/photos/hugo90/3916794427/
Friday, October 29, 2010
Shrink Your API
20kB 8kB
Friday, October 29, 2010
Simple queries > simple library functionOnly ".class" and "#id" queries
Friday, October 29, 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Friday, October 29, 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Full fledged queries > Full blown library function
Friday, October 29, 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Full fledged queries > Full blown library function
13 LOC
~200 LOC
Friday, October 29, 2010
Friday, October 29, 2010
At RuntimeAt Build Time
Friday, October 29, 2010
dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Friday, October 29, 2010
Tools
• Dragonfly
• Firebug
• Ripple
• Apparat.io
Friday, October 29, 2010
Testing services
• Perfecto Mobile - http://vf.perfectomobile.comPromocode: vfwidgets
• Ask for phones here
Friday, October 29, 2010
Set headers... and learn
Send iPhone headers from within Safari for exampleFriday, October 29, 2010
Hmmmm, alert(“Hi”);
Friday, October 29, 2010
Create routines
Friday, October 29, 2010
Create routines
• Test the unbuild source on the desktop
Friday, October 29, 2010
Create routines
• Test the unbuild source on the desktop
• Test the build source on the desktop
Friday, October 29, 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
Friday, October 29, 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
Friday, October 29, 2010
Object Browser
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
For devs?
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Open Source
Friday, October 29, 2010
Open Source
•a developer must have
Friday, October 29, 2010
Open Source
•a developer must have
•developer.vodafone.comhttp://developer.vodafone.com/object-browser
Friday, October 29, 2010
Open Source
•a developer must have
•developer.vodafone.comhttp://developer.vodafone.com/object-browser
•githubhttp://github.com/wolframkriesing/object-browser
Friday, October 29, 2010
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
index.html
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
config.xml
Friday, October 29, 2010
Demo
Friday, October 29, 2010
@nonken
Thank you
Friday, October 29, 2010