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.

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
8. Em 2004...
9. Nós tínhamos
10. Não tínhamos
11. Em 2006...
12. ❤
13. Presente do HTML
14. 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.
15. Web APIs • High Resolution Time API; • User Timing API • Navigation Timing API • Network Information API • Vibration API • Battery Status API • Page Visibility API
16. Houve uma revolução, mas...
17. A maioria de nós não sabe HTML
19. Temos problemas educacionais na formação de devs
20. Você lembra como aprendeu HTML?
21. 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
22. “As pessoas precisam reaprender como escrever HTML. Só assim, conseguiremos tornar a web mais inclusiva.” parafraseando Reinaldo Ferraz
23. "Nós não temos um problema de acessibilidade. Nós temos um problema de falta de conhecimento básico em HTML." Nicolas Steenhout
25. EXEMp Exemplos
26. https:/ /www.htmhell.dev
27. EXEMp Qual o erro mais comum?
29. Componente Select Vuetify
30. output…
33. #link-ou-botão?
34. #botao-fechar ⛔
35. #botao-como-link ⛔⛔
36. #legenda-lendária
37. #comofaz?
38. #alt, no wait…, aria-label, no wait…, alt
39. Dicas
40. Não aprenda React, Vue e etc antes dos fundamentos
41. Foque na linguagem
42. Ferramenta e apenas um recurso
43. Não existe desenvolvedor React.
44. Existe desenvolvedor JS
45. Futuro do HTML
47. Perguntas?
48. 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