Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Applications

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/ .

Klemen Slavič

December 14, 2011
Tweet

More Decks by Klemen Slavič

Other Decks in Programming

Transcript

  1. Responsive Web Applications
    Klemen Slavič
    http://about.me/klemen.slavic

    View full-size slide

  2. Basically ...

    View full-size slide

  3. http://www.flickr.com/photos/heathbrandon/3187207970/
    Information.

    View full-size slide

  4. http://www.flickr.com/photos/deathtogutenberg/361664198/
    We create it.

    View full-size slide

  5. http://www.flickr.com/photos/butchershopglasgow/5594308079/
    We consume it.

    View full-size slide

  6. Across various media.
    http://www.flickr.com/photos/entropy1138/5282203331/

    View full-size slide

  7. It‘s interactive.
    http://www.flickr.com/photos/jbergen/1271176832/

    View full-size slide

  8. http://www.flickr.com/photos/mc/1602236114/
    It‘s haptic.

    View full-size slide

  9. http://www.flickr.com/photos/just-an-idea/3750094/
    It‘s responsive.

    View full-size slide

  10. http://hashemartworks.net/wp-content/uploads/2008/11/tablet-1-frontback.jpg
    It wasn‘t always like this, though.

    View full-size slide

  11. http://www.flickr.com/photos/wijkerslooth/4251533995/
    Traditionally, it was always
    bound to a medium.

    View full-size slide

  12. http://www.flickr.com/photos/netphotography/2360185459/
    But along came computers.

    View full-size slide

  13. http://www.flickr.com/photos/cstmweb/4348489567/
    Information became coded, abstract.

    View full-size slide

  14. http://www.flickr.com/photos/bradandkathy/2404564885/
    It became intangible.

    View full-size slide

  15. http://www.flickr.com/photos/jvk/1458010/
    Reproduction was cheap, but lacking.

    View full-size slide

  16. http://forums.cgsociety.org/showthread.php?f=121&t=399499
    Computers are catching up, though.

    View full-size slide

  17. http://www.flickr.com/photos/holmgren/1375283440/
    But interaction was indirect, clunky.

    View full-size slide

  18. http://www.flickr.com/photos/34575118@N04/4240822343/
    It still is.

    View full-size slide

  19. http://www.flickr.com/photos/steffenj/847762820/
    What makes it so inaccessible?

    View full-size slide

  20. http://www.flickr.com/photos/yours-intuitively/4063292553/
    We use all five senses to
    experience the world around us.

    View full-size slide

  21. http://www.flickr.com/photos/johnencinas/3928235670/
    Devices can cater to sight and sound.

    View full-size slide

  22. http://www.flickr.com/photos/mrehan00/4530022593/
    But there‘s a more important
    sense for interaction – touch.

    View full-size slide

  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.)

    View full-size slide

  24. http://www.flickr.com/photos/monkeyballs/2197694839/
    Touch is direct.

    View full-size slide

  25. http://www.flickr.com/photos/dcmetroblogger/4915501829/
    Interaction becomes natural.

    View full-size slide

  26. http://www.flickr.com/photos/nasteeca/4395540224/
    Not everything supports it, though.

    View full-size slide

  27. http://www.flickr.com/photos/wookieebyte/2477314947/
    But why should we be creating
    baseline experiences for everyone?

    View full-size slide

  28. http://www.neatorama.com/2010/06/11/the-macgyver-fact-check/
    Use whatever is available at the time.

    View full-size slide

  29. http://thewoodwhisperer.com/evolution-of-a-workshop/
    Adapt. Evolve.

    View full-size slide

  30. http://thewoodwhisperer.com/evolution-of-a-workshop/
    ... but beware of convenience traps.

    View full-size slide

  31. http://www.flickr.com/photos/jacobpellegren/383757210/
    A touch does not a pointer make.

    View full-size slide

  32. Even though a tap triggers a
    click, it doesn‘t mean we
    should treat it as such.

    View full-size slide

  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:

    View full-size slide

  34. There are numerous pitfalls
    associated with assuming a
    mouse+keyboard paradigm.

    View full-size slide

  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

    View full-size slide

  36. http://www.flickr.com/photos/naiffer/2691471212/
    Hands up: has this ever
    happened to you?

    View full-size slide

  37. http://artoftrolling.memebase.com/2011/10/05/sweet-prince-troll-ubuntu-will-miss-you/
    We need to think differently.

    View full-size slide

  38. ... aaaaanyways, moving on.

    View full-size slide

  39. Select
    item
    Left click
    Tap
    Hand/plane
    intersection
    Voice
    command
    We need to abstract interaction.

    View full-size slide

  40. http://www.inquirer.net/remembering-steve-jobs
    Abstraction helps our vocabulary.

    View full-size slide

  41. It avoids convenience traps
    by defining new events that
    are triggered by different
    primitive interactions.

    View full-size slide

  42. http://www.flickr.com/photos/mardis/4100051854/
    We no longer think in terms of „clicks“

    View full-size slide

  43. http://www.flickr.com/photos/34228744@N07/3186833195/
    ... but in terms of actions
    within our environment.

    View full-size slide

  44. http://www.paintinghere.com/canvas/why_so_serious_the_joker_28214.html
    But why all the fuss?

    View full-size slide

  45. http://futurefriend.ly
    Two words:

    View full-size slide

  46. Touch is not the only
    emerging interface.

    View full-size slide

  47. http://www.avclub.com/articles/kinect,47642/
    Kinect shows a lot of promise.

    View full-size slide

  48. It provides a way to
    physically place yourself
    within the interface,
    indirectly.

    View full-size slide

  49. Not near it
    (mouse+keyboard),
    not on it (touch),
    but within it.

    View full-size slide

  50. Oh, and you can talk to it.
    (There‘s a Web Audio API on the way.)

    View full-size slide

  51. Think about it.

    View full-size slide

  52. That‘s why it‘s so important
    that we‘re able to
    express actions as
    a series of interface events,
    regardless of the interaction.

    View full-size slide

  53. After that, we‘re free to add
    support for any future
    interaction model.

    View full-size slide

  54. • Ultra- and infrasound projectors for remote
    haptic feedback
    • Immersive holography
    • Natural language interfaces
    • Non-invasive neural interfaces
    • THE !
    Just to name a few:

    View full-size slide

  55. So we‘re not
    there just yet.

    View full-size slide

  56. We‘re still missing browser
    support for most of these.

    View full-size slide

  57. Let‘s make use of the
    features that are available.

    View full-size slide

  58. • 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

    View full-size slide

  59. • 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:

    View full-size slide

  60. • 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:

    View full-size slide

  61. • 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:

    View full-size slide

  62. We can set up any number
    of these events based on
    primitive events.
    Even gestures.

    View full-size slide

  63. Go fork and conquer.
    http://github.com/krofdrakula/i-o-hu

    View full-size slide