Una de los objetivos de desarrollar sitios usando los estándares de la W3C, es conseguir que la información que se encuentra en la web sea accesible desde todo tipo de usuarios. No solo los que usan un navegador en modo gráfico (Firefox, Internet Explorer, Opera, etc) en una computadora de escritorio, sino también que se puedan acceder con navegadores en modo texto (Lynx), navegadores desarrollados para personas con discapacidades, navegadores para pantallas pequeñas (celulares, PDA, etc) y muchos otros medios que puedan crearse en el futuro.

Para conseguir esto, se determinó la separación del contenido de la web en tres partes, cada una con su propia especificación: HTML (estructura), CSS (presentación) y DOM (para acceder y modificar los otros dos componentes).

En la especificación de HTML se detallan todos los elementos y sus atributos con los que se pueden armar una página web. En versiones anteriores de la especificación, se incluían elementos y atributos para modificar la manera en que los mismos se muestran (alineación, tipografía, colores, etc.), pero fueron desaprobados en favor de conseguir el mismo efecto a través de CSS.

Actualmente existen dos especificaciones recomendadas por la W3C: HTML 4.01 y XHTML 1.0 (que básicamente es una reestructuración de HTML 4.01 en formato XML), cada una de las cuales tiene 3 variantes:

  • Transitional: donde los elementos y atributos desaprobados siguen considerándose válidos. Esta variante ofrece la mejor compatibilidad con código anterior y está pensada como un paso intermedio antes de migrar código HTML a la última versión.
  • Frameset: sólo los elementos y atributos desaprobados que están relacionados con frames se siguen considerando válidos.
  • Strict: los elementos y atributos desaprobados son considerados inválidos.

En CSS (hojas de estilo en cascada) los estilos se manejan por reglas compuestas por dos partes. Un selector que especifica a qué elementos se va a aplicar la regla, y una declaración que indica cuál es el estilo que se va a aplicar. La especificación también define ciertas propiedades que pueden heredarse, es decir que si por ejemplo definimos el tipo de letra para un elemento, todos los elementos contenidos en él (salvo ciertas excepciones) usarán el mismo tipo de letra.

Como es posible aplicar múltiples estilos simultáneamente a un mismo elemento, ya sea usando distintos selectores, por herencia, o incluso definidos en hojas de estilo separadas, la especificación también incluye reglas de cascada, que en caso de encontrar reglas contradictorias define cuales son las que se deben aplicar.

Otro de los aspectos importantes que define la especificación es el llamado “box model”. Según la W3C, el ancho (width) y el alto (height) de los elementos, no incluye el relleno (padding) , ni los bordes (borders). Lamentablemente Microsoft no lo interpretó de esta forma e incluía en el ancho y el alto, el relleno y los bordes. Esto fue una de las principales causas de la baja adopción de CSS y recién fue corregido en el Internet Explorer 6.Comparación entre el box model de la W3C y de Microsoft

La gran ventaja de separar la estructura (HTML) y la presentación (CSS) es que con sólo modificar la hoja de estilo, se puede cambiar completamente la forma que se ve el sitio.

Algunos proyectos que muestran la potencia de CSS son la extensión para Firefox Stylish, que permite guardar hojas de estilo personalizadas para cada sitio, o el sitio CSS Zen Garden donde usando el mismo archivo HTML, diseñadores de todo el mundo contribuyen con hojas de estilo, produciendo apariencias radicalmente distintas usando el mismo contenido. Un ejemplo para destacar es éste, que usando la misma hoja de estilos muestra un diseño distinto en Internet Explorer 6 que en Firefox (y otros navegadores compatibles), aprovechando limitaciones en el motor de CSS del navegador de Microsoft.

Diseño de CSS visto con Firefox Diseño de CSS visto con Internet Explorer 6

El tercer componente que define la W3C es el DOM o Document Object Model, que es la representación de una página web (HTML y CSS) en forma de objetos, que luego pueden ser manipulados por un lenguaje como Javascript. Esto permite que haya interacción entre el usuario y el sitio sin necesidad de cargar una nueva página.

En la especificación se detallan cuáles son los objetos, métodos, propiedades y eventos. Por supuesto cada navegador tiene distintos grados de implementación del DOM o incluso implementaciones propias como innerHTML, lo que hace difícil la programación de scripts que sean compatibles entre distintos navegadores.

Por suerte también existen librerías de Javascript como Prototype, jQuery y Dojo que ofrecen frameworks compatibles entre navegadores para simplificar la codificación. Aunque como todo framework lleva un tiempo acostumbrarse a su sintaxis y forma de trabajo.

Resumiendo, hacer sitios basados en estándares que sean compatibles lleva mucho trabajo, sobre todo el testeo en distintos navegadores. Esperamos que a medida que vayan mejorando los navegadores, éstos sean cada vez más compatibles y simplifiquen el proceso de desarrollo. Mientras tanto, tendremos que recurrir a sitios web donde se puede conseguir información respecto a bugs de navegadores, o tablas de compatibilidad.

Ladd is an associate professor of https://www.pro-homework-help.com/ education at st