Outbook

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

Inicio que contiene a Separación de presentación y contenido

Datos de búsqueda

Etiqueta ‘Separación de presentación y contenido’

Cellspacing mediante CSS

Fecha de publicación: 2007/10/15

El atributo cellspacing en las tablas HTML es prescndible.

Supongamos un cellspacing que valga 7px:

<td cellspacing="7">Contenido de la celda</td>

En CSS se prescinde del atributo, y se usan las propiedades border-collapse y border-spacing:

table {
border-collapse: separate;
border-spacing: 7px;
}

Hacer esto por CSS tiene la ventja de poder definir la separación por arriba, por abajo, a la izquierda y a la derecha:

table {
border-collapse: separate;
border-spacing: 7px 1px 2px 1px; /*arriba, derecha, abajo, izquierda*/
}

Enlaces relacionados

Datos del artículo:

Las tres capas del diseño web

Fecha de publicación: 2007/06/26

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

Datos del artículo:

Información del sitio