getting touchy feely with the web
DESCRIPTION
As the majority of web users shift to touch devices, the expectation is becoming that everything becomes touchable — including the mobile web. This session will provide a practical and pragmatic view of where touch is at from a web standards perspective and how you can start weaving touch interactions into your mobile web applications. This presentation given at Web Directions Code, Melbourne - Wednesday 23 May, 2012 (Video: http://www.youtube.com/watch?v=SZEr5Fu0MxA)TRANSCRIPT
![Page 1: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/1.jpg)
Getting Touchy Feely with the WebWDC Melbourne 23 May, 2012
@ajfisher
![Page 2: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/2.jpg)
slideshare.net/andrewjfishergithub.com/ajfisher/wdc
Image (CC) flickr - zzpza
![Page 3: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/3.jpg)
1. Mechanics of the API2. Using the components3. Applications
![Page 4: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/4.jpg)
Mechanics of the API
Image (CC) flickr – grunge textures
![Page 5: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/5.jpg)
Touch Event API
touchstarttouchendtouchmovetouchcanceltouchentertouchleave
http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
![Page 6: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/6.jpg)
Touch Event API
touchstarttouchendtouchmovetouchcanceltouchentertouchleave
http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
![Page 7: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/7.jpg)
TouchEvent Object
TouchList touchesTouchList targetTouchesTouchList changedTouchesboolean altKey, metaKey, ctrlKey, shiftKeyEventTarget relatedTarget
![Page 8: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/8.jpg)
TouchEvent Object
touchesAll touches
targetTouchesTouches related to DOM object with bound event. Watch out for nesting
changedTouchesTouches that caused this event to fire
![Page 9: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/9.jpg)
Touch Object
identifiertargetpageX, pageYclientX, clientYscreenX, screenYradiusX, radiusYforcerotationAngle
![Page 10: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/10.jpg)
Touch Object
identifiertargetpageX, pageYclientX, clientYscreenX, screenYradiusX, radiusYforcerotationAngle
![Page 11: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/11.jpg)
Support
TouchAndroid 2.1+ / iOS 3+ / Opera Mobile / Firefox Mobile
Multi touchiOS 3+Android 3+ (targetTouches only)Android 4+ (all)Opera Mobile & Firefox Mobile (depends on OS)
![Page 12: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/12.jpg)
Touch API is likely to change
![Page 13: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/13.jpg)
Making things touchable
Image (CC) flickr – Mary Scheirer
![Page 14: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/14.jpg)
Detecting a single touch
![Page 15: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/15.jpg)
Single Touch
canvas.addEventListener("touchstart", (function(evt) { evt.preventDefault(); start_point = $.extend({}, evt.changedTouches[0]); end_point = null; draw_touches();}), false);canvas.addEventListener("touchend", (function(evt) { end_point = evt.changedTouches[0]; current_point = null; draw_touches();}), false);canvas.addEventListener("touchmove", (function(evt) { evt.preventDefault(); current_point = evt.targetTouches[0]; draw_touches();}), false);
![Page 16: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/16.jpg)
Single touch - demo
Demo at http://ajfisher.me/wdc/singletouch.html
![Page 17: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/17.jpg)
Detecting multi touches
Image (CC) flickr – Jason White
![Page 18: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/18.jpg)
Multi touchcanvas.addEventListener("touchstart", (function(evt) { evt.preventDefault(); start_point.push($.extend({}, evt.changedTouches[0])); draw_multi_touches();}), false);canvas.addEventListener("touchend",(function(evt) { end_point.push($.extend({}, evt.changedTouches[0])); draw_multi_touches(); if (evt.targetTouches.length == 0) { start_point = new Array(); end_point = new Array(); }}), false);canvas.addEventListener("touchmove", (function(evt) { evt.preventDefault(); current_point = evt.targetTouches; draw_multi_touches(); }), false);
![Page 19: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/19.jpg)
Multi touch - demo
Demo at http://ajfisher.me/wdc/multitouch.html
![Page 20: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/20.jpg)
Consider default behaviours
event.preventDefault()event.stopPropagation()
![Page 21: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/21.jpg)
Understanding gesture
Image (CC) flickr – Marc Wathieu
![Page 22: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/22.jpg)
Pinch Zoom - touchstart
imgzoom.addEventListener("touchstart", check_zoom, false);function check_zoom(evt) { evt.preventDefault(); var tt = evt.targetTouches; if (tt.length >= 2) {
dist = distance(tt[0], tt[1]);scaling = true;
} else { scaling = false; }
}
![Page 23: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/23.jpg)
Pinch Zoom - touchmove
imgzoom.addEventListener("touchmove", do_zoom, false);function do_zoom(evt) { evt.preventDefault(); var tt = evt.targetTouches; if (scaling) {
curr_scale = distance(tt[0], tt[1]) / dist * scale_factor;imgzoom.style.WebkitTransform =
"scale(" + curr_scale + ", " + curr_scale + ")"; }}
![Page 24: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/24.jpg)
Pinch Zoom - touchend
imgzoom.addEventListener("touchend", end_zoom, false);function end_zoom(evt) { var tt = evt.targetTouches; if (tt.length < 2) { scaling = false; if (curr_scale < min_zoom) { scale_factor = min_zoom; } else { if (curr_scale > max_zoom) { scale_factor = max_zoom; } else { scale_factor = curr_scale; } } } imgzoom.style.WebkitTransform =
"scale(" + scale_factor + ", " + scale_factor + ")"; } else { scaling = true; }}
![Page 25: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/25.jpg)
Pinch Zoom- demo
Demo at http://ajfisher.me/wdc/pinchzoom.html
![Page 26: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/26.jpg)
Applications of touch
Image (CC) flickr – Jamie Buscemi
![Page 27: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/27.jpg)
Drag and drop- demo
Demo at http://quirksmode.org/m/tests/drag2.html
![Page 28: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/28.jpg)
NY Times Skimmer- demo
Demo at http://nytimes.com/skimmer/#/World
![Page 29: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/29.jpg)
OnSwipe- demo
Demo at http://ajfisher.me with a mobile device
![Page 30: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/30.jpg)
Flickr- demo
Demo at http://flickr.com/photos/kaisphotos/lightbox
![Page 31: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/31.jpg)
Resources
W3C specdvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
HTML Rocks Touchhtml5rocks.com/en/mobile/touch/
Big list of touch stuffgithub.com/bebraw/jswiki/wiki/Touch
My demo codegithub.com/ajfisher/wdc
Touch patent issuesblog.jquery.com/2012/04/10/getting-touchy-about-patents/w3.org/2012/01/touch-pag-charter
![Page 32: Getting Touchy Feely with the Web](https://reader035.vdocuments.site/reader035/viewer/2022062418/554e2574b4c9056b798b502f/html5/thumbnails/32.jpg)
Getting Touchy Feely with the WebWDC Melbourne 23 May, 2012
@ajfishergithub.com/ajfisherslideshare.net/andrewjfisher