Separar diseño y contenido en las páginas web

Al diseñar una página web hay una serie de normas o recomendaciones del “buen diseño” que conviene tener en cuenta. Entre ellas doy especial importancia a aquella que dice que bueno separar el contenido (lo que queremos expresar) del diseño, o lo que es lo mismo, separar el contenido de la forma de mostrar ese contenido. ¿Porqué es importante?. Si lo hacemos, será fácil modificar o aplicar un nuevo diseño a la web sin tener que cambiar todas las páginas de la misma. Hay diversas estrategias para independizar el contenido y el diseño de la web. Veamos algunas:

Usar hojas de estilos CSS

Hace unos años cuando diseñábamos una página con HTML estábamos obligados a mezclar el contenido (aquello que queremos expresar) con el formato de presentación. De esta manera era difícil aplicar normas de estilo coherentes y aún era más difícil mantener y hacer cambios de estilo en la web. Hoy en día todos los navegadores de Internet ya soportan la utilización de hojas de estilo CSS (Cascade Style Sheet). Con CSS podemos crear un fichero que incluye todos los formatos que hace servir nuestra web. De esta manera, concentramos en un único lugar, todas (o casi todas) las directrices de diseño de nuestra página web. Si hemos aplicado correctamente la norma de separación de forma y contenido, tendremos la garantía de que cambiando un determinado formato en la hoja de estilos CSS, el cambio se propagará en toda la web de forma coherente.

Usar una base de datos para hacer la gestión de contenidos

Esta estrategia tiene ventajas más allá de la separación de diseño y contenido pero también ayuda en este objetivo. Si tenemos un sitio web con mucha información y además muy cambiante, una buena estrategia seria el decidir que el contenido del web se almacene en una base de datos de la web (por ejemplo en una base de datos MySql). Cuando los usuarios visitan una página de nuestro web, ésta hace una consulta a la base de datos y muestra el contenido. Aquí la separación de forma y contenido es muy clara. A estas páginas se les suele llamar como “páginas dinámicas” y suelen estar programadas en lenguajes de programación como el PHP.

La principal ventaja de este sistema es que facilita el mantenimiento del contenido de la web ( a través de sencillos formularios de entrada de información) y sobretodo que permite a usuarios no técnicos el mantenimiento de la información ofrecida por el sitio web.

Ejemplos típicos de aplicación de está estrategia lo encontramos en sitios web que ofrecen un catálogo de productos o servicios amplio y cambiante.

Algunos ejemplos de sitios web con gestión de contenidos

Seguidamente os muestro dos ejemplos de webs que he diseñado y que usan una base de datos para gestionar determinados contenidos.

- CECC (www.cecc.es). El sitio web de la escuela y productora de cine dispone de una base de daots para gestionar las más de 200 producciones de la escuela. Los administradores de la escuela alimentan y gestionan esta base de datos.

 
- Escola de Ceràmica de la Bisbal (www.esceramicbisbal.net). La escuela ofrece un amplio catálogo de cursos. Cada curso tiene su temario y hace referencia a los profesores que imparten los cursos. También hay una tabla que gestiona los horarios y fechas de cada curso. Los administradores de la escuela mantienen toda esta información.