Saltar la navegación

5. El despertar de la web dinámica

Rétor dice:Has aprendido a crear páginas web programándolas en HTML y dándoles formato con hojas de estilo CSS. Estas páginas web que has visto hasta ahora y has creado contienen una información fija, estática, de tal modo que para cambiar y actualizar dicha información hay que entrar de lleno en la programación de la página y cambiar el texto delimitado por el código HTML. Por eso se llaman páginas web estáticas: Las páginas estáticas contienen información que no cambia hasta que el diseñador o programador la modifica manualmente y están compuestas únicamente de HTML y CSS (como has visto previamente, se realizan fácilmente).

En los primeros días de Internet, para las empresas no era tan importante lo que se publicaba en la web, siempre y cuando tuvieran una presencia en la red donde los clientes pudieran obtener información básica sobre la entidad y sus productos. Pero una de las grandes limitaciones de las páginas web estáticas es el esfuerzo que se requiere para actualizarlas. Cambiar un solo elemento en una página web estática requiere reconstruir y recargar en el servidor toda la página, o a veces incluso un grupo de páginas web. Por eso surgieron y conocerás las páginas web dinámicas.

1. ¿Cómo actualizar sin pesar?

Imagen de chica programando en diversos lenguajes de scriptComprobemos las limitaciones de las páginas web estáticas: Imaginad que formáis parte de una organización dedicada a eventos que, con frecuencia, necesita publicar información en su web en tiempo real:

  • ¿Qué cantidad de trabajo y de qué tipo supone esta necesidad en una página web estática?

En un momento dado, un desarrollador de la empresa, durante estos trabajos de actualización de los contenidos cambia accidentalmente otros artículos en la página, arruinando seriamente la información de la web:

  • ¿Qué medidas se os ocurren tomar para evitar estos casos en un futuro?

Posteriormente, un miembro del equipo se informa de la existencia de páginas web dinámicas que permiten cambiar fácilmente su contenido en tiempo real sin ni siquiera tocar el código de la página, lo que haría posible mantener el contenido de la página actualizado para que lo que un el visitante ve allí pueda ser actualizado o substituido en un día siendo el diseño central de la página web el mismo. Pero para ello, se debe conocer un método para insertar automáticamente datos en tiempo real en el código HTML: así, decidís investigar en la web acerca de lo que son los lenguajes de script:

  • ¿Cómo pueden ayudaros estos lenguajes para insertar los datos deseados en el código HTML?Explicad los aspectos que descubrís investigando un poco en Internet estos lenguajes.

2. Servidor o cliente. Esa es la cuestión...

En las páginas web dinámicas entran en juego los lenguajes de script, que permiten insertar código de programa dentro de una web, que genera dinámicamente HTML. Como el código de programación está insertado en la página web, en alguna parte se debe ejecutar dicho código para producir el HTML dinámico para el nuevo contenido. Hay dos lugares donde se puede ejecutar el código de programa insertado:

  • En el equipo del cliente, después de que el navegador web descarga la página web. Esto se conoce como programación del lado del cliente.
  • En el servidor web antes de que se envíe la página. Esto se conoce como programación del lado del servidor.

Veamos cómo funciona cada una de las opciones:

Lado del cliente

Esquema de funcionamiento en el que la web con el código script se envía al cliente y allí se ejecuta.

En la programación del lado del cliente, se inserta el código del programa dentro del código HTML que el servidor envía al navegador del cliente. El navegador debe poder detectar el código del programa incorporado y ejecutarlo, ya sea dentro del navegador o como un programa separado fuera del navegador. Observa en la imagen de la derecha este funcionamiento.

No existen muchos lenguajes de script que se aplliquen en el lado del servidor. Actualmente se conocen sobre todo Javascript y jQuery.

Lado del servidor

Esquema de funcionamiento en el que la web con el código script se ejecuta en el servidor y después se envía al cliente.

En la programación del lado del servidor, el servidor web interpreta el código de programación insertado antes de enviar la página web al navegador del cliente. Luego, el servidor toma cualquier código HTML que el código de programación genere y lo inserta directamente en la página web antes de enviarlo al cliente. El servidor hace todo el trabajo ejecutando el código de script, por lo que tiene la garantía de que cada página web se ejecutará correctamente.

A diferencia de la programación del lado del cliente, hay muchos lenguajes de programación populares del lado del servidor que están en uso actualmente, cada uno con su propio conjunto de pros y contras. Ejemplos son: PHP, Python, .NET, Java, etc.

Lado cliente y lado servidor

Esquema de funcionamiento en el que el código script PHP se ejecuta en el servidor y el código script Javascript se ejecuta en el cliente.

La programación del lado del cliente y del lado del servidor, por separado, tienen pros y contras. En lugar de tratar de elegir un método para crear páginas web dinámicas, se pueden utilizar ambos al mismo tiempo.

Un uso común para JavaScript y PHP es la validación de datos. Cuando se proporciona un formulario HTML para que lo llenen los visitantes de un sitio web, se debe tener cuidado de que llenen el tipo correcto de datos para cada campo. Con la programación del lado del servidor, no se puede validar los datos hasta que el visitante del sitio completa y envía el formulario al servidor. Si un visitante del sitio web se salta accidentalmente el llenado de un solo campo y el formulario entero debe completarse nuevamente, puede ser una experiencia frustrante.

Para resolver este problema, se puede insertar código JavaScript en el formulario para verificar a medida que el visitante ingrese los datos en el formulario. Si alguno de los campos del formulario está vacío cuando se hace clic en el botón Enviar, el código JavaScript puede bloquear el envío del formulario y señalar el campo vacío. Luego, cuando todos los datos se completan y el formulario se envía correctamente, el código PHP en el servidor pueden procesar los datos para garantizar que sean del tipo y formato de datos correctos.

3. Los lenguajes a su servicio

En el siguiente vídeo se te presenta una visión general de los lenguajes del lado del servidor. Observa las características y responde a las preguntas:

com/watch?v=eDUDHFdFin4

Para finalizar, visualiza este nuevo vídeo que nos proporciona una visión general de los lenguajes de script:

Recuerda que si lo necesitas puedes activar los subtítulos

4. ¿Cuál me pido?

En este recurso vamos a utilizar ciertos comandos del lenguaje PHP para crear nuestra página web dinámica.  ¿Cuál de los tres modelos ya vistos en el punto 2 estaremos entonces utilizando?:

Esquema de funcionamiento en el que la web con el código script se envía al cliente y allí se ejecuta.
Esquema de funcionamiento en el que la web con el código script se ejecuta en el servidor y después se envía al cliente.
Esquema de funcionamiento en el que el código script PHP se ejecuta en el servidor y el código script Javascript se ejecuta en el cliente.

Crea una explicación del por qué has elegido uno de ellos y de su funcionamiento, y exponla a tu clase. Realzia un esquema gráfico propio del funcionamiento elegido y compártelo en tu blog de la asignatura.