Mobile WebKit
and jQTouch
  with David Kaneda
* Artist rendering by Jean Bakey
David Kaneda
Designer, Developer, and Rock Band
Superstar

davidkaneda.com
twitter.com/davidkaneda
the mobile
landscape
US Mobile Traffic
                           iPhone
                           Android
                    12%    Palm
61%...
NOT the
future of

 * SRRY NOKIA
NOT the
future of

 * SRRY NOKIA
The Future of
   Mobile
The Future of
   Mobile
       Android, Palm, Apple
          Touch Screen
        Resolution & Color
             WebKit
WebKit Rocks!
• CSS3
• Transforms,
  Transitions, and
  Animations
• Canvas
• SQLite
• Cache Manifest
• Geo-Location
WebKit Rocks!
• CSS3
• Transforms,
  Transitions, and
  Animations
• Canvas
• SQLite
• Cache Manifest
• Geo-Location
jQTouch
Icon (no gloss)
 Startup Screen
   Full Screen
Black Status Bar
  No Zooming
Javascript
HTML
Full Screen
 Options
Full Screen
         Options
• icon string null
Full Screen
         Options
• icon string null
• addGlossToIcon boolean true
Full Screen
         Options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
Full Screen
         Options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen bo...
Full Screen
         Options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen bo...
Full Screen
         Options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen bo...
Full Screen
         Options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen bo...
More Options
More Options
• preloadImages array null
More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
• formSelector string ‘form’
More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
• formSelector string ‘form’
• submitSelector s...
animations
Animation Options
Animation Options
• backSelector string ‘.back, .cancel’
• slideSelector string ‘body > * > ul li a’
• slideUpSelector str...
HTML
themes
apple   jqt
AJAX
GET/POST
  Caching
Live Events
GET/POST
  Caching
Live Events
custom events
swipe
pageTransitionStart
pageTransitionEnd
       turn
swipe
pageTransitionStart
pageTransitionEnd
       turn
swipe detection
distribution
PhoneGap
• Simple, Javascript-based access to
  Accellorometer, Magnometer (that’s a
  compass!), Camera, Sound
• Distribu...
LiquidGear
• iPhone-specific
• Javascript access to Accelerometer, Admob,
  Contacts, Camera, Photos, Badges, Sound/
  Vibr...
</presentation>
 <discussion>
http://www.jqtouch.com/
http://www.webkitbits.com/
Mobile WebKit Development and jQTouch
Mobile WebKit Development and jQTouch
Mobile WebKit Development and jQTouch
Mobile WebKit Development and jQTouch
Mobile WebKit Development and jQTouch
Mobile WebKit Development and jQTouch
Mobile WebKit Development and jQTouch
Mobile WebKit Development and jQTouch
Upcoming SlideShare
Loading in...5
×

Mobile WebKit Development and jQTouch

11,503

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 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,503
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
227
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Mobile WebKit Development and jQTouch

  1. 1. Mobile WebKit and jQTouch with David Kaneda
  2. 2. * Artist rendering by Jean Bakey
  3. 3. David Kaneda Designer, Developer, and Rock Band Superstar davidkaneda.com twitter.com/davidkaneda
  4. 4. the mobile landscape
  5. 5. US Mobile Traffic iPhone Android 12% Palm 61% RIM Windows Mobile 3% Other 13% 6% 5% http://metrics.admob.com/
  6. 6. NOT the future of * SRRY NOKIA
  7. 7. NOT the future of * SRRY NOKIA
  8. 8. The Future of Mobile
  9. 9. The Future of Mobile Android, Palm, Apple Touch Screen Resolution & Color WebKit
  10. 10. WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  11. 11. WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  12. 12. jQTouch
  13. 13. Icon (no gloss) Startup Screen Full Screen Black Status Bar No Zooming
  14. 14. Javascript
  15. 15. HTML
  16. 16. Full Screen Options
  17. 17. Full Screen Options • icon string null
  18. 18. Full Screen Options • icon string null • addGlossToIcon boolean true
  19. 19. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true
  20. 20. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true
  21. 21. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’
  22. 22. Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’ • startupScreen string null
  23. 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. 24. More Options
  25. 25. More Options • preloadImages array null
  26. 26. More Options • preloadImages array null • touchSelector string ‘a, .touch’
  27. 27. More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’
  28. 28. More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’ • submitSelector string ‘.submit’
  29. 29. animations
  30. 30. Animation Options
  31. 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. 32. HTML
  33. 33. themes
  34. 34. apple jqt
  35. 35. AJAX
  36. 36. GET/POST Caching Live Events
  37. 37. GET/POST Caching Live Events
  38. 38. custom events
  39. 39. swipe pageTransitionStart pageTransitionEnd turn
  40. 40. swipe pageTransitionStart pageTransitionEnd turn
  41. 41. swipe detection
  42. 42. distribution
  43. 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. 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. 45. </presentation> <discussion>
  46. 46. http://www.jqtouch.com/ http://www.webkitbits.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×