Embed Size (px)
DESCRIPTION
What are some of the important features we can use today on mobile web browsers? How HTML5 can help our users to be more productive? Some of the answers are in these slides.
Citation preview
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
