Ser solidário, ano II: aceitam-se sugestões

Este blog apoia a Associação Portuguesa de DeficientesHá quase um ano que este blog ostenta no canto superior direito um “selo” de apoio à Associação Portuguesa de Deficientes. A ideia surgiu dum dos membros da direcção da Associação, que precisava de apoio técnico para o colocar no seu próprio blog, e foi com prazer que ao resolver o problema dele, marquei também o meu próprio site. Entre um canto destes e um banner de suporte a causas mais globais ou afirmações humorísticas de independência (estou a pensar na piaçaba, sim), pareceu-me adequado tomar esta posição. E continua a parecer mas, passado um ano, estava a considerar a hipótese de começar a ter alguma rotação no “selo”, destacando por períodos, associações, causas ou organizações que possam ter interesse num modesto contributo para a sua visibilidade online. Não sei que resultado teve este selo para a APD, mas o selo, além de ficar disponível no meu site, pode ser usado por outros, já que partilho o código (sem erros, desta vez) e crio e alojo a imagem necessária.

Mas gostava de, em vez de usar apenas os meus critérios subjectivos, poder contar com sugestões dos leitores. Pode ser?

Estou mais virado para causas e operações locais (think global, act local), de dimensões pequenas e médias, a quem possa interessar este tipo de visibilidade online. Usarei os meus critérios e quadro de valores como filtro, mas todas as sugestões serão bem recebidas.

O selo da APD e o código continuarão sempre disponíveis, aqui.

Ser solidário (update)

Os utilizadores de Internet Explorer 5 e 6 terão reparado que o “selo” que pus no blog não funcionava como era suposto. Ou melhor, o IE não é capaz de ler correctamente os estilos CSS usados para fazer esse efeito. E, mais uma vez, obriga a um “work-around” que só serve para complicar.

Assim, o selo fica com várias versões possíveis, todas elas com código válido, mas com comportamento diferente de acordo com os browsers usados:

Versão 1:

selo fixo no canto superior direito da janela do browser, funciona em browsers modernos e inteligentes (exclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:fixed; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 2:

selo fixo no canto superior direito da página (desaparece com o scroll), funciona em todos os browsers modernos e mesmo nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:absolute; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 3 (a que está em uso neste site):

selo fixo no canto superior da janela do browsers modernos e inteligentes e no canto superior da página nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<style type=”text/css”>
body>div.selo {position: fixed;}
div.selo{
margin: 0 -100px -100px -100px;
text-align: right;
position: absolute;
top: 0px;
left: 100%;
width: 100px;
right: 100px;
z-index:1000;
}
</style>
<div class="selo">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Claro que os experts de CSS me dirão que há outras formas de resolver isto e que até há formas que servem para ter um comportamento uniforme em todas as plataformas, mas como não gosto de arriscar demasiado ficar com CSS inválido e acho que deve haver um mínimo de proporcionalidade entre o tempo que se perde e o ganho que se tem, fico-me por esta solução.

Depois de mais um bocado de volta destas trapalhadas do comportamento do CSS em IE, até dá vontade de sugerir que se usem estes selos colocando apenas a imagem num sítio do site ou blog como o topo da barra lateral ou assim. Essa solução, tão simples, passa apenas por colar no sítio onde se quer a imagem esta linhazita de código:

<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>

Ser solidário

Este blog apoia a Associação Portuguesa de Deficientes Um amigo pediu-me uma ajuda para poder pôr no blog dele uma espécie de selo a afirmar o seu apoio à Associação Portuguesa de Deficientes.

É sempre bom saber que algumas das minhas habilidades podem ser úteis.

O “selo”, cá está, disponível para ele e para quem mais o quiser usar.

Para usarem o selo no canto superior direito dos vossos blogs ou sites (como tenho no meu, agora), só precisam de adicionar este bocado de código aos vossos sites/templates:

<div id="selo" style="position:fixed; left:100%; top:0px; height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia a Associação Portuguesa de Deficientes">
<img src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif" width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

A ideia e o código (pouco original, simples, acessível e standard) pode ser reciclada para outras entidades e causas.
Se tiverem sugestões ou precisarem de apoio para implementar variações, a caixa de comentários está aqui para isso.

Uma variação óbvia é usar position:absolute; em vez de position:relative; e assim o “selo” fica preso no topo do site em vez de ficar preso no canto da janela do browser. Com essa variação, o código tem que ser colocado no início da página, a seguir a <body>.