Explorando as APIs do HTML5

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