Preparar ficheros multimedia para la 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

Pág. 2 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
derivadas,
Licencia que pueden
¿Se pueden usar ¿deben ser
Imagen Creative citar crear
comercialmente? con la misma
Commons al obras
licencia que
autor? derivadas?
la original?

No Sí Sí No

No Sí No No

Sí Sí Sí Sí

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 33,2 MB
GIF 7,3 MB
PNG 17,4 MB
JPG calidad 100% 17,4 MB
JPG calidad 50% 2,2 MB
JPG calidad 25% 1,4 MB

Pág. 3 de 6
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 3 segundos y expórtalo en formato WAV, MP3 y
OGG.

https://uppbeat.io/
• Original à 4,8 MB
• WAV à 2,7 MB
• MP3 à 337 KB
• OGG à 276 KB

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:

Documentos adjuntos: index.html y index.css

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.

Pág. 4 de 6
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