Más contenido relacionado Similar a Phone gap nikolaionken-08-06 (20) Más de Skills Matter (20) 1. PhoneGap
Nikolai Onken
uxebu
Tuesday, June 8, 2010
5. JavaScript AJAX
FrontEnd
Usability UserExperience
CSS mobile
Browser Web2.0
dojo
TouchScroll OpenSource
Tuesday, June 8, 2010
7. Problem
• Native apps fragmentation
Tuesday, June 8, 2010
9. Solution
• PhoneGap
Tuesday, June 8, 2010
10. Solution
• PhoneGap
• W3C Widgets
Tuesday, June 8, 2010
11. Solution
• PhoneGap
• W3C Widgets
• Palm webOS
Tuesday, June 8, 2010
12. Solution
• PhoneGap
• W3C Widgets
• Palm webOS
• ...
Tuesday, June 8, 2010
15. Support
• Apple iPhone
Tuesday, June 8, 2010
16. Support
• Apple iPhone
• Google Android
Tuesday, June 8, 2010
17. Support
• Apple iPhone
• Google Android
• RIM Blackberry
Tuesday, June 8, 2010
18. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
Tuesday, June 8, 2010
19. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
• Symbian
Tuesday, June 8, 2010
20. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
• Symbian
• Maemo
Tuesday, June 8, 2010
21. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
• Symbian
• Maemo
• Windows Mobile
Tuesday, June 8, 2010
24. Device APIs
• Geo
• Accelerometer
Tuesday, June 8, 2010
25. Device APIs
• Geo
• Accelerometer
• Camera
Tuesday, June 8, 2010
26. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
Tuesday, June 8, 2010
27. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
• Contacts
Tuesday, June 8, 2010
28. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
• Contacts
• SMS
Tuesday, June 8, 2010
29. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
• Contacts
• SMS
• ...
Tuesday, June 8, 2010
30. Augment the
browser, hell yea
Tuesday, June 8, 2010
38. How the magic happens
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010
39. How the magic happens
Chromeless Browser
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010
40. How the magic happens
Chromeless Browser
browser.eval(“alert(1);”)
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010
42. How the magic happens
gap://customurl
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010
43. How the magic happens
Chromeless Browser
gap://customurl
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010
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. Dojo mobile
• http://github.com/klipstein/dojo-mobile
• http://github.com/wolframkriesing/dojo-mobile
Tuesday, June 8, 2010
47. Dojo mobile
• blackberry.js
• webkit.js
• yourplatform.js
Tuesday, June 8, 2010
48. Device APIs
• GSOC - Kelly Smith
• http://gsocblog.innobdesign.com/
Tuesday, June 8, 2010
51. Drop your baggage
• We actually have good browsers
• CSS3 (flex box anyone?)
Tuesday, June 8, 2010
55. Do what your runtime
can to - not more not
less
Tuesday, June 8, 2010
56. Test on the desktop
• Firefox - Fennec (Nokia N900)
• Opera - W3C
• Webkit - iPhone / Palm
Tuesday, June 8, 2010
59. Desktop browser
consoles are still the
best debugging tools
Tuesday, June 8, 2010
60. Optimize code
• JS - compress, shrinksafe
• CSS - one file!
• Images - sprites
Tuesday, June 8, 2010
63. Getting started
• PhoneGap - http://phonegap.com
• http://blog.uxebu.com
• TouchScroll - http://bit.ly/cV27RD
Tuesday, June 8, 2010
