3 capas de presentación
Visita este artículo en http://www.estadobeta.com/2005/11/25/3-capas-de-presentacin/
Por Ismael en (X)HTML, CSS, SEO, artículos, destacados, javascript, presentaciónIntroducción a la serie “3 Capas de Presentación” para la construcción de interfaces web accesibles.
Aún entre programadores y diseñadores que llevan años construyendo sitios web son comunes prácticas de desarrollo heredadas de los primeros años de la web. Durante la “guerra de los browsers”, y el auge del software WYSIWYG tipo Dreamweaver o Frontpage, la industria no tenía estándares claros y las tecnologías de desarrollo competían sin control. De esta época todavía subsisten las tablas dentro de tablas, el javascript “Internet Explorer Only”, la etiqueta FONT y atributos como bgcolor o border. Todavía se diseñan documentos HTML distintos para el monitor y la impresora, aún cuando el contenido es el mismo.
Pero la web ha cambiado. Los fabricantes de software, los diseñadores y los mismos browsers se estan dando cuenta de que este caos tecnológico encarece la producción de contenidos para la web hasta hacerse insostenible. Se estan definiendo estándares que permiten separar los distintos elementos que componen una página web corriente -un documento- en dominios específicos: estructura, presentación, comportamiento.
Cuando hasta hace poco era común encontrar páginas que reunían html, imágenes (los famosos gifs transparentes), textos y javascript en una sopa indescifrable de código, ahora se han separado las tareas y madurado lenguajes que permiten al desarollador aislar los problemas y por tanto las soluciones, minimizando el tiempo invertido en mantención, diseño y producción de contenido. Así, un documento bien estructurado para la web consta de al menos tres capas:
Capa de Estructura: HTML (HyperText Markup Language)
La estructura del contenido y lo único visible para los motores de búsqueda (y por lo tanto lo más importante para la SEO). Debe categorizar el contenido semánticamente, es decir usar las etiquetas apropiadas de acuerdo a cada fragmento de contenido. Esto es vital para los buscadores, bases de datos, resúmenes y archivos. Ideálmente, un documento HTML debiera ser legible sin la necesidad de un browser gráfico y ser perféctamente funcional sin necesidad de imágenes o javascript.
El HTML (o su encarnación más reciente, el XHTML) se encarga exclusívamente de estructurar el contenido con independencia del diseño visual y los dispositivos de presentación.
Capa de Diseño: CSS (Cascading Style Sheets)
Este lenguaje se encarga del diseño estético de los contenidos estructurados en HTML (o XML). Debiera estar contenido en archivos opcionales independientes para separar el diseño del contenido. La especificación número 3 de CSS incluye directivas no sólo para diseño de pantalla e impresora, sino también para dispositivos de audio e incluso impresoras Braille, lo que nos da una idea del alcance que tiene una separación efectiva del diseño y el contenido.
Capa de Comportamiento: Javascript
Como CSS, esta también es una capa opcional que se agrega a la estructura HTML, y su función es añadir dinamísmo al despliegue de contenido en pantalla. Ejemplos de esto son los tradicionales menus desplegables y rollovers complejos, pero su poder real radica en la capacidad de manipular líbremente la estructura del documento original. Dicho esto, la ausencia de javascript no debiera impedir la accesibilidad a las distintas secciones de un sitio web.
En el próximo artículo de esta serie daré ejemplos y recursos para ilustrar el uso apropiado de HTML semántico.
Algunas referencias
Estos son los documentos oficiales de la W3C:
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
11/30/2005 at 2:51 pm
A juicio personal una de las potencialidades más importantes al momento construir sitios en 3 capas de presentación, es la optimización del tiempo. Con lo anterior se tiene la posibilidad de que más de una persona se involucre al mismo tiempo en la construcción de una misma página, mientras uno desarrolla la lógica (javascript), otro implementa el contenido (HTML) y otro el diseño (CSS) logicamente se disminuye el tiempo de construcción de dicha página en 1/3.
En segundo lugar tal como se comenta en el artículo, el tener un contenido más limpio permite favorecer la SEO, pero si separamos el contenido de la lógica y el diseño, y no lo distribuimos adecuadamente (entiendase por utilizar y de forma correcta los H1, H2, P, meta description, etc) ¿de que sirviría?, cierto!
12/2/2005 at 2:13 pm
Sip. La separación de tareas que introducen estas tecnologías en el proceso de trabajo abaratan el desarrollo y facilitan la mantención. Esto da pie a discusiones interesantes sobre cuál es la constitución ideal de un equipo de trabajo que utiliza metodologías modernas de desarrollo web, o más bien cómo estas metodologías posibilitan equipos pequeños y eficientes. En éste artículo y sus comentarios hay varias posibilidades (en inglés).
12/2/2005 at 2:39 pm
Primera vez por acá, y te felicito por la presentación, y los contenidos.
En cuanto al tema. Desde una perspectiva personal, el mayor aporte de realizar trabajos, es la mantención, desde aplicar retoques, rediseños parciales, o descubrir dónde está la razón de algún ‘mal comportamiento’.
12/2/2005 at 4:31 pm
Gracias por tu comentario Roberto. Bueno tu blog tb.
Efectívamente la mantención se ve favorecida, pero es importante que estas tecnologías (xhtml, css, javascript no intrusivo) se apliquen en el marco de una metodología sólida. A veces, por entender mal las ventajas de css, por ejemplo, se puede salir para atrás en términos de mantención de un siito complejo.
A mi juicio, las innovaciones recientes en la web (”Web 2.0″ para algunos) es un tema metodológico más que tecnológico (la mayoría de esas tecnologías existen hace años).
La idea de este sitio es explorar y entender un poco mejor esas metodologías.
1/22/2006 at 11:22 am
Hola , leo tu artículo con mucho interés. Soy un novato en la creación de webs, y el método que me enseñaron dista mucho de la metodología de las tres capas. He experimentado un poco con los css, pero sigo utilizando html básico con tablas, dentro de tablas…..bastante incómodo e inútil. Que recomendarías como más apropiado para hacer el salto definitivo al xhtml y al trabajo con CSS ? Algún libro, algún cursillo?
Gracias y enhorabuena por el sitio.
1/22/2006 at 1:20 pm
Gracias Quim.
Por supuesto en la web hay muchos sitios donde encontrar información y tutoriales, pero un libro puede ser una mejor guía al comenzar. Personalmente te puedo recomendar Eric Meyer on CSS y Stylin´ with CSS. No son extraordinariamente baratos pero de todas maneras una buena inversión.
Y por supuesto, seguir leyendo este blog!
Suerte!
5/11/2006 at 3:30 pm
[…] El concepto es sencillo: separa las capas de estructura y comportamiento. La estructura en el ejemplo es el vínculo entre un recurso y otro expresado en el link HTML. Un link accesible entre recursos es simple y conocido. […]
11/16/2006 at 4:26 pm
QUE ESTANDARES UTILIZA LA CAPA DE PRESENTACION PARA LA PRESENTACION DE IMAQGENES Y SONIDOS????
11/16/2006 at 4:29 pm
CUALES SON LOS ESTANDARES PARA LA PRESENTACION DE IMAGENES Y SONIDOS
1/16/2007 at 10:21 am
Las 3 capas…
Artículo que describe las 3 capas de presentación para realizar un diseño web accesible a tod@s….
3/5/2008 at 9:02 am
Parece interesante
7/27/2008 at 1:40 pm
bueno un buen libro que lei y me parece que cae a pelo para esta seccion esta en www.librosweb.es, leanlo y disfrutenlo es una publicacion libre… en version online y en pdf para imprimirlo