Mobile WebKit Development and jQTouch

Mobile WebKit and jQTouch with David Kaneda

* Artist rendering by Jean Bakey

David Kaneda Designer, Developer, and Rock Band Superstar davidkaneda.com twitter.com/davidkaneda

the mobile landscape

US Mobile Traffic iPhone Android 12% Palm 61% RIM Windows Mobile 3% Other 13% 6% 5% http://metrics.admob.com/

NOT the future of * SRRY NOKIA

The Future of Mobile

The Future of Mobile Android, Palm, Apple Touch Screen Resolution & Color WebKit

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

jQTouch

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

Javascript

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 • fullScreenClass string ‘fullscreen’

Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’ • startupScreen string null

Full Screen Options • icon string null • addGlossToIcon boolean true • fixedViewport boolean true • fullScreen boolean true • fullScreenClass string ‘fullscreen’ • startupScreen string null • statusBar string ’normal’

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 string ‘.submit’

animations

Animation Options

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

themes

apple jqt

GET/POST Caching Live Events

custom events

swipe pageTransitionStart pageTransitionEnd turn

swipe detection

distribution

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/

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

</presentation> <discussion>

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

http://www.slideshare.net	243
http://www.joaosantacruz.com	27
http://joaosantacruz.com	17
http://blog.diederikdijkstra.nl	3
http://safe.tumblr.com	1
http://static.slidesharecdn.com	1
http://webcache.googleusercontent.com	1

Mobile WebKit Development and jQTouch

by John Wilker on Oct 16, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 293

Statistics

Mobile WebKit Development and jQTouch — Presentation Transcript