WDD 131: Fundamentos da Web Dinâmica

S01 – Tarefa: Página Inicial

Visão Geral

Esta tarefa permite que você demonstre seu conhecimento prévio usando HTML e CSS no design e desenvolvimento de uma página inicial de um site. Além disso, você precisará aplicar conceitos de atividades de aprendizagem, incluindo JavaScript, para incluir algumas informações dinâmicas na página inicial.

Tarefa

Crie e desenvolva a seguinte página inicial como sua página inicial do curso wdd131. Use seu próprio conteúdo e estilo básico.

Captura de Tela de Exemplo da Página Inicial
Exemplo da Página Inicial

Instruções

Configuração de Arquivo e Pasta

  1. No VS Code, abra a pasta do repositório local wdd131.
  2. Crie uma nova página nesta pasta raiz chamada "index.html".

    Por que esse arquivo é chamado "index.html"?

    Avalie Seu Conhecimento É uma convenção comum no desenvolvimento web nomear o ponto de entrada principal de um site ou diretório de "index.html" (índice, em português). Essa convenção tem origem nos primeiros servidores web, que criavam automaticamente um arquivo denominado "index.html" quando um diretório era acessado sem especificar um nome de arquivo.
  3. Crie novas pastas (diretórios) chamadas "estilos", "scripts" e "imagens".
    Essas subpastas, no diretório raiz do repositório, conterão os arquivos de ativos relevantes.

    Observe que "diretório" e "pasta" têm basicamente o mesmo significado. Diretório é o termo mais preciso para sistemas de arquivos, enquanto "pasta" 📂 se refere à metáfora gráfica amplamente aceita devido à sua associação com arquivos físicos e organização.

  4. Adicione um arquivo CSS chamado "base.css" ao diretório estilos. Este é seu arquivo CSS principal.
  5. Adicione um arquivo JS chamado "obterdatas.js" ao diretório scripts.

HTML

  1. No documento index.html, inclua o seguinte:
    • definição do tipo de documento necessário
    • tag html com atributo de idioma
    • tag head
    • tag body
  2. Em <head>, inclua os seguintes elementos com atributos e conteúdo apropriados:
    Consulte os padrões de desenvolvimento do curso se precisar consultar qualquer um desses elementos <head>.
    • meta charset
    • meta viewport
    • title
    • meta description
    • meta author
  3. Defina o conteúdo de title como "WDD 131 – Fundamentos da Web Dinâmica - Seu Nome".
  4. Defina o elemento meta description de modo que ele contenha pelo menos o seguinte conteúdo:
    • "WDD 131 – Fundamentos da Web Dinâmica"
    • Seu nome completo
    • Resumo com palavras-chave do conteúdo da página
  5. Em <body>, crie um layout usando os elementos header, main e footer.
  6. O elemento <header> contém:
    • O título da página conforme mostrado em uma tag <h1>
    • Uma tag <nav> com os seguintes quatro links de menu:
      • Sua página de perfil do LinkedIn.

        Se você não tiver um perfil gratuito no LinkedIn, considere criar um ou apenas inclua um link geral para o LinkedIn.

      • Canvas usando https://byupw.instructure.com/
      • Link para uma Escritura favorita usando https://www.churchofjesuschrist.org/study/scriptures?lang=por

        Exemplo
        https://www.churchofjesuschrist.org/study/scriptures/bofm/1-ne/3?lang=por&id=p7#p7

      • Link da pasta do Projeto Final (será um espaço reservado por enquanto).
  7. O elemento <main> contém o seguinte:
    • O elemento <h1> com seu nome como conteúdo"
    • Duas tags section, cada uma com o atributo de classe chamado "card". Essas seções devem incluir um título, imagens e conteúdo, conforme mostrado na figura de exemplo acima.

      Nesta curso, todas as imagens devem ser otimizadas e ser locais (sem referências externas e absolutas às imagens).

  8. O elemento <footer> tem dois parágrafos p:
    • O primeiro parágrafo contém o seguinte:
      • O símbolo de direitos autorais e o ano atual. O ano será preenchido dinamicamente usando código JavaScript. Inclua uma tag <span> em branco para fazer isso.

        Exemplo
        <span id="anoatual"></span>

      • Seu nome.
      • Seu estado ou país.
    • O segundo parágrafo tem um id "ultimaModificacao" e será preenchido com código JavaScript.

CSS

Use o arquivo externo base.css para definir o layout e o estilo da página, conforme mostrado na captura de tela de exemplo acima.

  1. Use seu esquema de cores e opções de tipografia.
    Você é responsável por praticar bons princípios de design de alinhamento, contraste de cores, proximidade, repetição e usabilidade em todo o seu trabalho.
  2. Use a Google Fonts API para selecionar uma ou duas fontes para usar na página.

    Se precisar de ajuda para usar o Google Fonts, assista a este vídeo de demonstração ▶️ Google Fonts API

  3. Faça o elemento span no header exibir como um bloco (display: block;) para centralizar o logo e o texto com facilidade.
  4. Use CSS Flex na navegação nav.

    Vídeo de Demonstração: ▶️ Menu de navegação usando CSS Flex
    CodePen ☼ Menu de Navegação Usando CSS Flex

  5. A navegação deve usar um efeito de hover bem projetado. Consulte o CodePen acima para ver um exemplo.
  6. O elemento main tem uma largura limitada e é centralizado na tela horizontalmente.
  7. Organize os cartões da coluna principal usando CSS Grid.

JavaScript

  1. Faça referência ao arquivo JavaScript "obterdatas.js" usando uma referência <script> no elemento head do arquivo HTML e usando o atributo defer.
    Por que o atributo booleano defer é importante?
    De que outra forma podemos referenciar e empregar JavaScript com êxito?
  2. Em obterdatas.js, escreva instruções JavaScript que produzam dinamicamente o seguinte:
    • o ano dos direitos autorais (ano atual) no primeiro parágrafo do rodapé; e
      Observe este resumo do CodePen ☼ Objeto Date em JavaScript sobre o uso do objeto Date de diferentes maneiras.
    • a data em que o documento foi modificado pela última vez no segundo parágrafo.
      Use a propriedade lastModified do objeto de documento para obter essa data/hora de forma dinâmica.
      Você não precisa alterar o formato nativo document.lastModified.

Teste

Vídeo de Demonstração (conteúdo em inglês): ▶️ Teste e auditoria do seu próprio trabalho

  1. Sempre verifique seu trabalho renderizando a página localmente usando o Live/Five Server no VS Code.
  2. Captura de tela do ícone de erro do console no DevTools
    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.

    "DevTools" é uma abreviação de "Ferramentas do Desenvolvedor". Refere-se a um conjunto de ferramentas ou utilitários fornecidos pelos navegadores da web para ajudar os desenvolvedores a depurar, criar perfis e analisar páginas da web durante o processo de desenvolvimento. As ferramentas podem ser acessadas pressionando a tecla de função F12 ou selecionando as ferramentas do desenvolvedor no menu do navegador.

  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 na visualização Desktop.

    O DevTools Lighthouse serve como uma ferramenta de auditoria abrangente integrada ao navegador. Nesta aula, você se concentrará em acessibilidade, melhores práticas, SEO (Search Engine Optimization ou otimização para motores de busca) e tamanho da página medido pelo total de bytes transferidos quando a página é recarregada a partir de um cache vazio.

    Para mais informações, consulte a documentação do Lighthouse.

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

  5. Recarregue a página usando Empty Cache and Hard Reload (Esvaziar Cache e Recarregar) no DevTools com a aba Network (Rede) aberta para visualizar o total de bytes transferidos na parte inferior da aba. Verifique se a página tem menos de 500 kB. Aqui estão algumas coisas comuns que você deve procurar se a página for muito grande:
    • Certifique-se de que todas as imagens estejam otimizadas.
    • Não use bibliotecas de terceiros que sobrecarreguem sua página.

Envio e Auditoria

  1. Confirme (commit) e envie (push) seu trabalho para seu repositório wdd131 no GitHub.
  2. Use a ☑️ferramenta de auditoria para verificar se seu trabalho contém os elementos HTML e conteúdo CSS necessários. A ferramenta de auditoria também é usada pela equipe de avaliação.
  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.

    Se você não visualizar todos os canais do Microsoft Teams do curso, exiba-os clicando no ícone de três pontos ("...") ao lado do nome da equipe e selecionando "Mostrar" para qualquer canal oculto.

  4. Volte ao Canvas e envie seu URL habilitado para GitHub Pages para wdd131, por exemplo, 
    https://seu-nome-de-usuario-do-github.github.io/wdd131

    Observe que você não precisa incluir index.html em sua referência porque index.html é o arquivo padrão recuperado com uma solicitação de pasta.