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
150

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
45
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
75
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
58
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
66
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
70
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
Efficiency and Rock 'n’ Roll (Really!)
Avatar for Holly Cummins hollycummins
0
590
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
Avatar for Philip Schwarz philipschwarz
PRO
0
110
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ～他言語変換の仕組み～ / cdk-language-transformation
Avatar for k.goto gotok365
7
370
CRUD から CQRS へ ～ 分離が可能にする柔軟性
Avatar for Takashi Kawae tkawae
0
220
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
360
ts-morph実践：型を利用するcodemodのテクニック
Avatar for ypresto ypresto
1
520
ワンバイナリWebサービスのススメ
Avatar for mackee mackee
10
7.3k
Proxmoxをまとめて管理できる コンソール作ってみました
Avatar for karugamo karugamo
1
390
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
Avatar for tris tris5572
2
510
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
Avatar for Tomohisa Takaoka tomohisa
1
160
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
1
530
OpenNext + Hono on Cloudflare で イマドキWeb開発スタックを実現する
Avatar for rokuosan rokuosan
0
110

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Designing for Performance
Avatar for Lara Hogan lara
608
69k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
183
22k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
81
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k

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