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
590
7 Habits of Highly Productive Developers
zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
480
What's new in the Liferay Community
zenorocha
0
670
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
550
How Liferay fits into the real of latest technologies
zenorocha
0
590
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
960
Como investir em... você!
zenorocha
1
550
Other Decks in Programming
See All in Programming
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
960
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
480
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.2k
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
1
300
Use Perl as Better Shell Script
karupanerura
0
660
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
320
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
がんばりすぎないコーディングルール運用術
tsukakei
1
180
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.2k
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Speed Design
sergeychernyshev
30
970
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Reviewing Like a Champion
maltzj
523
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
How GitHub (no longer) Works
holman
314
140k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Docker and Python
trallard
44
3.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