Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Links no cabeçalho

Olá, boa tarde.

O código do header escrito durante a aula é

    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_menu_link" href="index.html">Home</a>
            <a class="cabecalho_menu_link" href="about.html">Sobre mim</a>
        </nav>
    </header>

Eu tentei escrever essa parte sozinho e, querendo evitar que a página fosse recarregada de forma desnecessária, fiz o seguinte

  • index.html
    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_menu_link">Home</a>
            <a class="cabecalho_menu_link" href="./about.html">Sobre mim</a>
        </nav>
    </header>
  • about.html
    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_menu_link" href="./index.html">Home</a>
            <a class="cabecalho_menu_link">Sobre mim</a>
        </nav>
    </header>

Ou seja, deixei "desativados" os links referentes à pagina onde o usuário já está.

Isso pode ser um ganho (ex. economia de dados) ou apenas atrapalha deixando de reaproveitar 100% um código que poderia ser igual em todas as páginas?

Obrigado

2 respostas
solução!

Oi, Agostino! Tudo bem?

É muito interessante ver que você está pensando no comportamento da aplicação para além do que é mostrado em aula. Essa preocupação com a experiência de quem usa e o consumo de dados demonstra um olhar atento ao desenvolvimento.

Quando você remove o atributo href, o link deixa de ser clicável. Do ponto de vista técnico:

  • Economia de dados: Na prática, essa economia é irrelevante. O navegador não baixa a página novamente de forma pesada se os arquivos já estiverem no cache. Além disso, o que gasta dados é o carregamento dos recursos (imagens, scripts, CSS) e não o simples ato de clicar em um link para a mesma página.
  • Código repetido: Ao fazer isso, você perde a chance de ter um cabeçalho idêntico em todos os arquivos. Se o seu site crescer para dez páginas, você precisará editar o link "desativado" manualmente em dez arquivos diferentes toda vez que mudar a estrutura do menu.

Acessibilidade e Experiência (UX)

Um ponto importante aqui é como quem navega percebe o site:

  • Feedback visual: Quando você retira o href, o elemento <a> perde o estilo padrão de "ponteiro" do mouse e a capacidade de ser focado via teclado (Tab). Isso pode confundir a pessoa, que pode achar que o site está com algum erro ou que aquele item do menu não funciona.
  • Padrão de navegação: É comum que usuários cliquem na logo ou no link "Home" para dar um "refresh" na página ou voltar ao estado inicial dela.

Uma alternativa melhor

Em vez de remover o link, uma prática comum no mercado é manter o link funcional, mas aplicar uma classe CSS para indicar visualmente que aquela é a página ativa.

Por exemplo, no seu arquivo index.html:

<a class="cabecalho_menu_link ativo" href="index.html">Home</a>

E no CSS, você pode dar um destaque diferente para a classe .ativo, como uma cor distinta ou um sublinhado. Isso ajuda na orientação sem quebrar a funcionalidade do link ou dificultar a manutenção do código.

Se você estiver buscando automatizar isso no futuro com ferramentas como JavaScript ou frameworks, conseguirá manter um único código de cabeçalho que identifica sozinho em qual página o usuário está e aplica o estilo correto.

Continue explorando essas possibilidades, testar caminhos diferentes é a melhor forma de aprender!

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Olá Lorena, bom dia!

É sempre um prazer poder aprender com suas respostas :-)
Pensando no código repetido e em possíveis alterações do cabeçalho, postei uma nova pergunta
https://cursos.alura.com.br/forum/topico-cabecalho-identico-em-todos-os-arquivos-558966?hasAccessMGM=true

Obrigado!