Boletn de actividades 4. Tema 2 HTML5.

1. Formularios.

Crear un formulario como el de la imagen. Aadir estilos modificar la apariencia de los

elementos y para que se resalten los campos que sean obligatorios.

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 1

 Boletn de actividades 4. Tema 2 HTML5.

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 2

 Boletn de actividades 4. Tema 2 HTML5.

2. Vdeo en HTML5.

Utilizar las funciones de HTML5 para integrar vdeo dentro de una pgina. Crear una pgina
donde se inserte un mismo vdeo en diferentes formatos para que pueda ser visualizado en
varias plataformas. El vdeo tendr controles propios para su reproduccin y cuando se finalice
se reiniciar automticamente de nuevo. Aadirle una imagen inicial que ser la que aparezca
cuando se cargue hasta que se inicie la reproduccin. Podis utilizar el vdeo small.

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 3

 Boletn de actividades 4. Tema 2 HTML5.

3. Vdeo con CSS.

A continuacin le aadiremos un estilo al vdeo. Para ello modificaremos la apariencia del
vdeo crendole un marco con borde de algn color, esquinas redondeadas y con sombra
(imagen 1). Adems definiremos el aspecto de dicho marco cuando se sita el ratn sobre l
(hover) ponindoles una sombra de otro color (imagen 2)

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 4

 Boletn de actividades 4. Tema 2 HTML5.

4. Vdeo con subttulos. El formato .vtt nos permite crear subttulos en un fichero de texto
plano donde se pone una cabecera y a continuacin se van aadiendo tramos de tiempo y el
texto subtitulado que aparece.
WEBVTT FILE

00:00:00.000 --> 00:00:05.000

<p>Probamos un fichero con subtitulos.</p>

00:00:05.000 --> 00:00:10.000

<p>Anda, si salen!!.</p>

En HTML5 podemos aadir tracks de subttulos a los vdeos. Crear un fichero de subttulos
propios para un vdeo y el cdigo HTML5 para visualizarlo. Recordad que para que se visualicen
los tracks es necesario subirlo a un servidor. Podis utilizar alguno de los vdeos
proporcionados para aadirle los subttulos, o alguno propio.

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 5

 Boletn de actividades 4. Tema 2 HTML5.

5. Controles de audio mediante el DOM.

Crear una pgina web con cinco botones que permitan controlar la reproduccin de un sonido.

Los botones sern para: play, pausa, stop, aumentar volumen y disminuir volumen.

Cuando se inicia la pgina el botn de play es el nico activo. Cuando se pulsa el botn de play
se activan los dems. Cuando se pulsa el botn stop se vuelven a desactivar todos excepto el
play.

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 6

 Boletn de actividades 4. Tema 2 HTML5.

6. Drag & Drop.

Utilizando las funciones de drag&drop de HTML5 crear una pgina en la que aparecen 3 capas
con diferentes colores que es posible arrastrar y copiar a otra posicin para seleccionar un
color.

Cuando se seleccione una de las capas a arrastrar y mientras se est moviendo dicha capa se
modificar su apariencia (ser un poco transparente y con el borde negro) como en la
siguiente imagen:

Al soltar sobre la capa de abajo en ste se colgar la capa de arriba clonada, de forma que en
la parte superior sigan estando las capas originales:

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 7

 Boletn de actividades 4. Tema 2 HTML5.

7. Geoposicionamiento.

Utilizad el API de Google Maps y las funciones de Geolocalizacin de HTML5 para insertar en
una pgina un mapa de google de forma que al cargarse aparezca centrado en la ubicacin del
usuario. El mapa debe aparecer en una capa de tamao 500 X 500 px.

Para aseguraros el correcto funcionamiento dependiendo de la conexin de red que tengamos

slo funcionar si subimos la pgina al servidor.

Para insertar el mapa se puede coger de base el ejemplo de la pgina:

https://developers.google.com/maps/documentation/javascript/tutorial?hl=es

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 8

 Boletn de actividades 4. Tema 2 HTML5.

Programacin Multimedia. Ingeniera Multimedia. Universitat de Valncia. 9