Creación de un sitio web (IX)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Relación diseño-programación.-

Si, como hemos visto, a veces es necesario el uso de diferentes lenguajes de programación en nuestras páginas y el uso de diferentes tecnologías y servidores, la siguiente pregunta a hacernos es ¿cómo puede afectar esto a nuestro diseño web y al código HTML y JavaScript usado?.

La respuesta es que depende. Depende del tipo de programación usado y depende de las necesidades funcionales derivadas de la propia aplicación. Pero siempre se va a ver afectado el código HTML y la estructura propia de la página por la inclusión de código de programación.

Un ejemplo.

Imaginad que hemos creado una tabla, muy bonita y funcional desde el punto de vista del diseñador, con sus márgenes fijos (hemos usado rowspan para ello) y un número concreto de filas de datos. Además, para maquetarla correctamente hemos usado unas anchuras de celda fijas. Muy bonito todo, pero ahora vienen los programadores, meten su código y nos dicen:

a) No sabemos de antemano cuántos registros nos va a devolver la base de datos, por lo que no sabemos cuántas filas va a tener la tabla >> el diseño con rowspan se nos va al garete >> la tabla se descoloca toda.

b) No sabemos tampoco la extensión en caracteres que va a tener cada dato de celda, por lo que puede llegar datos de más caracteres que los que entran el la celda de ancho fijo que hemos creado >> la celda se abre o salta a dos filas >> la tabla entera se descoloca y afea.

c) Como no sabemos el número de filas que van a aparecer, lo mismo son pocas, con lo que la tabla no nos queda centrada, que son mil, con lo que nos encontraremos con un scroll tremendo en la página >> se rompe todo nuestro esquema de diseño.

Otro ejemplo.

Imaginad que hemos creado un formulario en el que el usuario puede elegir varias opciones de filtrado de datos. Hemos maquetado este mediante una tabla, que por cierto nos ha costado mucho construir, ya que lleva muchas celdas de tamaños diferentes. ¡Qué bonito nos ha quedado!.

Pero resulta que los usuarios de la aplicación van a tener asignados unos permisos específicos, de tal forma que cada usuario sólo podrá ver en el formulario aquellas opciones de filtrado para las que tenga permiso. Los programadores crean el código necesario para que aparezcan sólo estos campos autorizados, pero todo el esquema HTML del formulario se ha perdido, y lo que aparece en pantalla es más bien un engendro diabólico que un formulario.

¿Qué podemos hacer en estos casos?. La solución pasa por hacer un planteamiento totalmente diferente del diseño HTML de cada página, y desde el principo, para no perder tiempo y ánimos. Debe haber reuniones previas entre diseñadores y programadores, hacer un estudio a fondo de los requerimientos funcionales de cada elemento de cada página, y diseñar luego éstos de acuerdo a estas premisas.

A veces esto es imposible, por no saber de antemano la longitud de los datos que vamos a recibir, cuántos van a ser, etc. Esto nos condiciona a realizar un diseño elástico, entendiendo por tal aquel que se puede adaptar lo más posible a diferentes situaciones.

Por ejemplo, en los casos antes expuestos, podemos construir tablas que no usen rowspan o colspan (sobre todo el primero), sustituyéndolos por filas que tengan todas el mismo número de TDs, rellenando las vacías con imágenes transparentes de 1x1 pixels. Podemos acordar con los programadores un tamaño máximo admisible para los campos de longitud desconocida, de tal forma que mediante código en servidor se recorten aquellos datos que sobrepasen estos límites preestablecidos. Podemos establecer un número máximo de filas aceptables en cada tabla, pidiendo al servidor de bases de datos ese número de registros en cada tanda, e introduciendo en las páginas unos botones de repaginación que permitan al usuario cargar de nuevo la tabla con los registros anteriores o siguientes.

Más facilmente o de forma más compleja, siempre podremos encontrar el punto de equilibrio necesario entre diseño y programación; pero para ello es básico un estudio inicial profundo y una estrecha colaboración entre diseñadores y programadores.

Este trabajo de colaboración mutua define unas fases propias en el proceso de creación de una plicación web, que van a ser más o menos constantes en todos los trabajos. Vamos a ver un resumen en el capítulo siguiente.