mobile webkit development and jqtouch
DESCRIPTION
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.TRANSCRIPT
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/