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. Uma lista de verificação de padrões 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,
<!doctype html>, está localizada na parte superior do documento HTML. - O atributo lang HTML,
<html lang="en-US">, é fornecido.
Head
- O atributo Meta Charset é usado.
<meta charset="utf-8"> - O Elemento Meta Viewport,
<meta name="viewport" content="width=device-width, initial-scale=1">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.
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. - Elemento Title
- Elemento Meta Description
- Elemento Meta Author
- Referências de Arquivo Externas CSS são usadas e na ordem correta.
HTML
- O HTML é compatível com o W3C. Validador W3C
- Elementos Semânticos são usados. Por que isso é importante?
- Não há links quebrados na página. Verificador de Links W3C
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.
- Um título
<h1>é necessário e há apenas uma instância em um documento.O título <h1> deve representar com precisão o assunto principal ou a finalidade da página e estar alinhado ao conteúdo de <title> do documento. Ele deve resumir sucintamente o conteúdo e conter uma indicação clara do que se trata a página. Embora os títulos <h1> possam ser estilizados usando CSS para hierarquia visual, seu objetivo principal é dar significado semântico ao conteúdo.
- Os títulos
<h1>-<h6>são usados na ordem correta para delinear a página.Use elementos de título (<h2> a <h6>) para criar uma hierarquia lógica de conteúdo. Os títulos devem ser aninhados adequadamente para refletir a estrutura e a relação entre as diferentes seções da página. – Níveis de Títulos Deque University
- Nenhuma violação de contraste de cores no nível AA. Use a ferramenta de desenvolvimento do navegador (DevTools), ▶️ CSS Overview (vídeo), ou use uma ferramenta como o Contrast Checker da siegemedia para verificar o contraste de cores.
- Certifique-se de que o tamanho da página permaneça abaixo de 500 KB, conforme medido pelo indicador de carga de transferência de rede do DevTools.
- Siga os princípios de design como alinhamento, proximidade, contraste, repetição e tipografia utilizável.
- Mantenha uma aparência atrativa em todas as páginas, garantindo capacidade de resposta, uniformidade e consistência.
- Garanta a ausência de erros ortográficos e gramaticais em todo o site.
- Teste todas as páginas para um design responsivo, garantindo texto e links de tamanho apropriado, sem rolagem horizontal nem espaço vazio desnecessário.
- Verifique se a página funciona corretamente e 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 neste curso.