mobile cross platform

Mobile app development

Nikolai Onken@nonken - uxebu

Tuesday, July 13, 2010

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.

todays schedule

• Widgets a.k.a. HTML5 apps

• EventNinja, a mobile app by example

• Mobile development guide

• Object browser

Widgets/HTML5 apps

EventNinja, a mobile app by example

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

http://bit.ly/distimo-appstores

30th July 200914 Stores

30th July 200914 Stores23rd September 2009

23 Stores

30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores

Objective-C

Objective-C Symbian C

Objective-C JavaSymbian C

.NETJava

.NETJava ...

Cross Platform

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

Engine of the web

Layoutindex.html

Designstyle.css

Layoutindex.html

Designstyle.css

Layoutindex.html

AJAX Library

Database

Designstyle.css

Layoutindex.html

AJAX Library

Layoutindex.html

Designstyle.css

Database

AJAX Library

Layoutindex.html

Designstyle.css

Database

AJAX Library

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

Layoutindex.html

Designstyle.css

Database

config.xml

Layoutindex.html

Designstyle.css

Database

config.xml

Layoutindex.html

Designstyle.css

Database

config.xml

Widget =Icon

What is a Widget?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt

On any phone?

W3C Widgets

...yes

W3C Widgets

...yes

W3C Widgets

not purely

but greatHTML

support

Almost for free

•Facebook widget

Almost for free

•Facebook widget

•Dashboard widget

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

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

A Phone is ...

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

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

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

• Camera

• Compass

• GPS

• Accelerometer

• Calendar

• Email

• Address book

• Watch

• Alarm clock

• ...

Multiple Ways

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

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

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

System Info

Network Info

Phone Info

System Info

Network Info

Phone Info

System Info

Network Info

Phone Info

System Info

Network Info

Phone Info

Contacts

System Info

Network Info

Phone Info

Contacts

Camera

System Info

Network Info

Phone Info

Contacts

Camera

System Info

Network Info

Phone Info

Contacts

Camera

SMS, MMS, ...

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

EventNinja

Database

Layoutindex.html

Designstyle.css

config.xml

Database

Layoutindex.html

Designstyle.css

config.xml

Database

Layoutindex.html

Designstyle.css

config.xml

Events,a Calendar

http://bit.ly/webdev-events

Mobile dev guide

Do what your runtime can do

Not more

Remember JavaScript

CSS3 - mobile runtimes are often ahead

Semantics?A short story

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

IE anyone?

Communications

• JSONP

Communications

• JSONP

• YQL: An amazing tool!

Communications

Scaling and ppiNever use absolute sizing!

Testing

Stay on the desktop as long as possible

Really

ReallyReally

ReallyReallyReally

ReallyReallyReallyReally

ReallyReallyReallyReallyReally

• Dragonfly

• Firebug

Testing services

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

• Ask for phones here

Set headers... and learn

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

Hmmmm, alert(“Hi”);

Create routines

• Test the unbuild source on the desktop

Create routines

• Test the build source on the desktop

Create routines

• Test the build source on a mobile browser

Create routines

• Test the build source on a mobile browser

• Package and then test the app on the device

Object Browser

For devs?

Open Source

•a developer must have

Open Source

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

Open Source

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

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

index.html

config.xml

@nonken

Thank you

mobile cross platform

company names mentioned

html5 apps eventninja

2010open sourcea developer

2010create routines test

mobile app

unbuild source

cssdatabaseajax libraryconfigurationconfig

build source

Technology

phonegap - cross platform for mobile

cross platform-mobile-applications

mobile cross platform xamarin developer

cross platform mobile backend with mobile services

cross-platform mobile with c#

building cross platform mobile applications

to build cross-platform mobile libraries - fnordig.de · -...

cross-platform mobile mapping with react...

cross platform-mobile-applications-final

cross-platform mobile application development2...

building cross platform mobile solutions

cross platform mobile development

cross-platform mobile development sxasa cross-platform...

phonegap cross platform mobile app development platform

mobile cross platform

cross platform mobile web apps

cross-platform mobile development - apan - sign in...

cross-platform mobile app development with...

why & which mobile cross platform?

cross platform mobile technologies