WDD 231: Desenvolvimento Frontend para Web I

S06 - Projeto: Descrição do Projeto de Site Individual

Visão Geral

Este NOVO projeto de site individual é uma avaliação abrangente da proficiência de cada estudante em atingir os objetivos de aprendizagem do curso. A tarefa dos estudantes é criar um site de três páginas, usando uma abordagem atual com HTML, CSS e JavaScript. O objetivo é desenvolver um site dinâmico e responsivo que integre fontes de dados, respeitando os padrões de acessibilidade, usabilidade e desenvolvimento.

Requisitos do Projeto

Este projeto será criado e desenvolvido por você, sendo de sua responsabilidade. Você não pode expandir nem enviar o projeto de aprendizagem da câmara de comércio. É proibido consultar e trabalhar com outras pessoas. O conteúdo e o assunto são derivados do tópico proposto por você, e o site deve ser completo, sem espaços reservados.

Localização e Hospedagem

• Seu projeto deve ser armazenado em sua própria subpasta dentro do seu repositório wdd231 no GitHub. O nome deve ser algo como "final" ou "projeto final".
• Atualize o link "Final" na barra de navegação da sua página da semana 01 para apontar para o seu projeto final da semana 06.

Nomenclatura de Arquivos e Pastas

• Todos os arquivos e pastas seguem as Convenções de Nomenclatura do curso: — letras minúsculas, sem espaços, sem acentuação, padrão, significativo (semântico), etc.

Padrões de HTML

• Estruture as páginas com marcação HTML válida e semântica. Isso inclui o uso adequado dos elementos header, nav, main e footer.
• Cada página deve atender aos Padrões de Desenvolvimento básicos.

Padrões de CSS

• Use CSS válido que não contenha declarações e regras não utilizadas ou desnecessariamente duplicadas.

Princípios de Design e Layout

• Princípios de Design: O design, em todas as visualizações, deve demonstrar uma aparência consistente e aderir aos princípios de web design referentes a proximidade, alinhamento, repetição, contraste e uso adequado de espaços em branco.
• Navegação Responsiva: Links em telas pequenas se expandem ao clicar em um ícone de hambúrguer, e telas grandes exibem links horizontalmente.
• Wayfinding: Utilize wayfinding com os principais links de navegação do site.
• Layout Responsivo: O layout de cada página deve ser responsivo a dispositivos móveis (320px) (retrato e paisagem) e visualizações em telas grandes, sem rolagem horizontal.
• Tamanho da Página: Certifique-se de que o tamanho de cada página esteja abaixo dos 500 KB de transferência total de dados de um cache vazio.
• Acessibilidade: O layout e o design devem oferecer suporte à acessibilidade.
• Usabilidade: O site deve ser utilizável e oferecer uma experiência positiva ao usuário.

Conteúdo

• Requisitos Básicos: São necessárias 3 (três) páginas no total. Isso inclui a página inicial, chamada "indice.html".
• Objetivo: O conteúdo deve ser coeso e relevante à finalidade do site, conforme descrito no seu planejamento.
• Marca com Favicon: Adicione um favicon a cada página, garantindo que ele seja consistente com a marca, o logotipo ou o design geral do site.
• Títulos HTML Semânticos: Use tags title distintas e descritivas para refletir com precisão o conteúdo de cada página.
• Descrições Otimizadas para SEO: Implemente tags meta name="description" exclusivas que sejam concisas e relevantes para cada página, otimizando-as para mecanismos de busca.
• Atribuição de Autor: Inclua uma tag meta name="author" em cada página.
• Otimização de Compartilhamento em Redes Sociais: Implemente metadados de redes sociais necessários, como tags de Open Graph, para controlar como o conteúdo é exibido quando compartilhado nessas redes.

Imagens

• Todas as imagens devem ser otimizadas para a web e usar proporções intrínsecas.
• Use uma técnica de carregamento lento para dar suporte ao design progressivo e aumentar o desempenho da página.

Formulário HTML

• Utilize um formulário HTML que atenda aos padrões apresentados no curso.
• Exiba os dados do formulário em uma página de ação do formulário. (A página de ação do formulário não é contabilizada para o requisito de três páginas do site.)

Funcionalidade e Componentes do JavaScript

Seu site deve incorporar recursos e conteúdo dinâmicos usando JavaScript.

As seguintes funcionalidades e componentes são necessários:

• Busca de Dados: Recupere dados de uma fonte externa ou de um arquivo JSON local.
  • Use a Fetch API para fazer requisições assíncronas (demonstrado no vídeo).
  • Incorpore blocos "try...catch" para processamento robusto de erros de operações assíncronas (demonstrado no vídeo).
  • Processe a resposta adequadamente (por exemplo, analisando JSON).
• Geração de Conteúdo Dinâmico:
  • Gere e exiba dinamicamente pelo menos 15 (quinze) itens de sua fonte de dados.
  • Para cada item, exiba pelo menos 4 (quatro) propriedades/valores de dados distintos.
• Armazenamento Local: Implemente o armazenamento local para manter dados no lado do cliente (por exemplo, preferências do usuário, estado da aplicação).
• Diálogos Modais:
  • Implemente pelo menos uma estrutura de diálogo modal para interação do usuário (por exemplo, exibir mais detalhes, confirmação de ações).
  • Garanta que o modal seja acessível e siga as melhores práticas para a experiência do usuário.
• Manipulação de DOM e Processamento de Eventos: Implemente JavaScript para interagir com o Modelo de Objeto de Documento (DOM). Isso deve incluir:
  • Seleção de elementos usando métodos apropriados (por exemplo, "querySelector", "querySelectorAll").
  • Modificação de propriedades, estilo e/ou conteúdo do elemento.
  • Inclusão de receptores de eventos em elementos e resposta apropriada aos eventos (por exemplo, "click", "submit", "change").
• Métodos de Array: Utilize pelo menos um método de array apropriado (por exemplo, "map", "filter", "reduce", "forEach") para processar dados de forma eficiente.
• Template Literals: Utilize template literals para construção de strings, principalmente ao lidar com conteúdo dinâmico ou strings de várias linhas.
• Módulos ES: Estruture seu código JavaScript usando Módulos ES para demonstrar a organização adequada do código e a modularidade.

Profissionalismo

• Revise com Atenção: Corrija todos os erros de ortografia e gramática.
• Dê Crédito a Fontes: Se você usou conteúdo externo, adicione um link de "Atribuições" ao seu rodapé.

  As imagens e os textos podem ser retirados de outras fontes, que precisarão ser citadas em uma página de atribuição de recursos, com o link no rodapé da página inicial. A página de atribuições não precisa ser estilizada.

Demonstração e Reflexão em Vídeo

Grave um vídeo curto e objetivo que capture sua tela enquanto você demonstra como atendeu a determinados requisitos de JavaScript. Você não precisa falar sobre mais nada, exceto demonstrar onde e como você atendeu aos requisitos abaixo.

Requisitos de Especificações para o Vídeo

• O que Capturar: Use sua câmera mostrando seu rosto enquanto você grava sua tela.
• Comprimento: Grave um vídeo de 3 a 5 minutos. Concentre-se nas demonstrações necessárias e nada mais.
• Localização: Envie seu vídeo concluído para o Youtube, Loom ou para uma plataforma semelhante. Certifique-se de que o vídeo seja público para que os avaliadores possam assisti-lo.
• Ferramentas de Gravação: Use a ferramenta de captura e edição de vídeo de sua escolha.
  Algumas ferramentas de gravação de vídeo que oferecem opções gratuitas:

  • ClipChamp
  • Loom
  • OBS Studio
  • QuickTime Player (macOS)
• Coloque um link para o seu vídeo no rodapé de cada página do seu site, para que ele possa ser encontrado com facilidade pela equipe de avaliação.

Requisitos de Conteúdo do Vídeo

• Como você usou sua integração de API/Dados e demonstrou o resultado.
• Como você usou uma funcionalidade assíncrona com um bloco try.

Teste

• Use esta ferramenta de auditoria de página. A auditoria será usada pelos avaliadores na sua avaliação.
• Teste seu site em vários navegadores e dispositivos.
• Use o DevTools do navegador para verificar erros de tempo de execução do JavaScript.
• Use CSS Overview do DevTools para verificar o contraste de cores.
• Gere o relatório do Lighthouse do DevTools e execute diagnósticos de acessibilidade, melhores práticas e SEO (otimização de mecanismos de busca) nas visualizações de dispositivos móveis e desktop.
• Certifique-se de que seu site possa ser aberto pelos avaliadores.
• Certifique-se de que seu vídeo esteja disponível para os avaliadores.

Envio

Volte ao Canvas e envie:

1. URL do seu projeto habilitado para o GitHub Pages (github.io)
2. Certifique-se de que haja um link para o vídeo no rodapé do site!