html5 development

Mobile app development

Nikolai Onken@nonken - uxebu

Friday, October 29, 2010

@nonken

We open the mobile web.

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

• 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

.NETJava

.NETJava ...

Cross Platform

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

Engine of the web

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

71% of all phoneshave a modern xTML web browser.

App Store without Apple!

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

•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

• ...

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

• alert() IS your friend!

• try-catch a lot

• alert() IS your friend!

• simplify your CSS

Ripple

Libraries

What is out there?

•XUI

What is out there?

•XUI

What is out there?

•XUI

•Sencha Touch

What is out there?

•XUI

•Sencha Touch

•jQuery Mobile (coming)

What is out there?

•XUI

•Sencha Touch

•Dojo mobile

What is out there?

•XUI

•Sencha Touch

•Dojo mobile

•EmbedJS

What is out there?

•XUI

•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

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

• 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

• 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

html5 development

simple queries

simple library

company names

2010open sourcea

html5 apps

2010best practices

2010create

xuijosencha

Technology

html5- the boosting era of web development

html500: html5 and css3 web development · pdf filecourse...

html5 game development

web development with html5, css3 & javascript

mobile web development with html5

the why of html5 for games development

html5 or android for mobile development?

ready to play: javascript / html5 game development

mobile html5 game development - design for performance

bones – html5 wordpress theme development

html5 devconf 2014 - intro to html5 mobile game development

html5 app development - advantages & drawbacks

html5 game development with canvas

windows store application development using html5

html5 game development introduction

ny html5 - game development with html5 & javascript

responsive html5 development

bones – html5 wordpress theme development kyle spehar

mobile development with phonegap & html5

html5 game development - game engines, frameworks & more