Cross Platform Mobile Apps Using HTML, CSS and JavaScript

Mobile Apps
Cross Platform
Using HTML, CSS, JavaScript

Wolfram Kriesing, uxebu
@wolframkriesing

Freitag, 25. September 2009

JavaScript FrontEnd AJAX
Usability
UserExperience
Browser CSS
django dojo
mobile Web2.0
widgets OpenSource

Wolfram Kriesing, uxebu @wolframkriesing


Stores

30th July 2009
14 Stores

http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf



Stores

23rd30th July 2009
September 2009
23 Stores
14 Stores




Wanna write native
Apps for each?



Native Apps

• iPhone Objective-C
• Android, Blackberry Java
• Nokia Symbian C
• Sony Ericsson Java
• Window Mobile .NET
Cross Platform
Expensive and OUCH anyway


Types of Mobile "Apps"



Types of Mobile "Apps"

• Preinstalled
• Native App (from "some" app store)
• Websitelimited access to phone resources

• W3C Widget
access to what the widget runtime provides

• W3C Widget wrapped as native app
depends on it's runtime



Small apps.

Very focused.

Many platforms.



Mobile Moment



we
le l l-k
p no
s im wn
HTML
te st
easy to CSS simp
le te
xt
JavaScript
easy
velop to d
fast to de evel
op



Website as "App"

• Native look ok
• Well-known technologies
(HTML, CSS, JavaScript)
super

• Access native functionality
e.g.: position, contacts, sensors, ...
no

• Offline not really



W3C Widgets
http://www.quirksmode.org/blog/archives/2009/04/introduction_to.html

• Native look ok
• Well-known technologies
(HTML, CSS, JavaScript)
super

• Access native functionality
e.g.: position, contacts, sensors, ...
no yes

• Offline not really really



What is a W3C Widget?

• Native app on the phone
• Not a website!
• Can do AJAX, SVG, CSS Transitions, etc.
• Has it's own runtime (mostly)




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



Almost for free

• Facebook widget
• Dashboard widget
• Website widget
• TV Widget
• ...



Any Standards?



W3C Widget Spec

• specifies packaging



We want more!



Native Access

• Camera
• Telephony
• Geo location
• Accelerometer
• Compass
• Contacts
• ...


Multiple Ways

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

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

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



But they are just specs :-(



Multiple Ways



• 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/

• Google Chrome OS???


Runtimes


Nokia S60

• W3C Spec http://w3.org/2009/dap/ iPhone
• PhoneGap http://phonegap.pbworks.com/
Android
• Nokia WRT http://bit.ly/nokia-WRT-APIs

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

• Google Chrome OS??? Windows
Mobile



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

Open Source



Some numbers

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



Distribution?



Stores




thx

http://blog.uxebu.com

Wolfram Kriesing, uxebu
wolfram@uxebu.com
http://twitter.com/uxebu
http://twitter.com/wolframkriesing



Cross Platform Mobile Apps Using HTML, CSS and JavaScript

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Cross Platform Mobile Apps Using HTML, CSS and JavaScript

Ähnlich wie Cross Platform Mobile Apps Using HTML, CSS and JavaScript (9)

Mehr von wolframkriesing

Mehr von wolframkriesing (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Cross Platform Mobile Apps Using HTML, CSS and JavaScript