Formularios bonitos con JQuery y jqTransform

A veces no importa la calidad del trabajo que hayamos realizado a nivel de desarrollo. Podemos haber hecho un adecuado diseño de la base de datos, aplicado de forma correcta varios patrones de diseño o haber escrito código modular y reusable. Pero nada de eso le interesa al cliente ya que todo le entra por los ojos.

El aspecto estético de las aplicaciones web impacta más de lo que debería a los usuarios y los hace pensar que lo que se ve bien funciona bien y lo que se ve mal, funciona mal. Sabemos que esto no es así, pero eso no quiere decir que tengamos que hacer todo feo y concentrarnos únicamente en el backend de la aplicación.

Es posible crear interfaces gráficas estéticamente agradables que, además de lucir, den un aspecto profesional a nuestras aplicaciones. El diseño de las pantallas de usuario siempre queda a cargo de los diseñador gráficos, pero cuando se trata únicamente de formularios, podemos tener el tema solucionado sin necesitarlos.

Sí, así es. Porque por suerte, existen librerías como jqTransform, que usa JQuery y que convierte los deslucidos formularios que muestran algunos navegadores en preciosas interfaces gráficas de alto impacto visual.

formulario-jqtransform

Ejemplo de utilización de jqTransform

Vamos a utilizar esta librería. Primero vamos a descargar JQuery de su web oficial. Recuerden descargar siempre la última versión. Tienen la posibilidad de obtener una versión comprimida, ideal para entornos de producción.

El código fuente completo de este ejemplo lo pueden encontrar aquí. Y el resultado funcionando, aquí.

La librería jqTransform la pueden descargar de la web de sus creadores: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Creamos un proyecto o una nueva página. Para este ejemplo sólo usaremos HTML, CSS y Javascript.

Veamos un ejemplo de formulario en HTML para aplicar este estilo. Utilizo la estructura de maquetado a dos columnas que ya he explicado en este blog. Tal vez les convenga repasar algunas nociones de ese artículo.

Este documento HTML es un muestrario de distintos formularios donde incluí cajas de entrada de texto, select, options, checkbox, textarea y un botón.

El paquete de jqTransform trae un ejemplo y una versión de JQuery. Yo decidí crear un directorio js en la misma ubicación que el archivo html base y además, otro llamado css.

Dentro de js copiaremos el archivo fuente de JQuery y el jquery.jqtransform.js que viene en el paquete de jqTransform y se encuentra en el directorio jqtransformplugin.

El archivo jqtransform.css lo copiamos al directorio css. Ahí mismo copiamos el directorio img (con todo su contenido) que viene en el paquete de jqTransform.

Volvemos al archivo HTML y en el encabezado del documento pondremos lo siguiente:

Primero incluímos el script de JQuery y luego el de jqTransform. A continuación, es necesario inicializar el plugin

El selector de JQuery permite apuntarle a los elementos del DOM que queramos transformar. En este caso, selecciona los formularios cuya clase es “jqtransform“. Noten que en el código HTML, la etiqueta form tiene el atributo class definido de esa misma manera.

Luego, vinculamos la hoja de estilo del plugin. Si se animan, pueden abrir el archivo css y modificar algunas propiedades para ajustarlo a sus necesidades. Por ejemplo el tamaño de la letra en las cajas de texto.

Debajo, ven el estilo CSS de la maquetación del formulario a dos columnas.

Conclusiones

Como han visto, utilizar JQuery con jqTransform no sólo convierte los formularios a un diseño estilizado, sino que además nos abstrae del problema de darles formato. Sí, tal vez hay que seguir ocupándose de la maquetación, pero lo que hace a la parte estética es sin dudas un problema menos.

Al contribuir al diseño de la aplicación web, brinda un aspecto cuidado, de rasgos claramente profesionales, lo que puede hacer potenciar nuestros trabajos como programadores porque, como dije al principio, al cliente todo le entra por los ojos.

 

Soy programador web y me desempeño como Líder Técnico en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

2 thoughts on “Formularios bonitos con JQuery y jqTransform

  1. Buenas, me sirvió mucho tu ejemplo, soy un iniciado en php, ya he realizado algunos proyectos pequeños, me gustaría saber como puedes achicar las cajas text, me imagino que se deben cambiar en el jquery.celicito ss ¿ pero donde ? ¿ no se? y te felicito muy bien explicado todo.

  2. Me parece que si buscás cambiar los text hay que modificar las imágenes que utiliza el plugin y seguramente alguna sección vinculada en el CSS. Es posible no sólo cambiar algunos de los controles, sino también crear skins nuevos para jqTransform. Aunque, el trabajo estará tan vinculado con el diseño gráfico como con la programación.

    Muchas gracias por tu comentario!
    Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*