Soldat's log

Recientemente ha habido bastante movimiento respecto a las recomendaciones sobre accesibilidad propuestas por la W3C en su Web Content Accessibility Guidelines 2.0.

Después de la polémica surgida por el borrador del año pasado (To Hell with WCAG 2), liderado por Joe Clark se creó WCAG Samurai cuyo objetivo consistía en mejorar la versión vigente.

Pues bien, a mediados del mes pasado la W3C publicó el nuevo borrador de la WCAG 2.0, esta vez con mejores críticas (WCAG 2.0: Woeful to Wonderful in One Easy Draft?), y hace un par de días se publicó la primera edición de WCAG Samurai Errata for WCAG 1.0.

En resumen: mucho por leer

En primer lugar, en estos momentos, disponemos de dos definiciones principales a la hora de preparar el contenido de una página web: XHTML 1.0/1.1 y HTML 4.01, es decir uno de ellos es un documento XML y el otro no.

Desde el punto de vista de los navegadores hay dos formas de afrontar una página web. Por un lado tenemos lo que se conoce como el ‘tag soup’ y por el otro tenemos un parser XML. El modo tag soup es lento pero seguro ya que está preparado para aguantar cualquier cosa que se asemeje, por muy remotamente que sea, a código HTML. Mientras el parser XML es muy rápido pero exige que el documento sea completamente válido o si no ni siquiera se puede mostrar.

El navegador decide si utilizar un método u otro basándose en el Content Type de la página:

• text/html: se utiliza el modo tag soup.
• application/xhtml+xml: se utiliza el parser XML.

Hasta aquí la opción más evidente sería utilizar la versión más moderna, XHTML 1.1, y servirla como “application/xhtml+xml” para conseguir la mayor velocidad y calidad. Sin embargo en el mundo real hay mucho navegadores antiguos… y el IE.

En el estudio, XHTML media type test, de la W3C se comprobó el soporte real XHTML por parte de los navegadores. Echando un vistazo las cosas no parecen muy prometedoras si el sitio web incluye usuarios con navegadores que no sean de última generación.

Además, las versiones anteriores a Firefox 3 no soportan una carga incremental de XML por lo que es necesario descargar completamente la página para poder empezar su representación dando la impresión de lentitud.

Podemos bajar a la versión XHTML 1.0. La 1.1 exige que se transmita como “application/xhtml+xml” pero la 1.0 puede ser transmitida como “text/html” con lo que conseguimos ampliar nuestro público. Pero el problema es que ya hemos perdido el parser XML y volvemos al tag soup de toda la vida.

Si antes mencionábamos que uno era un documento XML y el otro no, ahora hay que plantearse si realmente merece la pena hacer uso de XHTML pues al servirlo como “text/html” hemos perdido el parser XML. Además nos encontramos con los problemas que se comentan en Sending XHTML as text/html Considered Harmful.

Lo que realmente se desea en la creación de un sitio web es conseguir la máxima accesibilidad y homogeneidad entre navegadores. Para ello nos ajustamos a un DOCTYPE determinado consiguiendo que los navegadores representen el contenido en modo “Standards compliance”.

En Activating the Right Layout Mode Using the Doctype Declaration podemos ver la influencia del DOCTYPE sobre los modos de representación entre los navegadores más populares.

En resumen, comparto la opinión de utilizar HTML 4.01 preferentemente sobre XHTML si el sitio web está orientado a un público muy general al ser la opción más segura.

Ahora bien, si necesitamos de las funcionalidades que ofrece XHTML (que sea XML válido o utilizar MathML por ejemplo) debería ser obligatorio enviarlo como “application/xhtml+xml” por lo que os recomiendo leer The perils of using XHTML properly de Roger Johansson.

Curioseando por la galería de CSS Zen Garden he encontrado unos divertidos usos de fondos de imágenes para crear efectos realmente sorprendentes. Voy a destacar dos de ellos:

Fun with backgrounds orange

Efecto: moviendo la barra de scroll la imagen del fondo va cambiando del kanji al texto ‘zen garden’.

Técnica: superposición de dos fondos, por un lado tenemos un fondo de líneas y por otro la imagen que combina el kanji y el texto (en líneas diferentes). Al desplazar la página las líneas coinciden o con el kanji o con el texto al mismo tiempo que oculta al otro. Simplemente genial

Otro ejemplo muy parecido es Two State Animation, en esta ocasión se consigue que una flor se balancee de un lado a otro.

CSS Zen Ocean

Este diseño es muy muy divertido.

Efecto: el subtitulo desaparece de vez en cuando, el submarinista enciende su linterna según profundiza en el océano, se forman burbujas de aire y en el fondo del mar el cofre del tesoro se abre y aparece un cangrejo dando una vuelta.

Técnica: la mayoría de los efectos están conseguidos con animaciones GIF de toda la vida, de una forma realmente original, pero lo que más me llamó la atención es la linterna del buzo. La idea es crear un degradado, de menor a mayor iluminación, y poner por encima una capa de transparencia que asemeje a la fuente de luz que produce la linterna, al desplazarlo se crea el efecto.

Retro Theater