HTML5 Apps
The mobile web taking over!
@wolframkriesing
@uxebu
Donnerstag, 11. November 2010
We open the mobile web.
@wolframkriesing
Donnerstag, 11. November 2010
http://www.flickr.com/photos/andresrueda/2276197032/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/cmoi/760513848/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/cmoi/760513848/
Donnerstag, 11. November 2010
JavaScript AJAX
CSS
dojo
Browser
OpenSource
Web2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Donnerstag, 11. No...
Donnerstag, 11. November 2010
HTML5 Apps
W3C Widgets
universal apps
Hybrid Apps
Mobile Web Apps
anyware
WebWorks
360 Apps
Cross Platform
Mobile Apps
Ope...
Donnerstag, 11. November 2010
Landscape
http://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 11. November 2010
Landscape
http://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 11. November 2010
http://bit.ly/distimo-appstores
30th July 2009
14 Stores23rd September 2009
23 Stores
2nd December 2009
26 Stores
Donnerst...
Objective-C JavaSymbian C
.NETJava ...
Donnerstag, 11. November 2010
€
€
€
€
€
€€€...
Donnerstag, 11. November 2010
HTML
Donnerstag, 11. November 2010
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Donnerstag, 11. November 2010
€
Donnerstag, 11. November 2010
€Web Technologies
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
App Store
without Apple!
App Store
without Apple!
Donnerstag, 11. November 2010
Real Use Case:
EventNinja
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
http://bit.ly/webdev-events
Donnerstag, 11. November 2010
•CSS
•Help Button
•Back Button
•Next Page Arrow
•Scrolling Area
iPhone vs. WebOS
Donnerstag, 11. November 2010
Facts
• 3 Months Investigation
• 6 SDKs (10GB?, VMs, ...)
• 6 ways to find bugs
• 6 App Stores (Account, Submit, Review, ....
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
A Phone is ...
Donnerstag, 11. November 2010
http://www.flickr.com/photos/kratz/1984004945/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/mbiddulph/3087388964/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/redstamp/4222841946/
Donnerstag, 11. November 2010
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...
Donnerstag, 11. Nov...
Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL Spec / WAC
http://www.jil.org
http://www.wholesaleappcommunity.com
...
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
SMS, MMS, ...
Donnerstag, 11....
if (Widget.Device.PowerInfo.isCharging){
alert("Battery is charging");
}
var player = Widget.Multimedia.AudioPlayer;
playe...
PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Donnerstag, 11. November 2...
http://phonegap.pbworks.com/Roadmap
Donnerstag, 11. November 2010
Platform adaptations
Business and
Application logic
config.xm
l
PhoneGap
info.plist
Android
iP****
Nokia WRT
pure W3C
Widge...
Some numbers
240 kB
124 kB
JavaScript, HTML, CSS, etc.
PhoneGap
native App = 364 kB
Donnerstag, 11. November 2010
EmbedJS
Donnerstag, 11. November 2010
The Supported Devices
... and there will be more
to embed JavaScript on
Donnerstag, 11. November 2010
http://www.flickr.com/photos/tacoekkel/25538919/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/hugo90/3916794427/
Donnerstag, 11. November 2010
Shrink Your API
20kB 8kB
Donnerstag, 11. November 2010
vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Full fledged queries > Full blown library fun...
vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Full fledged queries > Full blown library fun...
Donnerstag, 11. November 2010
At Runtime
At Build Time
Donnerstag, 11. November 2010
dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Donne...
Wolfram Kriesing
http://apparat.io
http://embedjs.org
Thank you
Donnerstag, 11. November 2010
Upcoming SlideShare
Loading in …5
×

HTML5 Apps - Mobile Developer Summit Bangalore

1,865 views

Published on

This presentation gives an overview of how we build HTML5 Apps and where you can go with them currently.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,865
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 Apps - Mobile Developer Summit Bangalore

  1. 1. HTML5 Apps The mobile web taking over! @wolframkriesing @uxebu Donnerstag, 11. November 2010
  2. 2. We open the mobile web. @wolframkriesing Donnerstag, 11. November 2010
  3. 3. http://www.flickr.com/photos/andresrueda/2276197032/ Donnerstag, 11. November 2010
  4. 4. http://www.flickr.com/photos/cmoi/760513848/ Donnerstag, 11. November 2010
  5. 5. http://www.flickr.com/photos/cmoi/760513848/ Donnerstag, 11. November 2010
  6. 6. JavaScript AJAX CSS dojo Browser OpenSource Web2.0 FrontEnd Usability UserExperience mobile TouchScroll Donnerstag, 11. November 2010
  7. 7. Donnerstag, 11. November 2010
  8. 8. HTML5 Apps W3C Widgets universal apps Hybrid Apps Mobile Web Apps anyware WebWorks 360 Apps Cross Platform Mobile Apps Opera Widgets Donnerstag, 11. November 2010
  9. 9. Donnerstag, 11. November 2010
  10. 10. Landscape http://www.flickr.com/photos/tillwe/146242691/ Donnerstag, 11. November 2010
  11. 11. Landscape http://www.flickr.com/photos/tillwe/146242691/ Donnerstag, 11. November 2010
  12. 12. http://bit.ly/distimo-appstores 30th July 2009 14 Stores23rd September 2009 23 Stores 2nd December 2009 26 Stores Donnerstag, 11. November 2010
  13. 13. Objective-C JavaSymbian C .NETJava ... Donnerstag, 11. November 2010
  14. 14. € € € € € €€€... Donnerstag, 11. November 2010
  15. 15. HTML Donnerstag, 11. November 2010
  16. 16. http://www.flickr.com/photos/robadob/88901885/ Engine of the web Donnerstag, 11. November 2010
  17. 17. € Donnerstag, 11. November 2010
  18. 18. €Web Technologies Donnerstag, 11. November 2010
  19. 19. Donnerstag, 11. November 2010
  20. 20. Donnerstag, 11. November 2010
  21. 21. Donnerstag, 11. November 2010
  22. 22. Donnerstag, 11. November 2010
  23. 23. App Store without Apple! App Store without Apple! Donnerstag, 11. November 2010
  24. 24. Real Use Case: EventNinja Donnerstag, 11. November 2010
  25. 25. Donnerstag, 11. November 2010
  26. 26. Donnerstag, 11. November 2010
  27. 27. http://bit.ly/webdev-events Donnerstag, 11. November 2010
  28. 28. •CSS •Help Button •Back Button •Next Page Arrow •Scrolling Area iPhone vs. WebOS Donnerstag, 11. November 2010
  29. 29. Facts • 3 Months Investigation • 6 SDKs (10GB?, VMs, ...) • 6 ways to find bugs • 6 App Stores (Account, Submit, Review, ...) Donnerstag, 11. November 2010
  30. 30. Donnerstag, 11. November 2010
  31. 31. Donnerstag, 11. November 2010
  32. 32. Donnerstag, 11. November 2010
  33. 33. Donnerstag, 11. November 2010
  34. 34. Donnerstag, 11. November 2010
  35. 35. Donnerstag, 11. November 2010
  36. 36. Donnerstag, 11. November 2010
  37. 37. Donnerstag, 11. November 2010
  38. 38. A Phone is ... Donnerstag, 11. November 2010
  39. 39. http://www.flickr.com/photos/kratz/1984004945/ Donnerstag, 11. November 2010
  40. 40. http://www.flickr.com/photos/mbiddulph/3087388964/ Donnerstag, 11. November 2010
  41. 41. http://www.flickr.com/photos/redstamp/4222841946/ Donnerstag, 11. November 2010
  42. 42. • Camera • Compass • GPS • Accelerometer • Calendar • Email • Address book • Watch • Alarm clock • ... Donnerstag, 11. November 2010
  43. 43. Multiple Ways • W3C Spec http://w3.org/2009/dap/ • JIL Spec / WAC http://www.jil.org http://www.wholesaleappcommunity.com • BONDI Spec http://bondi.omtp.org/ Donnerstag, 11. November 2010
  44. 44. http://bit.ly/vf-jil-docs System Info Network Info Phone Info File GPS Contacts Camera Audio SMS, MMS, ... Donnerstag, 11. November 2010
  45. 45. if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging"); } var player = Widget.Multimedia.AudioPlayer; player.open("myAudioFile.mp3"); player.play(1); if (Widget.Device.RadioInfo.isRoaming){ alert("Money Money Money"); } Donnerstag, 11. November 2010
  46. 46. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Donnerstag, 11. November 2010
  47. 47. http://phonegap.pbworks.com/Roadmap Donnerstag, 11. November 2010
  48. 48. Platform adaptations Business and Application logic config.xm l PhoneGap info.plist Android iP**** Nokia WRT pure W3C Widgets kinda W3C Widgets Donnerstag, 11. November 2010
  49. 49. Some numbers 240 kB 124 kB JavaScript, HTML, CSS, etc. PhoneGap native App = 364 kB Donnerstag, 11. November 2010
  50. 50. EmbedJS Donnerstag, 11. November 2010
  51. 51. The Supported Devices ... and there will be more to embed JavaScript on Donnerstag, 11. November 2010
  52. 52. http://www.flickr.com/photos/tacoekkel/25538919/ Donnerstag, 11. November 2010
  53. 53. http://www.flickr.com/photos/hugo90/3916794427/ Donnerstag, 11. November 2010
  54. 54. Shrink Your API 20kB 8kB Donnerstag, 11. November 2010
  55. 55. vs. Simple queries > simple library function Only ".class" and "#id" queries Full fledged queries > Full blown library function Donnerstag, 11. November 2010
  56. 56. vs. Simple queries > simple library function Only ".class" and "#id" queries Full fledged queries > Full blown library function 13 LOC ~200 LOC Donnerstag, 11. November 2010
  57. 57. Donnerstag, 11. November 2010
  58. 58. At Runtime At Build Time Donnerstag, 11. November 2010
  59. 59. dojo-blackberry.js dojo-blackberry46.js dojo-nokia-wrt.js dojo-opera.js dojo-webkit-mobile.js dojo-windows-mobile.js Donnerstag, 11. November 2010
  60. 60. Wolfram Kriesing http://apparat.io http://embedjs.org Thank you Donnerstag, 11. November 2010

×