Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Touchy Feely with the Web

2,715 views

Published on

As the major­ity of web users shift to touch devices, the expect­a­tion is becom­ing that everything becomes touch­able — includ­ing the mobile web. This ses­sion will provide a prac­tical and prag­matic view of where touch is at from a web stand­ards per­spect­ive and how you can start weav­ing touch inter­ac­tions 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)

Published in: Technology, Sports
  • Be the first to comment

Getting Touchy Feely with the Web

  1. 1. Getting Touchy Feelywith the WebWDC Melbourne 23 May, 2012@ajfisher
  2. 2. slideshare.net/andrewjfisher github.com/ajfisher/wdcImage (CC) flickr - zzpza
  3. 3. 1. Mechanics of the API2. Using the components3. Applications
  4. 4. Mechanics of the APIImage (CC) flickr – grunge textures
  5. 5. Touch Event APItouchstarttouchendtouchmovetouchcanceltouchentertouchleavehttp://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
  6. 6. Touch Event APItouchstarttouchendtouchmovetouchcanceltouchentertouchleavehttp://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
  7. 7. TouchEvent ObjectTouchList touchesTouchList targetTouchesTouchList changedTouchesboolean altKey, metaKey, ctrlKey, shiftKeyEventTarget relatedTarget
  8. 8. TouchEvent ObjecttouchesAll touchestargetTouchesTouches related to DOM object with bound event.Watch out for nestingchangedTouchesTouches that caused this event to fire
  9. 9. Touch ObjectidentifiertargetpageX, pageYclientX, clientYscreenX, screenYradiusX, radiusYforcerotationAngle
  10. 10. Touch ObjectidentifiertargetpageX, pageYclientX, clientYscreenX, screenYradiusX, radiusYforcerotationAngle
  11. 11. SupportTouch Android 2.1+ / iOS 3+ / Opera Mobile / Firefox MobileMulti touch iOS 3+ Android 3+ (targetTouches only) Android 4+ (all) Opera Mobile & Firefox Mobile (depends on OS)
  12. 12. Touch API is likely to change
  13. 13. Making things touchableImage (CC) flickr – Mary Scheirer
  14. 14. Detecting a single touch
  15. 15. canvas.addEventListener("touchstart", (function(evt) { Single Touch 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);
  16. 16. Single touch - demoDemo at http://ajfisher.me/wdc/singletouch.html
  17. 17. Detecting multi touchesImage (CC) flickr – Jason White
  18. 18. canvas.addEventListener("touchstart", (function(evt) { Multi touch 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);
  19. 19. Multi touch - demoDemo at http://ajfisher.me/wdc/multitouch.html
  20. 20. Consider default behavioursevent.preventDefault()event.stopPropagation()
  21. 21. Understanding gestureImage (CC) flickr – Marc Wathieu
  22. 22. Pinch Zoom - touchstartimgzoom.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; }}
  23. 23. Pinch Zoom - touchmoveimgzoom.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 + ")"; }}
  24. 24. Pinch Zoom - touchendimgzoom.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; }}
  25. 25. Pinch Zoom- demoDemo at http://ajfisher.me/wdc/pinchzoom.html
  26. 26. Applications of touchImage (CC) flickr – Jamie Buscemi
  27. 27. Drag and drop- demoDemo at http://quirksmode.org/m/tests/drag2.html
  28. 28. NY Times Skimmer- demoDemo at http://nytimes.com/skimmer/#/World
  29. 29. OnSwipe- demoDemo at http://ajfisher.me with a mobile device
  30. 30. Flickr- demoDemo at http://flickr.com/photos/kaisphotos/lightbox
  31. 31. ResourcesW3C specdvcs.w3.org/hg/webevents/raw-file/tip/touchevents.htmlHTML Rocks Touchhtml5rocks.com/en/mobile/touch/Big list of touch stuffgithub.com/bebraw/jswiki/wiki/TouchMy demo codegithub.com/ajfisher/wdcTouch patent issuesblog.jquery.com/2012/04/10/getting-touchy-about-patents/w3.org/2012/01/touch-pag-charter
  32. 32. Getting Touchy Feelywith the WebWDC Melbourne 23 May, 2012@ajfishergithub.com/ajfisherslideshare.net/andrewjfisher

×