nov 30 2009

MenuMatic en capa fija (position:fixed)

tatai

Es posible que conozcas MenuMatic, un menú multinivel tanto horizontal como vertical realizado con Mootools 1.2. La verdad es que yo personalmente lo he usado ya varias veces y me gusta bastante la facilidad de uso y el acabado, con lo que es una de mis opciones cuando tengo que recomendar un menú.

Hace poco tuve un problema y es que coloqué este menú en una capa posicionada fija (position:fixed) de modo que estuviese constantemente visible aunque se realizase scroll. Claro, esto funciona en prácticamente todos los navegadores menos IE (para variar). Al hacer esto, cuando pasamos por encima del menú para realizar el desplegado, como la capa fija “evita” el scroll, el menú aparece siempre en la parte superior, de modo que si se baja por la página, el menú desaparece.

He hecho un par de cambios en la clase a partir de la última versión disponible, la 0.68.3. Se lo he comunicado al autor para ver si le ayuda en su próxima versión, pero de momento no he obtenido respuesta.

Por esta razón, dejo mi aportación aquí en el blog por si le puede servir a alguien. Las modificaciones que he realizado están bajo las líneas // Mod: Fran Naranjo. El cambio es básicamente detectar si está sobre una capa con position:fixed y si lo está, añadir el scroll a la posición en la que se muestra el menú.


nov 28 2009

Roller

tatai

Esta semana Mario y yo, continuado con el desarrollo y evolución de OpenNUS hemos implementado un sistema de avisos en el Page Builder que llegue directamente desde los gadgets. Al final adoptamos la solución de ir mostrandolos al estilo tagline.

En base a esta idea, se me ocurrió desarrollar esta pequeña y sencilla clase en Mootools que realice este comportamiento pero realizando el efecto de un banner rotativo o roller. De esta forma podremos mostrar por ejemplo una serie de mensajes que se irán turnando de forma constante de modo que podamos ver un cierto número a la vez.

Su uso es bastante sencillo. Tan sólo necesitamos un elemento padre que contenga una serie de hijos que son los que mostraremos. El caso más sencillo es tener un <ul> como padre y varios <li> como hijos.

<ul id="roller">
  <li>Mensaje 1</li>
  <li>Mensaje 2</li>
  <li>Mensaje 3</li>
</ul>

Con esta llamada, conseguiremos que se genere el Roller y comience a funcionar.

new Roller($('roller')).startRoll();

Hay más ejemplos en la demo.


oct 22 2009

SelectorGadget

tatai

SelectorGadget es lo que se denomina un bookmarklet, es decir, una aplicación javascript que se llama directamente desde nuestra barra de marcadores (bookmarks). Este tipo de aplicaciones nos las encontramos en forma de enlace. Para poder usarla únicamente tenemos que arrastrar ese enlace a nuestra barra de marcadores y una vez allí, estando en la web en la que nos interese llamar a esta aplicación, hacemos click sobre él.

Ahora, tras enrollarme con la explicación de bookmarklet (que os servirá para tener esta aplicación), os cuenta que con SelectorGadget podremos encontrar fácilmente los selectores CSS para los elementos de la web que nos interesen. Este selector se muestra en formato para jQuery, pero leerlo es muy fácil y puede ayudar para los selectores de otros frameworks.

Podrás pinchar en distintos elementos para seleccionarlos y deseleccionarlos y así intentar obtener el selector que abarca a todos los que elijas. El vídeo de la web es bastante esclarecedor y no hay nada como probarlo.

No hay nada que no se pueda sacar con Firebug, pero hay que decir que SelectorGadget es capaz de ahorrarnos bastante tiempo según el caso.

La última versión estable disponible en la web es del día 10 de Marzo de 2009. Funciona en Firefox y Safari. En IE7 no funciona del todo bien todavía.


oct 5 2009

Cuenta atrás/Countdown para mootools

tatai

Es posible que en la pasada Navarparty 7 participases en el concurso Date El Bit y te encontraras con que este año la primera fase de las preguntas se realizaba pregunta por pregunta y había una cuenta atrás para cada una de ellas.

Pantalla de ejemplo de Date El Bit de la Navarparty 7

Pantalla de ejemplo para Date El Bit de la Navarparty 7

Pues bien, para poder hacerla realicé una pequeña clase en javascript para Mootools que me permitiera poder visualizar la cuenta atrás que se puede ver en la imagen. Como estuve buscando por internet y no encontré nada que me gustase, me lancé a hacerlo, no podían ser muchas líneas.

Y así ha sido. Con tan sólo 98 líneas (incluídos comentarios en inglés), tengo el gusto de presentar la clase Countdown.

Esta clase tiene como objetivo realizar la cuenta atrás visualmente actualizando un elemento DOM que se le indique.

El ejemplo de utilización más sencillo es este, que nos crea una cuenta atrás de 10 a 0 en pasos de hasta 100 milisegundos que actualiza en el elemento con id=”counter”:

new Countdown($('counter')).start();

Podemos completarlo un poco más con el siguiente ejemplo:

new Countdown($('counter'), {
  'decimals' : '3', // para hacer que parezca un tiempo de la fórmula 1 :p
  'onComplete' : function() {alert('finalizado!');}, // muestra un alert cuando acaba la cuenta atrás
  'onStep' : function(target, show) {
    // Si el contador está por debajo de 5, poner en rojo, si no, en negro
    if(show < 5) {
      target.setStyle('color', '#f00');
    }
    else {
      target.setStyle('color', '#000');
    }
  }
});

ago 26 2009

TestSwarm. Integración contínua distribuida en Javascript

tatai

Acabo de leer el post de John Resig sobre TestSwarm, un nuevo proyecto, todavía en fase alpha de Mozilla Corporation, que permite realizar test de código Javascript en diversos navegadores y varias plataformas de forma distribuida. Esto quiere decir que cuando se pone un script a evaluar en esta plataforma, se ejecuta en varios navegadores a la vez, permitiendo extraer posteriormente los resultados.

El siguiente dibujo extraído de la web de John Resig se muestra la arquitectura:

Arquitectura de TestSwarm

Arquitectura de TestSwarm

El video la verdad es que impresiona. En él se puede ver cómo ejecuta un test y, poco a poco, van apareciendo resultados.

Hay que seguir este proyecto de cerca. Las posibilidades que puede darnos a la hora de realizar integración contínua en nuestros proyectos también en javascript (sólo jQuery, al menos en lo que se ve de momento), es enorme. Muy muy muy interesante.

John Resig es conocido por ser Javascript Evangelist en Mozilla Corporation aunque actualmente está en el equipos Javascript Tool Developer. Es conocido también por participar como desarrollador en el proyecto One Laptor Per Child.


ago 22 2009

Mis expresiones regulares favoritas

tatai

A raíz de mi post anterior sobre 5 expresiones regulares que todo programador web debería conocer, me ha parecido interesante añadir unas cuantas más que, aunque quizás no sean nada del otro mundo, me parecen muy útiles y seguro que ayudan a más de uno.

Validar un número entero

Esta es realmente sencilla y muy muy útil, sobre todo si trabajar con cadenas de texto o lenguajes de programación no tipados. En PHP hay por ejemplo funciones como is_number() que hacen una función parecida.

Comprueba si todos caracteres del string son dígitos.

/^\d+$/

O, de forma equivalente:

/^[0-9]+$/

Atentos que la cadena vacía no pasa esta expresión, es necesario que haya al menos un dígito. Si quieres permitir que esté vacío, entonces cambia el + por *.

Validar un número decimal

Esta es una extensión la anterior. Acepta tanto número positivos como negativos y que el separador de decimales sea coma o punto:

/^-?[0-9]+([,\.][0-9]*)?$/

Validar opciones de entrada

Aunque no siempre, viene muy bien cuando tenemos unos cuantos parámetros y no queremos usar if($a == ‘a’ || $a == ‘b’ || $a == ‘c’) y todo lo largo que queráis el if.

La siguiente expresión comprueba si la variable es a,  b, c, otro o mas:

/^(a|b|c|otro|mas)$/

En PHP, con un preg_match, la papeleta está solucionada. Por ejemplo:

if(!preg_match('/^(a|b|c|otro|mas)$/', $a) {
  // Si entra es que no hay coincidencias
  return null;
}

Tras estas líneas, $a es sólo una de las opciones indicada y si no, habrá retornado null.

Extraer cierta parte de un texto

Partiendo de que tenemos una cadena de caracteres en $text y sabemos que en alguna parte suya cumple que tiene una cadena de texto (por ejemplo ‘jugador’) y un número separados por un guión (es decir, por ejemplo ‘jugador-15′) y queremos conocer ese número porque es su identificador. Podemos usar:

preg_match('/player-(\d+)/', $text, $matches);
$id = $matches[1];

Tras estas líneas, en $id tenemos nuestro número.

Esta expresión se puede extender todavía un poco más si el texto a buscar lo tenemos en una variable, por ejemplo $buscar.

En PHP podemos hacer:

preg_match('/' . $buscar . '-(\d+)/', $text, $matches);
$id = $matches[1];

Si estás usando javascript, el equivalente para este último caso es:

var buscar = 'player';
var m = texto.match(new RegExp(buscar + '-(\d+)'));
var id = m[1];

Y hasta aquí da mi memoria de momento. Cuando me acuerde de alguna otra, ya las iremos posteando.


jun 20 2009

Teclas rápidas usando mootools

tatai

Hace unos días me plantee la posibilidad de añadir teclas rápidas al funcionamiento de la aplicación. Las teclas rápidas o también llamadas atajos de teclado (o “keyboard shortcuts” en inglés) nos permite realizar acciones pulsando una tecla o una combinación de teclas. Por ejemplo, habremos usado muchas veces Ctrl + g (o la variante inglés Ctrl + s) para grabar un documento, Ctrl + r para recargar la pantalla de nuestro navegador o, por ejemplo, todas las teclas rápidas de GMail. Lo que voy a explicar brevemente en este post es como conseguir algo parecido a lo que usa GMail.

El funcionamiento es realmente sencillo, este sería el código:

document.addEvent('keyup', function(e) {
    var bg = e.target.get('tag');
    if(bg == 'html' || bg == 'body') {
        if(e.key == 'a') {
            accion1();
        }
        else if(e.key == 's') {
            accion2();
        }
    }
});

Lo único que le falta a este código son las funciones accion1() y accion2() que son las que se ejecutarán cuando pulsemos las teclas a y s respectivamente.

Este código añade un evento ‘keyup’, es decir, cuando se detecta que se ha pulsado una tecla y estamos levantando el dedo de la tecla. Este evento indaga a ver qué tecla se ha pulsado y en caso de ser una de las de la lista, ejecutará la función correspondiente.

La comprobación de que el objetivo de nuestra pulsación (e.target) sea ‘html’ o ‘body’ sirve para que no se haga esta comprobación cuando estamos en un elemento como un input, un textarea, etc. Es decir, tenemos que tener el foco en el documento. En la mayoría de los navegadores funcionaría simplemente con indicar ‘html’, pero, como siempre, Internet Explorer tiene que dar la nota y necesita que comprobemos sobre ‘body’.

Por último añadir que podemos obtener más información del evento:

e.code: el código de la tecla pulsada
e.control: true si la tecla Ctrl está pulsada
e.shift: true si la tecla Shift está pulsada
e.alt: true si la tecla Alt está pulsada

Y no sólo esto, también podemos trabajar con la rueda del ratón o el botón derecho del ratón

El resultado es realmente espectacular si tienes que trabajar con una aplicación en la que las teclas rápidas te hacen la vida más sencilla :)


jun 7 2009

Nueva versión de jscalendar

tatai

Llevo muchos años usando jscalendar porque la verdad es que siempre he obtenido buenos resultados y no me ha dado guerra, adaptándose siempre a las necesidades que tenía. Pero acabo de encontrarme con hace apenas un mes se ha publicado la versión 2.0 (tras 4 años de no realizar actualizaciones de la versión 1.0).

Esta nueva versión no es gratuita si quieres el código fuente. Es decir, que puedes descargarte jscalendar 2.0 para trabajar con él sin problemas, aunque ha sido minimizado y ofuscado con YUI Compressor. La licencia para un site cuesta la nada despreciable cantidad de 80 dólares americanos, 300 para 5 sitios y 800 para un número ilimitado de instalaciones o para instalarlo dentro de una aplicación.

Esta nueva versión tiene un montón de nuevas características:

  • Selección simple o múltiple de fechas, así como un rango
  • Modo pop-up
  • Limitación temporal
  • Animaciones para el cambio de mes y año
  • Animación del desplegable
  • Funciona como un control web, con lo que se puede seleccionar y trabajar con él desde el teclado
  • La rueda del ratón cambia de mes y de año
  • Los ficheros de idioma siguen estando en ficheros individuales
  • Muy personalizable vía CSS. De serie trae 5 themes
  • API y algunas utilidades (sólo para usuarios que compren la licencia)
  • Código javascript muy reducido en tamaño (30kB o 10kB comprimido) que no depende de librerías de terceros

Tiene muy buena pinta, aunque me da que de momento seguiré la versión 1.0 que se ajusta perfectamente a mis necesidades.


mar 8 2009

Good feelings with Lasso.Crop

tatai

Although Lasso.Crop is still a preview, I have decided to try it. I have been looking for a mootools script for croppìng images and I have to say I think I am going to use Lasso.Crop (ok, stable version, when available).

Using it is quite easy and the result is clean, fast and smooth. One of the most valuable characteristic that has Lasso.Crop is the possibility of decide an aspect ratio (16:9, 1:1, etc) and a max and min size for the cropping area. This is what I just need in my crop process.

I would like to hear about a stable release as soon as possible. Good work @_nw_, we are waiting for news.

Demo de Lasso.Crop

Demo de Lasso.Crop


ene 3 2009

Reloj analógico en javascript

tatai

Gracias a mi compañero Xabi, he descubierto NoGray Time Picker, un interesante reloj en formato analógico hecho en javascript.
TimePicker Clock

Las manecillas pueden moverse y con algo más de código, se puede conseguir que tenga la hora actual en tiempo real. El resultado es muy bueno.

Funciona con mootools 1.11 y en la página de arriba está toda la información y ejemplos.