Asignatura Datos del alumno Fecha

Computación en el Apellidos:
Cliente Web Nombre:

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:

© Universidad Internacional de La Rioja

(UNIR)
 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.

1
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

 Por último, un componente web moderno (web component) desarrollado por un

tercero que nos permitirá realizar peticiones parecidas, pero de manera
increíblemente elegante.

Accede a más información sobre:

JQuery: https://jquery.com/
Web component: https://www.webcomponents.org/

Servicio web de chistes Chuck Norris: el ICNDB

El actor y experto en artes marciales Carlos Ray Norris (mundialmente conocido

como Chuck Norris) (https://chucknorris.com/), ha servido desde hace mucho tiempo
como fuente de inspiración de cientos de chistes respecto a su fortaleza, coraje y
determinación (características idénticas a las de los alumnos del grado en Ingeniería
Informática en UNIR). Tal es así, que incluso existe una base de datos oficial (ICNDB,
http://www.icndb.com/) de estos chistes. Además, esta base de datos posee un API
REST muy fácil de usar.

A modo de anécdota, en esta entrevista (https://youtu.be/TA_hMq-JUOE), el propio

Chuck Norris recita los propios chistes efectuados, con cariño, a su costa.
© Universidad Internacional de La Rioja
(UNIR)
Instalación del entorno de desarrollo recomendado

Esta práctica se puede llevar a cabo de distintas formas, ya que la web es un

entorno de desarrollo abierto. Sin embargo, os recomiendo que hagáis uso de

2
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

estos estándares (internacionales o industriales) de facto, son los más usados y

marcan las tendencias de programación más recientes.

 El editor, Visual Studio Code (https://code.visualstudio.com/), de Microsoft. Su

instalación es muy sencilla y es multiplataforma. Dentro de Visual Studio,
recomiendo instalar las extensiones:
• HTML Snippets:
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
• HTML Bolierplate:
https://github.com/sidthesloth92/vsc_html5_boilerplate
• Bootstrap4:
https://github.com/thekalinga/bootstrap4-vscode

Para ello usa el sencillo y amigable gestor de extensiones de VS Code:

https://code.visualstudio.com/#hundreds-of-extensions

Comienzo del ejercicio

Para empezar, como en todo proyecto web moderno, vamos a crear una carpeta de
trabajo, por ejemplo ChistesChuck. A continuación, arrancamos el Visual Studio
Code y abrimos esa carpeta. Dentro de esa carpeta, crearemos un fichero HTML
para comenzar: chuck2005.html, donde empezaremos con la primera tarea.

Resolución del ejercicio a la manera de 2005

© Universidad Internacional de La Rioja
(UNIR)
El objeto XMLHttpRequest (https://www.w3.org/TR/2012/NOTE-XMLHttpRequest1-
20120117/) nos permite hace peticiones AJAX ( https://developer.mozilla.org/en-
US/docs/Web/Guide/AJAX) de manera bastante cómoda. Por ejemplo, supongamos

que queremos recibir un chiste de ICNDB, lo haríamos así:

3
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

xmlhttp = new XMLHttpRequest();

xmlhttp.open('GET', 'http://api.icndb.com/jokes/random/', true);
xmlhttp.onreadystatechange = function(){
var textoChiste = JSON.parse(this.response).value.joke;
console.log('chiste recibido: ' + textoChiste);
var h1s = document.getElementsByTagName('h1');
h1s[0].innerHTML = textoChiste;
}
xmlhttp.send();

En este ejemplo, se busca el texto de un único chiste y, al encontrarlo, se sustituye

el contenido de la primera etiqueta h1 de la página web donde se ejecute este
script.

Se pide

Aplicar este script y sustituir el texto del chiste en el título central de un elemento
Jumbotron del framework Bootstrap. Evidentemente, al código anterior le falta el
«andamiaje» HTML.

Jumbotron: https://getbootstrap.com/docs/4.0/components/jumbotron/
Bootstrap: https://getbootstrap.com/

Pista para simplificarse la vida

Usad los plugins HTML5 snippets, HTML5 Boilerplate y Bootstrap de VS Code

descritos anteriormente. Consultad la documentación para ver cómo aprovechar
© Universidad Internacional de La Rioja
todo su potencial
(UNIR)
(y creedme, son muy ponentes y agilizan mucho el trabajo, por
eso VS Code se ha convertido en poco tiempo en el editor más usado para
desarrollo web).

4
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

Resolución del ejercicio a la manera de 2006

A principios de 2006 nació jQuery ( https://jquery.org/) de la mano de John Resig.

Todo empezó en un sencillo e inocente post en su blog. Entre otras muchas cosas
increíbles, el framework jQuery incorpora una nueva instrucción $.ajax(…) muy útil.

Resig, J. (22 de agosto de 2005). Selectors in Javascript (Blog post). Recuperado de

https://johnresig.com/blog/selectors-in-javascript/

Para hacer el ejercicio como en 2006, tenemos que enlazar con la biblioteca de
jQuery. Cread otro fichero, por ejemplo chuck2006.html. Nuevamente, podemos
usar su CDN (https://code.jquery.com/).

Con el siguiente código Javascript, conseguimos un funcionamiento parecido al

ejercicio anterior:

$.get("http://api.icndb.com/jokes/random", (response) => {

var textoChiste = response.value.joke;
$('h1').text(textoChiste);
})

Se pide

Replicar el ejemplo anterior con jQuery. ¿Qué diferencias ves con respecto al
ejercicio anterior? ¿Cómo simplifica la vida jQuery? ¿Qué ocurre si tenemos varios
tags h1?
© Universidad Internacional de La Rioja
(UNIR)

Resolución con plugin de jQuery (hasta 2014)

jQuery no tardó en tener soporte para plugins (¡apenas unas semanas tras su
nacimiento!).

5
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

Accede al soporte para plugins:

http://blog.jquery.com/2006/01/25/first-jquery-plugin/

Mucha gente empezó a elaborar estos miniprogramas y, entre ellos, los propios
gestores del ICNDB. Gracias a su plugin de jQuery, podemos acceder a su API de
manera todavía más elegante.

Accede al plugin jQuery de ICNDB:

http://www.icndb.com/libraries/javascript-jquery-plugin/

En el enlace anterior tienes acceso a un CDN listo para funcionar. Como antes, solo
tenéis que usarlo para poblar el atributo src de una etiqueta script. Para extraer el
texto de un norrischiste, simplemente tenéis que ejecutar:

$.icndb.getRandomJoke((response) => { var textoChiste =

response.joke; });

Se pide

Que uséis el método $.icndb.getRandomJokes (atentos a la «s» del final) para poblar
los elementos de una lista ordenada (tag <ul></ul>). Ejemplo:

$.icndb.getRandomJokes({
number: 10,
success: (response) => {
© Universidad Internacional de La Rioja
response.forEach(element => { $("ul").append('<li>' + element.joke
(UNIR)
+ '</li>'); });
}});

6
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

Se valorará muy positivamente el uso de una lista «estilada» con Bootstrap.

Responded también a la pregunta: ¿cómo se escribían las funciones en las versiones
de ECMAScript previas a la versión 6?

Pista aquí:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Resolución en 2014

A partir de finales de 2013 y predominantemente en 2014, contamos con el API

fetch, que permite hacer llamadas AJAX de manera muy limpia «a la jQuery».

Se pide

Repetir el ejercicio anterior con esta API ( https://wiki.whatwg.org/wiki/Fetch). Podéis

encontrar ejemplos y descripción de esta función en la documentación de la
fundación Mozilla (https://developer.mozilla.org/es/docs/Web/API/Fetch_API ).

Responde a esta pregunta: ¿Qué es el WHATWG (https://whatwg.org/)? (organismo

que, entre otras cosas, ha definido la API del método fetch).

Se pide también repetir el mismo ejercicio con node-fetch, y simplemente imprimir

por pantalla el texto de cada chiste.
© Universidad Internacional de La Rioja
(UNIR)
Accede a node-fetch:
https://github.com/bitinn/node-fetch

7
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

Resolución del ejercicio con Web Components (presente)

Y por fin llegamos a la forma de resolver este ejercicio de la manera más elegante
posible: con Web Components. Vamos a usar el componente descrito aquí. Para
instalarlo, se recomienda usar Bower:

bower install chuck-norris-joke --save

Aunque, como se indica en el enunciado, podemos usar un CDN en este caso no

tenemos un CDN para este web component, pero podemos utilizar Github a modo
de tal, como explicamos más abajo.

Este módulo no se trata de un script de Javascript o un CSS a la antigua usanza, sino

de un web component moderno. Para usarlo, se necesita la nueva directiva import
definida en las últimas especificaciones del W3C ( https://www.w3.org/TR/html-
imports/). En caso de haberlo instalado mediante Bower, escribiríamos esta línea en

nuestra página:

<link rel="import" href="bower_components/chuck-norris-joke/chuck-

norris-joke.html">

Y en caso de usar Github como CDN, escribiríamos esta:

<link rel="import"
href="https://raw.githubusercontent.com/erikringsmuth/chuck-norris-
joke/master/chuck-norris-joke.html">
© Universidad Internacional de La Rioja
(UNIR)

Ahora, si queremos un chiste de Chuck Norris, solo tenemos que incluir este tag en
el fichero HTML:

<chuck-norris-joke></chuck-norris-joke>

8
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

Si hemos instalado el componente de manera local (con Bower, como se

recomienda) ya no podemos abrir la página directamente y ver los resultados: ha de
«ser servida» con un servidor web. Os recomiendo que uséis http-server
(https://www.npmjs.com/package/http-server) basado en NodeJS y fácilmente
instalable con NPM. Simplemente tenéis que ejecutar el comando http-server en el
directorio de trabajo y listo. Por cierto, también es necesario, de momento, el uso
de Chrome u Opera para ver el resultado. Algunos navegadores todavía no
soportan los web components, pero es cuestión de (poco) tiempo.

Se pide

Crear una página web con una tabla en la que cada fila sea un chiste de Chuck
Norris. La tabla ha de estar estilada con otro framework distinto a Bootstrap, por
ejemplo Skeleton (http://getskeleton.com/).
Instalad Skeleton con Bower:

bower install skeleton-framework --save

También podéis usar un CDN de Skeleton u otro framework CSS de vuestro gusto. El
objetivo es que os encontréis cómodos enlazando CSS en vuestros proyectos. Aquí
tenéis ejemplos de tablas con Skeleton: http://getskeleton.com/#tables

Rúbrica
© Universidad Internacional de La Rioja
(UNIR)
 Las peticiones AJAX se realizan correctamente. Peso: 40%
 Los ejercicios y sus resultados están justificados. Peso: 30%
 La presentación final del ejercicio es limpia, cuidada y acorde a un nivel de
master universitario. Peso 30%

9
Tema 5. Actividades
 Asignatura Datos del alumno Fecha
Computación en el Apellidos:
Cliente Web Nombre:

Entrega

Se valorará una correcta narración de la ejecución del ejercicio paso a paso

(instalación de componentes, edición de los ficheros, ejecución de los ejercicios,
etc.). Contesta a todas las preguntas de manera ordenada y limpia. Se trata de un
ejercicio propio de un máster universitario y se tendrá en cuenta una correcta
explicación y cuidado en la presentación. Cuida la ortografía y los nombres propios
de las tecnologías usadas (no es vs Code, ni vs code, sino VS Code). Presenta tu
ejercicio en la plataforma en PDF o en un HTML inline (con todo incrustado:
imágenes, estilos, etc.). Pueden incluirse capturas de pantalla de los navegadores
mostrando el resultado, pero el código ha de estar en texto. Recomiendo el uso de
Markdown como estándar industrial para registrar información de tipo técnica.

© Universidad Internacional de La Rioja

(UNIR)

10
Tema 5. Actividades