Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
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.
Entorno de desarrollo
Se utilizó el editor, Visual Studio Code con las extensiones HTML Snippets, HTML
Bolierplate y Bootstrap4 para facilitar y reducir el tiempo del desarrollo.
Implementación
Ejercicio a la manera de 2005
Pasos
1. Creación del fichero chuck2005.html.
2. Se define toda la estructura html y se implementa en el head una función
Javascript llamada obtenerChiste(), que es la encargada de realizar la
conexión AJAX y colocar la frase chiste en el navegador.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
3. Añadimos estilo a la página web con Bootstrap4 mediante un link que se
coloca en la sección del head.
4. Agregamos la sección html para el elemento Jumbotron del framework
Bootstrap y el h1 donde se mostrará el contenido del chiste.
5. Para terminar, agregamos al body el evento onload y llamamos a la función
obtenerChiste, donde obtendrá un chiste cuando la página cargue.
Capturas
Imagen 1: Ejecución del ejercicio a la manera de 2005 en el navegador.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
Imagen 2: Código del ejercicio a la manera de 2005.
Ejercicio a la manera de 2006
Pasos
1. Creación del fichero chuck2006.html.
2. Declaramos una función para que contenga el código de ejemplo, la
llamaremos obtenerChiste().
3. Añadimos los recursos jQuery en su versión 1.4 donde se incluye el método
$.get() para realizar la conexión AJAX y el framework Bootstrap4 para aplicar
el estilo al ejercicio.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
4. Agregamos la sección html para el elemento Jumbotron del framework
Bootstrap y un elemento h1 donde se mostrará el contenido del chiste, luego
se agregarán varios elementos h1.
5. Para terminar, agregamos al body el evento onload y llamamos a la función
obtenerChiste, donde obtendrá uno o varios chistes cuando la página cargue.
Capturas
Imagen 3: Ejecución del ejercicio a la manera de 2006 en el navegador.
Imagen 4: Ejecución del ejercicio usando varios h1
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
Imagen 5: Código del ejercicio a la manera de 2006.
¿Qué diferencias ves con respecto al ejercicio anterior?
En el ejercicio anterior para realizar la conexión AJAX no se tuvo que utilizar
una referencia a librerías externas, porque el objeto XMLHttpRequest está
incorporado en la mayoría de los navegadores de forma nativa, mientras que
para utilizar la conexión AJAX por medio de jQuery se tiene que referenciar a
la librería previamente.
Se reduce el número de líneas de código utilizando jQuery porque la librería
a implementado una serie de métodos que encapsulan la conexión AJAX
nativa y la interacción con el DOM.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
¿Cómo simplifica la vida jQuery?
Por medio de su sintaxis que es fácil de implementar al momento de dar
interactividad a un sitio, gracias a gran cantidad de métodos simples que manipulan
el DOM en tareas comunes como la selección de elementos para cambiar su
contenido, aplicar estilos, realizar conexiones AJAX, entre otros.
¿Qué ocurre si tenemos varios tags h1?
La frase chiste se muestra tantas veces como tags h1 existan en la página, esto es
debido a que jQuery selecciona todos los elementos h1 por medio de $(‘h1’) y les
coloca el texto del chiste con el método .text().
Plugin de jQuery (hasta 2014)
Pasos
1. Creación del fichero chuckplugin2014.html.
2. Declaramos una función para que contenga el código de ejemplo, la
llamaremos obtenerChiste().
3. Añadimos los recursos jQuery y Bootstrap4 como lo hicimos en el primer
ejercicio. Pero esta vez agregamos un tercer script al head jquery.icndb.min.js
para acceder al API del ICNDB. Usamos la versión min porqué versión
comprimida y optimizada.
4. Para terminar, agregamos al body el evento onload, para que cuando se
cargue la página se ejecute el código para obtener el chiste.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
Capturas
Imagen 5: Ejecución del ejercicio usando el plugin de jQuery.
¿Cómo se escribían las funciones en las versiones de ECMAScript previas a la versión
6?
Antes de la versión ES6 la forma de declarar una función era usando la palabra
reservada function mientras que en las versiones superiores a ésta como la ES6 se
comenzó a usar funciones fechas o arrow con el fin de utilizar funciones anónimas de
forma cómoda y haya menos redundancia.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
Resolución en 2014
Pasos
1. Creación del fichero chuck2014.html.
2. Declaramos una función para que contenga el código usando fetch para
obtener el chiste desde el API, la llamaremos obtenerChiste().
3. Agregamos la referencia a la librería jQuery.
4. Para terminar, agregamos al body el evento onload, para cuando se cargue la
página se ejecute el código y obtener el chiste.
Capturas
Imagen 6: Ejecución del ejercicio usando API fetch.
Imagen 7: Código del Ejercicio usando API fetch.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
Resolución en 2014 con node-fetch
Pasos
1. Instalación el entorno de ejecución para JavaScript llamado Node.js.
2. Instalación del paquete node-fetch con npm install node-fetch --save
3. Creación del fichero chuck2014-nodefetch.js, que contiene el uso del método
fetch para obtener el chiste desde la url.
4. Ejecutamos el código en una terminal ubicándonos en el directorio del archivo
y escribimos node chuck2014-nodefetch.js.
Imagen 8: Ejecución del ejercicio usando node-fetch.
Imagen 9: Código del ejercicio usando node-fetch.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
¿Qué es el WHATWG?
El Web Hypertext Application Technology Working Group (WHATWG), es una
comunidad de personas y empresas interesadas en la evolución de HTML y las
tecnologías conexas. Fue fundado por integrantes de Apple, la Fundación Mozilla y
Opera Software en 2004 [1].
Resolución del ejercicio con Web Components (presente)
Pasos
1. Instalamos el web component de chuck-norris-joke ejecutando el comando:
bower install chuck-norris-joke --save. Esto crea una directiva llamada
bawer_components donde coloca todos los componentes instalados por
bower, en este caso tenemos la directiva chuck-norris-joke que contiene dos
archivos chuck-norris-joke.html que representa el componente y demo.html
que representa la pagina donde se incova al componente chuck-norris-joke.
2. Para ejecutar la página demo.html utilizaremos el servidor http-server, para
ellos lo instalamos con el comando npm install http-server -g. Luego nos
dirigimos en consola a la ubicación del archivo demo.html en
bower_components/chuck-norris-joke/ y ejecutamos http-server, esto
despliega un servidor, abrimos el navegador y colocamos
http://127.0.0.1:8080/demo.html(10).
3. Para el uso de Web Components vía CDN GitHub se creó el fichero
chuckwebcomponent.html, donde se incluye en la estructura html, la
directiva(import) del componente en github CDN y el tag de apertura y cierre
<chuck-norris-joke></chuck-norris-joke>.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
4. Para la aplicación del framework Skeleton se ejecuto el comando bower
install skeleton-framework –save, donde este creó una estructura de
proyecto skeleton-framework dentro de la directiva bower_components, se
editó el archivo skeleton-framework/dist/index.html agregando una tabla con
el estilo propio de skeleton <link rel="stylesheet" href="skeleton.css"> y
donde cada fila representa un chiste (14).
5. La ejecucion del ejemplo fue con un doble click ya que se usa el Web
Components Chuck Norris desde la CDN de GitHub.
Capturas
Imagen 10: Ejecución del ejercicio usando Web Components (Local).
Imagen 11: Ejecución del ejercicio usando Web Components (CDN GitHub).
Imagen 12: Código del ejercicio usando Web Components (CDN GitHub).
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
Imagen 13: Ejecución del ejercicio usando Web Components(CDN GitHub) y
framework Skeleton.
Imagen 14: Código del ejercicio usando Web Components (CDN GitHub) y
framework Skeleton.
Tema 5. Actividades
Asignatura Datos del alumno Fecha
GABRIEL ROMERO MORA
Computación en el KATTYA DESIDERIO SÁNCHEZ
01/01/2020
Cliente Web JESÚS DE LA PISA ARRIBAS
OSCAR SÁNCHEZ CUTILLAS
Bibliografía
1- Shappir, D. (2012). U.S. Patent Application No. 13/414,735.
Tema 5. Actividades
