[Palestra Anhanguera SBC] - Tudo Termina em HTML

Slides usados na palestra que apresentei na Semana do Curso de Análise e Desenvolvimento de Sistemas da Faculdade Anhanguera de São Bernardo do Campo em 12/11/2024.

Transcript

1. TUDO TERMINA EM HTML
2. Agenda Contextualizando Marcação Microdata Acessibilidade Progressive Enhancement Mergulhe ainda mais Conclusão
3. Contextualizando PARA QUE SERVE A INTERNET? Compartilhar informação.
4. Contextualizando O QUE É INFORMAÇÃO? É o resultado do processamento, manipulação e organização de dados.
5. Contextualizando COMO ORGANIZAMOS A INFORMAÇÃO? Categorização, Linear, Tempo, Departamentos…
6. Contextualizando PARA QUE SERVE O HTML? É básico, mas poucos param para pensar sobre.
7. Contextualizando HYPER TEXT MARKUP LANGUAGE Informação organizada não linear, seguindo os princípios de hipertexto e marcação.
8. MARCAÇÃO Possibilita dar significado para os meios de acesso, como: leitores de tela, robôs de buscas e dispositivos.
9. Marcação <h1> TÍTULO </h1> <p> parágrafo </p>
10. Contextualizando
11. Marcação QUAL A SEMÂNTICA DO DIV?
12. NENHUMA! A tag div não tem função semântica.
13. Contextualizando
14. Marcação MICRODATA Serve para melhorar semântica para as máquinas.
15. <p> Olá, eu me chamo Lucas Oliveira, sou brasileiro e trabalho na Agência Nexo como programador. </p>
16. <p> Olá, eu me chamo <strong>Lucas Oliveira</strong>, sou brasileiro e trabalho na <strong>Agência Nexo</strong> como <strong>programador<strong>. </p>
17. Documentação: https://schema.org/Person SEMÂNTICA COM MICRODATA
18. Documentação: https://schema.org/Person SEMÂNTICA COM JSON-LD
19. ACESSIBILIDADE
20. Acessibilidade PROGRESSIVE ENHANCEMENT Trabalha junto com conceito de tolerância a falhas, que prática é como o sistema continua operando.
21. NÍVEIS E TOLERÂNCIA <video src="video.ogg" controls> Texto de fallback. </video> 1 FALLBACK BÁSICO: conhecido e aceito por vários dispositivos. Pode ser usado pelo atributo ALT ou direto pela tag.
22. NÍVEIS E TOLERÂNCIA <header> … </header> <aside> … </aside> <footer> … </footer> 2 SEMÂNTICA DO HTML: cada elemento HTML tem sua função e principalmente seu significado, possibilitando aumentar o significado de qualquer informação exibida pelo HTML. Documentação: https://html.spec.whatwg.org/multipage/#toc-semantics
23. NÍVEIS E TOLERÂNCIA <!--if IE 6 > <link rel="stylesheet" type="text/css" href="apenas-para-ie6.css"> <!endif --> <!--if IE 7> <link rel="stylesheet" type="text/css" href="apenas-para-ie7.css"> <!endif--> 3 Camada de experiência é a camada visual, aqui o CSS, imagens, áudios e vídeos.
24. NÍVEIS E TOLERÂNCIA • Documentação oficial: https://www.w3.org/TR/wai-aria • Guia do Governo: https://www.gov.br/ds/guias/wai-aria • Movimento Web Para Todos: https://mwpt.com.br 4 É uma extensão da semântica dos elementos do HTML, recebendo as recomendações da WAI-ARIA que é a Iniciativa de Acessibilidade na Web.
25. GOSTOU? MERGULHE AINDA MAIS
26. TEM MUITO O QUE ESTUDAR? Todo dia aparecem novidades, um amigo fala sobre uma tecnologia, você algo em uma palestra que fala sobre a próxima onda de tecnologia. Faça sua escolha e tenha foco.
27. CONCLUSÃO Tudo começa e termina no HTML, é ponto focal de tudo que faz em desenvolvimento web. Não o negligencie, o HTML pode te dar muito trabalho.
28. Obrigado! Lucas Oliveira https://speakerdeck.com/lucasapos