WDD 231: Desenvolvimento Frontend para Web I

S02 - Tarefa: Página do Diretório da Câmara de Comércio

Visão Geral

Para o projeto da Câmara de Comércio, comece pela página do diretório. Na semana passada, você escolheu uma cidade ou região como base do seu projeto e conheceu o objetivo e escopo do projeto da câmara. Nesta tarefa você trabalhará no layout do site e nos requisitos específicos para o conteúdo da página do diretório da câmara de comércio.

Instruções

Leia o Escopo do Projeto

• Leia a descrição do projeto da câmara de comércio
• Leia o documento de planejamento do site para o projeto da câmara de comércio.

Configuração de Arquivo e Pasta

1. Adicione uma nova pasta ao seu diretório principal wdd231, chamada "camara".

   A pasta camara conterá todas as páginas e ativos do projeto. Esta subpasta é como um site próprio e independente.

2. Na nova subpasta camara, adicione um novo arquivo chamado "diretorio.html".
3. Adicione as subpastas comuns à pasta camara para armazenar e organizar as imagens, CSS e JavaScript.

HTML

1. No seu documento diretorio.html, adicione o head padrão e o conteúdo meta com elementos title, description e author válidos.
2. Crie e inclua um favicon para o site da sua câmara.
3. Adicione as configurações de meta de redes sociais do Facebook para:
   • título
   • descrição
   • imagem
   • url
   Testando Metadados de Redes Sociais

   Você pode testar os metadados na sua página usando a ferramenta Depurador de Compartilhamento do Facebook. O depurador permite que você veja as informações usadas quando o conteúdo do seu site é compartilhado no Facebook, Messenger e outros lugares.

   1. Acesse a ferramenta Depurador de Compartilhamento do Facebook. (Você pode mudar o idioma da página no rodapé ao lado direito.)
   2. Digite o URL da sua página e clique no botão Depurar.
   3. Se for a primeira vez, clique em Buscar informações novas que é exibido em uma caixa de aviso.

      

   4. Aqui está um link para um exemplo de relatório. Observe, na parte inferior do relatório, as propriedades de Open Graph que foram encontradas.
   5. A imagem referenciada está localizada no repositório do GitHub. Se você vincular uma imagem de uma fonte externa, seu site poderá ser bloqueado por ser malicioso.
4. Use o planejamento do site para criar o conteúdo e o layout necessários para o cabeçalho, a navegação e o rodapé. Esses itens devem ser consistentes em todas as páginas do projeto.
5. O rodapé deve conter informações de contato e outras informações de desenvolvimento, conforme mostrado nos wireframes do planejamento do site. Inclua seu nome completo, WDD 231 e a data da última modificação da página, que será gerada automaticamente usando JavaScript.
6. O conteúdo principal da página do diretório exibirá uma lista de membros como uma grade de "cartões", ou como uma lista de itens de linha, dependendo da seleção do usuário.

CSS

1. Crie um estilo para sua página, usando o esquema de cores planejado. Lembre-se de que o estilo será usado em todas as páginas do seu projeto de câmara. É normal que você faça ajustes à medida que trabalha no projeto ao longo do curso.

   A página do diretório é a primeira página do projeto. É importante acertar o layout e o design antes de passar para as outras páginas. A página do diretório será usada como modelo para as demais páginas do projeto.

2. Use um CSS de normalização ou redefinição. Certifique-se de vinculá-lo antes de qualquer outro arquivo CSS no elemento head.
3. Todas as páginas do site devem ser responsivas de 320px a visualizações maiores, sem rolagem horizontal.
4. O menu de navegação principal responsivo deve incluir todas as páginas listadas no planejamento do site.

JavaScript

1. Crie um arquivo chamado "membros.json" e armazene-o em uma nova pasta chamada "dados" na pasta camara do seu projeto.
2. Crie um arrays de pelo menos 7 (sete) empresas, em que cada entrada inclua os seguintes campos:
   • Nomes
   • Endereços
   • Números de telefone
   • URLs de sites
   • Nomes de arquivos de imagem ou ícone
   • Nível de associação (1=membro, 2=prata, 3=ouro)
   • Outras informações que você considerar apropriadas
3. Com a fonte de dados JSON, exiba as informações do membro na página usando o método fetch e a funcionalidade async/await.
4. Permita que o usuário alterne entre uma visualização do tipo "grade" dos cartões de membros ou uma lista simples de uma coluna.
   Exemplo de Código: Seleção de Exibição de Layout do Usuário – Uma demonstração em JavaScript de como alternar entre visualização em grade e em lista.

   Exemplo: Capturas de Tela da Página do Diretório

5. Usando JavaScript, exiba o ano dos direitos autorais no rodapé e a data da última modificação.

Teste

1. Verifique seu trabalho de tempos em tempos, renderizando localmente no navegador usando a ferramenta Live 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. Use CSS Overview do DevTools para verificar a acessibilidade do contraste de cores.
4. 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. Corrija quaisquer problemas encontrados que estejam sob seu controle.

   É melhor testar sua página em uma janela privada ou anônima do navegador.

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/diretorio.html