Your SlideShare is downloading. ×
Mobile WebKit Development and jQTouch
Upcoming SlideShare
Loading in...5
×

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

Mobile WebKit Development and jQTouch

11,408
views

Published on

A cursory look at the Mobile WebKit platform and the benefits of having Javascript at ones disposal. Broad categories covered will include AJAX in the mobile environment, CSS transitions, and …

A cursory look at the Mobile WebKit platform and the benefits of having Javascript at ones disposal. Broad categories covered will include AJAX in the mobile environment, CSS transitions, and iPhone-specific features. Specifically, I will demonstrate how to build a mobile application with a custom, native-looking, interface which uses dynamic data.


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

No Downloads
Views
Total Views
11,408
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
226
Comments
0
Likes
9
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. Mobile WebKit and jQTouch with David Kaneda
  • 2. * Artist rendering by Jean Bakey
  • 3. David Kaneda Designer, Developer, and Rock Band Superstar davidkaneda.com twitter.com/davidkaneda
  • 4. the mobile landscape
  • 5. US Mobile Traffic iPhone Android 12% Palm 61% RIM Windows Mobile 3% Other 13% 6% 5% http://metrics.admob.com/
  • 6. NOT the future of * SRRY NOKIA
  • 7. NOT the future of * SRRY NOKIA
  • 8. The Future of Mobile
  • 9. The Future of Mobile Android, Palm, Apple Touch Screen Resolution & Color WebKit
  • 10. WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 11. WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 12. jQTouch
  • 13. Icon (no gloss) Startup Screen Full Screen Black Status Bar No Zooming
  • 14. Javascript
  • 15. HTML
  • 16. Full Screen Options
  • 17. Full Screen Options • icon string null
  • 18. Full Screen Options • icon string null • addGlossToIcon boolean true
  • 19. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true
  • 20. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true
  • 21. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’
  • 22. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’ • startupScreen string null
  • 23. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’ • startupScreen string null • statusBar string ’normal’
  • 24. More Options
  • 25. More Options • preloadImages array null
  • 26. More Options • preloadImages array null • touchSelector string ‘a, .touch’
  • 27. More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’
  • 28. More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’ • submitSelector string ‘.submit’
  • 29. animations
  • 30. Animation Options
  • 31. Animation Options • backSelector string ‘.back, .cancel’ • slideSelector string ‘body > * > ul li a’ • slideUpSelector string ‘.slideup’ • flipSelector string ‘.flip’ • cubeSelector string ‘.cube’ • swapSelector string ‘.swap’ • fadeSelector string ‘.fade’ • useTransitions boolean true
  • 32. HTML
  • 33. themes
  • 34. apple jqt
  • 35. AJAX
  • 36. GET/POST Caching Live Events
  • 37. GET/POST Caching Live Events
  • 38. custom events
  • 39. swipe pageTransitionStart pageTransitionEnd turn
  • 40. swipe pageTransitionStart pageTransitionEnd turn
  • 41. swipe detection
  • 42. distribution
  • 43. PhoneGap • Simple, Javascript-based access to Accellorometer, Magnometer (that’s a compass!), Camera, Sound • Distribute on App Store • PROFIT!!! • Easy to port to other devices like Android and Blackberry http://www.phonegap.com/
  • 44. LiquidGear • iPhone-specific • Javascript access to Accelerometer, Admob, Contacts, Camera, Photos, Badges, Sound/ Vibrate, Tabs, Youtube • Building native jQTouch integration http://www.liquidgear.net/
  • 45. </presentation> <discussion>
  • 46. http://www.jqtouch.com/ http://www.webkitbits.com/