Kroppr es un script discreto que mejorará cualquier sitio que desee ofrecer una herramienta de recorte de imágenes para sus visitantes.

A diferencia de otros scripts, Kroppr es capaz de ROTAR, acercar y mover la imagen en tiempo real sin utilizar añadidos – flash o java. El recorte de la imagen es realizado luego de que el usuario se encuentre satisfecho con su manipulación. De esta manera, la carga en el servidor es minimizada y mejorada la experiencia del visitante.

Como los chicos de Mozilla dicen “La Consola Javascript provee de una manera simple para correr los scripts por lote o interactuar con el ambiente en programación exploratoria“.

El tutorial de hoy intentará explicar cómo construir un elemento que se pueda arrastrar y redimensionar – o incluso ambos al mismo tiempo, usando el framework Mootools.

Para lograr esto, haremos uso de dos funciones existentes en Mootools: makeDraggable() y makeResizable().

En un tutorial previo, aprendimos cómo añadir elementos a una página web. En éste aprenderemos cómo seleccionar elementos – o mejor dicho, cómo acceder a un elemento desde una página, y cómo crear nuevos elementos en la página.

Trataré de hacer un pequeño grupo de tutoriales acerca de cómo usar el framework mootools para principiantes casi absolutos. Necesitará saber javascript básico. La documentación para el framework mootools es un poco difícil de entender y requiere conocimientos de javascript más avanzados.

Lo sé, Lo sé, “olfatear” navegadores es un mal hábito que no debería hacerse, pero aún así, hay casos en los que querrá mostrar un mensaje al usuario (usuarios ordinarios, que no modifiquen el navigator.userAgent de su explorador) o usted necesitará saber realmente que explorador el esta usando.

Hay momentos en los que necesitamos crear una imagen ampliada de un producto (o de algo más) que requiere que sea tan amigable al usuario como sea posible. Un ejemplo son los sitios de comercio electrónicos, que usan imágenes de alta calidad para un mayor impacto sobre las mentes de los clientes (joyería por ejemplo).

Continuamos nuestra serie relacionada con Mootools con un tutorial que nos muestra cómo construir un elemento similar a una ventana en nuestra página que puede ser redimensionada y movida. Basados en tutoriales anteriores, crearemos primero un html y luego aplicaremos algo de código JS con el objetivo de obtener lo que deseamos. Este tutorial es simple, así que cubriremos sólo los aspectos básicos que ayudarán a un principiante a entenderlo más fácilmente. En un futuro tutorial les mostraré, basado en este, cómo crear una clase para windows.

Vale, vale, sé que es una contradicción en términos, pero este es un problema con el que se enfrentan muchos novatos, y en ocasiones, una característica como esta sería útil para poder copiar un js completo en un directorio local, y ejecutarlo desde ahí, sin ser forzado a iniciar un servicio web en el ordenador local.

Estoy tan acostumbrado a MooTools que ya comencé a olvidarme de lo básico en Javascript y más, comenzó a disgustarme mucho escribir código en puro js. Pero Mootools carece de los eventos de toque que el iPod y el iPhone poseen. Así que escribí un pequeño código que añade los eventos de toque – bueno, toque, gestos, animación y transformación – a la clase Element.