Descargar como PDF, PPTX
DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración
- 1. Diseño de InterfacesWeb MÓDULO 09
- 2. Elementos multimedia. Creación eintegración UF 02 PREPARACIÓN E IMPLANTACIÓN DE CONTENIDO MULTIMEDIA
- 3. Derechos de lapropiedad intelectual
- 4.
- 6. Tipos de imágenesen la web: Bitmap
- 7. Tipos de imágenesen la web: Bitmap
- 8. Tipos de imágenesen la web II
- 9.
- 10. Software para creary procesar imágenes
- 11. Optimización de imágenespara la web
- 12. Recomendaciones para realizarla optimización • • • • • •
- 13. Herramientas para laoptimización
- 14.
- 15. Compatibilidad de navegadores yformatos de audio.
- 16. Audio en HTML4 • •
- 17.
- 18. Audio en HTML5 <!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>
- 19. Formatos de vídeo •.mp4: • .swf, .flv y .f4v. • .ogg y .ogv. • .mkv: • .webm: • .avi. • .mov.
- 20. Compatibilidad de navegadores ycodecs de video.
- 21. Herramientas gratuitas paraconvertir 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.
- 22. Insertar vídeos enuna 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>
- 23. 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>
- 24. Animación de imágenesy 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.
- 25. Elementos de unaanimació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.
- 26. Elementos de unaanimació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.
- 27. Creación de animaciones Existenmuchas 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:
- 28. Convertir Flash ahtml5 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.
- 29. Animación de imágenes Enla 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.
- 30. Animación de texto Enla 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.
- 31. Audio en lasanimaciones 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.