HTML5 APIs
para Mobile
Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

hoje vamos
falar de HTML5
no mundo mobile
Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

Thursday, September 12, 13

nativo
vs
web
Thursday, September 12, 13

nativo?
Thursday, September 12, 13

web?
Thursday, September 12, 13

vs
<canvas>
Thursday, September 12, 13

document.querySelector
vs
Thursday, September 12, 13

vs
<input type=”date”>
Thursday, September 12, 13

a plataforma
web demora,
mas evolui
Thursday, September 12, 13

html5-pro.com/wormz
Thursday, September 12, 13

Thursday, September 12, 13

ubuntu
Thursday, September 12, 13

webOS
Thursday, September 12, 13

tizen
Thursday, September 12, 13

firefox os
Thursday, September 12, 13

o que usar?
o que evitar?
Thursday, September 12, 13

chrome para android
legenda
Thursday, September 12, 13

safari para iOS
legenda
Thursday, September 12, 13

browser nativo do android
legenda
Thursday, September 12, 13

firefox mobile
legenda
Thursday, September 12, 13

ie mobile
legenda
Thursday, September 12, 13

opera mobile
legenda
Thursday, September 12, 13

muito bem suportado
Thursday, September 12, 13

muito bem suportado
Thursday, September 12, 13

<meta name="viewport" content="width=device-width”>
viewport
<meta name="viewport" content="initial-scale=1.0”>
<meta name="viewport" content="minimum-scale=0.5”>
<meta name="viewport" content="maximum-scale=1.5”>
Thursday, September 12, 13

zno.io/R77v
viewport
Thursday, September 12, 13

@media screen and (max-width: 320px) {}
@media screen and (min-width: 1024px) {}
media queries
@media screen and (orientation: portrait) {}
@media screen and (orientation: landscape) {}
@media screen and (device-aspect-ratio: 16/9) {}
@media screen and (resolution: 2dppx) {}
Thursday, September 12, 13

media
queries
Thursday, September 12, 13

<input type="email">
<input type="url">
<input type="tel">
<input type="number">
<input type="search">
<input type="date">
<input type="month">
<input type="week">
<input>
Thursday, September 12, 13

<input>
zno.io/R7ME
Thursday, September 12, 13

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
</audio>
<video>
Thursday, September 12, 13

<video>
zno.io/R6nv
Thursday, September 12, 13

<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
</audio>
<audio>
Thursday, September 12, 13

<audio>
zno.io/R7nE
Thursday, September 12, 13

<img src="chrome.svg" alt="Chrome">
<svg>
<svg>
<circle cx="100" cy="50" r="40" fill="red">
</svg>
Thursday, September 12, 13

<svg>
zno.io/R6iA
Thursday, September 12, 13

<canvas width="250" height="250"></canvas>
<canvas>
var canvas = document.querySelector("canvas");
var contexto = canvas.getContext("2d");
// começa a desenhar
contexto.arc(110, 110, 100, 0, Math.PI*2, true);
...
Thursday, September 12, 13

<canvas>
zno.io/R7S3
Thursday, September 12, 13

var success = function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
};
navigator.geolocation.getCurrentPosition(success);
geolocation
Thursday, September 12, 13

var success = function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
};
navigator.geolocation.watchPosition(success);
geolocation
Thursday, September 12, 13

zno.io/R6eH
geolocation
Thursday, September 12, 13

<p>Lorem ipsum dolor sit amet, consectetur</p>
web storage
var p = document.querySelector('p');
localStorage.setItem('p', p.textContent);
Thursday, September 12, 13

web
storage
zno.io/R7hq
Thursday, September 12, 13

.ontouchstart = function(e) {
// faça algo
};
.ontouchmove = function(e) {
// faça algo
};
touch events
Thursday, September 12, 13

touch
events
zno.io/R6gZ
Thursday, September 12, 13

window.ononline = function() {
document.body.className = 'online';
};
window.onoffline = function() {
document.body.className = 'offline';
};
offline events
Thursday, September 12, 13

offline
events
zno.io/R7Da
Thursday, September 12, 13

<html manifest="cache.manifest">
app cache
CACHE MANIFEST
#version 1
chrome.svg
Thursday, September 12, 13

app
cache
zno.io/R7BJ
Thursday, September 12, 13

parcialmente suportado
Thursday, September 12, 13

parcialmente suportado
Thursday, September 12, 13

img.onclick = function(e) {
img.requestFullScreen();
};
fullscreen
<img src="chrome.svg" alt="Chrome">
Thursday, September 12, 13

zno.io/R6t7
fullscreen
Thursday, September 12, 13

<img id="img">
<input id="camera" type="file" accepts="image/*"
capture="camera">
media capture
camera.onchange = function(e) {
var files = e.target.files;
if (files.length > 0 &&
files[0].type.indexOf("image/") == 0) {
img.src = URL.createObjectURL(files[0]);
}
};
Thursday, September 12, 13

zno.io/R7XH
media
capture
Thursday, September 12, 13

o que vem por aí!
Thursday, September 12, 13

o que vem por aí!
Thursday, September 12, 13

<video autoplay></video>
getUserMedia
var video = document.querySelector("video");
navigator.getUserMedia({
video: true,
audio: true
},
function(s) {
video.src = window.URL.createObjectURL(s);
});
Thursday, September 12, 13

zno.io/R766
getUserMedia
Thursday, September 12, 13

.navbar {
position: sticky;
top: 30px;
}
position sticky
zno.io/R6u6
Thursday, September 12, 13

.onpointerdown = function(e) {
// faça algo
};
.onpointermove = function(e) {
// faça algo
};
pointer events
zno.io/R6X6
Thursday, September 12, 13

// Vibra uma vez por um segundo
navigator.vibrate(1000);
vibration
zno.io/R6eP
Thursday, September 12, 13

mobilehtml5.org
Thursday, September 12, 13

nativo
vs
web
?
?
?
?
?
?
?
? ? ?
?
?
?
?
??
?
???
Thursday, September 12, 13

A melhor forma de
prever o futuro é
inventando ele
Thursday, September 12, 13

Thursday, September 12, 13