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 full-size slide

  2. ! Write Code Every !
    Single Day

    View full-size slide

  3. API's do HTML5 ?

    View full-size slide

  4. Web Speech API

    View full-size slide

  5. Comportamento

    View full-size slide

  6. Comportamento

    View full-size slide

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

    View full-size slide

  8. Vibration API

    View full-size slide

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

    View full-size slide

  10. !
    Fullscreen API

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Comportamento
    ::fullscreen & ::backdrop

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Exemplos
    + html5demos.com/geo

    View full-size slide

  19. …E isso é tudo pessoal :)
    raphamorim

    View full-size slide