• Save
Zeno rocha - HTML5 APIs para Mobile
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Zeno rocha - HTML5 APIs para Mobile

on

  • 3,362 views

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/

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/

Statistics

Views

Total Views
3,362
Views on SlideShare
1,005
Embed Views
2,357

Actions

Likes
3
Downloads
0
Comments
0

4 Embeds 2,357

http://intercon.imasters.com.br 2353
http://intercontmp.imasters.com.br 2
http://172.16.32.13 1
https://m.facebook.com&_=1399209921652 HTTP 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Zeno rocha - HTML5 APIs para Mobile Presentation Transcript

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