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

Explorando as APIs do HTML5

Avatar for Raphael Amorim Raphael Amorim
May 07, 2014
Programming
0
140

Explorando as APIs do HTML5

Avatar for Raphael Amorim

Raphael Amorim

May 07, 2014
Tweet

More Decks by Raphael Amorim

See All by Raphael Amorim
Rust 101 for Web
Avatar for Raphael Amorim raphamorim
0
220
Writing Your Own React Renderer
Avatar for Raphael Amorim raphamorim
4
320
the new react
Avatar for Raphael Amorim raphamorim
1
140
Composition on High-Order Components
Avatar for Raphael Amorim raphamorim
0
150
Understanding React
Avatar for Raphael Amorim raphamorim
1
320
Making for Web with WebAssembly
Avatar for Raphael Amorim raphamorim
4
890
Scratching React Fiber
Avatar for Raphael Amorim raphamorim
3
740
Understanding Memory Behavior on NodeJS
Avatar for Raphael Amorim raphamorim
1
380
Using Canvas Components
Avatar for Raphael Amorim raphamorim
0
300

Other Decks in Programming

See All in Programming
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
270
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.3k
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
390
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
600
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
610
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
1
160
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
680
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.5k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.8k

Featured

See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
64
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
820
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450

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