Mobile Web on Touch Event and YUI

4,190 views
4,060 views

Published on

Touch device and

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,190
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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 />

×