mobile web on touch event and yui
DESCRIPTION
Touch device andTRANSCRIPT
Mobile Web on Touch Device &
YUI
Morgan Cheng Jan 25th 2011
Why Mobile?
Why Touch Device?
Touch is Direct User Intent
Touch Device
Why Web?
Web: Cross Platform Solution
Web: Cross Platform Solution
Web: Cross Platform Solution
Mobile + Touch Device + Web
Touch API Support Layer
Hardware
OS
Browser
Web App
Apple Touch Layer
Hardware
OS
Browser
Web App
Microsoft Touch Layer: Limited
Hardware
OS
Browser
Web App
Android Layer: Not Complete
Hardware
OS
Browser
Web App
What’s different for Mobile Touch Web?
Touch Event
Why not mousedown/mousemove/mouse
up?
• mousedown/mousemove/mouseup doesn’t work as usual in touch browser
• Semantically, touch event is different from mouse event
• Multi-touch!!!
How does touch event look?
Touch Events in iOS/Safari
• touchstart• touchmove• touchend• touchcancel
Touch Events in iOS/Safari
var target = document.getElementById(‘demo’);target.addEventListener(‘touchstart’, function(e) {
// e.touches// e.targetTouches// e.changedTouches
}, false);
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);
Touch Events in Android/Webkit
• No multi-touch till Android 3
• event property– event.touch === event.touches[0]
Touch Events in Firefox 4 Beta
• MozTouchDown• MozTouchMove• MozTouchUp
Touch Events in Firefox 4 Beta
document.addEventListener(‘MozTouchDown’, function(e) {// e.clientX
// e.clientY// e.streamId
// e.mozInputType}, false);
Touch Friendly CSS
Eliminate :hover pseudo class
How to tell whether it is a touch device?
Server Side UserAgent Sniffing
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$RewriteRule ^(.*)$ http://ipad.domain.com [R=301]
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">
JavaScript Sniffing
function isIPad(){ return navigator.platform == "iPad";}
function isTouchDevice() { return ‘ontouchstart’ in document;}
Gesture
Touch Event
Gesture Event
User Action
User Intent
Gesture Events in iOS/Safari
• gesturestart
• gesturechange
• gestureend
Gesture: Only for Multi Touch
Gesture Events in iOS
var target = document.getElementById(‘demo’);target.addEventListener(‘gesturechange’, function(e) {
// e.scale// e.rotation
}, false);
Gesture Events in Webkit on Android
Not yet
But, Android 3 will have it
YUI with Touch
YUI Touch Events is simple wrapper
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);
Touch Events in YUI
Y.one(“#demo”).on(“gesturechange”, function(e) {// e.scale// e.rotation
}, false);
YUI Gesture Events is abstraction of mouse and touch
Drag & Drop
D&D
Mouse Event Touch Event
Extend Touch Event with Synthetic Event
flick
gesturemovestartgesturemove
gesturemoveend
Summary
• Focus User Intent
• Make Touch Friendly UI
• YUI Helps
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/
ThanksQ&A