WDD 131: Fundamentos da Web Dinâmica

S04 — Tarefa: Aprimoramento do Álbum de Imagens

Visão Geral

Esta tarefa usa os conceitos apresentados nas atividades de aprendizagem para aprimorar uma tarefa anterior, incorporando o lazy loading (carregamento lento) e tornando a página da web responsiva à interação do usuário por meio da filtragem dos dados do templo exibidos.

Tarefa

Melhore uma tarefa de página da web anterior adicionando os novos recursos necessários e usando os dados do templo fornecidos.

Instruções

1. Faça uma cópia do seu arquivo templos.html e renomeie-o como "templos-filtrados.html"
2. Faça uma cópia de todos os arquivos CSS e JS associados e renomeie-os adequadamente, certificando-se de que eles funcionem com seu novo arquivo HTML.
3. No HTML, exclua todos os elementos HTML de figuras/imagens do templo usados na página original (você deveria ter 9 (nove) ou mais).

   Substituiremos esses números por HTML gerado dinamicamente, usando JavaScript.

4. Copie o seguinte array de código chamado "templos", que consiste em uma amostra de objetos de templos, e coloque o array em seu próprio arquivo JavaScript.
   Array de Objetos de Templos

           const templos = [
     {
       nomeDoTemplo: "Aba Nigeria",
       localizacao: "Aba, Nigéria",
       consagracao: "2005, 7 de agosto",
       area: 11500,
       urlDaImagem:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/aba-nigeria/400x250/aba-nigeria-temple-lds-273999-wallpaper.jpg"
     },
     {
       nomeDoTemplo: "Manti Utah",
       localizacao: "Manti, Utah, Estados Unidos",
       consagracao: "1888, 21 de maio",
       area: 74792,
       urlDaImagem:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/manti-utah/400x250/manti-temple-768192-wallpaper.jpg"
     },
     {
       nomeDoTemplo: "Payson Utah",
       localizacao: "Payson, Utah, Estados Unidos",
       consagracao: "2015, 7 de junho",
       area: 96630,
       urlDaImagem:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/payson-utah/400x225/payson-utah-temple-exterior-1416671-wallpaper.jpg"
     },
     {
       nomeDoTemplo: "Yigo Guam",
       localizacao: "Yigo, Guam",
       consagracao: "2020, 2 de maio",
       area: 6861,
       urlDaImagem:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/yigo-guam/400x250/yigo_guam_temple_2.jpg"
     },
     {
       nomeDoTemplo: "Washington D.C.",
       localizacao: "Kensington, Maryland, Estados Unidos",
       consagracao: "1974, 19 de novembro",
       area: 156558,
       urlDaImagem:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/washington-dc/400x250/washington_dc_temple-exterior-2.jpeg"
     },
     {
       nomeDoTemplo: "Lima Peru",
       localizacao: "Lima, Peru",
       consagracao: "1986, 10 de janeiro",
       area: 9600,
       urlDaImagem:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/lima-peru/400x250/lima-peru-temple-evening-1075606-wallpaper.jpg"
     },
     {
       nomeDoTemplo: "Cidade do México, México",
       localizacao: "Cidade do México, México",
       consagracao: "1983, 2 de dezembro",
       area: 116642,
       urlDaImagem:
       "https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/mexico-city-mexico/400x250/mexico-city-temple-exterior-1518361-wallpaper.jpg"
     },
     // Adicione mais objetos de templos aqui...
   ];

   Aqui está um recurso para dados de templos: ChurchofJesusChristTemples.org - (conteúdo em inglês)

5. Adicione 3 (três) ou mais objetos de templos ao seu array, certificando-se de corresponder as propriedades fornecidas com pares de chave-valor correspondentes e relevantes.
6. Faça loop com o array e crie "cartões de templo", para cada templo exibindo:
   • O nome do templo.
   • A localização do templo.
   • A data em que o templo foi consagrado.
   • A área total do templo em pés quadrados.
   • A imagem fornecida do templo (endereço absoluto), certificando-se de incluir um valor alt apropriado, como o nome do templo.
   • Use carregamento lento nativo (native lazy loading) para cada imagem de templo.

   

7. Responda aos itens do menu de navegação principal filtrando e exibindo os templos da seguinte maneira:
   • Antigos – templos construídos antes de 1900
   • Novos – templos construídos depois de 2000
   • Grandes – templos maiores que 90.000 pés quadrados
   • Pequenos – templos menores que 10.000 pés quadrados
   • Página Inicial – exibe todos os templos armazenados no array.

   Demonstração em Vídeo: ▶️ Desenvolvendo um Filtro de Array

8. Como sempre, garanta que o ano dos direitos autorais no elemento footer e a data da última modificação sejam exibidos por meio de uma referência JavaScript válida.

Teste

1. Sempre verifique seu trabalho renderizando a página localmente usando o Live/Five Server no VS Code.
2. 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.
3. Gere o relatório do DevTools Lighthouse no navegador e execute diagnósticos de Acessibilidade, Melhores Práticas e SEO nas visualizações de dispositivos móveis e desktop.
   É melhor testar sua página em uma janela privada ou anônima do navegador ao usar o DevTools Lighthouse.

   Observação: Usar referências absolutas a imagens na rede de distribuição de conteúdo da Igreja pode levar a alguns problemas de desempenho menos favoráveis. Você pode ignorar isso ou prosseguir e criar cópias locais de imagens de templos otimizadas. Lembre-se dos direitos autorais.

Auditoria e Envio

1. Confirme (commit) em seu repositório local e envie (push), ou carregue, seu trabalho para seu repositório wdd131 habilitado para GitHub Pages no GitHub.
2. Use esta ☑️ ferramenta de auditoria para verificar padrões e requisitos básicos de HTML e CSS.
3. Compartilhe seu trabalho publicando seu URL no fórum semanal do curso no Microsoft Teams e comente o trabalho de seus colegas dando feedback construtivo.
4. Volte ao Canvas e envie seu URL habilitado para o GitHub Pages. Exemplo:

   https://seu-nome-de-usuario-do-github.github.io/wdd131/templos-filtrados.html