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
54
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
77
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
64
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
71
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
73
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
76
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
Avatar for Afonso Pacifer afonsopacifer
0
180
State of JS 2022
Avatar for Afonso Pacifer afonsopacifer
0
280
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
220

Other Decks in Programming

See All in Programming
マッチングアプリにおけるフリックUIで苦労したこと
Avatar for yuhei yuheiito
0
190
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
200
型で語るカタ
Avatar for irof irof
0
700
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
Avatar for Aki Nakahara akinko_0915
0
140
Model Pollution
Avatar for Henning Schwentner hschwentner
1
160
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
3
580
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
Avatar for Hiroki Iseri goyoki
5
1.1k
Git Sync を超える！OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
Avatar for Tetsuya Kikuchi tkikuc
4
350
TypeScriptでDXを上げろ！ Hono編
Avatar for Yusuke Wada yusukebe
3
770
NPOでのDevinの活用
Avatar for みんなのコード codeforeveryone
0
900
GPUを計算資源として使おう！
Avatar for prime number primenumber
1
250
Hack Claude Code with Claude Code
Avatar for Akihiro Okuno choplin
7
2.6k

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k

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