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

App vs. Widget, HTML5 Apps - cross platform

May 08, 2015

Download

Technology

wolframkriesing

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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