Uno de los aspectos más tediosos del desarrollo/diseño web es el diseño de formularios. Es inmensamente difícil hacer un formulario que:
- Sea fácil de usar
- Esté bien validado
- Esté protegido contra spam, XSS y SQL Injection
- Tenga consistencia visual entre navegadores
- Tenga código semántico y sea accesible
Para hacer un buen formulario hay que atacar el problema por etapas, y la más importante para el diseñador es el prototipado. Prototipar te permite verificaro o cambiar la información que le pides al usuario en un abrir y cerrar de ojos, si te pones a programar te va a ser más difícil hacer cambios por requerimientos de la arquitectura, o símplemente porque te encariñas con el código que ya escribiste.
Tip: nunca programes un formulario sin antes haberlo diseñado visualmente.
El lápiz y el papel sigue siendo el rey cuando se tata de prototipado rápido. Es indispensable para las etapas iniciales, pero una vez que tienes una buena idea de cómo va a ser el formulario, el salto entre lo esquemático (papel) y lo concreto (el código) es muy grande. Hace falta una etapa intermedia.
Hoy les voy a presentar el rediseño de un formulario mediante Xcode (en específico Interface Builder). Realmente lo puedes hacer con cualquier IDE que tenga soporte de GUIs. Me parece que bajo Windows, con Visual Studio .NET puedes hacer lo mismo y los principios son muy parecidos. Si tienes MacOS X, lo más probable es que no tengas Xcode instalado. Al momento de instalar MacOS es una opción que no está puesta por defecto, así que haz una búsqueda de "Interface Builder", y si no lo encuentras, vuelve a correr el disco de instalación con la opción para "Developer Tools" (o Xcode, dependiendo de la versión de MacOS que tengas. También lo puedes bajar gratuitamente pero al peso que tiene (924 MB), más vale que tengas una conexión rápida.
¿Ya instalaste Xcode? Entonces procedamos.
Abre interface Builder en la carpeta de Developer → Applications → Interface Builder, la primera pantalla que debes de ver es esta:
Cocoa es el término que usa Apple para referirse a aplicaciones hechas específicamente para MacOS X, Carbon son las aplicaciones que funcionan bajo OS X y OS 9, pero el MacOS 9 está más que muerto así que no usen esta opción. En el diseño de formularios el punto de comienzo que más nos conviene es la subsección de CocoaChangablePaneDialog dentro de HIG, así que dale click y procede.
La ventana de "Preferencias de citas" es un formulario de ejemplo. Selecciona todo y bórralo. Luego, desde la ventana de Cocoa-text explora los íconos que vienen hasta arriba. Los páneles que más nos sirven son Cocoa-containers, Cocoa-data, Cocoa-text y Cocoa-controls:
Exploren todo, no hay manera de cagarla con Interface Builder. Sólo tienes que arrastrar los elementos desde estos páneles a la ventana de tu aplicación (en este caso "Preferencias de Citas"), y darle doble click para cambiar el texto. Interface Builder te pone guías para alinear y dejar espacios estándares de acuerdo a las guidelines de Aqua, los cuales son buenas referencias para el diseño web también.
Aquí hay un ejemplo de un prototipo de formulario que hice para rediseño del formulario de los comentarios de VallartaOnline:
Y el ejemplo ya programado y ajustado para web:
Échenle un ojo al formulario en vivo para que vean cómo se comporta la validación y los detalles de javascript.
Gran herramienta, se las recomiendo muchísimo.