Human APIs, the future of mobile

5,096 views

Published on

In this talk I am looking at the potential of the browser, how we already today can expose custom APIs to mobile devices. Topics include Audio APIs, accessing Bluetooth from the browser, the browser in transportation and more.

Published in: Technology, Design

Human APIs, the future of mobile

  1. 1. Human APIs expanding the mobile web SWDC - June 3rd 2010 Nikolai Onken uxebu Thursday, June 3, 2010
  2. 2. Thursday, June 3, 2010
  3. 3. We open the mobile web. Thursday, June 3, 2010
  4. 4. Thursday, June 3, 2010
  5. 5. Thursday, June 3, 2010
  6. 6. JavaScript AJAX FrontEnd Usability UserExperience CSS mobile Browser Web2.0 dojo TouchScroll OpenSource Thursday, June 3, 2010
  7. 7. Remember Risk? http://news.bbc.co.uk/2/hi/technology/8552410.stm Thursday, June 3, 2010
  8. 8. Remember Risk? http://news.bbc.co.uk/2/hi/technology/8552410.stm Thursday, June 3, 2010
  9. 9. Dec, 2009 1,802 millions 26.6 % Thursday, June 3, 2010
  10. 10. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Thursday, June 3, 2010
  11. 11. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Thursday, June 3, 2010
  12. 12. The mobile web AdMob Requests 20000000000 15000000000 10000000000 5000000000 0 Jan. 2008 Mar. 2010 Thursday, June 3, 2010
  13. 13. The reality • Internet is growing (fast) • Mobile is growing (fast) • Mobile internet is growing (fast!) Thursday, June 3, 2010
  14. 14. The browser is the central piece Thursday, June 3, 2010
  15. 15. The browser is the interface to the internet Thursday, June 3, 2010
  16. 16. 71% of all modern phones have a browser Tomi Ahonen Thursday, June 3, 2010
  17. 17. IPv6 2 128 Thursday, June 3, 2010
  18. 18. There will be a lot of things we can talk to :) (using a browser) Thursday, June 3, 2010
  19. 19. Thursday, June 3, 2010
  20. 20. Is JavaScript good enough? Thursday, June 3, 2010
  21. 21. Flash with JavaScript? Thursday, June 3, 2010
  22. 22. http://github.com/tobeytailor/gordon Thursday, June 3, 2010
  23. 23. HTML5 Apps or web apps as we know them Thursday, June 3, 2010
  24. 24. Thursday, June 3, 2010
  25. 25. Thursday, June 3, 2010
  26. 26. New HTML Elements Thursday, June 3, 2010
  27. 27. <input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput"> http://bit.ly/audio-api Thursday, June 3, 2010
  28. 28. High performance graphics WebGL Thursday, June 3, 2010
  29. 29. Thursday, June 3, 2010
  30. 30. Thursday, June 3, 2010
  31. 31. Media Thursday, June 3, 2010
  32. 32. Thursday, June 3, 2010
  33. 33. Thursday, June 3, 2010
  34. 34. Thursday, June 3, 2010
  35. 35. JavaScript HTTP Thursday, June 3, 2010
  36. 36. JavaScript HTTP Accelerometer Camera ... Thursday, June 3, 2010
  37. 37. RFID Bluetooth JavaScript HTTP Accelerometer Camera ... Thursday, June 3, 2010
  38. 38. RFID CSS Bluetooth JavaScript HTTP HTML Accelerometer Camera ... Thursday, June 3, 2010
  39. 39. RFID CSS Bluetooth JavaScript HTTP HTML Accelerometer Camera ... Thursday, June 3, 2010
  40. 40. The Hype Thursday, June 3, 2010
  41. 41. The Hype o Thursday, June 3, 2010
  42. 42. The Hype The cloud o Thursday, June 3, 2010
  43. 43. The Hype The cloud Location, etc. o Thursday, June 3, 2010
  44. 44. The Potential The cloud Location, etc. o Thursday, June 3, 2010
  45. 45. The Potential The cloud Location, etc. o Hardware Thursday, June 3, 2010
  46. 46. Use cases Thursday, June 3, 2010
  47. 47. Transportation Thursday, June 3, 2010
  48. 48. Thursday, June 3, 2010
  49. 49. Thursday, June 3, 2010
  50. 50. Health Thursday, June 3, 2010
  51. 51. 3311 Health/Fitness Apps in Apple app store Thursday, June 3, 2010
  52. 52. HumanAPI Thursday, June 3, 2010
  53. 53. HumanAPI Thursday, June 3, 2010
  54. 54. Home automation Thursday, June 3, 2010
  55. 55. http://digitalstrom.org Thursday, June 3, 2010
  56. 56. http://home-pad.com Thursday, June 3, 2010
  57. 57. How can we do this? Thursday, June 3, 2010
  58. 58. Mobile SDKs Thursday, June 3, 2010
  59. 59. Mobile SDKs Objective-C Thursday, June 3, 2010
  60. 60. Mobile SDKs Objective-C Java Thursday, June 3, 2010
  61. 61. Mobile SDKs Objective-C Java ... Thursday, June 3, 2010
  62. 62. How the magic happens Thursday, June 3, 2010
  63. 63. How the magic happens Low level APIs Camera Accelerometer Push Notifications Thursday, June 3, 2010
  64. 64. How the magic happens Chromeless Browser Low level APIs Camera Accelerometer Push Notifications Thursday, June 3, 2010
  65. 65. How the magic happens Chromeless Browser browser.eval(“alert(1);”) Low level APIs Camera Accelerometer Push Notifications Thursday, June 3, 2010
  66. 66. PhoneGap Thursday, June 3, 2010
  67. 67. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Android, iPhone, iPad, Nokia S60, Blackberry Thursday, June 3, 2010
  68. 68. PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Android, iPhone, iPad, Nokia S60, Blackberry Thursday, June 3, 2010
  69. 69. Android mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")"); Thursday, June 3, 2010
  70. 70. iPhone/iPad jsCallBack = [[NSString alloc] initWithFormat:@"navigator. accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, acceleration.y, acceleration.z]; [webView stringByEvaluatingJavaScriptFromString:jsCallBack]; Thursday, June 3, 2010
  71. 71. Example Thursday, June 3, 2010
  72. 72. Thursday, June 3, 2010
  73. 73. Lowlevel APIs For things you can’t do in the browser (yet) The browser For anything else :) Thursday, June 3, 2010
  74. 74. Check this out Thursday, June 3, 2010
  75. 75. Serverside JS Thursday, June 3, 2010
  76. 76. 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 Thursday, June 3, 2010
  77. 77. Air Quality in Beijing via Twitter: https://twitter.com/beijingair Thursday, June 3, 2010
  78. 78. Challenge Thursday, June 3, 2010
  79. 79. Raphaël could do this! Thursday, June 3, 2010
  80. 80. Getting started • PhoneGap - http://phonegap.com • http://blog.uxebu.com • http://www.humanapi.org Thursday, June 3, 2010
  81. 81. Questions? @nonken Thursday, June 3, 2010

×