$30 off During Our Annual Pro Sale. View Details »

HTML5 APIs para Mobile

HTML5 APIs para Mobile

QConSP

Zeno Rocha

August 30, 2013
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

Transcript

  1. HTML5 APIs
    para Mobile

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. hoje vamos
    falar de HTML5
    no mundo mobile

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. nativo
    vs
    web

    View Slide

  14. nativo?

    View Slide

  15. web?

    View Slide

  16. vs

    View Slide

  17. document.querySelector
    vs

    View Slide

  18. vs

    View Slide

  19. a plataforma
    web demora,
    mas evolui

    View Slide

  20. html5-pro.com/wormz

    View Slide

  21. View Slide

  22. ubuntu

    View Slide

  23. webOS

    View Slide

  24. tizen

    View Slide

  25. firefox os

    View Slide

  26. o que usar?
    o que evitar?

    View Slide

  27. chrome para android
    legenda

    View Slide

  28. safari para iOS
    legenda

    View Slide

  29. browser nativo do android
    legenda

    View Slide

  30. firefox mobile
    legenda

    View Slide

  31. ie mobile
    legenda

    View Slide

  32. opera mobile
    legenda

    View Slide

  33. muito bem suportado

    View Slide

  34. View Slide

  35. zno.io/R77v
    viewport

    View Slide

  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) {}

    View Slide

  37. media
    queries

    View Slide










  38. View Slide


  39. zno.io/R7ME

    View Slide






  40. View Slide


  41. zno.io/R7nE

    View Slide






  42. View Slide


  43. zno.io/R6nv

    View Slide






  44. View Slide


  45. zno.io/R6iA

    View Slide



  46. var canvas = document.querySelector("canvas");
    var contexto = canvas.getContext("2d");
    // começa a desenhar
    contexto.arc(110, 110, 100, 0, Math.PI*2, true);
    ...

    View Slide


  47. zno.io/R7S3

    View Slide

  48. var success = function (position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    };
    navigator.geolocation.getCurrentPosition(success);
    geolocation

    View Slide

  49. var success = function (position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    };
    navigator.geolocation.watchPosition(success);
    geolocation

    View Slide

  50. zno.io/R6eH
    geolocation

    View Slide

  51. Lorem ipsum dolor sit amet, consectetur
    web storage
    var p = document.querySelector('p');
    localStorage.setItem('p', p.textContent);

    View Slide

  52. web
    storage
    zno.io/R7hq

    View Slide

  53. .ontouchstart = function(e) {
    // faça algo
    };
    .ontouchmove = function(e) {
    // faça algo
    };
    touch events

    View Slide

  54. touch
    events
    zno.io/R6gZ

    View Slide


  55. app cache
    CACHE MANIFEST
    #version 1
    chrome.svg

    View Slide

  56. app
    cache
    zno.io/R7BJ

    View Slide

  57. window.ononline = function() {
    document.body.className = 'online';
    };
    window.onoffline = function() {
    document.body.className = 'offline';
    };
    offline events

    View Slide

  58. offline
    events
    zno.io/R7Da

    View Slide

  59. parcialmente suportado

    View Slide


  60. 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]);
    }
    };

    View Slide

  61. zno.io/R7XH
    media
    capture

    View Slide

  62. img.onclick = function(e) {
    img.requestFullScreen();
    };
    fullscreen

    View Slide

  63. zno.io/R6t7
    fullscreen

    View Slide

  64. o que vem por aí!

    View Slide


  65. getUserMedia
    var video = document.querySelector("video");
    navigator.getUserMedia({
    video: true,
    audio: true
    },
    function(s) {
    video.src = window.URL.createObjectURL(s);
    });

    View Slide

  66. zno.io/R766
    getUserMedia

    View Slide

  67. .navbar {
    position: sticky;
    top: 30px;
    }
    position sticky
    zno.io/R6u6

    View Slide

  68. .onpointerdown = function(e) {
    // faça algo
    };
    .onpointermove = function(e) {
    // faça algo
    };
    pointer events
    zno.io/R6X6

    View Slide

  69. // Vibra uma vez por um segundo
    navigator.vibrate(1000);
    vibration
    zno.io/R6eP

    View Slide

  70. mobilehtml5.org

    View Slide

  71. nativo
    vs
    web
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ? ? ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?

    View Slide

  72. A melhor forma de
    prever o futuro é
    inventando ele

    View Slide

  73. View Slide