Human APIs

Download Human APIs

Post on 07-Nov-2014

1.010 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

<ul><li><p>Human APIsexpanding the mobile web</p><p>RiaWorld 2010</p><p>Nikolai Onkenuxebu</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>@nonken</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>We open the mobile web.</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>JavaScript AJAX</p><p>CSS</p><p>dojoBrowser</p><p>OpenSourceWeb2.0</p><p>FrontEnd</p><p>Usability UserExperience</p><p>mobile</p><p>TouchScroll</p><p>Wednesday, November 17, 2010</p></li><li><p>The Plan</p><p> A little bit of history Lets build a mobile app</p><p>Wednesday, November 17, 2010</p></li><li><p>http://news.bbc.co.uk/2/hi/technology/8552410.stm</p><p>Remember Risk?</p><p>Wednesday, November 17, 2010</p>http://news.bbc.co.uk/2/hi/technology/8552410.stmhttp://news.bbc.co.uk/2/hi/technology/8552410.stm</li><li><p>http://news.bbc.co.uk/2/hi/technology/8552410.stm</p><p>Remember Risk?</p><p>Wednesday, November 17, 2010</p>http://news.bbc.co.uk/2/hi/technology/8552410.stmhttp://news.bbc.co.uk/2/hi/technology/8552410.stm</li><li><p>Dec, 20091,802 millions</p><p>26.6 %</p><p>Wednesday, November 17, 2010</p></li><li><p>The mobile web</p><p>Jan. 2008 Mar. 20100</p><p>5000000000</p><p>10000000000</p><p>15000000000</p><p>20000000000</p><p>AdMob Requests</p><p>Wednesday, November 17, 2010</p></li><li><p>The mobile web</p><p>Jan. 2008 Mar. 20100</p><p>5000000000</p><p>10000000000</p><p>15000000000</p><p>20000000000</p><p>AdMob Requests</p><p>Wednesday, November 17, 2010</p></li><li><p>The mobile web</p><p>Jan. 2008 Mar. 20100</p><p>5000000000</p><p>10000000000</p><p>15000000000</p><p>20000000000</p><p>AdMob Requests</p><p>Wednesday, November 17, 2010</p></li><li><p>The reality</p><p> Internet is growing (fast)Mobile is growing (fast)Mobile internet is growing (fast!)</p><p>Wednesday, November 17, 2010</p></li><li><p>The browser is the central piece</p><p>Wednesday, November 17, 2010</p></li><li><p>The browser is the interface to the </p><p>internet</p><p>Wednesday, November 17, 2010</p></li><li><p>71% of all modern phones have a </p><p>browser</p><p>Tomi Ahonen</p><p>Wednesday, November 17, 2010</p></li><li><p>IPv6</p><p>2128</p><p>Wednesday, November 17, 2010</p></li><li><p>There will be a lot of things we should talk to :)</p><p>(using a browser)</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Is JavaScript good enough?</p><p>Wednesday, November 17, 2010</p></li><li><p>Flash with JavaScript?</p><p>Wednesday, November 17, 2010</p></li><li><p>http://github.com/tobeytailor/gordon</p><p>Wednesday, November 17, 2010</p>http://github.com/tobeytailor/gordonhttp://github.com/tobeytailor/gordon</li><li><p>HTML5 Appsor web apps as we know them</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>New HTML Elements</p><p>Wednesday, November 17, 2010</p></li><li><p>http://bit.ly/audio-api </p><p>Wednesday, November 17, 2010</p>http://bit.ly/audio-apihttp://bit.ly/audio-api</li><li><p>High performance graphics</p><p>WebGL</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Media</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>What more do we need?</p><p>Wednesday, November 17, 2010</p></li><li><p>JavaScript HTTP</p><p>Wednesday, November 17, 2010</p></li><li><p>JavaScript HTTPAccelerometer</p><p>Camera</p><p>...Wednesday, November 17, 2010</p></li><li><p>JavaScript HTTPAccelerometer</p><p>Camera</p><p>...</p><p>Bluetooth</p><p>RFID</p><p>Wednesday, November 17, 2010</p></li><li><p>JavaScript</p><p>CSS</p><p>HTML</p><p>HTTP</p><p>Accelerometer</p><p>Camera</p><p>...</p><p>Bluetooth</p><p>RFID</p><p>Wednesday, November 17, 2010</p></li><li><p>JavaScript</p><p>CSS</p><p>HTML</p><p>HTTP</p><p>Accelerometer</p><p>Camera</p><p>...</p><p>Bluetooth</p><p>RFID</p><p>Wednesday, November 17, 2010</p></li><li><p>The Hype</p><p>Wednesday, November 17, 2010</p></li><li><p>o</p><p>The Hype</p><p>Wednesday, November 17, 2010</p></li><li><p>oThe cloud</p><p>The Hype</p><p>Wednesday, November 17, 2010</p></li><li><p>oThe cloud Location, etc.</p><p>The Hype</p><p>Wednesday, November 17, 2010</p></li><li><p>oThe cloud Location, etc.</p><p>The Potential</p><p>Wednesday, November 17, 2010</p></li><li><p>oThe cloud Location, etc.</p><p>Hardware</p><p>The Potential</p><p>Wednesday, November 17, 2010</p></li><li><p>Use cases</p><p>Wednesday, November 17, 2010</p></li><li><p>Transportation</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Home automation</p><p>Wednesday, November 17, 2010</p></li><li><p>http://digitalstrom.org</p><p>Wednesday, November 17, 2010</p>http://digitalstrom.orghttp://digitalstrom.org</li><li><p>http://home-pad.com</p><p>Wednesday, November 17, 2010</p>http://home-pad.comhttp://home-pad.com</li><li><p>Health</p><p>Wednesday, November 17, 2010</p></li><li><p>3311 Health/Fitness Apps in Apple app store</p><p>Wednesday, November 17, 2010</p></li><li><p>HumanAPI</p><p>Wednesday, November 17, 2010</p></li><li><p>HumanAPI</p><p>Wednesday, November 17, 2010</p></li><li><p>How can we do this?</p><p>Wednesday, November 17, 2010</p></li><li><p>Mobile SDKs</p><p>Wednesday, November 17, 2010</p></li><li><p>Mobile SDKs</p><p>Objective-C</p><p>Wednesday, November 17, 2010</p></li><li><p>Mobile SDKs</p><p>Objective-C Java</p><p>Wednesday, November 17, 2010</p></li><li><p>Mobile SDKs</p><p>Objective-C Java ...</p><p>Wednesday, November 17, 2010</p></li><li><p>How the magic happens</p><p>Wednesday, November 17, 2010</p></li><li><p>Low level APIs</p><p>Camera Accelerometer Push Notifications</p><p>How the magic happens</p><p>Wednesday, November 17, 2010</p></li><li><p>Low level APIs</p><p>Camera Accelerometer Push Notifications</p><p>Chromeless Browser</p><p>How the magic happens</p><p>Wednesday, November 17, 2010</p></li><li><p>Low level APIs</p><p>Camera Accelerometer Push Notifications</p><p>Chromeless Browser</p><p>How the magic happens</p><p>browserInstance.eval(alert(1);)</p><p>Wednesday, November 17, 2010</p></li><li><p>PhoneGap</p><p>Wednesday, November 17, 2010</p></li><li><p>Low level APIs</p><p>Camera Accelerometer Push Notifications...</p><p>Chromeless Browser</p><p>PhoneGap</p><p>browser.eval(document.geolocation...)</p><p>Android, iPhone, iPad, Nokia S60, BlackberryWednesday, November 17, 2010</p></li><li><p>Low level APIs</p><p>Camera Accelerometer Push Notifications...</p><p>Chromeless Browser</p><p>PhoneGap</p><p>browser.eval(document.geolocation...)</p><p>Android, iPhone, iPad, Nokia S60, BlackberryWednesday, November 17, 2010</p></li><li><p>mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");</p><p>Android</p><p>Wednesday, November 17, 2010</p></li><li><p>jsCallBack = [[NSString alloc] initWithFormat:@"navigator. accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, acceleration.y, acceleration.z];</p><p>[webView stringByEvaluatingJavaScriptFromString:jsCallBack];</p><p>iPhone/iPad</p><p>Wednesday, November 17, 2010</p></li><li><p>Lowlevel APIs</p><p>The browser</p><p>For things you cant do in the browser (yet)</p><p>For anything else :)</p><p>Wednesday, November 17, 2010</p></li><li><p>Enough talking, lets see some hardware</p><p>Wednesday, November 17, 2010</p></li><li><p>ArduinoJS</p><p>Wednesday, November 17, 2010</p></li><li><p>ArduinoJS Stack</p><p> Arduino (http://arduino.cc/) Node-Serial (Chris Williams) Node Websockets (Socket.io)</p><p>http://github.com/nonken/arduinojs</p><p>Wednesday, November 17, 2010</p>http://arduino.cc/http://arduino.cc/http://github.com/nonken/arduinojshttp://github.com/nonken/arduinojs</li><li><p>Node</p><p>ArduinoJS</p><p>Websockets</p><p>Arduino</p><p>Browser</p><p>Serial connection</p><p>Light Motors Robots</p><p>One</p><p> API</p><p> to </p><p>rule</p><p> the</p><p>m a</p><p>ll</p><p>Wednesday, November 17, 2010</p></li><li><p>Node</p><p>ArduinoJS</p><p>Websockets</p><p>Arduino</p><p>Browser</p><p>Serial connection</p><p>Light Motors Robots</p><p>One</p><p> API</p><p> to </p><p>rule</p><p> the</p><p>m a</p><p>ll</p><p>Wednesday, November 17, 2010</p></li><li><p>available APIs</p><p> digitalWrite(pin, val) digitalRead(pin, val) analogWrite(pin, val) analogRead(pin, val)</p><p>http://github.com/nonken/arduinojs</p><p>Wednesday, November 17, 2010</p>http://github.com/nonken/arduinojshttp://github.com/nonken/arduinojs</li><li><p>Try it out</p><p> 10.0.2.1:8888</p><p>Wednesday, November 17, 2010</p></li><li><p>Wednesday, November 17, 2010</p></li><li><p>Only the beginning</p><p>Wednesday, November 17, 2010</p></li><li><p>Serverside JS</p><p>Wednesday, November 17, 2010</p></li><li><p>http://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=en</p><p>$(".living-room").delegate(".motion-sensor", "onmotion", function(){ $(".living-room .lights").css("intensity", 0.75) }); </p><p>Your house == DOM</p><p>Wednesday, November 17, 2010</p>http://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=enhttp://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=en</li><li><p>Raphal can do this!</p><p>Wednesday, November 17, 2010</p></li><li><p>Getting started</p><p>ArduinoJS - http://github.com/nonken/arduinojsPhoneGap - http://phonegap.comhttp://blog.uxebu.comhttp://www.humanapi.org</p><p>Wednesday, November 17, 2010</p>http://github.com/nonken/arduinojshttp://github.com/nonken/arduinojshttp://phonegap.comhttp://phonegap.comhttp://blog.uxebu.comhttp://blog.uxebu.comhttp://www.humanapi.orghttp://www.humanapi.org</li><li><p>Thank you</p><p>@nonken</p><p>Wednesday, November 17, 2010</p></li></ul>