jairogarcíarincón

Generación dinámica de páginas web

Las páginas definidas antes se conocen como páginas web estáticas, su contenido no varía. Son útiles para mostrar una información concreta, y mostrarán esa misma información cada vez que se carguen.

En contraposición a las páginas web estáticas existen las páginas web dinámicas, su contenido cambia en función de diversas variables, como puede ser el navegador que estás usando, el usuario con el que te has identificado, o las acciones que has efectuado con anterioridad.

Para la comunicación entre el cliente y el servidor para este tipo de páginas se suele utilizar el interfaz de entrada común o CGI (Common Gateway Interface) que, según la Wikipedia, es una importante tecnología de la World Wide Web que permite a un cliente (navegador web) solicitar datos de un programa ejecutado en un servidor web. CGI especifica un estándar para transferir datos entre el cliente y el programa y es un mecanismo de comunicación entre el servidor web y una aplicación externa cuyo resultado final de la ejecución son objetos MIME (Multipurpose Internet Mail Extensions), esto es, texto, ficheros, audio, video, etc.

Dentro de las páginas web dinámicas podemos distinguir dos tipos:

1. Aquéllas que incluyen código que ejecuta el navegador, normalmente en lenguaje JavaScript que se descarga junto con la página. Cuando el navegador muestra la página en pantalla, ejecuta el código que la acompaña. Este código puede incorporar funciones que pueden ir desde mostrar animaciones hasta cambiar totalmente la apariencia y el contenido de la página.
2. Aquéllas con extensiones como .php, .asp, .jsp, .cgi o .aspx, en las que el contenido que se descarga al navegador es similar al de una página web estática pero no porque se encuentre almacenado en el servidor, sino porque se ha generado de forma dinámica a partir de ciertas variables y/o de la ejecución de programas y funciones en el servidor, si bien pueden partir de una plantilla base en html.

Ejemplo de comprensión: Accede a ESTE ejercicio, elige un personaje y analiza el código fuente del div id="preview" primero con el Inspector (ponte encima del Área de previsualización: clic con botón derecho, inspeccionar elemento) y luego en la página "Ver código fuente" (ponte encima del fondo, clic con botón derecho, ver código fuente). Escribe ahora algo en la Ventana de edición ¿Hay alguna diferencia entre los dos casos? ¿Por qué?

El esquema de funcionamiento de una página web dinámica es el siguiente:

1. El cliente web (navegador) del ordenador solicita a un servidor web una página.
2. El servidor busca esa página y la recupera.
3. En el caso de que se trate de una página web dinámica, el servidor web contacta con el módulo responsable de ejecutar el código y se lo envía.
4. Como parte del proceso de ejecución, puede ser necesario obtener información de algún repositorio, generalmente una base de datos, aunque puede ser algún otro tipo de archivo (JSON, XML, ...).
5. El resultado de la ejecución será una página en formato HTML, similar a cualquier otra página web no dinámica.
6. El servidor web envía el resultado obtenido al navegador, que la procesa y muestra en pantalla.

Ejemplo de comprensión (por el profesor): Analizar el flujo de información entre módulos para recuperar la página web de la clase actual.

Aplicaciones web

Las aplicaciones web emplean páginas web dinámicas para crear aplicaciones que se ejecuten en un servidor web y se muestren en un navegador. Un ejemplo son los clientes de correo, que te permiten consultar los mensajes de correo recibidos y enviar los tuyos propios utilizando un navegador.

Hoy en día existen aplicaciones web para multitud de tareas como procesadores de texto, gestión de tareas, o edición y almacenamiento de imágenes. Estas aplicaciones tienen ciertas ventajas e inconvenientes si las comparas con las aplicaciones tradicionales que se ejecutan sobre el sistema operativo de la propia máquina.

Ventajas

• No es necesario instalarlas en aquellos equipos en que se vayan a utilizar. Se instalan y se ejecutan solamente en un equipo, en el servidor, y esto es suficiente para que se puedan utilizar de forma simultánea desde muchos equipos.
• Como solo se encuentran instaladas en un equipo, es muy sencillo gestionarlas (hacer copias de seguridad de sus datos, corregir errores, actualizarlas).
• Se pueden utilizar en todos aquellos sistemas que dispongan de un navegador web, independientemente de sus características (no es necesario un equipo potente) o de su sistema operativo.
• Se pueden utilizar desde cualquier lugar en el que dispongamos de conexión con el servidor. En muchos casos esto hace posible que se pueda acceder a las aplicaciones desde sistemas no convencionales, como por ejemplo teléfonos móviles.

Inconvenientes

• El interface de usuario de las aplicaciones web es la página que se muestra en el navegador. Esto restringe las características del interface a aquellas de una página web.
• Dependemos de una conexión con el servidor para poder utilizarlas. Si nos falla la conexión, no podremos acceder a la aplicación web.
• La información que se muestra en el navegador debe transmitirse desde el servidor. Esto hace que cierto tipo de aplicaciones no sean adecuadas para su implementación como aplicación web (por ejemplo, las aplicaciones que manejan mucho contenido multimedia, como las de edición de vídeo).

Hoy en día muchas aplicaciones web utilizan las ventajas que les ofrece la generación de páginas dinámicas. La gran mayoría de su contenido está almacenado en una base de datos. Aplicaciones como Wordpress, Drupal, Joomla!, Magento, Prestashop, jairogarciarincon y otras muchas ofrecen dos partes bien diferenciadas:
Una parte externa o front-end, que es el conjunto de páginas que ven la gran mayoría de usuarios que las usan (usuarios externos).
Una parte interna o back-end, que es otro conjunto de páginas dinámicas que utilizan las personas que producen el contenido y las que administran la aplicación web (usuarios internos) para crear contenido, organizarlo, decidir la apariencia externa, etc.

Ejemplo de comprensión (por el profesor): Analizar el front-end y el back-end de la página web jairogarciarincon.com

Ejecución del código en entorno cliente y en entorno servidor

Como vimos, cuando tu navegador solicita a un servidor web una página, es posible que antes de enviártela haya tenido que ejecutar, por sí mismo o por delegación, algún programa para obtenerla. Ese programa es el que genera, en parte o en su totalidad, la página web que llega a tu equipo. En estos casos, el código se ejecuta en el entorno del servidor web.

Además, cuando una página web llega a tu navegador, es también posible que incluya algún programa o fragmentos de código que se deban ejecutar (normalmente en lenguaje JavaScript). Ese código se ejecutará en tu navegador (entorno cliente) y, además de poder modificar el contenido de la página, también puede llevar a cabo acciones como la animación de textos u objetos de la página o la comprobación de los datos que introduces en un formulario.

Esta división es así porque el código que se ejecuta en el cliente web (en tu navegador) no tiene, o mejor dicho tradicionalmente no tenía, acceso a los datos que se almacenan en el servidor. Es decir, cuando en tu navegador querías leer un nuevo correo, el código Javascript que se ejecutaba en el mismo no podía obtener de la base de datos el contenido de ese mensaje. La solución era crear una nueva página en el servidor con la información que se pedía y enviarla de nuevo al navegador.

Sin embargo, desde hace unos años existen técnicas de desarrollo web como AJAX y frameworks progresivos tales como React, Angular o Vue, que nos posibilitan realizar programas en los que el código JavaScript que se ejecuta en el navegador pueda comunicarse con un servidor de forma asíncrona para obtener información con la que, por ejemplo, modificar la página web actual o enviar un correo sin necesidad de recargar la página.

Ejemplo de comprensión: Autorellenado en la página web de Google.

---

Publicado el 23 de Noviembre de 2024

arquitecturasherramientasampapachemysqlphp