U Can Touch This

Transcript

1. U Can Touch This Ryan Joy - @atxryan
2. Who am I? Web developer / UX developer Developer Evangelist @ Microsoft <3 JavaScript Local meetup organizer. Come talk to me about Refresh Austin, Austin Windows App Developers. I tweet a lot. @atxryan
3. Why does touch matter?
4. Chromebook Pixel Chromebook Pixel supports touch!
5. What’s your strategy for Touch?
6. Touch is touching
7. We all have fat fingers. Recommended minimum:
8. Don’t forget about the ergonomics
9. Design for hands and fingers in mind
10. Do it the Right way
11. Design for Touch First
12. Provide breathing room
13. 10 fingers!
14. We still have a mouse though!
15. What about a digitized stylus?
16. Wait. That’s a lot of inputs. How do I handle all of those?
17. Pointers
18. W3C Pointer Events Spec
19. Everybody’s doing it The Dojo team has been watching the progress of Pointer Events in the W3C standardization process as it moves to Candidate Recommendation. We see Pointer Events as a great way to unify the disparate models that exist today for mouse, touch, and other pointer devices. Our team looks forward to implementing Pointer Events in the 2.0 release of the Dojo Toolkit. – Bill Keese, Dijit Project Lead We see Pointer Events as a great way to unify the haphazard models that exist today for mouse, touch, and other pointer devices. Our team looks forward to supporting web developer use of Pointer Events as implementations begin to arrive – Dave Methvin, President jQuery Foundation With Pointer Events reaching Candidate Recommendation stage, it is time all mobile html5 application developers paid attention. The best part; you can start using it today…. – Jesse MacFadyen, Adobe Developer, Cordova Committer
20. Event Model  pointerdown  pointerup  pointermove  pointerover  pointerout  pointercancel Supports multipoint inputs Captures touch, click, and pen
21. Additional properties - width - height - pressure (pen) - tilt (pen) - rotation - pointerType - pointerId - Event type - And more!
22. Let’s see some Pointers in action.
23. Touch first, but not exclusively. Change this to this
24. Start now! Use polyfills for Pointer events
25. Polyfills • Hand.js - http://handjs.codeplex.com/ • Polymer PointerEvents - https://github.com/Polymer/PointerEvents • Pointer.js - https://github.com/borismus/pointer.js • Points.js - https://github.com/Rich-Harris/Points • More…
26. Hand.js
27. Code for multi-touch
28. CSS
29. • http://docs.webplatform.org/PointerEvents • http://www.w3.org/TR/pointerevents/
30. Thank you! Ryan Joy - @atxryan