HTML5 Apps Cross Platform - SWDC 2010, Stockholm

App vs. Widget

HTML5 Apps
Wolfram Kriesing
uxebu

Donnerstag, 3. Juni 2010

We open the mobile web.


JavaScript AJAX
FrontEnd
Usability UserExperience

CSS mobile
Browser Web2.0
dojo
TouchScroll OpenSource

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


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

http://bit.ly/distimo-appstores


Objective-C Symbian C Java

Java .NET ...

Cross Platform


HTML


Engine of the web

http://www.ﬂickr.com/photos/robadob/88901885/


Photos

Videos

Docs

Apps


Why Widgets?


http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/


App Store
without Apple!


What is a Widget?


Layout
index.html

Design
style.css

AJAX Library

Database


Layout
index.html

W3C Widget =
Design
Icon style.css

Configuration
AJAX Library config.xml

Database


What is a W3C Widget?

• HTML
• CSS
• JavaScript
• config.xml
• zip it
• rename to *.wgt

DONE! http://www.ﬂickr.com/photos/sundazed/2704578067/


Tools?


On any phone?


HTML
tive
na


W3C Widgets
ti ve
na

HTML
tive
na


W3C Widgets

...yes
not purely

but great
HTML
support

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

• BONDI Spec
http://bondi.omtp.org/


System Info

Contacts
Network Info

Phone Info Camera
File
Audio
GPS SMS, MMS, ...

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


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


kinda W3C
Widgets iP****

l
m
pure W3C nﬁ
co
g.x Platform adaptations
Widgets

PhoneGap
Business and
Application logic

in
fo
.p
lis
t

Nokia WRT Android

PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."

Open Source


http://phonegap.pbworks.com/Roadmap


Some numbers

• iPhone App = 364 kB
• JavaScript, HTML, CSS, media = 124 kB
• PhoneGap+SDK = 240 kB


Dojo mobile


Two approaches

custom, simplest build script
http://github.com/wolframkriesing/dojo-mobile

using require.js
http://github.com/klipstein/dojo-mobile


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


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


build.sh


dojo-blackberry.js

dojo-blackberry46.js

dojo-nokia-wrt.js

dojo-opera.js

dojo-webkit-mobile.js

dojo-windows-mobile.js


EventNinja


Events, Layout
index.html

a Calendar

Design
Icon style.css

Database

Configuration
AJAX Library config.xml


http://bit.ly/webdev-events


http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/


Want to see it in action?

Download it from your store.

Contact us.


thx

http://uxebu.com

Wolfram Kriesing, uxebu

wolfram@uxebu.com
http://twitter.com/uxebu
http://twitter.com/wolframkriesing


HTML5 Apps Cross Platform - SWDC 2010, Stockholm

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5 Apps Cross Platform - SWDC 2010, Stockholm

Ähnlich wie HTML5 Apps Cross Platform - SWDC 2010, Stockholm (6)

Mehr von wolframkriesing

Mehr von wolframkriesing (20)

HTML5 Apps Cross Platform - SWDC 2010, Stockholm