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 file, table, image maps.
Nov 1995
HTML 3
Adicionado o e o
Jan 1997
● Em 1990, o HTML herda do
SGML as tags: ,
,
...
, , , - ;
● Em 1993 surge a proposta
da tag
![]()
;
● Em 1995, inicia o trabalho
com as CSS;
- ,
- ;
● Em 1993 surge a proposta
da tag
; ● 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;
● Offline 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