Frontend Init @ Ifood

Semântica e boas práticas de desenvolvimento de interfaces

Transcript

1. HTML não é bagunça! Semântica e boas práticas no desenvolvimento de interfaces
2. Bruna Gil • Desenvolvedora de Software (Front-End) @ Praxio • ex-aluna da {reprograma} • Formada em Relações Internacionais • Apaixonada por ler, viajar e aprender coisas novas
3. O que passava pela minha cabeça quando decidi que iria programar? Por onde eu começo? O que é importante saber para ser uma front-end? Qual é o jeito mais fácil de começar? Qual linguagem devo aprender primeiro?
5. HTML • Linguagem de Marcação de Hipertexto • Estrutura • Dois grandes objetivos: ◦ Traduzir os conteúdos que o ser humano interpreta facilmente para uma linguagem que a Web entende ◦ Exibir os conteúdos de forma organizada
8. Como sei que meu código não tá legal? • Outros programadores entendem meu código? • Os programas estão lendo meu código da forma correta? • Os usuários estão interagindo bem com meu produto final? • Qualquer pessoa conseguiria ler/navegar tranquilamente no meu site/software?
9. Como resolver esse problema?
10. Semântica = Significado das coisas
11. E por que o HTML (semântico) tem a ver com isso?
12. • Organiza e melhora o processo de desenvolvimento de interfaces (sites ou softwares) • Facilita a manutenção, reduzindo custos • Aprimora a qualidade do produto final • SEO
13. Boas práticas no desenvolvimento de interfaces
14. 1. Saiba o que o HTML pode fazer por você • Compreender o HTML não é dominá-lo completamente! • Semântica estrutural (<header>, <nav>, <main>, <article>, <footer>, <aside>, etc.) • Semântica textual (<a>, <em>, <strong>, <cite>, <q>, <time>, <mark>, etc.) • Aprimore seu código e troque uma ideia com a comunidade
15. 2 . Planeje, desenhe e (depois!) codifique internetingishard.com
16. 3. Repense o uso da tag <div> para tudo
17. seekbrevity.com
18. Ausência de significado Ausência de hierarquia Diz muito, mas não diz nada
19. Tags com significado claro Hierarquia visível É possível imaginar o site sem nem ao menos ver sua renderização...
20. 4. Entenda os conceitos de Indentação e Hierarquia • Indentação é um recurso estético importante para a manutenção e legibilidade do código • Hierarquia é o que “determina” a prioridade de uma marcação ◦ Herança e parentesco entre elementos - Essencial para quando o CSS e o JavaScript entre em cena!
22. 5. Saiba extrair o melhor de cada atributo! • Id é único! • Use “aspas duplas” para definir atributos • Entenda como tirar o máximo proveito dos atributos globais • Input é muito mais do que “type=text” • Atributos sem valor fazem mágica sem JavaScript (required, disabled, readonly, etc.)
24. 6. Preocupe-se com a acessibilidade • O acesso a uma página web ou aplicação deve ser para todos, sem exceção. • Navegação com o teclado, o uso do tab e do atributo tabindex • Tag <label> • Atributo “alt” na tag <img> merece uma ótima descrição • Atributo “title” na tag <a> explica que raios é o seu botão ‘clique aqui’
25. Tabindex Title na tag <a>
26. Referências • HTML semântico; Lista de Elementos do HTML; Atributos Globais; Atributos da tag <Input>; boas práticas de acessibilidade; 20 boas práticas de HTML; padrão de código para desenvolvimento front-end; uso do tabindex; • Ferramentas: Aponta possíveis erros na sua estrutura HTML, retorna a estrutura hierárquica que ele enxerga no seu HTML • Fonte 1, 2, 3, 4, 5
27. Obrigada! :) github.com/brunagil @brunaggil bruna.brgil@gmail.com