WDD 231: Desenvolvimento Frontend para Web I

S01 - Atividade de Aprendizagem: Cabeçalho do Site

Visão Geral

O cabeçalho do site para a tarefa desta semana conterá um logotipo svg, que você pode buscar ou criar por conta própria. O cabeçalho também conterá o nome do site, que será seu nome, e um ícone de hambúrguer em telas pequenas para exibir e ocultar a navegação.

Você usará CSS Grid e grid-template-columns para criar um cabeçalho que seja responsivo à largura da página.

Preparação

Logotipos

O logotipo é uma marca gráfica, emblema ou símbolo usado para facilitar e promover o reconhecimento imediato pelo público. Ele é usado por empresas, organizações e até mesmo por pessoas para promover sua marca, identidade e produtos. Um bom logotipo é uma parte importante de um site, pois contribui para uma boa primeira impressão e estabelece a identidade da marca. Também ajuda a criar um senso de confiança e credibilidade nos usuários.

Aqui estão alguns pontos a considerar na hora de criar um bom logotipo.

• Atemporal: Um logotipo atemporal mantém sua força e relevância mesmo que as tendências mudem.
• Simples: Um ótimo logotipo deve ser fácil de entender e lembrar, o que significa usar um design simples.
• Memorável: Um ótimo logotipo deve ser único e se destacar.
• Relevância: Um logotipo deve ser relevante para gerar reconhecimento imediato e criar uma primeira impressão forte e duradoura da marca.

Observe, por exemplo, como esses ícones de sites populares atendem aos critérios acima.

Ícones de Navegação

Embora existam diversos tipos reconhecidos de padrões de navegação em telas pequenas, este curso usará um que é muito comum. Os links de navegação em tela pequena serão organizados verticalmente, usando uma entidade ☰ para exibir os links e uma entidade × para ocultá-los. Em telas grandes, o botão de hambúrguer ficará oculto e os links de navegação serão exibidos horizontalmente.

Para o botão de navegação em telas pequenas, será usada a tag <button>, então usaremos CSS para inserir a entidade correta. Observe o código CSS para cada entidade que será usada na atividade:

Exemplo de Estrutura em HTML

Ao observar o exemplo de HTML abaixo, você perceberá que há três itens separados no cabeçalho: o logotipo do site, o nome do site e um botão.

<header>
  <img src="imagens/logo.svg" alt="logotipo do site" width="1" height="1">
  <span>O Nome do Site</span>
  <button id="nav-button" class="hamburger" aria-label="navigation"></button>
</header>

Observe que a tag <img> tem largura e altura de 1px. Isso garante que a imagem não ocupe espaço no cabeçalho. Ela será controlada e exibida pelo CSS.

Exemplo de Layout em CSS

O método CSS Grid será usado para definir o layout do cabeçalho. Neste exemplo, a grade tem três colunas. A primeira coluna terá 24 px de largura para o logotipo, a segunda terá largura automática para o nome do site e a terceira terá 44 px de largura para o botão de hambúrguer.

header {
  display: grid;
  grid-template-columns: 24px auto 44px;
}

Design para Dispositivos Sensíveis ao Toque

Ao criar interfaces para dispositivos sensíveis ao toque, é importante considerar o tamanho das áreas de toque, ou seja as áreas que respondem à interação do usuário, como botões e links. Se as áreas de toque forem pequenas demais, os usuários poderão ter dificuldade em interagirem com elas com precisão.

As áreas de toque incluem a área que responde à interação do usuário, neste caso, a tag de âncora. Um ícone pode parecer menor, mas a área clicável precisa ser grande o suficiente para ser tocada com facilidade.

• O Guia de Design da Apple (Apple Design Handbook) recomenda que a área de toque em dispositivos móveis tenha pelo menos 44px por 44px.
• O Guia de Acessibilidade do Android (Android Accessibility Guide) sugere que as áreas de toque tenham pelo menos 48 dp por 48 dp.

  O Guia de Acessibilidade do Android usa o termo dp, que significa pixels independentes de densidade.

  Os pixels independentes de densidade são uma unidade de medida usada para garantir que as áreas de toque tenham o mesmo tamanho em todos os dispositivos, independentemente da resolução da tela.

Exemplo em JavaScript

Use o método querySelector do JavaScript para obter uma referência ao elemento do botão de hambúrguer. Configure um event listener (receptor de evento) para o clique de um botão. Quando o botão for tocado, ele alternará o valor do atributo de classe "exibir" no próprio botão.

const botaoDeNav = document.querySelector('#botao-de-nav');

botaoDeNav.addEventListener('click', () => {
  botaoDeNav.classList.toggle('exibir');
});

Use CSS para exibir a entidade

Para alterar a entidade do botão, tudo o que você precisa fazer é alterar o CSS quando a classe "exibir" for aplicada.

.hamburger::before {
  content: "\2630";
}
.hamburger.exibir::before {
  content: "\00D7";
}

Neste exemplo, o botão de hambúrguer exibirá o ícone de abrir quando a classe "exibir" não for aplicada e o ícone de fechar quando a classe "exibir" for aplicada, usando o princípio da especificidade do CSS.

Instruções da Atividade

Assista aos vídeos abaixo e comece a criar um cabeçalho para seu site que contenha um logotipo, um nome e um botão de hambúrguer. O cabeçalho deve ser responsivo à largura da página e usar CSS Grid para organizar os itens no cabeçalho.

Assista ao vídeo WDD231 Cabeçalho do Site - Parte 1

Assista ao vídeo WDD231 Cabeçalho do Site - Parte 2

Assista ao vídeo WDD231 Cabeçalho do Site - Parte 3