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.
Usuarios que han visto este tema también han visto...
- Promoción de Sitios Web Utilizando Buscadores y Directorios
- Metodologías hasta en la sopa
- Blogs y periodismo ciudadano
- Evita los colores de fondo
- Mirada crítica a las páginas de Introducción
- Versión imprimible de este documento
- Enviar por e-mail este documento
