Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 APIs para Mobile

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
August 30, 2013
Programming
26
1.8k

HTML5 APIs para Mobile

QConSP

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

August 30, 2013
Tweet

More Decks by Zeno Rocha

See All by Zeno Rocha
The Next Generation of Developer-First Products
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
140
7 Habits of Highly Productive Developers
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
62
7 Hábitos de Desenvolvedores Altamente Produtivos
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
49
What's new in the Liferay Community
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
390
Launching Liferay Projects Faster with WeDeploy
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
280
How Liferay fits into the real of latest technologies
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
180
Estoicismo e JavaScript
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
3
620
Por que ninguém se importa com seu novo projeto open source?
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
2
530
Como investir em... você!
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
300

Other Decks in Programming

See All in Programming
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
6affc38c52fa1cd2e395b3044cfb95fe?s=48 conigashima
0
190
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
5
560
チームでカレーを作ろう！アジャイルカレークッキング
D30220c903365b2170e791313296b2f9?s=48 akitotsukahara
0
880
社用PCのdotfiles管理 / dotfiles-in-company
8c653f1257636312a8e88612ccb27718?s=48 yammerjp
0
140
How we run a Realtime Puzzle Fighting Game on AWS Serverless
3a488be96753f7e2232f3a3d79b83083?s=48 falken
0
250
Opsしかやってこなかった私が DevOpsが根付いたチームにJoinした話
C86708d49471e365b38de3f5322e1ac4?s=48 yhamano
1
100
シェーダー氷山発掘記
6a661bb5871208cad64912223bb0c637?s=48 logilabo
0
150
iOS 16からの ロック画面Widget争奪戦に備える
D4f04ef104c8fbfc9caa3c80e41692fd?s=48 tsuzuki817
0
260
Lancersをコンテナへ本番移行する取り組み
5059d3f370ad7e1f4d8de4be79ae1a2c?s=48 rvirus0817
1
410
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ？
95f926465b1c71fbb49850c5b6223c4d?s=48 cokaholic
0
120
engineer
E6706306bf41c5a5675e7296ecdb4103?s=48 spacemarket
0
4k
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
A68cb0f927eafc449f4046ea3edc09a2?s=48 dschenkelman
1
140

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
105
16k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
12
1.3k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
448
30k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
44k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
39
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k

Transcript

  1. HTML5 APIs para Mobile

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None

  9. hoje vamos falar de HTML5 no mundo mobile

  10. None
  11. None
  12. None

  13. nativo vs web

  14. nativo?

  15. web?

  16. vs <canvas>

  17. document.querySelector vs

  18. vs <input type=”date”>

  19. a plataforma web demora, mas evolui

  20. html5-pro.com/wormz

  21. None

  22. ubuntu

  23. webOS

  24. tizen

  25. firefox os

  26. o que usar? o que evitar?

  27. chrome para android legenda

  28. safari para iOS legenda

  29. browser nativo do android legenda

  30. firefox mobile legenda

  31. ie mobile legenda

  32. opera mobile legenda

  33. muito bem suportado

  34. <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”>

  35. zno.io/R77v viewport

  36. @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) {}

  37. media queries

  38. <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>

  39. <input> zno.io/R7ME

  40. <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio> <audio>

  41. <audio> zno.io/R7nE

  42. <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> </audio> <video>

  43. <video> zno.io/R6nv

  44. <img src="chrome.svg" alt="Chrome"> <svg> <svg> <circle cx="100" cy="50" r="40" fill="red">

    </svg>

  45. <svg> zno.io/R6iA

  46. <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); ...

  47. <canvas> zno.io/R7S3

  48. var success = function (position) { var latitude = position.coords.latitude;

    var longitude = position.coords.longitude; }; navigator.geolocation.getCurrentPosition(success); geolocation

  49. var success = function (position) { var latitude = position.coords.latitude;

    var longitude = position.coords.longitude; }; navigator.geolocation.watchPosition(success); geolocation

  50. zno.io/R6eH geolocation

  51. <p>Lorem ipsum dolor sit amet, consectetur</p> web storage var p

    = document.querySelector('p'); localStorage.setItem('p', p.textContent);

  52. web storage zno.io/R7hq

  53. .ontouchstart = function(e) { // faça algo }; .ontouchmove =

    function(e) { // faça algo }; touch events

  54. touch events zno.io/R6gZ

  55. <html manifest="cache.manifest"> app cache CACHE MANIFEST #version 1 chrome.svg

  56. app cache zno.io/R7BJ

  57. window.ononline = function() { document.body.className = 'online'; }; window.onoffline =

    function() { document.body.className = 'offline'; }; offline events

  58. offline events zno.io/R7Da

  59. parcialmente suportado

  60. <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]); } };

  61. zno.io/R7XH media capture

  62. img.onclick = function(e) { img.requestFullScreen(); }; fullscreen <img src="chrome.svg" alt="Chrome">

  63. zno.io/R6t7 fullscreen

  64. o que vem por aí!

  65. <video autoplay></video> getUserMedia var video = document.querySelector("video"); navigator.getUserMedia({ video: true,

    audio: true }, function(s) { video.src = window.URL.createObjectURL(s); });

  66. zno.io/R766 getUserMedia

  67. .navbar { position: sticky; top: 30px; } position sticky zno.io/R6u6

  68. .onpointerdown = function(e) { // faça algo }; .onpointermove =

    function(e) { // faça algo }; pointer events zno.io/R6X6

  69. // Vibra uma vez por um segundo navigator.vibrate(1000); vibration zno.io/R6eP

  70. mobilehtml5.org

  71. nativo vs web ? ? ? ? ? ? ?

    ? ? ? ? ? ? ? ? ? ? ? ? ?

  72. A melhor forma de prever o futuro é inventando ele

  73. None