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.
Mobile Web on Touch Device &YUI<br />Morgan Cheng<br /> Jan 25th 2011<br />
Why Mobile?<br />
Why Touch Device?<br />
Touch is Direct User Intent<br />
Touch Device<br />
Why Web?<br />
Web: Cross Platform Solution<br />
Web: Cross Platform Solution<br />
Web: Cross Platform Solution<br />
Mobile + Touch Device + Web<br />
Touch API Support Layer<br />Web App<br />Browser<br />OS<br />Hardware<br />
Apple Touch Layer<br />Web App<br />Browser<br />OS<br />Hardware<br />
Microsoft Touch Layer: Limited<br />Web App<br />Browser<br />OS<br />Hardware<br />
Android Layer: Not Complete<br />Web App<br />Browser<br />OS<br />Hardware<br />
What’s different for Mobile Touch Web?<br />
Touch Event<br />
Why not mousedown/mousemove/mouseup?<br />
mousedown/mousemove/mouseup doesn’t work as usual in touch browser<br />Semantically, touch event is different from mouse ...
How does touch event look?<br />
Touch Events in iOS/Safari<br />touchstart<br />touchmove<br />touchend<br />touchcancel<br />
Touch Events in iOS/Safari<br />var target = document.getElementById(‘demo’);<br />target.addEventListener(‘touchstart’, f...
Touch Events in iOS/Safari<br />var target = document.getElementById(‘demo’);<br />target.addEventListener(‘touchstart’, f...
Touch Events in Android/Webkit<br />No multi-touch<br />event property<br />event.touch === event.touches[0]<br />
Touch Events in Firefox 4 Beta<br />MozTouchDown<br />MozTouchMove<br />MozTouchUp<br />
Touch Events in Firefox 4 Beta<br />document.addEventListener(‘MozTouchDown’, function(e) {<br />	// e.clientX<br /> 	// e...
Touch Friendly CSS<br />
Eliminate :hover pseudo class<br />
How to tell whether it is a touch device?<br />
Server Side UserAgent Sniffing<br />RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$<br />RewriteRule ^(.*)$ http://ipad.domain.c...
Media Query<br />@media handheld, only screen and (max-device-width: 1024px) {<br />      /* iPad specific CSS */<br />}<b...
JavaScript Sniffing<br />function isIPad(){<br />    return navigator.platform == "iPad";<br />}<br />function isTouchDevi...
Gesture<br />
Gesture Event<br />User Intent<br />Touch Event<br />User Action<br />
Gesture Events in iOS/Safari<br />gesturestart<br />gesturechange<br />gestureend<br />
Gesture: Only for Multi Touch<br />
Gesture Events in iOS<br />var target = document.getElementById(‘demo’);<br />target.addEventListener(‘gesturechange’, fun...
Gesture Events in Webkit on Android<br />Not yet <br />
YUI with Touch<br />
YUI Touch Events is simple wrapper<br />
Touch Events in YUI<br />Y.one(“#demo”).on(“touchstart”, function(e) {<br />	// e.touches<br />	// e.targetTouches<br />	/...
Touch Events in YUI<br />Y.one(“#demo”).on(“gesturechange”, function(e) {<br />	// e.scale<br />	// e.rotation<br />}, fal...
YUI Gesture Events is abstraction of mouse and touch<br />
Drag & Drop<br />
D&D<br />Mouse Event<br />Touch Event<br />
Extend Touch Event with Synthetic Event<br />
flick<br />
gesturemovestartgesturemovegesturemoveend<br />
Summary<br />Focus User Intent<br />Make Touch Friendly UI<br />YUI Helps<br />
Resources<br />Touch State-of-the-art<br />http://www.quirksmode.org/blog/archives/2010/02/the_touch_actio.html<br />Touch...
ThanksQ&A<br />
Upcoming SlideShare
Loading in …5
×

Mobile Web on Touch Event and YUI

4,431 views

Published on

Touch device and

Published in: Technology
  • Be the first to comment

Mobile Web on Touch Event and YUI

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

×