html5 apps cross platform - swdc 2010, stockholm

App vs. Widget

HTML5 AppsWolfram Kriesing

uxebu

Donnerstag, 3. Juni 2010

We open the mobile web.


JavaScript AJAX

CSS

dojoBrowser

OpenSourceWeb2.0

FrontEnd

Usability UserExperience

mobile

TouchScroll


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


http://bit.ly/distimo-appstores



30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores




Objective-C JavaSymbian C

.NETJava ...


Cross Platform


HTML


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

Engine of the web




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?


}?


Database

Designstyle.css

Layoutindex.html

AJAX Library


Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

W3C Widget =Icon


What is a W3C Widget?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt


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




Tools?


On any phone?


HTML

native


HTML

native

W3C Widgets

native


...yes

W3C Widgets

not purely

but greatHTML

support


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

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


http://bondi.omtp.org

http://bondi.omtp.org

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://bit.ly/vf-jil-docs

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

if (Widget.Device.RadioInfo.isRoaming){

alert("Money Money Money");

}


Platform adaptations

Business andApplication logic

confi

g.xml

PhoneG

ap

info.plist

Android

iP****

Nokia WRT

pure W3CWidgets

kinda W3CWidgets


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

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

http://github.com/klipstein/dojo-mobileusing require.js


http://github.com/klipstein/dojo-mobile




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




http://www.flickr.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


Database

Layoutindex.html

Designstyle.css

AJAX LibraryConfiguration

config.xml

Icon

Events,a Calendar


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

[email protected]://twitter.com/uxebu

http://twitter.com/wolframkriesing


mailto:[email protected]


http://blog.uxebu.com

http://blog.uxebu.com





html5 apps cross platform - swdc 2010, stockholm

Technology

html donnerstag

xmldatabase donnerstag

comwolframkri donnerstag

comroadmap donnerstag

open source donnerstag

greathtml support donnerstag

html tive na donnerstag

stores http