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.

Like this presentation? Why not share!

Taxonomy of Touch

on

  • 4,817 views

• 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

Statistics

Views

Total Views
4,817
Views on SlideShare
4,776
Embed Views
41

Actions

Likes
10
Downloads
93
Comments
0

4 Embeds 41

http://lanyrd.com 21
http://www.linkedin.com 15
https://www.linkedin.com 4
http://www.lucabacchi.it 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Taxonomy of Touch Taxonomy of Touch Presentation Transcript

  • Taxonomy of Touch @natekoechley #yuiconf 20101109
  • Touch input intent implement invent
  • 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
  • Touch is input.
  • Categories of Input • Modes (mechanical, audio, visual) • Discrete vs Continuous • Various Degrees of Freedom “Pointing” devices specifically: • Direct vs. Indirect • Absolute vs. Relative
  • 1875—Christopher Sholes
  • 1963—Bill English & Douglas Engelbart
  • 1971—Dr. Sam Hurst
  • 1995—Mouse Systems’ ProAgio
  • WheelEvents
  • WheelEvents = DOM 3
  • 201,700
  • Touch is direct and absolute, discrete and continuous, and with a high degree of freedom. A promising combination!!
  • Click, Two-button click, 360º scroll, Screen zoom, Two-finger swipe
  • Click
  • Scroll
  • Swipe
  • Rotate
  • The Big Mobile Players • iOS • webOS • Blackberry • Android • WP7
  • 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
  • 2010/10/28 14:30:32
  • @w3cwebevents 8 days 4 tweets 67 followers
  • 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.
  • Fit the user. “Implementation Model to Mental Model.” Now, fit the device!
  • Web Events WG Charter • Deliverables include a spec and APIs for: “low-level physical events” “high-level representational events”
  • Touch is physical intent.
  • “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.
  • “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.
  • “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.
  • 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. • ...
  • 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?)
  • iOS GestureRecognizers Libs • StatePossible • StateBegan • StateChanged • StateEnded • StateCancelled • StateFailed • StateRecognized = StateEnded
  • Implement. (What’s in YUI Today)
  • That’s YUI3: A solid foundation for the future!
  • Events Evolved. http://developer.yahoo.com/yui/theater/ video.php?v=smith-yuiconf2009-events (Luke FTW)
  • 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)
  • • Body text • event/event-touch.js • event-gestures/event-flick.js • event-gestures/event-move.js • event-gestures/event-gestures.js
  • event-touch • Adds touch event facade normalization properties (touches, changedTouches, targetTouches etc.) to the DOM event facade
  • 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
  • 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
  • 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
  • flick • Fires a flick event in response to user’s flick gesture • minDistance (px) • minVelocity (px/ms) • preventDefault • axis
  • Example Swipe to Delete
  • 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 }); });
  • Example Scrollview
  • #yuiconf2011
  • Invent.
  • 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.
  • Room to grow • WP7 platform supports multi-touch of up to 10 simultaneous touch points.
  • Hold = context menu?
  • Character Gestures ?
  • 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
  • thanks! nate.koechley.com