HTML5 APIs para Mobile

QConSP

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