Upload
tim-park
View
776
Download
1
Embed Size (px)
DESCRIPTION
For 15 years we've been constrained by a event model on the web that assumes that a mouse is the only possible pointing device that an application could need. In this presentation I talk about how touch is becoming the dominant pointer in use on the web, some things we have learned about the best practices for this reality, and how Pointer Events will help us make the web applications truly touchable.
Citation preview
Pointing ForwardTim Park
@timpark
Microsoft
Some patterns stop working
Don’t
Use
It
Hover
Rethink target sizing
Rethink target positioning
Designing for touch
Interaction areas Reading areas
W3C Proposal: Pointer Events• http://www.w3.org/TR/pointerevents/• Joint Proposal with Mozilla• Goals• Unified model for multiple input types• Ability to identify different input types• Expose attributes to take advantage of input types
• Moved from First Public Working Draft to Candidate Recommendation in 5 months.
Pointer Events: An Evolutionmousedownmouseup
mousemovemouseovermouseoutmouseentermouseleave
pointerdownpointeruppointercancelpointermovepointeroverpointeroutpointerenterpointerleave
Pointer Events: Attributes
...beyond existing button, clientX, clientY in mouse events.
• width • height• pressure• tilt• pointerType• pointerId
Pointer Events expand the set of attributes available…
Attributes: width and heightPointing devices often have a real world physical contact size.
Attributes: pressure, tiltX, tiltYPressure and tilt enable rich, real world interactions.
Attributes: pointerType, pointerIdpointerType: Which type of pointing device.
pointerId: Which instance of a pointing device.
Demo: Pointer Events(Available at: http://github.com/timfpark/PointerPaint)
Pointer Events: Getting Started• IE10 has vendor prefixed support• IE11 has unprefixed support.• Chromium WebKit prototype at http://aka.ms/pointium
• Polyfills Available• Hand.js: http://handjs.codeplex.com• Points.js: http://github.com/Rich-Harris/Points
Thanks!Tim Park
@timpark
Microsoft