Category: Programación

Aunque sé perfectamente que tiene que haber mil plugins que hagan esto me he permitido reinventar la rueda porque nunca había hecho un plugin de jQuery y ya tocaba.

Como el formato MNG aún no está soportado en todos los navegadores hay que buscarse las castañas para hacer animaciones con imágenes que llevan transparencia alpha, Este plugin lo que hace es coger una imagen que tiene todos los fotogramas de la animación uno encima del otro, y lo pone como imagen de fondo de un div, cambiando periódicamente la posición de la imagen de fondo para hacer el efecto de animación.

/*
Plugin para animaciones
v1.0
============================================================

Este plugin está pensado para poder tener animaciones tipo GIF pero con
imágenes PNG con transparencia alpha.

Utiliza una imagen en la que los frames están colocados uno encima del otro.
El plugin va cambiando la posición de la imagen de fondo del div para hacer el
efecto de animación.

USO: 

Se crea un div con estos atributos:

* data-spriteImg: URL de la imagen que contiene los frames
* data-numSteps: número de frames en la imagen

Se llama a la función animPic en el div pasando como variable el intervalo
de tiempo entre frames (en milisegundos), que por defecto es 1000.

$("#nuestroDiv").animPic({timeStep: 1000});

============================================================
*/
(function($)
{
    $.fn.animPic = function(options)
    {
        var defaults =
        {
            timeStep  : 1000 // Tiempo entre cambios de imagen (milisegundos)
        };

        options = $.extend(defaults, options);
        if (!this)
            return false;

        return this.each(function()
        {
            var obj;
            var height;
            var spriteimg;
            var numSteps;
            var currentStep = 0;

            obj = $(this);
            spriteImg = obj.attr('data-spriteImg');
            numSteps = obj.attr('data-numSteps');

            var i = $(document.createElement("img"));
            i.load(function()
            {
                height = this.height / numSteps;
                obj.css("width", this.width + "px");
                obj.css("height", height + "px");
                obj.css("background-position", "0 0");
                obj.css("background-image", "url('" + this.src + "')");

                setInterval(function()
                {
                    ++currentStep;
                    if (currentStep == numSteps)
                        currentStep = 0;
                    obj.css("background-position", "0 -" + (currentStep * height) + "px");
                }, options.timeStep);
            });
            i.attr("src", spriteImg);
        });
    };
}(jQuery));

El CKEditor es el editor de textos WYSIWYG para web que más me gusta, funciona estupendamente y tiene una API muy intuitiva.

Lo uso siempre que en un gestor de contenidos hay que poder editar texto dando un cierto formato, metiendo imágenes, tablas, etc… El problema suele venir cuando los clientes, al usarlo, copian y pegan de programas como Word, que mete su propio código HTML y cambia fuentes, tamaños de letra, espacios. Al final el contenido acaba quedando horroroso.

Pero nos podemos evitar estos dolores de cabeza con una opción de configuración muy sencilla:

config.forcePasteAsPlainText = true;

Simplemente añadiendo esta línea cualquier texto que se pegue se pegará como texto plano, librándonos de cualquier formato que pudiera tener el texto original y respetando el estilo de nuestra página.

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: