Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQTouch and Titanium

7,043
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.

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

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,043
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
273
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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