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.

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

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

Mittwoch, 12. Mai 2010

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

Mittwoch, 12. Mai 2010

http://bit.ly/distimo-appstores

30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores

Mittwoch, 12. Mai 2010

Cross Platform

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

Objective-C JavaSymbian C

.NETJava ...

Mittwoch, 12. Mai 2010

HTML

Mittwoch, 12. Mai 2010

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

Engine of the web

Mittwoch, 12. Mai 2010

Why HTML?

•lot of devs

•easy to write

•common

•easy to test

•stable standard

•widely spread

Mittwoch, 12. Mai 2010

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

iPhone - First usable mobile browser

Mittwoch, 12. Mai 2010

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

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

Mittwoch, 12. Mai 2010

App Store without Apple!

Mittwoch, 12. Mai 2010

HTML works everywhere!

all the (smart)phones have browsers

low hanging fruit

Mittwoch, 12. Mai 2010

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

=W3C Widget,

Vodafone360 App

Mittwoch, 12. Mai 2010

What is a Widget?

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

}?

Mittwoch, 12. Mai 2010

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

Mittwoch, 12. Mai 2010

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

Mittwoch, 12. Mai 2010

Database

Designstyle.css

Layoutindex.html

AJAX Library

Mittwoch, 12. Mai 2010

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

W3C Widget =Icon

Mittwoch, 12. Mai 2010

What is a W3C Widget?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt

Mittwoch, 12. Mai 2010

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

Mittwoch, 12. Mai 2010

On any phone?

Mittwoch, 12. Mai 2010

HTML

native

Mittwoch, 12. Mai 2010

HTML

native

W3C Widgets

native

Mittwoch, 12. Mai 2010

...yes

W3C Widgets

not purely

but greatHTML

support

Mittwoch, 12. Mai 2010

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Mittwoch, 12. Mai 2010

A Phone is ...

Mittwoch, 12. Mai 2010

http://www.flickr.com/photos/kratz/1984004945/

Mittwoch, 12. Mai 2010

http://www.flickr.com/photos/mbiddulph/3087388964/

Mittwoch, 12. Mai 2010

http://www.flickr.com/photos/redstamp/4222841946/

Mittwoch, 12. Mai 2010

• Camera

• Compass

• GPS

• Accelerometer

• Calendar

• Email

• Address book

• Watch

• Alarm clock

• ...

Mittwoch, 12. Mai 2010

Multiple Ways

• W3C Spechttp://w3.org/2009/dap/

• JIL Spechttp://www.jil.org/

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

Mittwoch, 12. Mai 2010

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/

Mittwoch, 12. Mai 2010

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

Mittwoch, 12. Mai 2010

PhoneGap"An express goal of the PhoneGap project

is for the project to not exist."

Open Source

Mittwoch, 12. Mai 2010

http://phonegap.pbworks.com/Roadmap

Mittwoch, 12. Mai 2010

Some numbers

Mittwoch, 12. Mai 2010

Some numbers

•iPhone App = 364 kB

•JavaScript, HTML, CSS, media = 124 kB

• that means PhoneGap+SDK foot print = 240 kB

Mittwoch, 12. Mai 2010

Native Look

vs.

One style cross platform

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

EventNinja

Mittwoch, 12. Mai 2010

Database

Layoutindex.html

Designstyle.css

AJAX LibraryConfiguration

config.xml

Icon

Events,a Calendar

Mittwoch, 12. Mai 2010

http://bit.ly/webdev-events

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

Mittwoch, 12. Mai 2010

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

Mittwoch, 12. Mai 2010

Want to see it in action?

Download it from your store.

Contact us.

Mittwoch, 12. Mai 2010

thx

http://uxebu.com

Wolfram Kriesing, uxebu

wolfram@uxebu.comhttp://twitter.com/uxebu

http://twitter.com/wolframkriesing

Mittwoch, 12. Mai 2010