DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración

Diseño de Interfaces Web
MÓDULO 09

Elementos multimedia.
Creación e integración
UF 02
PREPARACIÓN E IMPLANTACIÓN DE
CONTENIDO MULTIMEDIA

Derechos de la propiedad intelectual

Tipos de imágenes en la web: Bitmap

Tipos de imágenes en la web II

Software para crear y procesar imágenes

Optimización de imágenes para la web

Recomendaciones para realizar la optimización
•
•
•
•
•
•

Herramientas para la optimización

Formatos de audio
•
•
•
•
•

Compatibilidad de navegadores
y formatos de audio.

Audio en HTML 5
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio controls=”controls” preload=”auto”>
<source src=”Prueba.mp3” type=”audio/mpeg” />
<source src=”Prueba.ogg” type=”audio/ogg” /> El
navegador no soporta el audio
</audio>
</body>
</html>

Formatos de vídeo
• .mp4:
• .swf, .flv y .f4v.
• .ogg y .ogv.
• .mkv:
• .webm:
• .avi.
• .mov.

Compatibilidad de navegadores
y codecs de video.

Herramientas gratuitas para convertir video.
• Miro Video Converter: utilidad sencilla para convertir cualquier
formato de vídeo, incluso OGV y WEBM.
• FreeStudio: es una potente herramienta que no solo trabaja en
formatos de vídeo, sino que también con audio e imagen. Solo tiene
versión para Windows.
• AtubeCatcher: además de poder convertir archivos en muchos
formatos, nos da la posibilidad de descargar vídeos desde distintos sitios
web, como YouTube, Google Videos o Vimeo.

Insertar vídeos en una web
Para insertar vídeos en nuestra web tenemos las mismas opciones que
con el audio. En este caso, en HTML5 disponemos de la etiqueta <video>,
que tendrá los mismos atributos que tenía la etiqueta <audio>, y
podemos también ofrecer controles con Javascript.
La diferencia entre las dos etiquetas es que para el vídeo necesitaremos
asignarle un tamaño, por lo que tendrá los atributos height (alto) y width
(ancho).
Un ejemplo sería:
<video poster= “imagen/fondo.png” src=”misvideos/receta.
mp4” controls width=”460” height=”230”></video>

Vídeos enlazados
No será necesario que tengamos almacenado siempre el archivo de
vídeo para insertarlo en la web, ya que también podemos enlazar
vídeos de distintas webs, como de YouTube. En estos casos, los vídeos
disponen de un enlace para insertarlos en páginas web usando
la mayoría de las veces la etiqueta <iframe>.
Un ejemplo puede ser:
<iframe id="player" type="text/html" width="640" height="360"
src="http://www.youtube.com/embed/M7lc1UVfVE?enablejsapi=1&origin=http://exa
mple.com" frameborder="0"></iframe>

Animación de imágenes y texto
Una animación es un proceso utilizado para dar la sensación de
movimiento a imágenes o dibujos. Los cuadros se pueden generar
dibujando, pintando o fotografiando los minúsculos cambios hechos
repetidamente a un modelo de la realidad o a un modelo tridimensional
virtual.
Podemos utilizar varios formatos de archivo para el uso de animaciones,
por ejemplo, GIF, SVG, SWF o MNG.

Elementos de una animación
Toda animación tiene dos tipos de elementos que se complementan
entre sí: los objetos gráficos y los elementos propios de
la animación.
• Objetos gráficos: representan cada uno de los fotogramas.
Permanecerán inmóviles en cada uno de ellos. Se encargan de
las características.
• Elementos propios de la animación: representan cambios en los
objetos a lo largo de los fotogramas. Se encargan del diseño.

Creación de animaciones
Existen muchas herramientas para crear animaciones, pero nos
centraremos en las dos que más se utilizan actualmente:
1. HTML y Javascript
2. HTML5, CSS3 y Javascript
Se trabajará en el siguiente tema.
Además existen herramientas gráficas
para este fin:
◦ Adobe Edge:
◦ Hype:
◦ Sencha:

Convertir Flash a html5
Debido a que muchas aplicaciones Flash no pueden verse representadas
en los navegadores actuales, debemos hacer uso de aplicaciones
que conviertan esos ficheros Flash en formato .fla o .swf a HTML5.
Algunas herramientas que podemos utilizar para ello son:
• Wallaby: programa de Adobe para convertir archivos .fla a HTML5.
• Swiffy: aplicación de Google completamente gratuita que nos
permite convertir archivos .swf a HTML5.

Animación de imágenes
En la creación de animaciones con imágenes debemos saber cuándo
utilizar un tipo de animación u otro y después saber cómo se
realiza cada animación.
Cabe destacar dos tipos de animaciones: fotograma a fotograma
y por interpolación de fotogramas.

Animación de texto
En la publicidad suelen usarse tipos de animaciones en las que el
texto cambia de forma o de color, o va sufriendo transformaciones.
A la hora de crear una animación, un texto es otro objeto más.
A la hora de trabajar con texto hay que tener en cuenta las siguientes
características:
• Posición.
• Tamaño.
• Carácter.
• Párrafo.

Audio en las animaciones
Los formatos de audio más utilizados a la hora de crear animaciones
son WAV y MP3.
Tenemos varias opciones de sincronización de audio:
• Sincronismo de tipo Evento: el sonido se reproducirá de forma automática y
hasta el final. Se pueden producir solapamientos de sonidos.
• Sincronismo de tipo Inicio: es casi idéntico al anterior, solo que evita la
duplicidad del sonido.
• Sincronismo de tipo Detener: impide que el sonido se reproduzca más allá del
fotograma que indiquemos.
• Sincronismo de tipo Flujo: el archivo de sonido se irá descargando de internet
conforme se va reproduciendo la animación.

DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración

DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración

Recomendados

Recomendados

Más contenido relacionado

Similar a DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración

Similar a DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración (20)

DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración