Esta tarefa demonstra seu conhecimento prévio com uso de HTML, CSS e JavaScript para o design e desenvolvimento
da página inicial do site.
Tarefa
Crie e desenvolva sua página usando o exemplo a seguir como guia para o layout e o conteúdo. A página deve
atender aos padrões do curso, ser responsiva e passar nos testes de
acessibilidade, melhores práticas e SEO das auditorias do
Lighthouse do DevTools.
Capturas de TelaExemplo de Página Inicial – DesktopExemplo de Página Inicial – Dispositivo Móvel
Crie uma página inicial padrão para esse repositório, assim, quando for publicada no GitHub, seja renderizada
em https://nome-de-usuario.github.io/wdd231. Qual deve ser o nome deste arquivo?
Avalie Seu Conhecimento
index.html
Crie pastas de suporte, com nomes apropriados, para arquivos de imagens, CSS e JavaScript. Essas
subpastas devem ser colocadas no diretório raiz, wdd231.
Avalie Seu Conhecimento
As imagens serão armazenadas em uma pasta chamada imagens
Os arquivos CSS serão armazenados em uma pasta chamada estilos
Os arquivos JavaScript serão armazenados em uma pasta chamada scripts
Observe que as palavras diretório e pasta têm essencialmente o mesmo significado.
Diretório é o termo mais preciso para sistemas de arquivos, enquanto "pasta" 📂 se refere à metáfora gráfica
que é geralmente aceita porque está relacionada ao termo "arquivo" no mundo organizado.
Adicione os arquivos CSS conforme necessário. Você deverá escrever seu próprio arquivo CSS personalizado neste
curso. Frameworks e bibliotecas não são permitidos. A tarefa exige que você crie um layout
responsivo para todas as larguras de tela, de 320 px para mais. Para esta aula, você pode usar um arquivo normalize.css de normalização (reset) de
CSS. A aula exige que você use um arquivo telas-pequenas.css seguido de um arquivo telas-grandes.css.
O arquivo css para telas grandes deve conter um Media Query
(sem tradução para o português, está relacionado à adaptação de tamanhos de telas).
Adicione vários arquivos JavaScript conforme necessário. Por exemplo, crie arquivos para dar suporte à
navegação responsiva (navegacao.js), datas (data.js) e cartões de informações do curso (curso.js). Faça
referência a eles em head, usando o método de atributo defer. À medida que você
avançar neste curso, você precisará adicionar mais arquivos JS. Carregue somente os arquivos necessários para
cada página.
HTML
Adicione a estrutura padrão do documento HTML ao documento.
Adicione os elementos necessários a <head>, incluindo o title,
meta description e meta author.
Use HTML semântico para criar a estrutura básica do layout da página. Use um elemento
header, um nav, um main e um footer.
Adicione o conteúdo conforme mostrado nas capturas de tela de exemplo acima.
Observe que todas as imagens usadas em suas páginas devem ser otimizadas.
Nesta classe, o limite de tamanho de cada imagem é de 125 kB.
A tag <header> precisa conter um logotipo do site (usando um arquivo svg) e seu nome
renderizado com uma tag <span> e um ícone de hambúrguer em telas pequenas.
O menu de navegação responsivo <nav> contém três links:
Página Inicial – esta página atual.
Projeto da Câmara – terá um link para o projeto do site da câmara de comércio (semana 02).
Projeto Final – terá link para o projeto final (semana 06).
O elemento <main> contém o seguinte:
Página Inicial renderizada com uma tag <h1>.
Três tags <section> com títulos <h2>, conforme mostrado nas capturas
de tela de exemplo acima.
O elemento <footer> tem três itens.
O primeiro item é uma série de links de mídia social, incluindo GitHub e LinkedIn, mais um ou dois da sua
escolha. Esses ícones devem estar vinculados ao seu repositório do GitHub e à sua conta do LinkedIn.
A próxima linha contém o seguinte:
o símbolo de direitos autorais e o ano atual, escritos dinamicamente usando JavaScript
Avalie Seu Conhecimento
Em HTML, forneça um espaço reservado que possa ser facilmente selecionado usando JavaScript.
Exemplo: <span id="anoAtual"></span>
seu nome
seu estado ou país
O segundo parágrafo tem um id de "ultimaModificacao" e será preenchido
dinamicamente, com código JavaScript.
CSS
Ao estilizar e definir o layout da sua página, certifique-se de que os seguintes princípios de web
design e práticas recomendadas sejam atendidos.
São utilizados princípios de design apropriados de proximidade,
alinhamento, repetição e contraste. Aprenda mais sobre esse tema no artigo Princípios fundamentais do design gráfico do Clube do Design.
Não há rolagem horizontal em visualizações entre 320 px e 1200 px de largura.
O texto não encosta na borda da tela, causando um erro de tangente visual.
Qualquer sobreposição de texto com imagens, outros elementos ou outro texto/conteúdo é legível e não
transborda em visualizações menores.
Não há tremores (twitching) na navegação ao passar o mouse.
As imagens não são comprimidas nem distorcidas quando a página é redimensionada.
As imagens não são muito grandes a ponto de causar pixelização.
Use seu próprio esquema de cores e opções de tipografia.
Use a Google Fonts API - (conteúdo em
inglês) para selecionar uma família de fontes para usar nesta página. Abordamos isso na
semana 01 de WDD131, caso
você precise se lembrar do Google Fonts
A navegação responsiva deve oferecer suporte aos seguintes recursos:
O design responsivo inclui proporcionar ao usuário uma experiência positiva de
legibilidade, usabilidade, acessibilidade e apelo
visual que se adapta ao dispositivo do usuário por tamanho, orientação e resolução.
navegação tipo hambúrguer em tela pequena
navegação horizontal em tela grande, usando CSS
Flex
orientação do usuário
efeito hover (foco ao passar o mouse) para itens de menu
Seu design não pode ter apenas um layout simples de uma coluna (layout de fluxo padrão) em todas as
visualizações para garantir consideração total de crédito.
JavaScript
Faça referência aos arquivos JavaScript usando uma referência <script> no elemento
head do arquivo HTML e usando o atributo defer.
Visite o site da MDN para saber por que o atributo booleano defer é importante.
Use JavaScript para dar suporte ao menu responsivo.
Use JavaScript para gerar dinamicamente o seguinte:
o ano dos direitos autorais (ano atual) no primeiro parágrafo do rodapé
Modifique o conteúdo do array de cursos no seu arquivo script, alterando a propriedade
completed (completado) para true (verdadeiro) se você tiver concluído um curso.
Exiba dinamicamente todos os cursos na seção de certificados, conforme mostrado no exemplo acima. Os cursos
que você concluiu devem ser marcados de forma diferente daqueles que não concluiu. Use o esquema de cores da
sua página. A página deve se ajustar automaticamente se a fonte de dados mudar.
Usando botões que respondem ao evento de clique, permita que o usuário selecione a exibição de Todos os
Cursos, Cursos WDD ou Cursos CSE. Dica: Use o método
filter de arrays.
Demonstração da Saída da Interface do Usuário com Filtragem de Cursos
Crie os cartões de curso para indicar os cursos que você concluiu em um estilo diferente e
complementar em relação aos demais, indicando que foram finalizados.
Forneça um número total de créditos necessários dinamicamente usando uma função
reduce (não mostrada nas capturas de tela). O número de créditos exibidos deve refletir apenas os
cursos que estão sendo exibidos no momento.
Teste
Verifique continuamente seu trabalho carregando-o no seu navegador, usando o Servidor Local.
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 "Developer Tools" (Ferramentas do Desenvolvedor) do navegador. 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, Ctrl+Shift+I, ou selecionando as ferramentas do desenvolvedor no menu do
navegador.
Gere o relatório do Lighthouse do DevTools e execute diagnósticos de
Acessibilidade, Melhores Práticas e SEO nas visualizações de
dispositivos móveis e Desktop.
Use o modo Privado ou Anônimo para testar sua página ao usar o Lighthouse.
O padrão é atingir uma pontuação de 95+ em cada uma dessas categorias.
Envio e Auditoria
Adicione, confirme, envie e sincronize as alterações do seu trabalho local com o repositório wdd231 habilitado para o GitHub
Pages.
Sequência do fluxo comum do Git:
add → adiciona as mudanças ao staging area
commit → confirma as mudanças localmente
push → envia as mudanças para o repositório remoto
pull → baixa e sincroniza com o repositório remoto
Use esta ferramenta de ☑️ Auditoria de Páginas para verificar se seu trabalho
contém alguns dos elementos HTML e conteúdo CSS necessários. A ferramenta de auditoria também é usada pela
equipe de avaliação.
Volte ao Canvas e envie seu URL habilitado para GitHub Pages para wdd231, por exemplo,
https://nome-de-usuario.github.io/wdd231
Você não precisa incluir index.html na referência de URL porque index.html é o arquivo
padrão retornado em uma solicitação de pasta no GitHub Pages.
"DevTools" é uma abreviação de "Developer Tools" (Ferramentas do Desenvolvedor) do navegador. 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, Ctrl+Shift+I, ou selecionando as ferramentas do desenvolvedor no menu do navegador.