WDD 231: Desenvolvimento Frontend para Web I

S03 - Tarefa: Página Inicial da Câmara de Comércio

Visão Geral

Continue o projeto do curso de várias semanas da Câmara de Comércio, que se estenderá por algumas semanas, criando a página inicial da câmara. A página inicial dá as boas-vindas ao visitante com informações importantes e convites para interagir com a organização.

Instruções

Configuração

1. Adicione um novo arquivo chamado indice.html à pasta câmara como página inicial, usando o mesmo CSS que você desenvolveu na semana passada. O layout e o design do cabeçalho, navegação e rodapé serão os mesmos em todas as páginas do site.

   Dica: Use uma cópia da sua página diretorio.html como modelo para começar na página indice.html.

2. Adicione arquivos de recursos de suporte, incluindo imagens e scripts, conforme necessário, à medida que você desenvolve esta página. Certifique-se de que eles estejam salvos nos locais apropriados.

HTML

1. A página deve ter cabeçalho, navegação e rodapé consistentes.
2. Atualize o conteúdo do elemento head conforme necessário para a página inicial da câmara.
3. A área principal terá conteúdo específico para a página inicial. Os seguintes itens são necessários:
   • Imagem principal ("hero image", em inglês) - uma imagem grande e chamativa que aparece no topo de uma página web, geralmente ocupando toda a largura da tela ou uma grande parte dela - também chamada de "imagem herói" ou "hero image" em inglês.
   • Chamada para ação ("call-to-action", ou "CTA", em inglês) para se associar à câmara de comércio (página a ser criada futuramente). Uma chamada de ação é um elemento em uma página - geralmente um botão, link ou texto - que convida o visitante a realizar uma ação específica imediatamente.
   • Seção de eventos atuais
   • Seção de tempo
   • Seção contendo dois ou três empresas em "destaque"

CSS

1. Usando o feedback do que você enviou anteriormente, melhore a eficiência e a aplicação do CSS.
2. O layout do conteúdo principal da página deve mudar entre visualizações por dispositivos móveis e visualizações maiores.

JavaScript

1. Na seção de tempo, use dados meteorológicos reais para a localização da câmara usando a API do OpenWeatherMap.
   No mínimo, inclua:
   • A temperatura atual;
   • A descrição do tempo atual; e
   • Uma previsão da temperatura para 3 (três) dias devidamente rotulada.
2. Use sua fonte de dados JSON de membros da câmara para exibir cartões de anúncios "em destaque".
   • Exiba dois ou três membros
   • Os membros devem ser nível ouro ou prata
   • Exiba os "destaques" aleatoriamente cada vez que a página for renderizada
   • Exiba o nome da empresa, logotipo, telefone, endereço, site e nível de associação

Teste

1. Continue aprimorando as páginas atuais do projeto da câmara.
2. Certifique-se de que os links estejam funcionando entre as páginas.
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.

   Teste sua página em uma janela privada ou anônima do navegador ao usar o LightHouse.

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/