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