Tags : Prototype

En este blog hemos hablado sobre varios plugins para implementar un selector de fechas (datepicker); hoy vamos a ver uno que incorpora tiempo. Se trata de Any+Time, otro plugin jQuery para implementar un selector de fecha y tiempo.

Mootools InputMask es un script que utiliza la biblioteca Javascript Mootools y que permite crear una máscara de entrada de datos; esto es por ejemplo, al ingresar un hora, sólo se escriben los números y el script se encarga de darle el formato de notación horaria adecuada.

No me gusta usar, en la medida de lo posible, tecnología Flash en mis desarrollos y desde hace unos años, cuando es necesario por requerimiento del proyecto usar algún efecto o animación, suelo hacerlo con Script.aculo.us; esta hace uso de otra biblioteca, Prototype. En mi caso suele ser un recurso muy sencillo, rápido y faćil de implementar, logrando en pocos minutos buenos efectos y sin comprometer la usabilidad del la página.

Existen muchas formas de mostrar una ayuda, un mensaje o cualquier otro tipo de información que requiera llamar la atención del usuario. Un forma vistosa es usar un tooltip, estos son esas pequeñas burbujas que generalmente contienen textos y que definitivamente, son un recurso visual, mucho más elegante que los diálogos tipo alert que se pueden crear con Javascript.

Panoramic Photoviewer in javascript es un recurso que nos permite implementar un visor de imágenes panorámicas. Cuando posamos el puntero del mouse sobre esta, la imagen se desplazará según lo movamos, a la derecha o izquierda. Gaya Design publica este tutorial (en inglés) que explica paso a paso cómo: suavizar el movimiento de la imagen, el movimiento horizonal desde un menú, desplazamiento sólo moviendo el cursor, etc. Photonav Showcase - Ejemplo

Todavía recuerdo cuando prácticamente, queríamos mostrar unas imágenes con algún efecto visual o ponerle algún grado de dinamismo, teníamos que usar Flash. A la larga lista de recursos que nos permiten implementar slideshows o presentaciones de imágenes, pero con estilo, hay que agregar Ferdinand.Slider. Ferdinand.Slider es una  extensión Prototype con la que podemos implementar slideshows. Basta sólo con ver la documentación, para darse cuenta de lo sencillo que es crear en nuestros proyectos una presentación con este script.

La verdad es que no se me ocurría usar en un proyecto alguna librería que me permitiera implementar algo similar al efecto Lightbox. Este ha sido usado hasta el hartazgo (y sigue siendo usado ampliamente) y su funcionalidad es imitada por múltiples librerías que ofrecen alguna variación de este efecto. Por eso una interesante alternativa, simple y elegante es Zoomy.js. Se trata de una clase Prototype que permite crear una galería de imágenes. Esta se puede usar en ampliaciones de imágenes simples con varias opciones de personalización o como un popup y/o como unas ventanas superpuestas que se pueden arrastrar. Zoomy.js es una opción que se caracteriza por: Permitir hacer clic sobre una imagen miniatura para mostrarla ampliada, como esta es precargada el tiempo de reacción es rápido. Opcionalmente puede mostrar título y un botón de cierre. Depende de las bibliotecas Javascript Prototype y Scriptaculous. Entre las opciones de personalización figuran:

Casi a diario hablo sobre algún recurso para implementar una galería de imágenes. Pero en todos los casos se requiere poseer conocimientos bastantes avanzados. Si eres entusiasta de la programación y deseas implementar una galería sin demasiadas complicaciones, una forma sencilla de hacer esto es usando qGallery qGallery te permitirá implementar una galería con tus imágenes de una forma muy simple. Sólo debes subir las imágenes tal como están, subir un archivo XML y agregar el script y el div en el código de la página. Este recurso utiliza la biblioteca Prototype, funciona en los navegadores más modernos y es gratis para uso personal.

Anteriormente había presentados scripts para crear un carouseles de imágenes. Uno de ellos era Carousel.us y el otro Agile Carousel. Una tercera opción es Showcase que es una extensión Prototype para mostrar imágenes en un especie de carousel. No tiene el dinamismo de los otros, pero si dudas es otra buena alternativa para usar en nuestros desarrollos que aporta variedad y estilo personal. Principales características: es fácil de implementar; usa las bibliotecas effects.js, prototype.js y Script.aculo.us; funciona en sentido vertical, horizontal y diagonal; corre sin problemas en los navegadores más modernos; no posee limitaciones en cuanto a número de imágenes; y estas se pueden actualizar entre algunas características más.

Hoy un cliente me encargó algunas actualizaciones de su sitio entre las que incluyó un nuevo formulario. En Web Resources Depot encontré un script que me gustó mucho y que voy a utilizar. Se trata Proto Form que permite de un forma realmente sencilla validar formularios. Usa Ajax y la biblioteca Protoype. Sus principales características son: es sencillo de implementar; su código es no invasivo; permite verificar que estén completos los campos obligatorios; también permite validar datos como: fechas, email, números de teléfono y URLs; envía datos y muestra mensajes vía Ajax; resalta los campos que contiene errores; y es muy liviano, sólo ocupa 4kb. En el sitio de este script, encontramos detalladamente toda la documentación con los pasos necesarios para implementarlo (en inglés).