• Author / Uploaded
• Orlando Tovar Valencia

Citation preview

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Laboratorio: Computación en cliente web Objetivos Trabajar con estándares web relacionados con conexiones AJAX, funciones asíncronas y componentes.

Desarrollar el laboratorio tal y como se explica durante la sesión y narrar cómo se ha hecho, siguiendo para ello las instrucciones de este documento. Si no puedes asistir a la sesión en directo, recuerda que siempre la tienes a tu disposición como grabación.

Descripción de la actividad En este laboratorio vamos a realizar una sencilla petición mediante estándares web y vamos a representar los datos obtenidos en una página de manera limpia. Iremos complicando y actualizando esta petición de datos para que cada vez se acerque más a la manera actual de realizarse en la práctica. Es decir, repasaremos cada una de las maneras de hacer peticiones AJAX desde la antigüedad, hasta nuestros días.

Con más detalle, emplearemos, de manera escalonada, estas tecnologías de

© Universidad Internacional de La Rioja (UNIR)

comunicación entre clientes web y servidores:



El objeto XMLHttpRequest.



Las funciones AJAX del archiconocido framework jQuery.



Un plugin específico para jQuery creado por el mantenedor del servicio al que nos vamos a conectar.



Por último, un componente web moderno (web component) desarrollado por un tercero que nos permitirá realizar peticiones parecidas, pero de manera increíblemente elegante.

Actividad No 2

1

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Desarrollo de la Actividad Creando la página web: Para el desarrollo de la actividad y creación de la “pagina” que contendrá las tareas, procedimos a utilizar el framework Bootstrap1, esta es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. El diseño de la plataforma para realizar los ejercicios propuestos para esta actividad quedo de la siguiente manera.

El cual contiene en la parte superior el menú principal que contiene cada uno de los

© Universidad Internacional de La Rioja (UNIR)

ejercicios realizados:

1

-

Resolución del ejercicio a la manera de 2005 (Chuck 2005)

-

Resolución del ejercicio a la manera de 2006 (Chuck 2006)

-

Resolución con plugin de jQuery (Chuck 2014)

-

Resolución del ejercicio con Web Components (Web Components)

https://getbootstrap.com/

Actividad No 2

2

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

En la parte inferior se mostrarán cada uno de los chistes con los requests de cada una de las versiones.

Resolución del ejercicio a la manera de 2005 Para esto se utilizo el siguiente fragmento de código desde nuestro archivo Chuck2005.html, como se ve a continuación:

Código como se hacia llamado Ajax en el 2005

Y dentro del body de la página ponemos dentro de los “Div” el párrafo donde se

© Universidad Internacional de La Rioja (UNIR)

mostrará el chiste desde la petición Ajax.

Fragmento html donde se colocará el chiste

Actividad No 2

3

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Dentro del head de la página html, creamos el código que se encargara de enviar una petición tipo GET a la url donde está expuesto el servicio de Chuck Norris, esta se parsea desde Json retornado y se “imprime” a la etiqueta “p”, el resultado final se muestra a continuación.

Resolución del ejercicio a la manera de 2006 Para esta segunda manera de realizar llamados Ajax, se utilizó el siguiente fragmento

© Universidad Internacional de La Rioja (UNIR)

de código desde nuestro archivo Chuck2006.html, como se ve a continuación:

Código como se hacía llamado Ajax en el 2006

Y dentro del body de la página ponemos dentro de los “Div” el párrafo donde se mostrará el chiste desde la petición Ajax.

Actividad No 2

4

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Fragmento html donde se colocará el chiste

Dentro del head de la página html, creamos el código que se encargara de enviar una petición tipo GET a la url donde está expuesto el servicio de Chuck Norris, esta desde el reponse: response.value.joke se saca el chiste y se envía a poner dentro de la

© Universidad Internacional de La Rioja (UNIR)

etiqueta “p”, el resultado final se muestra a continuación.

Resolución con plugin de jQuery (hasta 2014) Para la tercera forma de realizar llamados Ajax, se utilizó el siguiente fragmento de código desde nuestro archivo Chuck2014.html, como se ve a continuación:

Actividad No 2

5

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Código como se hacía llamado Ajax con el plugin de Jquery

Y dentro del body de la página ponemos dentro de los “Div” el párrafo donde se mostrará el chiste desde la petición Ajax, a diferencia de los ejercicios anteriores se crea dentro de la etiqueta “ul” y a este se le pone un id “Chistes” donde se pondrá cada uno de los chistes.

Fragmento html donde se colocará el chiste

Dentro del head de la página html, creamos el código que se encargara de enviar una

© Universidad Internacional de La Rioja (UNIR)

petición con el plugin de JQuery realizando referencia a “$.icndb” desde el reponse: se crea un bucle “forEach” desde donde se pone cada uno de los chistes dentro de la etiqueta “Ul”, el resultado final se muestra a continuación

Actividad No 2

6

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Resolución en 2014 Para esta parte de la actividad se trabaja con node-fetch, y simplemente imprime por pantalla el texto de cada chiste. Para esto primero se procede a instalar el componente como se ve a continuación:

Comando de instalación de node-fetch

Se crea el archivo ChistesChuck.js el cual contiene el código a “compilar” y mostrar el

© Universidad Internacional de La Rioja (UNIR)

resultado por consola.

Código javascript para probar con la API fetch

Actividad No 2

7

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

El resultado de la ejecución con del comando “node ChistesChuck.js” es el siguiente:

Resultado de la ejecución del código javascript

Ahora se ajusta el código para que desde el Json retornado desde el servicio de Chuck desde el objeto Json.value.joke el texto del chiste consultado.

Código ajustado para obtener solo el chiste

Por ultimo se obtiene el resultado el final de la ejecución del archivo ChistesChuck.js

© Universidad Internacional de La Rioja (UNIR)

solo mostrando el chiste desde el la petición Ajax.

Resultado de la ejecución del código solo mostrando el chiste

Actividad No 2

8

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Resolución del ejercicio con Web Components (presente) Y por último se realiza el ejercicio con Web Components. Para esto lo que hacemos es instalar desde la consola de node.js “bower” como se ve a continuación:

Ejecución comando npm install -g bower

Y luego realizamos la instalación de Chuck-norris-joke como se ve a continuación:

Ejecución comando bower install Chuck-norris-joke --save

Ahora procedemos a implementar el componente dentro de la página

© Universidad Internacional de La Rioja (UNIR)

chuckWebComponent.html.

Importamos el archivo Chuck-norris-joke.html en el header de la página como se la imagen anterior

Actividad No 2

9

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

Fragmento de código para colocar los chistes.

El resultado final con la aplicación de la consulta por medio de los webs components es la siguiente:

Estructura de la aplicación Esta es la estructura como quedo la aplicación con las diferentes formas de utilizar Ajax, dentro de la carpeta Chuck se encuentran los archivos con cada uno de los

© Universidad Internacional de La Rioja (UNIR)

ejercicios.

Actividad No 2

10

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Tovar Valencia Nombre: Orlando

Fecha

02-01-2020

© Universidad Internacional de La Rioja (UNIR)

Integrantes del GRUPO CCWBOG:

-

ORLANDO TOVAR VALENCIA

-

DANIEL FABIÁN LINARES CORTE

-

LIZZETH JULIANA GONZALEZ DURAN

-

JONATHAN ANDRÉS PILLAJO COKA

Actividad No 2

11