Tenía intención de dedicar una entrada a describir una pequeña librería que estoy desarrollando en JavaScript para la gestión de usuarios. Pero mientras la estaba redactando he caído en la cuenta de que a algunos les interesará conocer primero el funcionamiento de la web, aunque sea de forma somera. Por eso he decidido publicar primero esta pequeña introducción. Es muy genérica, porque su objetivo no es servir de tutorial, sino clarificar conceptos. Quien desee profundizar en algún tema, puede seguir los enlaces. Para quien le parezca muy básico, prometo contenido más especializado en posteriores entradas.
Una página web es en el fondo un documento con una estructura especial, de acuerdo a unos estándares recomendados por la W3C. Usualmente se visualiza mediante un navegador, instalado en un equipo cliente. Cuando se teclea una URL, esta aplicación demanda a un servidor los documentos que componen dicha página. El documento principal normalmente se encuentra en formato HTML (si se almacena, su extensión es htm o html), y su esqueleto es como sigue:
|
1 |
Bienvenido! |
El contenido que se visualiza está entre las etiquetas body y la información para el navegador se incluye en el head. Existen etiquetas para codificar los elementos que todos conocemos de la web, sean contenido (imágenes, párrafos, listas), presentación (cajas, menús, formatos) o de carácter funcional (hiperenlaces, formularios). Estas etiquetas pueden contener información adicional, que se recoge mediante atributos. Por ejemplo, el siguiente código representa un párrafo (etiqueta p) en el que se ha insertado un hiperenlace (etiqueta a); su atributo href recoge la dirección de destino.
|
1 |
Para profundizar, siga <a href="http://www.w3schools.com/tags/">este enlace</a>. |
El documento HTML puede contener cierto código, habitualmente desarrollado en JavaScript, que se incluye en etiquetas script, o bien directamente en atributos relacionados con eventos (onchange, onclick…). Al pulsar el siguiente botón, por ejemplo, se abre una ventana con un mensaje, gracias a la función alert:
|
1 |
<input type="button" /> |
La parte estética se controla mediante atributos o etiquetas style, y utiliza un lenguaje especial denominado CSS. En cualquier caso, por cuestiones de higiene, lo ideal es llevar código y estilo a ficheros independientes, con extensiones js y css respectivamente. Para quien quiera profundizar en el HTML dinámico, un recurso muy valioso es la página W3Schools. Injertos como applets de Java o animaciones Flash merecen tratamiento aparte.
Hasta aquí lo que toca a funcionamiento en el equipo cliente. El servidor puede meramente entregar los ficheros que se le demanden o bien generarlos, lo que da funcionalidad a nuestra web. Existe toda una pléyade de lenguajes de este lado, tanto específicos (PHP, ASP) como genéricos (Python, Ruby). A continuación se muestra un fragmento muy simple en PHP que, usando la función echo, devuelve la página que con la que hemos abierto esta introducción.
|
1 2 3 4 |
<!--?php <br ?--> echo ""; echo "Bienvenido!"; echo ""; ?> |
En muchos casos, se trabaja regularmente con bases de datos donde se almacena la información que se maneja. Por esto, es habitual la siguiente secuencia de operaciones:
- El navegador demanda una página web, para lo que pasa al servidor cierta información (métodos GET o POST).
- En el servidor se ejecuta el código correspondiente, que accede a la base de datos para leer o escribir.
- Tras efectuar la operación, el código del servidor genera la nueva página.
- El navegador la representa.
Esta secuencia, tal y como se ha descrito, tiene el defecto de tener que recargar nuevamente la página completa en el navegador. Una forma de evitarlo es empleando AJAX (JavaScript asíncrono), efectuando las peticiones desde dentro de una función y actualizando posteriormente el DOM (Modelo de Objetos del Documento). En este caso, el código del lado del servidor no suele generar una página, sino información, codificada en formatos como XML o JSON. Por último, mencionar que existen librerías como jQuery que facilitan mucho la tarea al programador. El siguiente código, por ejemplo, asocia al elemento con identificador «boton» un evento por el cual, cuando se pulsa, se hace una llamada asíncrona al servidor a través de la URL a.php. Se le pasa por el método POST la variable envio1, con contenido «valor1». Una vez retorna la respuesta del servidor, se muestra ésta en una ventana desplegable.
|
1 2 3 4 5 6 7 8 |
$("#boton").bind("click", function() { $.ajax({ type: "POST", url: "a.php", data:{envio1:"valor1"} }).done(function(data) { alert(data); }); }); |
Hasta aquí esta brevísima introducción a la programación web. Para los recién llegados que estén interesados en profundizar en ella, les recomiendo seguir los enlaces o buscar información adicional, que es fácil encontrar en la red.
