Save 37% off PRO during our Black Friday Sale! »

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
20
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
9
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
6
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
350
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
240
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
140
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
3
560
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
2
480
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
260

Other Decks in Programming

See All in Programming
A12373843afc54857a845404bdd5f5cb?s=48 lighttiger2505
1
260
0ecada41f471c45033ee166c37819915?s=48 artoy
0
180
Ba7d2ed57616842d9564b51274d80ea0?s=48 tetsunosuke
0
120
Fe9968bc3922faa77939286afda905de?s=48 chloe463
0
770
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
6
1.7k
6b8e2101579190ad96e747e01c279898?s=48 pauloxnet
1
130
434123e6e96afad5905d876ff5e355ca?s=48 castaneai
2
1.1k
9733730b7cb400f72ed99aa28fc1d210?s=48 karszawa
0
510
36e72b299b441378e41b6c445296b959?s=48 achiku
1
230
635e53b96114c922fa5486b418895960?s=48 fadis
7
4.2k
867984762e82fd75629359fc52d5f3b3?s=48 flum1025
0
180
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
3
4.8k

Featured

See All Featured
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
16
940
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
29
5.2k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
71
3.2k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
298
39k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
595
210k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
105
12k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
7.8k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k

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