Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML 5.3: O que existe além de a11y e SEO?

HTML 5.3: O que existe além de a11y e SEO?

Afonso Pacifer

January 18, 2023
Tweet

More Decks by Afonso Pacifer

Other Decks in Programming

Transcript

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

    View Slide

  2. Afonso


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

    View Slide

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

    View Slide

  4. Lek,
    4

    View Slide

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

    View Slide

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

    View Slide

  7. Importa


    Para quem?
    7

    View Slide

  8. Existe diferença


    Div X Button?
    8

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  12. Voltando…
    12

    View Slide

  13. HTML 5.1
    voltando para 2016
    13

    View Slide

  14. A tag


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

    View Slide

  15. 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

    View Slide

  16. HTML


    Ou


    Javascript
    dialog.showModal();
    16

    View Slide

  17. Voltando…
    17

    View Slide

  18. O que realmente


    vale a pena
    18

    View Slide

  19. HTML 5
    voltando para 2014
    19

    View Slide

  20. WHATWG X W3C
    A treta do HTML 5 VS XHTML
    20

    View Slide

  21. https://www.w3.org/html/logo/
    • SEMANTICS

    •OFFLINE & STORAGE

    •DEVICE ACCESS

    •CONNECTIVITY

    •MULTIMEDIA

    •3D, GRAPHICS & EFFECTS

    •PERFORMANCE & INTEGRATION

    •CSS3
    HTML 5


    Classes
    21

    View Slide

  22. https://codepen.io/afonsopacifer/pen/xxJPKab
    CONNECTIVITY


    DEMO
    navigator.getGamepads()
    22

    View Slide

  23. (WEB APIS)


    HTML


    Ou


    Javascript
    TC39


    W3C


    23

    View Slide

  24. Avançando…
    24

    View Slide

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


    2019
    25

    View Slide

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


    2021
    26

    View Slide

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


    2023
    27

    View Slide

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

    View Slide

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

    View Slide

  30. @afonsopacifer
    Obrigado HTML SP
    afonsopacifer.github.io
    30

    View Slide