HTML5 APIs para Mobile

QConSP

Transcript

1. HTML5 APIs para Mobile
9. hoje vamos falar de HTML5 no mundo mobile
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
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