Human APIs

1,277 views
1,112 views

Published on

These are the slides from my talk at the RiaWorld 2010, a mostly hands on session showcasing how to access hardware from within the browser.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,277
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Human APIs

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

×