Languages
Pages
Legal
Mobile HTML5 Today!
Ido GreenDeveloper Advocate Google 2014
Ido GreenDeveloper AdvocateGoogle
Who?!
plus.google.com/greenido
greenido.wordpress.com
Who has a smartphone?
Who loves typing on a phone?
Who uses their phone as a desktop?
● The screens are smaller
● Users are mobile
● Input. is. harder.
● Unique hardware capabilities
● Everything is slower
Mobile is different
The screens are smaller.
What can I do?
A LOT!
The critical element for mobile!
Device width:
<meta name="viewport" content="width=device-width" />
Initial scale:
<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
Video And Demo: goo.gl/j9KLT
Viewport
Adaptive to screen size
@media screen and (min-width: 800px) { ... }
@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (resolution: 2dppx) { ... }
● Logically group your styling rules.
● Dynamically responsive.
Media Queries
Mobile devices can usually be rotated
@media screen and (orientation: portrait) {}
@media screen and (orientation: landscape) {}
Video And Demo: goo.gl/SgMEo
Orientation
Sizing relatively to the viewport
#visible-square {
width: 20vmin;
height: 20vmin;
}
● Four new units: vw(idth), vh(eight),
vmin and vmax.
● Relative to the size of the viewport
(!) Value is 1% of width/height of the viewport1vw = 1% of the viewport width
1vh = 1% of viewport height
Video And Demo: goo.gl/J5tna
Viewport units
Users Are Mobile
Request the current position once
var success = function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
};
navigator.geolocation.getCurrentPosition(success);
Or keep track when they're on the move!
var watchId = navigator.geolocation.watchPosition(
function (position) { ... }); // Stop watching when you're done.
clearWatch(watchId);
Geolocation
Events when the device's orientation changes
window.onorientationchange = function(event) {
var yaw = event.alpha;
var pitch = event.beta;
var roll = event.gamma;
// You could make a compass!
}
Video And Demo: goo.gl/zNvp3
Device Orientation
Determine the network state
window.navigator.onLine
window.addEventListener("online", function() {
console.log("Visitor *might* be online.");
});
window.addEventListener("offline", function() {
console.log("Visitor is definitely offline.");
});
● Very hard to know for sure whether the visitor is online.● Check my demo: picturesque-app.appspot.com
Video And Demo: goo.gl/Bgmcp
Offline Events
<html manifest="website.manifest">
CACHE MANIFEST#version 1.2013.5.16css/bootstrap.min.css
#Imagesimg/logo.png
● Will also be used when the user is online.● Allows you to define fallback pages.● Don't cache the manifest!
Video And Demo: goo.gl/3fO2I
Application Cache
Use abstractions:
● Lawn Chair - brian.io/lawnchair/
● asyncStorage - https://github.com/WebReflection/db
● IndexedDBShim - nparashuram.com/IndexedDBShim/
Storage APIs
Input. Is. Harder!
What can I do?
Specialized on-screen keyboards<input type="email" />
<input type="search" />
<input type="url" />
<input type="tel" />
<input type="number" />
<input type="date" />
<input type="week" />
<input type="month" />
<input type="datetime-local" />
Video And Demo: goo.gl/CNMp6
Semantic input types
Touch EventsHandle the visitor's touches
[element].ontouchstart = function(ev){};
[element].ontouchmove = function(ev){};
[element].ontouchend = function(ev){};
(!) Warning: 300 millisecond click delay → Use FastClick
Docs: goo.gl/8ybb5Video And Demo: goo.gl/ZwOzk
Unique Hardware capabilities
What can I do?
Camera - Media CaptureTake photos<input type="file" capture accepts="image/*" id="
cam">
var cam = document.getElementById("cam");
cam.onchange = function(event) {
// An image has been captured.
if(event.target.files.length == 1 &&
event.target.files[0].type.indexOf("image/") == 0)
{
// We have an image - Let’s go wild...
}
}
Video And Demo: picturesque-app.appspot.com
getUserMedia
Inline camera and mic access
navigator.getUserMedia({audio:true, video: true},
function(stream) {
// An image has been captured.
video.src = URL.createObjectURL(stream);
video.play();
});
Demo: ido-green.appspot.com/getUserMedia-hello-world.htmland a short Video.
Android Intents
Interacting with native appsintent:
HOST/URI-path // Optional host
#Intent;
package=[string];
action=[string];
category=[ string];
component=[ string];
scheme=[string];
end;
<a
href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end" >
Take a QR code
</a>
More information:developers.google.com/chrome/mobile/docs/intents
Video And Demo: goo.gl/Kpk0C
Well...
What can I do?
What We Can Do Today?● Adapt to screen sizes
● Accommodate users on the move
● Speed up input
● Integrate with device features
● Measure performance across all devices
● Look forward to WebRTC, Web Audio and WebGL
Q & AThank you!
plus.google.com/greenido
greenido.wordpress.com
Top Related