This document discusses jQTouch, a JavaScript library for building mobile web applications. It provides options for building full screen applications with touch controls and hardware-accelerated animations using HTML, CSS, and JavaScript. Key features highlighted include support for WebKit features like CSS3 animations, forms, caching, and hardware-accelerated transitions. The document also discusses distributing applications built with jQTouch through PhoneGap to package them as native mobile apps.

1. jQTouch

2. David Kaneda
Creative director at Ext and
Rock Band Superstar.
davidkaneda.com
@davidkaneda

3. (thx Jean)

4. going mobile

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. NOT the
future of
* SRRY NOKIA

7. The Future of
Mobile

8. The Future of
Mobile
Apple + Android
Touch-based
Resolution & Color
WebKit

9. WebKit Rocks!
• CSS3
• Transforms,
Transitions, and
Animations
• Canvas
• SQLite
• Cache Manifest
• Geo-Location

10. WebKit Rocks!
• CSS3
• Transforms,
Transitions, and
Animations
• Canvas
• SQLite
• Cache Manifest
• Geo-Location

11. “Learning Objective-C is
great, if only for the
historical obscurity of it.”
— Brian LeRoux, PhoneGap

12. jQTouch

15. Icon (no gloss)
Startup Screen
Full Screen
Black Status Bar
No Zooming

16. javascript

17. HTML

18. full screen options

19. full screen options
• icon string null

20. full screen options
• icon string null
• addGlossToIcon boolean true

21. full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true

22. full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen boolean true

23. full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen boolean true
• fullScreenClass string ‘fullscreen’

24. full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen boolean true
• fullScreenClass string ‘fullscreen’
• startupScreen string null

25. full screen options
• icon string null
• addGlossToIcon boolean true
• fixedViewport boolean true
• fullScreen boolean true
• fullScreenClass string ‘fullscreen’
• startupScreen string null
• statusBar string ’normal’

26. More Options

27. More Options
• preloadImages array null

28. More Options
• preloadImages array null
• touchSelector string ‘a, .touch’

29. More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
• formSelector string ‘form’

30. More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
• formSelector string ‘form’
• submitSelector string ‘.submit’

31. More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
• formSelector string ‘form’
• submitSelector string ‘.submit’
• cacheGetRequests boolean true

32. More Options
• preloadImages array null
• touchSelector string ‘a, .touch’
• formSelector string ‘form’
• submitSelector string ‘.submit’
• cacheGetRequests boolean true
• useFastTouch boolean true

33. animations

36. Animation Options

37. 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

38. HTML

39. themes

40. apple jqt

44. AJAX

46. GET/POST
Caching
Live Events

47. GET/POST
Caching
Live Events

48. EVENTS

50. tap
swipe
pageAnimationStart
pageAnimationEnd
turn

51. tap
swipe
pageAnimationStart
pageAnimationEnd
turn

52. javascript

53. javascript

54. public object
• var jQT = new $.jQTouch();
• jQT.goTo(‘#newpage’, ‘flip’);
• jQT.getOrientation();
• jQT.addAnimation({});
• jQT.submitForm(‘#myform’);
• jQT.goBack();

55. distribution

56. save to home
• Instant deployment
• Offline access with Cache Manifest
• Internal SQLite database
• No Safari interface

57. 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/

58. 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

59. </presentation>
<discussion>

60. get involved
jqtouch.com
code.google.com/p/jqtouch/
groups.google.com/group/jqtouch/
more
davidkaneda.com
webkitbits.com
@davidkaneda