may 12 html5 apps - cross platform - upfront ug berlin
DESCRIPTION
TRANSCRIPT
![Page 1: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/1.jpg)
Mobile AppsCross Platform
HTML5 AppsWolfram Kriesing
uxebu
Mittwoch, 12. Mai 2010
![Page 2: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/2.jpg)
We open the mobile web.
Mittwoch, 12. Mai 2010
![Page 3: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/3.jpg)
Mittwoch, 12. Mai 2010
![Page 4: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/4.jpg)
Mittwoch, 12. Mai 2010
![Page 5: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/5.jpg)
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Mittwoch, 12. Mai 2010
![Page 6: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/6.jpg)
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Mittwoch, 12. Mai 2010
![Page 7: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/7.jpg)
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores2nd December 2009
26 Stores
Mittwoch, 12. Mai 2010
![Page 8: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/8.jpg)
Cross Platform
Mittwoch, 12. Mai 2010
![Page 9: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/9.jpg)
Mittwoch, 12. Mai 2010
![Page 10: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/10.jpg)
Objective-C JavaSymbian C
.NETJava ...
Mittwoch, 12. Mai 2010
![Page 11: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/11.jpg)
HTML
Mittwoch, 12. Mai 2010
![Page 12: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/12.jpg)
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Mittwoch, 12. Mai 2010
![Page 13: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/13.jpg)
Why HTML?
•lot of devs
•easy to write
•common
•easy to test
•stable standard
•widely spread
Mittwoch, 12. Mai 2010
![Page 14: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/14.jpg)
http://www.flickr.com/photos/chris_radcli!/2947219465/
iPhone - First usable mobile browser
Mittwoch, 12. Mai 2010
![Page 15: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/15.jpg)
http://bit.ly/tomiahonen-2010-almanac
71% of all phoneshave a modern!xTML web browser.
Mittwoch, 12. Mai 2010
![Page 16: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/16.jpg)
App Store without Apple!
Mittwoch, 12. Mai 2010
![Page 17: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/17.jpg)
HTML works everywhere!
all the (smart)phones have browsers
low hanging fruit
Mittwoch, 12. Mai 2010
![Page 18: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/18.jpg)
http://www.flickr.com/photos/halfbisqued/2353845688
=W3C Widget,
Vodafone360 App
Mittwoch, 12. Mai 2010
![Page 19: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/19.jpg)
What is a Widget?
Mittwoch, 12. Mai 2010
![Page 20: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/20.jpg)
Mittwoch, 12. Mai 2010
![Page 21: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/21.jpg)
}?
Mittwoch, 12. Mai 2010
![Page 22: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/22.jpg)
Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
• Websitelimited access to phone resources
• W3C Widgetaccess by widget runtime
• Wrapped W3C Widgetaccess depends on it's runtime
Mittwoch, 12. Mai 2010
![Page 23: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/23.jpg)
Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
• Websitelimited access to phone resources
• W3C Widgetaccess by widget runtime
• Wrapped W3C Widgetaccess depends on it's runtime
Mittwoch, 12. Mai 2010
![Page 24: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/24.jpg)
Database
Designstyle.css
Layoutindex.html
AJAX Library
Mittwoch, 12. Mai 2010
![Page 25: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/25.jpg)
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
W3C Widget =Icon
Mittwoch, 12. Mai 2010
![Page 26: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/26.jpg)
What is a W3C Widget?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
• rename to *.wgt
Mittwoch, 12. Mai 2010
![Page 27: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/27.jpg)
DONE!http://www.flickr.com/photos/sundazed/2704578067/
Mittwoch, 12. Mai 2010
![Page 28: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/28.jpg)
On any phone?
Mittwoch, 12. Mai 2010
![Page 29: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/29.jpg)
HTML
native
Mittwoch, 12. Mai 2010
![Page 30: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/30.jpg)
HTML
native
W3C Widgets
native
Mittwoch, 12. Mai 2010
![Page 31: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/31.jpg)
...yes
W3C Widgets
not purely
but greatHTML
support
Mittwoch, 12. Mai 2010
![Page 32: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/32.jpg)
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Mittwoch, 12. Mai 2010
![Page 33: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/33.jpg)
A Phone is ...
Mittwoch, 12. Mai 2010
![Page 34: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/34.jpg)
http://www.flickr.com/photos/kratz/1984004945/
Mittwoch, 12. Mai 2010
![Page 35: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/35.jpg)
http://www.flickr.com/photos/mbiddulph/3087388964/
Mittwoch, 12. Mai 2010
![Page 36: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/36.jpg)
http://www.flickr.com/photos/redstamp/4222841946/
Mittwoch, 12. Mai 2010
![Page 37: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/37.jpg)
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Address book
• Watch
• Alarm clock
• ...
Mittwoch, 12. Mai 2010
![Page 38: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/38.jpg)
Multiple Ways
• W3C Spechttp://w3.org/2009/dap/
• JIL Spechttp://www.jil.org/
• BONDI Spechttp://bondi.omtp.org/
Mittwoch, 12. Mai 2010
![Page 39: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/39.jpg)
Multiple Ways
•JIL Spec http://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/
Mittwoch, 12. Mai 2010
![Page 40: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/40.jpg)
Runtimes
•JIL Spec http://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/
Nokia S60
iPhone
Android
Blackberry
WindowsMobile
Mittwoch, 12. Mai 2010
![Page 41: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/41.jpg)
PhoneGap"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Mittwoch, 12. Mai 2010
![Page 42: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/42.jpg)
http://phonegap.pbworks.com/Roadmap
Mittwoch, 12. Mai 2010
![Page 43: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/43.jpg)
Some numbers
Mittwoch, 12. Mai 2010
![Page 44: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/44.jpg)
Some numbers
•iPhone App = 364 kB
•JavaScript, HTML, CSS, media = 124 kB
• that means PhoneGap+SDK foot print = 240 kB
Mittwoch, 12. Mai 2010
![Page 45: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/45.jpg)
Native Look
vs.
One style cross platform
Mittwoch, 12. Mai 2010
![Page 46: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/46.jpg)
Mittwoch, 12. Mai 2010
![Page 47: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/47.jpg)
Mittwoch, 12. Mai 2010
![Page 48: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/48.jpg)
EventNinja
Mittwoch, 12. Mai 2010
![Page 49: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/49.jpg)
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Events,a Calendar
Mittwoch, 12. Mai 2010
![Page 50: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/50.jpg)
http://bit.ly/webdev-events
Mittwoch, 12. Mai 2010
![Page 51: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/51.jpg)
Mittwoch, 12. Mai 2010
![Page 52: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/52.jpg)
Mittwoch, 12. Mai 2010
![Page 53: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/53.jpg)
Mittwoch, 12. Mai 2010
![Page 54: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/54.jpg)
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Mittwoch, 12. Mai 2010
![Page 55: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/55.jpg)
Want to see it in action?
Download it from your store.
Contact us.
Mittwoch, 12. Mai 2010
![Page 56: May 12 html5 apps - cross platform - upfront ug berlin](https://reader033.vdocument.in/reader033/viewer/2022051816/545caf52af7959b4098b48e3/html5/thumbnails/56.jpg)
thx
http://uxebu.com
Wolfram Kriesing, uxebu
[email protected]://twitter.com/uxebu
http://twitter.com/wolframkriesing
Mittwoch, 12. Mai 2010