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>
).
Crear un formulario que contenga lo siguiente:
input
.datalist
, que contenga algunos nombres de provincia y un campo de texto que se relacione con él.<input type="text">
), a la cual aplicar los atributos autofocus
, placeholder
, required
y autocomplete
.<input type="number">
), cuyos valores tienen que estar comprendidos entre 0 y 10.<input type="file">
), al que aplicar el atributo multiple
.<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.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.
Identificar las siguientes características de al menos 4 navegadores (2 de escritorio y 2 de dispositivos móviles):
input
soporta el navegador.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.
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>
data-
de los elementos de la lista, y mostrarlos por consola.es
por es_ES
.data-delete
sea true
.Crear un reproductor de vídeo que cumple las siguientes características:
Añadir una lista de reproducción que permita seleccionar un nuevo vídeo, y éste se reproduzca sin recargar la página.
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:
200px
del ancho y 300px
de alto.100,50
), y un radio de 30px
.#c00
), con inicio de coordenadas (100,50
) y un radio de 20px
.90,45
) y (110,45
) y de radio 3px
.Implementad las siguientes funcionalidades utilizando SessionStorage
y LocalStorage
:
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.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.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:
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.removeTweet
que dado un identificador de tweet, lo elimine de la base de datos. Éste método debe devolver el tweet eliminado.updateTweet
que dado un objeto que corresponde con un tweet, actualice los datos correspondientes al tweet en la base de datos.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.
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:
addTask
que dado un objeto que corresponde con una tarea, lo almacene en la base de datos.removeTask
que dado un identificador de una tarea, lo elimine de la base de datos. Éste método debe devolver la eliminada.updateTask
que dado un identificador de una tarea, actualice los datos correspondientes a la tarea en la base de datos.getTasks
que dado un parámetro booelano completado, nos devuelva las tareas que se encuentran completadas o no.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:
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);
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:
cursor: move;
) y se permite arrastrar el contenido.Posibles mejoras para este ejercicio:
Utilizando los servicios de geolocalización, realizar las siguientes tareas:
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.
Implementar un servicio de chat, utilizando tecnología Web Socket, a partir del código proporcionado, que se describe a continuación.
ws://www.arkaitzgarro.com:1337
.// 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} }