Formularios en Tractis

Como la semana pasada, esta semana les hablaré de algunos detalles de diseño que vendrán en los futuros formularios de Tractis. Llevábamos un tiempo ya pensando en cómo mejorar los formularios y las vueltas que le estuve dando.

Cuando creamos la primera versión de Tractis, utilizamos en una extensiva mayoría, un modelo de formulario para todo. Cada parte del sitio tenía una misma estructura de HTML, lo cual nos permitía hacer muchas cosas sin tener que re-pensarlo todo. Un ejemplo de la estructura base era:

<div class="form">
  <div class="moduloA">
    <p>Texto explicativo</p>
  </div>

  <div class="moduloB">
    <label>Etiqueta <input type="text" /></label>
  </div>
</div>

A diferencia de otros formularios, este lo creamos diseñando pequeños módulos para definir las estructuras. Así, de esta forma, podemos tener varios tipos de formularios usando el mismo código pero sólo actuando de forma diferente, según el tipo de “módulo” que yo le ordene nuestra hoja de estilo va montando los elementos del formulario. De esta forma, cuando observas un formulario en Tractis podrás ver que las etiquetas y los campos de texto siempre están ubicados de una misma forma:

El problema de utilizar esta forma es el aprovechamiento que hacemos del espacio en la aplicación y las limitaciones de llevarlo a otros ámbitos como ventanas modales, módulos de menús, etc. Algunos formularios no necesitan tanta verticalidad, debido a que los presentamos en una ventana modal (la de firma por ejemplo) mientras que en otros la verticalidad es necesaria. Necesito tener más ventajas de espacio, que con CSS y una concienzuda forma de armar los formularios podría tener elementos dispuestos de esta forma:

¿Cómo mejorar esto? Una solución simple fue crear más variantes y una estructura enfocada más a todas las formas de presentación que tiene Tractis. Con esto en mente puse manos a un pequeño framework en CSS para formularios que dentro de poco lo tendremos en línea. La idea es simple: crear más niveles de presentación mediante el uso de tres clases: fnormal, fhorizontal, fvertical y modularizando los elementos así puedo, recrearlos de diferentes formas. En las pruebas que hice, los resultados fueron excelentes y me sentí muy conforme.

Ahora no utilizo más módulos, sino una estructura de grilla dispuesta de esta forma:

<div class="formularios fnormal">
  <div class="grilla1">
    <label>Nombre:</label>
    <input type="text" name="some_name" value="" id="some_name" />
  </div>
</div>

De esta forma, defino varias cosas:

1. Usando la clase formulario, doy los estilos gráficos básicos de la aplicación.
2. Usando la clase fnormal, fvertical o fhorizontal defino cómo se dispondrán las etiquetas y los campos de texto.
3. Usando la clase grilla[número] puedo definir varias estructuras dentro de un modelo fnormal, fvertical o fhorizontal. De esta forma, si quiero representar las opciones en radios o checkboxes no tengo que tener todo coloreado, sino que puedo utilizar texto normal, sin tener que agregar docenas de clases y variantes tanto en mi código HTML como CSS.

Con estas nuevas armas, puedo pensar en varias cosas, seguir desarrollando y hacer pequeñas modificaciones sin tener miedos ni extender la parte de formularios en CSS demasiado a tal punto que no lo entienda ni Cristo. También de esta forma doy formas fáciles a mis compañeros de hacer las cosas, simplemente tienen que aprender dos cosas y definir los elementos del formulario según estas pequeñas normas y poder usar, por ejemplo el formulario de identificación en varios ámbitos.

Por Diego Lafuente
Guardado en: Diseño | Sin comentarios » | 19 de Noviembre de 2008