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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
670
7 Habits of Highly Productive Developers
zenorocha
1
430
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
550
What's new in the Liferay Community
zenorocha
0
720
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
600
How Liferay fits into the real of latest technologies
zenorocha
0
650
Estoicismo e JavaScript
zenorocha
3
1.2k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
1.1k
Como investir em... você!
zenorocha
1
590
Other Decks in Programming
See All in Programming
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.2k
CSC307 Lecture 03
javiergs
PRO
1
490
Implementation Patterns
denyspoltorak
0
290
Basic Architectures
denyspoltorak
0
680
SourceGeneratorのススメ
htkym
0
200
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
5
460
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
AgentCoreとHuman in the Loop
har1101
5
240
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
730
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.5k
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
430
Featured
See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
340
Become a Pro
speakerdeck
PRO
31
5.8k
Designing for Timeless Needs
cassininazir
0
130
How to Talk to Developers About Accessibility
jct
2
130
Building a Scalable Design System with Sketch
lauravandoore
463
34k
A Modern Web Designer's Workflow
chriscoyier
698
190k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
sira's awesome portfolio website redesign presentation
elsirapls
0
150
Designing for humans not robots
tammielis
254
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
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