WebKit - Alp Toker · WebKit everywhere Alp Toker making the web mobile March 2008 Bossa Conf, Brazil
Mobile WebKit Development and jQTouch
-
Upload
john-wilker -
Category
Technology
-
view
11.450 -
download
0
description
Transcript of Mobile WebKit Development and jQTouch
![Page 1: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/1.jpg)
Mobile WebKit and jQTouch
with David Kaneda
![Page 2: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/2.jpg)
* Artist rendering by Jean Bakey
![Page 3: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/3.jpg)
David KanedaDesigner, Developer, and Rock Band Superstar
davidkaneda.comtwitter.com/davidkaneda
![Page 4: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/4.jpg)
the mobile landscape
![Page 5: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/5.jpg)
5%6%
13%
3%
12%
61%
iPhoneAndroidPalmRIMWindows MobileOther
US Mobile Traffic
http://metrics.admob.com/
![Page 6: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/6.jpg)
NOT the future of
* SRRY NOKIA
![Page 7: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/7.jpg)
NOT the future of
* SRRY NOKIA
![Page 8: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/8.jpg)
The Future of Mobile
![Page 9: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/9.jpg)
The Future of Mobile
Android, Palm, AppleTouch Screen
Resolution & ColorWebKit
![Page 10: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/10.jpg)
WebKit Rocks!• CSS3• Transforms,
Transitions, and Animations
• Canvas• SQLite• Cache Manifest• Geo-Location
![Page 11: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/11.jpg)
WebKit Rocks!• CSS3• Transforms,
Transitions, and Animations
• Canvas• SQLite• Cache Manifest• Geo-Location
![Page 12: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/12.jpg)
jQTouch
![Page 13: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/13.jpg)
![Page 14: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/14.jpg)
![Page 15: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/15.jpg)
Icon (no gloss)Startup Screen
Full ScreenBlack Status Bar
No Zooming
![Page 16: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/16.jpg)
Javascript
![Page 17: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/17.jpg)
HTML
![Page 18: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/18.jpg)
Full Screen Options
![Page 19: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/19.jpg)
Full Screen Options
• icon string null
![Page 20: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/20.jpg)
Full Screen Options
• icon string null• addGlossToIcon boolean true
![Page 21: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/21.jpg)
Full Screen Options
• icon string null• addGlossToIcon boolean true• fixedViewport boolean true
![Page 22: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/22.jpg)
Full Screen Options
• icon string null• addGlossToIcon boolean true• fixedViewport boolean true• fullScreen boolean true
![Page 23: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/23.jpg)
Full Screen Options
• icon string null• addGlossToIcon boolean true• fixedViewport boolean true• fullScreen boolean true• fullScreenClass string ‘fullscreen’
![Page 24: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/24.jpg)
Full Screen Options
• icon string null• addGlossToIcon boolean true• fixedViewport boolean true• fullScreen boolean true• fullScreenClass string ‘fullscreen’• startupScreen string null
![Page 25: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/25.jpg)
Full Screen Options
• icon string null• addGlossToIcon boolean true• fixedViewport boolean true• fullScreen boolean true• fullScreenClass string ‘fullscreen’• startupScreen string null• statusBar string ’normal’
![Page 26: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/26.jpg)
More Options
![Page 27: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/27.jpg)
More Options• preloadImages array null
![Page 28: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/28.jpg)
More Options• preloadImages array null• touchSelector string ‘a, .touch’
![Page 29: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/29.jpg)
More Options• preloadImages array null• touchSelector string ‘a, .touch’• formSelector string ‘form’
![Page 30: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/30.jpg)
More Options• preloadImages array null• touchSelector string ‘a, .touch’• formSelector string ‘form’• submitSelector string ‘.submit’
![Page 31: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/31.jpg)
animations
![Page 32: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/32.jpg)
![Page 33: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/33.jpg)
Animation Options
![Page 34: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/34.jpg)
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
![Page 35: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/35.jpg)
HTML
![Page 36: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/36.jpg)
themes
![Page 37: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/37.jpg)
apple jqt
![Page 38: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/38.jpg)
![Page 39: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/39.jpg)
![Page 40: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/40.jpg)
![Page 41: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/41.jpg)
AJAX
![Page 42: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/42.jpg)
![Page 43: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/43.jpg)
GET/POSTCaching
Live Events
![Page 44: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/44.jpg)
GET/POSTCaching
Live Events
![Page 45: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/45.jpg)
custom events
![Page 46: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/46.jpg)
![Page 47: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/47.jpg)
swipepageTransitionStartpageTransitionEnd
turn
![Page 48: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/48.jpg)
swipepageTransitionStartpageTransitionEnd
turn
![Page 49: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/49.jpg)
swipe detection
![Page 50: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/50.jpg)
distribution
![Page 51: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/51.jpg)
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/
![Page 52: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/52.jpg)
LiquidGear• iPhone-specific• Javascript access to Accelerometer, Admob,
Contacts, Camera, Photos, Badges, Sound/Vibrate, Tabs, Youtube
• Building native jQTouch integration
http://www.liquidgear.net/
![Page 53: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/53.jpg)
</presentation><discussion>
![Page 54: Mobile WebKit Development and jQTouch](https://reader034.fdocuments.in/reader034/viewer/2022052523/555a0a42d8b42a76498b45ab/html5/thumbnails/54.jpg)
http://www.jqtouch.com/http://www.webkitbits.com/