Mobile Cross Platform

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

description

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 ;) )

Transcript of Mobile Cross Platform

Page 1: Mobile Cross Platform

Mobile app development

Nikolai Onken@nonken - uxebu

Tuesday, July 13, 2010

Page 2: Mobile Cross Platform

© 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

Page 3: Mobile Cross Platform

Tuesday, July 13, 2010

Page 4: Mobile Cross Platform

Tuesday, July 13, 2010

Page 5: Mobile Cross Platform

Tuesday, July 13, 2010

Page 6: Mobile Cross Platform

Tuesday, July 13, 2010

Page 7: Mobile Cross Platform

Tuesday, July 13, 2010

Page 8: Mobile Cross Platform

Tuesday, July 13, 2010

Page 9: Mobile Cross Platform

© 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

Page 10: Mobile Cross Platform

Tuesday, July 13, 2010

Page 11: Mobile Cross Platform

• Widgets a.k.a. HTML5 apps

Tuesday, July 13, 2010

Page 12: Mobile Cross Platform

• Widgets a.k.a. HTML5 apps

• EventNinja, a mobile app by example

Tuesday, July 13, 2010

Page 13: Mobile Cross Platform

• Widgets a.k.a. HTML5 apps

• EventNinja, a mobile app by example

• Mobile development guide

Tuesday, July 13, 2010

Page 14: Mobile Cross Platform

• Widgets a.k.a. HTML5 apps

• EventNinja, a mobile app by example

• Mobile development guide

• Object browser

Tuesday, July 13, 2010

Page 15: Mobile Cross Platform

© 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

Page 16: Mobile Cross Platform

© 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

Page 17: Mobile Cross Platform

© 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

Page 18: Mobile Cross Platform

Tuesday, July 13, 2010

Page 19: Mobile Cross Platform

Tuesday, July 13, 2010

Page 20: Mobile Cross Platform

Landscapehttp://www.flickr.com/photos/tillwe/146242691/

Tuesday, July 13, 2010

Page 21: Mobile Cross Platform

Landscapehttp://www.flickr.com/photos/tillwe/146242691/

Tuesday, July 13, 2010

Page 22: Mobile Cross Platform

http://bit.ly/distimo-appstores

30th July 200914 Stores

Tuesday, July 13, 2010

Page 23: Mobile Cross Platform

http://bit.ly/distimo-appstores

30th July 200914 Stores23rd September 2009

23 Stores

Tuesday, July 13, 2010

Page 24: Mobile Cross Platform

http://bit.ly/distimo-appstores

30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores

Tuesday, July 13, 2010

Page 25: Mobile Cross Platform

Tuesday, July 13, 2010

Page 26: Mobile Cross Platform

Objective-C

Tuesday, July 13, 2010

Page 27: Mobile Cross Platform

Objective-C Symbian C

Tuesday, July 13, 2010

Page 28: Mobile Cross Platform

Objective-C JavaSymbian C

Tuesday, July 13, 2010

Page 29: Mobile Cross Platform

Objective-C JavaSymbian C

Java

Tuesday, July 13, 2010

Page 30: Mobile Cross Platform

Objective-C JavaSymbian C

.NETJava

Tuesday, July 13, 2010

Page 31: Mobile Cross Platform

Objective-C JavaSymbian C

.NETJava ...

Tuesday, July 13, 2010

Page 32: Mobile Cross Platform

Cross Platform

Tuesday, July 13, 2010

Page 33: Mobile Cross Platform

HTML

Tuesday, July 13, 2010

Page 34: Mobile Cross Platform

http://www.flickr.com/photos/robadob/88901885/

Engine of the web

Tuesday, July 13, 2010

Page 35: Mobile Cross Platform

Tuesday, July 13, 2010

Page 36: Mobile Cross Platform

Tuesday, July 13, 2010

Page 37: Mobile Cross Platform

Tuesday, July 13, 2010

Page 38: Mobile Cross Platform

Tuesday, July 13, 2010

Page 39: Mobile Cross Platform

}

Tuesday, July 13, 2010

Page 40: Mobile Cross Platform

}?

Tuesday, July 13, 2010

Page 41: Mobile Cross Platform

Tuesday, July 13, 2010

Page 42: Mobile Cross Platform

Layoutindex.html

Tuesday, July 13, 2010

Page 43: Mobile Cross Platform

Designstyle.css

Layoutindex.html

Tuesday, July 13, 2010

Page 44: Mobile Cross Platform

Designstyle.css

Layoutindex.html

AJAX Library

Tuesday, July 13, 2010

Page 45: Mobile Cross Platform

Database

Designstyle.css

Layoutindex.html

AJAX Library

Tuesday, July 13, 2010

Page 46: Mobile Cross Platform

Layoutindex.html

Designstyle.css

Database

AJAX Library

Tuesday, July 13, 2010

Page 47: Mobile Cross Platform

Layoutindex.html

Designstyle.css

Database

AJAX Library

Tuesday, July 13, 2010

Page 48: Mobile Cross Platform

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

Tuesday, July 13, 2010

Page 49: Mobile Cross Platform

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

Icon

Tuesday, July 13, 2010

Page 50: Mobile Cross Platform

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

=Icon

Tuesday, July 13, 2010

Page 51: Mobile Cross Platform

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

Widget =Icon

Tuesday, July 13, 2010

Page 52: Mobile Cross Platform

What is a Widget?

Tuesday, July 13, 2010

Page 53: Mobile Cross Platform

What is a Widget?

Tuesday, July 13, 2010

Page 54: Mobile Cross Platform

What is a Widget?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt

Tuesday, July 13, 2010

Page 55: Mobile Cross Platform

On any phone?

Tuesday, July 13, 2010

Page 56: Mobile Cross Platform

HTML

Tuesday, July 13, 2010

Page 57: Mobile Cross Platform

HTML

nativ

e

Tuesday, July 13, 2010

Page 58: Mobile Cross Platform

HTML

nativ

e

Tuesday, July 13, 2010

Page 59: Mobile Cross Platform

HTML

nativ

e

Tuesday, July 13, 2010

Page 60: Mobile Cross Platform

HTML

nativ

e

Tuesday, July 13, 2010

Page 61: Mobile Cross Platform

HTML

nativ

e

Tuesday, July 13, 2010

Page 62: Mobile Cross Platform

HTML

nativ

e

W3C Widgets

nativ

e

Tuesday, July 13, 2010

Page 63: Mobile Cross Platform

HTML

nativ

e

W3C Widgets

nativ

e

Tuesday, July 13, 2010

Page 64: Mobile Cross Platform

HTML

nativ

e

W3C Widgets

nativ

e

Tuesday, July 13, 2010

Page 65: Mobile Cross Platform

...yes

W3C Widgets

Tuesday, July 13, 2010

Page 66: Mobile Cross Platform

...yes

W3C Widgets

not purely

but greatHTML

support

Tuesday, July 13, 2010

Page 67: Mobile Cross Platform

Almost for free

Tuesday, July 13, 2010

Page 68: Mobile Cross Platform

Almost for free

•Facebook widget

Tuesday, July 13, 2010

Page 69: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

Tuesday, July 13, 2010

Page 70: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

Tuesday, July 13, 2010

Page 71: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

Tuesday, July 13, 2010

Page 72: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Tuesday, July 13, 2010

Page 73: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Tuesday, July 13, 2010

Page 74: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Tuesday, July 13, 2010

Page 75: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Tuesday, July 13, 2010

Page 76: Mobile Cross Platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Tuesday, July 13, 2010

Page 77: Mobile Cross Platform

DONE!http://www.flickr.com/photos/sundazed/2704578067/

Tuesday, July 13, 2010

Page 78: Mobile Cross Platform

A Phone is ...

Tuesday, July 13, 2010

Page 79: Mobile Cross Platform

http://www.flickr.com/photos/kratz/1984004945/

Tuesday, July 13, 2010

Page 80: Mobile Cross Platform

http://www.flickr.com/photos/mbiddulph/3087388964/

Tuesday, July 13, 2010

Page 81: Mobile Cross Platform

http://www.flickr.com/photos/redstamp/4222841946/

Tuesday, July 13, 2010

Page 82: Mobile Cross Platform

• Camera

• Compass

• GPS

• Accelerometer

• Calendar

• Email

• Address book

• Watch

• Alarm clock

• ...

Tuesday, July 13, 2010

Page 83: Mobile Cross Platform

Multiple Ways

• W3C Spechttp://w3.org/2009/dap/

• JIL Spechttp://www.jil.org/

Tuesday, July 13, 2010

Page 84: Mobile Cross Platform

http://bit.ly/vf-jil-docs

Tuesday, July 13, 2010

Page 85: Mobile Cross Platform

http://bit.ly/vf-jil-docs

Tuesday, July 13, 2010

Page 86: Mobile Cross Platform

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

Tuesday, July 13, 2010

Page 87: Mobile Cross Platform

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Tuesday, July 13, 2010

Page 88: Mobile Cross Platform

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Tuesday, July 13, 2010

Page 89: Mobile Cross Platform

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Contacts

Tuesday, July 13, 2010

Page 90: Mobile Cross Platform

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Contacts

Camera

Tuesday, July 13, 2010

Page 91: Mobile Cross Platform

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Contacts

Camera

Audio

Tuesday, July 13, 2010

Page 92: Mobile Cross Platform

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Contacts

Camera

Audio

SMS, MMS, ...

Tuesday, July 13, 2010

Page 93: Mobile Cross Platform

if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging");}

Tuesday, July 13, 2010

Page 94: Mobile Cross Platform

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

Page 95: Mobile Cross Platform

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

Page 96: Mobile Cross Platform

EventNinja

Tuesday, July 13, 2010

Page 97: Mobile Cross Platform

Database

Layoutindex.html

Designstyle.css

AJAX LibraryConfiguration

config.xml

Icon

Tuesday, July 13, 2010

Page 98: Mobile Cross Platform

Database

Layoutindex.html

Designstyle.css

AJAX LibraryConfiguration

config.xml

Icon

Tuesday, July 13, 2010

Page 99: Mobile Cross Platform

Database

Layoutindex.html

Designstyle.css

AJAX LibraryConfiguration

config.xml

Icon

Events,a Calendar

Tuesday, July 13, 2010

Page 100: Mobile Cross Platform

http://bit.ly/webdev-events

Tuesday, July 13, 2010

Page 101: Mobile Cross Platform

http://bit.ly/webdev-events

Tuesday, July 13, 2010

Page 102: Mobile Cross Platform

http://bit.ly/webdev-events

Tuesday, July 13, 2010

Page 103: Mobile Cross Platform

Tuesday, July 13, 2010

Page 104: Mobile Cross Platform

Tuesday, July 13, 2010

Page 105: Mobile Cross Platform

Tuesday, July 13, 2010

Page 106: Mobile Cross Platform

Tuesday, July 13, 2010

Page 107: Mobile Cross Platform

Tuesday, July 13, 2010

Page 108: Mobile Cross Platform

Tuesday, July 13, 2010

Page 109: Mobile Cross Platform

Tuesday, July 13, 2010

Page 110: Mobile Cross Platform

Tuesday, July 13, 2010

Page 111: Mobile Cross Platform

Tuesday, July 13, 2010

Page 112: Mobile Cross Platform

Tuesday, July 13, 2010

Page 113: Mobile Cross Platform

Mobile dev guide

Tuesday, July 13, 2010

Page 114: Mobile Cross Platform

Do what your runtime can do

Not more

Tuesday, July 13, 2010

Page 115: Mobile Cross Platform

Remember JavaScript

Tuesday, July 13, 2010

Page 116: Mobile Cross Platform

CSS3 - mobile runtimes are often ahead

Tuesday, July 13, 2010

Page 117: Mobile Cross Platform

Semantics?A short story

Tuesday, July 13, 2010

Page 118: Mobile Cross Platform

Tuesday, July 13, 2010

Page 119: Mobile Cross Platform

<ul> <li>Hi</li></ul>

Tuesday, July 13, 2010

Page 120: Mobile Cross Platform

<ul> <li>Hi</li></ul>

<ul> <li><a href=””>Hi</a></li></ul>

Tuesday, July 13, 2010

Page 121: Mobile Cross Platform

<ul> <li>Hi</li></ul>

<ul> <li><a href=””>Hi</a></li></ul>

<a href=””>Hi</a>Tuesday, July 13, 2010

Page 122: Mobile Cross Platform

IE anyone?

Tuesday, July 13, 2010

Page 123: Mobile Cross Platform

IE anyone?

Tuesday, July 13, 2010

Page 124: Mobile Cross Platform

IE anyone?

Tuesday, July 13, 2010

Page 125: Mobile Cross Platform

Communications

Tuesday, July 13, 2010

Page 126: Mobile Cross Platform

• JSONP

Communications

Tuesday, July 13, 2010

Page 127: Mobile Cross Platform

• JSONP

• YQL: An amazing tool!

Communications

Tuesday, July 13, 2010

Page 128: Mobile Cross Platform

Scaling and ppiNever use absolute sizing!

Tuesday, July 13, 2010

Page 129: Mobile Cross Platform

Testing

Tuesday, July 13, 2010

Page 130: Mobile Cross Platform

Stay on the desktop as long as possible

Tuesday, July 13, 2010

Page 131: Mobile Cross Platform

Stay on the desktop as long as possible

Really

Tuesday, July 13, 2010

Page 132: Mobile Cross Platform

Stay on the desktop as long as possible

ReallyReally

Tuesday, July 13, 2010

Page 133: Mobile Cross Platform

Stay on the desktop as long as possible

ReallyReallyReally

Tuesday, July 13, 2010

Page 134: Mobile Cross Platform

Stay on the desktop as long as possible

ReallyReallyReallyReally

Tuesday, July 13, 2010

Page 135: Mobile Cross Platform

Stay on the desktop as long as possible

ReallyReallyReallyReallyReally

Tuesday, July 13, 2010

Page 136: Mobile Cross Platform

Tools

• Dragonfly

• Firebug

Tuesday, July 13, 2010

Page 137: Mobile Cross Platform

Testing services

• Perfecto Mobile - http://vf.perfectomobile.comPromocode: vfwidgets

• Ask for phones here

Tuesday, July 13, 2010

Page 138: Mobile Cross Platform

Set headers... and learn

Send iPhone headers from within Safari for exampleTuesday, July 13, 2010

Page 139: Mobile Cross Platform

Hmmmm, alert(“Hi”);

Tuesday, July 13, 2010

Page 140: Mobile Cross Platform

Create routines

Tuesday, July 13, 2010

Page 141: Mobile Cross Platform

Create routines

• Test the unbuild source on the desktop

Tuesday, July 13, 2010

Page 142: Mobile Cross Platform

Create routines

• Test the unbuild source on the desktop

• Test the build source on the desktop

Tuesday, July 13, 2010

Page 143: Mobile Cross Platform

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

Page 144: Mobile Cross Platform

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

Page 145: Mobile Cross Platform

Object Browser

Tuesday, July 13, 2010

Page 146: Mobile Cross Platform

Tuesday, July 13, 2010

Page 147: Mobile Cross Platform

Tuesday, July 13, 2010

Page 148: Mobile Cross Platform

For devs?

Tuesday, July 13, 2010

Page 149: Mobile Cross Platform

Tuesday, July 13, 2010

Page 150: Mobile Cross Platform

Tuesday, July 13, 2010

Page 151: Mobile Cross Platform

Tuesday, July 13, 2010

Page 152: Mobile Cross Platform

Tuesday, July 13, 2010

Page 153: Mobile Cross Platform

Tuesday, July 13, 2010

Page 154: Mobile Cross Platform

Open Source

Tuesday, July 13, 2010

Page 155: Mobile Cross Platform

Open Source

•a developer must have

Tuesday, July 13, 2010

Page 156: Mobile Cross Platform

Open Source

•a developer must have

•developer.vodafone.comhttp://developer.vodafone.com/object-browser

Tuesday, July 13, 2010

Page 157: Mobile Cross Platform

Open Source

•a developer must have

•developer.vodafone.comhttp://developer.vodafone.com/object-browser

•githubhttp://github.com/wolframkriesing/object-browser

Tuesday, July 13, 2010

Page 158: Mobile Cross Platform

Tuesday, July 13, 2010

Page 159: Mobile Cross Platform

index.html

Tuesday, July 13, 2010

Page 160: Mobile Cross Platform

index.html

Tuesday, July 13, 2010

Page 161: Mobile Cross Platform

index.html

Tuesday, July 13, 2010

Page 162: Mobile Cross Platform

index.html

Tuesday, July 13, 2010

Page 163: Mobile Cross Platform

index.html

Tuesday, July 13, 2010

Page 164: Mobile Cross Platform

config.xml

Tuesday, July 13, 2010

Page 165: Mobile Cross Platform

config.xml

Tuesday, July 13, 2010

Page 166: Mobile Cross Platform

config.xml

Tuesday, July 13, 2010

Page 167: Mobile Cross Platform

config.xml

Tuesday, July 13, 2010

Page 168: Mobile Cross Platform

config.xml

Tuesday, July 13, 2010

Page 169: Mobile Cross Platform

Demo

Tuesday, July 13, 2010

Page 170: Mobile Cross Platform

@nonken

Thank you

Tuesday, July 13, 2010