Mobile Web Apps Using JavaScript and HTML5

Human APIs
expanding the mobile web
or
are robots coming to JavaScript?

Nikolai Onken
uxebu

Sunday, October 17, 2010

@nonken


We open the mobile web.


JavaScript AJAX
FrontEnd
Usability UserExperience

CSS mobile
Browser Web2.0
dojo
TouchScroll OpenSource

Remember Risk?

http://news.bbc.co.uk/2/hi/technology/8552410.stm


Dec, 2009
1,802 millions
26.6 %


The mobile web
AdMob Requests

20000000000

15000000000

10000000000

5000000000

0
Jan. 2008 Mar. 2010


The reality

• Internet is growing (fast)
• Mobile is growing (fast)
• Mobile internet is growing (fast!)


The browser is the
central piece


The browser is the
interface to the
internet


71% of all modern
phones have a
browser
Tomi Ahonen


IPv6

2 128


There will be a lot of
things we should talk to :)

(using a browser)

Is JavaScript good
enough?


Flash with
JavaScript?


http://github.com/tobeytailor/gordon


HTML5 Apps
or web apps as we know them


New HTML Elements


<input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput">

http://bit.ly/audio-api


High performance
graphics
WebGL


Media


What more do we need?


JavaScript HTTP


JavaScript HTTP
Accelerometer
Camera
...

RFID
Bluetooth

JavaScript HTTP
Accelerometer
Camera
...

RFID
CSS Bluetooth

JavaScript HTTP
HTML Accelerometer
Camera
...

The Hype


The Hype

o


The Hype

The cloud

o


The Hype

The cloud Location, etc.

o


The Potential


o


The Potential


o
Hardware


Use cases


Transportation


Home automation


http://digitalstrom.org


http://home-pad.com


Health


3311 Health/Fitness
Apps in Apple app store


HumanAPI


How can we do this?


Mobile SDKs


Mobile SDKs

Objective-C


Mobile SDKs

Objective-C Java


Mobile SDKs

Objective-C Java ...


How the magic happens



Low level APIs

Camera Accelerometer Push Notiﬁcations



Chromeless Browser

Low level APIs




Chromeless Browser

browserInstance.eval(“alert(1);”)

Low level APIs



PhoneGap


PhoneGap

Chromeless Browser

browser.eval(“document.geolocation...”)

Low level APIs

...

Android, iPhone, iPad, Nokia S60, Blackberry

Android

mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");


iPhone/iPad

jsCallBack = [[NSString alloc] initWithFormat:@"navigator.
accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, acceleration.y, acceleration.z];

[webView stringByEvaluatingJavaScriptFromString:jsCallBack];


Lowlevel APIs
For things you can’t do in the browser (yet)

The browser
For anything else :)


Enough talking, lets
see some hardware


ArduinoJS


ArduinoJS Stack

• Arduino (http://arduino.cc/)
• Node-Serial (Chris Williams)
• Node
• Websockets (Socket.io)
http://github.com/nonken/arduinojs


ArduinoJS
Browser

One API to rule them all
Websockets

Node

Serial connection

Arduino

Light Motors Robots


available APIs

• digitalWrite(pin, val)
• digitalRead(pin, val)
• analogWrite(pin, val)
• analogRead(pin, val)
http://github.com/nonken/arduinojs


Try it out

• 10.0.2.1:8888


Only the beginning


Serverside JS


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


Raphaël can do this!

Getting started

• ArduinoJS - http://github.com/nonken/arduinojs
• PhoneGap - http://phonegap.com
• http://blog.uxebu.com
• http://www.humanapi.org


Thank you
@nonken


Mobile Web Apps Using JavaScript and HTML5

Recommended

Recommended

More Related Content

Similar to Mobile Web Apps Using JavaScript and HTML5

Similar to Mobile Web Apps Using JavaScript and HTML5 (20)

More from Nikolai Onken

More from Nikolai Onken (15)

Mobile Web Apps Using JavaScript and HTML5