Koas.dev

Después de probar muchas extensiones al final lo mejor que he encontrado para hacer pruebas de responsive design es este bookmarlet.

Tiene tamaños predeterminados para móviles y tabletas, aparte de permitirte cambiar el tamaño manualmente.

Aquí se puede ver una captura de pantalla del bookmarlet con la estupenda página Ponles Nota, que permite calificar a los profesores de universidades y centros de estudios y saber cuáles son los mejores en cada uno de ellos. ¡De obligada visita si estudias o tienes pensado estudiar en cualquier centro de España!

(Atentos al detalle de la foto de la Unhelpful High School Teacher con el bocadillo de ¿Me has calificado ya? xDDDD)

MySQL tiene una extensión al lenguaje SQL muy útil, REPLACE, que es una combinación de INSERT y UPDATE: si en la tabla existe una fila con la misma primary key que la que vamos a insertar, MySQL actualiza la fila con los nuevos datos; si no existe, la introduce. Es muy útil porque así no tenemos que tener una sentencia diferente para insertar un nuevo registro (INSERT) o modificar uno existente (UPDATE), y esto hace que el código sea más sencillo y limpio.

Pero tiene truco. Como dicen en la documentación:

REPLACE works exactly like INSERT, except that if an old row in the table has the same value as a new row for a PRIMARY KEY or a UNIQUE index, the old row is deleted before the new row is inserted.

MySQL lo que hace es insertar la fila si no existe esa primary key, pero si existe borra la fila existente y a continuación la inserta.

Esto no es un problema hasta que utilizamos foreign keys: si hacemos REPLACE en una tabla A y hay otra tabla B que tiene una foreign key con ON DELETE CASCADE en A.id, como MySQL elimina la fila de A automáticamente se eliminan todas las filas de B que hacen referencia a ese A.id, y eso es algo que no queremos.

La solución para esto es desactivar la comprobación de foreign keys antes de hacer el REPLACE, y activarlo una vez hecho:

SET FOREIGN_KEY_CHECKS = 0;
REPLACE INTO tabla_A (campo1, campo2, ... campoN) VALUES (valor1, valor2, ... valorN);
SET FOREIGN_KEY_CHECKS = 1;

De esta forma mantenemos el comportamiento habitual de las foreign keys para borrado de filas y actualización de índices pero lo anulamos cuando queramos usar  REPLACE.

Empiezo el blog con un programa para capturar una imagen de una web desde el servidor. Después de investigar algunas opciones que hay para hacerlo desde el navegador (por ejemplo html2canvas) he encontrado una forma mucho más sencilla y que muestra una captura perfecta de cualquier página web, incluyendo animaciones flash.

El programa que nos permite hacer esto se llama PhantomJS y aunque permite hacer muchísimas más cosas (es un navegador webkit completo) aquí voy a contar el proceso de generar una imagen de cualquier página web.

Nos descargamos el programa y subimos a nuestro servidor el ejecutable correspondiente a nuestro sistema operativo. Una vez hecho esto ya podemos crearnos el script que capturará la imagen:

var page   = require('webpage').create();
var system = require('system');
var url    = system.args[1];
var path   = system.args[2];
var width  = system.args[3];
var height = system.args[4];

page.viewportSize = { width: width, height: height };
page.open(url, function () 
{
    setTimeout(function()
    {
        page.render(path);
        phantom.exit();
    }, 1000);
});

Guardamos este script como webSnap.js, por ejemplo. El script recibe cuatro parámetros: la URL de la página a capturar, el path del fichero donde queremos guardar la imagen y el ancho y el alto de la ventana del navegador con el que se simulará estar viendo la página. Con estos datos crea una página, ajusta el tamaño del navegador y la abre, guardando después la captura en el fichero que le hayamos dicho (soporta PNG, GIF, JPG y PDF, dependiendo de la extensión del nombre que le pasemos).

El timeout a la función render() lo he puesto porque en unas pruebas que he estado haciendo con un visor de publicaciones me aparecía la imagen en blanco, lo más seguro es que para una página web normal no haga falta.

Con esto ya lo tenemos todo, solamente nos faltaría invocar al programa pasando los parámetros que queramos:

phantomjs webSnap.js http://www.yahoo.es yahoo.jpg 1024 768

Y tendremos la captura de la página web en su totalidad. Posteriormente si queremos podremos recortarla o hacer cualquier otra cosa con ella.

Esta es la imagen resultante del comando anterior: