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 2010
5
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

v1.0 April 2010
7
Widgets/HTML5 apps

v1.0 April 2010
8

v1.0 April 2010
9
EventNinja, a mobile
app by example

Landscape
http://www.ﬂickr.com/photos/tillwe/146242691/

http://bit.ly/distimo-appstores
30th July 2009
14 Stores

30th July 2009
14 Stores23rd September 2009
23 Stores

30th July 2009
14 Stores23rd September 2009
23 Stores
2nd December 2009
26 Stores

October 2010
96 Apptores - WOA
http://www.wipconnector.com/appstores

Objective-C

Objective-C Symbian C

Objective-C JavaSymbian C

Java

.NETJava

.NETJava ...

Cross Platform

http://www.ﬂickr.com/photos/robadob/88901885/
Engine of the web

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

http://bit.ly/tomiahonen-2010-almanac
71% of all phones
have a modern xTML web browser.

App Store
without Apple!

Your Appshop facts

Your Appshop facts
• 100% HTML5

Your Appshop facts
• 100% HTML5
• Apps work ofﬂine

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

Layout
index.html

Design
style.css
Layout
index.html

Design
style.css
Layout
index.html
AJAX Library

Database
Design
style.css
Layout
index.html
AJAX Library

Layout
index.html
Design
style.css
Database
AJAX Library

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
Icon

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
=
Icon

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
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 great
HTML
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.ﬂickr.com/photos/kratz/1984004945/

http://www.ﬂickr.com/photos/mbiddulph/3087388964/

http://www.ﬂickr.com/photos/redstamp/4222841946/

• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...

Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL > WAC
http://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
• Your own Spec :)
http://phonegap.com/

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
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon

Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
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

IE anyone?

Communications

• JSONP
Communications

• JSONP
• YQL:An amazing tool!
Communications

Scaling and ppi
Never use absolute sizing!

Testing

Best Practices

Best Practices
• test on the desktop

Best Practices

Best Practices
• try-catch a lot

Best Practices
• try-catch a lot
• alert() IS your friend!

Best Practices
• 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
•...

EmbedJS
an approach to cross platform development

The Supported Devices
... and there will be more
to embed JavaScript on

http://www.ﬂickr.com/photos/tacoekkel/25538919/

http://www.ﬂickr.com/photos/hugo90/3916794427/

Shrink Your API
20kB 8kB

Simple queries > simple library function
Only ".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 Runtime
At Build Time

dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js

Tools
• Dragonﬂy
• Firebug
• Ripple
• Apparat.io

Testing services
• Perfecto Mobile - http://vf.perfectomobile.com
Promocode: vfwidgets
• Ask for phones here

Set headers... and learn
Send iPhone headers from within Safari for example

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.com
http://developer.vodafone.com/object-browser

Open Source
•developer.vodafone.com
http://developer.vodafone.com/object-browser
•github
http://github.com/wolframkriesing/object-browser

index.html

conﬁg.xml

@nonken
Thank you

Html5 Development

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Html5 Development

Semelhante a Html5 Development (20)

Mais de Nikolai Onken

Mais de Nikolai Onken (15)

Último

Último (20)

Html5 Development