1. Lenguaje Cliente y Lenguaje Servidor

Esta primera “lección” puede ser algo farragosa, pero considero muy importante saber diferenciar qué elementos intervienen en una comunicación web para luego poder distinguir, a la hora de programar una web, dónde han de ubicarse los distintos elementos, subprogramas etc que necesitemos.

Generalmente, cuando vamos a visitar una web, seguimos estos pasos:

• Escribimos la dirección de internet en nuestro navegador (por ejemplo www.google.es ) y pulsamos la tecla Enter para que se cargue.

• En la pantalla, al cabo de unos segundos, aparece la web que queremos.

¿Qué ocurre realmente para que al escribir esa dirección nos sea mostrada una página?

• Al pulsar la tecla Enter, nuestro navegador emite una petición al servidor que aloja la página que queremos visitar diciéndole, básicamente: “dame el contenido de esta dirección”.

• El servidor recibe la petición y devuelve la página en formato HTML (HyperText Markup Language, Lenguaje de marcas de hipertexto), que es el código básico que entiende un navegador y define el aspecto de la página a mostrar.

• El navegador cliente (tu Firefox, tu Internet Explorer...) recibe ese código, lo interpreta y lo muestra en tu pantalla.

Sencillo, ¿verdad? Esto nos sirve para ir desgranando un poco más y ver que en toda comunicación web intervienen dos “agentes” por así llamarlos: el cliente (tu navegador internet o, generalizando, tú) y el servidor (que contiene la web que queremos visitar). No vamos a entrar en cómo el navegador sabe qué servidor web debe consultar para acceder a según qué página porque no es el objetivo de este blog, pero si a alguien le interesa le puedo contar cuál es el proceso que se sigue.

Un símil “sencillo” para entender la filosofía que sigue este proceso es el de una tienda cualquiera. El cliente (tú) llega buscando un producto que solicita al dependiente (que sería el servidor). Éste lo busca entre los productos que puede entregarte y te lo da. Tú, por tu parte, lo examinas y le das el uso que estimes oportuno.

Vamos a complicar un poco más el ejemplo para ir ilustrando mejor el proceso. Supongamos ahora que visitamos una web con un buscador de internet, por ejemplo la página de google. El proceso para que se muestre la página de inicio ya lo hemos visto, pero ¿qué ocurre cuando efectuamos una búsqueda?

• Tras pulsar el botón de Buscar (o bien la tecla Enter) tu navegador realiza el envío de un formulario a través de internet a una dirección de internet concreta, que ya viene determinada por la página que estás visitando (por ejemplo, el índice de google contiene un formulario que determina que, al pulsar buscar, debe mandar el formulario a otra página de google dedicada a buscar resultados).

• El servidor recibe la petición de mostrar una página CON UN CONJUNTO DE PARÁMETROS (determinados por el formulario que rellenaste). Fíjate que no estamos teniendo una página para cada búsqueda que se pueda efectuar (eso sería demencial) sino que hay una página que:

• i. Recibe los parámetros de búsqueda que hayas indicado.

• ii. Efectúa la búsqueda personalizada.

• iii. Genera un conjunto de resultados.

• Ahora bien, si recapitulamos recordaremos que el navegador cliente sólo entiende HTML y por tanto, el servidor debe devolver una página en dicho formato. ¿Qué hacer entonces con ese conjunto de resultados dinámico que acabamos de obtener? La solución, evidentemente, es generar tanto código HTML como sea necesario para devolver una página que el navegador cliente pueda entender. Simplificando el tema, podríamos pensar en que nos devuelva una línea de texto por cada resultado que haya podido obtener, con lo que la página del servidor, una vez obtenido el conjunto de resultados, “insertará” tantas líneas como resultados haya obtenido y ese resultado final será el devuelto a tu navegador.

Aquí podemos ver lo que hace un lenguaje de servidor. Esquemáticamente, sería:




¿Cómo distinguir una página web que es capaz de generar resultados dinámicos como los del ejemplo indicado de una que no lo hace? La solución pasa por ver la extensión que tiene la web que llamamos. Por ejemplo, si abrimos la página http://www.google.es/index.html vemos que llamamos a la página “index”, que tiene extensión “html” dentro del servidor www.google.es . Por el contrario, si abrimos una página cuyo nombre sea, por ejemplo (la siguiente dirección es inventada, pero ilustra lo que venimos diciendo): http://www.miweb.com/buscar.php?termino=programar

podemos ver que estamos abriendo la página “buscar” con extensión “php” dentro del servidor www.miweb.com y, además, le hemos pasado un parámetro bajo el nombre “termino” y con el valor “programar”.

Las extensiones de las páginas web son distintas según el contenido que vayan a mostrar (estático, dinámico) así como el tipo de lenguaje de servidor que vayan a emplear. Categorizando, estos serían algunos ejemplos de extensiones:

• Contenido Estático (la web siempre ofrece el mismo aspecto y contenido cada vez que la visitamos): extensiones HTML, HTM...

• Contenido Dinámico (la web se adapta a una serie de parámetros y tanto el aspecto como el contenido varían según dichos parámetros): PHP, PHP3, ASP, JSP, ...

Hay muchas más extensiones que nos podremos encontrar según naveguemos y veamos distintas páginas, sin olvidar que un navegador web puede reproducir distintos tipos de archivo (vídeos, fotos, pdf, archivos de office, etc) y cada cual tiene su extensión. Pero de cara a la programación de páginas dinámicas, los más reseñables son los indicados (PHP, ASP (basado en tecnologías Microsoft) y JSP (basado en tecnologías Java)).

Con esto creo que queda claro qué es un lenguaje de servidor y cuál es su función. Aunque en el diagrama anterior no se refleja, generalmente el procesamiento de la información viene acompañado de una consulta a una base de datos. Para quien lo desconozca, una base de datos puede entenderse como un repositorio organizado y estructurado de información, como puedan ser los datos de los usuarios registrados en tu página web, los comentarios recibidos en la misma, la categorización de palabras para un buscador, etc. En los capítulos posteriores trabajaremos con bases de datos MySQL ya que son las más sencillas de encontrar en webs de alojamiento gratuítas.

Ahora volvamos al ejemplo de ir a una tienda. Supongamos que vamos a comprarnos un flamante DVD del cuál sabemos una serie de características que debe tener. Llegamos, le decimos al vendedor qué buscamos y él nos ofrece varios. Elegimos uno y el vendedor nos lo entrega acompañado de su manual de instrucciones. Nos llevamos el DVD, llegamos a casa, lo enchufamos y encontramos instrucciones para reproducir películas, cambiar el idioma, el formato de pantalla etc etc etc.

Adaptemos el ejemplo a una comunicación web.

• Introducimos en el buscador qué deseamos buscar, por ejemplo, una calculadora online (equivale a decirle al vendedor las características de nuestro DVD).

• El servidor nos ofrece los resultados encontrados para nuestra búsqueda (nos reduce el catálogo a los modelos de DVD que se ajustan a lo buscado).

• Accedemos a una página que contiene una calculadora que nos permite hacer operaciones aritméticas sin necesidad de estar consultando otras webs, todo lo hace la misma página.

Gráficamente, si tomamos el diagrama antes mostrado:





(7) Operación Aritmética con la calculadora

(8) Resultado de la operación

Si nos fijamos, veremos que se ha agregado, en la parte cliente (tu navegador) un procesador de lenguaje cliente que se dedica a efectuar operaciones en tu propio navegador, sin tener que efectuar comunicaciones con un servidor externo. Esto es, tu navegador de internet es capaz de efectuar operaciones y procesar datos.

La pregunta que surge es: cuando yo programe una página web, ¿en qué casos hay que usar un lenguaje de cliente y en qué casos un lenguaje de servidor? Pero la respuesta es sencilla:

• Si las operaciones a realizar involucran consultar datos que sólo tú posees, que son inherentes a tu web (por ejemplo, tu catálogo de productos), debes usar un lenguaje de servidor, puesto que los datos a consultar no están en el ordenador de la persona que luego consulte tu página, sino en el servidor donde alojes tu web y, por extensión, tus datos.

• Si las operaciones a realizar son del tipo “mostrar un mensaje de alerta si al hacer un pedido no han indicado la cantidad a pedir”, “activar el campo número de unidades cuando se selecciona el producto”, etc etc, en ese caso es recomendable usar el lenguaje de cliente puesto que son operaciones que se pueden efectuar sobre la página que el cliente esté viendo.

Ojo, fíjate que en el caso de las operaciones con lenguaje de cliente, sólo recomiendo su uso, puesto que prácticamente todas las operaciones de lenguaje cliente pueden efectuarse a través del envío de datos al servidor, pero es más cómodo para la persona que visita tu página que no haya un exceso de comunicaciones (recuerda que, cada vez que consultas una página, tienes que esperar mientras se manda la petición desde tu navegador, el servidor responde y tu navegador procesa el resultado) y operaciones sencillas como efectuar comprobaciones de validez en un formulario se pueden hacer sin necesidad de enviar el formulario al servidor generalmente.

A modo de ejemplo, esta tabla te puede facilitar el entender algunas de las operaciones más comunes que suelen hacerse en un lado de la comunicación o en otro (en algunos casos es imperativo que sea en el lado del servidor o del cliente):

LENGUAJE CLIENTE	LENGUAJE SERVIDOR
• Comprobar que un campo tiene valor numérico (sin letras), o que está en mayúsculas, etc (comprobaciones del valor de un campo en general). • Emitir un mensaje de alerta. • Solicitar la confirmación del envío de datos al servidor. • Activar un campo según el valor que tome otro campo. • Hacer que un botón se “ilumine” al pasar el ratón por encima. • Mostrar mensajes de ayuda.	• Servir un conjunto (o subconjunto si hacemos una búsqueda) de datos sobre la temática de tu web (p.ej. mensajes del foro, productos de un área, etc etc). • Guardar y/o manipular información que envíe un usuario (interacción con bases de datos). • Efectuar comprobaciones sobre los datos recibidos en los parámetros. • Mandar al cliente a otra página distinta según qué condiciones.

Hay muchas más operaciones que pueden realizarse, pero con lo anterior creo que se puede tener ya una visión general acertada de dónde es adecuado realizar unas u otras operaciones. El lenguaje de cliente más utilizado suele ser Javascript (con extensión JS) aunque también hay otras opciones como VisualBasic Script (utilizado normalmente en conjunción con páginas ASP al ser ambas tecnologías Microsoft).

Creo que por hoy ya está bien. En la próxima entrada comenzaremos a trabajar con PHP, para lo cual recomendaré algunas herramientas necesarias o aconsejables a tener instaladas en tu ordenador y lograr ver los primeros PHP (que serán extremadamente sencillos pero iremos avanzando).

Saludos