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.

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

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

33. Animation Options

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

35. HTML

36. themes

37. apple jqt

41. AJAX

43. GET/POST
Caching
Live Events

44. GET/POST
Caching
Live Events

45. custom events

47. swipe
pageTransitionStart
pageTransitionEnd
turn

48. swipe
pageTransitionStart
pageTransitionEnd
turn

49. swipe detection

50. distribution

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

52. LiquidGear
• iPhone-specific
• Javascript access to Accelerometer, Admob,
Contacts, Camera, Photos, Badges, Sound/
Vibrate, Tabs, Youtube
• Building native jQTouch integration
http://www.liquidgear.net/

53. </presentation>
<discussion>

54. http://www.jqtouch.com/
http://www.webkitbits.com/