Mobile Web App Development with jQTouch
•Download as KEY, PDF•
9 likes•1,285 views
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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Mobile Web App Development with jQTouch
Similar to Mobile Web App Development with jQTouch (20)
Recently uploaded
Recently uploaded (20)
Mobile Web App Development with jQTouch
- 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
- 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
- 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
Editor's Notes
- 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