Capítulo 18 Ejercicios

18.1 Capítulo 2

18.1.1 Ejercicio 1

Dada la siguiente página web, estructurada en XHTML, aplicar las nuevas etiquetas semánticas de HTML5 donde sea conveniente, manteniendo el mismo aspecto visual (modificar la hoja de estilos si es necesario) y funcionalidad. Realizad también los cambios necesarios en la cabecera del documento (elemento <head>).

Descargar página web.

18.2 Capítulo 3

18.2.1 Ejercicio 2

Crear un formulario que contenga lo siguiente:

  • Los 12 nuevos tipos de elementos input.
  • El nuevo elemento datalist, que contenga algunos nombres de provincia y un campo de texto que se relacione con él.
  • Una caja de texto (<input type="text">), a la cual aplicar los atributos autofocus, placeholder, required y autocomplete.
  • Una caja de texto que sólo pueda contener números (<input type="number">), cuyos valores tienen que estar comprendidos entre 0 y 10.
  • Un campo de selección de ficheros (<input type="file">), al que aplicar el atributo multiple.
  • Un campo de introducción de password (<input type="password">), donde el valor introducido debe cumplir lo siguiente: debe tener una longitud mínima de 8 caracteres, comenzar por un número y terminar en una letra mayúscula.
  • Un nuevo elemento progress que represente el avance de completado de campos del formulario.

Acceder al formulario desde al menos 4 navegadores (2 de escritorio y 2 de dispositivos móviles), y comprobad el comportamiento y funcionamiento en cada elemento del formulario. Anotad dichos resultados en una hoja de cálculo para futuras referencias.

18.3 Capítulo 4

18.3.1 Ejercicio 3

Identificar las siguientes características de al menos 4 navegadores (2 de escritorio y 2 de dispositivos móviles):

  • Cuáles de los 12 nuevos tipos de input soporta el navegador.
  • Qué codecs de reproducción de vídeo soporta cada navegador.
  • Qué sistema(s) de almacenamiento local soporta cada navegador.

18.3.2 Ejercicio 4

Identificar si el navegador soporta el atributo placeholder. En caso de no soportar dicha funcionalidad, cargar el polyfill correspondiente para añadir dicha funcionalidad al navegador.

18.4 Capítulo 5

18.4.1 Ejercicio 5

A partir del siguiente HTML, realizar los siguientes pasos:

<ul>
    <li class="user" data-name="Arkaitz Garro" data-city="Donostia"
        data-lang="es" data-food="Txuleta">Arkaitz Garro</li>
    <li class="user" data-name="John Doe" data-city="Boston"
        data-lang="en" data-food="Bacon">John Doe</li>
    <li class="user" data-name="Divya Resig" data-city="Tokyo"
        data-lang="jp" data-food="Sushi" data-delete="true">Divya Resig</li>
</ul>
  • Obtener cada uno de los atributos data- de los elementos de la lista, y mostrarlos por consola.
  • Modificar el idioma es por es_ES.
  • Eliminar los elementos de la lista cuyo atributo data-delete sea true.

18.5 Capítulo 6

18.5.1 Ejercicio 6

Crear un reproductor de vídeo que cumple las siguientes características:

  • Reproducir los vídeos independientemente del codec soportado por el navegador.
  • Incluir controles de reproducción, pausa, parar, avanzar y retroceder 10 segundos, inicio y fin.
  • Control de volumen y paso a pantalla completa.
  • Un indicador de progreso de la reproducción.

Añadir una lista de reproducción que permita seleccionar un nuevo vídeo, y éste se reproduzca sin recargar la página.

Aspecto final del reproductor

Figura 18.1 Aspecto final del reproductor

18.6 Capítulo 7

18.6.1 Ejercicio 7

Dibujar sobre un elemento canvas, un stickman con un aspecto final similar al que se muestra a continuación. Seguir las siguiente indicaciones como ayuda:

  • El tamaño inicial del canvas es de 200px del ancho y 300pxde alto.
  • Utilizar un rectángulo negro para pintar todo el fondo del canvas.
  • Dibujar la cabeza con un arco completo, en las coordenadas (100,50), y un radio de 30px.
  • La sonrisa corresponde con un semiarco rojo (#c00), con inicio de coordenadas (100,50) y un radio de 20px.
  • Los ojos son dos circunferencias rojas situadas en las coordenadas (90,45) y (110,45) y de radio 3px.
Resultado final del stickman

Figura 18.2 Resultado final del stickman

18.7 Capítulo 8

18.7.1 Ejercicio 8

Implementad las siguientes funcionalidades utilizando SessionStorage y LocalStorage:

  • Crear una caja de texto, a modo de editor de contenidos, y utilizando SessionStorage almacenar el contenido de la caja en cada pulsación de tecla. Si la página es recargada, el último contenido almacenado debe mostrarse en la caja de texto. Comprobad que cerrando la pestaña actual, o abriendo una nueva ventana, los datos no se comparten.
  • Modificar el código anterior para utilizar LocalStorage. Comprobad que en este caso, aunque cierre la ventana o abra una nueva, los datos se mantienen. Añadir la posibilidad de actualizar el resto de ventanas abiertas, cada vez que se modifique el valor de la caja de texto en cualquiera de ellas.

18.7.2 Ejercicio 9

Crear un objeto que encapsule una base de datos WebSQL, que nos permitar acceder a una base de datos para añadir, modificar, eliminar y obtener registros. Dicha base de datos va a almacenar tweets procedentes de Twitter, que tienen asociado el hashtag #html5. Los requisitos son los siguientes:

  • Disponer de una tabla para almacenar los tweets. Los campos mínimos son: identificador del tweet, texto, usuario, y fecha de publicación.
  • Disponer de una tabla para almacenar los usuarios que publican los tweets. Esta tabla debe estar relacionada con la anterior. Los campos mínimos son: identificador del usuario, nombre e imagen.
  • Crear un método addTweet que dado un objeto que corresponde con un tweet, lo almacene en la base de datos. Almacenar el usuario en caso de que no exista, o relacionarlo con el tweet si existe.
  • Crear un método removeTweet que dado un identificador de tweet, lo elimine de la base de datos. Éste método debe devolver el tweet eliminado.
  • Crear un método updateTweet que dado un objeto que corresponde con un tweet, actualice los datos correspondientes al tweet en la base de datos.
  • Crear un método getTweets que dado un parámetro de fecha, me devuelva todos los tweets posteriores a esa fecha. Cada tweet debe incluir sus datos completos y el usuario que lo creó.

Obtener los últimos 25 tweets que tienen como hashtag #html5 de la siguiente consulta a Twitter: http://search.twitter.com/search.json?q=%23html5&rpp=25&result_type="recent"

Consultad la API de Twitter para identificar el formato del resultado, nombres de campos, etc.

18.7.3 Ejercicio 10

Crear un objeto que encapsule una base de datos IndexedDB, que nos permitar acceder a una base de datos para añadir, modificar, eliminar y obtener registros. Dicha base de datos va a almacenar una sencilla lista de tareas pendientes. Los requisitos son los siguientes:

  • Disponer de un almacén de tareas pendientes. Sus propiedades son: un identificador único que actúa como índice, el texto descriptivo, una propiedad que nos indique si la tarea está completada o no y la fecha/hora de creación.
  • Crear un método addTask que dado un objeto que corresponde con una tarea, lo almacene en la base de datos.
  • Crear un método removeTask que dado un identificador de una tarea, lo elimine de la base de datos. Éste método debe devolver la eliminada.
  • Crear un método updateTask que dado un identificador de una tarea, actualice los datos correspondientes a la tarea en la base de datos.
  • Crear un método getTasks que dado un parámetro booelano completado, nos devuelva las tareas que se encuentran completadas o no.

18.8 Capítulo 9

18.8.1 Ejercicio 11

Cread una página HTML que muestre la hora local de vuestro ordenador, y la hora del servidor de www.google.es. Los cálculos de hora local y obtención de hora del servidor, deben crearse en ficheros separados. El comportamiento es el siguiente:

  • Todos los ficheros necesarios para realizar el ejercicio deben ser cacheados, a excepción del javascript que solicita la petición al servidor.
  • Las peticiones de hora al servidor www.google.es se realizan a través de Ajax, en intervalos de 1 segundo. Dichas peticiones no deben realizarse si no existe conexión. En tal caso, se muestra un mensaje al usuario indicando que se ha perdido la conexión.
  • Si se recarga la página, y no existe conexión, utilizar un fallback para la obtención de la hora del servidor, que muestre un mensaje al usuario indicando que se ha perdido la conexión.
Resultado del ejercicio con conexión

Figura 18.3 Resultado del ejercicio con conexión

Resultado del ejercicio sin conexión

Figura 18.4 Resultado del ejercicio sin conexión

Utilizad el siguiente código para obtener la hora de un servidor:

function srvTime(url){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open('HEAD',url,false);
    xmlHttp.setRequestHeader("Content-Type", "text/html");
    xmlHttp.send(null);
    return xmlHttp.getResponseHeader("Date");
}
 
var st = srvTime("https://www.google.es/");
var date = new Date(st);

18.9 Capítulo 10

18.9.1 Ejercicio 12

Implementar un carrito de la compra que permita arrastrar los productos a la cesta, y calcule el precio total de la compra. El proceso es el siguiente:

  • Al pasar con el ratón sobre una imagen, el puntero cambia de aspecto (cursor: move;) y se permite arrastrar el contenido.
  • Al arrastrar el elemento, la zona que contiene la cesta de la compra se ilumina.
  • Al soltar la imagen sobre la cesta de la compra, añade el producto si no existía, mostrando la imagen, el nombre del producto, la cantidad de productos en la cesta (en este caso 1) y el coste total para ese producto.
  • Al soltar la imagen sobre la cesta de la compra, si el producto ya se encontraba en la cesta, actualiza la cantidad de productos y su precio.

Posibles mejoras para este ejercicio:

  • Añadir la posibilidad de eliminar los productos de la cesta de la compra, arrastrándolos desde la propia cesta y soltándolos en cualquier parte de la página. En este caso, mostraríamos un mensaje de confirmación de eliminación del producto.
  • Mantener una persistencia de datos para la cesta de la compra, que el actualizar la página no se pierdan los productos introducidos.

Descargar sitio web.

Aspecto inicial de la cesta de la compra

Figura 18.5 Aspecto inicial de la cesta de la compra

18.10 Capítulo 11

18.10.1 Ejercicio 13

Utilizando los servicios de geolocalización, realizar las siguientes tareas:

  • Solicitar las coordenadas actuales, y mostrar dichas coordenadas (y la precisión) tanto en formato texto como un punto en el mapa.
  • Haciendo uso del entorno de desarrollo de Android (emulador y SDK) y la herramienta DDMS, indicar al dispositivo una posición GPS concreta. Posteriormente, modificar la implementación para solicitar continuamente la posición del dispositivo. En la herramienta DDMS, utilizar el fichero de rutas GPX que se proporciona y mostrar cada nuevo punto en el mapa.

Descargar sitio web.

Posición actual en el mapa

Figura 18.6 Posición actual en el mapa

18.11 Capítulo 12

18.11.1 Ejercicio 14

Crear un Web worker que dado un número entero, calcule todos los números primos comprendidos entre 1 y dicho número.

Proporcionaremos a este Worker un número entero, y devolverá un array con todos los números primos encontrados. Mostrar el listado de números primos en el documento principal.

Resultado tras calcular los números primos

Figura 18.7 Resultado tras calcular los números primos

18.12 Capítulo 13

18.12.1 Ejercicio 15

Implementar un servicio de chat, utilizando tecnología Web Socket, a partir del código proporcionado, que se describe a continuación.

  • Se dispone de un servidor de chat, basado en Node.js, al cual deben conectarse los usuarios del chat. La dirección del servidor es ws://www.arkaitzgarro.com:1337.
  • Se proporciona la interfaz básica (HTML y JavaScript) para desarrollar la aplicación. Es necesario implementar la conexión con el servidor y el intercambio de mensajes, así como la actualización de la interfaz.
  • El protocolo de mensajes es el siguiente:
    • El primer mensaje a enviar al servidor es el nick. Tomad el valor de la caja de texto y enviarla al servidor como una cadena de texto.
    • Una vez estamos "registrados" en el servidor, éste puede comenzar a enviarnos mensajes, tanto los existentes hasta el momento, como los nuevos que se produzcan por otros usuarios. Estos mensajes (en formato JSON) corresponden con un objeto JavaScript, cuya estructura se muestra a continuación.
    • Finalmente, para enviar los mensajes de texto del usuario, enviamos la cadena de texto directamente al servidor.
// Mensaje de tipo "color"
{
    type : "color",
    data : "" // Valor del color asignado por el servidor
}
 
// Mensaje de tipo "history"
{
    type : "history",
    // Un array que contiene los últimos mensajes enviados
    data : [{author, text, color, time}]
}
 
// Mensaje de tipo "message"
{
    type : "message",
    // Un objeto que contiene un mensaje enviado por otro usuario
    data : {author, text, color, time}
}

Descargar sitio web.

Resultado final del chat

Figura 18.8 Resultado final del chat

Índice de contenidos