Separación: el dilema del diseñador Web

por Michael Cohen

Con toda la discusión acerca de separar presentación de los contenidos (y la estructura) es fácil perder de vista el objetivo. Así que volvamos atrás, definamos los términos y fijémonos en el sentido que tiene.

Presentación

El principal motivo para serpara presentación del resto de la página es sencillo: para simplificar cualquier cambio, desde un ligero ajuste a un rediseño completo. Para conseguir una separación completa de la presentación, debemos aislar todos los elementos y enfocarlos hacia el estilo que se les aplicará.

Contrariamente a lo que pudiera pensarse, esto no se limita al CSS, ni siquiera en un sitio como CSS Zen Garden. Implica las etiquetas del código HTML y propiedades que existen sólamente para proporcionar un lugar en el que el diseñador aplica los estilos. Después de todo, ¿qué sentido tiene una bloque de declaración como .pageheader {…} si no hay ningún elemento de esa clase en la página?

Piénsalo y sigue leyendo.

Contenido

El motivo por el que debemos separar contenido del resto de la página es tan fácil de entender como la razón por la que aislamos la presentación. Aislar el contenido hace que añadir o actualizar las cosas sea fácil, y al mismo tiempo se puede mantener una consistencia en la presentación a través del sitio. Sin embargo, al igual que con la presentación, puede surgir alguna confusión respecto de lo que realmente es el contenido.

Para nuestro propósito, el contenido es (normalmente) texto e incluye etiquetas acompañantes de tipo semántico, como h1-h6, párrafos, listas, em, strong, code, cite, etc. El contenido no requiere ninguna etiqueta de representación o estilos para transmitir completamente su mensaje.

En casos aislados, podemos utilizar etiquetas adicionales para presentar de forma más correcta el contenido. Por ejemplo, un poema — en el cual los saltos de línea específicos son importantes — podría separarse con una etiqueta <pre class="poem"> ,o podría simplemente utilizarse la etiqueta de salto de línea <br>.

Estructura

Aquí es donde las cosas se lían. Primero ¿qué es la estructura? Podríamos describir la estructura como todo aquello que forma una página, excepto los elementos de presentación y los contenidos. Sin embargo, ésta es una definición muy simplificada que puede causar una confusión innecesaria.

Tomemos los menús de navegación de ALA como ejemplo:

Cambia un color aquí, un grosor del borde allí y ya tienes un cambio en la presentación.
Cambia el texto en el primer ítem de navegación de “Up front” a “Home”, y tienes un cambio en el contenido.
Finalmente, tienes las etiquetas <div id="menu">, <ul>, and <li id="…"> como estructura. Cambia estas con una antiug fila de celdas de tabla, y tienes un cambio en la estructura.

Pero aguarda — ¿recuerdas lo que apunté antes? Estas etiquetas incluyen elementos de presentación: los IDs. Como han señalado tanto Doug Bowman como Eric Meyer la presentación no tiene sentido sin estructura. Es más, veremos que también es inútil intentar separar la estructura del contenido.

Toma el ejemplo de contenido del web más simple que puedas imaginar:

  <h1>Title</h1>
  <p>Lorem ipsum dolor met.</p>

El<h1> y <p> son claramente parte del contenido, ¿no? No podemos escribir HTML sin este código semántico básico. Aún así, este código es también parte de la estructura del documento, ya que divide lo que por lo demás sería un montón uniforme de palabras en un encabezado y un párrafo. (Y naturalmente, si somos muy estrictos, podríamos incluso considerar el código como parte de la presentación. Al fin y al cabo, el navegador tiene una forma predefinida de mostrar los <h1> y <p> del texto, ¿verdad?)

¿Dónde nos lleva todo esto?

Contenido y estructura

Teóricamente puedes separar contenido y estructura, pero te quedará el <ul><li></li></ul> para la estructura, y un texto sin muchas opciones para el contenido. No hace falta decir que montar un sito funcional a partir de aquí sería casi imposible.

Así que podemos llegar a la conclusión de que la estructura no puede y no debería separarse del contenido.

Presentación y estructura

Como hemos visto, sin elementos estructurales, no hay manera de aplicar estilos al contenido. La estructura no puede separarse de la presentación; ni debería.

Todo lo cual nos lleva a …

Presentación y contenido

Si bien la presentación depende de la estructura, parte de la cual está incrustada en el contenido, como hemos indicado antes, la presentación puede y debe separarse del contenido.

Aunque los mayores cambios en la presentación pueden requerir grandes cambios en la estructura, el contenido se puede modificar sin necesidad de cambios en la estructura más allá de loselementos estructurales ya considerados.

Herramientas para la separación

Con todo esto en la cabeza, veamos cual sería el perfecto sistema de separación en un sitio web.

Almacenaría el contenido en una base de datos, permitiendo aislar y manejar la información de los contenidos. La presentación y la estructura se manejarían juntas; la presentación se podría conseguir con hojas de estilo y elementos estructurales adicionales si fueran necesarios.

La estructura se manejaría mejor con un sistema de paquetes de “plantillas” construidas utilizando un lenguaje de guiones en servidor (como PHP o ASP). Cada “paquete” de plantillas podría tener una o más hojas de estilo (como en CSS Zen Garden), pero cada “paquete” de plantillas conectaría con la misma base de datos para recuperar el contenido que se debe mostrar.

Muchos sistemas de manejo de contenidos (CMS) proporcionan diversos niveles de este tipo de control. Sin embargo, sistemas completamente basados en plantillas que hagan uso de las hojas de estilo como en CSS Zen Garden son muy pocos.

Pero para un webmaster competente, construir algo como esto partiendo de cero no puede ser tan duro ¿o sí?

Michael Cohen es un webmaster americano-israelita que ha creado páginas web desde 1995. Es el vicepresidente de la compañía de hosting Revolution Media LTD.. En su tiempo libre, disfruta con Hard Light Productions.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]