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

Precisamos falar sobre HTML

Precisamos falar sobre HTML

Palestrar ministrada no capítulo do Hacktoberfest 2020.

O objetivo dessa apresentação e mostrar a evolução do HTML ao longo dos anos e como ele tem uma importância crucial no desenvolvimento web.

Além disso, como ele contribuiu e contribui para uma web inclusiva e mais semântica.

590371c05fc56adf612fd91ea509cf74?s=128

Bruno Pulis

October 20, 2020
Tweet

Transcript

  1. Hacktoberfest 2020 Precisamos falar sobre HTML

  2. Sou Bruno Pulis Analista de Qualidade @Monetizze about.me/brunopulis

  3. Passado do HTML

  4. HTML 5 Adicionada novas web apis, elementos de formulários. ❤

    Out 2014 HTML 4 Strict no DTD, não permitia usar elementos depreciados, Dez 1997 HTML 2 Adicionado o input file, table, image maps. Nov 1995 HTML 3 Adicionado o <blink> e o <marquee> Jan 1997 • Em 1990, o HTML herda do SGML as tags: <title>, <h1>...<h6>, <ol>, <ul>, <li>; • Em 1993 surge a proposta da tag <img>; • Em 1995, inicia o trabalho com as CSS;
  5. https:/ /bit.ly/3j4Ybi1

  6. Fundamentos da Web

  7. None
  8. Em 2004...

  9. Nós tínhamos

  10. Não tínhamos

  11. Em 2006...

  12. Presente do HTML

  13. HTML5 • Trouxe semântica; • Interatividade com <video> e <audio>;

    • <canvas>; • Local Storage; • Novos elementos e atributos para formulários; • Web Workers e Web Sockets; • Geo Location; • Offline application.
  14. Web APIs • High Resolution Time API; • User Timing

    API • Navigation Timing API • Network Information API • Vibration API • Battery Status API • Page Visibility API
  15. Houve uma revolução, mas...

  16. A maioria de nós não sabe HTML

  17. None
  18. Temos problemas educacionais na formação de devs

  19. Você lembra como aprendeu HTML?

  20. Tipos de falha da WCAG % de home pages em

    Fev de 2020 % de home pages em Fev de 2019 Imagens sem alt 66.0% 68.0% Links vazios 59.9% 58.1% Faltando label em formulários 53.8% 52.8% Botões vazios 28.7% 25.0% Linguagem do documento ausente 28.0% 33.1% https:/ /webaim.org/projects/million/#intro Pesquisa WebAIM
  21. “As pessoas precisam reaprender como escrever HTML. Só assim, conseguiremos

    tornar a web mais inclusiva.” parafraseando Reinaldo Ferraz
  22. "Nós não temos um problema de acessibilidade. Nós temos um

    problema de falta de conhecimento básico em HTML." Nicolas Steenhout
  23. None
  24. EXEMp Exemplos

  25. https:/ /www.htmhell.dev

  26. EXEMp Qual o erro mais comum?

  27. None
  28. Componente Select Vuetify

  29. output…

  30. None
  31. None
  32. #link-ou-botão?

  33. #botao-fechar ⛔

  34. #botao-como-link ⛔⛔

  35. #legenda-lendária

  36. #comofaz?

  37. #alt, no wait…, aria-label, no wait…, alt

  38. Dicas

  39. Não aprenda React, Vue e etc antes dos fundamentos

  40. Foque na linguagem

  41. Ferramenta e apenas um recurso

  42. Não existe desenvolvedor React.

  43. Existe desenvolvedor JS

  44. Futuro do HTML

  45. None
  46. Perguntas?

  47. Referências • https:/ /bit.ly/3iYe6OK • https:/ /bit.ly/2Fs2nKT • https:/ /bit.ly/3j4Ybi1

    • The History of HTML5 • Chapter 2 • 10 HTML5 APIs Worth Looking Into • https:/ /bit.ly/31leAc7