Responsive Web Applications

If you'd like to see the accompanying talk, head over to http://video.kiberpipa.org/SU_Klemen_Slavic-Responsive_web_applications/ .

Transcript

1. Responsive Web Applications Klemen Slavič http://about.me/klemen.slavic
2. Basically ...
3. http://www.flickr.com/photos/heathbrandon/3187207970/ Information.
4. http://www.flickr.com/photos/deathtogutenberg/361664198/ We create it.
5. http://www.flickr.com/photos/butchershopglasgow/5594308079/ We consume it.
6. Across various media. http://www.flickr.com/photos/entropy1138/5282203331/
7. It‘s interactive. http://www.flickr.com/photos/jbergen/1271176832/
8. http://www.flickr.com/photos/mc/1602236114/ It‘s haptic.
9. http://www.flickr.com/photos/just-an-idea/3750094/ It‘s responsive.
10. http://hashemartworks.net/wp-content/uploads/2008/11/tablet-1-frontback.jpg It wasn‘t always like this, though.
11. http://www.flickr.com/photos/wijkerslooth/4251533995/ Traditionally, it was always bound to a medium.
12. http://www.flickr.com/photos/netphotography/2360185459/ But along came computers.
13. http://www.flickr.com/photos/cstmweb/4348489567/ Information became coded, abstract.
14. http://www.flickr.com/photos/bradandkathy/2404564885/ It became intangible.
15. http://www.flickr.com/photos/jvk/1458010/ Reproduction was cheap, but lacking.
16. http://forums.cgsociety.org/showthread.php?f=121&t=399499 Computers are catching up, though.
17. http://www.flickr.com/photos/holmgren/1375283440/ But interaction was indirect, clunky.
18. http://www.flickr.com/photos/34575118@N04/4240822343/ It still is.
19. http://www.flickr.com/photos/steffenj/847762820/ What makes it so inaccessible?
20. http://www.flickr.com/photos/yours-intuitively/4063292553/ We use all five senses to experience the world around us.
21. http://www.flickr.com/photos/johnencinas/3928235670/ Devices can cater to sight and sound.
22. http://www.flickr.com/photos/mrehan00/4530022593/ But there‘s a more important sense for interaction – touch.
23. http://www.flickr.com/photos/sehdeva/3426904301/ Obviously, we‘re ignoring taste and smell. (But frankly, we‘re glad those aren‘t part of the experience.)
24. http://www.flickr.com/photos/monkeyballs/2197694839/ Touch is direct.
25. http://www.flickr.com/photos/dcmetroblogger/4915501829/ Interaction becomes natural.
26. http://www.flickr.com/photos/nasteeca/4395540224/ Not everything supports it, though.
27. http://www.flickr.com/photos/wookieebyte/2477314947/ But why should we be creating baseline experiences for everyone?
28. http://www.neatorama.com/2010/06/11/the-macgyver-fact-check/ Use whatever is available at the time.
29. http://thewoodwhisperer.com/evolution-of-a-workshop/ Adapt. Evolve.
30. http://thewoodwhisperer.com/evolution-of-a-workshop/ ... but beware of convenience traps.
31. http://www.flickr.com/photos/jacobpellegren/383757210/ A touch does not a pointer make.
32. Even though a tap triggers a click, it doesn‘t mean we should treat it as such.
33. • A finger obscures the content • A touch isn‘t as precise as a pointer • Touches wiggle, mouse pointers don‘t (easy to mistake for a drag) • A mouse has a single pointer, but you can have multiple touches • A pointer is persistent, a touch is not Need reasons? Fine:
34. There are numerous pitfalls associated with assuming a mouse+keyboard paradigm.
35. • Menus with hover-triggered content • Gallery widgets that pause on hover • Using mouse drag events to navigate, interact • Using double clicks • Using right clicks • ... Need we go on? Le Gránde Fail
36. http://www.flickr.com/photos/naiffer/2691471212/ Hands up: has this ever happened to you?
37. http://artoftrolling.memebase.com/2011/10/05/sweet-prince-troll-ubuntu-will-miss-you/ We need to think differently.
38. Too soon?
39. ... aaaaanyways, moving on.
40. Select item Left click Tap Hand/plane intersection Voice command We need to abstract interaction.
41. http://www.inquirer.net/remembering-steve-jobs Abstraction helps our vocabulary.
42. It avoids convenience traps by defining new events that are triggered by different primitive interactions.
43. http://www.flickr.com/photos/mardis/4100051854/ We no longer think in terms of „clicks“
44. http://www.flickr.com/photos/34228744@N07/3186833195/ ... but in terms of actions within our environment.
45. http://www.paintinghere.com/canvas/why_so_serious_the_joker_28214.html But why all the fuss?
46. http://futurefriend.ly Two words:
47. Touch is not the only emerging interface.
48. http://www.avclub.com/articles/kinect,47642/ Kinect shows a lot of promise.
49. It provides a way to physically place yourself within the interface, indirectly.
50. Not near it (mouse+keyboard), not on it (touch), but within it.
51. Oh, and you can talk to it. (There‘s a Web Audio API on the way.)
52. Seriously.
53. Think about it.
54. That‘s why it‘s so important that we‘re able to express actions as a series of interface events, regardless of the interaction.
55. After that, we‘re free to add support for any future interaction model.
56. • Ultra- and infrasound projectors for remote haptic feedback • Immersive holography • Natural language interfaces • Non-invasive neural interfaces • THE ! Just to name a few:
57. Okay.
58. So we‘re not there just yet.
59. We‘re still missing browser support for most of these.
60. Let‘s make use of the features that are available.
61. • User touches a point on the screen • User lifts the finger after no more than 300ms and doesn‘t move it by more than 10px • If above condition holds: – we trigger a tap event and forward it the coordinates and target element • Else: – we do nothing Let‘s define a touch event – tap
62. • User touches a point on the screen • User moves the finger by more than 10px in any direction and lifts the finger • Determine the direction (N, S, E, W), trigger a swipe event and forward it the direction, initial coordinates and length of the swipe A swipe is similar:
63. • Determine which person is interacting • Place a plain parallel to the user‘s abdomen at about 2/3 arm‘s length in front of them • Determine intersection point(s) of skeleton with the plane to determine „touch“ points • Trigger intersection events for each intersection on each animation frame • ...[more steps here]... • Profit Working with spatial data is trickier:
64. • Use the browser‘s Speech Input API to determine a command • Use prescribed grammar to match words to commands • Trigger events based on the chosen command on the active element Voice interaction is simpler:
65. We can set up any number of these events based on primitive events. Even gestures.
66. Demo time!
67. Go fork and conquer. http://github.com/krofdrakula/i-o-hu