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
63
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
83
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
71
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
76
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
79
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
81
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
290
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
220

Other Decks in Programming

See All in Programming
testingを眺める
Avatar for matumoto matumoto
1
130
Trem on Rails - Prompt Engineering com Ruby
Avatar for Elaine Naomi elainenaomi
1
100
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
Avatar for Wataru Takahara mipypf
0
990
Laravel Boost 超入門
Avatar for Arlo fire_arlo
2
170
個人軟體時代
Avatar for Ethan Huang ethanhuang13
0
280
The state patternの実践 個人開発で培ったpractice集
Avatar for miyanokomiya miyanokomiya
0
160
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
Avatar for Ryo Okubo syucream
2
800
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
140
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
Avatar for Kazuya Sakamoto kazuyasakamoto
0
300
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
Avatar for dafujii dafujii
0
230
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
390
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
150

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
800
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k

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