Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Explorando as APIs do HTML5

Explorando as APIs do HTML5

Raphael Amorim

May 07, 2014
Tweet

More Decks by Raphael Amorim

Other Decks in Programming

Transcript

  1. Explorando as APIs do HTML5

    View Slide

  2. View Slide

  3. ! Write Code Every !
    Single Day

    View Slide

  4. API's do HTML5 ?

    View Slide

  5. View Slide

  6. Web Speech API

    View Slide

  7. Comportamento

    View Slide

  8. Comportamento

    View Slide

  9. Exemplos
    + raphamorim.com/sound-hunter/
    + google.com/intl/pt/chrome/demos/
    speech.html

    View Slide

  10. Vibration API

    View Slide

  11. Comportamento
    navigator.vibrate(time)
    if (navigator.vibrate)
    navigator.vibrate(500)
    ! ! navigator.vibrate([500, 1000, 2000])

    View Slide

  12. !
    Fullscreen API

    View Slide

  13. Comportamento
    !
    document.querySelector(‘html’).requestFullscreen()
    document.exitFullscreen()

    View Slide

  14. Comportamento
    Mas como saber o status da API?
    var fullscreenElement = document.fullscreenElement
    var fullscreenEnabled = document.fullscreenEnabled

    View Slide

  15. Comportamento
    Awesome!!
    Mas e quanto os eventos da API?
    fullscreenchange
    fullscreenerror

    View Slide

  16. Comportamento
    ::fullscreen & ::backdrop

    View Slide

  17. Exemplos
    + demo.hongkiat.com/html5-
    fullscreen-api/index.html

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. Geolocation

    View Slide

  22. Comportamento
    if (navigator.geolocation)
    navigator.geolocation.getCurrentPosition(showPosition)
    function showPosition(position)
    ! var latitude = position.coords.latitude;
    ! var longitude = position.coords.longitude;

    View Slide

  23. Comportamento
    position.coords.latitude
    position.coords.longitude
    altitude
    speed
    altitudeAccuracy
    timestamp
    accuracy
    heading

    View Slide

  24. Suporte

    View Slide

  25. Exemplos
    + html5demos.com/geo

    View Slide

  26. …E isso é tudo pessoal :)
    raphamorim

    View Slide