mobile apps cross platform - webmontag frankfurt 2009

29
Mobile Apps Cross Platform Wolfram Kriesing, uxebu @wolframkriesing Using HTML, CSS, JavaScript Dienstag, 11. August 2009

Upload: wolframkriesing

Post on 30-Nov-2014

7.699 views

Category:

Technology


0 download

DESCRIPTION

A quick introduction on mobile apps using HTML, CSS; JavaScript - W3C Widgets, Phonegap, etc.

TRANSCRIPT

Page 1: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Mobile AppsCross Platform

Wolfram Kriesing, uxebu@wolframkriesing

Using HTML, CSS, JavaScript

Dienstag, 11. August 2009

Page 2: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

JavaScript AJAX

CSSdojo

BrowserOpenSource

Web2.0

FrontEndUsability UserExperience

djangomobile

Dienstag, 11. August 2009

Page 3: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Types of Mobile "Apps"

• Native App (from "some" app store)

• Websitelimited access to phone resources

• W3C Widgetaccess to what the widget runtime provides

• W3C Widget wrapped as native appdepends on it's runtime

Dienstag, 11. August 2009

Page 4: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Native Apps

• iPhone Objective-C

• Android, Blackberry Java

• Nokia Symbian C

• Sony Ericsson Java

• Window Mobile .NET

Cross Platform . . . Expensive + OUCH

Dienstag, 11. August 2009

Page 5: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Small apps.

Very focused.

Many platforms.

Dienstag, 11. August 2009

Page 6: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Mobile Moment

Dienstag, 11. August 2009

Page 7: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

HTMLCSS

JavaScript

Dienstag, 11. August 2009

Page 8: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

HTMLCSS

JavaScript

simplewell-known

fast to developeasy to develop

easy to testsimple text

Dienstag, 11. August 2009

Page 9: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Website as "App"

• Native look ok

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

• Access native functionality noe.g.: position, contacts, sensors, ...

• Offline not really

Dienstag, 11. August 2009

Page 10: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

W3C Widgets

• Native look ok

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

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

• Offline not really really

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

Dienstag, 11. August 2009

Page 11: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

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)

Dienstag, 11. August 2009

Page 12: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

What is a W3C Widget?

• HTML

• CSS

• JavaScript

• config.xml

• zip it

• rename to *.wgt

Dienstag, 11. August 2009

Page 13: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Almost for free

• Facebook widget

• Dashboard widget

• Website widget

• ...

Dienstag, 11. August 2009

Page 14: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Any Standards?

Dienstag, 11. August 2009

Page 15: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

W3C Widget Spec

• specifies packaging

Dienstag, 11. August 2009

Page 16: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

We want more!

Dienstag, 11. August 2009

Page 17: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Native Access

• Camera

• Telephony

• Geo location

• Accelerometer

• Compass

• Contacts

• ...

Dienstag, 11. August 2009

Page 18: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Multiple Ways

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

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

• W3C Spec http://dev.w3.org/2006/waf/widgets-api/

Dienstag, 11. August 2009

Page 19: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

But they are just specs :-(

Dienstag, 11. August 2009

Page 20: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Multiple Ways

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

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

• W3C Spec http://dev.w3.org/2006/waf/widgets-api/

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

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

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

• Google Chrome OS???

Dienstag, 11. August 2009

Page 21: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Runtimes

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

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

• W3C Spec http://dev.w3.org/2006/waf/widgets-api/

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

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

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

• Google Chrome OS???

Nokia S60

iPhone

Android

Blackberry

Dienstag, 11. August 2009

Page 22: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

PhoneGap

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

Open Source

Dienstag, 11. August 2009

Page 23: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Distribution?

Dienstag, 11. August 2009

Page 24: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Stores

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

Dienstag, 11. August 2009

Page 25: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

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

Stores

Dienstag, 11. August 2009

Page 26: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

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

Stores

Dienstag, 11. August 2009

Page 27: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Stores

443 apps318 apps

Dienstag, 11. August 2009

Page 28: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

Events

http://eventninja.net/mobile

Hands on?

28 Aug - Köln21-23 Sep - Düsseldorf

Dienstag, 11. August 2009

Page 29: Mobile Apps Cross Platform - Webmontag Frankfurt 2009

Wolfram Kriesing, uxebu @wolframkriesing

thx

http://blog.uxebu.com

Wolfram Kriesing, [email protected]

http://twitter.com/uxebuhttp://twitter.com/wolframkriesing

Dienstag, 11. August 2009