mobile webkit development and jqtouch

Mobile WebKit and jQTouch

with David Kaneda

* Artist rendering by Jean Bakey

David KanedaDesigner, Developer, and Rock Band Superstar

davidkaneda.comtwitter.com/davidkaneda

the mobile landscape

5%6%

13%

3%

12%

61%

iPhoneAndroidPalmRIMWindows MobileOther

US Mobile Traffic

http://metrics.admob.com/

NOT the future of

* SRRY NOKIA

NOT the future of

* SRRY NOKIA

The Future of Mobile

The Future of Mobile

Android, Palm, AppleTouch Screen

Resolution & ColorWebKit

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

jQTouch

Icon (no gloss)Startup Screen

Full ScreenBlack 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• 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

HTML

themes

apple jqt

AJAX

GET/POSTCaching

Live Events

GET/POSTCaching

Live Events

custom events

swipepageTransitionStartpageTransitionEnd

turn

swipepageTransitionStartpageTransitionEnd

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-specific• 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/