Nos pasa algo lo mismo

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.

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

Según leo en clientcide, que por cierto, ya puede seguirse en twitter @mootools, Aptana Studio ya ofrece soporte para Mootools. Ha sido probado con Aptana 1.2 y 1.2.1 sin problemas. Es necesario instalar un plugin y a correr!

Muy buena noticia para todos aquellos que usan Aptana Studio en el desarrollo y que se venía echando en falta.

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

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.

Leo en Six Revisions una excelente recopilación de 23 cheatsheets (“chuletas”) sobre lenguajes de desarrollo web en cliente (es decir, lo que llamanos en frontend).

Incluye: HTML/XHTML, CSS, Javascript, DOM, Mootools, jQuery, RGB, SEO y WordPress.

dwProgressBar es una interesante barra de progreso realizada por David Walsh que nos permite realizar una barra de progreso animada hecha en Mootools a la que podemos cambiar el tamaño de forma muy sencilla. Hay varias posibilidades de diseño, aquí un ejemplo de la página del autor:

• dwProgressBar
• Demo
• Download

El otro día descubrí de mano de phatfusion, otra aplicación de pop-up en javascript llamada multibox. Basada en mootools 1.11 que nos permite abrir en una capa nueva, al estilo pop-up (como la también conocida lightbox, de la misma gente), pero con un diseño más elegante y sin poner un telón gris por detrás.

Pueden cargarse multitud de archivos, incluso otras webs. En la web hay varios ejemplos. Otra variante de estas conocidas “pop-ups” a tener en cuenta.

Via anieto2k descubro xRay, esta excelente utilidad que nos permite ver las propiedades de los elementos que componen una web sin usar Firebug o webdeveloper o tantas aplicaciones que existen actualmente para ello.

La verdad es que reconozco que prefiero usar Firebug por la potencia que tiene, pero también hay que decir que no siempre se tiene esta opción bien porque no tenemos Firefox, porque no tenemos permisos, etc, etc.

¿Y en qué se basa? Pues para hacer funcionar el invento, tan sólo tenemos que ir a la página web que queremos investigar y poner un código (javascript) en la barra de direcciones. Tras esto, únicamente tenemos que hacer click sobre los elementos de la web que nos interesen y obtendremos su información. Este código carga un javascript remoto que es el encargado de realizar todo el trabajo.

El diseño es elegante a la par de cuidado y la verdad es que el resultado es muy muy bueno.

En resumidas cuentas, los pasos que tenemos que realizar son:

1. Ir a la página web que nos interesa
2. Una vez en ella, borrar la URL de la barra de direcciones y poner esta otra
3. Ahora, una vez aparezca la ventana indicando que se ha cargado el script, sólo nos queda hacer click en los elementos para obtener su información

La ventaja que tiene este método es que podemos guardar la dirección como bookmark del navegador y así la tendremos muy a mano.

Este es un ejemplo de cómo se muestran las propiedades

Según los autores, es compatible con:

• Todos los navegadores basado en Mozilla (Firefox, Camino, etc) en Linux, Windows y Mac OS X
• Safari 2 y 3 en Mac OS X. En el Safari 3 para Windows la forma de usarlo es un poco distinta (ver enlace)
• Internet Explorer 6+

De momento no funciona con Opera, pero están en ello.

Para los más atrevidos, parece que hay una versión beta que puede accederse usando este otro código. Lo he estado probando y no he notado diferencias a parte de un efecto de degradado cuando carga la página… supongo que les he pillado todavía con poco desarrollo de la versión beta

Via anieto2k descubro esta curiosa aplicación: CSS Text Wrapper. Es una ingeniosa aplicación que nos permite dar la forma que queramos a nuestros párrafos (ver ejemplos).

La verdad es que el método es bastante sencillo ya que se trata de que tengamos un contenedor con nuestro texto (un simple div) y la aplicación coloca mediante Javascript diversos divs a un lado y al otro del nuestro de modo que el texto en su interior se adapte a esa forma. Así, podremos adaptar el texto a la forma que más nos interese para colocar imágenes, otros textos, etc.

Hay un vídeo-tutorial que nos muestra cómo funciona este método y cómo podemos utilizar la herramienta que hay en la web de la aplicación para adaptar nuestro texto a dos formas redondas.

Creo que lo único que haría falta es buscar accesibilidad. Al menos cuando he desactivado Javascript de la página de ejemplos no se mostraba el texto. Creo que (por ejemplo viendo el ejemplo del propio vídeo) sería interesante que el texto apareciese en bloque cuando no hubiese javascript y que en caso de que hubiese javascript, apareciesen las imágenes (o flotasen de otra forma) y se viese con la forma final. Uhm… trastearemos un poco, jeje

Hace unos días estuve trabajando sobre unos formularios vía Ajax y se me ocurrió la opción de marcar los campos que no estaban correctos con un borde rojo en vez de gris. Pero ya que contaba con mootools, decidí crear la opción de que los campos parpadeasen durante un par de veces. Tras darle unas cuantas vueltas, he desarrollado esta pequeña clase que realizar este parpadeo sobre cualquier propiedad CSS.

Y lo mejor para estos casos, ver un ejemplo.

La clase está disponible en esta dirección.

Es simplemente una clase que acepta como parámetros el id del elemento y un hash con las siguientes opciones:

• property: propiedad CSS a variar, por defecto border-color
• duration: duración en milisegundos de una transición, por defecto 500
• margin: margen en milisegundos entre una transición y otra, por defecto 50
• from: valor inicial de la propiedad CSS. Admite valores enteros o incluso colores usando Color(). Por defecto Color(‘#000′)
• to: valor final de la propiedad CSS. Admite valores enteros o incluso colores usando Color(). Por defecto Color(‘#fff’)
• times: número de repeticiones, considerando una repetición como una transición de ‘from’ a ‘to’ y de ‘to’ a ‘from’. Por defecto 3
• transition: transición de mootools a usar, por defecto Fx.Transitions.linear
• endActive: si está a true, indica que se acabará con el valor ‘to’, mientras que si es false, acabará con el valor de ‘from’. Por defecto, true