Padrões de Desenvolvimento do Curso
Visão Geral
Este curso se concentra no planejamento, design e desenvolvimento de sites responsivos usando HTML, CSS e JavaScript (que são as principais tecnologias da web), com atenção à usabilidade, acessibilidade e melhores práticas de desenvolvimento web frontend. Os objetivos de aprendizagem do curso também incluem o design e o desenvolvimento de documentos que seguem as melhores práticas de organização e manutenção. Exigir uma lista de verificação de padrões de desenvolvimento de frontend web ajuda a alcançar os resultados de aprendizagem ao fornecer feedback focado e uma abordagem disciplinada. Alguns itens na lista de verificação podem ser opinativos e dependentes, mas estar vinculado aos padrões básicos específicos de uma organização é comum nessa área de atuação.
✅ Lista de Verificação
- Todas as pastas e arquivos seguem as regras de nomenclatura do curso, que incluem apenas letras minúsculas, sem espaços e com significado (semânticas).
- A declaração do Tipo de Documento fica localizada na parte superior do documento
HTML.
<!doctype html> - O
atributo lang é fornecido.
<html lang="pt-br">
Head
-
Atributo Meta Charset
<meta charset="utf-8">
Elemento Meta Viewport
A janela de visualização do navegador é a área visível. O conteúdo do documento web renderizado provavelmente não é do mesmo tamanho e, portanto, as barras de rolagem são fornecidas pelo navegador. O elemento meta viewport considera a largura do dispositivo e dimensiona o conteúdo da melhor forma possível para uma determinada janela de visualização. Definir a janela de visualização para considerar o dispositivo ou agente do usuário oferece suporte ao design responsivo.
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width, define a largura da janela de visualização para a largura do dispositivo.
initial-scale=1define o nível de zoom inicial quando o usuário visita a página.
HTML
- O HTML é compatível com o W3C. Validador W3C
- Elementos Semânticos são usados.
- Não há links quebrados na página. Verificador de Links W3C - (conteúdo em inglês)
CSS
- CSS é compatível com W3C – validador W3C
- Seletores de ID exclusivos – Se um seletor de ID for usado, ele será exclusivo de uma página (é preferível o uso planejado do seletor de classe)
JavaScript
- Sem erros nem referências a funções JavaScript não utilizadas.
- Nenhuma saída para o console na versão publicada da página.
Outro
- As imagens são otimizadas para atender às necessidades de design do site.
- As proporções das imagens não são alteradas para nenhuma imagem.
- Cada imagem tem um atributo alt e ele é relevante para descrever a imagem não decorativa.
- Somente um título <h1> é usado em uma única página.
- Os títulos são usados na ordem correta para delinear a página.
- Nenhuma violação de contraste de cores no nível AA.
- O tamanho da página não excede 500 KB, conforme medido com base na carga de transferência na aba Network.
Outras Considerações
Estes itens não estão na lista de verificação, mas certamente merecem ser mencionados.
- Não deve haver violação relevante dos princípios de design referentes a alinhamento, proximidade, contraste, repetição e tipografia utilizável.
- A aparência visual de todas as páginas do site deve ser responsiva, uniforme e consistente.
- O site não deve ter erros ortográficos nem gramaticais.
- Todas as páginas devem ter o design responsivo testado, com texto de tamanho apropriado, links e sem rolagem para a direita nem espaços vazios.
- A página funciona conforme o esperado.
- A página entrega o conteúdo conforme o esperado.
- Erros e avisos de teste de acessibilidade são revisados
- Não use frameworks ou bibliotecas CSS de terceiros.