Supongo que muchos de vosotros os habréis fijado en dos iconos que hay en la parte de abajo de la barra lateral izquierda, y en el texto que lo acompaña. Indican que esta página que estáis viendo cumnple los estándares XHTML 1.0 Strict y CSS del W3C. O al menos, todo el código que yo escribo lo cumple. La barra que véis arriba, que compartimos todos los blogs alojados en Blogger.com, es añadida por el servidor, agregando código HTML nuevo a la página, antes de ser enviada al navegador. De vez en cuando recibo correos electrónicos de gente que muy amablemente me sugiere trucos para quitar la barra, pero todos ellos se basan en ocultarla, no en eliminar el código que la genera.
¿Lo cualo? No me entero de nada
. Bueno, comencemos por el principio. Las páginas Web, como la que estáis leyendo ahora, están escritas en un lenguaje de marcas llamado HTML. Un lenguaje de marcas permite añadir información extra
a un texto, como por ejemplo indicar que debe ponerse en negrita, o que se trata de un enlace. Si en vuestro navegador buscáis una opción que normalmente se llama Ver código fuente
y la pulsáis, se os abrirá una ventana con un texto raro
en el que mezclado con el texto que podéis ver en la página, aparecen palabras y siglas entre los símbolos < y >. Esas palabras son las marcas, que también se llaman etiquetas. Si por ejemplo quiero poner un texto en negrita, añado la etiqueta <b> justo antes del texto que quiero que se vea en negrita, y </b> justo al final. Si quiero añadir un enlace a una frase, utilizo la pareja de etiquetas <a href="dirección del enlace"> y </a> alrededor de la frase. En este último ejemplo, veis un texto adicional en la etiqueta: href="dirección del enlace". Esto es lo que se llama atributo. Una etiqueta puede tener atributos en la forma nombre=valor. En el caso concreto de una etiqueta <a>, hay que especificar el atributo href con la dirección o URL a la que apunta el enlace.
De momento fácil ¿no? Bien, el lenguaje HTML es una particularización del está basado en SGML, que es un lenguaje genérico
, a partir del cual se puede definir otros lenguajes de marcas. En el lenguaje HTML hay definidas una serie de etiquetas y atributos, cada una de ellas con una determinada función, y en algunos casos, con la obligación de seguir determinada estructura. Así por ejemplo, una página HTML debe comenzar con la etiqueta <html> y debe ir seguida de una cabecera definida con la etiqueta <head> (donde entre otras cosas está el título que aparece en la barra superior del navegador), y tras ella debe estar el contenido de la página en sí, el llamado cuerpo, definido por la etiqueta <body>, y que contiene todo el texto que veis.
Al principio, el lenguaje HTML era, llamémoslo permisivo y caótico
. Veamos, los nombres de etiquetas y atributos, podían ir tanto en minúsculas como en mayúsculas. Así, uno podía poner <body>, <BODY> o <Body>, como más le apeteciera. El valor de los atributos podía ir entre comillas o no, incluso existían atributos sin valor, es decir, que simplemente había que declararlos y ya está (como el atributo disabled que marcaba un control como deshabilitado). Había etiquetas que necesitaban un contenido, como la mencionada <a> que debía ir acompañada siempre de su correspondiente </a>, y etiquetas que no, como <br>, que idicaban un salto de línea. Además, había navegadores aún más permisivos, de forma que si había etiquetas sin su correspondiente cierre
, intentaban deducir dónde debería ir ese cierre y mostraban la página más o menos de forma adecuada. Un ejemplo clásico es el de tablas (<table>) con filas (<tr>) y columnas (<td>) que no se cerraban correctamente. El Internet Explorer intentaba mostrar la tabla (y no lo hacía mal), y el Netscape Navigator no la mostraba si las etiquetas no estaban cerradas correctamente.
A esta situación había que añadirle el que cada compañía añadía nuevas etiquetas y atributos al lenguaje, por su cuenta y riesgo, o interpretaba de formas diferentes la función de éstos. En plena guerra de navegadores, esta situación se convirtió en una auténtica pesadilla para los creadores de páginas Web. Si uno no se andaba con cuidado, una página podía verse muy bien en un navegador, y fatal en otro. Fue una época en la que comenzaban a aparecer los famosos y odiados botones de Optimizado para...
(normalmente, para Internet Explorer), que en realidad significaba que si no veías la página con ese navegador en concreto (y en ocasiones, con una versión en concreto), la página se veía totalmente descuadrada, o incluso no se veía. Además, supongo que ante las presiones de jefes que sólo sabían de marketing o de la competencia, los diseñadores se veían obligados a estrujarse las neuronas buscando formas de maquetar una página, que estaba más allá de las posibilidades originales del HTML. Así, aprovechando la flexibilidad que ofrecían las tablas en HTML, en seguida proliferaron los diseños basados en tablas. Celdas vacías e imágenes transparentes que servían como separadores, y tablas dentro de tablas, se convirtieron en la norma de todo diseño visualmente llamativo. Y en una locura de mantener. Un pequeño cambio aparentemente sencillo, podía degenerar en horas y horas de trabajo. Frases del tipo No está mal, pero ¿y si ponemos esto un poco más a la izquierda, y de color verde?
eran aterradoras.
Hace ya algunos años, el W3C actualizó el estándar HTML y definió otros nuevos. Podemos resumir los cambios más importantes en dos: evolución del HTML original a un HTML más semántico, y redefinición del HTML en XML. ¿Lo qué? Veamos, antes he hablado de la etiqueta <b>, que ponía un texto en negrita. Existen muchas otras etiquetas para modificar la apariencia del texto, como <font>, que permite cambiar el tipo de letra, tamaño y color, <center>, que centra horizontalmente un elemento, y atributos como bgcolor que permite cambiar el color del fondo, o align que modifica la alineación horizontal de un texto. Utilizando estos elementos, y diversos trucos con tablas, se podía tener mucho control sobre la apariencia final de la página. Pero para ello, había que poner esas etiquetas y atributos en el código HTML de nuestra página. Si deseabamos (o nos encargaban) modificar la apariencia, había que modificar toda la página, en multiples lugares. Y si teníamos varias páginas similares, había que modificarlas todas. Existe un estándar llamado CSS, que define lo que se conoce como hojas de estilo
, y que nos permite modificar la apariencia de una página HTML. Podemos especificar los colores, tipos y tamaños de letras, alineación, e incluso el posicionamiento y tamaño de elementos. Y lo mejor es que puede ir en un fichero separado, de forma que en la página HTML simplemente hay que hacer referencia a él. Bien utilizadas, las hojas de estilo nos permiten eliminar todo el código de nuestra página, relacionado con la apariencia, y ponerlo en dicha hoja de estilo. De esta manera, el código HTML de nuestra página contedrá únicamente la información que deseamos mostrar, debidamente estructurada, y no cómo deseamos mostrarla.
Así, existen dos variantes (bueno, en realidad son tres, pero la tercera no viene al caso) de la última versión del lenguaje HTML: Transitional
y Strict
. En la variante Transitional, se pueden utilizar todas las etiquetas y atributos, pero en la variante Strict, estamos limitados a aquellos que no tengan nada que ver con la apariencia de la página. Ésta apariencia se debe definir en una hoja de estilo. De esta manera, en la variante Strict, no podemos utilizar etiquetas como <font> o <center>, ni atributos como bgcolor. Además, deberíamos limitarnos a utilizar tablas para mostrar tablas, es decir, una serie de datos distribuidos en filas y columnas. Otra consideración adicional es ordenar la información de forma estructurada, sin pensar en la posición final de los elementos. Un ejemplo lo tenéis en esta mismo blog. Veis que la estructura visual consta de una cabecera, dos barras laterales (una con enlaces internos al blog y otra con enlaces externos) y el contenido de los envíos en el centro. Uno puede pensar que en el código HTML está definida la cabecera primero, después la barra lateral izquierda, luego el contenido central, y finalmente la barra derecha, pero no es así. La estructura de la página es: cabecera, contenido, barra lateral izquierda y barra lateral derecha. Es decir, si no existiera una hoja de estilos, leeríais primero los envíos, y después de ellos vendrían todos los enlaces. Un día puedo decidir invertir el orden de colocación de las barras laterales, o decidir ponerlas una encima de otra, como una única barra, o una arriba de forma horizontal y otra a un lado. Y todo ello sin cambiar una coma del código HTML. Sólo debo modificar el código CSS.
Bueno, está claro eso de un HTML semántico, pero ¿qué es eso de XML? El XML es un lenguaje de marcas similar, pero mucho más estructurado, y que permite definir nuestro propio lenguaje de marcas. Concretamente, la reformulación de HTML en XML se denomina XHTML, pero es sólo uno de los muchos lenguajes basados en XML que existen. Para un XML se puede (y se debería) definir un DTD o (mejor aún) un esquema XML, donde se definen las etiquetas, atributos y estructura del lenguaje. Hay que decir que el SGML ya utilizaba DTD, y el HTML está definido en función de ellos, pero por algún motivo nunca se ha prestado demasiada atención a ello. Con el XML, en cambio, han proliferado herramientas diversas para comprobar si un fichero XML cumple la especificación definida en el DTD o en el esquema. Bien, el DTD o el esquema nos dice qué etiquetas se pueden utilizar en un lugar determinado, qué atributos tiene, cuáles son obligatorios, y un largo etc. En XHTML, los nombres de etiquetas y de atributos están definidos en letras minúsculas, con lo que no es correcto utilizar etiquetas como <A> o <TABLE>, por ejemplo. Una característica intrínseca del XML, es que el valor de un atributo debe ir siempre entrecomillado, y que los atributos deben tener siempre un valor. Así, no podemos poner sin más el atributo disabled que mencioné antes, sino que habría que escribir disabled="disabled". Otra característica intrínseca del lenguaje es que toda etiqueta debe ser cerrada. Así, no podemos utilizar la etiqueta <br> sin más, para poner un salto de línea, sino que debemos utilizar <br></br>, o mejor aún, para evitar malinterpretaciones de algunos navegadores, hacer uso de la sintaxis abreviada <br/>, que nos indica que la etiqueta no tiene contenido. Para maximizar la compatibilidad con navegadores antiguos que sólo procesan HTML, se recomienda dejar un espacio justo antes de la barra inclinada, tal que así: <br />. Pero hay que tener en cuenta que aunque un navegador lo entienda, esa expresión no sería realmente HTML correcto, sino XHTML.
En XHTML hay también tres variantes (en su versión 1.0), de las cuales nos interesan la Transitional y la Strict, que tienen las mismas consideraciones que sus homónimas en HTML. Aquí hay que tener en cuenta un detalle en la variante Strict: En HTML existe un atributo muy utilizado llamado name, que se utiliza para dar un nombre a un elemento cualquiera, y así poder ser referenciado desde JavaScript (un lenguaje de programación interpretado, que se puede añadir a una página HTML). En XHTML Strict, ese atributo ha desaparecido (salvo en determinadas etiquetas muy particulares) en favor de otro llamado id, que cumple la misma función, y cuyo valor no puede repetirse en ningún sitio de la página (cosa que no ocurría con el otro atributo, y que podía dar lugar a resultados no deseados).
Todo esto parece muy complicado ¿no? Parece fácil cometer un pequeño error. Cierto, y por eso el W3C tiene dos validadores online para HTML (o XHTML) y CSS, con los que podréis comprobar fácilmente si vuestra página cumple los estándares o no. Y si no los cumple, te dice por qué.
Bien, si habéis conseguido llegar hasta aquí, estáis en condiciones de entender el problema de Blogger. Los blogs que se alojan en Blogger están definidos por una plantilla, que no es más que código HTML con determinadas etiquetas especiales (no HTML) que son sustituidas en el servidor por el texto correspondiente. Así, por ejemplo, la etiqueta <$BlogTitle$> es sustituida por el nombre del blog (en mi caso, la palabra MalaCiencia
), y la etiqueta <$BlogItemTitle$>, por el título del envío. Durante el proceso, se incluye en el código generado, de forma automática, el código HTML correspondiente a la barra de Bogger que podéis ver en todos los blogs alojados ahí. Y resulta, que aunque se supone que el código HTML de Blogger es XHTML 1.0 Strict, y las plantillas que te ofrece por defecto cumplen el estándar, el código de la barra de navegación de Blogger tiene algunos errores. Y es algo tan simple como el hecho de incluir en un par de etiquetas, ese atributo llamado name que no se debe utilizar. Esto hace que cualquier página generada por Blogger, no importa los esfuerzos del sufrido creador, no cumplirá completamente el estándar, teniendo al menos 2 fallos. La solución es muy sencilla: en esas dos etiquetas, hay que sustituir el atributo name por un atributo id con el mismo valor. Así de fácil (para los entendidos, diré que el JavaScript seguiría funcionando, lo he comprobado). Pero eso sólo lo pueden hacer los administradores de Blogger.
Existen varias formas de ocultar la barra de Blogger. Pero fijáos bien que he dicho ocultar, no eliminar. Una de las muchas cosas que se pueden hacer con una hoja de estilo, es indicar que determinados elementos no se muestren. Pero con eso, lo único que conseguimos es que la barra no se vea. El código XHTML incorrecto sigue estando ahí.
Además, la barra de Blogger no es el único problema. Los comentarios al envío tampoco son generados como XHTML válido. Como facilidad para los usuarios, Blogger transforma automáticamente los saltos de línea introducidos en la cajita de comentario, en etiquetas <br/>. O casi, ya que por algún despiste por parte de los desarrolladores, lo que se utiliza realmente es el texto <BR/>, cuya presencia hace que no sea ni XHTML ni HTML válido. Es decir, no existe una sola versión de HTML o XHTML donde el la etiqueta <BR/> sea correcta. En este caso, se puede solventar el problema configurando el blog en Blogger para que los comentarios se muestren en una ventana diferente, en vez de en la propia página. Pero es un error importante, que irónicamente se debería resolver de forma muy sencilla.
Las hojas de estilo tampoco se libran. El código HTML de la barra de Blogger, hace referencia a unos ficheros CSS, que tampoco son del todo correctos, por lo que un blog alojado en Blogger tampoco pasaría una validación CSS.
Bueno, y ¿todo esto es importante, o se trata sólo de pajas mentales de los informáticos? Pues sí es importante. Los estándares se hacen para ser utilizados y respetados. Uno de los pilares de la Web es poder acceder a la información, independientemente del navegador, del sistema operativo, e incluso de la máquina (y no estoy pensando sólo en ordenadores). La situación de hace varios años, con diferencias abismales entre el Internet Explorer y el Netscape Navigator, degeneraba en ocasiones en tener que hacer dos versiones de cada página, o en condenar
a los usuarios de uno de los navegadores a no poder verlas. ¿Os imagináis que existieran canales de televisión que sólo pudieran ser vistos por una determinada marca de aparato? Afortunadamente, esa etapa parece haber sido superada, aunque hay quien se empeña (tal vez por desconocimiento) en hacer páginas pensando únicamente en un sólo navegador (normalmente Explorer). Si al crear nuestra página, nos ceñimos rígidamente a los estándares del W3C, tendremos bastante seguridad de que se verá en la mayoría de los navegadores. Y si no, siempre podemos excusarnos diciendo que si no se ve bien, es problema del navegador, que no cumple el estándar.
Por otro lado, separar el contenido de la forma de presentarlo, nos ayudará a modificar posteriormente la apariencia de nuestras páginas, o mejor aún, facilitará su proceso por parte de software especializado para discapacitados, como sitnetizadores de voz o lectores braile. O incluso podemos especificar diferentes hojas de estilo, de forma que el usuario escoja cuál utilizar.
Sin duda, podría declarar el código XHTML de este blog como Transitional, en vez de como Strict, y así ya sería código válido. Pero por un lado soy un firme defensor de la separación entre contenido y presentación. Y no sólo en la Web, sino en procesadores de texto como el MS Word o el OpenOffice.org Writer, en los que también puede aplicarse la misma filosofía. Os aseguro que si se hace bien, te ahorra muchos quebraderos de cabeza a la hora de modificar la apariencia de un documento. Así que quiero aportar mi granito de arena para difundir esta forma de hacer las cosas. Además, el código CSS de la barra de Blogger seguiría siendo incorrecto.
Etiquetas: blog
