jQTouch at jQuery Conference 2010

5,672 views
5,526 views

Published on

My presentation from the 2010 jQuery Conference. Covers a bit of WebKit, emerging standards, and an overview of jQTouch.

Published in: Technology
4 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
5,672
On SlideShare
0
From Embeds
0
Number of Embeds
269
Actions
Shares
0
Downloads
231
Comments
4
Likes
9
Embeds 0
No embeds

No notes for slide


  • Outpost, WKB,

  • Does not mean 60% of all devices are iPhone, just that we like using the internet more. Why? WebKit. WebKit is on iPhone, Andoroid, and Palm, and likely coming to RIM soon. What does it mean?


  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • Easy distribution, no app store, easy dev, tons of features — Brian.
  • Made for WebKit browsers to create web apps quickly. Who’s developed with web? Who’s used jQTouch? Who uses jQuery? It’s been a month since.
  • Now for the code. Just a few lines of Javascript.
  • Now for the code. Just a few lines of Javascript.
  • Now for the code. Just a few lines of Javascript.
  • Now for the code. Just a few lines of Javascript.
  • Panels are created in a stub fashion, body > *. Using plain, semantic code, like classes.
  • Panels are created in a stub fashion, body > *. Using plain, semantic code, like classes.















  • back, slide, useTransitions
  • Panels are created in a stub fashion, body > *. Using plain, semantic code, like classes.

  • 2 themes by default, just switch CSS file.
  • Matches identity of Flash site.

  • Built in by default.
  • All Ajax “live”. GET requests cached.
  • All Ajax “live”. GET requests cached.






  • Benefits of web distribution, Benefits of PhoneGap, Eventual cross-compatability
  • Simplest. Still can go offline, internal db, etc.

  • Simplest. Still can go offline, internal db, etc.
  • Device support, more transitions/themes, XUI port, COD
    Upcoming extensions

  • jQTouch at jQuery Conference 2010

    1. 1. jQTouch
    2. 2. David Kaneda Creative director at Ext and Rock Band Superstar. davidkaneda.com @davidkaneda
    3. 3. (thx Jean)
    4. 4. going mobile
    5. 5. US Mobile Traffic iPhone OS Android 39% RIM OS webOS Windows Mobile Other 47% 7% 2%3% 2% http://metrics.admob.com/ (jan 2010)
    6. 6. NOT the future of * SRRY NOKIA
    7. 7. The Future of Mobile
    8. 8. The Future of Mobile Apple + Android Touch-based Resolution & Color WebKit
    9. 9. WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
    10. 10. WebKit Rocks! • CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
    11. 11. “Learning Objective-C is great, if only for the historical obscurity of it.” — Brian LeRoux, PhoneGap
    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. More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’ • submitSelector string ‘.submit’ • cacheGetRequests boolean true
    30. 30. More Options • preloadImages array null • touchSelector string ‘a, .touch’ • formSelector string ‘form’ • submitSelector string ‘.submit’ • cacheGetRequests boolean true • useFastTouch boolean true
    31. 31. animations
    32. 32. Animation Options
    33. 33. Animation Options • backSelector string ‘.back, .cancel’ • slideSelector string ‘body > * > ul li a, .slide’ • slideUpSelector string ‘.slideup’ • flipSelector string ‘.flip’ • cubeSelector string ‘.cube’ • swapSelector string ‘.swap’ • fadeSelector string ‘.fade’ • useTransitions boolean true
    34. 34. HTML
    35. 35. themes
    36. 36. apple jqt
    37. 37. AJAX
    38. 38. GET/POST Caching Live Events
    39. 39. GET/POST Caching Live Events
    40. 40. EVENTS
    41. 41. tap swipe pageAnimationStart pageAnimationEnd turn
    42. 42. tap swipe pageAnimationStart pageAnimationEnd turn
    43. 43. javascript
    44. 44. javascript
    45. 45. public object • var jQT = new $.jQTouch(); • jQT.goTo(‘#newpage’, ‘flip’); • jQT.getOrientation(); • jQT.addAnimation({}); • jQT.submitForm(‘#myform’); • jQT.goBack();
    46. 46. distribution
    47. 47. save to home • Instant deployment • Offline access with Cache Manifest • Internal SQLite database • No Safari interface
    48. 48. 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/
    49. 49. beta 3 • jQuery 1.4 • jQT.goTo(‘myurl.php • Live events ’); • HTML5 Video and • OS4 + iPad support inputs • New animations • Google Maps demo • Loads of fixes • Better history support • New callback: pageInserted
    50. 50. </presentation> <discussion>
    51. 51. get involved jqtouch.com code.google.com/p/jqtouch/ groups.google.com/group/jqtouch/ more davidkaneda.com webkitbits.com @davidkaneda

    ×