may 12 html5 apps - cross platform - upfront ug berlin

Mobile AppsCross Platform

HTML5 AppsWolfram Kriesing

uxebu

Mittwoch, 12. Mai 2010

We open the mobile web.


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


http://bit.ly/distimo-appstores



30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores




Cross Platform


Objective-C JavaSymbian C

.NETJava ...


HTML


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

Engine of the web




Why HTML?

•lot of devs

•easy to write

•common

•easy to test

•stable standard

•widely spread


http://www.flickr.com/photos/chris_radcli!/2947219465/

iPhone - First usable mobile browser




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

71% of all phoneshave a modern!xTML web browser.




App Store without Apple!


HTML works everywhere!

all the (smart)phones have browsers

low hanging fruit


http://www.flickr.com/photos/halfbisqued/2353845688

=W3C Widget,

Vodafone360 App



What is a Widget?


}?


Types of "Apps"

• Preinstalled

• Native App (from "some" app store)

• Websitelimited access to phone resources

• W3C Widgetaccess by widget runtime

• Wrapped W3C Widgetaccess depends on it's runtime


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/




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://dev.w3.org/2006/waf/widgets-api/


http://www.jil.org

http://www.jil.org

http://bondi.omtp.org

Multiple Ways

•JIL Spec http://www.jil.org/

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

•W3C Spec http://w3.org/2009/dap/

•PhoneGap http://phonegap.pbworks.com/

•Nokia WRT http://bit.ly/nokia-WRT-APIs

•Appcelerator http://www.codestrong.com/timobile/api/


http://www.appcelerator.com

http://www.jil.org

http://www.jil.org



http://bit.ly/nokia-WRT-APIs



Runtimes

•JIL Spec http://www.jil.org/

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

•W3C Spec http://w3.org/2009/dap/

•PhoneGap http://phonegap.pbworks.com/

•Nokia WRT http://bit.ly/nokia-WRT-APIs

•Appcelerator http://www.codestrong.com/timobile/api/

Nokia S60

iPhone

Android

Blackberry

WindowsMobile



http://www.jil.org

http://www.jil.org

http://www.jil.org

























PhoneGap"An express goal of the PhoneGap project

is for the project to not exist."

Open Source


http://phonegap.pbworks.com/Roadmap




Some numbers


Some numbers

•iPhone App = 364 kB

•JavaScript, HTML, CSS, media = 124 kB

• that means PhoneGap+SDK foot print = 240 kB


Native Look

vs.

One style cross platform


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






may 12 html5 apps - cross platform - upfront ug berlin

Documents

website limited

preinstalled

app store

layout index

runtime mittwoch

photostillwe146242691

landscape

html