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 o href, 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: <URL> => <URL> Os links que tiveram esta atenção foram: <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> 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: <URL> 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. Tags: acessibilidade homepage javascript usabilidade link favorito « anterior início seguinte » 2 comentários Rui Lopes 18.06.10 "html - head - noscript - meta content refresh" a apontar para a página sem o hash. é um mega-hack, mas deve funcionar... link responder andr3 21.06.10 Mega-hack indeed! Mas acabei de experimentar numa página dummy e o redirect só funcionou quando o javascript estava mesmo desactivado! :-O