Mobile Web on Touch Event and YUI
-
Upload
mocheng -
Category
Technology
-
view
3.873 -
download
0
description
Transcript of Mobile Web on Touch Event and YUI
![Page 1: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/1.jpg)
Mobile Web on Touch Device &
YUI
Morgan Cheng Jan 25th 2011
![Page 2: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/2.jpg)
Why Mobile?
![Page 3: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/3.jpg)
![Page 4: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/4.jpg)
Why Touch Device?
![Page 5: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/5.jpg)
Touch is Direct User Intent
![Page 6: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/6.jpg)
Touch Device
![Page 7: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/7.jpg)
Why Web?
![Page 8: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/8.jpg)
Web: Cross Platform Solution
![Page 9: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/9.jpg)
Web: Cross Platform Solution
![Page 10: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/10.jpg)
Web: Cross Platform Solution
![Page 11: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/11.jpg)
Mobile + Touch Device + Web
![Page 12: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/12.jpg)
Touch API Support Layer
Hardware
OS
Browser
Web App
![Page 13: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/13.jpg)
Apple Touch Layer
Hardware
OS
Browser
Web App
![Page 14: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/14.jpg)
Microsoft Touch Layer: Limited
Hardware
OS
Browser
Web App
![Page 15: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/15.jpg)
Android Layer: Not Complete
Hardware
OS
Browser
Web App
![Page 16: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/16.jpg)
What’s different for Mobile Touch Web?
![Page 17: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/17.jpg)
Touch Event
![Page 18: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/18.jpg)
Why not mousedown/mousemove/mouse
up?
![Page 19: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/19.jpg)
• mousedown/mousemove/mouseup doesn’t work as usual in touch browser
• Semantically, touch event is different from mouse event
• Multi-touch!!!
![Page 20: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/20.jpg)
How does touch event look?
![Page 21: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/21.jpg)
Touch Events in iOS/Safari
• touchstart• touchmove• touchend• touchcancel
![Page 22: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/22.jpg)
Touch Events in iOS/Safari
var target = document.getElementById(‘demo’);target.addEventListener(‘touchstart’, function(e) {
// e.touches// e.targetTouches// e.changedTouches
}, false);
![Page 23: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/23.jpg)
Touch Events in iOS/Safari
var target = document.getElementById(‘demo’);target.addEventListener(‘touchstart’, function(e) {
// e.touches[0].clientX// e.touches[0].clientY// e.touches[0].screenX// e.touches[0].screenY// e.touches[0].pageX// e.touches[0].pageY
// e.touches[0].target // e.touches[0].identifier}, false);
![Page 24: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/24.jpg)
Touch Events in Android/Webkit
• No multi-touch till Android 3
• event property– event.touch === event.touches[0]
![Page 25: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/25.jpg)
Touch Events in Firefox 4 Beta
• MozTouchDown• MozTouchMove• MozTouchUp
![Page 26: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/26.jpg)
Touch Events in Firefox 4 Beta
document.addEventListener(‘MozTouchDown’, function(e) {// e.clientX
// e.clientY// e.streamId
// e.mozInputType}, false);
![Page 27: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/27.jpg)
Touch Friendly CSS
![Page 28: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/28.jpg)
Eliminate :hover pseudo class
![Page 29: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/29.jpg)
How to tell whether it is a touch device?
![Page 30: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/30.jpg)
Server Side UserAgent Sniffing
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$RewriteRule ^(.*)$ http://ipad.domain.com [R=301]
![Page 31: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/31.jpg)
Media Query
@media handheld, only screen and (max-device-width: 1024px) {
/* iPad specific CSS */}
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"
href="iPhone.css">
![Page 32: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/32.jpg)
JavaScript Sniffing
function isIPad(){ return navigator.platform == "iPad";}
function isTouchDevice() { return ‘ontouchstart’ in document;}
![Page 33: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/33.jpg)
Gesture
![Page 34: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/34.jpg)
Touch Event
Gesture Event
User Action
User Intent
![Page 35: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/35.jpg)
Gesture Events in iOS/Safari
• gesturestart
• gesturechange
• gestureend
![Page 36: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/36.jpg)
Gesture: Only for Multi Touch
![Page 37: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/37.jpg)
Gesture Events in iOS
var target = document.getElementById(‘demo’);target.addEventListener(‘gesturechange’, function(e) {
// e.scale// e.rotation
}, false);
![Page 38: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/38.jpg)
Gesture Events in Webkit on Android
Not yet
But, Android 3 will have it
![Page 39: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/39.jpg)
YUI with Touch
![Page 40: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/40.jpg)
YUI Touch Events is simple wrapper
![Page 41: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/41.jpg)
Touch Events in YUI
Y.one(“#demo”).on(“touchstart”, function(e) {// e.touches// e.targetTouches// e.changedTouches
// Each element of these arrays are instance of // DOMEventFacade }, false);
![Page 42: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/42.jpg)
Touch Events in YUI
Y.one(“#demo”).on(“gesturechange”, function(e) {// e.scale// e.rotation
}, false);
![Page 43: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/43.jpg)
YUI Gesture Events is abstraction of mouse and touch
![Page 44: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/44.jpg)
Drag & Drop
![Page 45: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/45.jpg)
D&D
Mouse Event Touch Event
![Page 46: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/46.jpg)
Extend Touch Event with Synthetic Event
![Page 47: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/47.jpg)
flick
![Page 48: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/48.jpg)
gesturemovestartgesturemove
gesturemoveend
![Page 49: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/49.jpg)
Summary
• Focus User Intent
• Make Touch Friendly UI
• YUI Helps
![Page 50: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/50.jpg)
Resources
• Touch State-of-the-arthttp://www.quirksmode.org/blog/archives/2010/02/the_touch_actio.html
• Touch and Gesture on iOShttp://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
• Touch on Firefox 4http://hacks.mozilla.org/2010/08/firefox4-beta3/
![Page 51: Mobile Web on Touch Event and YUI](https://reader034.fdocuments.in/reader034/viewer/2022042814/554e24c4b4c90571798b4f9c/html5/thumbnails/51.jpg)
ThanksQ&A