Saltar la navegación

La separación de apariencia y contenido

En 1996, el W3C publicó la primera especificación de CSS, un lenguaje pensado para definir la apariencia de lenguajes de etiquetas como el HTML.

  • El W3C (World Wide Web Consortium) es una asociación internacional que trabaja para el desarrollo de estándares web.
  • CSS son las siglas de Cascading Style Sheets (Hojas de estilo en cascada).

De manera que:

  • Por una parte tenemos el la estructura y el contenido (HTML)
  • Y por otra tenemos su apariencia, que se definirá mediante CSS

Combinando HTML y CSS podemos tener un contenido semánticamente correcto con la apariencia que nosotros queramos: un título será un título, no un texto normal con la letra muy grande; una imagen será una imagen relevante, no una imagen usada solo con fines decorativos; una tabla se usará para mostrar datos tabulados, no para maquetar mi página y poner unas cosas a la izquierda y otras a la derecha (para eso están los CSS), etc.

Los estándares nos benefician a todos

HTML y CSS son estándares definidos por el W3C, un organismo que trabaja para promover la evolución de la web garantizando que las diferentes tecnologías funcionen bien conjuntamente.

Eso nos conviene a todos, y por eso vamos a desarrollar con estándares.

Ventajas de desarrollar con estándares

  1. Código más limpio:
    1. Páginas más ligeras.
    2. Páginas más rápidas (menor tiempo de descarga)
    3. Menores tiempos de desarrollo y mantenimiento.
  2. Semánticamente correcto:
    1. Páginas con información más útil (los buscadores –como Google– no ven, sino que leen código. Si mi página es toda ella una imagen muy bonita con mucha información, la imagen está ahí, pero para los buscadores es como si no estuviese: no estoy ayudando a crear una red de información y conocimiento. Si mi página está bien estructurada, es más fácil que otros puedan beneficiarse de su información).
    2. Páginas más accesibles.

Las tres capas de una página web

Hemos hablado de dos capas:

  1. Estructura y contenido
  2. Apariencia

En realidad, hay una tercera capa: el comportamiento.

  • Con HTML definimos el contenido (por ejemplo, un formulario con una serie de campos)
  • Con CSS damos diseño a nuestro contenido
  • Pero podemos ir más allá: podemos mejorar la experiencia de usuario si le avisamos, según escribe o cuando va a enviar el formulario, de que un determinado valor introducido no es correcto. Eso se consigue utilizando JavaScript. Podemos mejorar la experiencia de usuario mejorando el comportamiento de nuestras páginas.

El esquema final (las tres capas presentes en una página web) sería el siguiente:

Las tres capas de una página web (estructura, presentación, comportamiento)

Como veis, lo imprescindible es el contenido. Las otras dos capas mejoran nuestro diseño y la experiencia de usuario.

En este curso no vamos a profundizar en JavaScript, pero si alguien se anima, encontrará recursos para saber más en el documento "Recursos avanzados", que forma parte de la documentación del curso.

Para saber más...

Creación de sitios web mediante estándares (PDF. 2,5 MB. César F. Acebal. Gira 2004 del W3C, Oviedo)

Esta presentación tiene varios años, pero sigue siendo recomendable. En ella encontraréis una versión ampliada de lo visto en esta introducción.