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
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
310
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
190
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
120
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
3
520
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
2
440
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
220
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
230
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
210
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
12
1.4k

Other Decks in Programming

See All in Programming
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
160
4b071f90c5d9c0a58e2d9076460b7be4?s=48 ne_sachirou
0
560
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
1
150
6914735c2aaaa9fa1d7e5c8ddde6de4c?s=48 yoheimuta
2
110
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
3
800
706ea99a045bb3f273ab518a3db3e113?s=48 kamiokan
0
240
85401912c23c7d5e656c08e7a751e95c?s=48 cocoatomo
0
320
C2abb398ab4bf22ad488d050ffddbd1c?s=48 tuka
1
730
D3e027f453bb96ac1398cc98620f2920?s=48 shukob
0
110
9d974d9df914b4540ae8febc6cb89f02?s=48 tiking76
1
150
E3c2bac7a4a04823dda122cf243edd01?s=48 claudioed
1
300
14d83dc17e2c893d7564b609ff8da4ca?s=48 techharmony
0
310

Featured

See All Featured
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
146
19k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
402
20k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
495
110k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
114
26k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
29
990
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.3k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
146
20k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
29
1.2k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
193
8.9k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
631
48k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
25
1.4k

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