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

Turn by Turn Navigation in the Browser

Turn by Turn Navigation in the Browser

Vorstellung von instantnavi.com bei RheinMainJS im Dezember 2012.

Mit instantnavi kann man eigene Turn-by-Turn Navigationssysteme
erstellen, die man auf jedem iPhone und Android Gerät nutzen und teilen kann.

instantnavi ist eine HTML5 web app, die man auf dem HomeScreen des Gerätes speichern kann.

Christian Bäuerlein

December 10, 2012
Tweet

More Decks by Christian Bäuerlein

Other Decks in Programming

Transcript

  1. Christian Bäuerlein
    JavaScript / Ruby Developer @flinc
    2
    Hallo RheinMainJS!!!

    View full-size slide

  2. Turn by Turn Navigation
    3

    View full-size slide

  3. HTML5
    Geolocation API
    4

    View full-size slide

  4. Turn by Turn Navigation
    im Browser
    6

    View full-size slide

  5. Turn by Turn Navigation
    im Browser
    8

    View full-size slide

  6. 10
    Ein neues Konzept
    für Echtzeit-Navigation

    View full-size slide

  7. Throwaway Navigation
    11

    View full-size slide

  8. Where is Navigation at?
    12

    View full-size slide

  9. 16
    Mind the Gap!

    View full-size slide

  10. 19
    Party at my house!
    This is how you
    get here...

    View full-size slide

  11. Throwaway Navigation
    20

    View full-size slide

  12. One Navi for
    One Destination
    21

    View full-size slide

  13. Navigation
    for purpose
    22
    a single

    View full-size slide

  14. Navigation
    for purpose
    23
    YOUR

    View full-size slide

  15. 24
    Your Party

    View full-size slide

  16. 25
    Your Restaurant

    View full-size slide

  17. 26
    Your Company

    View full-size slide

  18. 27
    Your Place To Be

    View full-size slide

  19. Do it in the Browser!
    29

    View full-size slide

  20. Your Navi = a URL
    31

    View full-size slide

  21. No Installing
    No Closing of Apps
    No Context Switch
    32

    View full-size slide

  22. Customize it!
    33

    View full-size slide

  23. Customize it!
    34

    View full-size slide

  24. Integrate it!
    36

    View full-size slide

  25. ZOMG Live Presentation!
    39

    View full-size slide

  26. Tech Background
    41

    View full-size slide

  27. ffwdme.js
    43
    JavaScript Framework for Turn-by-Turn Navigation Systems

    View full-size slide

  28. ffwdme.js
    44
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Widget-/
    Event-Based

    View full-size slide

  29. ffwdme.bind(‘navigation:onroute‘, cb);
    45

    View full-size slide

  30. ffwdme.js
    47
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Widget-/
    Event-Based
    Rich Event-Data

    View full-size slide

  31. {
    nextDirection: ..., // next street
    distance: 200, // meters to turn
    duration: 15, // secs to turn
    ratio: 0.71 // route completed
    }
    48

    View full-size slide

  32. 49
    Widget:
    10-50 LOC

    View full-size slide

  33. ffwdme.js
    50
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Extendable
    Widget-/
    Event-Based
    Rich Event-Data

    View full-size slide

  34. ffwdme.js
    51
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Extendable
    Modular
    Widget-/
    Event-Based
    Rich Event-Data

    View full-size slide

  35. ffwdme.js
    52
    JavaScript Framework for Turn-by-Turn Navigation Systems
    Extendable
    3+ Routing Services
    Modular
    Widget-/
    Event-Based
    Rich Event-Data

    View full-size slide

  36. Was kann ich
    damit anfangen?
    53

    View full-size slide

  37. instantnavi.com/developers
    54

    View full-size slide

  38. http://instantnavi.com/to/mynavi
    55

    View full-size slide

  39. http://instantnavi.com/to/mynavi
    ?destination[lat]=49.9
    &destination[lng]=8.85
    &destination[street]=HoheStrasse
    &destination[city]=Dieburg
    56

    View full-size slide

  40. 57
    mehr-tanken

    View full-size slide

  41. mehr-tanken
    58

    View full-size slide

  42. mehr-tanken
    59

    View full-size slide

  43. mehr-tanken
    60

    View full-size slide

  44. mehr-tanken
    61

    View full-size slide

  45. @fabrik42
    github.com/fabrik42
    [email protected]
    63

    View full-size slide

  46. Let‘s talk!
    64

    View full-size slide

  47. instantnavi.com
    @instantnavi
    facebook.com/instantnavi
    65

    View full-size slide