DailyCosas 2.0

Llega un día práctico a DailyCosas, un día que no sería necesario si no existiera la lacra del spam [en]. (Por cierto, altamente recomendable que descubrais la historia de esta palabra). A continuación 3 soluciones, cada una con sus ventajas e inconvenientes, las dos primerasde Richard (Ricplan) y la última la he traducido de TheDepot2, porque me ha parecido una solución sorprendente y bastante limpia.

Las soluciones de Ricplan
Richard propone dos soluciones:

1. Entities puras y duras: Reemplazando cada carácter por su equivalente Entity, para ello existen programas que automatizan la tarea, pero los bots de spammers ya saben traducir esto.
2. Codificiación a través de javascript: Un guirigay de código que crea la cadena de texto a partir de otra cadena que tiene un aspecto que asusta.

Lee sus métodos en detalle en su web.

Usando CSS y un poco de javascript
[Traducción de: thedepot2]
AVISO: Mucha gente puede que tenga muchas pegas acerca de lo aquí expuesto, esto es sólo una prueba de concepto y puede que no sea perfecto, o puede que no sea la mejor manera de enmascarar tu dirección de correo. Se escribió porque demuestra que hay algunas posibilidades de CSS poco usadas que pueden solucionar un problema común. En el peor escenario, funciona tan bien o mejor que cualquier otra técnica. Internet Explorer no permite esta técnica por completo, así que el ejemplo final fallará si lo usas, pero NO PONGAS PEGAS. Se supone que IE7 tendra capacidades para esta técnica cuando salga finalmente (aunque en la Beta 1 parece que no).

Dejar tu dirección de email en la web sin permitir que te llegen 200 mensajes spam al día es un problema con muchas psoibles soluciones. No hay una técnica perfecta, pero hay muchar suficientes. Ésta es una de esas técnicas suficientes que quizás es la mas esotérica y rocambolesca de todas, pero funciona (en navegadores decentes al menos) y no la he visto reflejada en otras partes, así que ahí va.

1.- Ocultando direcciones con CSS
Una de las capacidades mas desestimadas en CSS son los pseudo elementos :before y :after. Esto es probablemente porque IE no les da soporte (todavía), pero este es el truco CSS y no me importa tanto el problema en IE (el problema es suyo). Estas propiedades permiten insertar contenido (texto, imágenes, etc.) antes y después de un elemento. Aún más desestimada es la habilidad de :before y :after para incluir atributos de la etiqueta que están modificando.

Por ejemplo, se podría imprimir la URL de los enlaces en la página además del enlace de manera que los usuarios conozcan exáctamente donde serán llevados al pulsar en él. Dando estilo a los enlaces con a:link:after { content: " < "attr(href)"> "; } conseguimos un enlace tan interesante como este. Mola, ¿eh? ¿Que tal estaría poner el nombre en el atributo title y el dominio en el rel?

2.- Simple y limpio
Se pueden unir las dos cosas aplicando el siguiente CSS: a:link:before { content: ""attr(title)"@"attr(rel)""; }. Sin texto en el interior de la etiqueta a, el enlace mostraría ahora la dirección completa de coreo, como aqui: . En el atributo href, se puede dejar la dirección reemplazando @ con tu frase preferida que te prevenga del spam ([arroba] por ejemplo), de manera que el usuario pueda corregirlo en su cliente de correo.

3.- Magia JavaScript
Hasta aqui todo es genial, pero si se quiere ser completamente transparente al usuario, se puede hacer mejor. Con un poco de chispeante JavaScript, podemos usar el atributo onclick (y onkeypress, para ser accesibles) para tomar los datos del title y rel y poner la dirección en su manera correcta en el href:

onclick="this.href='mailto:'+ this.getAttribute('title')+'@'+this.getAttribute('rel')"

Puedes usar otras otras herramientas para añadir los onclickdurante la generación de la página (onload) y dejar de esta manera el marcado limpio y esplendoroso.

4.- Para los puristas
Así que tenemos una dirección de correo que aparece como texto plano, funciona como un enlace mailto: normal, y es invisible a los malvados bots de spam. Lo malo es que la etiqueta está vacía, y cuando el navegador no soporta las propiedades de CSS que necesitamos no se enseña nada. La solución es sencilla: poner el texto en un span y ocultar el span que sea hijo de los enlaces a través de CSS. Se puede usar comentarios condicionales de MSIE para mostrar o no los span para IE6 o inferior.
enviame un correo

5.- Anotaciones finales
Si quieres echar una primera vista a todo el CSS y JS usado en este artículo, solo hay que ver el código fuente de ESTA PÁGINA. En el pero escenario (MSIE y/o no JavaScript), funciona tan bien como otras alternativas en las condiciones apropiadas. Una última cosa a decir es que el texto generado por los pseudo-elementos :before y :after no son seleccionables. Para seguir descubriendo otras capacidades infrautilizadas de CSS, comprueba estos artículos sobre CSS 2.1