jQTouch
David Kaneda
Creative director at Ext and
Rock Band Superstar.

davidkaneda.com
@davidkaneda
(thx Jean)
going mobile
US Mobile Traffic
                             iPhone OS
                             Android
                     39%    ...
NOT the
future of

 * SRRY NOKIA
The Future of
   Mobile
The Future of
   Mobile
        Apple + Android
         Touch-based
       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
“Learning Objective-C is
   great, if only for the
historical obscurity of it.”
    — Brian LeRoux, PhoneGap
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 boolean true
full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen boolean true...
full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen boolean true...
full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen boolean true...
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...
More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
• formSelector string ‘form’
• submitSelector s...
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, .slide’
• slideUpSele...
HTML
themes
apple   jqt
AJAX
GET/POST
  Caching
Live Events
GET/POST
  Caching
Live Events
EVENTS
tap
      swipe
pageAnimationStart
pageAnimationEnd
       turn
tap
      swipe
pageAnimationStart
pageAnimationEnd
       turn
javascript
javascript
public object
• var jQT = new $.jQTouch();


  • jQT.goTo(‘#newpage’, ‘flip’);
  • jQT.getOrientation();
  • jQT.addAnimati...
distribution
save to home
• Instant deployment
• Offline access with Cache Manifest
• Internal SQLite database
• No Safari interface
PhoneGap
• Simple, Javascript-based access to
  Accellorometer, Magnometer (that’s a
  compass!), Camera, Sound
• Distribu...
beta 3
• jQuery 1.4          • jQT.goTo(‘myurl.php
  • Live events         ’);

• HTML5 Video and     • OS4 + iPad support...
</presentation>
 <discussion>
get involved
jqtouch.com
code.google.com/p/jqtouch/
groups.google.com/group/jqtouch/

more
davidkaneda.com
webkitbits.com
...
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
Upcoming SlideShare
Loading in...5
×

jQTouch at jQuery Conference 2010

5,314

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,314
On Slideshare
0
From Embeds
0
Number of Embeds
2
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 &amp;#x2014;&amp;#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • opacity, corners, shadows, gradients &amp;#x2014;&amp;#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • opacity, corners, shadows, gradients &amp;#x2014;&amp;#xA0;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 &amp;#x2014;&amp;#xA0;Brian.
  • Made for WebKit browsers to create web apps quickly. Who&amp;#x2019;s developed with web? Who&amp;#x2019;s used jQTouch? Who uses jQuery? It&amp;#x2019;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 &gt; *. Using plain, semantic code, like classes.
  • Panels are created in a stub fashion, body &gt; *. Using plain, semantic code, like classes.















  • back, slide, useTransitions
  • Panels are created in a stub fashion, body &gt; *. 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 &amp;#x201C;live&amp;#x201D;. GET requests cached.
  • All Ajax &amp;#x201C;live&amp;#x201D;. 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
    1. A particular slide catching your eye?

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

    ×