Human APIs
                              expanding the mobile web
                                         or
            ...
Sunday, October 17, 2010
@nonken



Sunday, October 17, 2010
Sunday, October 17, 2010
We open the mobile web.




Sunday, October 17, 2010
Sunday, October 17, 2010
JavaScript                               AJAX
                                  FrontEnd
      Usability                  ...
Remember Risk?




                           http://news.bbc.co.uk/2/hi/technology/8552410.stm

Sunday, October 17, 2010
Remember Risk?




                           http://news.bbc.co.uk/2/hi/technology/8552410.stm

Sunday, October 17, 2010
Dec, 2009
                           1,802 millions
                               26.6 %


Sunday, October 17, 2010
The mobile web
                                             AdMob Requests

       20000000000


       15000000000


    ...
The mobile web
                                             AdMob Requests

       20000000000


       15000000000


    ...
The mobile web
                                             AdMob Requests

       20000000000


       15000000000


    ...
The reality

                    • Internet is growing (fast)
                    • Mobile is growing (fast)
             ...
The browser is the
                             central piece


Sunday, October 17, 2010
The browser is the
                            interface to the
                                internet


Sunday, October...
71% of all modern
                             phones have a
                               browser
                      ...
IPv6

                           2 128




Sunday, October 17, 2010
There will be a lot of
    things we should talk to :)

                           (using a browser)
Sunday, October 17, 2...
Sunday, October 17, 2010
Is JavaScript good
                                enough?


Sunday, October 17, 2010
Flash with
                           JavaScript?



Sunday, October 17, 2010
http://github.com/tobeytailor/gordon

Sunday, October 17, 2010
HTML5 Apps
                            or web apps as we know them




Sunday, October 17, 2010
Sunday, October 17, 2010
Sunday, October 17, 2010
New HTML Elements



Sunday, October 17, 2010
<input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput">




                                    ...
High performance
                               graphics
                                 WebGL



Sunday, October 17, 2010
Sunday, October 17, 2010
Sunday, October 17, 2010
Media



Sunday, October 17, 2010
Sunday, October 17, 2010
Sunday, October 17, 2010
What more do we need?



Sunday, October 17, 2010
JavaScript       HTTP




Sunday, October 17, 2010
JavaScript          HTTP
                           Accelerometer
                             Camera
                    ...
RFID
                            Bluetooth

          JavaScript          HTTP
                           Accelerometer
  ...
RFID
                           CSS     Bluetooth

          JavaScript                 HTTP
                           HT...
RFID
                           CSS     Bluetooth

          JavaScript                 HTTP
                           HT...
The Hype




Sunday, October 17, 2010
The Hype




                            o

Sunday, October 17, 2010
The Hype

                      The cloud



                                   o

Sunday, October 17, 2010
The Hype

                      The cloud              Location, etc.



                                   o

Sunday, Oct...
The Potential

                      The cloud                   Location, etc.



                                     o
...
The Potential

                      The cloud                   Location, etc.



                                     o
...
Use cases



Sunday, October 17, 2010
Transportation



Sunday, October 17, 2010
Sunday, October 17, 2010
Sunday, October 17, 2010
Home automation



Sunday, October 17, 2010
http://digitalstrom.org




Sunday, October 17, 2010
http://home-pad.com




Sunday, October 17, 2010
Health



Sunday, October 17, 2010
3311 Health/Fitness
           Apps in Apple app store


Sunday, October 17, 2010
HumanAPI




Sunday, October 17, 2010
HumanAPI




Sunday, October 17, 2010
How can we do this?



Sunday, October 17, 2010
Mobile SDKs




Sunday, October 17, 2010
Mobile SDKs


              Objective-C




Sunday, October 17, 2010
Mobile SDKs


              Objective-C      Java




Sunday, October 17, 2010
Mobile SDKs


              Objective-C      Java      ...

Sunday, October 17, 2010
How the magic happens




Sunday, October 17, 2010
How the magic happens




                                 Low level APIs

                   Camera Accelerometer Push No...
How the magic happens


                             Chromeless Browser




                                 Low level API...
How the magic happens


                                Chromeless Browser



                           browserInstance.e...
PhoneGap



Sunday, October 17, 2010
PhoneGap


                                    Chromeless Browser



                           browser.eval(“document.geo...
PhoneGap


                                    Chromeless Browser



                           browser.eval(“document.geo...
Android



        mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");




Sunday, October 17, 2...
iPhone/iPad



        jsCallBack = [[NSString alloc] initWithFormat:@"navigator.
                accelerometer._onAccelUp...
Lowlevel APIs
                  For things you can’t do in the browser (yet)




                           The browser
  ...
Enough talking, lets
                      see some hardware



Sunday, October 17, 2010
ArduinoJS



Sunday, October 17, 2010
ArduinoJS Stack

                    • Arduino (http://arduino.cc/)
                    • Node-Serial (Chris Williams)
   ...
ArduinoJS
                                                           Browser




                           One API to rul...
ArduinoJS
                                                           Browser




                           One API to rul...
available APIs

                    • digitalWrite(pin, val)
                    • digitalRead(pin, val)
                 ...
Try it out


                    • 10.0.2.1:8888



Sunday, October 17, 2010
Sunday, October 17, 2010
Only the beginning



Sunday, October 17, 2010
Serverside JS



Sunday, October 17, 2010
Your house == DOM

        $(".living-room").delegate(".motion-sensor", "onmotion", function(){
          $(".living-room ...
Raphaël can do this!
Sunday, October 17, 2010
Getting started

     • ArduinoJS - http://github.com/nonken/arduinojs
     • PhoneGap - http://phonegap.com
     • http:/...
Thank you
                             @nonken




Sunday, October 17, 2010
Upcoming SlideShare
Loading in...5
×

Human APIs - expanding the mobile web or are robots coming to JavaScript?

1,859

Published on

These are the slides of the talk I gave at webteccon 2010 in Mainz, Germany. Topic was how we can extend the browser

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,859
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Human APIs - expanding the mobile web or are robots coming to JavaScript?

  1. 1. Human APIs expanding the mobile web or are robots coming to JavaScript? Nikolai Onken uxebu Sunday, October 17, 2010
  2. 2. Sunday, October 17, 2010
  3. 3. @nonken Sunday, October 17, 2010
  4. 4. Sunday, October 17, 2010
  5. 5. We open the mobile web. Sunday, October 17, 2010
  6. 6. Sunday, October 17, 2010
  7. 7. JavaScript AJAX FrontEnd Usability UserExperience CSS mobile Browser Web2.0 dojo TouchScroll OpenSource Sunday, October 17, 2010
  8. 8. Remember Risk? http://news.bbc.co.uk/2/hi/technology/8552410.stm Sunday, October 17, 2010
  9. 9. Remember Risk? http://news.bbc.co.uk/2/hi/technology/8552410.stm Sunday, October 17, 2010
  10. 10. Dec, 2009 1,802 millions 26.6 % Sunday, October 17, 2010
  11. 11. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Sunday, October 17, 2010
  12. 12. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Sunday, October 17, 2010
  13. 13. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Sunday, October 17, 2010
  14. 14. The reality • Internet is growing (fast) • Mobile is growing (fast) • Mobile internet is growing (fast!) Sunday, October 17, 2010
  15. 15. The browser is the central piece Sunday, October 17, 2010
  16. 16. The browser is the interface to the internet Sunday, October 17, 2010
  17. 17. 71% of all modern phones have a browser Tomi Ahonen Sunday, October 17, 2010
  18. 18. IPv6 2 128 Sunday, October 17, 2010
  19. 19. There will be a lot of things we should talk to :) (using a browser) Sunday, October 17, 2010
  20. 20. Sunday, October 17, 2010
  21. 21. Is JavaScript good enough? Sunday, October 17, 2010
  22. 22. Flash with JavaScript? Sunday, October 17, 2010
  23. 23. http://github.com/tobeytailor/gordon Sunday, October 17, 2010
  24. 24. HTML5 Apps or web apps as we know them Sunday, October 17, 2010
  25. 25. Sunday, October 17, 2010
  26. 26. Sunday, October 17, 2010
  27. 27. New HTML Elements Sunday, October 17, 2010
  28. 28. <input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput"> http://bit.ly/audio-api Sunday, October 17, 2010
  29. 29. High performance graphics WebGL Sunday, October 17, 2010
  30. 30. Sunday, October 17, 2010
  31. 31. Sunday, October 17, 2010
  32. 32. Media Sunday, October 17, 2010
  33. 33. Sunday, October 17, 2010
  34. 34. Sunday, October 17, 2010
  35. 35. What more do we need? Sunday, October 17, 2010
  36. 36. JavaScript HTTP Sunday, October 17, 2010
  37. 37. JavaScript HTTP Accelerometer Camera ... Sunday, October 17, 2010
  38. 38. RFID Bluetooth JavaScript HTTP Accelerometer Camera ... Sunday, October 17, 2010
  39. 39. RFID CSS Bluetooth JavaScript HTTP HTML Accelerometer Camera ... Sunday, October 17, 2010
  40. 40. RFID CSS Bluetooth JavaScript HTTP HTML Accelerometer Camera ... Sunday, October 17, 2010
  41. 41. The Hype Sunday, October 17, 2010
  42. 42. The Hype o Sunday, October 17, 2010
  43. 43. The Hype The cloud o Sunday, October 17, 2010
  44. 44. The Hype The cloud Location, etc. o Sunday, October 17, 2010
  45. 45. The Potential The cloud Location, etc. o Sunday, October 17, 2010
  46. 46. The Potential The cloud Location, etc. o Hardware Sunday, October 17, 2010
  47. 47. Use cases Sunday, October 17, 2010
  48. 48. Transportation Sunday, October 17, 2010
  49. 49. Sunday, October 17, 2010
  50. 50. Sunday, October 17, 2010
  51. 51. Home automation Sunday, October 17, 2010
  52. 52. http://digitalstrom.org Sunday, October 17, 2010
  53. 53. http://home-pad.com Sunday, October 17, 2010
  54. 54. Health Sunday, October 17, 2010
  55. 55. 3311 Health/Fitness Apps in Apple app store Sunday, October 17, 2010
  56. 56. HumanAPI Sunday, October 17, 2010
  57. 57. HumanAPI Sunday, October 17, 2010
  58. 58. How can we do this? Sunday, October 17, 2010
  59. 59. Mobile SDKs Sunday, October 17, 2010
  60. 60. Mobile SDKs Objective-C Sunday, October 17, 2010
  61. 61. Mobile SDKs Objective-C Java Sunday, October 17, 2010
  62. 62. Mobile SDKs Objective-C Java ... Sunday, October 17, 2010
  63. 63. How the magic happens Sunday, October 17, 2010
  64. 64. How the magic happens Low level APIs Camera Accelerometer Push Notifications Sunday, October 17, 2010
  65. 65. How the magic happens Chromeless Browser Low level APIs Camera Accelerometer Push Notifications Sunday, October 17, 2010
  66. 66. How the magic happens Chromeless Browser browserInstance.eval(“alert(1);”) Low level APIs Camera Accelerometer Push Notifications Sunday, October 17, 2010
  67. 67. PhoneGap Sunday, October 17, 2010
  68. 68. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Android, iPhone, iPad, Nokia S60, Blackberry Sunday, October 17, 2010
  69. 69. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Android, iPhone, iPad, Nokia S60, Blackberry Sunday, October 17, 2010
  70. 70. Android mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")"); Sunday, October 17, 2010
  71. 71. iPhone/iPad jsCallBack = [[NSString alloc] initWithFormat:@"navigator. accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, acceleration.y, acceleration.z]; [webView stringByEvaluatingJavaScriptFromString:jsCallBack]; Sunday, October 17, 2010
  72. 72. Lowlevel APIs For things you can’t do in the browser (yet) The browser For anything else :) Sunday, October 17, 2010
  73. 73. Enough talking, lets see some hardware Sunday, October 17, 2010
  74. 74. ArduinoJS Sunday, October 17, 2010
  75. 75. ArduinoJS Stack • Arduino (http://arduino.cc/) • Node-Serial (Chris Williams) • Node • Websockets (Socket.io) http://github.com/nonken/arduinojs Sunday, October 17, 2010
  76. 76. ArduinoJS Browser One API to rule them all Websockets Node Serial connection Arduino Light Motors Robots Sunday, October 17, 2010
  77. 77. ArduinoJS Browser One API to rule them all Websockets Node Serial connection Arduino Light Motors Robots Sunday, October 17, 2010
  78. 78. available APIs • digitalWrite(pin, val) • digitalRead(pin, val) • analogWrite(pin, val) • analogRead(pin, val) http://github.com/nonken/arduinojs Sunday, October 17, 2010
  79. 79. Try it out • 10.0.2.1:8888 Sunday, October 17, 2010
  80. 80. Sunday, October 17, 2010
  81. 81. Only the beginning Sunday, October 17, 2010
  82. 82. Serverside JS Sunday, October 17, 2010
  83. 83. Your house == DOM $(".living-room").delegate(".motion-sensor", "onmotion", function(){   $(".living-room .lights").css("intensity", 0.75) }); http://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=en Sunday, October 17, 2010
  84. 84. Raphaël can do this! Sunday, October 17, 2010
  85. 85. Getting started • ArduinoJS - http://github.com/nonken/arduinojs • PhoneGap - http://phonegap.com • http://blog.uxebu.com • http://www.humanapi.org Sunday, October 17, 2010
  86. 86. Thank you @nonken Sunday, October 17, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×