Metal Captcha: Parando los pies a los bots estilo moshpit

Una simpática idea de la gente de Heavygifts, una web húngara de merchandising metalero, que he visto en MetalSucks hoy: LOS METAL CAPTCHA.

Captcha es la abreviatura de Completely Automated Public Turing test to tell Computers and Humans Apart y se trata de un sistema para evitar que bots automatizados hagan login en tu sistema. Los has visto mil veces al intentar enviar un formulario en alguna web, cuando te ponen unas letras deformadas o una imagen con una palabra o número y te mandan escribir qué lees para confirmar que eres humano.

Pues la idea de estos Metal Captcha es hacer lo propio con logotipos de bandas de metal. Todavía no lo he probado, pero si queréis echarle un ojo os dejo por aquí la página de este simpático proyecto, que nació inspirado por una broma viral en las redes sociales.

Metal Captcha

Usar GoogleDrive como CDN

A la hora de mejorar la velocidad de carga de nuestra web es interesante usar un CDN para liberar de trabajo a nuestro servidor. Si bien es cierto que lo mejor sería pagar por uno a veces no nos compensa para el proyecto que realizamos. Y nos encontramos con otra opción: Usar una cuenta gratuita de GoogleDrive como CDN. ¿Es esto posible? Sí.

El primer paso, obviamente, es tener una cuenta de Google. Gracias a eso tendremos 15 GB de almacenamiento en GoogleDrive.Crea entonces dentro de tu cuenta una carpeta y llámala, por ser original, CDN.

Haz click derecho sobre la nueva carpeta y eliges la opción compartir. Una vez dentro de la ventana «Compartir» haces click en «Avanzada».

Compartiendo una carpeta en google drive
Esta imagen está siendo cargada desde una cuenta de drive

Por defecto la carpeta estará configurada para que sólo la veas tú, así que le das a cambiar y eliges la opción «Sí: Público en la web». Luego sólo te queda metar imágenes en esa carpeta.

otra imagen desde Drive como CDN

Ahora lo interesante es ver cómo usar esa imágenes en una web.

Si te vas a la foto y eliges «Compartir» te sacará un churro tal cual este

https://drive.google.com/file/d/0B-GFTravIZzzZWpkUnVwMkRLdUE/view?usp=sharing

La parte interesante viene con el id de la imagen, que sería 0B-GFTravIZzzZWpkUnVwMkRLdUE (es decir, lo que va entre el /d/ y el /view?usp=sharing. Para poder usar la imagen en vuestra web debéis utilizar esta estructura

https://drive.google.com/uc?export=download&id=

y pegarle detrás el id de la imagen, tal que así:

https://drive.google.com/uc?export=download&id=0B-GFTravIZzzZWpkUnVwMkRLdUE

La desventaja de este método está a nivel de posicionamiento, ya que cuando los buscadores encuentren la imagen no remitirá a tu sitio sino a Google Drive, aunque por otra parte te libras del riesgo de hotlinking. En todo caso, esto de proporciona una solución por si tiene un hosting gratuito con espacio muy limitado, o simplemente para mejorar la velocidad de carga de tus imágenes.

Javascript: Devolver 0 cuando parseInt() o parseFloat() reciban una cadena vacía

Tip rápido sobre Javascript: Imaginad que recogemos los datos de un formulario para que calcule en pantalla un sumatorio conforme el usuario los va introduciendo. Ahora imaginad que el usuario se deja un campo vacío. Cuando la función javascript se encuentre una cadena vacía, e intente convertirla a un número (con parseInt() o parseFloat() según lo que necesitemos) el resultado de la suma será NaN. ¿Cómo lo evitamos? Pues con un OR.

Si utilizamos el operador || seguido de un cero, tal como está en el ejemplo que verás a continuación, este evaluará de forma lógica la expresión, y en caso de que el primer término evaluado sea falso devolverá el segundo, un cero (el resultado NaN que devolverá la función que parse a número será evaluado como falso):

var s = '';
var total = 1;

//Si hago esto, el resultado es NaN
total = total + parseInt(s);

//Si hago esto, el resultado es 1
total = total + (parseInt(s) || 0;);

//con parseFloat funciona igual

Otra opción, utilizar el operador ternario ?:, como pusimos en otro ejemplo pasado.

jqPlot: mostrar la leyenda en varias columnas

El otro día trabajaba con la librería jqPlot, una librería para crear gráficas por medio de javascript y jQuery, y me encontraba con que la leyenda de un gráfico de tarta que estaba haciendo se salía de su elemento contenedor, dado que tenía muchas líneas (en concreto, 58). Me pregunté ¿Cómo hago para que se muestre en dos columnas?. Pensé que era obvio que a alguien le habría pasado ants y encontré la solución en stack-overflow:

//La localización no es importante, sólo el 
//rendererOptions
legend: { 
  show: true, 
  location: 'ne',
  rendererOptions: {numberColumns: 2}
}

Luego decidí bucear un poco más en la documentación y me encontré con un plugin que nos dará mayor versatilidad para trabajar con la leyenda: jqplot.enhancedLegendRenderer.js

La cuestión es invocarlo dentro de la configuración de la leyenda y, además de permitirnos definir el número de filas y columnas (cosa que ya podemos hacer con el renderer normal, pero en este han pulido algunos bugs) también nos permite ocultar/mostrar una serie al pinchar en la leyenda. Se me ocurrió usarlo para mostrar los resultados debajo de la gráfica, en 6 columnas de 10 filas, para que quedara más bonito. Total, que la cosa fue así:

//La localización no es importante, sólo el 
//rendererOptions
legend: {
  renderer: $.jqplot.EnhancedLegendRenderer, 
  show: true, 
  location: 's',
  rendererOptions: {numberColumns: 10, numberRows: 6}
}

Utilizar .htaccess para protegerse de inyecciones SQL

Llevo unos días que no encuentro tiempo para escribir, pero vamos con un tip cortito que puede servir de ayuda para mejorar la seguridad de nuestra web.

La inyección SQL es un peligro para la integridad de nuestros datos y ya más de una vez hemos visto formas de protegernos. Como un plus de seguridad nunca está mal, vamos a ver cómo usar el fichero .htaccess de nuestro servidor para conseguir un plus de protección contra este tipo de ataques. El siguiente cojunto de reglas nos ayudará a mejorar la protección de nuestro sitio:

RewriteCond %{QUERY_STRING} (;|<|>|’|”|\)|%0A|%0D|%22|%27|%3C|%3E|%00).*(/\*|union|select|insert|cast|set|declare|drop|update|md5|benchmark) [NC,OR]
RewriteCond %{QUERY_STRING} \.\./\.\. [OR]
RewriteCond %{QUERY_STRING} (localhost|loopback|127\.0\.0\.1) [NC,OR]
RewriteCond %{QUERY_STRING} \.[a-z0-9] [NC,OR]
RewriteCond %{QUERY_STRING} (<|>|’|%0A|%0D|%27|%3C|%3E|%00) [NC]
RewriteRule .* - [F]

Recordad que hay que tener el servidor configurado para que .htaccess esté activo y permita el filtrado de URL.

Calculando la distancia entre dos coordenadas en Java

Si no hace mucho os comenté por aquí cómo calcular la distancia entre dos puntos dadas sus coordenadas en MySQL (en ese artículo tenéis todo el tema del algoritmo para el cálculo más desarrollado, aquí vamos al grano), hoy vamos a ver cómo hacer una función que nos haga esta operación con Java.

La función recibe cuatro parámetros: las latitudes y longitudes de ambos puntos. Y devuelve un double con la distancia como resultado

public static double distanciaCoord(double lat1, double lng1, double lat2, double lng2) {  
        //double radioTierra = 3958.75;//en millas  
        double radioTierra = 6371;//en kilómetros  
        double dLat = Math.toRadians(lat2 - lat1);  
        double dLng = Math.toRadians(lng2 - lng1);  
        double sindLat = Math.sin(dLat / 2);  
        double sindLng = Math.sin(dLng / 2);  
        double va1 = Math.pow(sindLat, 2) + Math.pow(sindLng, 2)  
                * Math.cos(Math.toRadians(lat1)) * Math.cos(Math.toRadians(lat2));  
        double va2 = 2 * Math.atan2(Math.sqrt(va1), Math.sqrt(1 - va1));  
        double distancia = radioTierra * va2;  
  
        return distancia;  
    }  

El patrón Observer y su implementación en PHP

Volvemos con el tema de los patrones de diseño y PHP, que estaba abandonado (y ahora tengo más tiempo para escribir con el parón temporal del podcast). Esta tarde vamos a hablar del patrón Observer, que en castellano es conocido como el patrón publicación-inscripción.

La idea de este patrón es que nos permita definir una dependencia uno-a-muchos entre varios objetos, provocando que cuando uno cambie de estado se lo notifique a sus objetos dependientes. El objetivo de este patrón es reducir el acoplamiento entre clases que requieren mantener una gran consistencia en sus relaciones, siendo clave para la implementación del patrón MVC. Dentro de esta relación denominamos Sujeto al objeto que emite la información sobre el cambio de estado, y Observador al que la recibe para realizar la acción que sea necesaria.

Os dejo esta imagen con un diagrama cargado desde la Wikipedia para ilustrar su funcionamiento:

Diagrama Estructura Patrón Observer
Un diagrama de estructura del patrón Observer (publicación-inscripción).

En PHP 5, a partir de la revisión 5.1 contamos con las interfaces SplSubject y SplObserver para implementar respectivamente el sujeto y el observador.

Vamos con un ejemplo clásico: una tienda on-line que notifica la compra y la venta de un artículo.

<?php
class Articulo implements \SplSubject /*Empezamos importando la interfaz del sujeto*/
{
    protected $storage;

    public function __construct(\SplObjectStorage $storage)
    {
        $this->storage = $storage;
    }

    public function compra()
    {
        // compra
        $this->notify('comprado');
    }

    public function vende()
    {
        // vende
        $this->notify('vendido');
    }

    public function attach(\SplObserver $observer)
    {
        $this->storage->attach($observer);
    }

    public function detach(\SplObserver $observer)
    {
        $this->storage->detach($observer);
    }

    public function notify($event = '')
    {
        foreach ($this->storage as $observer)
            $observer->update($this, $event);
    }
}

class Notify implements \SplObserver /*seguimos con lai implementacion del observer*/
{
    public function update(\SplSubject $subject, $event = '')
    {
        if ($event == 'comprado')
            echo 'El artículo se ha comprado' . PHP_EOL;
        else if ($event == 'vendido')
            echo 'El artículo se ha vendido' . PHP_EOL;
    }
}

/*¿Cómo luciría llevado a la práctica?*/

/*Creamos el objeto*/
$articulo = new Articulo(new \SplObjectStorage());
/*vinculamos el artículo al observer*/
$articulo->attach(new Notify()); 
/*imprimiría en pantalla que se ha comprado*/
$articulo->compra();
/*imprimiría que se ha vendido*/ 
$articulo->vende(); 
?>

Es una idea básica donde simplemente se imprime en pantalla el resultado de una acción, pero ya os hacéis una idea de las posibilidades de este patrón.

Centrando verticalmente elementos de bloque en CSS

Si bien centrar elementos horizontalmente no suele suponer un problema cuando trabajamos con CSS, el hacerlo verticalmente es mucho más puñetero. Desde que se jubilaron las engorrosas tablas, que todo hay que decirlo para el tema del centrado eran bastante cómodas, son muchos los que llevan buscando una solución. Con los elementos inline la cosa no es tan pesada, pero con los elementos de bloque puede tonarse desquiciante.

Si trabajamos con navegadores modernos, con total soporte de CSS3, la solución nos llega de la mano de Flexbox con unas pocas líneas. Basta con definir la alineación usando esta propiedad en el elemento contenedor como podéis ver en este fiddle:

.contenedor {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Con flexbox la alineación vertical es tan simple como en las viejas tablas. Pero ¿y si no podemos contar con flexbox?… el horror, el horror… Bueno, no tanto, también hay una solución. En este caso lo primero será definir la posición del contenedor como relativa, y el elemento a centrar de forma absoluta, situado en la mitad de la altura del padre y a su vez desplazando su eje Y otro 50% (suena más rollo de lo que es, la idea es poner el borde superior en la mitad del contenedor y luego desplazarlo la mitad de su propia altura de forma que el centro del elemento queda en el centro del contenedor, viendo el código a continuación se entiende, y podéis ver el resultado en un fiddle)

.contenerdor {
  position: relative;
}
.elementoACentrar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Listo, dos métodos para alinear verticalmente un elemento de bloque en CSS que te pueden ahorrar mucho tiempo.

Cinco generadores de Lorem Ipsum muy curiosos

Todo el que esté en los mundillos de la programación o el diseño sabe lo que es el lorem ipsum, un texto de prueba de impresión que se supone que procede del siglo XVI. Pululando por la red hay muchos generadores de texto aleatorio curiosos y divertidos y aquí me he decidido a recopilar los cinco mejores (bueno, realmente son los cinco que más gracia me han hecho):

  • Cthuvian Ipsum Generator: Para fanáticos de H.P. Lovecraft y su saga de Cthulhu, este generador os dará unas líneas que os acercarán a las simas de la locura primigenia.
  • Zombie Ipsum: Para los amantes de los no muertos también hay un generador cargado de referencias al género zombie, tanto al cine como a la televisión o los comics.
  • Doctor Ipsum: El Doctor Who también tiene un generador, en este caso además nos permitirá elegir qué encarnación del personaje queremos que hable.
  • Samuel L. Ipsum: El más badass de los generadores, homenajeando a grandes personajes de Samuel L. Jackson. No es muy variado, la verdad, pero tiene su gracia
  • Trollem Ipsum: Elige entre fanboy de Apple, Microsoft, Blackberry o de Android y consigue un texto con sus tópicos «argumentos» fanáticos. Ojo, saca textos cortitos.

En su momento había encontrado un Dalek Generator perfecto para aquellos enganchados al Dr. Who, pero parece que han retirado la web, que antes estaba alojada en esta dirección. Una pena, porque era claramente top. Había originalmente también un generador de conversaciones aleatorias de El Gran Lebowski pero al repasar el artículo me encontré con que ya no existía.

En fin, ahí os queda esta pequeña lista de recursos, para hacer los prototipados un poco menos tediosos.

Función para convertir valores NaN en 0 en Javascript

Vamos como una minientrada sobre Javascript. Hoy trabajaba con varios sumatorios y en algún momento me «rompía» la cuenta porque intentaba acceder al valor de un campo vacío, recibía un valor NaN… El resultado es que toda la cuenta se iba al carajo.

Javascript nativamente nos ofrece una función llamada isNaN() para comprobar si una variable tiene ese valor (en caso de que lo tenga devolverá un true), por lo que sirviéndonos de ella podemos crear una función que nos devuelva un 0 cuando el valor sea NaN. Tal que así:

function NaN2Zero(n){
    return isNaN( n ) ? 0 : n; 
}

Dicha función llama a isNaN para comprobar el valor. En caso de respuesta afirmativa devuelve un 0, en caso contrario devuelve el valor de la variable recibida.