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
600
7 Habits of Highly Productive Developers
zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
500
What's new in the Liferay Community
zenorocha
0
680
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
560
How Liferay fits into the real of latest technologies
zenorocha
0
600
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
970
Como investir em... você!
zenorocha
1
560
Other Decks in Programming
See All in Programming
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
Featured
See All Featured
Bash Introduction
62gerente
613
210k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
BBQ
matthewcrist
89
9.7k
Code Reviewing Like a Champion
maltzj
524
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Documentation Writing (for coders)
carmenintech
72
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
We Have a Design System, Now What?
morganepeng
53
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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