April 3rd, 2005

Separación de contenido y presentación

El lenguaje (X)HTML (con esto me refiero tanto al HTML como al XHTML) es uno de los llamados “lenguajes de marcas”. �Qué significa esto? Que en su interior encontramos información que se encuentra “marcada” utilizando lo que se ha dado en llamar “etiquetas”. Como ejemplo podemos ver el siguiente fragmento de un archivo XHTML
<h1>Este es el título de la sección</h1>
<p>El primer párrafo del texto.</p>
<h2>Un subtítulo</h2>
<p>Un párrafo de texto.</p>
<p>Otro párrafo de texto.</p>
<h2>Otro subtitulo</h2>


Como podemos ver en este fragmento de código las etiquetas son todo aquello que se encuentra entre “< ” y “>”. En nuestro caso tenemos las siguientes etiquetas h1,h2 y p, más adelante analizaremos que son estas etiquetas. Cabe notar que cada etiqueta tiene lo que se llama una etiqueta de cierre que es igual a la etiqueta de inicio con la excepción de que incluye una /.

Con esta sencilla notación indicamos al programa que se encarga de interpretar el documento el contenido del mismo, y reitero solo el contenido.

Si hicieramos un diagrama del contenido de nuestro fragmento tendríamos algo de este tipo:

• [h1 - Encabezado de nivel 1]: Este es el título de la sección
• [p - Párrafo]: El primer párrafo del texto.
• [h2 - Encabezado de nivel 2]: Un subtítulo
• [p - Párrafo]: Un párrafo de texto.
• [p - Párrafo]: Otro párrafo de texto.
• [h2 - Encabezado de nivel 2]: Otro subtítulo

Como dijimos anteriormente, esto define el contenido del documento. Entonces, �cómo definimos la presentación del mismo, su apariencia visual? Para esto recurrimos a otro documento, que no explicaremos aqui, llamado hoja de estilos (documento de tipo CSS) que asigna a cada etiqueta un conjunto de características, por ejemplo: tipografía, tamaño, color, fondo, margenes, etc.

Pero, entonces es más complicado, dirían los más listos. No solo tengo que definir un documento con el contenido, sino que tengo que crear un segundo documento con las características del diseño que deseo darle a mi contenido. Es cierto, pero seguro están olvidando algo…

Imaginen ahora que tengo un sitio web en el que se presenta un catalogo de productos. Supongamos que tengo 1.000 productos diferentes, cada uno de los cuales tiene un estrcutura como la que sigue:


<h1>Nombre del producto</h1>
<h2>Marca</h2>
<h2>Categoria</h2>
<h2>Precio</h2>
<p>Descripción de mi producto</p>


Como quiero que todos los documentos tengan visualmente el mismo aspecto, a los efectos de lograr una coherencia en el diseño de todo el sitio, puedo crear una hoja de estilos y aplicarla a los 1.000 documentos, con lo que logra una homogeneidad en la presentación de mis productos. Más aún, si en el día de mañana deseo modificar la forma en que se muestran los productos solamente debo modificar 1 archivo, la hoja de estilos, y no los 1.000 que debería haber modificado si hubiera incluido la presentación en el mismo documento que el contenido. ¿Sigue pareciendo más complicado?

Un segundo uso, tanto o más importante que el anterior, relacionado con el uso de hojas de estilos es la posibilidad de a partir de un mismo contenido generar diferentes presentaciones dependiendo, por ejemplo, del medio que utilize el usuario del sitio. Es común hoy en día, además de utilizar para visitar los sitios web un navegador ejecutandose en una computadora de escritorio, la utilización de distintos dispositivos como pueden ser teléfonos moviles, PDA”s, etc, cada uno de los cuales tiene diferentes posibilidades y requiere presentaciones diferentes. Mediante las hojas de estilo podemos desplegar correctamente la información, de acuerdo al medio utilizado por el usuario, sin la necesidad de duplicar el contenido.

Por lo tanto, y a modo de resumen, la separación de contenido y presentación garantiza dos cosas:

1. Uniformidad visual entre diferentes documentos de contenido similar. Esto lleva a tener sitios con apariencia profesional y facilmente escalables (que se pueden expandir facilmente) ya que solo es necesario crear nuevos documentos de contenido, sin preocuparnos del diseño.
2. Unicidad del contenido, independientemente de la visualización aplicada. Con lo que se logro una integridad en la información obtenida a traves de distintos medios. Da lo mismo si navegamos la web con el PC, con el movil o con la tostadora, el contenido que veremos será siempre el mismo.

Tags: CSS, estandar, XHTML