Phone gap nikolaionken-08-06

968 views

Published on

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

No Downloads
Views
Total views
968
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Phone gap nikolaionken-08-06

  1. 1. PhoneGap Nikolai Onken uxebu Tuesday, June 8, 2010
  2. 2. Tuesday, June 8, 2010
  3. 3. We open the mobile web. Tuesday, June 8, 2010
  4. 4. Tuesday, June 8, 2010
  5. 5. JavaScript AJAX FrontEnd Usability UserExperience CSS mobile Browser Web2.0 dojo TouchScroll OpenSource Tuesday, June 8, 2010
  6. 6. 3.3.1 Tuesday, June 8, 2010
  7. 7. Problem • Native apps fragmentation Tuesday, June 8, 2010
  8. 8. Solution Tuesday, June 8, 2010
  9. 9. Solution • PhoneGap Tuesday, June 8, 2010
  10. 10. Solution • PhoneGap • W3C Widgets Tuesday, June 8, 2010
  11. 11. Solution • PhoneGap • W3C Widgets • Palm webOS Tuesday, June 8, 2010
  12. 12. Solution • PhoneGap • W3C Widgets • Palm webOS • ... Tuesday, June 8, 2010
  13. 13. Simple huh? Tuesday, June 8, 2010
  14. 14. Support Tuesday, June 8, 2010
  15. 15. Support • Apple iPhone Tuesday, June 8, 2010
  16. 16. Support • Apple iPhone • Google Android Tuesday, June 8, 2010
  17. 17. Support • Apple iPhone • Google Android • RIM Blackberry Tuesday, June 8, 2010
  18. 18. Support • Apple iPhone • Google Android • RIM Blackberry • Palm webOS Tuesday, June 8, 2010
  19. 19. Support • Apple iPhone • Google Android • RIM Blackberry • Palm webOS • Symbian Tuesday, June 8, 2010
  20. 20. Support • Apple iPhone • Google Android • RIM Blackberry • Palm webOS • Symbian • Maemo Tuesday, June 8, 2010
  21. 21. Support • Apple iPhone • Google Android • RIM Blackberry • Palm webOS • Symbian • Maemo • Windows Mobile Tuesday, June 8, 2010
  22. 22. Device APIs Tuesday, June 8, 2010
  23. 23. Device APIs • Geo Tuesday, June 8, 2010
  24. 24. Device APIs • Geo • Accelerometer Tuesday, June 8, 2010
  25. 25. Device APIs • Geo • Accelerometer • Camera Tuesday, June 8, 2010
  26. 26. Device APIs • Geo • Accelerometer • Camera • Vibration Tuesday, June 8, 2010
  27. 27. Device APIs • Geo • Accelerometer • Camera • Vibration • Contacts Tuesday, June 8, 2010
  28. 28. Device APIs • Geo • Accelerometer • Camera • Vibration • Contacts • SMS Tuesday, June 8, 2010
  29. 29. Device APIs • Geo • Accelerometer • Camera • Vibration • Contacts • SMS • ... Tuesday, June 8, 2010
  30. 30. Augment the browser, hell yea Tuesday, June 8, 2010
  31. 31. HumanAPI Tuesday, June 8, 2010
  32. 32. Any other native feature Tuesday, June 8, 2010
  33. 33. Project structure Tuesday, June 8, 2010
  34. 34. Project structure • www folder Tuesday, June 8, 2010
  35. 35. Project structure • www folder • index.html Tuesday, June 8, 2010
  36. 36. Project structure • www folder • index.html • phonegap.js Tuesday, June 8, 2010
  37. 37. How the magic happens Tuesday, June 8, 2010
  38. 38. How the magic happens Low level APIs Camera Accelerometer Push Notifications Tuesday, June 8, 2010
  39. 39. How the magic happens Chromeless Browser Low level APIs Camera Accelerometer Push Notifications Tuesday, June 8, 2010
  40. 40. How the magic happens Chromeless Browser browser.eval(“alert(1);”) Low level APIs Camera Accelerometer Push Notifications Tuesday, June 8, 2010
  41. 41. How the magic happens gap://customurl Tuesday, June 8, 2010
  42. 42. How the magic happens gap://customurl Low level APIs Camera Accelerometer Push Notifications Tuesday, June 8, 2010
  43. 43. How the magic happens Chromeless Browser gap://customurl Low level APIs Camera Accelerometer Push Notifications Tuesday, June 8, 2010
  44. 44. JS Libraries Tuesday, June 8, 2010
  45. 45. JS Libraries • Use them but use them with care • Most have been designed for desktop • Desktop performance vs. Mobile performance are apples vs. oranges Tuesday, June 8, 2010
  46. 46. Dojo mobile • http://github.com/klipstein/dojo-mobile • http://github.com/wolframkriesing/dojo-mobile Tuesday, June 8, 2010
  47. 47. Dojo mobile • blackberry.js • webkit.js • yourplatform.js Tuesday, June 8, 2010
  48. 48. Device APIs • GSOC - Kelly Smith • http://gsocblog.innobdesign.com/ Tuesday, June 8, 2010
  49. 49. Lets build an app Tuesday, June 8, 2010
  50. 50. Mobile secrets Tuesday, June 8, 2010
  51. 51. Drop your baggage • We actually have good browsers • CSS3 (flex box anyone?) Tuesday, June 8, 2010
  52. 52. IE anyone? Tuesday, June 8, 2010
  53. 53. IE anyone? Tuesday, June 8, 2010
  54. 54. IE anyone? Tuesday, June 8, 2010
  55. 55. Do what your runtime can to - not more not less Tuesday, June 8, 2010
  56. 56. Test on the desktop • Firefox - Fennec (Nokia N900) • Opera - W3C • Webkit - iPhone / Palm Tuesday, June 8, 2010
  57. 57. Test in the Simulator Tuesday, June 8, 2010
  58. 58. And only then - test on device Tuesday, June 8, 2010
  59. 59. Desktop browser consoles are still the best debugging tools Tuesday, June 8, 2010
  60. 60. Optimize code • JS - compress, shrinksafe • CSS - one file! • Images - sprites Tuesday, June 8, 2010
  61. 61. Challenge Tuesday, June 8, 2010
  62. 62. Raphaël can do this! Tuesday, June 8, 2010
  63. 63. Getting started • PhoneGap - http://phonegap.com • http://blog.uxebu.com • TouchScroll - http://bit.ly/cV27RD Tuesday, June 8, 2010
  64. 64. Questions? @nonken Tuesday, June 8, 2010

×