HTML5 Mobile: Mobile Loves JS

• Mobile Front-end, UI/UX Developer
• Open Web Advocate at Nokia
• Formally at Palm webOS, Yahoo! Mobile etc.
• HTTP Status Cats lady

URI Schemes: Making a Call

		
<a href="tel:+14155557777">
  Order Pizza Now!
</a>

<a href="sms:+14155558888?body=O%20Hai">
  Text me!
</a>

		

URI Schemes: UX

Geolocation

Hardware has more than a few ways to detect your location:

• GPS satellites
• GSM/CDMA cell IDs
• A-GPS
• Wi-Fi base stations

Geolocation

		
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, fail);
}

function success(position) {
  alert('Latitude: '+ position.coords.latitude + 
  ', Longitude: '+ position.coords.longitude);
}
		

Access Permission

Device Orientation Events

DOM events for obtaining information about the physical orientation and movement of the hosting device

• Gyroscope
• Accelerometer
• Compass

Device Orientation Events

Events:
deviceorientation, devicemotion, compassneedscalibration

Dev Opera (Diagram)

Device Orientation Events Demo

Watch the demo video on Vemeo: http://player.vimeo.com/video/51157652

Try it on supported browsers: http://goo.gl/5Cj4d

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(e) {
    a = Math.floor(e.alpha);
	b = Math.floor(e.beta);
	g = Math.floor(e.gamma);
	el.style.transform = 'rotateZ('+a+'deg) 
	                   rotateX('+b+'deg) rotateY('+g+'deg)';
 ... }, true);
} 
		

User Cases

http://pizza-compass.com/

Pizza Compass in JavaScript

1. Get location - navigator.geolocation
2. Use compass - deviceorientation event (use alpha)
3. Order a pizza - tel: URI scheme

Media Capture and Streams API

"Web Real Time Communications"

var gum = navigator.getUserMedia ||
    navigator.mozGetUserMedia||navigator.webkitGetUserMedia;
          
navigator.getUserMedia({video: true, audio: true}, 
    	                     successCallback, errorCallback);
		

** not supported by Opera 14 for Android (WebKit)

The super silly demo: RespongeBob Web / Make Me Bob!

HTML Media Capture

<!-- Current implementation (if supported) -->
<input type="file" accept="image/*" capture="camera">

<!-- Newly proposed specification -->
<input type="file" accept="image/*" capture>
		

** Partial support: 'capture' attr not supported

Watch the demo video: http://sdrv.ms/UF55gM

Github: Coremob Camera: https://github.com/coremob/camera

Camera App in HTML5

1. Take a picture with the native camera via HTML Media Capture
2. The camera returns the pictures as a File object from FileReader()
3. drawImage() to draw the image object in canvas
4. getImageData() to obtain an ImageData object containing a copy of the pixel data for a context, then tweak the pixels (filter effect)
5. canvas.toBlob() to store the blob locally with IndexedDB*
6. Upload the final photo with XHR2/CORS

github.com/coremob/camera

Battery Status API

var battery = navigator.battery || navigator.webkitBattery;

battery.addEventListener('chargingchange', updateStatus);  
battery.addEventListener('levelchange', updateStatus);

function updateStatus() {  
  alert('Battery status: ' + battery.level * 100 + ' %');  
  if (battery.charging) {
    alert('Battery is charging...');   
  }
}  
		

Battery Status API

http://goo.gl/V1n6h (Pictured: Firefox)

Vibration API

var vibrate = navigator.vibrate || navigator.mozVibrate;

vibrate(1000); // vibrate for 1sec

vibrate([1000, 500, 2000]);
// vibrates for 1sec, still for 0.5 seconds, 
// and vibrates again for 2sec
		

Demo on JSFiddle: http://goo.gl/EWPmL

Ambient Light Events

window.addEventListener('devicelight', function(e) {
   alert(e.value); // value in double
});		
		

returned value (in lux)	My Observation on Galaxy Nexus
< 400	Indoor
400-1000	Office lighting. Outdoor (in foggy San Francisco)
> 1000	Outdoor daylight (anywhere else in California)

Ambient Light Events

window.addEventListener('lightlevel', function(e) {
   alert(e.value); // value in string
});		
		

returned value	Illuminance	Description
dim	< 50 lux	dark enough that the light produced by a white background is eye-straining or distracting
normal	50-10000 lux	office building hallway, very dark overcast day, office lighting, sunrise or sunset on a clear day, overcast day, or similar
bright	> 10000 lux	direct sunlight, or similarly bright conditions that make it hard to see things that aren't high-contrast

Light Sensor Demo

Watch the demo video on Vemeo: http://player.vimeo.com/video/51322638

Try it on Firefox Mobile: http://goo.gl/WynKX

Proximity Events

The distance of a nearby physical object using the proximity sensor of a device.

Events: deviceproximity and userproximity

window.addEventListener('deviceproximity', function(e) {
   alert(e.value);
});		
		

More...

• The Network Information API
• Clipboard API (cut, copy, paste events)
• Network Service Discovery (UPnP multi-media device control)
• Fullscreen API
• Gamepad API
• Push API (Push Notification)

Uncertain APIs

Bye-bye Web Intents

• Contacts APIs
• Calendar APIs
• ...

Hello, Web Activities?

Thank you!

Tomomi Imura

• girliemac.com
• twitter.com/girlie_mac
• github.com/girliemac

Notes

People, who has not attended my talks but stumbled upon my slides sometimes complains (in passive-aggressive manner) that my browser stats are wrong - I have to tell you that all the browsers I am talking about are mobile!
Even if you are so sure that certain features are supported on desktop, it may not be true for the mobile version.
If you spot my mistakes on mobile browsers, just let me know :-)

xoxo,
Tomomi (@girlie_mac)