Human APIs
expanding the mobile web
RiaWorld 2010
Nikolai Onken
uxebu
Wednesday, November 17, 2010
Wednesday, November 17, 2010
@nonken
Wednesday, November 17, 2010
Wednesday, November 17, 2010
We open the mobile web.
Wednesday, November 17, 2010
Wednesday, November 17, 2010
JavaScript AJAX
CSS
dojo
Browser
OpenSource
Web2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Wednesday, Novembe...
The Plan
• A little bit of history
• Lets build a mobile app
Wednesday, November 17, 2010
http://news.bbc.co.uk/2/hi/technology/8552410.stm
Remember Risk?
Wednesday, November 17, 2010
http://news.bbc.co.uk/2/hi/technology/8552410.stm
Remember Risk?
Wednesday, November 17, 2010
Dec, 2009
1,802 millions
26.6 %
Wednesday, November 17, 2010
The mobile web
Jan. 2008 Mar. 2010
0
5000000000
10000000000
15000000000
20000000000
AdMob Requests
Wednesday, November 17,...
The mobile web
Jan. 2008 Mar. 2010
0
5000000000
10000000000
15000000000
20000000000
AdMob Requests
Wednesday, November 17,...
The mobile web
Jan. 2008 Mar. 2010
0
5000000000
10000000000
15000000000
20000000000
AdMob Requests
Wednesday, November 17,...
The reality
•Internet is growing (fast)
•Mobile is growing (fast)
•Mobile internet is growing (fast!)
Wednesday, November ...
The browser is the
central piece
Wednesday, November 17, 2010
The browser is the
interface to the
internet
Wednesday, November 17, 2010
71% of all modern
phones have a
browser
Tomi Ahonen
Wednesday, November 17, 2010
IPv6
2128
Wednesday, November 17, 2010
There will be a lot of
things we should talk to :)
(using a browser)
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Is JavaScript good
enough?
Wednesday, November 17, 2010
Flash with
JavaScript?
Wednesday, November 17, 2010
http://github.com/tobeytailor/gordon
Wednesday, November 17, 2010
HTML5 Apps
or web apps as we know them
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
New HTML Elements
Wednesday, November 17, 2010
<input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput">
http://bit.ly/audio-api
Wednesday, Novem...
High performance
graphics
WebGL
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Media
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
What more do we need?
Wednesday, November 17, 2010
JavaScript HTTP
Wednesday, November 17, 2010
JavaScript HTTP
Accelerometer
Camera
...
Wednesday, November 17, 2010
JavaScript HTTP
Accelerometer
Camera
...
Bluetooth
RFID
Wednesday, November 17, 2010
JavaScript
CSS
HTML
HTTP
Accelerometer
Camera
...
Bluetooth
RFID
Wednesday, November 17, 2010
JavaScript
CSS
HTML
HTTP
Accelerometer
Camera
...
Bluetooth
RFID
Wednesday, November 17, 2010
The Hype
Wednesday, November 17, 2010
o
The Hype
Wednesday, November 17, 2010
o
The cloud
The Hype
Wednesday, November 17, 2010
o
The cloud Location, etc.
The Hype
Wednesday, November 17, 2010
o
The cloud Location, etc.
The Potential
Wednesday, November 17, 2010
o
The cloud Location, etc.
Hardware
The Potential
Wednesday, November 17, 2010
Use cases
Wednesday, November 17, 2010
Transportation
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Home automation
Wednesday, November 17, 2010
http://digitalstrom.org
Wednesday, November 17, 2010
http://home-pad.com
Wednesday, November 17, 2010
Health
Wednesday, November 17, 2010
3311 Health/Fitness
Apps in Apple app store
Wednesday, November 17, 2010
HumanAPI
Wednesday, November 17, 2010
HumanAPI
Wednesday, November 17, 2010
How can we do this?
Wednesday, November 17, 2010
Mobile SDKs
Wednesday, November 17, 2010
Mobile SDKs
Objective-C
Wednesday, November 17, 2010
Mobile SDKs
Objective-C Java
Wednesday, November 17, 2010
Mobile SDKs
Objective-C Java ...
Wednesday, November 17, 2010
How the magic happens
Wednesday, November 17, 2010
Low level APIs
Camera Accelerometer Push Notifications
How the magic happens
Wednesday, November 17, 2010
Low level APIs
Camera Accelerometer Push Notifications
Chromeless Browser
How the magic happens
Wednesday, November 17, 2010
Low level APIs
Camera Accelerometer Push Notifications
Chromeless Browser
How the magic happens
browserInstance.eval(“alert...
PhoneGap
Wednesday, November 17, 2010
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation......
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation......
mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");
Android
Wednesday, November 17, 2010
jsCallBack = [[NSString alloc] initWithFormat:@"navigator.
accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, accel...
Lowlevel APIs
The browser
For things you can’t do in the browser (yet)
For anything else :)
Wednesday, November 17, 2010
Enough talking, lets
see some hardware
Wednesday, November 17, 2010
ArduinoJS
Wednesday, November 17, 2010
ArduinoJS Stack
• Arduino (http://arduino.cc/)
• Node-Serial (Chris Williams)
• Node
• Websockets (Socket.io)
http://githu...
Node
ArduinoJS
Websockets
Arduino
Browser
Serial connection
Light Motors Robots
OneAPItorulethemall
Wednesday, November 17...
Node
ArduinoJS
Websockets
Arduino
Browser
Serial connection
Light Motors Robots
OneAPItorulethemall
Wednesday, November 17...
available APIs
• digitalWrite(pin, val)
• digitalRead(pin, val)
• analogWrite(pin, val)
• analogRead(pin, val)
http://gith...
Try it out
• 10.0.2.1:8888
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Only the beginning
Wednesday, November 17, 2010
Serverside JS
Wednesday, November 17, 2010
http://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=en
$(".living-room").delegate(".motion-sens...
Raphaël can do this!
Wednesday, November 17, 2010
Getting started
•ArduinoJS - http://github.com/nonken/arduinojs
•PhoneGap - http://phonegap.com
•http://blog.uxebu.com
•ht...
Thank you
@nonken
Wednesday, November 17, 2010
Upcoming SlideShare
Loading in...5
×

Human APIs

984

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
984
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

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

×