Diseño y contenido: Juntos pero no revueltos

Una de las cosas que uno aprende por esas páginas del Mundo Exterior que realiza la gente que sí sabe de esto es que diseño y contenidos deben estar separados. Puede que no tengas muy claro a qué se refieren con esto. Veamos un ejemplo:

Pongamos por caso las etiquetas <FONT>... </FONT> y lo que ocurre en ellas:

Por una parte, dentro de la etiqueta declaramos su color, su tipo de fuente, su tamaño... Por otra parte entre las 2 etiquetas siempre hay (o debería haber) algo de texto:

<font face="Arial, Helvetica, sans-serif" size="2" color="#FF0000">esto
es el contenido</font>

Nos devuelve: esto es el contenido

Este es el ejemplo más claro de mezclar diseño y contenido: por un lado, el diseño: color, tamaño, tipo de letra... y por el otro el texto que queremos que la gente lea.

Bueno, ¿y qué? Así se ha hecho casi siempre y la cosa no ha ido tan mal.

Cierto, pero este sistema presenta algunos inconvenientes (sobre todo para los que somos unos vagos miserables):

1.- Cambiar el color de una fuente a lo largo de 100 páginas es un trabajo "un poco" pesado: y quien dice el color, dice la fuente, el tamaño, el color de fondo de una celda... ¿os imagináis que después de estar una semana, un mes o un año trabajando en el diseño de un sitio, al jefe se le ocurra decir: "mmm. Igual quedaba mejor en Verdana que en Arial..." Sería muy, pero que muy gracioso...

2.- ¿Y cambiar un JavaScript, también incluido en el encabezado de 50 páginas? aquí ya no nos libra ni el mejor editor.

3.- El tamaño de la página: Esa cosa que nadie mira cuando se trabaja en ella y se sufre cuando se ha terminado, porque no carga ni a la de tres. Mirad en muchas páginas (ésta que estáis leyendo, por ejemplo) la cantidad de veces que se repiten etiquetas como la de arriba y pensad la cantidad de código que se podría eliminar si se pudieran acortar.

¿Hay vida después de la muerte?. No lo sé, pero si hay solución a los 3 problemas anteriores. Y presenta alguna ventaja: Cuando el jefe quiera un cambio de fuente, contestaréis: "Ufff, eso llevará unos 2 días", y vosotros lo haréis en 5 minutos (y el resto, para descansar o visitar sitios como éste). ¿5 minutos?. Sí, incluso menos.

solución 1: separa el código JavaScript en un archivo separado (los famosos archivos .js) y coloca en ellos todas las funciones que vayas a necesitar. Bueno, sin muchas, puedes crear 2 o 3, pero no es necesario.
Ventajas:

• Si tienes que cambiar el código, sólo lo tienes que modificar en un archivo.
• El navegador guarda en caché el archivo .js, por lo que las cargas se aceleran (no tiene que volver a cargar la misma función

Solución 2: Utiliza CSS: Ya sé que es más cómodo dar formato al texto sobre la marcha, pero con un poco de esfuerzo al principio, tendrás ya preparado el formato para cientos de páginas. Un truco: ¿os habéis fijado en lo poco utilizadas que están las etiquetas que van de <H1> a <H6> ?. ¿Por qué no utilizarlas para tener hasta 6 formatos diferentes de texto?. Queda mejor:

<H2>esto es el contenido</H2>

que:

<font face="Arial, Helvetica, sans-serif" size="2" color="#FF0000">esto
es el contenido</font>

Si a esto le añadimos que pueden ir declaradas en un archivo aparte, sobra el comentario de que para cambiar el tamaño de la fuente de 200 páginas, sólo habría que modificar 1 línea. ¿empiezas a verle utilidad?

Solución 3: Utiliza SSI: Es quizá la parte menos conocida, pero te permite trabajar con pedacitos en vez de con una página completa: Es muy utilizado en muchos sitios para el encabezado, el pie de página (esa zona en la que hay que escribir siempre lo mismo y qe se repite por todas las páginas), una barra de navegación... ¿Es o no es un problema que, después de escribir en 100 páginas el número de teléfono de la empresa, hay que cambiar un número por otro?

Esto que os he contado (por encima) es lo que se quiere decir con eso de separar diseño de contenido: Deben estar juntos (las páginas son contenido y diseño), pero no revueltos, sino cada uno en su lugar.

¿Empezáis a verle utilidad a lo que aparece en este sitio? Ahora, a esperar que al jefe se le ocurra pedir modificaciones en el diseño...