Otro de mis pequeños proyectos

Etiqueta: Javascript (Página 1 de 2)

MenuMatic en capa fija (position:fixed)

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ú.

Roller

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

    como padre y varios

  • como hijos.
    • Mensaje 1
    • Mensaje 2
    • Mensaje 3

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

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

    Hay más ejemplos en la demo.

SelectorGadget

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.

Cuenta atrás/Countdown para mootools

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');
 }
 }
});

TestSwarm. Integración contí­nua distribuida en Javascript

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.

[vimeo]http://vimeo.com/6281121[/vimeo]

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.

Mis expresiones regulares favoritas

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.

Teclas rápidas usando mootools

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 🙂

Nueva versión de jscalendar

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.

Good feelings with Lasso.Crop

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

Reloj analógico en javascript

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.

« Entradas anteriores