Asignatura Datos del alumno Fecha

Computación en el Cliente Apellidos: Tovar Valencia

02-01-2020
Web Nombre: Orlando

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

comunicación entre clientes web y servidores:

 El objeto XMLHttpRequest.
 Las funciones AJAX del archiconocido framework jQuery.
© Universidad Internacional de La Rioja (UNIR)

 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 Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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
ejercicios realizados:
- Resolución del ejercicio a la manera de 2005 (Chuck 2005)
© Universidad Internacional de La Rioja (UNIR)

- 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)

1
https://getbootstrap.com/

Actividad No 2 2
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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
mostrará el chiste desde la petición Ajax.
© Universidad Internacional de La Rioja (UNIR)

Fragmento html donde se colocará el chiste

Actividad No 2 3
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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
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

© Universidad Internacional de La Rioja (UNIR)

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 Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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
etiqueta “p”, el resultado final se muestra a continuación.

Resolución con plugin de jQuery (hasta 2014)

© Universidad Internacional de La Rioja (UNIR)

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 Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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
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
© Universidad Internacional de La Rioja (UNIR)

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

Actividad No 2 6
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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

resultado por consola.
© Universidad Internacional de La Rioja (UNIR)

Código javascript para probar con la API fetch

Actividad No 2 7
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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

solo mostrando el chiste desde el la petición Ajax.
© Universidad Internacional de La Rioja (UNIR)

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

Actividad No 2 8
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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

chuckWebComponent.html.
© Universidad Internacional de La Rioja (UNIR)

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

imagen anterior

Actividad No 2 9
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

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
ejercicios.
© Universidad Internacional de La Rioja (UNIR)

Actividad No 2 10
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Tovar Valencia
02-01-2020
Web Nombre: Orlando

Integrantes del GRUPO CCWBOG:

- ORLANDO TOVAR VALENCIA

- DANIEL FABIÁN LINARES CORTE
- LIZZETH JULIANA GONZALEZ DURAN
- JONATHAN ANDRÉS PILLAJO COKA
© Universidad Internacional de La Rioja (UNIR)

Actividad No 2 11