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

HTML 5.3: O que existe além de a11y e SEO?

Avatar for Afonso Pacifer Afonso Pacifer
January 18, 2023
Programming
0
160

HTML 5.3: O que existe além de a11y e SEO?

Avatar for Afonso Pacifer

Afonso Pacifer

January 18, 2023
Tweet

More Decks by Afonso Pacifer

See All by Afonso Pacifer
Developer Experience (DevEx) no mundo Front-End: Do Ruby ao Next.js
Avatar for Afonso Pacifer afonsopacifer
0
49
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
76
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
61
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
68
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
72
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
73
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
Avatar for Afonso Pacifer afonsopacifer
0
170
State of JS 2022
Avatar for Afonso Pacifer afonsopacifer
0
270
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
210

Other Decks in Programming

See All in Programming
ReadMoreTextView
Avatar for Sungyong An fornewid
1
370
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
Avatar for mackey0225 mackey0225
2
490
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
Avatar for Yuuki Tsubouchi (yuuk1) yuukit
3
750
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
680
PT AI без купюр
Avatar for Vladimir Kochetkov v0lka
0
230
Select API from Kotlin Coroutine
Avatar for Matsuda Jumpei jmatsu
1
110
Practical Tips and Tricks
for Working with 
Compose Multiplatform Previews (mDevCamp 2025)
Avatar for István Juhos stewemetal
0
120
イベントストーミングから始めるドメイン駆動設計
Avatar for おだかとしゆき jgeem
4
820
AIコーディング道場勉強会#2 君（エンジニア）たちはどう生きるか
Avatar for misaki.otb misakiotb
1
160
プロダクト開発でも使おう 関数のオーバーロード
Avatar for yoiwamoto yoiwamoto
0
150
ktr0731/go-mcpでMCPサーバー作ってみた
Avatar for kashiwa takak2166
0
160
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
10k

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
630
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.5k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M

Transcript

  1. afonsopacifer.github.io HTML 5 O que existe além de A11y e

    SEO? .3 1

  2. Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2

  3. Como está o HTML? O que tem de novo ?

    3

  4. Lek, 4

  5. O Básico HTML === Semântica? 5

  6. fi Semântica https://pt.wikipedia.org/wiki/Semântica Foi explicado brilhantemente pelo Moreno na ultima

    Talk <3 6

  7. Importa Para quem? 7

  8. Existe diferença Div X Button? 8

  9. Live Code https://codepen.io/afonsopacifer/pen/BaPmKXr • Aparência • UI feedbacks (Hover, Active,

    etc…) • Acessível via teclado (tabIndex) •Leitor de tela (Wai-Aria) •Evento click mapeado para teclado 9

  10. Acessibilidade Foi explicado brilhantemente pela Amanda na primeira Talk <3

    10

  11. Sobre empatia A hora de criar um componente que não

    existe no HTML 11

  12. Voltando… 12

  13. HTML 5.1 voltando para 2016 13

  14. A tag dialog https://afonsopacifer.github.io/talks 14

  15. https://codepen.io/afonsopacifer/pen/zYLPBRB <dialog > HTML SP </dialog> open <button> Dialog </button>

    const btn = document.querySelector('button'); const dialog = document.querySelector('dialog'); btn.addEventListener('click', () => { }) dialog.showModal(); 15

  16. HTML Ou Javascript dialog.showModal(); 16

  17. Voltando… 17

  18. O que realmente vale a pena 18

  19. HTML 5 voltando para 2014 19

  20. WHATWG X W3C A treta do HTML 5 VS XHTML

    20

  21. https://www.w3.org/html/logo/ • SEMANTICS •OFFLINE & STORAGE •DEVICE ACCESS •CONNECTIVITY •MULTIMEDIA

    •3D, GRAPHICS & EFFECTS •PERFORMANCE & INTEGRATION •CSS3 HTML 5 Classes 21

  22. https://codepen.io/afonsopacifer/pen/xxJPKab CONNECTIVITY DEMO navigator.getGamepads() 22

  23. (WEB APIS) HTML Ou Javascript TC39 W3C 23

  24. Avançando… 24

  25. https://www.w3.org/html/ Acordo em 2019 25

  26. https://www.w3.org/TR/2021/NOTE-html53-20210128/ HTML 5.3 2021 26

  27. https://html.spec.whatwg.org/multipage/introduction.html HTML 2023 27

  28. https://github.com/whatwg/html Contribua 28

  29. Descubra por você kkkJ O que existe além de A11y

    e SEO? 29

  30. @afonsopacifer Obrigado HTML SP afonsopacifer.github.io 30