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
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
360
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
420
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
120
GraphRAGの仕組みまるわかり
tosuri13
8
530
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
690
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
100
Deep Dive into ~/.claude/projects
hiragram
12
2.4k
Porting a visionOS App to Android XR
akkeylab
0
290
Team operations that are not burdened by SRE
kazatohiei
1
300
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
520
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
730
Featured
See All Featured
Scaling GitHub
holman
459
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Invisible Side of Design
smashingmag
301
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Docker and Python
trallard
44
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What's in a price? How to price your products and services
michaelherold
246
12k
Producing Creativity
orderedlist
PRO
346
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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