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
58
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
68
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
75
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
78
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
79
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
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
Avatar for Kazuki Fujikawa kfujikawa
0
630
あなたとJIT, 今すぐアセンブ ル
Avatar for monochrome sisshiki1969
0
490
React 使いじゃなくても知っておきたい教養としての React
Avatar for Yuka O’oka oukayuka
18
5.4k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
Avatar for はる lemonade_37
1
450
新世界の理解
Avatar for Akihito Koriyama koriym
0
130
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
Avatar for Kuu fumiyakume
21
10k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
5
800
QA x AIエコシステム段階構築作戦
Avatar for Osu osu
0
250
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
640
新しいモバイルアプリ勉強会（仮）について
Avatar for 上ちょ / uetyo uetyo
1
250
Vibe coding コードレビュー
Avatar for kinopee kinopeee
0
420
대규모 트래픽을 처리하는 프론트 개발자의 전략
Avatar for Seungmin 마량 maryang
0
120

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
800
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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