html5 development

Mobile app development

Nikolai Onken@nonken - uxebu

Friday, October 29, 2010

@nonken


We open the mobile web.


© 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.


• Widgets a.k.a. HTML5 apps



• EventNinja, a mobile app by example




• Mobile development guide




• 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




October 201096 Apptores - WOA

http://www.wipconnector.com/appstores




Objective-C


Objective-C Symbian C


Objective-C JavaSymbian C



Java



.NETJava



.NETJava ...


Cross Platform


HTML


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

Engine of the web




http://bit.ly/tomiahonen-2010-almanac




http://bit.ly/tomiahonen-2010-almanac

71% of all phoneshave a modern xTML web browser.




App Store without Apple!


Your Appshop facts


Your Appshop facts

• 100% HTML5


Your Appshop facts

• 100% HTML5

• Apps work offline


Your Appshop facts

• 100% HTML5


• 43.000.000 downloads since december 2009


Your Appshop facts

• 100% HTML5



• Payment gateway


Your Appshop facts

• 100% HTML5



• Payment gateway

• It feels native


}


}?


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 LibraryConfiguration

config.xml


Layoutindex.html

Designstyle.css

Database


config.xml

Icon


Layoutindex.html

Designstyle.css

Database


config.xml

=Icon


Layoutindex.html

Designstyle.css

Database


config.xml

Widget /html5 app =

Icon


What is a HTML5 app?


What is a HTML5 app?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt


On any phone?


...yes

W3C Widgets


...yes

W3C Widgets

not purely

but greatHTML

support


Almost for free


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

• ...


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 > WAChttp://www.jil.org/

• BONDI Spechttp://bondi.omtp.org/

• Your own Spec :)http://phonegap.com/


http://dev.w3.org/2006/waf/widgets-api/

http://dev.w3.org/2006/waf/widgets-api/

http://www.jil.org

http://www.jil.org

http://bondi.omtp.org




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





System Info

Network Info

Phone Info

File





System Info

Network Info

Phone Info

File

GPS





System Info

Network Info

Phone Info

File

GPS

Contacts





System Info

Network Info

Phone Info

File

GPS

Contacts

Camera





System Info

Network Info

Phone Info

File

GPS

Contacts

Camera

Audio





System Info

Network Info

Phone Info

File

GPS

Contacts

Camera

Audio

SMS, MMS, ...




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



var player = Widget.Multimedia.AudioPlayer;player.open("myAudioFile.mp3");player.play(1);



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

Icon


Database

Layoutindex.html

Designstyle.css


config.xml

Icon

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



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

<a href=””>Hi</a>Friday, October 29, 2010

IE anyone?


Communications


• JSONP

Communications


• JSONP

• YQL: An amazing tool!

Communications


Scaling and ppiNever use absolute sizing!


Testing


Best Practices


Best Practices• test on the desktop



• test on the desktop





• try-catch a lot





• try-catch a lot

• alert() IS your friend!





• try-catch a lot

• alert() IS your friend!

• simplify your CSS


Ripple


Libraries


What is out there?


What is out there?

•XUI


What is out there?

•XUI

•Jo


What is out there?

•XUI

•Jo

•Sencha Touch


What is out there?

•XUI

•Jo

•Sencha Touch

•jQuery Mobile (coming)


What is out there?

•XUI

•Jo

•Sencha Touch


•Dojo mobile


What is out there?

•XUI

•Jo

•Sencha Touch


•Dojo mobile

•EmbedJS


What is out there?

•XUI

•Jo

•Sencha Touch


•Dojo mobile

•EmbedJS

•...


EmbedJSan approach to cross platform development


The Supported Devices

... and there will be moreto embed JavaScript on


http://www.flickr.com/photos/tacoekkel/25538919/




http://www.flickr.com/photos/hugo90/3916794427/




Shrink Your API

20kB 8kB


Simple queries > simple library functionOnly ".class" and "#id" queries


vs.



vs.


Full fledged queries > Full blown library function


vs.


Full fledged queries > Full blown library function

13 LOC

~200 LOC


At RuntimeAt Build Time


dojo-blackberry.js

dojo-blackberry46.js

dojo-nokia-wrt.js

dojo-opera.js

dojo-webkit-mobile.js

dojo-windows-mobile.js


Tools

• Dragonfly

• Firebug

• Ripple

• Apparat.io


Testing services

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

• Ask for phones here


Set headers... and learn

Send iPhone headers from within Safari for exampleFriday, October 29, 2010

Hmmmm, alert(“Hi”);


Create routines


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


Open Source

•a developer must have


Open Source


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


http://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


Demo


@nonken

Thank you


html5 development

Technology

simple queries

simple library

company names

2010open sourcea

html5 apps

2010best practices

2010create

xuijosencha