Nos últimos anos tornou-se cada vez mais frequente encontrarmos com pequenos controlos na web que são enriquecidos com a magia do JavaScript.
Sejam eles tabs (abas em Português), paginações, votações, etc., o que interessa é que o controlo "quebra" o conceito de hiperligação (link) do hipertexto. Como conceito, os links servem para interligar hiper-documentos em que cada link refere um outro documento através do seu URL.
Ora, uma vez que o AJAX permite carregamento de conteúdo sem refrescar toda a página, esta é uma técnica perfeita para mostrar grandes quantidades de conteúdo que não são necessariamente acedidos em todas as visitas.
Exemplo do link Todo o SAPO na Homepage do SAPO
Evitar barreiras desnecessárias
Existem imensas formas de programar o comportamento do exemplo mostrado.
-
<a href="#" onclick="mostrarTodoOSapo();">Todo o SAPO</a>
O browser executa a função de JavaScript e segue o
href
, provocando às vezes um scroll para o topo. Sem JavaScript, nada acontece ao clicar/activar o link. -
<a id="todo-o-sapo" href="#">Todo o SAPO</a>
e num ficheiro à parte de JavaScript$('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};
O browser executa a função de JavaScript e não segue o
href
. Sem JavaScript, nada acontece ao clicar/activar o link. -
<a id="todo-o-sapo" href="/todo-o-sapo">Todo o SAPO</a> e num ficheiro à parte de JavaScript
$('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};
O browser executa a função de JavaScript e não segue o
href
. Sem JavaScript, o browser segue normalmente ohref
, logo que o documento servido nesse URL deve imitar a função desempenhada por JavaScript.
Neste último ponto, estamos a falar duma questão de acessibilidade visto que se trata de permitir acesso ao conteúdo. No entanto, ao resolver este problema estamos também a melhorar a usabilidade do link uma vez que passamos a permitir também que o utilizador opte por abrir o link numa nova Janela ou tab (opção "Abrir link numa nova Janela" do menu contextual).
Esta solução tem o custo de ter de desenvolver uma versão server-side da funcionalidade mas muitas vezes isso é bastante simples e justifica o investimento.
Exemplo prático
Quando desenvolvemos o sistema de tabs da Homepage do SAPO, tivemos todos estes cuidados. Para além disso, era crucial que o utilizador pudesse usar o endereço do browser para partilhar o link para determinada parte da homepage.
Assim sendo, adoptámos a seguinte estratégia...
location.hash = '/'+lnk.getAttribute('href');
//exemplo: http://www.sapo.pt/noticias => http://www.sapo.pt/#/noticias
Os links que tiveram esta atenção foram:
- http://www.sapo.pt/noticias
- http://www.sapo.pt/noticias/desporto
- http://www.sapo.pt/noticias/economia
- http://www.sapo.pt/noticias/vida
- http://www.sapo.pt/noticias/tecnologia
- http://www.sapo.pt/noticias/local
- http://www.sapo.pt/noticias/videos
- http://www.sapo.pt/destaques
- http://www.sapo.pt/destaques/tv
- http://www.sapo.pt/destaques/cinema
- http://www.sapo.pt/destaques/musica
- http://www.sapo.pt/destaques/jogos
- http://www.sapo.pt/destaques/lazer
- http://www.sapo.pt/destaques/humor
- http://www.sapo.pt/destaques/mulher
- http://www.sapo.pt/destaques/kids
- http://www.sapo.pt/destaques/radar
- http://www.sapo.pt/todo-o-sapo#servicos
- As abas da Pesquisa apontam para a página do SAPO Pesquisa
No entanto, não conseguimos resolver um cenário.
- Utilizador com javascript, partilha o endereço do browser: http://www.sapo.pt/#/noticias/tecnologia
- Utilizador sem javascript segue este link e vê a aba por omissão aberta e não a de tecnologia.
Nesta situação, não conseguimos que o link partilhado seja outro sem provocar um recarregamento da página. Também não conseguimos que o link partilhado funcione sem javascript porque a parte do endereço chamada "Hash" não é enviada para o servidor.
Se tiverem algumas ideias, deixem nos comentários em baixo.
Mais pormenores
Se ainda assim quiserem ler sobre esta técnica, normalmente apelidada de JavaScript Não-Obstructivo (Unobtrusive JavaScript), podem consultar os slides publicados em Abril de 2009 no Blog do Developers: JavaScript done right.