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

Diseño Modular.-

Bueno amigos. Vamos ya a empezar a crear nuestras páginas, después de tanto estudio previo, y es hora de pensar un poco cómo vamos a construir nuestro sitio web.

Generalmente un sitio web es un conjunto grande de páginas que guardan una fuerte relación entre sí, expresando el conjunto de todas ellas la naturaleza y el objetivo del sitio, su espíritu.

Y normalmente dentro de este amplio número de páginas a crear existirán varios subgrupos de ellas que tendrán un aspecto y funcionalidad muy parecidos. Así, todas las páginas que contengan un formulario de entrada de datos serán muy similares, lo que ocurrirá también con todas aquellas destinadas a presentar los resultados de consultas, con las que encabecen una sección determinada, etc.

De esta forma, si tenemos que construir una a una y desde el principo todas las páginas del sitio, en cuanto este esté formado por un número elevado de estas, el trabajo se hará en seguida lento, arduo y pesado. Además, el tempo es oro, vale dinero, y deberemos procurar crear nuestros sitios web en el menor número de días posible.

Puesto que las cosa son así, prima entonces la idea de la modularidad a la hora de construir nuestras páginas. Se entiende por diseño web modular aquel que parte de unas plantillas o páginas modelo, que van a definir el aspecto y el diseño interno de un completo grupo de páginas similares. Además, el diseño modular conlleva la reutilización, es decir, el uso repetido de mayor número de elementos de diseño, como pueden ser las imágenes de las páginas.

Siguiendo este diseño modular, empezamos a construir nuestro sitio web, y lo primero que hacemos es crear la página principal, aquella que va a dar entrada al sitio, la primera página importante que se va a encontrar nustro visitante. Esta debe ser sin duda la más elaborada y cuidada del proyecto, ya que es nuestra tarjeta de presentación, y de ella depende que el usuario siga navegando por el sitio o que por el contrario, nos abandone.

Para su elaboración usaremos todos los datos obtenidos en la primera fase (logotipos, imágenes preestablecidas, colores, etc ) siguiendo al pie de la letra el último modelo gráfico aprobado por el cliente.

De esta pasaremos a las páginas que dan acceso a las subsecciones. Deben tener todas ellas un diseño similar, siendo aconsejable que tan sólo cambien en algún color o signo representativo de la sección en concreto. Aplicando el diseño modular, creamos una plantilla (template) válida para todas estas páginas de entrada a las subsecciones, debiendo mantener en ellas la línea estética de la página principal y reutilizando en las mismas los logotipos ya usados en esta. Inicialmente repetimos esta página tantas veces como subsecciones tengamos, y si no tenemos los textos de contenido perfectamente definidos por el cliente, las completaremos con los titulares que identifiquen la sección y con unos textos en latín, por ejemplo, que llenes las páginas y le den un aspecto similar al que tendrán al final.

Seguimos bajando de esta forma en el arbol jerárquico de la estructura de páginas, hasta llegar a las páginas individuales últimas en la cadena. Para ellas seguiremos aplicando el diseño modular, de tal forma que si vamos a tener varios formularios en el sitio, todos deben basarse en una plantilla padre para estos, en la que definiremos si van a estar encuadrados, los márgenes que van a tener, si llevan cabeceras, etc. Por ejemplo, podemos crear la siguiente plantilla para nuestros formularios:

título del formulario
	primer enunciado	primer campo de formulario
	segundo enunciado	segundo campo de formulario
	tercer enunciado	tercer campo de formulario

Vemos que en esta plantilla definimos unas columnas de bordes laterales de 10 pixels, un titulo superior para cada formulario, sobre color de fondo diferente al de la tabla y una serie de celdas de separación vertical entre el título y los campos de formulario y entre estos y los botones de envío y reseteo, dejando un margen inferior adecuado. Os pongo la tabla con bordes para que veáis el efecto, pero las diferentes tablas irán luego sin bordes.

Una vez definida esta plantilla, todos los formularios de las diferentes páginas del sitio seguirán este esquema de construcción, y lo mismo haremos con los demas grupos de páginas similares: una plantilla para las tablas de presentación de datos, otra para los mensajes informativos o de error, etc.

Ya creadas las plantillas, procederemos ahora a montar todo el sitio web, creando una variante provisional del sitio completo, aunque todavía no estén personalizadas todas las páginas del mismo, y una vez montado todo el sitio, siendo totalmente navegable entre sus páginas y siguiendo todas ellas un esquema de diseño y estética común, es hora de citar de nuevo a nustro cliente y enseñarle el resultado, para obtener una nueva opnión de él.

Este es el momento de que nos diga qué le parece lo que van a ser sus páginas web y si cree oportuno algún cambio, ya que una vez dada su aprobación empezaremos a individualizar cada una de las páginas hasta obtener el aspecto final de cada una de ellas y la del sitio completo.

Aprobado por el cliente, completamos los textos y los campos de formulario de cada una de las páginas, con la idea clara de que los diseñadores tendrán total libertad a la hora de completar las páginas que serán estáticas, sin código de programación interno que las afecte, pero que para aquellas páginas que vayan a llevar código ASP, JSP, etc., deberán antes contar con la opinión de los programadores, ya que tal vez necesiten ellos un tratamiento especial de la página que afecte al diseño o al código HTML de la misma.

Este es el último paso de la parte de diseño de las páginas del sitio web. Una vez completadas todas, si nuestra aplicación precisa acceso a bases de datos o efectos dinámicos pasa a manos de los programadores, que se encargarán de dar vida a la misma. Estos tienen entonces entre manos un completo trabajo que realizar, que incluye la elección de los servidores web y de bases de datos a usar (si no vienen impuestos de antemano), la selección de los lenguajes de programación a usar y la propia implementación del código en las páginas.