En caso de tener que indicar una dirección de contacto en una web tenemos que saber que si la escribimos y mostramos tal cual muy pronto empezaremos a recibir una gran cantidad de SPAM.

Esto es así porque por la red abundan los robots que se dedican a escanear páginas en busca de direcciones de correos. Estos robots son programas automatizados que analizan el código fuente de las webs en busca de direcciones web. De esta forma, sabiendo que sólo "ven" el código fuente de la página y que no su resultado visual podemos usar algunos trucos para engañarlos.

Por ejemplo, podemos insertar la dirección de correo como una imagen o como un archivo Flash. De esta forma evitaremos que pueda ser leída por los spammers.

En el caso de usar un archivo Flash obligaremos al usuario a tener un plugin de Flash instalado en el navegador o será incapaz de verlo. Recordad que el navegador web del iPhone OS presente en el iPhone y el iPad no tiene soporte para Flash.

Otro truco es codificar la dirección de correo de forma que quede irreconocible en el código fuente y luego utilizar una función javascript para decodificarla. Este truco presenta el mismo inconveniente, el usuario puede no tener activo javascript en su navegador.

La forma más sencilla y menos obstrusiva es utilizar las propiedades CSS.

display:none

Podemos utilizar la propiedad display con el valor none de un elemento insertado en mitad de la dirección de correo. Con el display:none el elemento queda oculto y el usuario ve la dirección correctamente. Además puede seleccionar la dirección y copiarla en el porta-papeles.

<style>
  .oculto{ display:none }
</style>

test@<span class="oculto">texto oculto</span>dominio.com

Conviene añadir algo de texto en el span, ya que los robots pueden eliminar los elementos vacíos antes de escanear la página y la dirección quedaría entonces al descubierto. También conviene no insertar la propiedad display:none de forma inline y usar una clase.

El usuario verá lo siguiente:

test@texto ocultodominio.com

Propiedad direction

Se puede cambiar la dirección del texto usando CSS usando la propiedad direction con valor rtl (right to left).

De esta forma podemos escribir la dirección de correo al revés y luego invertirla para que sólo un humano pueda verla de forma correcta:

<style>
  .reverse{
    direction: rtl;
    unicode-bidi:bidi-override;
  }
</style>

<span class="reverse">moc.oinimod@tset</span>

Con lo que el usuario verá lo siguiente:

moc.oinimod@tset

El único problema es que si seleccionamos el texto y lo pegamos en cualquier otro sitio obtendremos la dirección invertida moc.oinimod@tset.

Imagen por: twicepix