WDD 131: Fundamentos da Web Dinâmica

S03 - Tarefa: Página do País

Visão Geral

Nesta tarefa, você usará os conceitos das atividades de aprendizagem para design e desenvolvimento de uma página web. O assunto da página é um país ou lugar onde você mora, que visitou ou deseja visitar. Existem requisitos específicos, funcionais e de desenvolvimento para o layout, design e conteúdo da página.

Objetivos Adicionais de Aprendizagem do Curso

  1. Desenvolva páginas web responsivas que sigam as melhores práticas e usem HTML e CSS válidos.
  2. Demonstrar proficiência na sintaxe da linguagem JavaScript.
  3. Usar JavaScript para responder a eventos e modificar HTML de forma dinâmica.
  4. Demonstre as características de um membro eficaz da equipe, incluindo comunicação clara, colaboração, cumprimento de tarefas e cumprimento de prazos.

Tarefa

Projete e crie uma única página da web usando o seguinte wireframe como layout e guia de localização de conteúdo:

Projetos de Wireframe e Capturas de Tela de Exemplo
Wireframe na Visualização Móvel
Design de wireframe da página em visualização móvel
Wireframe na Visualização Mais Ampla
Design de wireframe da página em visualização mais ampla
Exemplo de captura de tela da página de Local em visualização móvel
Página de Exemplo na Visualização Móvel
Exemplo de captura de tela da página de Local em visão mais ampla
Página de Exemplo na Visualização Mais Ampla

Você pode criar seus próprios designs de wireframe gratuitos usando a aplicação online jGraph-Diagrams.net ou pode baixar e instalar o programa JGraph - (conteúdo em inglês) no seu computador. Existem muitas outras aplicações viáveis de design de wireframe, incluindo Moqups - (conteúdo em inglês). Observe que você precisará criar seus próprios designs de wireframe posteriormente no curso.

Instruções

Configuração de Arquivo e Pasta

  1. Na pasta do repositório local wdd131, adicione um novo arquivo HTML chamado "local.html".
  2. Adicione um ou mais arquivos CSS na subpasta apropriada.

    Você pode optar por organizar as consultas de mídia desta tarefa usando um arquivo CSS ou vários arquivos CSS.

  3. Adicione um arquivo JavaScript à subpasta apropriada.

HTML

  1. Inclua o documento HTML padrão e os elementos <head>.

    Consulte os padrões de desenvolvimento do curso se precisar consultar qualquer um desses padrões.

  2. Não se esqueça de vincular seu(s) arquivo(s) css.
  3. Referencie seu arquivo js usando um atributo defer.
  4. Crie a estrutura e o layout da página referenciando o wireframe e as capturas de tela de exemplo fornecidas acima.

    Importante: É necessário que você combine os componentes do wireframe e o posicionamento básico desses componentes conforme mostrado nos wireframes.

  5. As imagens "principais" devem utilizar o método de design responsivo srcset para apresentar imagens diferentes com base no tamanho da tela. Você pode optar por implementar esse requisito usando o elemento picture ou uma abordagem img básica. Certifique-se de que os assuntos e as dimensões das imagens sejam compatíveis com o assunto, o design e o layout da página.

Ativos

Você tem a opção de usar suas próprias imagens ou selecionar fotos de bancos disponíveis em pexels.com ou unsplash.com, bem como outros recursos.

Garanta a conformidade com os requisitos de licenciamento e forneça as credenciais apropriadas, se necessário. Muitas imagens nesses sites são gratuitas e não exigem atribuição, mas é sempre importante ler as condições de licenciamento.

  1. Use o formato de imagem WebP para as imagens principais.
  2. Use o formato de imagem SVG para o ícone do clima na visualização móvel.

    Um svg pode ser baixado pela maioria dos sites de serviços de ícones, como o Google Fonts Icons - (conteúdo em inglês).

  3. Use um emoticon ou equivalente para o ícone do clima ⛅ na visualização mais ampla, próximo ao título "Clima".

    O clima estará estático neste momento, então escolha uma imagem/ícone que corresponda às condições informadas.

CSS

Importante: Você é responsável por praticar bons princípios de design de alinhamento, contraste de cores, proximidade, repetição, espaços em branco e usabilidade geral em todo o seu trabalho.

  1. Selecione um esquema de cores que combine com o país ou local.

    Por exemplo, as páginas da web acima usam as cores da bandeira de Madagascar.

  2. A escolha da tipografia fica por sua conta.
  3. Os requisitos mínimos de estilo incluem:
    1. Correspondência dos layouts mostrados nos wireframes
    2. Usar uma consulta de mídia ou mais.
    3. Usar variáveis CSS globais.
    4. Usar um pseudoelemento para o ícone do clima na visualização grande, após o título "Clima".

JavaScript

  1. O rodapé da página deve incluir o ano atual e a data em que o documento foi modificado pela última vez.
  2. No seu arquivo JavaScript, forneça o código para dar suporte aos seguintes requisitos:
    1. Use JavaScript para exibir o fator de sensação térmica na seção "Clima" da página, conforme mostrado nos exemplos. O fator de sensação térmica deve ser calculado e exibido quando a página for carregada.
    2. Nesta etapa do curso, você deve definir variáveis que usam valores estáticos para temperatura e velocidade do vento, correspondendo aos valores estáticos exibidos no conteúdo da seção de clima.

      O próximo curso abordará como usar APIs de terceiros para obter dados meteorológicos em tempo real.

    3. Escreva uma função chamada "calcularSensacaoTermica" que retorna o fator de sensação térmica quando os argumentos necessários (temperatura e velocidade do vento) são processados. A função deve usar uma linha de código que retorna o resultado do cálculo da sensação térmica. Sua fórmula deve se basear nas unidades adotadas pelo local (°C ou °F).

      Usar IA para ajudar a determinar essa fórmula pode ser uma boa abordagem.

    4. Não chame a função calcularSensacaoTermica a menos que as seguintes condições sejam atendidas:
      Cálculos Viáveis de Sensação Térmica
      Métrica Imperial (Inglês)
      Temperatura <= 10 °C <= 50 °F
      Velocidade do vento > 4.8 km/h > 3 mph
      Se as condições não forem atendidas, exiba "N/A", que significa "não aplicável".

      No momento, seu código está usando entradas estáticas, mas você quer ter essa provisão codificada em preparação para usar entradas dinâmicas em tempo real.

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. Use CSS Overview do DevTools para verificar o contraste de cores.
  4. Gere o relatório do DevTools Lighthouse 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.

    Não se preocupe se o relatório de Melhores Práticas apresentar pouco uso de uma rede de distribuição de conteúdo. Estamos usando a biblioteca de mídia da Igreja de propósito.

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 o URL correto habilitado para o GitHub Pages. 
    https://seu-nome-de-usuario-do-github.github.io/wdd131/local.html