Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 />
Nächste SlideShare
Wird geladen in …5
×

Mobile Web on Touch Event and YUI

4.447 Aufrufe

Veröffentlicht am

Touch device and

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×