• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Taxonomy of Touch

  • 3,968 views
Uploaded on

• Provided technology and design guidance on leveraging the emergence of touch and gestures across iOS devices, Android, webOS and WP7 platforms …

• Provided technology and design guidance on leveraging the emergence of touch and gestures across iOS devices, Android, webOS and WP7 platforms

• Demonstrated coding techniques for engineering a unified code that can serve multiple I/O models (touch vs. mouse)

• Reported on touch and gesture event models being standardized by the W3C’s Web Events working group

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,968
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
93
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Taxonomy of Touch @natekoechley #yuiconf 20101109
  • 2. Touch input intent implement invent
  • 3. More on touch: • Finger Tips: Lessons Learned From Building a Touch-Based Experience Mark Kawakami, Today @ 3pm, C4 • A phone, a tablet and a laptop walk into a bar...YUI's approach to mobile web development Satyen Desai, Tomorrow @ 4:30pm, C5
  • 4. Touch is input.
  • 5. Categories of Input • Modes (mechanical, audio, visual) • Discrete vs Continuous • Various Degrees of Freedom “Pointing” devices specifically: • Direct vs. Indirect • Absolute vs. Relative
  • 6. 1875—Christopher Sholes
  • 7. 1963—Bill English & Douglas Engelbart
  • 8. 1971—Dr. Sam Hurst
  • 9. 1995—Mouse Systems’ ProAgio
  • 10. WheelEvents
  • 11. WheelEvents = DOM 3
  • 12. 201,700
  • 13. Touch is direct and absolute, discrete and continuous, and with a high degree of freedom. A promising combination!!
  • 14. Click, Two-button click, 360º scroll, Screen zoom, Two-finger swipe
  • 15. Click
  • 16. Scroll
  • 17. Swipe
  • 18. Rotate
  • 19. The Big Mobile Players • iOS • webOS • Blackberry • Android • WP7
  • 20. Mobile Gesture Support Drag (2- Tap DblTap Fling Drag Spread Pinch Press Rotate Fngr) Pinch Pinch Touch & 2-Finger iOS Tap DblTap Flick Drag X Open Close Hold Scroll Touch & WP7 Tap DblTap Flick Pan Pinch Pinch X X Hold Swipe / Touch & webOS Tap DblTap Flick Touch & Spread Pinch X Rotate Drag Hold Touch & Android Tap DblTap Flick Drag Pinch Pinch X X Hold thanks to @lukew
  • 21. 2010/10/28 14:30:32
  • 22. @w3cwebevents 8 days 4 tweets 67 followers
  • 23. Web Events WG Charter • Browsers and devices making increasing use of touch-sensitive inputs... • ...this enables web developers to build more intuitive and sophisticated applications that fit naturally with the device being used.
  • 24. Fit the user. “Implementation Model to Mental Model.” Now, fit the device!
  • 25. Web Events WG Charter • Deliverables include a spec and APIs for: “low-level physical events” “high-level representational events”
  • 26. Touch is physical intent.
  • 27. “I want to see more” v1 • When the user wants to see more of a view at once, the user moves two fingers toward each other, in a pinching gesture, with the conventional meaning of zoom-out.
  • 28. “I want to see more” v2 • User moves two touches toward each other in a pinching gesture which zooms out on the object so the user can see more of it.
  • 29. “I want to see more” v3 User moves two touches toward each other... ...in a pinching gesture... ...which zooms the object out... ...so the user can see more of it.
  • 30. Pinching In • Physical: “When the user moves two touches toward each other” • Gestural: “in a pinching gesture” • Representational: “the conventional meaning is zoom-out” • Intention: User wants to see more of an object being manipulated. • ...
  • 31. Conceptual Layers of Touch • Physical — lowest level; physical actions • Gestural — middle layer; describes specific mappings. Often device-specific • Representational — highest level of abstraction; means to the end (zoom) • Intentional — above the APIs. What’s the user goal? (ex: see more) (Also: physical metadata may be important, such as which pen color?)
  • 32. iOS GestureRecognizers Libs • StatePossible • StateBegan • StateChanged • StateEnded • StateCancelled • StateFailed • StateRecognized = StateEnded
  • 33. Implement. (What’s in YUI Today)
  • 34. That’s YUI3: A solid foundation for the future!
  • 35. Events Evolved. http://developer.yahoo.com/yui/theater/ video.php?v=smith-yuiconf2009-events (Luke FTW)
  • 36. Synthetic Events • YUI3/event/event-synthetic.js • Define new events beyond DOM • Like Custom Events, label interesting moments...but on the page rather than in your application • Then subscribe like you would any DOM event Y.Event.define(name, config)
  • 37. • Body text • event/event-touch.js • event-gestures/event-flick.js • event-gestures/event-move.js • event-gestures/event-gestures.js
  • 38. event-touch • Adds touch event facade normalization properties (touches, changedTouches, targetTouches etc.) to the DOM event facade
  • 39. gesturemovestart • On touch devices, fires in response to a single finger “touchstart” • On mouse devices, fires in response to a “mousedown” • minDistance • minTime • button • preventDefault
  • 40. gesturemove • On touch devices, fires in response to a single finger “touchmove” • On mouse devices, fires in response to a “mousemove” • Only fires after gesturemovestart by default • standAlone • root • preventDefault
  • 41. gesturemoveend • On touch devices, fires in response to a single finger “touchend” • On mouse devices, fires in response to a “mouseup” • Again, by default only fires as part of a sequence • standAlone • root • preventDefault
  • 42. flick • Fires a flick event in response to user’s flick gesture • minDistance (px) • minVelocity (px/ms) • preventDefault • axis
  • 43. Example Swipe to Delete
  • 44. YUI().use("node-base", "node-event-delegate", "event-move", function(Y) { Y.Node.one("#swipe").delegate("gesturemovestart", function(e) { // store the data on the node instead of passing it along item.setData("swipeStart", e.pageX); // only need one, and auto-detach item.once("gesturemoveend", function(e) { // compare coords and deterine is left swipe var swipeStart = item.getData("swipeStart"), swipeEnd = e.pageX, isSwipeLeft = (swipeStart - swipeEnd) > MIN_SWIPE; if (isSwipeLeft) { item.one("." + DELETE).removeClass(HIDDEN); } }, "li", { preventDefault:true }); });
  • 45. Example Scrollview
  • 46. #yuiconf2011
  • 47. Invent.
  • 48. Opera’s gestures (~2001.04) • Navigation: Previous page, next page, parent directory, fast forward, rewind, homepage, reload page, stop loading. • Page: browse in new tab, duplicate tab, restore/ maximize, minimize, close • Link: open link in new tab, open link in background • Wheel: scroll up and down, zoom in and out, restore default zoom, move back/forth in tab history, cycle through open tabs, panning.
  • 49. Room to grow • WP7 platform supports multi-touch of up to 10 simultaneous touch points.
  • 50.
  • 51. Hold = context menu?
  • 52. Character Gestures ?
  • 53. More on touch: • Finger Tips: Lessons Learned From Building a Touch-Based Experience Mark Kawakami, Today @ 3pm, C4 • A phone, a tablet and a laptop walk into a bar...YUI's approach to mobile web development Satyen Desai, Tomorrow @ 4:30pm, C5
  • 54. thanks! nate.koechley.com