Instalando Chromixium en una máquina VirtualBox.

Download PDF

He de confesarles que utilizo como navegador web al Mozilla Firefox, que es muy bueno y al Iceweasel que es mejor aún, pero no pueden competir con el caché web alojado en los servidores de Google para su navegador Chromium o Chrome. Es por ello que estaba buscando la manera de instalarlos de la manera más rápida y práctica posible y no me sentía a gusto; luego leí el reportaje «Chromixium: fusiona lo mejor de Chrome OS y Ubuntu» así que ni tardo ni perezoso me dispuse a bajarla por torrent y al poco rato la había instalado y estaba funcionando. RECOMIENDO presten atención en el particionado del disco, un detallito si escogen la opción «automatica»; donde tuve más contratiempo fue en la configuracion de teclado y lenguaje. Acá está el enlace para los detalles completos de requerimientos e instalación (en inglés) pero primero dediquen un tiempito a mirar el video y tendrán mejor panorama de la instalación.

Actualizado el 16 de noviembre de 2015:

He descargado la nueva versión 1.5 (debería ser la versión 15, pero en fin, que es la última versión publicada) y les traigo de nuevo la instalación. Lo diferente en este caso es que seleccioné completo el disco duro, todo lo demás lo dejé igual. Apliando el tema de uso del Google Chrome es que tiene ciertas características que me hacen la vida más llevadera a la hora de usar el Twitter. He aquí como quedó ahora {la otra máquina virtual la borré, esto de virtualizar es maravilloso 😎 }:


Advertencia.
Advertencia.

En este artículo hemos centralizado los diversos temas sobre Ubuntu:

Resolviendo problemas inherentes a VirtualBox


<Eso es todo, por ahora>.

Download PDF
VirtualBox bajo GNU/Linux Canaima.

VirtualBox kernels Canaima Linux.

Download PDF

VirtualBox kernels Canaima 4.1 kukenan x86 (virtual).

ESTE PROBLEMA ME QUITABA EL SUEÑO, ya no más 😎 .

Publicado el viernes 24 de abril de 2015

Última actualización: jueves 27 de junio de 2019

VirtualBox kernels Canaima: en la entrada anterior les indiqué cómo «instalar» una máquina virtual Canaima en una máquina REAL que corre Ubuntu+VirtualBox. Vayan a este enlace, refrescan la memoria y luego regresan.


«O inventamos o erramos»


Como pudieron observar en el video correspondiente, la máquina virtual quedó instalada y funcionando. Luego se me ocurre la pregunta ¿Puedo instalar VirtualBox en ésa máquina virtual Canaima que acabo de crear?

La respuesta es SI, si se puede,

pero es más fácil decirlo que hacerlo,

je je je. 😉

No voy a entrar en detalles profundos para instalar VirtualBox,  yo lo he instalado en diferentes sistemas operativos sin problema alguno pero en GNU/Linux Canaima hay que hacerle dos pasos adicionales a todo lo que explican MUY CLARAMENTE en la página de dicha empresa de software:

-> https://www.virtualbox.org/wiki/Linux_Downloads

En el manual en inglés (más detallado aún que la página web) explican este procedimiento como:

«It builds the VirtualBox kernel modules (vboxdrv, vboxnetflt and vboxnetadp) and installs them.

Ya bien lo aclara el manual, para que VirtualBox acceda a ciertos recursos REALES de la computadora debe estar sincronizado con la versión linux en que se ejecuta; IMAGINO con propósitos de «compilar» y tener una versión muy bien adecuada al sistema que uno posea.

Los comandos «truco» son:

apt-get install build-essential module-assistant
m-a prepare

(aunque he de confesarles que yo instalé varias paqueterías primero -que no recuerdo cuáles fueron- y hasta hice una actualización de software completa, de allí que al principio del vídeo aparezca el mensaje de poco espacio en disco)

Sin más, pues, les presento el video, ALOJAMIENTO CORTESÍA DE YOUTUBE:

Reconocimiento de autoría.

Debo reconocer que el script que me ayudó a instalar el VirtualBox en Canaima me lo suministraron dos personas con los cuales estoy sumamente agradecido:

  • Twitter: @abr4xas
  • Twitter: @cotoprixve

Espero yo retribuir conocimientos algún día (aunque CREO ya lo estoy haciendo con esta entrada a mi blog), y ya lo saben:



Duerman tranquilos, duerman contentos PERO PRIMERO COMPARTAN SUS CONOCIMIENTOS CON TODOS LOS QUE PUEDAN, es la razón de ser del Software Libre 😎 .



Actualizado el sábado 30 de enero de 2016:

   En Ubunlog.com, sitio web dedicado a reseñar «tutoriales, escritorios y software para Ubuntu» publica un problema parecido al que reportamos por acá, pero en este caso el contratiempo es la actualización del propio kernel del GNU/Linux que «choca» con el ya instalado VirtualBox. La propuesta es interesante y toman otra vía que merecemos reseñar en esta entrada para así compartir el conocimiento, bastión fundamental del Software Libre.

El autor es Miguel Pérez, ciudadano español y estudiante de Ingeniería Informática en la Universidad de las Islas Baleares, dicho artículo pueden visitarlo en este enlace web.


Actualizado el viernes 8 de diciembre de 2017.

Nos tocó instalar VirtualBox sobre la madre de todas las distribuciones: Debian en su nueva y flamante versión 9 «Stretch», allá el problema era que teníamos un kernel muy moderno; esperamos disfruten nuestra entrada, hagan click en este enlace.


Actualizado el jueves 27 de junio de 2019

Aquí vamos de nuevo, esta vez decidimos actualizar el kernel de Linux en Ubuntu 18.04:

uname -a
uname -a

Y al intentar utilizar una máquina virtual aparece este mensaje:

VirtualBox - NS_ERROR_FAILURE (0x80004005)
VirtualBox – NS_ERROR_FAILURE (0x80004005)
sudo apt-get install virtualbox (inicio)
sudo apt-get install virtualbox (inicio)
restart libvirtd.service
restart libvirtd.service
sudo apt-get install virtualbox (final)
sudo apt-get install virtualbox (final)

<Eso es todo, por ahora>.

Download PDF
ALT+F2 Canaima Kukenan.

GNU/Linux: linea de comandos (bash shell).

Download PDF

Introducción al BASH shell.

Publicada el jueves 16 de abril de 2019

Actualizada el sábado 12 de octubre de 2019

Algo que acompaña a todas las distribuciones GNU/LINUX es la terminal de línea de comandos (Unix shell, bash shell, o simplemente «shell») la cual puede ser lanzada en modo de superusuario (root) o con la identidad con que hayamos iniciado sesión (aunque aún así podemos ejecutar comandos con privilegios de superusuario anteponiendo el comando sudo acompañado de su respectiva contraseña) o «escalando» privilegios con el comando su (más contraseña).

Continue reading

Download PDF

GNU Linux Canaima 4.1 x86.

Download PDF

Hay muchísimas distribuciones Linux, eso es la libertad pura y sincera. Aquí en Venezuela esta distribución es apoyada por el Gobierno de la República Bolivariana de Venezuela en su página dedicada al respecto. Recomiendo descargue por vía torrent ya que comparto esta archivo .iso y allí mismo tienen el hash md5 para comprobar que dicho archivo se haya descargado correctamente, doble verificación ya que el protocolo torrent tiene también su mecanismo de comprobación.

En mi caso utilizaré VirtualBox 4.3.10 corriendo sobre Ubuntu 14.04 LTS 64 bits, sobre el proceso de instalación de este programa de virtualización de computadoras le dedicaremos su entrada correspondiente.

Menú_005No abundaré en muchos detalles para el proceso de instalación, pero si los necesarios para lograrlo con éxito, espero me disculpen mi parquedad en esta entrada. En VirtualBox hacemos click en «Crear nueva máquina virtual» y se abre el siguiente cuadro de diálogo:

Crear máquina virtual_015

Y seleccionamos «Debian 32 bits» ya que VirtualBox así lo manifiesta en sus manuales «soportamos sólo las principales distribuciones» ya que es imposible colocar todas para seguirlas a una por una. Al hacer click en siguiente nos pregunta la cantidad reservada a la máquina virtual y dejamos el valor por defecto, 512 megabytes:

Crear máquina virtual_016

Lo siguiente es configurar el disco duro virtual, tenemos varias opciones pero elegiremos el formato por defecto .vdi y de manera dinámica, es decir, el archivo crece a medida que la máquina virtual se va instalando pero no sobrepasará en ningún caso la cantidad asignada 8 gigabytes (si necesitaramos más espacio para el disco duro virtual hay una manera por linea de comando pero merece su entrada aparte):

Crear máquina virtual_017Crear unidad de disco duro_007Crear unidad de disco duro_020Una vez hayamos creado el disco duro virtual y finalizado la creación con los valores que sugiere VirtualBox debemos hacer unos ajustes adicionales e importantes para comenzar a isntalar el sistema operativo GNU Linux Canaima. Primero seleccionamos la máquina virtual que acabamos de crear y hacemos click en configuración y se abre el siguiente cuadro de diálogo:

GNU_Linux_Canaima_X86 - Configuración_021Hacemos click en la pestaña «Sistema» donde vamos a desmarcar y bajar la opción de disquete dejando de primero el arranque por «CD/DVD/BLURAY» y de segunda «DISCO DURO» y en el dispositivo apuntador seleccionamos «Ratón PS/2»:

GNU_Linux_Canaima_X86 - Configuración_022Luego hacemos click en «Pantalla» y en «Memoria de vídeo» le colocamos 32 megabytes (que era lo que tenía de video mi primera computadora 486 en los años 90, con una tarjeta PCI, para Linux es más que suficiente):

GNU_Linux_Canaima_X86 - Configuración_023A continuación seleccionamos «Almacenamiento» iremos a lo más importante que es señalarle dónde se encuentra ubicado nuestra imagen .iso del Canaima y se lo especificamos en la unidad de cd virtual tal como lo vemos a continuación:

GNU_Linux_Canaima_X86 - Configuración_025GNU_Linux_Canaima_X86 - Configuración_026Por último vamos a la pestaña «Red» y le colocamos en «Conectado a» le especificamos «Adaptador puente» y expandimos «Avanzadas» y desmarcamos «Cable conectado» para que no se conecte al internet.

Lo que sigue a continuación es largo de describir,  pero revisando la pestaña «Pantalla» observo la opción «Captura de video» de donde pude grabar (con los valores por defecto) todo el proceso de instalación que para mi sorpresa descubro que graba en el formato .webm el cual es libre y orientado al HTML5. El reproductor que lo abre y visualiza es el VLC Y TAMBIÉN EL MOZILLA FIREFOX SIN NINGÚN TIPO DE PROBLEMA. Es también un formato soportado por Youtube así que se me ocurrió subirlo y presentarlo en ese formato multimedia, adaptándome al siglo XXI y orgullosamente aquí se los presento:

Ya para finalizar la entrada os confieso que traté de instalarle las «Guest Additions» para que VirtualBox pueda «pasar» dispositivos USB, carpetas compartidas y muchas otras características pero cansado y con sueño cometí errores y no finalizé por eso os ruego obvien del minuto 25:17 en adelante; gracias por su comprensión.

<Eso es todo, por ahora>.

Download PDF

Curso básico de HTML 5.

Download PDF

Ya usted, ellos, ellas y yo lo sé: hay infinidad de tutoriales en internet sobre HTML: sería «llover sobre mojado» volver a tratar el tema, pero ¿quién dijo miedo? 😉

En mi caso, el que me ocupa, es actualizarme al HTML 5 y enfrentar a dos viejos «demonios» en esto de la creación de páginas web. Y no, no me refiero a los servicios en GNU/Linux a los cuales llamamos «D.A.E.MON» si no a los dos grandes problemas que debemos enfrentar antes de comenzar a escribir una sola línea de código en HTML:

  1. La multitud de navegadores web existentes y el legado que traemos a rastras, ya que muchas personas se niegan a actualizar sus programas. Agreguemos a eso las particularidades de los nuevos celulares con Android y ni mencionemos los celulares con WAP (y por ende WML) que aún están en uso con sus micronavegadores.
  2. Los gustos de nosotros los seres humanos en cuanto a diseño, colores y funcionalidad de las páginas web (en otra entrada presentaré las hojas de estilo en cascada con las cuales enfrentaremos este aspecto).

Y para no abrumarlos ni abrumarlas más comienzo de una vez el tema.

Continue reading

Download PDF
CAPTCHA con PHP.

Un CAPTCHA fácil y sencillo de implementar.

Download PDF

CAPTCHA

Introducción:

Siempre me ha llamado la atención los CAPTCHACompletely Automated Public Turing test to tell Computers and Humans Apart«) que hay en muchas páginas web y que permiten diferenciar consultas hechas por humanos de las hechas por «arañas» que pululan por internet (son también conocidas como «robots»). La diferencia esencial en este caso con respecto a la prueba de Turing es que se trata de convencer a una máquina que es un humano, osea el inverso de la prueba.

En el idioma inglés existe la filosofía K.I.S.S. y la practico frecuentemente ya que los sistemas complejos tienden al caos de manera natural. Es por ello que buscando por internet (precisamente ayudado por las «arañas» que pretendo combatir, ¡qué ironía!) he encontrado el siguiente artículo que me deslumbró por su simplicidad más al cabo de una hora de estudio observo los elementos implícitos sin los cuales NO funciona. Recomiendo vayan y lean dicho artículo y regresen cuando lo hayan asimilado, yo por aquí les espero. 😎


El artículo data del año 2007 pero considero que no ha perdido vigencia alguna, si administran una página web bancaria o son partidarios del último grito de la moda, recomiendo desistan de seguir leyendo esto. 😉

Pues bien manos a la obra.

Requisitos previos.

Utilizo una máquina virtual con Debian Wheezy con la cual estudio el programa para base de datos PostgreSQL a la cual le he instalado también un servidor Apache con PHP: este tipo de configuración es llamado LAMP por sus siglas en inglés, sólo que en aquí en realidad es un LAPP: Linux, Apache, PostgreSQL y PHP. Hay muchísimos tutoriales para instalar este tipo de servidores por ello partimos de la base que ustedes cuentan con uno en funcionamiento y para pruebas (no utilicen un servidor «en producción» hasta tanto no estén completamente seguros de este código). Importante recalcar que no utilizaremos funciones de bases de datos en esta entrada, pero muy frecuentemente las CAPTCHA se utilizan en este tipo de ambiente, por ejemplo, registrar usuarios en una lista de correo electrónico (tremenda tentación para los «robots spam»), así que allí encaja perfectamente.

Configuración adicional.

Al servidor LAPP anteriormente descrito debemos instalarle unas librerías para el trabajo gráfico bajo el lenguaje PHP. Aquí está muy bien descrito a lo que me refiero, haciendo la salvedad que dichas librerías NO SIEMPRE están instaladas por defecto.

En todo caso debemos crear una carpeta bajo la raíz web del servidor Apache con el nombre «captcha» y donde alojaremos el siguiente archivo «info.php»:

<?php
// Archivo "info.php":
// Muestra toda la información, por defecto INFO_ALL
phpinfo();
?> 
y luego iremos a nuestro navegador web preferido a la dirección IP que le hayamos asignado en nuestra red de área local. En mi caso dicha dirección es 192.168.1.27 en la carpeta «captcha»:
 
captcha01En dicha página debemos buscar si están instalados los siguientes valores:
 
captcha02Dado el caso que no se encuentren instaladas dichas librerías debemos recurrir a la línea de comandos y escribir lo siguiente:
 
sudo apt-get install php5-gd
y verán algo más o menos parecido a esto (en mi caso no necesité el comando «sudo» porque ya había ganado acceso como root con el comando «su»):
 
captcha_003
Dichas librerías son necesarias para el trabajo con imágenes jpg, png y gif, entre otros formatos y funciones.
 

Imagen de fondo para el CAPTCHA:

Necesitaremos un imagen tipo gif con unas dimensiones de 100×30 píxeles con colores adecuados teniendo en cuenta que las letras serán negras buscaremos colores como azul o verde o el que gusten pero no de color negro. Yo elegí la siguiente imagen (aunque al final agregaremos varios elementos para dificutarles la tarea de lectura a los «robots» con técnicas OCR ): bgcaptcha.gifComo ven es una imagen con degradado que busca confundir al OCR pero con legibilidad al ser humano; no obstante usar este mismo fondo siempre y con la ayuda de la «fuerza bruta» se puede descifrar al poco tiempo -pero de eso nos encargaremos luego, de «complicarlo» para tratar de eludir la lectura-. La imagen la guardaremos en la carpeta de trabajo en el servidor web bajo el nombre «bgcaptcha.gif» (nemotécnico ‘BackGroundCaptcha.gif’=’bgcaptcha.gif’).

Para bajar archivos por líneas de comando

recomiendo usar «wget», por ejemplo:

«wget    http://www.e.com/imagen_a_bajar.gif      nombre_imagen.gif»

Creación del archivo «captcha.php».

Dicho archivo se encargará de tomar la imagen anterior y, aleatoriamente, «escribirle» letras encimas, almacenarlas en una variable (que leeremos con luego con el método POST) y mostrarla al navegador; para ello utilizaremos el siguiente código que explicaremos línea por línea:

<?php
  //Archivo 'captcha.php'
  session_start();
  $_SESSION['tmptxt'] = randomText(7);
  $captcha = imagecreatefromgif("bgcaptcha.gif");
  $colText = imagecolorallocate($captcha, 0, 0, 0);
  imagestring($captcha, 5, 16, 7, $_SESSION['tmptxt'], $colText);
  header("Content-type: image/gif");
  imagegif($captcha);
  imagedestroy($captcha);
?>
  • Para que el servidor sepa dónde comienza y dónde termina el lenguaje PHP debemos encerrarlo todo con los siguientes comandos: «<?php (…) ?>» y donde van los paréntesis y puntos suspensivos ubicaremos nuestro código a ejecutar. Todo lo que esté fuera de estos demarcadores será considerado lenguaje HTML e interpretado como tal.
  • Cada final de sentencia le será indicado al servidor con un punto y coma «;».
  • Los comentarios, que son importantísimos para nosotros los seres humanos, para las máquinas carecen de importancia y se identifican con «//» y la derecha el texto explicativo.
  • La función «session_start()» permite crear o recuperar un identificador único que servirá para que el servidor pueda atender varios clientes al mismo tiempo sin confundir las respuestas de cada usuario. No debemos preocuparnos mucho ya que todo es automatizado, si acaso dedicaremos una sentencia «if-then-else» por si acaso devuelve el valor «falso», es decir, no se pudo iniciar sesión (todo el mundo da por sentado que devuelve «verdadero»). Importante, muy importante, el comprender sobre el cómo PHP compara dos variables y/o valores para devolver «verdadero» o «falso», merece su estudio de 10 minutos.
  • La función «$_SESSION[]» permite asignar un valor a una variable en la sesión iniciada en el punto anterior y es un variable de arreglo global. El texto, que será aleatorio, lo proporcionará la función «randomText()» que escribiremos luego.
  • La función «imagecreatefromgif()» nos permitirá «cargar en memoria» la imagen que destinamos como fondo del CAPTCHA y devolverá un «identificador de imagen» representado en una variable que usaremos para agregar el texto que identificará e introducirá el usuario, ser humano. De nuevo digo que deberíamos destinar un «if-then-else» dado el caso la función devuelva «falso».
  • El comando anterior nos permitió establecer el «lienzo» donde vamos a escribir las letras aleatorias; pues el comando «imagecolorallocate()» nos permite fijar el color con que las «pintaremos»: «0, 0, 0» corresponde al color negro en la codificación de valores «RGB», «Red Green Blue» y cuyos valores van del 0 al 255 cada uno y nos permite usar +16 millones de colores. Luego echaremos mano de esta función para confundir aún más a los «robots», por ahora nos conformaremos con el color negro. Es de hacer notar que para esta función CERO es «falso» y cualquier otro valor es «verdadero», si usted considera esto una tontería le invito a leer la disertación sobre el tema, está avisado o avisada.
  • La funcíon «imagestring()» dibuja una cadena de texto en nuestro «lienzo», la imagen gif seleccionada. Los parámetros de esta función son: (image, font, x, y, text, color)  y los detallo a continuación:
    1. image: la que cargamos en memoria con la función imagecreatefromgif() y que llamamos $captcha.
    2. font: numeradas del 1 al 5 y es la fuente nativa predeterminada en la librería GD e incluso nos permite cargar nuestras propias fuentes pero debemos cargarlas y compilarlas de acuerdo a la arquitectura de nuestro servidor. Si se entusiasman a realizar esto último deberán cargar dicha fuente «compilada» con la función imageloadfont() de acuerdo a unos valores binarios. Más interesante hallo utilizar la función imagettftext() NO SIN ANTES VERIFICAR el phpinfo() devuelva que el ambiente del servidor lo soporte (si quieren saber más sobre fuentes True Type en GD visiten este enlace): captcha_004
    3. Coordenadas X e Y: tomadas a partir de la esquina superior izquierda, pónganse de cabeza para que las entiendan (ahhh me recuerdo de la materia Geometría Analítica, ¡qué belleza para Autocad! ¡Y dibujábamos por comandos escritos en papel fuera del laboratorio de computación!).
    4. text: en este caso lo que ya tenemos almacenado en la variable global de sesión «$_SESSION[‘tmptxt’]».
    5. color: el que establecimos a negro con la función «imagecolorallocate()».
  • La función «header()» permite que nuestro servidor se ciña a las normas del lenguaje HTML que consiste en «notificarle» al navegador web (en formato NO html) que le será enviado un flujo de datos, por defecto «application/octet-stream», pero que nosotros utilizaremos para indicarle que es una imagen gif «Content-type: image/gif». Si desean conocer más acerca del nacimiento de la web y sus normas de funcionamiento de la mano del mismísimo Tim Berners-Lee hagan click en este enlace.
  • Por último la función «imagegif()»  instruye a nuestro servidor que le envie la imagen al navegador del usuario, el CAPTCHA que queremos interprete el ser humano.
  • Una función que considero importante y que yo agrego al código mostrado originalmente -y del que desconozco la autoría- es «imagedestroy()» a fin de liberar la memoria utilizada por la variable «$captcha». Aunque toda la memoria se libera cuando el usuario cierra su navegador o cuando nosotros mismos invocamos «session_destroy()» nunca está demás liberar «trabajo» apenas sea posible.

Creación de la función «randomText()».

Ahora explicaré la función que devuelve una cadena de texto de manera aleatoria pero con dos mejoras al código fuente original, el cual es el siguiente:

function randomText($length) {
  $pattern = "23456789abcdefghijkmnpqrstuvwxyz";
  for($i=0;$i<$length;$i++) {
    $key .= $pattern{mt_rand(0,32)};
  }
  return $key;
}
  • Las funciones en PHP se declaran con la palabra clave reservada «function» y los argumentos se pasan entre paréntesis separados por comas.
  • Todo el cuerpo de la función esta demarcado por inicio y fin de corchetes «{ … }».
  • La función toma como parámetro la variable «$lenght» la cual toma el valor de «7» al hacer el llamado de la siguiente manera: «randomText(7)». Por ende nuestro CAPTCHA tendrá 7 caracteres, recuerden que estamos limitados al espacio del «bgcaptcha.gif».
  • En la primera variable «$pattern» establecemos los caracteres que queremos mostrar al usuario, no repetidos, y aquí va la primera mejora que les dije antes: NO incluyo el número uno («1»), ni la letra ele («l») ni tampoco el número cero («0») ni la letra o («O») porque se trata de ponersela difícil al «robot», no al ser humano, quien puede confundir dichos signos.
  • Utilizamos un ciclo «for» similar al usado en lenguaje C, es decir, un valor de inicio, una condición que se evalúa en cada ciclo y un incremento en cada ciclo. Así establecemos que al escribir «for ( $i=0; $i<$length; $i++ ) {…}» estamos ordenando ejecutar un ciclo basado en la variable «$i» que comienza desde cero y que mientras sea menor que la longitud de caracteres de nuestro CAPTCHA se incremente en una unidad para cada ciclo, «$i++».
  • Dentro de los corchetes del ciclo «for» anterior colocamos la variable «$key» que se autoconcatena en cada rizo «.=» con una letra aleatoria del patrón elegido y que llevamos asignado en la variable $pattern.
  • En el lenguaje PHP (e igualmente en Python) cada cadena de caracteres es considerada de manera implícita una matriz de una sola fila, esto nos permite «imprimir» en el navegador del usuario una letra del patrón, por ejemplo «echo $pattern{10}» devolverá «b».
  • ¿Cómo escogemos una letra cualquiera del patrón? Aquí es donde viene la segunda mejora que les comenté: en vez de usar la función «rand()» utilizamos la función «mt_rand()» la cual, aparte de ser más rápida nos permite utilizar números más grandes (de ser necesario). Dicha mejora la propone un usuario llamado «caos30» en los comentarios de la entrada del blog en la cual se inspira este tema. Esta función tiene dos argumentos que nos permiten acotar el número devuelto: para este caso es (0, 32) que es precisamente el largo del patrón que escogimos (el abecedario inglés 26 caracteres más los diez dígitos numéricos son 36 menos 4 que eliminé para evitar confusiones a los humanos).
  • Es necesario el comando «return» acompañado de la variable que debe devolver la función, en nuestro caso es un tipo «cadena de texto».

Guardado del archivo «captcha.php».

Ya suficientemente explicado línea por línea el código unimos ambos algoritmos y con el editor de texto nano (o el que ustedes prefieran) guardamos en la carpeta «captcha» que hicimos en «\var\www» (donde generalmente Apache guarda el sitio web):

<?php
  //Archivo 'captcha.php'
  function randomText($length) {
    $pattern = "23456789abcdefghijkmnpqrstuvwxyz";
    for($i=0;$i<$length;$i++) {
      $key .= $pattern{mt_rand(0,32)};
    }
    return $key;
  }
  session_start();
  $_SESSION['tmptxt'] = randomText(7);
  $captcha = imagecreatefromgif("bgcaptcha.gif");
  $colText = imagecolorallocate($captcha, 0, 0, 0);
  imagestring($captcha, 5, 16, 7, $_SESSION['tmptxt'], $colText);
  header("Content-type: image/gif");
  imagegif($captcha);
  imagedestroy($captcha);
?>

Antes de continuar nos aseguramos que la CAPTCHA se ejecute y muestre correctamente en nuestro navegador conectado a nuestro servidor LAPP de pruebas:

captcha_005

Cada vez que pulsamos CTRL+F5 nos mostrará una CAPTCHA diferente cada vez y asigna a la variable «$_SESSION[‘tmptxt’]» el valor deberá comparar con el valor introducido por el usuario humano. El siguiente paso es hacer la interfaz para la presentación e introducción de los datos.

Formulario web «captchademo.php».

El uso básico de sesiones bajo PHP está explicado en detalle en este enlace. No obstante buscando la simplicidad para la comprensión de todos ustedes, amables y pacientes lectores, haremos un archivo php para mostrar la CAPTCHA e introducir la respuesta del usuario y otro archivo php donde compararemos la respuesta; a este archivo lo llamaremos «captchaanswer.php» y esta explicado más adelante.

Sin más pretensiones de seguridad ni estética escribiremos el siguiente código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CAPTCHA con PHP</title>
<meta name="description" content="CAPTCHA con PHP: ejemplo para demostrar la creacion de Captcha con PHP." />
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center">
     <strong>CAPTCHA con PHP </strong><br>
     Ingresar el texto mostrado en la imagen: <br>
     <form action="captchaanswer.php" method="post">
       <img src="captcha.php" width="100" height="30" vspace="3"><br>
       <input name="tmptxt" type="text" size="30"><br>
       <input name="btget" type="submit" class="boton" value="Enviar">
       <input name="action" type="hidden" value="checkdata">
     </form>
   </td>
 </tr>
</table>
</body>
</html>

Al navegar nuestro servidor de prueba podrán ver algo parecido a esto:

captcha_006Todo el código anterior es puro lenguaje HTML y mencionaré brevemente línea por línea y su cierre correspondiente (nota: los términos que usaré para describir lo que sucede probablemente hiera la sensibilidad académica de algún lector, no obstante recuerdenme y escríbanme si estoy equivocado) :

  • Etiquetas «<html>…</html>»: le indica a nuestro servidor dónde comienza y dónde termina el lenguaje HTML, veremos en una entrada futura que esto es esencialmente útil en nuestros «scripts php».
  • Etiquetas «<head>…</head>»: contiene información prioritaria que nuestro servidor tendrá que darle tratamiento especial, leer próximo punto.
  • Etiquetas «<meta (…) />»: estas etiquetas contienen datos que describen datos y están categorizados. La categoría «Content-Type» la describimos anteriormente pero en esta ocasión la usaremos para decirle al navegador del cliente que la vamos a enviar lenguaje HTML y que lo interprete como tal. Envuelve mayor complejidad una solicitud HTTP pues incluye códigos numéricos de respuesta y aceptación pero con saber que esta información es una de las primeras que se envían es más que suficiente.
  • También en los metadatos podemos incluir la codificación de caracteres utilizados en la página web (algún día cuando usemos todo en 128 bits esto caerá en desuso) por medio del comando «UTF-8».
  • Hay ciertas palabras claves reservadas en los metadatos y es lenguaje de alto nivel, el que usamos usted y yo, seres humanos. Uno de ellos es la palabra name=»description» que nos permite especificar a manera general el propósito principal de la página.
  • En este punto es útil preguntarnos ¿para qué es todo esto del encabezado? Para ello debemos recordar que hace 20 años el ancho de banda en internet era «oro en polvo» y el protocolo se diseñó para no cargar la página completa de un solo golpe sino que echaramos «un ojo» antes de descargar completo. Hoy en día se ha vuelto obsoleto (yo escucho una radio por internet, mientras corro una máquina virtual que actualiza su software desde varios repositorios y otra máquina virtual «baja» parches de seguridad mientras escribo estas líneas ‘en línea’ y además de tanto en tanto superviso servidores de datos remotos; el tráfico de datos es asombroso) pero aún sigue siendo útil para las «arañas» o buscadores como https://duckduckgo.com/  a fin de categorizar las páginas web visitadas y de las cuales hasta guardan una copia espejo, datos, datos y más datos; discos duros a reventar (alguien dijo alguna vez «lo que se sube a internet allí se queda», yo lo creo fehacientemente 😯 ).
  • Con las etiquetas «<title>…</title>», valga la redundancia, titulamos nuestra página (el «caption» de la ventana) y algunos navegadores agregan su propio nombre como pueden ver el ejemplo mostrado.
  • Dentro de las etiquetas «<body>…</body>» insertaremos la página web en sí, sólo que en este caso es un formulario para mostrar e introducir los datos.
  • Con «<table><tr><td>…</td></tr></table>» dibujaremos una tabla de un solo cuadro ayudados por el concepto de anidación de etiquetas ¿recuerdan el método de la «doble C» para dividir fracciones? Pues bueno es algo parecido a eso.
  • Con «<strong>…</strong>» podremos poner en negritas lo escrito entre las etiquetas.
  • Con «<br>» le decimos al navegador que termina una línea y comience una nueva.
  • He aquí lo más importante: «<form>…</form>». Allí declaramos y establecemos los elementos del formulario en sí.
  • Con form <form action=»captchaanswer.php» method=»POST»> indicamos que las variables siguientes sean pasadas a otro «script php» con el método «POST» para que el usuario no visualize las variables(a diferencia del método «GET»).
  • He aquí la «magia»: al pasar la orden de visualizar la imagen CAPTCHA realmente le indicamos es que ejecute el «script»: <img src=»captcha.php» width=»100″ height=»30″ vspace=»3″> y que lo muestre como tal (con ayuda de «header()»).
  • Los demás elementos son para dibujar el cuadro de texto y el botón enviar, creo no merecen mayor explicación.
  • Las normas estéticas las agregaremos en una próxima entrada pero de manera normalizada, como el tema es largo y quiero escribirlo desde hace tiempo le dedicaré una entrada aparte.

Actualizado el lunes 22 de febrero de 2016.

Para prevenir que los servidores proxy instalados en redes de área local NO guarden en caché la imagen de nuestro CAPTCHA podemos hacer uso de generar diferentes nombres al «archivo» de imagen misma con, por ejemplo, la función uniquid de la siguiente manera:

<?php
  echo "<img src='";
  echo uniqid("captcha", true);
  echo ".php' width='100' height='30' vspace='3'><br>";
?>

Formulario web «captchaanswer.php»

Como ustedes pueden ver loq ue yo llamo «formularios web» o «páginas web» en este servidor LAPP son en realidad unos «scripts» en lenguaje PHP. El que nos ocupa ahora es el que se invoca cuando el usuario pulsa el botón «Enviar»:

<?php
    session_start();
    if ($_POST['action'] == "checkdata") {
        if ($_SESSION['tmptxt'] == $_POST['tmptxt']) {
            echo "Bienvenido.";
        } else {
            echo "Intentalo nuevamente.";
        }
        exit;
    }
?>

De nuevo lo analizamos línea por línea obviando, por supuesto, las funciones y comandos que de nuevo encontremos y hayamos explicado antes:

  • Es necesario llamar a la función «session_start()», recordemos dicha función también nos permite recuperar los datos de la sesión almacenados en la variable global.
  • La próxima acción es verificar que la variable ‘action’ esté establecida a ‘checkdata’  de no ser así pues simplemente finaliza y sale sin aviso alguno.
  • El punto decisivo es la comparación de la cadena aleatoria creada por el script «captcha.php» y compararla con la enviada por el usuario. De ser iguales emite el mensaje «BIENVENIDO» y aquí es donde podemos ubicar el código que nos interesa: la publicación de un comentario a una entrada de blog, la confirmación a una lista de correos, etc.

Conclusiones.

Esto es sólo un abreboca de lo que podemos realizar con PHP en cuanto a gráficos se refiere, estoy consciente que para las normas actuales es un CAPTCHA bastante débil pero lo podemos mejorar hasta llevarlo a un nivel básico. Para mi caso particular lo voy a implementar de una vez en un «servidor de producción» y que trabaje de una vez.

Lecturas adicionales

En idioma castellano

En idioma inglés

<Eso es todo, por ahora>.

Download PDF