WDD 130: Fundamentos da Web

S05 Projeto de Rafting: Página Fale Conosco

Visão Geral

Uma nova página será adicionada ao site de rafting. Esta página incluirá informações de contato e um formulário de contato que o usuário pode enviar para fazer perguntas sobre a empresa e seus serviços.

Instruções

Configuração de Arquivo/Cópia

Não comece do zero. Copie a página sobre.html existente e a renomeie para contato.html e depois modifique essa nova página.

  1. Clique com o botão direito do mouse na página sobre.html localizada no diretório wwr e selecione Copiar para copiar o arquivo para a memória.
  2. Clique com o botão direito do mouse no diretório wwr e selecione Colar, que o copiará para o diretório wwr com o nome "sobre copy.html".
  3. Clique com o botão direito do mouse neste novo arquivo e selecione Renomear. Isso destacará apenas o nome do arquivo. Renomeie-o para "contato.html".

Prepare a Nova Página

  1. Altere as informações relevantes nesta página na seção head, incluindo title e meta description.
    Não ignore o título e a descrição. Que conteúdo essas partes devem incluir? Pense na finalidade da página e como ela aparecerá para os usuários quando usada como ponto de entrada para o site.
  2. Use os mesmos elementos de cabeçalho, navegação e rodapé.
    Por que devemos deixar o cabeçalho, a navegação e o rodapé iguais?
  3. Remova o conteúdo não relevante dentro do elemento main.

Design

Utilize o seguinte wireframe como guia para o layout da página Fale Conosco (contato.html):

Wireframe da Página Fale Conosco
Wireframe da Página Fale Conosco
  1. A página Fale Conosco deve ter no mínimo o seguinte conteúdo:
    1. O layout e o conteúdo do seu cabeçalho, navegação e rodapé devem ser os mesmos das outras páginas do site de rafting.
    2. Informações da empresa, incluindo:
      • endereço
      • número(s) de telefone
      • e-mail
      • pequeno mapa do google incorporado

        Vídeo: ▶️ Incorporando Um Mapa do Google

        Certifique-se de remover o CSS inline style="border:0" que é inserido automaticamente no código iframe do Google Maps. Se você quiser estilizar o iframe, faça isso no seu arquivo CSS.

        O Google Maps não conta para a avaliação final ao medir o tamanho total da página (quilobytes transferidos por página).

    3. Imagens de perfil de funcionários com legendas que incluam os cargos de pelo menos três funcionários.
    4. Um formulário HTML que solicita o seguinte:
      • nome do usuário
      • endereço de e-mail do usuário
      • finalidade da mensagem, que permite ao usuário escolher entre as opções listadas abaixo.
        Use botões de opção radio <input type="radio"> para este requisito de entrada de formulário.
        • Consulta Geral
        • Pergunta sobre Reserva
        • Sugestão de Site
      • mensagem
      • caixa de seleção rotulada "Quero receber a newsletter mensal"
      • um botão de envio devidamente estilizado e rotulado, com type definido como submit.

        Usar texto claro e descritivo nos botões de envio pode ajudar os usuários a entender a finalidade do formulário e o que eles precisam fazer para preenchê-lo. Isso também garante que usuários com leitores de tela ou outras tecnologias assistivas possam entender facilmente a função do botão.

        Além de usar texto utilizável nos botões de envio do formulário, também é importante garantir que o botão seja visualmente distinguível de outros elementos na página e que seja fácil de localizar e interagir com ele. Isso pode ser feito usando dicas visuais claras, como cor, tamanho e posicionamento, para fazer o botão se destacar.

  2. Crie um esboço de imagem de design de wireframe do layout da página Fale Conosco e do conteúdo geral.
    • Não há especificações de layout obrigatórias, mas é importante que você siga os princípios de design de layout uniforme, alinhamento e proximidade.
    • Use moqups.com ou uma ferramenta de wireframe equivalente para criar um design de wireframe. Também é permitido desenhar o wireframe ou usar outra ferramenta para produzir a imagem/arquivo do wireframe.

    Se você estiver usando o Moqups, certifique-se de definir as configurações de Sharing (Compartilhamento) como Anyone with the link can view (Qualquer pessoa com o link pode visualizar):

    Permissões do Moqups
    Compartilhando Configurações com Qualquer Pessoa com o Link

Construa

  1. Crie a estrutura da página contato.html usando HTML.
  2. Usando o mesmo arquivo rafting.css, faça as adições necessárias ao CSS adicionando ou editando regras de seleção para dar suporte às adições desta página. Tenha cuidado para não repetir nada desnecessariamente e considere reutilizar declarações que são comuns entre seletores em uma nova regra de classe, se necessário.

Teste

  1. Teste continuamente a página no navegador local usando o Live/Five Server.
  2. Cada página deste curso deverá passar pela lista de verificação de padrões de desenvolvimento.
  3. Verifique se não há nenhuma violação de contraste de cores no nível AA. Use a DevTools CSS Overview para testar.
  4. Confirme (commit) e sincronize/envie (push) as alterações para o repositório wdd130 habilitado para o GitHub Pages.
  5. Execute a ✔ Ferramenta de Auditoria de Página desta tarefa para verificar se você possui o conteúdo básico do documento.

Envio

  1. Envie o URL das suas páginas do GitHub no Canvas.
    Aqui está um exemplo de URL, em que você deve substituir nomedeusuariodogithub pelo seu nome de usuário do GitHub:
    https://nomedeusuariodogithub.github.io/wdd130/wwr/contato.html