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
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
280
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
170
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
98
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
2
470
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
420
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
210
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
220
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
200
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
12
1.4k

Other Decks in Programming

See All in Programming
58e952ea302f1fa452f69c9d8204a8bc?s=48 toparvion
0
100
19d7ae634445d4bd9b10c7961a462260?s=48 shu223
9
2.2k
Db8efd836c9a09b71e3d8e1c60d6ea84?s=48 colinfay
0
340
0157a830bfaa0c5426422c45aa0b2637?s=48 bo0km4n
3
440
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
5
630
4bd69b0ec8e5731a5332ee100ad8fb6d?s=48 entaku
2
160
127622866eaa739e06f9507aff67be2f?s=48 planeta
0
140
575ca492bac55e895d0e1c86f7d709fe?s=48 hschwentner
9
1.7k
6d64a4d4ab6201f2ce57e3befc687785?s=48 yoshi0202
0
130
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
170
0b40b09ee30366ddfe68070d94d7ee3f?s=48 a_suenami
0
220
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
250

Featured

See All Featured
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
7k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
10
3.8k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
345
20k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
14k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
124
21k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
52
1.8k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
65
2.9k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
340

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