Preparar ficheros multimedia para la web

Desarrollo de Aplicaciones Web

Diseño de interfaces web

 Actividad
Preparar ficheros multimedia para la web

Objetivos
 Reconocer los diferentes tipos de licencias i derechos de autor en el uso de material
multimedia.
 Identificar los formatos de contenidos multimedia que se pueden utilizar en un sitio web.
 Utilizar diferentes aplicativos para la manipulación de los contenidos multimedia.
 Importar y exportar diferentes formatos multimedia.
 Insertar contenidos multimedia en un documento HTML.
 Crear animaciones básicas CSS

¿Cómo lo hago?

1. Rellena los datos que se piden en la tabla “Antes de empezar”.

Pág. 2 de 6
 2. Haz uso de fuentes comunes como Arial, Calibri, Times New Roman etc.
3. Utiliza el color negro para desarrollar tus respuestas y usa otros colores para destacar
contenidos o palabras que creas necesario resaltar.
4. Entrega un zip que contenga todos los archivos que has creado para la actividad. Para poder
aprobar un ejercicio, éste debe poder ejecutarse sin errores.
5. Recuerda nombrar el archivo zip siguiendo estas indicaciones:
 Ciclo_Módulo o crédito_Tema_ACT_número actividad_Nombre y apellido
 Ejemplo: DAW_M09_T02_ACT_02_Maria Garcia

Antes de empezar…
Nombre
Apellidos
Módulo/Crédito
UF (solo ciclos LOE)
Título de la actividad

Pág. 3 de 6
1. Ejercicio sobre licencias:
Accede a la página https://search.creativecommons.org/, busca tres imágenes con tres licencias
distintas.
Rellena la tabla adjunta insertando la imagen en la columna “imagen”, el logo de la licencia en
“licencia Creative Commons” y poniendo sí o no en las columnas referentes a qué permite hacer
la licencia:

Las obras
¿Hay
¿Se pueden derivadas,
Licencia Creative ¿Se pueden usar que
Imagen crear obras ¿deben ser con la
Commons comercialmente? citar al
derivadas? misma licencia
autor?
que la original?

2. Ejercicio de Formato de Imágenes:

2.1. Exporta la imagen NARANJOS.TIFF en formato PNG, GIF y JPG con diferentes calidades y
anota el peso de cada una. ¿Notas alguna diferencia entre ellas a simple vista? Explícalo con
tus palabras.

Tamaño del fichero

TIFF
GIF
PNG
JPG calidad 100%
JPG calidad 50%
JPG calidad 25%

3. Ejercicio de Contenido multimedia:

3.1. Descarga un audio con licencia creative commons. Indica la URL de descarga. A continuación,
ábrelo con el software Audacity, acórtalo a 15 segundos y expórtalo en formato WAV, MP3 y
OGG.
3.2. Crea una web con las tres imágenes JPG de la actividad anterior y los tres audios cada uno
con un título con su peso y su formato. El aspecto de la web debe ser similar a:

Pág. 4 de 6
4. Ejercicio de animaciones CSS:
4.1. Añade con CSS una transición a la primera imagen de tres segundos para que cuando el ratón
se sitúe encima su anchura se reduzca a la mitad y se desplaze 20px hacia la derecha.

4.2. Añade con CSS una animación a la última imagen para que cuando el ratón se sitúe encima:
- Aumente su tamaño un 50%
- Gire 45 grados a la derecha al 25%
- Gire 90 grados a la derecha al 50%
- Gire 45 grados a la izquierda al 75%
- Gire 90 grados a la izquierda al 100%
En las siguientes imágenes se muestra un ejemplo del resultado:

Pág. 5 de 6
Pág. 6 de 6