martes, 10 de febrero de 2009

La tecnología de la Web 2.0 de una manera sencilla

Hace unos meses, contaba en La evolución de la web de una manera sencilla las guías de desarrollo que se han seguido hasta ahora en la Web y los cambios predichos para las próximas décadas, pasando muy por encima por algo que el usuario no experto de la Web desconoce: las tecnologías sobre las que se apoyará este desarrollo. Estas herramientas son, a priori, el soporte técnico que propiciará el desarrollo y, como veremos más adelante, muchas son innovaciones aún por llegar aunque otras tantas -la mayoría- se heredan de la Web 1.0. Lo que aquí se pretende exponer es el funcionamiento de esa técnica de una forma genérica y sencilla, previa explicación de las bases de la Web, para aquellos que, sin ser expertos informáticos, quieran o necesiten estar al tanto de las mismas.

Al final de este documento hay un pequeño glosario de términos básicos con la intención de que sea utilizado a la vez que se lee el resto del texto.

La Web e Internet


Los términos Web e Internet tienden a confundirse; sin embargo, pese a estar íntimante relacionados, hacen referencia a cosas diferentes. En Eduteka, basados en las definicios que la Wikipedia nos da de estos términos, nos marcan la diferencia entre Web e Internet de una forma clara. Mientras Internet es una serie de redes interconectadas entre sí -una red de redes- por diversos medios físicos, la Web es uno de los servicios de los que podemos disfrutar gracias a Internet -otro servicio, por ejemplo, es el correo electrónico, aunque existan correos basados en la Web que nos hagan confundirlos-.

Internet funciona gracias a una serie de mecanismos de intercambio de datos que vamos a obviar en este texto, diremos sólamente que se basa en una serie de 'capas' que permiten que el usuario final se abstraiga del propio funcionamiento de Internet. El reflejo de esta filosofía -seguido en todos los campos de la informática- es que un usuario frecuente de servicios de Internet no necesitará jamás conocimientos del funcionamiento de la red de redes. A un navegante de la Web le basta saber que debe abrir una ventana de su explorador y teclear una dirección sin necesidad de tener conocimiento alguno de lo que sucede desde que presiona el botón 'Ir' hasta que ante él se muestra un documento al que llamamos 'página web'. De modo que, aunque pueda sonar raro, un usuario de la Web está totalmente abstraído del concepto de Internet, lo que puede hacer que un usuario lego en asuntos internautas construya frases como "como se me ha roto el Internet" o "voy a poner el internet en el ordenador" -nada más lejos de la realidad, Internet no se rompe, en todo caso se puede averiar nuestra conexión; y de ninguna forma podemos 'meter' Internet, una red de redes, dentro de nuestro ordenador, sin embargo sí podemos 'meter' nuestro ordenador dentro de Internet mediante una conexión-.

Las bases técnicas de la Web 1.0


La Web 1.0 -o la Web, a secas- fue inventada con un propósito: interconectar personas. Y teniendo en cuenta que la Web 2.0 pretende hacer exactamente lo mismo, podemos tomar como ciertas las palabras de Sir Tim Berners, padre de la Web:
«Por supuesto que no. La Web 1.0 era enteramente para conectar personas. Se trataba de un espacio interactivo y yo creo que la Web 2.0 es una jeringonza que nadie sabe siquiera qué significa. Si para usted la Web 2.0 son blogs y wikies entonces estamos hablando de servicios y contenidos persona a persona. Pero eso era exactamente de lo que se trataba la Web. Y, sabe usted, de hecho esta “Web 2.0” lo que hace es utilizar los estándares que han producido todas esas personas que han trabajado para la Web 1.0»

Leningham (ed), developer Works Interviews, 22nd August, 2006, citado en Eduteka: Entienda la web 2.0 y sus principales servicios.

La Web fue creada con el siguiente propósito: posibilitar mediante Internet que una persona pueda publicar un contenido y que otras personas accedan a él.

Los documentos HTML


En esta Web primitiva, podíamos generar documentos mediante HTML (Hyper Text Markup Language), una versión simplificada de XML (Extended Markup Language) que nos permite insertar en nuestro documento una serie de elementos -texto, imágenes, etc..., elazarlos con otros documentos mediante hipervínculos -cualquier zona del documento, ya sea texto o imagen, en la que haciendo click nos lleva a otro documento-. Esto que en principio es bastante precario -equivale a poco más que escribir en un folio y que ese folio nos referencie a otros- se desarrolla de forma que nuestros documentos sean compuestos por diseños cada vez más vistosos y además se le añade la funcionalidad de incorporar otros elementos que lo dotan de interactividad (sonido, video, animaciones Flash, programas informáticos escritos en leguajes como por ejemplo Java, etc...).

Este sería un ejemplo muy sencillo de HTML en el que un texto sencillo contiene palabras con un formato en concreto que se define mediante marcas -tags-:
Hola, mundo. Esto es un texto que contiene palabras en <strong>negrita</strong> y un enlace a <a href = "http://webydesarrollo.wordpress.com">Web y Desarrollo</a>.

El texto, en el navegador, se vería así:
Hola, mundo. Esto es un texto que contiene palabras en negrita y un enlace a Web y Desarrollo.

La base del HTML además permite crear dentro de nuestro documento formularios, es decir, zonas en las que el usuario puede teclear unos datos para que sean procesados -más adelante veremos cómo-, lo que supone el recurso básico de interacción en la Web: utilizamos los formularios para registrarnos en foros, identificarnos en portales, utilizar aplicaciones basadas en la Web. Si un documento permitía que un editor difundiera una información, los formularios -principalmente, aunque no en exclusiva- permiten establecer un sistema de retroalimentación con el que el destinatario puede enviar información al ordenador en el que se aloja le documento -un comentario en un blog, un mensaje a través de una página de contacto, un curriculum vitae en un portal de trabajo-.

La manera de difundir estos documentos a través de la Web es la siguiente: se almacenan en un servidor Web que los envía al usuario cuando este los requiere a través de un navegador, programa al que formalmente podemos llamar cliente web, y que es el que se encarga de comunicarse con el servidor de forma que el usuario prácticamente no tiene que saber que lo que está haciendo es conectar con otro ordenador -para más información sobre este proceso ver Protocolo HTTP-. Una vez que el navegador ha recibido el código HTML lo interpreta y lo muestra en pantalla.

Uno de los detalles clave en la experiencia del usuario en este funcionamiento es que al hacer click en un hipervínculo veremos cómo la página que teníamos cargada desaparece, se activa la barra de carga de nuestro navegador y, poco a poco, van apareciendo los elementos de la nueva página -primero el esqueleto del documento HTML y después, poco a poco, las imágenes y los elementos multimedia.

Manejando nuestros documentos en el lado del cliente


Una vez que el documento está completamente cargado en el navegador de nuestro cliente, es posible que necesitemos hacer algo con los elementos que lo configuran. Un ejemplo básico es la validación de formularios, que consiste en controlar que los datos un usuario teclea en un formulario para su posterior envío de vuelta al servidor son válidos. Es necesario un programa que controle que, por ejemplo, un email es válido o que en el campo 'fecha' de un formulario el usuario ha tecleado efectivamente una fecha y además lo ha hecho en el formato adecuado (01-08-1983 es una fecha, pero 'ayer', 'mañana' o 'el día de mi cumpleaños' no son fechas válidas).

Para solucionar esto los navegadores implementan un intérprete de un lenguaje de programación que actúa sobre estos elementos. Igual que HTML se impone como lenguaje estándar para generar documentos, en el caso de los programas que se ejecutan en el navegador el que se impone es JavaScript, que si bien es excesivamente engorroso para el desarrollador nos permite acceder a todos y cada uno de los elementos del documento, no sólo formularios, sino textos, imágenes, hipervínculos, etc. para cambiar su aspecto gráfico, controlar su valores y realizar operaciones aritmeticológicas con ellos, hacer nuevas llamadas al servidor o controlar las acciones con las que el usuario interactúa con el documento -hacer click en un elemento, pasar el ratón por encima de otro, cerrar una ventana ...-.

Hay que marcar una diferencia esencial que en la que el lector profano quizás no haya reparado: HTML es un lengua de modelado de documentos que nos permite sólo y exclusivamente modelar documentos, mientras que JavaScript es un lenguaje de programación que, con más o menos limitaciones, nos permite almacenar contenidos en memoria, realizar operaciones artimeticológicas -como sumar, restar, o comparar valores- y esas operaciones van a actuar normalmente sobre los objetos que el HTML modeló previamente

Generando documentos HTML de forma dinámica: enlazar documentos HTML con programas de proceso y bases de datos


Llega un momento en el que los sitios web se complican tanto que necesitamos poder insertar datos de forma masiva. Si estamos hablando, por ejemplo, de una tienda online que ponga a disposición de sus clientes cientos de artículos, necesitaríamos cientos de documentos HTML -uno para cada artículo-, lo que se volvería difícil, casi imposible de mantener. Para ello lo que hacemos es crear un programa que se ejecutará en el servidor, y que será el encargado de generar el documento HTML en función de los datos que queramos publicar.

Cuando el navegador solicite la página al servidor web, éste lanzará un programa (un CGI, Common Gateaway Interface) que será encargado de generar el documento HTML correspondiente, accediendo si es necesario a una base de datos. El CGI además realizará las operaciones que nuestra aplicación requiera: e.g. comprobar las credenciales de un usuario, calcular el importe de la compra de una serie de artículos y añadirle el IVA., etc. Se realiza una llamada que sigue un camino desde el cliente a la base de datos y los datos realizan el camino de vuelta: el navegador pide la página al servidor web, el servidor web lanza el CGI que genera la página, el CGI accede a la base de datos y la base de datos sirve estos al CGI, que los utiliza para generar el documento HTML que el servidor web se encargará de enviar al cliente.




En el momento en que empezamos a desarrollar webs de esta forma, podemos dejar de hablar de páginas web para hablar de aplicaciones web. Se trata de programas en el estricto sentido de la palabra, y estos son capaces de gestionar datos como altas y bajas de usuarios, modificación fácil de contenidos, personalización de los mismos, etc..

El potencial de esta tecnología radica en que podemos dotar a la web de una interactividad asombrosa, es más, con aplicaciones de este tipo podemos desvincular el concepto de editor web con el de programador o diseñador. Una familia de estas aplicaciones son los CMS -Content Management System-, que permiten que un usuario lego en conocimientos de programación y diseño web pueda sin ningún problema crear, editar y gestionar contenidos -y además de una forma bastante fácil-. El concepto de CMS va a ser vital para entender el funcionamiento de la Web 2.0. Además, este tipo de programas permiten gestionar de forma automática los datos que envía un visitante al servidor -mediante un formulario, por ejemplo-, lo que significa que sin la intervención de un administrador humano, podemos manejar la interacción de los usuarios con la web -el gran boom de los CMS son los gestores de blogs, hoy día accesibles para cualquier persona con acceso a Internet independientemente de sus conocimientos-. Si creamos un programa -CGI- que publique en nuestro sitio los comentarios que envía un usuario mediante un formulario, habremos conseguido que nuestra web refleje las actividades de nuestros usuarios y que estos se puedan comunicar entre sí. Éste es el funcionamiento de un foro de discusión o de la sección de comentarios de un blog.

El uso de estas tecnologías en la Web 2.0


El lector puede preguntarse ahora: ¿Por qué dedicar tanto espacio a la tecnología de la Web 1.0 en un artículo sobre la tecnología en la Web 2.0? -más aún al saber que en adelante seguiremos hablando de la Web 1.0-. La respuesta es fácil de imaginar: los estándares, los lenguajes de programación y, por supuesto, esas "formas invisibles" de conexión entre el navegador web y el servidor, son esencialmente las mismas, si acaso mejoradas y, por supuesto, usadas con un mayor ingenio por los desarrolladores.

La web 2.0 es esencialmente un cambio en la filosofía de la Web, cuando no un potenciamiento de la misma -recordemos que Sir Tim Berners, en la declaración citada al principio, manifestaba que la filosofía propagada por los 'gurúes' de la Web 2.0 es exactamente la misma de quienes crearon los estándares de la Web 1.0. «La Web 2.0 es una jeringonza que nadie sabe siquiera qué significa», decía Berners. En realidad, si partimos de la base de que la filosofía de la Web 2.0 -en esencia, maximización de la interacción entre usuarios y mejora de la confortabilidad de nuestros diseños web-, nos damos cuenta de que eso era exactamente lo que se buscaba con la Web primitiva: interconectar personas, si bien la usabilidad era más complicada por una mera cuestión de recursos, principalmente la escasa velocidad de nuestras conexiones. Si tenemos en cuenta que además los estándares son los mismos -aunque en versiones más modernas- y que la arquitectura de la Web es idéntica -aunque con conexiones a Internet más rápidas-, nos damos cuenta de que en realidad el concepto de Web 2.0 no es más que una jerigonza. Sin embargo, nos sirve para identificar una seride prácticas en el desarrollo y su inmensa utilidad, pequeñas novedades que el mundo del desarrollo para la web ha incorporado para potenciar los servicios que ofrece.

Separando contenidos y estilo: HTML Y CSS


Si bien antes se tendía a generar un documento HTML que tenía de por sí un aspecto, un diseño gráfico, ahora contamos con la posibilidad de utilizar CSS (Cascade Style Sheets). Las CSS componen un lenguaje para definir el aspecto de un documento HTML, lo que nos permite generar un documento HTML en un fichero, definir su apariencia en un fichero diferente y además hacerlo de forma más detallada, más fácil y con un código más limpio. Es decir, hay el qué del cómo. En menos tiempo obtendremos diseños más vistosos y más fácil de mantener.

El uso de las CSS se potencia durante el crecimiento de la Web 2.0, pero es un invento de mediados de los noventa, es decir, un recurso de la Web 1.0.

Pero pongamos un ejemplo. Supongamos que queremos que un hipervínculo cambie de color y se vuelva rojo al posar el ratón encima. Sin CSS, tendríamos que escribir un pequeño programa en JavaScript que, al detectar el ratón, cambiara el color del texto y que además lo devolveria a su estado orginal al alejar el ratón. Con CSS, nos basta escribir apenas unas palabras:
a:hover{color: #CC0000;}

Eso sí: CSS define el estilo de un documento, pero no es un lenguaje de programación como JavaScript. Con CSS no podemos, por ejemplo, validar formularios. Tienen objetivos totalmente diferentes.

Una nueva funcionalidad en la programación del lado del cliente: AJAX


En la Web 1.0 podíamos realizar pequeños scripts escritos en JavaScript para manejar nuestros documentos HTML -y por supuesto, de haberlas, las CSS-. Esto es porque tanto HTML como CSS sirven para definir los objetos que van a aparecer en el documento y JavaScript está pensado para actuar directamente sobre esos objetos.

En la programación del lado del cliente, hay una mejora técnica significativa: la incorporación a los navegadores del objeto XMLHttpRequest, que permite que el navegador haga conexiones al servidor sin perder el contenido la página cargada en ese momento. Esto nos permite, mediante JavaScript, llamar al servidor para enviar y recibir datos y modificar el documento que tenemos en pantalla. Se trata en definitiva de combinar HTML -hijo de XML- y JavaScript, por eso esta combinación de tecnologías de la Web 1.0 -es decir, no una nueva tecnología- se llamó AJAX (Asynchronous JavaScript And XML). Existen otras técnicas de conexión asíncrona con el servidor, como por ejemplo Comet (utilizado en Facebook o el chat de GMail), que hará que el servidor envíe datos al cliente sin que este los pida, pero en este texto nos quedaremos sólo con AJAX como ejemplo de innvación técnica en la Web.

AJAX va a permitir mejorar la experiencia del usuario aprovechando esta funcionalidad: enviamos datos al servidor -mediante formularios, por ejemplo- y recibimos el resultado en la misma página que estábamos visitando, lo que nos permite seguir interactuando con la página mientras que se realiza la llamada, se procesa, y se recibe una respuesta de vuelta. Si estas llamadas se realizan de forma automática mediante JavaScript podemos hacer que un listado -un menú con noticias de última hora o los emails de una bandeja de entrada- mostrado en una página se actualice con cierta frecuencia sin que el usuario sepa que ese están realizando, podemos programar un sistema de chat cómodo sin necesidad de utilizar aplicaciones externas.

Proliferan ahora las aplicaciones que usan AJAX u otro tipo de conexiones asíncronas, sobre todo en redes sociales, ya sea de una forma discreta para cuidar detalles, o con una carga importante de esta técnica. Sirva de ejemplo Facebook, que la utiliza en buena parte de su interfaz. Para ver más aplicaciones web que hacen uso de AJAX recomiendo visitar esta lista de Albert Ribera.

CMS y entornos de desarrollo basados en estas tecnologías


Lo que realmente potencia estas antiguas tecnologías es el desarrollo de programas y bibliotecas que facilitan el trabajo del programador, permitiendo crear aplicaciones más complejas, más completas y más sencillas. Durante el periodo de vida de la Web 2.0 se han liberado multitud de CMS que han permitido que muchos editores web puedan despreocuparse casi por completo del lado de desarrollo del software y del diseño para, sencillamente instalando un programa, tener funcionando un portal -Joomla-, un blog -WordPress- o una tienda online -OsCommerce-. Existen CMS de código libre para crear redes sociales como Elgg. La mayoría de estos CMS se basan en un CGI -normalmente PHP- que actúa sobre una base de datos -normalmente MySQL-. El objetivo es que la posibilidad de crear un sitio Web vaya más allá de los desarrolladores y esté disponible para todo el mundo.

Además, se han programado y liberado frameworks -entornos de desarrollo- que han potenciado el desarrollo por su sencillez. En el caso de JavaScript, el uso de JQuery -un framework, al fin y al cabo una biblioteca de funciones escrita en JavaScript- supone una inmensa sencillez a la hora de desarrollar en JavaScript funcionalidades que eran hasta el momento muy engorrosas si no complejas, y que ahora se vuelven fáciles de escribir y depurar. Otro framework muy interesante es XAJAX, que nos permite generar el código AJAX -que, recordemos, es un código para el cliente- desde PHP -es decir, con un CGI, desde el lado del servidor-, ofreciendo una forma de programar la intereacción cliente/servidor mucho más rápida y de código más sencillo de mantener.

Entendamos de forma sencilla lo que es un framework. Cuando tenemos que programar continuamente la misma funcionalidad de un programa, o muy similar, fragmentos de programas a los que llamamos librerías que reutilizamos. Un framework tiende a ser la implementación de una o varias de estas librerías.

No existe una tecnología propia de la Web 2.0


De este resumen se desprende que la Web 2.0 no utiliza una tecnología propia o revolucionaria con respecto a las tecnologías utilizadas en la Web 1.0. Se trata de aprovechar la misma infraestructura, los mismos estándares, incluso los mismos lenguajes de programación de la Web 1.0 para conseguir desarrollar soluciones que cumplan el objetivo de la Web 2.0: interconectar personas. Y estas interconexiones, ahora que se busca que cualquier sistema tenga funcionalidades de red social, deben traducirse en implementar abstracciones de la sociedad real que representen y potencien de forma virtual la realidad. En mi opinión, está claro que el objetivo estará cumplido cuando cada persona o empresa se identifique en la Web de forma unívoca -lo que implica la garantía entre otras muchas cosas que todo el mundo debería poder acceder a Internet-.

Si basamos el concepto de Web 2.0 en la filosofía de interconectar personas y recordamos que ese era el objetivo de Sir Tim Berners y todos los desarrolladores de la Web 1.0, resulta que en la actualidad no existe una Web 2.0 como tal, existe la Web a secas, eso sí, en un estadio de desarrollo muchísimo más avanzado que hace diez años. Pero los cambios no son significativos. Diría yo en todo caso que le década pasada la Web estaba en su versión 0.5 y estamos llegando a la Web 1.0.

El verdadero cambio significativo estaría entonces en el desarrollo de la Web semántica o Web 3.0, cuyo primordial objetivo es que los programas informáticos que componen la Web puedan comunicarse con el usuario. Es decir, si en un sistema de comunicación natural contamos con un emisor, un medio y un receptor, en el mundo de los buscadores web existe una clara barrera artificial entre la idea que un editor web pretende publicar y la idea que un usuario busca, y esta barrera consiste en que un robot de búsqueda no es más que un sistema artificial capaz de procesar conjuntos de letras, no palabras y mucho menos ideas, capacidad de la que gozan en exclusiva algunos seres inteligentes.

No obstante no creo que el concepto de Web 2.0 sea una "jerigonza" en el sentido coloquial y despectivo del término. Distinguir entre el estado de desarrollo de la Web de la pasada década de y de ésta nos permite definir objetivos a cumplir en el futuro y descubrir cuáles son los pasos a seguir.

Glosario


AJAX- Asynchronous JavaScript And XML. Combinación de tecnologías que permite la conexión asíncrona a un servidor web.

Base de Datos- (según la Wikipedia) Conjunto de datos pertenecientes a un mismo contexto y almacenados sistemáticamente para su posterior uso (e.g. MySQL).

Blog- Web Log, Diario Web, llamado normalmente bitácora en español. Se trata de un sitio web de actualización frecuente cuyo origen radica en la pretensión de un usuario de la web de publicar contenidos diariamente, en principio de caracter personal, con el tiempo específicos de alguna profesión o actividad (e.g. webydesarrollo.wordpress.com).

Cliente- Ordenador perteneciente a una red cuya actividad principal es recibir datos o programa que se ejecuta con este objetivo (e.g. el ordenador en el que usted está leyendo estas palabras).

Cliente web- Ver Navegador web.

CMS- Content Management System. Aplicación basada en la web que permite de forma sencilla la administración de contenidos de un sitio (e.g. Wordpress, Joomla).

CSS- Cascade Style Sheet. Lenguaje que permite definir el aspecto gráfico de un documento HTML y fichero que se escribe en este lenguaje.

CGI- Programa que recibe, procesa y genera datos en un servidor web.

Hipertexto- Texto cuyos contenidos pueden conducir a otros textos.

HTML- Hyper Text Markup Languaje. Lenguaje de marcas utilizado en la producción de documentos para la web.

Internet- Red internacional formada por redes de ordenadores.

JavaScript- Lenguaje de script que se ejecuta en un cliente web y que permite el proceso de datos sin intervención del servidor web.

JQuery- Framework que permite el desarrollo de scripts escritos en JavaScript de forma sencilla, rápida y eficiente.

Navegador web- Programa que recibe los datos de un servidor web para mostrarlos por pantalla a un usuario (e.g. Internet Explorer, Firefox...).

Red- Conjunto de ordenadores interconectados entre sí.

Servidor- Ordenador cuya actividad principal es el envío de datos a clientes o programa que se ejecuta en él.

Servidor web- Ordenador cuya actividad principal es el almacenamiento y servicio de sitios web o programa con este objetivo (e.g. Apache).

Web- (Según la Wikipedia) Sistema de documentos de hipertexto y/o hipermedios enlazados y accesibles a través de Internet. Con un navegador Web, un usuario visualiza páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de ellas usando hiperenlaces.

No hay comentarios: