WDD 231: Desenvolvimento Frontend para Web I

S05 - Tarefa: Página Sobre a Câmara

As tarefas do site da câmara de comércio foram planejadas para serem feitas em grupo, e cada integrante do grupo é responsável pelo seu próprio site da câmara.

Visão Geral

Esta é a última semana do projeto da câmara de comércio. Conclua o site criando e desenvolvendo a página sobre a câmara, que promove a área em que sua câmara de comércio está localizada. A página tem como finalidade fornecer informações factuais e representativas sobre a área, incluindo dados demográficos e características que atraiam potenciais membros da câmara e visitantes.

Instruções

Nesta tarefa, você usará grid-template-area para criar um layout responsivo para telas pequenas, médias e grandes.

  1. Use o modelo de página do seu site para criar uma nova página chamada "discover.html" na pasta câmara.
  2. Como sempre, preserve o conteúdo do cabeçalho, da navegação e do rodapé.
  3. Use o CSS que você já criou e adicione ou modifique regras e declarações conforme necessário. Caso prefira, você poderá adicionar um arquivo midia.css com consulta de mídia.
  4. Escolha 8 itens de interesse na sua área.
  5. Localize e redimensione uma foto para cada item de interesse. As fotos devem ter cerca de 300 px de largura por 200 px de altura e ser salvas no formato webp
  6. Crie ou encontre um nome, endereço e descrição para cada um dos 8 itens.
  7. Armazene essas informações em um arquivo no formato JSON na pasta "dados" do seu site.
  8. Crie 8 cartões usando um h2 para o título, uma tag de figura para a imagem, uma tag de endereço para o endereço, um parágrafo para a descrição e um botão intitulado "saiba mais".
  9. Use áreas de grade nomeadas para dispor os cartões em telas pequenas (320 px a 640 px de largura), telas médias (641 px a 1024 px) e telas grandes (1025 px e acima).

    Assista: Usando Áreas de Grade Parte 1

    Assista: Usando Áreas de Grade Parte 2

  10. Usando localStorage para armazenar a data do último acesso pelo cliente, exiba uma das três mensagens possíveis sobre o tempo entre os acessos à página na área de conteúdo da barra lateral.

    Há muitas opções para a disposição das informações sobre o usuário que acessou a página. Considere a finalidade e a experiência do usuário ao fazer sua escolha. Algumas opções incluem sobreposição ou área de mensagem que pode ser fechada, incorporada à área de conteúdo ou ao rodapé.

    • Se for o primeiro acesso do usuário, exiba "Boas-vindas! Entre em contato conosco caso tenha alguma dúvida.".
    • Se o intervalo entre os acessos for inferior a um dia, exiba "Já voltou?" Que legal!".
    • Caso contrário, exiba o número de dias em uma mensagem como esta: "Seu último acesso foi há n dias.", em que n é o número inteiro real de dias entre os acessos. Se o número de dias for 1, altere o idioma para "dia", e não "dias".

    Considere usar o objeto localStorage para armazenar a data do último acesso à página. Isso permitirá que você compare a data atual com a data do último acesso. Além disso, armazenar a data atual usando Date.now() permite que a data seja armazenada em milissegundos.

    Código de Exemplo: Cálculo de Datas (Código de demonstração para calcular e exibir os dias até o Natal)

  11. Use um efeito de propriedade CSS sempre que um usuário passar o mouse sobre as imagens na galeria. O design do efeito fica a seu critério. Não use esse efeito em imagens na visualização móvel.

    Código de Exemplo: CSS Grid - Colunas Automáticas de Grade e Efeitos de Imagem (Efeitos como misturas, sombras, opacidade, filtros, etc.)

  12. Valide os links em todo o site da câmara e continue aprimorando todas as páginas de acordo com o feedback sobre as tarefas que você enviou e comentários de colegas.

Teste

  1. Continue aprimorando cada página do projeto do site da câmara em que você trabalhou até agora no curso, corrigindo problemas de padrões de desenvolvimento.
  2. Certifique-se de que todos os links estejam funcionando entre as páginas existentes.
  3. Verifique seu trabalho de tempos em tempos, renderizando localmente no navegador usando a ferramenta Live Server no VS Code.
  4. Desenvolva seu trabalho seguindo os Padrões de Desenvolvimento do curso.
  5. Use o DevTools do navegador para verificar erros de tempo de execução do JavaScript no console ou clique no ícone vermelho de erro no canto superior direito do DevTools.
  6. Use CSS Overview do DevTools para verificar o contraste de cores.
  7. Gere um relatório do Lighthouse no DevTools, nas categorias Acessibilidade, Melhores Práticas e SEO para as visualizações em dispositivos móveis e desktop.
  8. Execute uma análise nas páginas do site da câmara para verificar se cada uma delas carrega com um tamanho de transferência de dados menor que 500 KB quando o cache é limpo.

Auditoria e Envio

  1. Adicione (add), confirme (commit), envie (push) e sincronize (pull) as alterações do seu trabalho local com o repositório wdd231 habilitado para o GitHub Pages.
  2. Use esta ☑️ ferramenta de auditoria para verificar partes da sua página em relação aos padrões e alguns requisitos.
  3. Compartilhe o URL no canal do seu grupo e veja o que os demais integrantes enviaram.
  4. Volte ao Canvas e envie o URL correto habilitado para o GitHub Pages. 
    https://nome-de-usuario.github.io/wdd231/camara/sobre.html