Tweet
Tweet

Slide 1

Slide 1 text

afonsopacifer.github.io HTML 5 O que existe além de A11y e SEO? .3 1

Slide 2

Slide 2 text

Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2

Slide 3

Slide 3 text

Como está o HTML? O que tem de novo ? 3

Slide 4

Slide 4 text

Lek, 4

Slide 5

Slide 5 text

O Básico HTML === Semântica? 5

Slide 6

Slide 6 text

fi Semântica https://pt.wikipedia.org/wiki/Semântica Foi explicado brilhantemente pelo Moreno na ultima Talk <3 6

Slide 7

Slide 7 text

Importa Para quem? 7

Slide 8

Slide 8 text

Existe diferença Div X Button? 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Acessibilidade Foi explicado brilhantemente pela Amanda na primeira Talk <3 10

Slide 11

Slide 11 text

Sobre empatia A hora de criar um componente que não existe no HTML 11

Slide 12

Slide 12 text

Voltando… 12

Slide 13

Slide 13 text

HTML 5.1 voltando para 2016 13

Slide 14

Slide 14 text

A tag dialog https://afonsopacifer.github.io/talks 14

Slide 15

Slide 15 text

https://codepen.io/afonsopacifer/pen/zYLPBRB HTML SP open Dialog const btn = document.querySelector('button'); const dialog = document.querySelector('dialog'); btn.addEventListener('click', () => { }) dialog.showModal(); 15

Slide 16

Slide 16 text

HTML Ou Javascript dialog.showModal(); 16

Slide 17

Slide 17 text

Voltando… 17

Slide 18

Slide 18 text

O que realmente vale a pena 18

Slide 19

Slide 19 text

HTML 5 voltando para 2014 19

Slide 20

Slide 20 text

WHATWG X W3C A treta do HTML 5 VS XHTML 20

Slide 21

Slide 21 text

https://www.w3.org/html/logo/ • SEMANTICS •OFFLINE & STORAGE •DEVICE ACCESS •CONNECTIVITY •MULTIMEDIA •3D, GRAPHICS & EFFECTS •PERFORMANCE & INTEGRATION •CSS3 HTML 5 Classes 21

Slide 22

Slide 22 text

https://codepen.io/afonsopacifer/pen/xxJPKab CONNECTIVITY DEMO navigator.getGamepads() 22

Slide 23

Slide 23 text

(WEB APIS) HTML Ou Javascript TC39 W3C 23

Slide 24

Slide 24 text

Avançando… 24

Slide 25

Slide 25 text

https://www.w3.org/html/ Acordo em 2019 25

Slide 26

Slide 26 text

https://www.w3.org/TR/2021/NOTE-html53-20210128/ HTML 5.3 2021 26

Slide 27

Slide 27 text

https://html.spec.whatwg.org/multipage/introduction.html HTML 2023 27

Slide 28

Slide 28 text

https://github.com/whatwg/html Contribua 28

Slide 29

Slide 29 text

Descubra por você kkkJ O que existe além de A11y e SEO? 29

Slide 30

Slide 30 text

@afonsopacifer Obrigado HTML SP afonsopacifer.github.io 30