app vs. widget, html5 apps - cross platform

51
App vs. Widget HTML5 Apps Wolfram Kriesing uxebu Montag, 17. Mai 2010

Upload: wolframkriesing

Post on 08-May-2015

12.156 views

Category:

Technology


1 download

DESCRIPTION

Slides from the Mobile Moday Developer Day Munich about "App vs. Widget - HTML5 Apps".We show how to get to multiple platforms with the standard web technologies HTML, JavaScript and CSS.

TRANSCRIPT

Page 1: App vs. Widget, HTML5 Apps -  cross platform

App vs. Widget

HTML5 AppsWolfram Kriesing

uxebu

Montag, 17. Mai 2010

Page 2: App vs. Widget, HTML5 Apps -  cross platform

Wolfram Kriesinguxebu

App vs. Widget

HTML5 Apps

Montag, 17. Mai 2010

Page 3: App vs. Widget, HTML5 Apps -  cross platform

We open the mobile web.

Montag, 17. Mai 2010

Page 4: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 5: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 6: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 7: App vs. Widget, HTML5 Apps -  cross platform

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

Montag, 17. Mai 2010

Page 8: App vs. Widget, HTML5 Apps -  cross platform

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

Montag, 17. Mai 2010

Page 9: App vs. Widget, HTML5 Apps -  cross platform

http://bit.ly/distimo-appstores

30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores

Montag, 17. Mai 2010

Page 10: App vs. Widget, HTML5 Apps -  cross platform

Cross Platform

Montag, 17. Mai 2010

Page 11: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 12: App vs. Widget, HTML5 Apps -  cross platform

Objective-C JavaSymbian C

.NETJava ...

Montag, 17. Mai 2010

Page 13: App vs. Widget, HTML5 Apps -  cross platform

HTML

Montag, 17. Mai 2010

Page 14: App vs. Widget, HTML5 Apps -  cross platform

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

Engine of the web

Montag, 17. Mai 2010

Page 15: App vs. Widget, HTML5 Apps -  cross platform

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

iPhone - First usable mobile browser

Montag, 17. Mai 2010

Page 16: App vs. Widget, HTML5 Apps -  cross platform

http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/

Montag, 17. Mai 2010

Page 17: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 18: App vs. Widget, HTML5 Apps -  cross platform

App Store without Apple!

Montag, 17. Mai 2010

Page 19: App vs. Widget, HTML5 Apps -  cross platform

What is a Widget?

Montag, 17. Mai 2010

Page 20: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 21: App vs. Widget, HTML5 Apps -  cross platform

}?

Montag, 17. Mai 2010

Page 22: App vs. Widget, HTML5 Apps -  cross platform

Database

Designstyle.css

Layoutindex.html

AJAX Library

Montag, 17. Mai 2010

Page 23: App vs. Widget, HTML5 Apps -  cross platform

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

W3C Widget =Icon

Montag, 17. Mai 2010

Page 24: App vs. Widget, HTML5 Apps -  cross platform

What is a W3C Widget?

Montag, 17. Mai 2010

Page 25: App vs. Widget, HTML5 Apps -  cross platform

What is a W3C Widget?

Montag, 17. Mai 2010

Page 26: App vs. Widget, HTML5 Apps -  cross platform

What is a W3C Widget?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt

Montag, 17. Mai 2010

Page 27: App vs. Widget, HTML5 Apps -  cross platform

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

Montag, 17. Mai 2010

Page 28: App vs. Widget, HTML5 Apps -  cross platform

On any phone?

Montag, 17. Mai 2010

Page 29: App vs. Widget, HTML5 Apps -  cross platform

HTML

native

Montag, 17. Mai 2010

Page 30: App vs. Widget, HTML5 Apps -  cross platform

HTML

native

W3C Widgets

native

Montag, 17. Mai 2010

Page 31: App vs. Widget, HTML5 Apps -  cross platform

...yes

W3C Widgets

not purely

but greatHTML

support

Montag, 17. Mai 2010

Page 32: App vs. Widget, HTML5 Apps -  cross platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Montag, 17. Mai 2010

Page 33: App vs. Widget, HTML5 Apps -  cross platform

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Montag, 17. Mai 2010

Page 34: App vs. Widget, HTML5 Apps -  cross platform

A Phone is ...

Montag, 17. Mai 2010

Page 35: App vs. Widget, HTML5 Apps -  cross platform

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

Montag, 17. Mai 2010

Page 36: App vs. Widget, HTML5 Apps -  cross platform

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

Montag, 17. Mai 2010

Page 37: App vs. Widget, HTML5 Apps -  cross platform

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

Montag, 17. Mai 2010

Page 38: App vs. Widget, HTML5 Apps -  cross platform

• Camera

• Compass

• GPS

• Accelerometer

• Calendar

• Email

• Address book

• Watch

• Alarm clock

• ...

Montag, 17. Mai 2010

Page 39: App vs. Widget, HTML5 Apps -  cross platform

Multiple Ways

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

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

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

Montag, 17. Mai 2010

Page 41: App vs. Widget, HTML5 Apps -  cross platform

PhoneGap"An express goal of the PhoneGap project

is for the project to not exist."

Open Source

Montag, 17. Mai 2010

Page 42: App vs. Widget, HTML5 Apps -  cross platform

http://phonegap.pbworks.com/Roadmap

Montag, 17. Mai 2010

Page 43: App vs. Widget, HTML5 Apps -  cross platform

EventNinja

Montag, 17. Mai 2010

Page 44: App vs. Widget, HTML5 Apps -  cross platform

Database

Layoutindex.html

Designstyle.css

AJAX LibraryConfiguration

config.xml

Icon

Events,a Calendar

Montag, 17. Mai 2010

Page 45: App vs. Widget, HTML5 Apps -  cross platform

http://bit.ly/webdev-events

Montag, 17. Mai 2010

Page 46: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 47: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 48: App vs. Widget, HTML5 Apps -  cross platform

Montag, 17. Mai 2010

Page 49: App vs. Widget, HTML5 Apps -  cross platform

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

Montag, 17. Mai 2010

Page 50: App vs. Widget, HTML5 Apps -  cross platform

Want to see it in action?

Download it from your store.

Contact us.

Montag, 17. Mai 2010