Zeno rocha - HTML5 APIs para Mobile

3,605 views

Published on

Palestra de Zeno Rocha no InterCon Dev - Android, em setembro de 2013, sobre HTML5 APIs para Mobile. Saiba mais em: http://intercon.imasters.com.br/dev/android/

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,605
On SlideShare
0
From Embeds
0
Number of Embeds
2,557
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Zeno rocha - HTML5 APIs para Mobile

  1. 1. HTML5 APIs para Mobile Thursday, September 12, 13
  2. 2. Thursday, September 12, 13
  3. 3. Thursday, September 12, 13
  4. 4. Thursday, September 12, 13
  5. 5. Thursday, September 12, 13
  6. 6. Thursday, September 12, 13
  7. 7. Thursday, September 12, 13
  8. 8. Thursday, September 12, 13
  9. 9. hoje vamos falar de HTML5 no mundo mobile Thursday, September 12, 13
  10. 10. Thursday, September 12, 13
  11. 11. Thursday, September 12, 13
  12. 12. Thursday, September 12, 13
  13. 13. nativo vs web Thursday, September 12, 13
  14. 14. nativo? Thursday, September 12, 13
  15. 15. web? Thursday, September 12, 13
  16. 16. vs <canvas> Thursday, September 12, 13
  17. 17. document.querySelector vs Thursday, September 12, 13
  18. 18. vs <input type=”date”> Thursday, September 12, 13
  19. 19. a plataforma web demora, mas evolui Thursday, September 12, 13
  20. 20. html5-pro.com/wormz Thursday, September 12, 13
  21. 21. Thursday, September 12, 13
  22. 22. ubuntu Thursday, September 12, 13
  23. 23. webOS Thursday, September 12, 13
  24. 24. tizen Thursday, September 12, 13
  25. 25. firefox os Thursday, September 12, 13
  26. 26. o que usar? o que evitar? Thursday, September 12, 13
  27. 27. chrome para android legenda Thursday, September 12, 13
  28. 28. safari para iOS legenda Thursday, September 12, 13
  29. 29. browser nativo do android legenda Thursday, September 12, 13
  30. 30. firefox mobile legenda Thursday, September 12, 13
  31. 31. ie mobile legenda Thursday, September 12, 13
  32. 32. opera mobile legenda Thursday, September 12, 13
  33. 33. muito bem suportado Thursday, September 12, 13
  34. 34. muito bem suportado Thursday, September 12, 13
  35. 35. <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”> Thursday, September 12, 13
  36. 36. zno.io/R77v viewport Thursday, September 12, 13
  37. 37. @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) {} Thursday, September 12, 13
  38. 38. media queries Thursday, September 12, 13
  39. 39. <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> Thursday, September 12, 13
  40. 40. <input> zno.io/R7ME Thursday, September 12, 13
  41. 41. <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> </audio> <video> Thursday, September 12, 13
  42. 42. <video> zno.io/R6nv Thursday, September 12, 13
  43. 43. <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio> <audio> Thursday, September 12, 13
  44. 44. <audio> zno.io/R7nE Thursday, September 12, 13
  45. 45. <img src="chrome.svg" alt="Chrome"> <svg> <svg> <circle cx="100" cy="50" r="40" fill="red"> </svg> Thursday, September 12, 13
  46. 46. <svg> zno.io/R6iA Thursday, September 12, 13
  47. 47. <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); ... Thursday, September 12, 13
  48. 48. <canvas> zno.io/R7S3 Thursday, September 12, 13
  49. 49. var success = function (position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; }; navigator.geolocation.getCurrentPosition(success); geolocation Thursday, September 12, 13
  50. 50. var success = function (position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; }; navigator.geolocation.watchPosition(success); geolocation Thursday, September 12, 13
  51. 51. zno.io/R6eH geolocation Thursday, September 12, 13
  52. 52. <p>Lorem ipsum dolor sit amet, consectetur</p> web storage var p = document.querySelector('p'); localStorage.setItem('p', p.textContent); Thursday, September 12, 13
  53. 53. web storage zno.io/R7hq Thursday, September 12, 13
  54. 54. .ontouchstart = function(e) { // faça algo }; .ontouchmove = function(e) { // faça algo }; touch events Thursday, September 12, 13
  55. 55. touch events zno.io/R6gZ Thursday, September 12, 13
  56. 56. window.ononline = function() { document.body.className = 'online'; }; window.onoffline = function() { document.body.className = 'offline'; }; offline events Thursday, September 12, 13
  57. 57. offline events zno.io/R7Da Thursday, September 12, 13
  58. 58. <html manifest="cache.manifest"> app cache CACHE MANIFEST #version 1 chrome.svg Thursday, September 12, 13
  59. 59. app cache zno.io/R7BJ Thursday, September 12, 13
  60. 60. parcialmente suportado Thursday, September 12, 13
  61. 61. parcialmente suportado Thursday, September 12, 13
  62. 62. img.onclick = function(e) { img.requestFullScreen(); }; fullscreen <img src="chrome.svg" alt="Chrome"> Thursday, September 12, 13
  63. 63. zno.io/R6t7 fullscreen Thursday, September 12, 13
  64. 64. <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]); } }; Thursday, September 12, 13
  65. 65. zno.io/R7XH media capture Thursday, September 12, 13
  66. 66. o que vem por aí! Thursday, September 12, 13
  67. 67. o que vem por aí! Thursday, September 12, 13
  68. 68. <video autoplay></video> getUserMedia var video = document.querySelector("video"); navigator.getUserMedia({ video: true, audio: true }, function(s) { video.src = window.URL.createObjectURL(s); }); Thursday, September 12, 13
  69. 69. zno.io/R766 getUserMedia Thursday, September 12, 13
  70. 70. .navbar { position: sticky; top: 30px; } position sticky zno.io/R6u6 Thursday, September 12, 13
  71. 71. .onpointerdown = function(e) { // faça algo }; .onpointermove = function(e) { // faça algo }; pointer events zno.io/R6X6 Thursday, September 12, 13
  72. 72. // Vibra uma vez por um segundo navigator.vibrate(1000); vibration zno.io/R6eP Thursday, September 12, 13
  73. 73. mobilehtml5.org Thursday, September 12, 13
  74. 74. nativo vs web ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ??? Thursday, September 12, 13
  75. 75. A melhor forma de prever o futuro é inventando ele Thursday, September 12, 13
  76. 76. Thursday, September 12, 13

×