No soy muy amigo de los CAPTCHAS (aunque son necesarios) y menos aún si no son accesibles, pero no quita que este captcha sea interesante y que a alguien le pueda gustar.
El CAPTCHA funciona de la siguiente manera: aparece unas imágenes aleatorias y unas instrucciones que indican que una de las imágenes debes ponerlo en una capa.
Ajax Fancy Captcha – jQuery plugin
Vía / WebAppers
Tag Archives: captcha
Evitar spam en formularios mediante Javascript
Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso
SecureImage: CAPTCHA en PHP
SecureImage es un CAPTCHA realizado en PHP (necesario GD) que nos permite evitar el abuso del spam protegiéndonos de sus ataques.
Es muy fácil de usar, ya que en solo 3 líneas de código te muestra la imagen o valida la entrada en 6 líneas de código. Permite seleccionar el juego de caracteres, la fuente TTF o fuentes GD, permite añadir imagenes de fondo, modificar el color, el ángulo y la transparencia del código, añadir líneas que tachen la imagen o generar ficheros wav con el CAPTCHA audible.
SecureImage
PHPDeveloper.org
Listado de scripts CAPTCHA
Aunque el otro dÃa desarrollábamos un script para mostrar un CAPTCHA, hoy os pasamos una lista de scripts desarrollados por otras personas:
- Plugin para MovableType
- The ASP CAPTCHA Project
- Captcha Perl Script
- Skimpy Gimpy Audio/Visual Captcha
- The simple java captcha project
- JCaptcha
- HN CAPTCHA (clases para PHP)
- Captcha! (plugin para WordPress)
- Bot Check (plugin para WordPress)
- Silver’s Captcha (plugin para WordPress)
- Captcha para Drupal
- CAPTCHA image (ASP.NET)
ModernCaptcha: captcha con usabilidad
Si el otro dÃa mostrábamos un ejemplo de CAPTCHA, ahora mostramos un ejemplo de CAPTCHA en el que no se trata de reconocer un texto deformado, sino de asociar un logotipo a un nombre. Asà por ejemplo saldrÃa el logotipo de Sentido Web y el usuario deberÃa seleccionar “Sentido Web” de una lista de nombres.
La idea es buena, ya que un impedido visual tendrÃa problemas para reconocer el texto deformado, que ya de por sà nos cuesta reconocer al resto. Pero le encuentro un problema, se supone que el CAPTCHA está hecho para que procesos OCR automáticos, pero o bien se tiene una lista de logotipos enorme, o se podrÃa reconocer la imagen del logo con el nombre correspondiente.
AsÃ, sin pensarlo mucho, se podrÃa hacer la media de cada componente RGB de cada pixel de la imagen para asociarla a cada nombre, claro que si la imagen se cambiara de tamaño o se rotara se evitarÃa este “ataque”, aunque serÃa ponerse a buscar otro algoritmo más eficiente, que seguro que se pueden encontrar por internet.
ModernCaptcha – when captcha meets usability
VÃa / dzone
Laboratorio: ejemplo de CAPTCHA
El otro dÃa và en Rapidshare un ejemplo de CAPTCHA que parecÃa fácil de desarrollar. Se trata de las letras (tres en este caso), giradas ángulos aleatorios, pero no demasiado para que se pueda leer con facilidad, sobre un fondo de letras de tonalidad parecida, de menor tamaño y también giradas aleatoriamente.
Un ejemplo dinámico es el siguiente:
El método es muy sencillo, usamos una cadena de texto con todas las letras que queremos que aparezcan, para poder acceder aleatoriamente a cada una de ellas. Después nos crearemos el fondo de la imagen, siendo un gris claro y unas letras pequeñas, de un gris un poco más oscuro sobre ellas, que llenan toda la imagen. Y por último, creamos las tres letras del CAPTCHA para mostrarlas en el centro de la imagen y de un tamaño considerable.
En este caso he cogido la fuente de daFont, pero se puede usar la que se quiera. Yo recomiendo usar alguna que esté distorsionada para que la lectura para nosotros no presente complicaciones, pero si para algún proceso automático.
El script serÃa el siguiente, teniendo en cuenta que no se trata el almacenamiento en sesión de las letras del CAPTCHA para luego poder compararlas.
<?php
// Juego de letras para usar
$letras = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Configuración tamaño imagen y tamaño fuente
$ancho_caja = 200;
$alto_caja = 100;
$tam_letra = 16;
$tam_letra_grande = 60;
// angulo máximo que rota (izq y der) cada letra
$angmax = 20;
// Establecer el tipo de contenido
header("Content-type: image/png");
// Creamos una imagen
$im = imagecreate($ancho_caja, $alto_caja);
// Creo el color del texto, del texto del fondo y del fondo de la imagen
$gris = ImageColorAllocate($im, 200, 200, 200);
$colorLetra = ImageColorAllocate($im, 175, 175, 175);
$colorLetraFondo = ImageColorAllocate($im, 180, 180, 180);
// tipo de letra obtenido en dafont.net
$fuente = './Hotel Coral Essex.ttf';
// Calculo el número de lÃneas que entran
$caja_texto = imagettfbbox($tam_letra, 0, $fuente , $letras);
$alto_linea = abs($caja_texto[7]-$caja_texto[1]);
$num_lineas = intval($alto_caja / $alto_linea)+1;
// Dibujo las letras del fondo
// Cada letra de escribe de una en una para poder
// darle una rotación independiente al resto
$pos = 0;
for ($i = 0; $i<$num_lineas; $i++) {
$x = 0;
for ($j = 0; $j<30; $j++) {
$texto_linea = $letras[rand(0, strlen($letras)-1)].' ';
$caja_texto = imagettfbbox($tam_letra, 0, $fuente , $texto_linea);
imagettftext($im, $tam_letra, rand(-$angmax, $angmax), $x, $alto_linea*$i, $colorLetraFondo, $fuente , $texto_linea);
// Posicion x de la siguiente letra
$x += $caja_texto[2] - $caja_texto[0];
}
}
// Escribo las tres letras del CAPTCHA
$res = $letras[rand(0, strlen($letras)-1)];
$ang1 = rand(-$angmax, $angmax);
$caja_texto = imagettfbbox($tam_letra_grande, $ang1, $fuente , $res);
$y1 = abs($caja_texto[7]-$caja_texto[1]);
$x1 = abs($caja_texto[2]-$caja_texto[0]);
$res .= $letras[rand(0, strlen($letras)-1)];
$ang2 = rand(-$angmax, $angmax);
$caja_texto = imagettfbbox($tam_letra_grande, $ang2, $fuente , $res[1]);
$y2 = abs($caja_texto[7]-$caja_texto[1]);
$x2 = abs($caja_texto[2]-$caja_texto[0]);
$res .= $letras[rand(0, strlen($letras)-1)];
$ang3 = rand(-$angmax, $angmax);
$caja_texto = imagettfbbox($tam_letra_grande, $ang3, $fuente , $res[2]);
$y3 = abs($caja_texto[7]-$caja_texto[1]);
$x3 = abs($caja_texto[2]-$caja_texto[0]);
imagettftext($im, $tam_letra_grande, $ang1, ($ancho_caja/2)-(($x1+$x2+$x3)/2), $y1+($alto_caja-$y1)/2, $colorLetra, $fuente , $res[0]);
imagettftext($im, $tam_letra_grande, $ang2, ($ancho_caja/2)-(($x1+$x2+$x3)/2)+($x1), $y2+($alto_caja-$y2)/2, $colorLetra, $fuente , $res[1]);
imagettftext($im, $tam_letra_grande, $ang3, ($ancho_caja/2)-(($x1+$x2+$x3)/2)+($x1+$x2), $y3+($alto_caja-$y3)/2, $colorLetra, $fuente , $res[2]);
imagepng($im);
imagedestroy($im);
imagedestroy($im2);
?>
Un ejemplo lo podéis ver en la misma imagen que aparece arriba, ya que es dinámica y se modifica al recargar la página.