Tweet
Tweet

Slide 1

Slide 1 text

Explorando as APIs do HTML5

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

! Write Code Every ! Single Day

Slide 4

Slide 4 text

API's do HTML5 ?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Web Speech API

Slide 7

Slide 7 text

Comportamento

Slide 8

Slide 8 text

Comportamento

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Vibration API

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

! Fullscreen API

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Comportamento ::fullscreen & ::backdrop

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Geolocation

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Suporte

Slide 25

Slide 25 text

Exemplos + html5demos.com/geo

Slide 26

Slide 26 text

…E isso é tudo pessoal :) raphamorim