Zeno rocha - HTML5 APIs para Mobile

HTML5 APIs
para Mobile
Thursday, September 12, 13

hoje vamos
falar de HTML5
no mundo mobile

nativo
vs
web

nativo?

web?

vs
<canvas>

document.querySelector
vs

vs
<input type=”date”>

a plataforma
web demora,
mas evolui

html5-pro.com/wormz

ubuntu

webOS

tizen

firefox os

o que usar?
o que evitar?

chrome para android
legenda

safari para iOS
legenda

browser nativo do android
legenda

firefox mobile
legenda

ie mobile
legenda

opera mobile
legenda

muito bem suportado

zno.io/R77v
viewport

@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) {}

media
queries

<input>
zno.io/R7ME

<video>
zno.io/R6nv

<audio>
zno.io/R7nE

<svg>
zno.io/R6iA

<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);
...

<canvas>
zno.io/R7S3

var success = function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
};
navigator.geolocation.getCurrentPosition(success);
geolocation

var success = function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
};
navigator.geolocation.watchPosition(success);
geolocation

zno.io/R6eH
geolocation

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

web
storage
zno.io/R7hq

.ontouchstart = function(e) {
// faça algo
};
.ontouchmove = function(e) {
// faça algo
};
touch events

touch
events
zno.io/R6gZ

window.ononline = function() {
document.body.className = 'online';
};
window.onoffline = function() {
document.body.className = 'offline';
};
offline events

offline
events
zno.io/R7Da

<html manifest="cache.manifest">
app cache
CACHE MANIFEST
#version 1
chrome.svg

app
cache
zno.io/R7BJ

parcialmente suportado

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

zno.io/R6t7
fullscreen

<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]);
}
};

zno.io/R7XH
media
capture

o que vem por aí!

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

zno.io/R766
getUserMedia

.navbar {
position: sticky;
top: 30px;
}
position sticky
zno.io/R6u6

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

// Vibra uma vez por um segundo
navigator.vibrate(1000);
vibration
zno.io/R6eP

mobilehtml5.org

nativo
vs
web
?
?
?
?
?
?
?
? ? ?
?
?
?
?
??
?
???

A melhor forma de
prever o futuro é
inventando ele

Zeno rocha - HTML5 APIs para Mobile

Recommended

Recommended

More Related Content

Similar to Zeno rocha - HTML5 APIs para Mobile

Similar to Zeno rocha - HTML5 APIs para Mobile (20)

More from iMasters

More from iMasters (20)

Recently uploaded

Recently uploaded (20)

Zeno rocha - HTML5 APIs para Mobile