Precisamos falar sobre HTML

Slide 1

Slide 1 text

Hacktoberfest 2020 Precisamos falar sobre HTML

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Passado do HTML

Slide 4

Slide 4 text

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 ﬁle, table, image maps. Nov 1995 HTML 3 Adicionado o e o Jan 1997 ● Em 1990, o HTML herda do SGML as tags: , <h1>...<h6>, <ol>, <ul>, <li>; ● Em 1993 surge a proposta da tag <img>; ● Em 1995, inicia o trabalho com as CSS;

Slide 5

Slide 5 text

https:/ /bit.ly/3j4Ybi1

Slide 6

Slide 6 text

Fundamentos da Web

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Em 2004...

Slide 9

Slide 9 text

Nós tínhamos

Slide 10

Slide 10 text

Não tínhamos

Slide 11

Slide 11 text

Em 2006...

Slide 12

Slide 12 text

❤

Slide 13

Slide 13 text

Presente do HTML

Slide 14

Slide 14 text

HTML5 ● Trouxe semântica; ● Interatividade com e ; ● ; ● Local Storage; ● Novos elementos e atributos para formulários; ● Web Workers e Web Sockets; ● Geo Location; ● Oﬄine application.

Slide 15

Slide 15 text

Web APIs ● High Resolution Time API; ● User Timing API ● Navigation Timing API ● Network Information API ● Vibration API ● Battery Status API ● Page Visibility API

Slide 16

Slide 16 text

Houve uma revolução, mas...

Slide 17

Slide 17 text

A maioria de nós não sabe HTML

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Temos problemas educacionais na formação de devs

Slide 20

Slide 20 text

Você lembra como aprendeu HTML?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

“As pessoas precisam reaprender como escrever HTML. Só assim, conseguiremos tornar a web mais inclusiva.” parafraseando Reinaldo Ferraz

Slide 23

Slide 23 text

"Nós não temos um problema de acessibilidade. Nós temos um problema de falta de conhecimento básico em HTML." Nicolas Steenhout

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

EXEMp Exemplos

Slide 26

Slide 26 text

https:/ /www.htmhell.dev

Slide 27

Slide 27 text

EXEMp Qual o erro mais comum?

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Componente Select Vuetify

Slide 30

Slide 30 text

output…

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

#link-ou-botão?

Slide 34

Slide 34 text

#botao-fechar ⛔

Slide 35

Slide 35 text

#botao-como-link ⛔⛔

Slide 36

Slide 36 text

#legenda-lendária

Slide 37

Slide 37 text

#comofaz?

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Dicas

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Foque na linguagem

Slide 42

Slide 42 text

Ferramenta e apenas um recurso

Slide 43

Slide 43 text

Não existe desenvolvedor React.

Slide 44

Slide 44 text

Existe desenvolvedor JS

Slide 45

Slide 45 text

Futuro do HTML

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Perguntas?

Slide 48

Slide 48 text

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