WDD 130: Fundamentos da Web

S06 Projeto: Site de Rafting – Páginas Inicial e de Passeios

Visão Geral

Conclua o projeto do seu site de rafting adicionando mais 2 (duas) páginas:

"A vida é uma jornada, não um destino. À medida que percorremos o caminho da vida, encontramos desafios, obstáculos e incertezas. Mas não devemos permitir que isso nos desvie do nosso destino. Devemos continuar, mesmo quando o caminho à frente parece incerto. Precisamos permanecer fortes até o final."

- Presidente Thomas S. Monson, "Finalizadores Procurados", A Liahona, junho de 2001

Instruções

Corrija quaisquer problemas das tarefas anteriores.

Esta é a sua entrega final do projeto, por isso é importante que você corrija todos os problemas que possa ter encontrado nas páginas anteriores.

  1. Analise a Descrição do Projeto do Site de Rafting.
  2. Leia seu feedback sobre a página Sobre Nós (sobre.html) e faça as correções necessárias.
  3. Leia seu feedback sobre a página Fale Conosco (contato.html) e faça as correções necessárias.

Desenvolva a Página Inicial.

Com base na Descrição do Projeto do Site de Rafting, crie a página inicial principal do site de acordo com os seguintes requisitos:

  1. A página inicial é chamada index.html e está localizada no diretório do projeto do site de rafting wwr.

    O índice de nomes é um nome padrão que é referenciado pelo servidor web para ser entregue ao cliente solicitante para qualquer diretório no qual ele esteja.

  2. Usa 1 (um) arquivo CSS comum em todo o site, rafting.css.
  3. Utiliza uma imagem principal que ocupa toda a largura da página e inclui uma mensagem de cabeçalho posicionada sobre a imagem principal, usando o recurso de posicionamento absoluto.
  4. Há um formulário para se inscrever para uma newsletter, solicitando pelo menos um nome e um e-mail.
  5. Há uma chamada para ação com link para a página passeios.html que incentiva os visitantes a acessar a página de passeios.
  6. Há um layout CSS Grid com pelo menos duas imagens adicionais e conteúdo correspondente sobre a finalidade e as ofertas do site de rafting.
  7. Para obter a pontuação máxima, o layout da página não pode ser um fluxo simples de coluna única.
  8. Esbanje criatividade no seu design, mas lembre-se de que 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 para garantir um bom design e uma boa experiência do usuário em todo o site.

Desenvolva a página Passeios

Com base na Descrição do Projeto do Site de Rafting, crie a página Passeios.

Comece fazendo o seguinte:

  1. Crie um arquivo passeios.html no diretório wwr que contenha o mesmo cabeçalho, navegação e rodapé das outras páginas do site. (Dica: copie e cole como você fez na página Fale Conosco.)
  2. Prepare a nova página alterando title e meta description na seção head. Remova o conteúdo não relevante dentro do elemento main.

Em seguida, desenvolva a página de acordo com estes requisitos:

  1. Contém chamada para ação para que o usuário entre em contato com a empresa. Esta ação abre a página Fale Conosco no site.
  2. Pelo menos três descrições detalhadas dos passeios com fotos.
  3. Uma tabela descrevendo todos os passeios disponíveis com informações relevantes.
  4. Para atribuir crédito total, não pode haver apenas um layout de fluxo simples de coluna única.
  5. Esbanje criatividade no seu design, mas lembre-se de que 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.

Verifique suas páginas.

Não existe uma ferramenta de auditoria específica para esta tarefa final. Em vez disso, você deve verificar se suas páginas atendem aos requisitos listados acima e se seguem os padrões de desenvolvimento do curso.

  1. Revise a Lista de Verificação de Padrões de Desenvolvimento Web e compare cada uma de suas páginas com os padrões.
  2. Verifique se todas as pastas e arquivos no site do projeto de rafting atendem às convenções de nomenclatura do curso.
  3. Verifique se o relatório de validação em https://validator.w3.org/nu não relata erros para todas as páginas.
  4. Verifique se o relatório de validação em https://jigsaw.w3.org/css-validator/ não relata erros
    e se apenas 1 (um) arquivo css foi usado para todo o projeto.
  5. Verifique se cada elemento title da página tem conteúdo relevante que reflete o conteúdo da página e do site como um todo em todas as páginas.
  6. Verifique se cada elemento meta description da página tem conteúdo relevante que reflete o conteúdo da página.
  7. Verifique se não há nenhuma violação de contraste de cores no nível AA. Use CSS Overview do DevTools para executar o teste em cada página.
  8. Verifique se a Página Inicial contém uma imagem principal com título, uma newsletter e uma chamada para ação, além de usar CSS Grid conforme instruído e conter o conteúdo necessário.
  9. Verifique se a página Passeios contém o conteúdo necessário.

    Para atribuir crédito total, os layouts nessas duas páginas devem ir além de uma simples coluna única, ser visualmente atrativos e seguir os princípios de design de usabilidade, alinhamento uniforme, proximidade de componentes e uso de espaço vazio.

  10. Verifique se cada página individual não ultrapassa 500 kB transferidos, conforme indicado no painel Network do DevTools ao recarregar com cache vazio. O foco aqui é que as imagens tenham sido otimizadas e que nenhuma biblioteca/estrutura externa tenha sido utilizada.

    Observe que o Google Maps na página Fale Conosco não conta ao medir o total de quilobytes transferidos por página.

Envio

  1. Confirme (commit) e envie (push) suas alterações para seu repositório wdd130 habilitado para o GitHub Pages.
  2. Envie o URL do seu projeto de rafting para o Canvas. 
    https://nomedeusuariodogithub.github.io/wdd130/wwr/