Este documento describe un laboratorio sobre chistes de Chuck Norris y el desarrollo de aplicaciones web. Se explica cómo hacer peticiones a la API de chistes de Chuck Norris de diferentes maneras a lo largo del tiempo, desde el uso del objeto XMLHttpRequest hasta el uso de componentes web modernos. Se recomienda el uso de herramientas como Visual Studio Code, Bower, jQuery, Fetch y componentes web para completar los ejercicios propuestos de forma escalonada.

1. Laboratorio DAR
Descripción general
En este laboratorio vamos a realizar una sencilla petición mediante estándares
web y vamos a representar los datos obtenidos en un 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,
un plugin específico para jQuery creado por el mantenedor del servicio al
que nos vamos a conectar, y por último,
un componente web moderno (web component) desarrollado por un
tercero, que nos permitirá realizar peticiones parecidas, pero de manera
increiblemente elegante.
Laboratorio sobre chistes de Chuck Norris, una
API REST y el Desarrollo de Aplicaciones en Red
El actor y experto en artes marciales Carlos Ray Norris (mundialmente
conocido como Chuck Norris), 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) de estos chistes. Además, esta base de datos posee un API REST
muy fácil de usar.

2. A modo de anécdota, en esta entrevista, el propio Chuck Norris recita los
propios chistes efectuados, con cariño, a su costa.
Instalación del entorno de desarrollo
recomendado
Esta práctica se puede llevar a cabo de distintas formas. La Web es un entorno
de desarrollo abierto. Sin embargo, os recomiendo que hagáis uso de estos
estándares (internacionales y/o industriales) de facto, ya que son los más
usados y marcan las tendencias de programación más recientes.
El editor, Visual Studio Code, de Microsoft. Su instalación es muy sencilla
y es multiplataforma. Dentro de Visual Studio, recomiendo instalar las
extensiones HTML Snippets, HTML Bolierplate y Bootstrap4. Para ello
usa el sencillo y amigable gestor de extensiones de VS Code.
El gestor de paquetes, Bower, basado a su vez en NodeJS y NPM. Este
paso no es estrictamente necesario, ya que todas las librerías que
vamos a utilizar están disponibles mediante CDN. No obstante, quien
quiera ejercitarse con gestores de paquetes en desarrollo web de
vanguardia, puede instalar estas herramientas mediante Bower (y para
usar Bower, necesitará instalar NodeJS).
En caso de que querer usar Bower (insistimos: no es obligatorio en esta
práctica), comienza instalando NodeJS. Al hacerlo, instalará el gestor de
paquetes NPM y podremos invocarlo desde cualquier aplicación de línea de
comandos. Lo primero que haremos con NPM es instalar Bower, para lo cual
ejecutaremos el siguiente comando:
que por otro lado, viene bien documentado en su web. Una vez instalado (es
posible que sea necesario reabrir el intérprete de comandos, o ejecutar
refreshenv en el caso del cmd.com de Windows), ya podemos instalar
dependencias de nuestro proyecto.
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:
npm install -g bower1

3. 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
El objeto XMLHttpRequest nos permite hace peticiones AJAX de manera
bastante cómoda. Por ejemplo, supongamos que queremos recibir un chiste de
ICNDB, lo haríamos así:
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.
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 todo su potencial (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).
Para usar el framework Bootstrap, instaladlo previamente con Bower o usad su
CDN oficial. En el caso de instalarlo en local, usad el comando:
y para usarlo, sólo tenéis que apuntar el tag de estilo a donde se encuentre el
CSS de Bootstrap, que normalmente será dentro de la carpeta
bower_components. ¿Para qué sirve la opción --save?
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();
1
2
3
4
5
6
7
8
9
bower install bootstrap4 --save1
<link rel='stylesheet'
href='bower_components/path/al/css/de/bootstrap.css'>
1

4. Resolución del ejercicio en 2006
A principios de 2006 nació jQuery de la mano de John Resig. Todo empezó en
este sencillo e inocente post en su blog. Entre otras muchas cosas increíbles, el
framework jQuery incorpora una nueva instrucción $.ajax(…) muy útil.
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 o instalarla mediante Bower. Como en todas las librerías,
siempre vamos a tener distintas versiones. La mejor manera de dilucidar cuál
es la mejor en nuestro caso es buscando:
Yo sugiero instalar la versión jquery-dist:
En el caso de usar el CDN, sólo tenéis que incluir la URL que deseéis en el
atributo src del tag script.
Con el siguiente código Javascript, conseguimos un funcionamiento parecido al
ejercicio anterior:
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?
Resolución con plugin de jQuery (hasta ~2014)
jQuery no tardó en tener soporte para plugins (¡apenas unas semanas tras su
nacimiento!). Mucha gente empezó a elaborar estos mini-programas 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. En el enlace anterior tienes
acceso a un CDN listo para funcionar. Como anteriormente, sólo tenéis que
usarlo para poblar el atributo src de una etiqueta script.
bower search jquery --save1
bower install jquery-dist --save1
$.get("http://api.icndb.com/jokes/random", (response) => {
var textoChiste = response.value.joke;
$('h1').text(textoChiste);
})
1
2
3
4

5. Para extraer el texto de un norrischiste, simplemente tenéis que ejecutar:
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:
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í.
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 a la jQuery. Se
pide repetir el ejercicio anterior con esta API. Podéis encontrar ejemplos y
descripción de esta función en la documentación de la fundación Mozilla.
Responde a esta pregunta: ¿Qué es el WHATWG? (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.
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:
$.icndb.getRandomJoke((response) => { var textoChiste =
response.joke; });
1
$.icndb.getRandomJokes({
number: 10,
success: (response) => {
response.forEach(element => { $("ul").append('<li>' + element.joke
+ '</li>'); });
}});
1
2
3
4
5
bower install chuck-norris-joke --save1

6. 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), si no de un webcomponent moderno. Para usarlo, se necesita la nueva
directiva import definida en las últimas especificaciones del W3C. En caso de
haberlo instalado mediante Bower, escribiríamos esta línea en nuestra página:
Y en caso de usar Github como CDN, escribiríamos esta:
Ahora, si queremos un chiste de Chuck Norris, sólo tenemos que incluir este
tag en el fichero HTML:
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,
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 o 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. Instalad Skeleton con Bower:
o usad 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.
<link rel="import" href="bower_components/chuck-norris-joke/chuck-
norris-joke.html">
1
<link rel="import"
href="https://raw.githubusercontent.com/erikringsmuth/chuck-norris-
joke/master/chuck-norris-joke.html">
1
<chuck-norris-joke></chuck-norris-joke>1
bower install skeleton-framework --save1

7. Resolución mediante promesas y Async/Await
Usad Promesas (que también encontrarás en la misma documentación de
Fetch) para tener en cuenta si la llamada AJAX funciona o no.
Entregable final
Para considerar el ejercicio entregado se pide un único PDF donde se narre la
resolución del ejercicio completo. 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 yo he usado en este documento.