El XHTML y sus secuaces (CSS, Javascript, Ajax).

Entendiendo de dónde surge el lenguage con el que se construyen las páginas web y la importancia de una página bien escrita.

El XML proviene de un lenguaje inventado por IBM en los años setenta. Básicamente se resume como un texto human-readable basado en etiquetas (que son palabras contenidas entre los símbolos «<» y «>» por ejemplo «<libro>»). Las etiquetas tienen una sintaxis muy sencilla. Le animo a curiosear rápidamente tres de sus reglas para comprender mejor el siguiente punto.

  1. Solo puede haber una etiqueta de primer nivel, por ejemplo «<libros>»
  2. Todas las etiquetas que se abren se cierran, por ejemplo «<libro></libro>»
  3. Dentro de una etiqueta puede haber texto u otra etiqueta, por ejemplo «<libros><libro>Cómo ser feliz y no morir en el intento</libro></libros>»

Aunque no se ha dado cuenta, si XML fuera un idioma, ahora mismo habría aprendido casi toda su gramática.
Como puede observar, con esa sencilla -y recordemos que antigua- técnica, se puede escribir un documento que no solo tiene información (el título del libro) sino que describe qué información tiene (libros) y ahí reside la utilidad del invento.

Más sobre XML en «XML el lenguaje sin vocabulario de uso Universal«.

HTML

Cuando Tim Berners Lee creó la web en el año 1989 se basó en el XML inventado por IBM, porque la idea original de Tim (los amigos le llamamos así) era crear un lenguage que describiera la información contenida como lo hace XML, así que creó un conjunto de etiquetas que servían a su cometido e intentó que la documentación que se compartía entre universidades utilizando la red Arpa (que evolucionaría a lo que actualmente conocemos como Internet) utilizaran su lenguaje.

Qué etiquetas creó? Es una buena pregunta. Timy (a veces también le llamamos así) entendía el concepto de XML (define tu contenido) así que creó algunas etiquetas como habríamos hecho todos, por ejemplo la «<p>» de párrafo, la «<img>» de imagen, el «<a>» de los enlaces, incluso 6 titulares de diferentes importancias (desde «<h1>» hasta «<h6>») y toda una serie de etiquetas para construir tablas (como «<tr>» fila y «<td>» columna). Y supongo que no tardó mucho en darse cuenta de lo feos que quedaban sus documentos, así que creó algunas etiquetas cuyo objetivo no era definir el contenido sino definir el aspecto, por ejemplo «<font>» para elegir la tipografía, o «<b>» para escribir negritas en vez de utilizar «<em>» que hubiera denotado énfasis.

Entendemos que sintiera esa necesidad, y no le guardamos rencor por haberlo hecho, pero fue una fatalidad porque los usuarios de ese lenguaje comenzaron a utilizar las etiquetas pensando en el aspecto que daban al texto en vez de pensar en su valor semántico. La atrocidad llegaba hasta el punto de construir páginas completas que eran tablas dentro de tablas cuando el contenido real estaba lejos de ser una tabla de datos, en su lugar eran menús, imágenes, párrafos, e incluso listas indentadas. La razón era sencilla, el control que ofrecían las tablas para posicionar un elemento en un punto de la pantalla (en una esquina, a la izquierda de otro elemento, etc.).

El problema de esta transgresión conceptual (define únicamente tu contenido) no afectaba únicamente a la idílica web semántica (la web escrita de manera en que un robot sin cerebro positrónico pudiera diferenciar qué textos son más relevantes y cual es el tema central sobre el que se habla) sino que también contrariaba a estándares que tratan de regir la manera correcta de construir una web. Entre otras afecciones se estaba provocando que los navegadores interpretaban el HTML aunque no estuviera bien escrito, lo que sería análogo a publicar webs enteras cuyo contenido estuviera escrito con faltas ortográficas o en ese dialecto que se utiliza en los mensajes SMS. Quizás no acabe de entender qué importancia tiene cómo esté escrito mientras se pueda entender, pero piense que tenemos la esperanza de que programas (acciones que suceden sin la supervisión de un cerebro humano) procesen millones de documentos que estan repartidos por la red para mostrarlos acertadamente cuando hacemos una consulta en algún buscador.

XHTML

Aunque el HTML es un subconjunto de XML (ahora sabemos que un tanto irregular en sus formas), cuando se inició el movimiento pro XHTML se introdujo la X a principio de las siglas para recalcar la intencionalidad de respetar este estandar (su gramática) a la par que se conservaba el HTML (su vocabulario, aunque ligeramente sesgado) y se aprovechó para impulsar algunos cambios fundamentales que vamos a comentar.

Los documentos debían ser semánticos (utilizar las etiquetas para lo que realmente significaban) y debían estar bien formados (respetar las reglas gramaticales del lenguaje). Durante un tiempo fue bastante habitual encontrar webs donde enlazaban a pié de página con validadores de código que demostraban a modo de garantía de calidad que el documento estaba correctamente escrito.

XHTML+ CSS

En consecuencia, se comenzó a prestar a CSS su merecida atención. CSS es un lenguaje destinado precisamente a definir el aspecto visual de los documentos HTML. Leer un documento CSS es como escuchar a un diseñador «pon esto a la derecha, con tres pixels de margen, y hazle un borde azulverdoso, pero que no sea tan ancho, …»

CSS había pasado desapercibido durante muchos años por … bueno, por muchas razones. En parte por desconocimiento, en parte porque la gente estaba acostumbrada a hacer las cosas de otra manera, en parte porque programas de creación de webs como el FrontPage o DreamWeaver no contemplaban esta filosofía, y en parte porque la interpretación de este lenguaje no era muy coherente entre los diferentes navegadores.

Javascript

El Javascript es un lenguaje que permite modificar el HTML que está mostrando el navegador. Un documento Javascript suele decir cosas como «cuando el usuario pulsa sobre este elemento, escondemos este otro para mostrar aquel» o «variamos el ancho de ese otro elemento».

El Javascript ha estado siempre presente, y no ha estado ausente de incompatibilidades entre navegadores. Al principio se utilizaba principalmente para hacer menus desplegables y botones con rollover (se iluminan cuando pasa el ratón por encima). Cuando nos aburrimos de esos efectos, o fueron delegados a animaciones hechas con Flash, hubo un momento en que a penas se utilizaba. Pero con el cambio de mentalidad comentado, se empezó a ver Javascript desde el punto de vista que abaracamos en el siguiente punto.

XHTML+ CSS + JS = Ajax

De pronto las páginas lucían más dinámicas, los programadores descubrieron la manera de solicitar al servidor «trozos de página web» y parte del contenido se actualizaba sin tener que recargar la página completa.

Ajax es una combinación de técnicas, un planteamiento a la hora de crear una página, mediante el cual se hace más usable la interacción entre el usuario, la recopilación de los datos y el mostrado de estos.

En cierto modo se puede considerar que las páginas actuan de un modo más inteligente porque si puede evitarse no se solicita una página entera en cada interacción. Y puede evitarse, a grandes rasgos, cuando la cabecera será la misma, el menú será el mismo y la funcionalidad será la misma, es decir, solo cambiarán los datos centrales que están mostrándose. Más detalles en «Ajax para funcionalidades no intrusivas».

Otras curiosidades

No entraré en detalles sobre la guerra de navegadores, baste con decir que la soberanía del Internet Explorer a penas se veía ensombrecida por Netscape hasta que popularmente se abandonó Netscape a favor de Firefox. Con la llegada de Firefox (entre otros como Opera, Safari, …) se minimizaron las diferencias de comportamiento y se fortaleció el seguimiento de estándares, lo cual favoreció este boom pro-XHTML.

volver arriba

Un comentario para “El XHTML y sus secuaces (CSS, Javascript, Ajax).”

  1. james hernandez dice:

    Interesante, me gustaría aprender mas de forma metódica para agilizar el aprendizaje, si me puedes ayudar con guías estructuradas te lo agradecería mucho, gracias por compartir tus comentarios. estaré atento.