Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a Las tres capas del diseño web

Datos de búsqueda

Las tres capas del diseño web

Las interfaces web se componen de tres capas:

  • Contenido.
  • Presentación.
  • Comportamiento.

Presentación y comportamiento son opcionales.

Contenido

Se trata del contenido y de su estructuración semántica: el documento HTML. Cada porción de texto deberá ser contenida en el elemento adecuado a su contexto (párrafos, listas, encabezados, etc.), o llevar la información adicional que sea necesaria (el texto alternativo en las imágenes, por ejemplo).

Aquí no se definirá absolutamente nada relacionado con la presentación: nada de configurar colores, tipografías, fondos, etc. Nada.

Si todo esto se hace correctamente se habrá dado un paso muy importante hacia la accesibilidad, y también en cuanto al posicionamiento en buscadores. El documento será legible sin necesidad de las otras dos capas.

Presentación

En esta capa se definirá el aspecto del contenido, mediante hojas de estilo CSS.

El CSS se introduce preferentemente en un archivo, o varios, separados del contenido.

Se pueden aplicar hojas de estilo para dispositivos específicos: pantalla (la más habitual), PDA, impresoras, lectores de pantalla, etc. De esta forma se podrá optimizar el aspecto de un sitio web atendiendo a las necesidades específicas de cada dispositivo.

Además hacer la capa de presentación separada de la de contenido tiene otra ventaja importante: con solo cambiar la hoja de estilo, cambia el aspecto de todo el sitio al que se aplique la misma. Un ejemplo interesante de esta ventaja es el CSS Zen Garden, donde con un mismo contenido pero con diferentes hojas de estilo se consiguen resultados muy variados.

Comportamiento

Se trata de añadir funcionalidades con algo más de complejidad, como elementos desplegables, rollovers, etc. Se hace mediante Javascript que interactue con el DOM.

El código Javascript deberá estar contenido en archivos externos, igual que las hojas de estilo en la capa anterior.

La adición de esta capa no debe impedir el correcto acceso al contenido.

Saber más

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “Las tres capas del diseño web”

igualacero dice:

Fecha de comentario: 2010/08/22 00:39

Hola buenas, el ejemplo de Css Zen Garden es una pasada de lo que se puede hacer con un contenido html y las hojas de estilo.
Un saludo.

Información del sitio