Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Explorando as APIs do HTML5

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Raphael Amorim Raphael Amorim
May 07, 2014
Programming
160
0

Explorando as APIs do HTML5

Avatar for Raphael Amorim

Raphael Amorim

May 07, 2014

More Decks by Raphael Amorim

See All by Raphael Amorim
Rust 101 for Web
Avatar for Raphael Amorim raphamorim
0
270
Writing Your Own React Renderer
Avatar for Raphael Amorim raphamorim
4
400
the new react
Avatar for Raphael Amorim raphamorim
1
160
Composition on High-Order Components
Avatar for Raphael Amorim raphamorim
0
180
Understanding React
Avatar for Raphael Amorim raphamorim
1
370
Making for Web with WebAssembly
Avatar for Raphael Amorim raphamorim
4
930
Scratching React Fiber
Avatar for Raphael Amorim raphamorim
3
790
Understanding Memory Behavior on NodeJS
Avatar for Raphael Amorim raphamorim
1
440
Using Canvas Components
Avatar for Raphael Amorim raphamorim
0
350

Other Decks in Programming

See All in Programming
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
170
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
180
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
220
Jetpack Compose Mechanisms
Avatar for Jaewoong skydoves
3
820
3回つくってわかった、
定期実行ジョブ基盤の本質情報
Avatar for Naoto Takai takai
0
480
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
370
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
780
npm との違いを手がかりにGo の依存管理を理解したい
Avatar for OPTiM optim
0
380
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
140
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
190
FactoryBotをやめればRSpecは速くなるのか？
Avatar for nissyi yuta_onishi_97
0
460
IBM Bob でAI駆動開発『QC-Playbook』
Avatar for 1kano ichirokano2
0
110

Featured

See All Featured
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
480
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
460
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
870
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
940
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
5.2k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
520

Transcript

  1. Explorando as APIs do HTML5

  2. None

  3. ! Write Code Every ! Single Day

  4. API's do HTML5 ?

  5. None

  6. Web Speech API

  7. Comportamento

  8. Comportamento

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

  10. Vibration API

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

  12. ! Fullscreen API

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

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

    = document.fullscreenElement var fullscreenEnabled = document.fullscreenEnabled

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

    fullscreenerror

  16. Comportamento ::fullscreen & ::backdrop

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

  18. None
  19. None
  20. None

  21. Geolocation

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

    position.coords.latitude; ! var longitude = position.coords.longitude;

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

  24. Suporte

  25. Exemplos + html5demos.com/geo

  26. …E isso é tudo pessoal :) raphamorim