Crysfel’s Blog

En el último proyecto en el cual he trabajado, he utilizado un framework javascript que vale la pena hablar de él en este blog, y se trata de Ext Js, una excelente librería para crear interfaces de usuario, Ext nos facilita mucho el trabajo a los desarrolladores, pues en unas cuantas líneas de javascript podemos hacer interfaces realmente buenas.

En este artículo quiero mostrar como hacer mensajes, tablas y ventanas, con esto pretendo dar una introducción a esta fantástica librería y así mostrar la facilidad en el desarrollo de software.

Ya hace rato que salió la nueva versión de mootools (la 1.2beta2), hoy quiero mostrar como escribir una clase con esta nueva versión, es muy similar a la versión anterior, pero algunas cosas cambiaron.

Objetivo
El principal objetivo de este artículo es mostrar algunas buenas prácticas al escribir clases, para que sean reutilizables no solo por el propio autor, sino también por otros desarrolladores, esto hay que tenerlo en mente siempre que escribimos una clase, la clase que se escribirá hará algo asi (En las feeds no se aprecia el efecto debido a que no se ejecuta el javascript):

Este carrusel de imágenes (slideshow) es idéntico (a nivel visor) al que ya he mostrado anteriormente, solo que esta vez el código estará mucho mas limpio y mejor diseñado, completamente orientado a objetos y podrá ser muy flexible para ser utilizado por algún otro desarrollador.

La mayoría de nosotros conocemos la extensión para firefox firebug, ya que es muy útil a la hora de desarrollar aplicaciones web, desafortunadamente solo podemos trabajar con esta extensión dentro de firefox, pero que pasa si queremos debuguear otros exploradores como Internet Explorer, Opera, Safari?.

Gracias a Joe Hewitt, el creador de firebug, que ha puesto esta herramienta disponible para todos los demás exploradores como un archivo javascript, esta versión de firebug es mas ligera y no tiene todo lo que la extensión para firefox, pero es de gran ayuda, simplemente tienes que incluir el archivo javascript en tu página y listo, puedes descargar Firebug Lite desde aquí .

Ahora bien, cuando se esta en la etapa de desarrollo, es recomendable agregar el archivo javascript, pero cuando se sube a producción hay que quitarlo para no desperdiciar ancho de banda, al hacer esto todas las llamadas al objeto console, el encargado de debuguear, marcarán error, para corregir eso simplemente hay que pegar las siguientes líneas de código antes de hacer cualquier llamada al objeto console.

Con esto se crea el objeto console y ya no marcará errores la aplicación.

Saludos.

Ayer 16 de Enero del 2008, se ha liberado la segunda version beta de Mootools, y según anuncian en su blog, esta parece ser la definitiva, se han solucionado bugs de la versión anterior y se han agregado nuevas características, entre las mas destacadas es sobre el accesso a los elementos.

En la versión anterior el método set, de la clase Element, solo aceptaba un parámetro, ahora en esta nueva versión es posible pasarle un objeto con todas las opciones que querramos.

Ejemplo: En la versión anterior haciamos algo así para acceder a las propiedades de los elmentos.

En esta nueva versión podemos hacer lo siguiente, claro que lo anterior lo podemos seguir haciendo:

Como se puede ver, ahora podemos asignarle varios parámetros a la vez, pero hay que notar que también se pueden declarar eventos.

Para mayor información ver el blog oficial, también recomiendo descargar esta nueva versión.

Saludos y a experimentar!.

El día de hoy quiero mostrar como realizar un Drag and Drop utilizando mootools, el ejemplo será sencillo pero se muestran los eventos necesarios para realizar algo más complejo. El ejemplo siguiente muestra lo que se planea realizar, arrastra la carpeta de la izquierda sobre cualquiera de los botes azules.

Hacer esto es muy sencillo, antes que nada hay que descargar la ultima versión de mootools (mootools-release-1.11.js actualmente), luego de esto la importamos al documento así:

El siguiente paso es crear el objeto que se arrastrara y los botecitos donde se soltará la carpeta, el HTML quedará de la siguiente manera.

Ahora mediante CSS acomodamos al tamaño correcto y le ponemos las imágenes respectivas.

El tutorial del día de hoy consta de realizar una lista de imágenes sorteable, en otras palabras, voy a mostrar como poder ordenar una lista de imágenes, con mootools esto es extremadamente sencillo, a continuación se muestra un ejemplo del tutorial terminado.

Que de beneficio tiene esto, pues imagínate que tienes en tu base de datos imágenes de productos de una tienda de aparatos electrónicos, y para cada aparato tienes una serie de imágenes, las cuales deben tener un orden, si las fuiste metiendo en orden pues que padre no, pero ¿que sucede si te equivocas? O si quieres que los usuarios mismos puedan elegir el orden en que aparezcan las imágenes, fácil, creas un campo en la tabla de imágenes donde introduzcas el orden de las imágenes, haces un Query trayéndolas ordenadas ascendentemente por medio de ese campo, pero para que los usuarios las ordenes debes ponerles una interfase fácil, pues si les pones una cajita y que ellos mismos introduzcan el numero de orden, para cada imagen, ¡imagínate! Muchos errores se ocasionaría, para estos casos es que es útil esta interfase, y a continuación muestro como hacerla.

El día de hoy quiero mostrar como hacer un visor de imágenes, con esta interfase es suficiente para realizar una galería, claro esta que esto es solo la GUI, el backend dependerá de las necesidades de cada proyecto en especifico.

Para que te des una idea de lo que mostrare en este tutorial, puedes ver el siguiente ejemplo.

¿Interesante no?, realizarlo es muy sencillo, así que para comenzar es necesario descargar la última versión de mootools (v1.11) e importarla a tu documento, pues es indispensable para este tutorial.