View
104
Download
0
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
Human APIsexpanding the mobile web
SWDC - June 3rd 2010
Nikolai Onkenuxebu
Thursday, June 3, 2010
Thursday, June 3, 2010
We open the mobile web.
Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
JavaScript AJAX
CSS
dojoBrowser
OpenSourceWeb2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Thursday, June 3, 2010
http://news.bbc.co.uk/2/hi/technology/8552410.stm
Remember Risk?
Thursday, June 3, 2010
http://news.bbc.co.uk/2/hi/technology/8552410.stm
Remember Risk?
Thursday, June 3, 2010
Dec, 20091,802 millions
26.6 %
Thursday, June 3, 2010
The mobile web
Jan. 2008 Mar. 20100
5000000000
10000000000
15000000000
20000000000
AdMob Requests
Thursday, June 3, 2010
The mobile web
Jan. 2008 Mar. 20100
5000000000
10000000000
15000000000
20000000000
AdMob Requests
Thursday, June 3, 2010
The mobile web
Jan. 2008 Mar. 20100
5000000000
10000000000
15000000000
20000000000
AdMob Requests
Thursday, June 3, 2010
The reality
• Internet is growing (fast)
•Mobile is growing (fast)
•Mobile internet is growing (fast!)
Thursday, June 3, 2010
The browser is the central piece
Thursday, June 3, 2010
The browser is the interface to the
internet
Thursday, June 3, 2010
71% of all modern phones have a
browser
Tomi Ahonen
Thursday, June 3, 2010
IPv6
2128
Thursday, June 3, 2010
There will be a lot of things we can talk to :)
(using a browser)
Thursday, June 3, 2010
Thursday, June 3, 2010
Is JavaScript good enough?
Thursday, June 3, 2010
Flash with JavaScript?
Thursday, June 3, 2010
http://github.com/tobeytailor/gordon
Thursday, June 3, 2010
HTML5 Appsor web apps as we know them
Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
New HTML Elements
Thursday, June 3, 2010
<input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput">
http://bit.ly/audio-api
Thursday, June 3, 2010
High performance graphics
WebGL
Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
Media
Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
JavaScript HTTP
Thursday, June 3, 2010
JavaScript HTTP
Accelerometer
Camera
...Thursday, June 3, 2010
JavaScript HTTP
Accelerometer
Camera
...
Bluetooth
RFID
Thursday, June 3, 2010
JavaScript
CSS
HTML
HTTP
Accelerometer
Camera
...
Bluetooth
RFID
Thursday, June 3, 2010
JavaScript
CSS
HTML
HTTP
Accelerometer
Camera
...
Bluetooth
RFID
Thursday, June 3, 2010
The Hype
Thursday, June 3, 2010
o
The Hype
Thursday, June 3, 2010
oThe cloud
The Hype
Thursday, June 3, 2010
oThe cloud Location, etc.
The Hype
Thursday, June 3, 2010
oThe cloud Location, etc.
The Potential
Thursday, June 3, 2010
oThe cloud Location, etc.
Hardware
The Potential
Thursday, June 3, 2010
Use cases
Thursday, June 3, 2010
Transportation
Thursday, June 3, 2010
Thursday, June 3, 2010
Thursday, June 3, 2010
Health
Thursday, June 3, 2010
3311 Health/Fitness Apps in Apple app store
Thursday, June 3, 2010
HumanAPI
Thursday, June 3, 2010
HumanAPI
Thursday, June 3, 2010
Home automation
Thursday, June 3, 2010
How can we do this?
Thursday, June 3, 2010
Mobile SDKs
Thursday, June 3, 2010
Mobile SDKs
Objective-C
Thursday, June 3, 2010
Mobile SDKs
Objective-C Java
Thursday, June 3, 2010
Mobile SDKs
Objective-C Java ...
Thursday, June 3, 2010
How the magic happens
Thursday, June 3, 2010
Low level APIs
Camera Accelerometer Push Notifications
How the magic happens
Thursday, June 3, 2010
Low level APIs
Camera Accelerometer Push Notifications
Chromeless Browser
How the magic happens
Thursday, June 3, 2010
Low level APIs
Camera Accelerometer Push Notifications
Chromeless Browser
How the magic happens
browser.eval(“alert(1);”)
Thursday, June 3, 2010
PhoneGap
Thursday, June 3, 2010
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation...”)
Android, iPhone, iPad, Nokia S60, BlackberryThursday, June 3, 2010
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation...”)
Android, iPhone, iPad, Nokia S60, BlackberryThursday, June 3, 2010
mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");
Android
Thursday, June 3, 2010
jsCallBack = [[NSString alloc] initWithFormat:@"navigator. accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, acceleration.y, acceleration.z];
[webView stringByEvaluatingJavaScriptFromString:jsCallBack];
iPhone/iPad
Thursday, June 3, 2010
Example
Thursday, June 3, 2010
Thursday, June 3, 2010
Lowlevel APIs
The browser
For things you can’t do in the browser (yet)
For anything else :)
Thursday, June 3, 2010
Check this out
Thursday, June 3, 2010
Serverside JS
Thursday, June 3, 2010
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
Thursday, June 3, 2010
Air Quality in Beijing via Twitter:
https://twitter.com/beijingair
Thursday, June 3, 2010
Challenge
Thursday, June 3, 2010
Raphaël could do this!
Thursday, June 3, 2010
Getting started
•PhoneGap - http://phonegap.com
•http://blog.uxebu.com
•http://www.humanapi.org
Thursday, June 3, 2010
Questions?
@nonken
Thursday, June 3, 2010
Recommended