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
170

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
57
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
80
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
66
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
74
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
74
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
78
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
JetBrainsのAI機能の紹介 #jjug
Avatar for yusuke yusuke
0
160
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
4
540
MCPで実現できる、Webサービス利用体験について
Avatar for syumai syumai
7
2.3k
Go製CLIツールをnpmで配布するには
Avatar for syumai syumai
2
1k
AIのメモリー
Avatar for watany watany
12
1.2k
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
4
720
Bedrock AgentCore ObservabilityによるAIエージェントの運用
Avatar for matsukada licux
8
510
대규모 트래픽을 처리하는 프론트 개발자의 전략
Avatar for Seungmin 마량 maryang
0
110
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
Avatar for はる lemonade_37
1
400
NEWT Backend Evolution
Avatar for Rodrigo Ramirez xpromx
1
170
DynamoDBは怖くない！〜テーブル設計の勘所とテスト戦略〜
Avatar for hiroto_0411 hyamazaki
0
130

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k

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