Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQTouch and Titanium

7,852 views

Published on

Look at how to write for mobile in JavaScript using jQTouch and/or Titanium. Exploring the benefits of mobile web versus native mobile applications.

Published in: Technology, Design
  • Be the first to comment

jQTouch and Titanium

  1. 1. jQTouch and Titanium by Marc Grabanski
  2. 2. Mobile Web Development
  3. 3. Native Apps in JavaScript
  4. 4. Ah, choices!
  5. 5. Native Apps
  6. 6. Native Apps • High Performance
  7. 7. Native Apps • High Performance • Findable in App Store
  8. 8. Native Apps • High Performance • Findable in App Store • Native UI, Media API,
  9. 9. Native Apps • High Performance • Findable in App Store • Native UI, Media API, File System, Accelerometer
  10. 10. Native Apps • High Performance • Findable in App Store • Native UI, Media API, File System, Accelerometer • Monetization
  11. 11. Web App Features
  12. 12. Web App Features • Instant Updates (no app store)
  13. 13. Web App Features • Instant Updates (no app store) • HTML5 Offline, Local Storage
  14. 14. Web App Features • Instant Updates (no app store) • HTML5 Offline, Local Storage • Save to Home Icon
  15. 15. Web App Features • Instant Updates (no app store) • HTML5 Offline, Local Storage • Save to Home Icon • Touch Events
  16. 16. Web App Features • Instant Updates (no app store) • HTML5 Offline, Local Storage • Save to Home Icon • Touch Events • Geolocation
  17. 17. Web App Features • Instant Updates (no app store) • HTML5 Offline, Local Storage • Save to Home Icon • Touch Events • Geolocation • Canvas
  18. 18. Web App Features • Instant Updates (no app store) • HTML5 Offline, Local Storage • Save to Home Icon • Touch Events • Geolocation • Canvas • CSS Transforms
  19. 19. Web App Features • Instant Updates (no app store) • HTML5 Offline, Local Storage • Save to Home Icon • Touch Events • Geolocation • Canvas • CSS Transforms • 100% revenue
  20. 20. jQTouch
  21. 21. jQTouch • Themes
  22. 22. jQTouch • Themes • Automatic Navigation
  23. 23. jQTouch • Themes • Automatic Navigation • CSS Animations (fast)
  24. 24. jQTouch • Themes • Automatic Navigation • CSS Animations (fast) • Save Icon to Home
  25. 25. jQTouch • Themes • Automatic Navigation • CSS Animations (fast) • Save Icon to Home • Ajax
  26. 26. jQTouch • Themes • Automatic Navigation • CSS Animations (fast) • Save Icon to Home • Ajax • Touch Events
  27. 27. Can’t jQTouch this!
  28. 28. jQTouch is markup driven HTML and CSS
  29. 29. Pages <div id=”home”> <div class=”toolbar”> <h1>My Page</h1> <a class=”back”>Back</a> </div> <ul> <li><a href=”#mypage”>link</a></li> </ul> </div> <div id=”mypage”> <div class=”toolbar”> <h1>My Page</h1> <a class=”back”>Back</a> </div>
  30. 30. CSS transforms are hardware accelerated
  31. 31. Animation • slide • swap • flip • cube • fade • pop • slideup • dissolve
  32. 32. Animation • slide • swap • flip • cube • fade • pop • slideup • dissolve <a href=”#page” class=”swap”>
  33. 33. Animation • slide • swap • flip • cube • fade • pop • slideup • dissolve <a href=”#page” class=”swap”> clicking back will auto-reverse animation
  34. 34. Events
  35. 35. Events • tap - touch version of click
  36. 36. Events • tap - touch version of click • pageAnimationStart
  37. 37. Events • tap - touch version of click • pageAnimationStart • pageAnimationEnd
  38. 38. Events • tap - touch version of click • pageAnimationStart • pageAnimationEnd • turn - orientation turned
  39. 39. Events • tap - touch version of click • pageAnimationStart • pageAnimationEnd • turn - orientation turned • swipe
  40. 40. Themes jQT and Apple
  41. 41. Web App.. Plus Native + += native app
  42. 42. PhoneGap + jQTouch
  43. 43. PhoneGap + jQTouch • Accellorometer
  44. 44. PhoneGap + jQTouch • Accellorometer • Magnometer
  45. 45. PhoneGap + jQTouch • Accellorometer • Magnometer • Camera
  46. 46. PhoneGap + jQTouch • Accellorometer • Magnometer • Camera • Sound
  47. 47. PhoneGap + jQTouch • Accellorometer • Magnometer • Camera • Sound • Get in the App Store!
  48. 48. Thank you! Marc Grabanski: http://marcgrabanski.com Twitter: @1Marc

×