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

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