May 12 html5 apps - cross platform - upfront ug berlin

Mobile Apps
Cross Platform
HTML5 Apps
Wolfram Kriesing
uxebu

Mittwoch, 12. Mai 2010

We open the mobile web.


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


Cross Platform


Objective-C Symbian C Java

Java .NET ...

HTML


Engine of the web

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


Why HTML?

•lot of devs
•easy to write
•common
•easy to test
•stable standard
•widely spread


iPhone - First usable mobile browser

http://www.ﬂickr.com/photos/chris_radcli!/2947219465/


71% of all phones
have a modern xTML web browser.

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


App Store
without Apple!


all the (smart)phones have browsers

HTML works everywhere!

low hanging fruit


http://www.ﬂickr.com/photos/halfbisqued/2353845688

=
W3C Widget,
Vodafone360 App


What is a Widget?


Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
• Website
limited access to phone resources

• W3C Widget
access by widget runtime

• Wrapped W3C Widget
access depends on it's runtime


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/


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/


Multiple Ways
• JIL Spechttp://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/


Runtimes
Nokia S60
• JIL Spechttp://www.jil.org/

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

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

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

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

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

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


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


May 12 html5 apps - cross platform - upfront ug berlin

Weitere ähnliche Inhalte

Ähnlich wie May 12 html5 apps - cross platform - upfront ug berlin (20)

May 12 html5 apps - cross platform - upfront ug berlin