1. Páginas web dinámicas

1.1 Servidor o cliente

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.

1.2 Cliente

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 este funcionamiento.

No existen muchos lenguajes de script que se apliquen en el lado del servidor.

1.3 Servidor

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.

1.4 Lado cliente y lado servidor

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.

2. THE MOVIE DATABASE

Para realizar este proyecto, el primer paso que debes realizar es registrarte en la web de The Movie Database y darte de alta en su API. De esta forma podrás realizar peticiones y obtener información de su base de datos para posteriormente visualizarla en tu proyecto.

2.1 Crea un proyecto en Visual Studio

El primer paso que debemos realizar es crear un nuevo proyecto en Visual Studio, para ello simplemente tendremos que abrir la aplicación y crear nueva carpeta, por ejemplo MOVIES  y en su interior un nuevo archivo HTML llamado index.html. Este fichero será la página principal de nuestra web.

Simplemente poniendo el carácter ! y usando la opción de autocompletar lograréis una estructura básica de un archivo HTML.

2.2 Visualización del proyecto

Para poder visualizar de forma dinámica nuestro proyecto y que se puedan observar los cambios que vamos realizando en nuestros archivos vamos a instalar la extensión LIVE SERVER.

Para ejecutar el archivo, tan solo tendremos que pulsar el segundo botón del ratón sobre nuestro archivo index.html y seleccionar la opción Open with Live Server

Es importante destacar que abrir el proyecto de esta forma permite ver la página web publicada en un servidor, en vez de simplemente abrir el archivo en un navegador. Esto se puede apreciar en la URL de la web.

2.3 Estructura HTML

Para nuestro proyecto web debemos crear la estructura de nuestra página index. A continuación sigue los pasos para lograrlo.

• Crea una etiqueta div cuya clase sea container. Este elemento servirá para agrupar todo el contenido de la web dentro de una etiqueta <div>.

• Crea una etiqueta h1 con el texto Películas.

• Añadimos una etiqueta Página y un campo de selección, que permita seleccionar la página que vamos a mostrar. En este caso el selector solo permitirá elegir entre las primeras 5 páginas.

• Añadimos una estructura similar a la del apartado anterior, pero en este caso para añadir un campo idioma. Es importante destacar en este caso el valor del atributo value que es la cadena de texto que indica el idioma dentro de la aplicación The Movie Database.

• Por último, añadiremos un botón a la web que al pulsarlo nos permitirá enviar una petición al servidor para que este nos envíe de vuelta la información solicitada.

El resultado final debería ser algo similar a esto:

Como habrás podido comprobar, el resultado que has obtenido no es igual al de la imagen anterior. Revisa el código para añadir los elementos que faltan.

2.4 CSS

En esta sección vamos a dar estilos a nuestra página web. Para ello vamos a usar un framework de CSS.  Este es el enlace, https://picocss.com/.

Un framework de CSS es una biblioteca de estilos genéricos que puede ser usada para implementar diseños web.  El uso de frameworks implica una serie de ventajas en el desarrollo de páginas web:

• Proporcionar una forma fácil y por tanto rápida de implementar diseños web.

• Nos aseguran que el diseño va a funcionar en una amplia gama de navegadores

• Nos aseguran que su código cumple cierta normas estándar.

• Nos aseguran cierto grado de fiabilidad en la eficacia de las utilidades que nos aportan. El framework se supone que está bien probado para asegurarnos que no hay errores.

• En  aquellos casos en los que el framework sea Responsive, permitirá que la página web se visualice correctamente en los distintos dispositivos.

En este caso el framework Picoss es muy simple y minimalista, sin embargo, permite conseguir buenos resultados que además son  responsivo.

Para añadir los estilos del framework a nuestro proyecto, simplemente debemos añadir una etiqueta <link> a la cabecera con la siguiente configuración.

Si comprobamos ahora nuestro proyecto, veremos que ha cambiado bastante conforme a lo que teníamos anteriormente. Además, el diseño se adapta al dispositivo (responsive), por lo que si modificas el dispositivo en tu navegador la web seguirá manteniendo un buen diseño.

Una opción interesante es modificar la etiqueta <html> para poder cambiar el de forma automática el aspecto de nuestra web. Podemos configurar la página para que se muestre con los temas light o dark. Compruebalo.

2.5 JavaScript

En este proyecto usaremos JavaScript para poder consumir los servicios que nos proporciona la API de The Movie Database. Para ello lo primero que tendremos que hacer es crear en la carpeta de nuestro proyecto un nuevo fichero llamado app.js donde iremos introduciendo nuestro código JS.

El siguiente paso sería introducir en el archivo HTML la referencia al fichero app.js que acabamos de crear. Puedes colocar tu código JavaScript en el < head > o en el < body > de tu HTML. Generalmente, se recomienda colocarlo justo antes de cerrar la etiqueta < /body >, ya que esto permite que todo el contenido HTML se cargue antes de ejecutar el código JavaScript.

A continuación debemos realizar una modificación en nuestro código HTML. Nuestra web es básicamente un formulario, sin embargo, en ningún momento hemos indicado en el fichero HTML que existe un formulario. Debemos realizar la siguiente modificación:

En este momento, vamos a comenzar a escribir nuestro primer código en JavaScript. Sigue los siguientes pasos.

• Crea una constante que se llame form y haz referencia al formulario del documento HTML.  document hace referencia a todo el archivo html y con la función querySelector() se puede seleccionar un elemento de este, en este caso el formulario.

• Lo siguiente que se que vamos a hacer será añadir un evento al formulario, de forma que en el momento en que hagamos click en el botón de submit del formulario (el único botón que tenemos en el formulario, la página se comporte como nosotros indiquemos en el código.  En primera instancia y para comprobar que lo que hemos programado es correcto simplemente pediremos a la página que lance un alert diciendo ¡HOLA!, además configuraremos el evento submit para que no permita que se recargue la página.

En este momento, vamos a comenzar a escribir nuestro primer código en JavaScript. Sigue los siguientes pasos.

• Crea una constante que se llame form y haz referencia al formulario del documento HTML.  document hace referencia a todo el archivo html y con la función querySelector() se puede seleccionar un elemento de este, en este caso el formulario.

• Ahora debemos crear una función asíncrona que utilizaremos para llamar al servicio que nos proporciona la API de Movie Database. Para la gestión de async/await podemos echar un vistazo en este enlace donde se explica su funcionamiento y su sintáxis. Enlace. La función asincrona que vamos a crear se llamará fetchData y en ella definiremos 4 variables. Cada una de ellas guardará el valor de la página, el del idioma, el account_id de la API y la url del servicio que al que se va a llamar.

FIJATE BIEN EN LAS COMILLAS DE LA URL, NO SON LAS MISMAS QUE LAS DEL RESTO DE VARIABLES.

• Por último debemos configurar correctamente el evento para del botón submit para que realice la petición a la API de The Movie Database. Fijate bien, que hemos añadido las palabras reservadas async y await.

• Una vez completados todos los pasos deberíamos ser capaces de ver en la consola del navegador los resultados obtenidos tras la petición a la API. 

2.6 Representando la información

La parte final de este proyecto consiste en representar la información que hemos obtenido en la petición a la API en nuestra página web. Sigue los pasos y termina para conseguir la versión final de la web.

• En primer lugar debemos añadir un nuevo div a nuestro fichero index.html. Este div estará a dentro del div definido con la clase container, justo al final.

El siguiente paso será ampliar nuestro evento submit para que genere una estructura HTML de forma dinámica en función de los resultados obtenidos en la petición que hemos realizado a la API. Esta nueva estructura se generará dentro del div con id output.

Seguidamente debemos recorrer el resultado de la petición a la API para ir creando la estructura HTML que contendrá la información. Para ellos debemos crear una estructura for que recogerá la información del JSON y la representará en nuestra web.

Por último, creamos la estructura HTML donde vamos a hacer referencia al valor de las variables de cada uno de los registros que vamos recorriendo en el for. Resulta importante el += que se encarga de concatenar el contenido del HTML que está en el innerHTML con el contenido del siguiente registro. También es importante recordar que para que se puedan leer las variables con ${} necesitamos un tipo de comillas específico ``

2.6 EXTRAS

Para hacer nuestro proyecto más completo, vamos a deshabilitar e indicar que se está procesando la respuesta cuando pulsamos el botón de submit del formulario. Para ello vamos a hacer uso de un atributo que nos proporciona nuestro framework de CSS aria-busy cuando su valor es true, mostrará el botón cargando, cuando es false lo mostrará normal.

Tras añadir este código la aplicación deja de funcionar repentinamente. ¿Sabrías decirme que ha pasado y como solucionarlo?

Para terminar el proyecto, vamos a mejorar los estilos de nuestra web en dos aspectos:

• Centrando la imagen en pantalla.

• Añadiendo un pequeño espacio entre la imagen y la descripción de la película.

Para abordar ambas mejoras debemos crear un nuevo fichero con el nombre estilos.css y cargarlo en el HTML e introducir la siguiente codificación para las etiquetas de tipo img.

Para poder modificar los estilos del div que contiene la descripción de la película, una de las mejores opciones es añadir a esos div una clase que permita localizarlos rápidamente. Debe ser una clase y no un id, puesto que habrá más de un resultado en la búsqueda y los id deben ser únicos en el HTML.

Por último, añadimos el CSS para modificar el estilo de las etiquetas de la clase descripcion.