A usabilidade de informar!

O Jeison Frasson escreveu (ou copiou) isso no dia 21/05/2009 Voltar

Não, esta não é mais uma discussão se um link externo ao seu site deve ou não abrir em outra janela. Eu já discuti este assunto aqui. Eu já escrevi sobre as razões pelas quais o atributo target foi retirado das especificações de documentos strict da W3C e também já escrevi que se você realmente quer forçar os links externos no seu site a abrirem em outra janela, você deve utilizar JavaScript e não o atributo target. No final, minha opinião é que você não deve forçar um link ser aberto em outra janela se ele for externo ao seu site. Eu acredito que esta tem que ser uma decisão do usuário e não do site.

Estas coisas tratam de comportamento, mas existe uma outra discussão sobre a usabilidade envolvendo links externos. Navegando no meu site rapidamente você consegue perceber que há vários links distribuídos em vários artigos. Você sabe quais deles linkam para outros textos dentro do meu site e quais não? Eu espero que saiba. Porque já faz um bom tempo que eu utilizo uma pequena imagem expernal no formato de seta nos links que são externos ao meu site.


Blogs são repositórios de textos e links. A maioria dos blogs (como o meu) insere vários links para vários lugares diferentes incluindo trechos e páginas do próprio site. Indicar para o usuário quais links apontam para o seu próprio site e quais são externos é uma forma interessante de organizar a informação e de deixar claro para o usuário quando um link está relacionado diretamente com o site (interno) em que o usuário está atualmente e qual não faz parte daquele “sítio” (externo). Simples assim. Há uma solução em CSS bem simples que faz isso.


CSS e o atributo rel faz isso por você


O atributo rel como eu já escrevi anteriormente, indica qual a relação entre o seu site e o site/página que você está linkando. Ele pode possuir o valor que você quiser. No meu site, os links que são externos, eu insiro o atributo rel com o valor de “external” da seguinte maneira:

<a href="http://www.site_externo_ao_meu.com.br" rel="external">
Isto é um link
</a>


E no meu CSS eu coloco uma regra mais ou menos assim:

* [rel~=external] { background:url("external.gif") right 2px no-repeat; padding-right:13px; }

Esta regra funciona da seguinte maneira. Eu utilizo um seletor universal (*) seguido de um seletor de atributo (http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors) cujo valor dele seja igual ou possua (~=) a palavra “external”. Dessa maneira eu consigo por CSS alterar a aparência de todos os hyperlinks que possuem o atributo rel com valor igual a “external”. Lá eu declaro uma imagem de background com a minha setinha que indica para um usuário que aquele link é externo ao meu próprio site. Funciona em todos os browsers modernos que interpretam CSS 2, incluindo o Internet Explorer 7. Alguém discorda?


Autor/fonte do artigo: Henrique Costa Pereira (http://www.revolucao.etc.br/archives/a-u...)

Comentar

Quase todos direitos reservados a Newsmade
A usabilidade de informar! | Newsmade