Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5 APIs para Mobile
Search
Zeno Rocha
August 30, 2013
Programming
26
1.9k
HTML5 APIs para Mobile
QConSP
Zeno Rocha
August 30, 2013
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
550
7 Habits of Highly Productive Developers
zenorocha
1
370
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
440
What's new in the Liferay Community
zenorocha
0
650
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
530
How Liferay fits into the real of latest technologies
zenorocha
0
550
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
890
Como investir em... você!
zenorocha
1
530
Other Decks in Programming
See All in Programming
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
730
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.2k
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
950
DROBEの生成AI活用事例 with AWS
ippey
0
130
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
240
Software Architecture
hschwentner
6
2.1k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Embracing the Ebb and Flow
colly
84
4.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Designing Experiences People Love
moore
139
23k
Designing for humans not robots
tammielis
250
25k
Statistics for Hackers
jakevdp
797
220k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLとの向き合い方2022年版
quramy
44
13k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Transcript
HTML5 APIs para Mobile
None
None
None
None
None
None
None
hoje vamos falar de HTML5 no mundo mobile
None
None
None
nativo vs web
nativo?
web?
vs <canvas>
document.querySelector vs
vs <input type=”date”>
a plataforma web demora, mas evolui
html5-pro.com/wormz
None
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
<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”>
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 type="email"> <input type="url"> <input type="tel"> <input type="number"> <input type="search">
<input type="date"> <input type="month"> <input type="week"> <input>
<input> zno.io/R7ME
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio> <audio>
<audio> zno.io/R7nE
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> </audio> <video>
<video> zno.io/R6nv
<img src="chrome.svg" alt="Chrome"> <svg> <svg> <circle cx="100" cy="50" r="40" fill="red">
</svg>
<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
<html manifest="cache.manifest"> app cache CACHE MANIFEST #version 1 chrome.svg
app cache zno.io/R7BJ
window.ononline = function() { document.body.className = 'online'; }; window.onoffline =
function() { document.body.className = 'offline'; }; offline events
offline events zno.io/R7Da
parcialmente suportado
<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
img.onclick = function(e) { img.requestFullScreen(); }; fullscreen <img src="chrome.svg" alt="Chrome">
zno.io/R6t7 fullscreen
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
None