Crear un elemento arrastrable (drag and drop) con jQuery, sin jQuery UI

jQuery UI nos permite definir un elemento como “draggable” para que podamos “agarrarlo” con el ratón para arrastrarlo por la pantalla y situarlo donde mejor nos convenga. Hoy en el trabajo me veía con la limitación de no poder recurrir a jQuery UI, sólo podía utilizar jQuery 1.11 y tenía que lograr el mismo efecto.

Mentiría si dijera que lo hice yo, básicamente cogí este código de CSS-Tricks que os dejo a continuación y le hice un par de pequeños cambios para que funcionara de la forma deseada en la aplicación.

(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

Tras esto me bastó aplicar esa función sobre los elementos deseados, en ese caso por medio de una clase:

$('.ElementoMovil').drags();

En este caso dad gracias a esa excelente web que es CSSTricks cargada de trucos para mejorar el diseño y la experiencia del usuario, ya que el trabajo es suyo. En el artículo original podéis probar el funcionamiento de dicha función. Añado que en versiones muy antiguas de jQuery no funciona, al menos con 1.5.2 que fue con la que lo probé en principio. En cualquier caso, es recomendable tener siempre esta librería actualizada.

The Donnie Rock Radio Show 63: Especial 1973

“El rock alcanzó la perfección en 1973, es un hecho científico”… con esa frase Homer Simpson argumentaba que ya no se necesitaban más grupos nuevos. Pero ¿cuánto hay de cierto? Hagamos un repazo por grandes temas del rock and roll publicados ese año y veamos cuanta verdad hay en las palabras del amigo Homero. La conclusión os la dejo a vosotros.

Como siempre el programa estará disponible en Mega para descarga directa en Mega y, durante unas semanas, para streaming en Podomatic.

  • Grand Funk Railroad – Black Licorice
  • Bruce Springsteen – 4th of July, Asbury Park (Sandy)
  • The Who – 5.15
  • David Bowie – The Jean Geanie
  • The Stooges – Raw Power
  • New York Dolls – Personality Crisis
  • Mott The Hoople – All the Way from Memphis
  • Alice Cooper – Billion Dollar Babies
  • Black Sabbath – Killing Yourself to Live
  • Pink Floyd – Money
  • Led Zeppelin – Over the Hills and Far Away
  • Lynyrd Skynyrd – Simple Man
  • Emerson, Lake and Palmer – Still you turn me on
  • Queen – Jesus
  • ZZTop – Waiting for the Bus
  • Aerosmith – Dream On

Error 502 Bad Gateway en Nginx. Posibles soluciones

Me han preguntado varios lectores sobre el mismo problema: se encuentran con un error 502, Bad Gateway o puerta de enlace, devuelto por un servidor Nginx. ¿Dónde se produce este error? Pues en el punto en que el servidor Nginx se comunica con otra aplicación o servicio ¿Y por qué se da? Por muchos motivos: que uno de los dos esté caído, que no se “aclaren” con el protocolo (mala configuración), etc. Puede darse cuando Nginx funciona como proxy de Apache, con problemas derivados de la configuración del buffering o del tiempo de espera de respuesta, cuando Nginx funciona como puerta de enlace con otra aplicación o cuando Nginx funciona con el daemon PHP-FPM.

Lo primero, tanto en el caso del daemon de PHP-FPM, como en el de usarlo como proxy de Apache o como puerta de enlace para otro servicio es reiniciar dichos servicios. En la mayoría de los casos el error surge porque el servicio se ha detenido por algún motivo, y con el reinicio se soluciona. En caso de que ocurra reiteradamente entonces investigad por qué ese servicio “casca” de forma tan habitual. Seguramente en los logs del servidor esté mucha de la información que necesitaréis para encontrar la solución.

Aunque la caída del servicio es lo más habitual no es la única opción. En otro artículo ya hablamos de configurar los valores del tiempo para timeout de FastCGI en IIS, en Nngix podemos hacer esto editando el archivo nginx.conf, dentro del bloque http (esto es un ejemplo copiado de la documentación oficial de Nginx, cada caso deberá adaptarse a sus necesidades):

http {
...
fastcgi_buffers 8 16k;
fastcgi_buffer_size 32k;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
...
}

En caso de que estéis usando Nginx como proxy deberéis añadir unas líneas como estas en el archivo nginx.conf:

proxy_connect_timeout       600;
proxy_send_timeout          600;
proxy_read_timeout          600;
send_timeout                600;

Para el caso de PHP-FPM debes asegurarte, revisando el fichero http://www.conf de configración de Nginx, de que está bien configurado el puerto en que el servicio debe estar “a la escucha”. Generalmente es una de estas dos opciones:

listen = /var/run/php5-fpm.sock
#o si no
listen = 127.0.0.1:9000

Si no está configurado así probad una de esas dos opciones y reiniciad el servicio.

Otra causa de este problema venía derivado del uso de APC Cache, y se solucionaba dejando de usarlo y pasándose a Xcache. De esto hará cosa de un año, puede que a día de hoy ya no genere problemas, pero a saber.

Y a más de uno le ha comenzado el problema tras actualizar algunos paquetes de PHP en su servidor. El problema viene porque en esa actualización los permisos de lectura-escritura-ejecución del socket han sido modificados, y el servidor no puede acceder a ellos porque no está en el mismo grupo. Para solucionar esto tienes que tocar varios archivos. El primero nginx.conf, donde comprobaremos que esto esté tal cual:

user nginx;

Luego nos vamos a /etc/php-fpm.d/www.conf y lo configuramos así

listen = /tmp/php5-fpm.sock
listen.owner = nginx
listen.group = nginx

Y tras esto reiniciamos tanto el servicio de nginx como el de php-fpm.

Estos son los principales problemas y soluciones que he ido encontrando por la red, espero que os sirvan de ayuda.

The Donnie Rock Radio Show: La Reina Bruja

Lanzándonos a un pequeño recorrido por las simas de la locura primigenia os relataré en esta entrega la historia de cómo condené mi alma vendiéndola a una reina del vudú, de cómo esa meiga anuló mi voluntad con mi silencioso e ingénuo silencio. Una historia de amor para los malditos sobre el subconsciente, la humildad, la responsabilidad y la condición humana.

Esta triste historia podrá ser descargada desde Mega o escuchar, durante unas semanas, en streaming desde podomatic.

El listado de temas es el siguiente:

  • Jonnhy Cash – Ring of fire
  • Robert Plant – If I were a carpenter
  • Blues Pills – Devil Man
  • Joan Jett – School Days
  • Led Zeppelin – When the Levee breaks
  • Creedence Clearwater Revival – Green River
  • Janis Joplin – Down on me
  • Thin Lizzy – Do anything you want to
  • Ozzy Osbourne – Mr. Crowley
  • Black Mountain – The Hair Song
  • Queen – Hammer to fall
  • Gary Moore – Thunder rising
  • Scorpions – Tease me, please me
  • Alice Cooper – Poison
  • The Sonics – Have love, will travel
  • David Bowie – Starman

Netflix disponible oficialmente en Ubuntu

Si bien creo recordar que existían ya algunos programas y extensiones no oficiales que permitía reproducir series y películas desde este popular servicio de streaming, desde ayer es posible hacerlo ya de forma simple y oficial en equipos con Ubuntu (y supongo que también Mint y Debian, pero la verdad es que no he podido comprobarlo ya que no tengo cuenta, entre otras cosas porque la compañía no opera todavía en España).

En cualquier caso, los subscriptores de Netflix sólo tendrán que instalar Chrome 37 (compatible con Ubuntu a partir de 12.04 LTS) desde el paquete .deb oficial de google.

A pesar de ser un servicio que ofrece materiales protegidos por DRM, bajo las draconianas restricciones de derechos de autor habituales, la llegada de Netflix a Ubuntu era esperada por muchos usuarios que se veían condenados a tener una partición con Windows, o a recurrir a la virtualización.

Filosóficamente, como con la llegada de Steam hace unos meses, nos vemos en una encrucijada y un fuerte debate sobre la conveniencia o no de la llegada de plataformas de contenidos privativos a un sistema libre. Por una lado suena a rendirse y a hacer concesiones a la industria del copyright, por otro lado es una forma de lograr que los usuarios pierdan el miedo a dar el salto.

The Donnie Rock Radio Show: Especial Martin Birch

Esta semana no dedicaremos el programa a la carrera de un músico en concreto sino a la de un productor e ingeniero de sonido. El ya retirado y legendario Martin Birch, que comenzó su carrera a finales de los 60 trabajando con Jeff Beck en el Beck-Ola (puede que antes, pero ese disco fue la referencia más antigua que encontré a su trabajo) y se retiraría en 1992 tras su última colaboración con Iron Maiden en Fear of the Dark.

Como siempre el programa estará disponible en Mega para descarga directa y en Podomatic para streaming, y contará con la siguiente selección de temas:

  • Deep purple – Fireball
  • Iron Maiden - Murders in the Rue Morgue
  • The Groundhogs – Thanks Christ for the Bomb
  • Silverhead – Ace Supreme
  • Rainbow – Tarot Woman
  • Blue Oyster Cult – Lips in the Hills
  • Wishbone Ash - The King will come
  • Paice, Ashton and Lord – Remember the Good Times
  • Whitesnake – Long way from Home
  • Fleetwood Mac – Rattlesnake Shake
  • Jeff Beck - Plynth (Water down the Drain)
  • Michael Schenker Group – Assault Attack
  • Cozy Powell – Killer
  • Black Sabbath – Neon Knights

20 años de W3C

El World Wide Web Consortium (o W3C para los amigos) cumple hoy 20 años. Dicho consorcio se encarga de elaborar las recomendaciones para los estándares en el mundo de la web.

Fue fundado, y todavía es dirigido, por Tim Berners-Lee en el MIT tal día como hoy en 1994, con colaboración de la Comisión Europea y el conglomerado militar estadounidense DARPA (lo cual siempre ha generado bastante recelo por los orwellianos proyectos de esta agencia). Desde entonces han trabajado por mantener una versión standar de HTML y otras tecnologías web, a pesar de los intentos de varios compañías de intentar imponer su modelo (principalmente Microsoft). El lenguaje HTML fue desarrollado por Berners-Lee en el CERN, organismo que también decidió que la World Wide Web debía ser libre para todo el mundo, por lo que se le ofreció ser el anfitrión europeo de la W3C, invitación que declinaron por decidir centrarse más en la física que en las tecnologías de la información.

Primer Servidor WEB CERN
El equipo que Berners-Lee usó como primer servidor web de la historia

Tal día como hoy toca felicitar a esta organización por sus 20 años de trabajo pero también, en estos tiempos oscuros en que los lobbies presionan a los gobiernos para acabar con la libertad y neutralidad de la red, es un buen momento para recordarles que las tecnologías web deben seguir siendo libres, que no queremos ningún DRM en HTML5 y que pueden mandar a todos los lobbistas que presionan para que así sea a la EME (perdón por el chiste malo). Porque más que nunca necesitamos una web que sea libre y neutral, y eso pasa porque la tecnologías para desarrollarla también lo sean.