DLayer: script jQuery que nos ayuda a maquetar diseños

By Luis in Javascript

Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.

La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.

Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.

Espero que os sea útil

jquery-dlayer

Crear un sistema de notificación web con XMPP y PHP

By Luis in PHP

Completísimo tutorial que nos explica como realizar un sistema de notificación web en tiempo real mediante XMPP y PHP. El tutorial nos explica cómo funciona el XMPP, cómo instalar Openfire (yo he usado ejabberd y este no le conozco, si alguien lo conoce que me comente que tal).

En el ejemplo hará uso de jQuery y Strophe para acceder al servidor XMPP.

Build a web-based notification tool with XMPP

Gracias Gerardo por el aviso

Tutorial de Drag&Drop de capas con jQuery UI

By Luis in Javascript

Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.

El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).

$('#sidebar .sortable-list').sortable({
    axis: 'y',
    containment: 'parent',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.section-title',
    opacity: 0.8,
    placeholder: 'placeholder',
    update: function(){
        $.cookie('sidebar-cookie', getItems('sidebar'));
    }
});

jQuery: Customizable layout using drag and drop

Vía @kingsleyphls

Permitir el botón atrás en aplicaciones dinámicas

By Luis in Javascript

Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón ‘Atrás’ del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la página anterior y no al ‘contenido’ anterior.

Para solucionar esto, lo que se debe hacer es que las acciones dinámicas sean realizadas mediante enlaces (#), por ejemplo, si queremos usar pestañas podemos acceder a #tab1, #tab2, …, #tabn. Si vamos atrás en el navegador continuaremos en la misma página pero en otra sección (#).

Para tratar esto mediante jQuery se puede hacer usando el siguiente código:

$(window).bind('hashchange', function () {
  // hacer lo que sea para mostrar el contenido
});

Enabling the Back Button

Vía / CSS Globe

Plupload: sube varios ficheros fácilmente

By Luis in Javascript

Plupload es un script creado por los autores de TinyMCE. Permite subir ficheros usandoHTML5 Gears, Silverlight, Flash, Yahoo! BrowserPlus o formularios normales, además permite subida progresiva, redimensionado de imágenes y chunked uploads.

Está dividido en dos partes: Core API y una cola de subida jQuery, lo cual permite que creamos nuestra propia implementación. Además en Firefox 3.5+ se puede usar drag&drop y el redimensionado de images también es exclusivo de FF.

Plupload

Vía / WebAppers