TMM Tema6 Presentacion Integracion Medios Digitales PDF

Integracin multimedia en Web:
Integracin de medios con

herramientas de autora Web y
propietarias
Pablo Losada de Dios
15 de Enero de 2007
Departamento de Ingeniera Elctrica, Electrnica y de Control
ETSI Industriales UNED http://www.ieec.uned.es
Mster en Ingeniera de la Web 2
ndice
Introduccin, Multimedia en la Web
Inclusin de multimedia con herramientas de
autora Web
Procesos y tcnicas para la optimizacin de
imgenes para la Web
Imgenes en HTML
Grficos vectoriales
Procesos y optimizacin de imgenes con Fireworks
Tecnologas y Plataformas para introducir multimedia en la
Web
Applets de JAVA
Tecnologa FLASH
Tecnologa y plataforma QuickTime
Estndares, formatos y compresin de video digital
Audio y vdeo continuo, Streaming
Sesin prctica
Contexto
Conocemos las necesidades multimedia del sitio
Conocemos las caractersticas del medio Internet y
sus limitaciones
Conocemos las herramientas para navegar por
Internet y sus limitaciones a la hora de reproducir
contenidos mulimedia.
Necesitamos conocer tecnologas y formatos para
optimizar y visualizar contenidos multimedia.
Tenemos la necesidad de aplicaciones que
optimicen la integracin y los tiempos de trabajo
Objetivos
Conocer las caractersticas de los elementos
multimedia que se pueden integrar en pginas Web
Conocer las tcnicas de optimizacin de contenidos
multimedia.
Conocer tecnologas y formatos que permiten
introducir contenidos multimedia pesados en
pginas Web.
Conocer plataformas que permiten reproducir
contenidos multimedia de manera integrada con los
navegadores
Conocer como soporta HTML la integracin de
medios
Conocer que aportan las herramientas de autora
Web a la integracin de los medios digitales
Insercin de medios digitales en Web
Problemtica de incorporar multimedia en la
Web
El cuello de botella , el ancho de banda de los canales de
comunicacin
Problemas con grficos alta resolucin, audio y vdeo
Soluciones
Incremento de los anchos de banda ADSL
Compresin y tcnicas de streaming
Uso de caches locales
Creacin de conexiones alternativas para diferentes anchos
Cmo se muestra multimedia en la Web?
Incorporada directa
Incorporada, medios digitales que las herramientas
de navegacin soportan directamente
Aplicaciones de Ayuda
Aplicaciones de Ayuda, aplicaciones externas al
navegador
Multimedia incorporada
Conectores de software, Plug-ins para Netscape
Objetos Active X para Microsoft Explorer
Lenguajes de programacin script, Javascript y Vbscript
Multimedia JAVA, Applets
MIME
Estndar para identificar el contenido
multimedia
Tipos y subtipos
text/plain
Si se quiere ofrecer contenido multimedia en
un centro Web, se debera asegurar que:
Los archivos multimedia poseen la extensin de
nombre de archivo correcta.
El servidor est configurado para asociar estas
extensiones con un determinado tipo MIME.
Relacin entre el tipo multimedia con la forma
de reproduccin que elige el navegador
Etiquetas HTML para contenidos multimedia
Etiqueta EMBED
Para incluir archivos de audio y vdeo que
necesiten un conector de software para
reproducirlos el navegador
Sintaxis
<embed atributo1="valor1" "...atributoN="valorN"></embed>
Atributos
Apariencia: ALIGN, BORDER HEIGHT y WIDTH, HIDDEN
Funcionales: AUTOSTART, LOOP, CONTROLS
Identificativos: NAME, SRC
Conector: PLUGINSPACE
Etiqueta BGSOUND
Sonido de fondo compatible Internet Explorer
Sintaxis: <BGSOUND SRC="fichero_de_sonido" LOOP=n>
Insertar audio y vdeo con hipervnculos
Llamar a al reproduccin de un archivo de audio a travs de
la etiqueta <A HREF>
Necesidad de reproductores externos
Windows Media
Real Audio y Real Vdeo
Utilizado en formatos de audio y vdeo continuo o
comprimido
Audio: wma, mp3, ra
Vdeo: wmv, avi, mpeg, mpg, mp4, rv
Etiqueta OBJECT
Normalizar la inclusin de ficheros no nativos en los
navegadores
Sustituir las diferentes etiquetas que realizaban este papel
(APPLET, BGSOUND, EMBED, etc.), y que fuera capaz de
incrustar en el navegador todo tipo de ficheros.
Elementos PARAM que especifican parmetros del objeto y
otros elementos HTML que solo sern interpretados por los
navegadores que no soporten el elemento OBJECT.
Atributos, similares a EMBED destacando
DATA, la URL o localizacin del objeto incrustado
CLASSID, URL del programa cuya ejecucin crear el objeto
CODEBASE, URL donde se pueden encontrar bibliotecas de
clases requeridas por el programa
CODETYPE, tipo MIME del cdigo referenciado por CLASSID
Inclusin de animaciones
Dos tipos de animaciones
Animaciones gif, soportadas por los navegadores
Se insertan como imgenes <IMG>
Animaciones vectoriales swf, necesitan conector
de software para reproducirse de forma incrustada
en el navegador
Se insertan con las etiquetas <EMBED> o <OBJECT>
Permiten incluir otros medios digitales, audio, vdeo e
incluso interactividad y dinamismo.
Se construyen con tecnologa Macromedia Flash en
formato nativo .fla, aunque se pueden construir
animaciones con otros programas como Director, Swish,
etc
Inclusin de programacin script
Programacin orientada objeto-evento
interpretada por el navegador
Sintaxis: Etiqueta HTML para incluir el cdigo del
programa incrustado en la pgina
<SCRIPT LANGUAJE=Javascript(Vbscript)></SCRIPT>
Usos de lenguajes script
Alarmas, generar mensajes que aparecen cuando el visitante hace algo,
por ejemplo, antes de entrar en una pgina.
Calendarios, relojes...
Cajas de texto independientes del resto de la pgina
Formularios para correo electrnico, por ejemplo para preparar una
encuesta.
Efectos de audio y de imagen: cambio de color del fondo.
Efectos con las imgenes: cambio al pasar el ratn, imgenes que van
cambiando (no animaciones),
Posibilidad de cambiar el aspecto de una pgina para hacerla ms
accesible.
Inclusin de programas applet de Java
Programas escritos en Java que residen en el servidor Web y
que se ejecutan en la mquina del usuario a travs de la
Mquina virtual Java que instalan los navegadores
Permiten al programador realizar animaciones interactivas
con el usuario con inclusin de sonidos y vdeos.
En el servidor cdigo precompilado archivo .class
Sintaxis: inclusin con la etiqueta
<APPLET CODE=nombre.class ATRIBUTOS> </APPLET>
<PARAM NAME=nombre_del_parmetro VALUE="contenido_del_parmetro">
Los parmetros permiten configurar el funcionamiento y
visualizacin del applet en la pgina
Extensiones de posicin, LAYER y DIV
Permiten posicionar los objetos dentro de la pgina Web de
manera ms exacta
Etiqueta <DIV>
Sintaxis, <DIV id =" nombre " style =".........."></DIV>
Propiedades (dentro de style)
Position, Left y Top, Width y Height
Overflow, La propiedad OVERFLOW indica al navegador como tiene
que adaptar el tamao del contenido al tamao del contenedor
Clip, La propiedad CLIP permite recortar el contenido del contenedor
Z-INDEX, para controlar el orden de apilamiento
VISIBILITY, permite especificar si una capa y su contenido son visibles
o no
Etiqueta <LAYER>
Uso similar a DIV
Contradice estndar de W3C pero permite DHTML en Netscape
Cmo son los editores Web visuales?
Interfaz intuitivo, entornos de programacin o diseo
Asistentes de creacin de objetos
Manejo visual avanzado de Tablas, marcos y capas
Administracin sito Web completo, mantenimiento
Creacin asistida de aplicaciones dinmicas contra Sistemas
de bases de datos (ASP, PHP, CFG, etc)
Integracin con otras herramientas relacionadas con el
proceso de creacin de un Web
Otros
Gestin de estilos CSS
Acceso y edicin de HTML
Soporte de Formularios
Soporte de Javascript y JAVA
Soporte de XML
Multimedia con herramientas de autora Web
Herramientas autora Web visual
Multimedia con herramientas de autora Web
Herramientas autora Web visual
Editores Visuales destacados
Macromedia Dreamweaver 8
Diseo visual de CSS y unificacin de paneles
Autora de XML
Manejo avanzado de cdigo y soporte de lenguajes de lado
servidor (ASP, JSP, etc)
Soporte de tecnologas FlashVideo, PHP5, ColdFusion, etc
Alta integracin (comunicacin, adaptacin e Interfaz) con el
resto de programas del paquete Studio 8
Adobe Golive CS2
Herramientas visuales de fcil utilizacin para la creacin y
edicin de pginas basadas en CSS
Gestin de componentes y activos reutilizables
Alta integracin con las herramientas grficas de Adobe,
Creative, Photoshop y PDF
Control exhaustivo del cdigo fuente, CSS, XML, XHTML
Diseo de sitios para entornos mviles,
Interfaz de trabajo
Autora Web con editores visuales
Inclusin de contenidos con Dreamweaver
Barra de Documento
Barra Insertar
Comn, Diseo, Formularios, Texto, HTML, Cdigo servidor,
Aplicacin, Flash.
Barra de Estado
Visualizar propiedades y opciones de los
objetos
Inspector de propiedades
Men contextual
Opciones y acciones
relacionadas con el objeto
donde se ha pulsado el
botn izquierdo del ratn
Insercin y formato de Texto
Tres tipos de insercin:
Insercin por teclado
Por copia y pegado de textos externos ASCII o Editor de
textos
Por importacin, Datos de Tabla, documento Word o Excel
Formato de texto
Predeterminado a travs hojas de estilo CSS
Opcin a travs de etiquetas HTML, menor control, menos
posibilidades de actualizacin y ms cdigo de pgina
Formato visual a travs Inspector de propiedades
Visualizacin aspecto final del estilo
Agilidad de cambios
Insercin y formato de Texto. Manejo de CSS
Conjunto de reglas de formato que controlan el aspecto del
contenido de una pgina Web
Su contenido se puede alojar:
en un fichero externo .css
<link href="estilos.css" rel="stylesheet" type="text/css">
Dentro del archivo HTML en la cabecera <HEAD>
<style type="text/css">
<!
.Estilo1 {font-family: Tahoma}
-->
</style>
Panel de estilos
Modo actual, reglas CSS del objeto
Modo Todo, reglas CSS de todo el documento
Insercin y edicin de imgenes
Formatos soportados, JPEG, GIF y PNG
Edicin
Nuevo muestreo de imagen al cambiar el tamao
Recorte
Modificacin Brillo/Contraste
Perfilado o contraste de bordes
Optimizacin y edicin de imgenes con Fireworks
Opciones de apariencia: Espaciados, borde, tamao,
alineacin, etc
Establecimiento de hipervnculos
Opciones de contenido alternativo
Herramientas de creacin de mapas de imagen
Insercin de Objetos de
imagen
Marcador de posicin
Un marcador de posicin de
imagen es un grfico que se
utiliza hasta que el grfico
definitivo est listo para su
incorporacin a la pgina Web.
Imagen de sustitucin
Imagen que cambia por otra al
hacer el usuario un accin con
el ratn
Carga previa, ms rapidez
Barra de navegacin
Sucesin de botones 4 estados con memoria de estado
Insercin de objetos multimedia
Barra de insercin Comn Media
Pelculas Flash
Flash Video, formato de vdeo con tecnologa Flash
Flash Paper, formato de publicacin
de documentos formateados con
tecnologa Flash
Botones y texto Flash
Pelculas Shockwave
creadas con director
Applets de JAVA
Objetos ActiveX
Objetos que necesitan
Plugin
Por Men Insertar -- Media
Insercin de objetos multimedia Flash
Insercin pelcula formato .swf
Opciones
De reproduccin: Bucle y automtica
De apariencia: Espaciado, Calidad, Escala alineacin,
Fondo
De vista previa en la pgina
De edicin en Flash (Si se construy con el)
De inclusin de parmetros de funcionamiento
Insercin de objetos multimedia Flash Video
Insercin de archivos .flv, vdeo interactivo
construido con Flash
El objeto Flash Video inserta el contenido y
conjunto de mandos de reproduccin
Dos opciones de reproduccin
Vdeo de descarga progresiva, descarga el archivo al disco
duro del usuario y reproduccin antes de final descarga
Flujo de vdeo continuo, emisin remota de contenido de
forma fluida sin cortes (Necesidad de servidor
comunicaciones Flash)
Insercin de objetos multimedia PlugIn
Mediante esta opcin se introducen elementos de
audio y vdeo que necesitan en navegador de un
conector de software o PlugIn instalado
Se inserta con la etiqueta <EMBED>
Dreamweaver permite:
Marcar la URL del plugIn, por si no lo tiene el usuario
Reproduccin previa
Modificar atributos etiqueta <EMBED> a travs de panel
de atributos o por modificacin de cdigo en Vista cdigo
Modificar opciones de apariencia en el Inspector de
propiedades
Insercin de objetos multimedia Applet
Manejo de atributos de la etiqueta Applet a travs
de Inspector de propiedades y panel de atributos
de la eiqueta
Manejo de parmetros del applet mediante panel
de parmetros o vista cdigo
Comportamientos
Un comportamiento es una combinacin de un
evento con una accin que desencadena ese
evento
Los comportamientos de Dreamweaver introducen
en los documentos cdigo JavaScript que permite
dar dinamismo o interactividad a los documentos
HTML estticos
Tipos de comportamientos
Abrir una ventana de navegador configurable. Ir a
una URL
Llamar a una funcin Javascript
Comprobar si est instalado el plugIn y el navegador
Control de un sonido y de una pelcula swf
Mostrar, ocultar y arrastrar capas
Intercambiar imagen
Mostrar Men emergente
Validar un formulario
Panel de Comportamientos
Se accede a travs de Men Ventana Comportamientos
Los comportamientos se personalizan segn el objeto que
est seleccionado y el tipo de navegador compatible
El Panel permite cambiar el evento asociado al
comportamiento, editar las opciones y cambiar de
comportamiento
Aplicaciones de las imgenes
Barras de navegacin
Iconos: Botones, flechas,
lneas, smbolos, barras
Formato de texto a travs
de imgenes en blanco
Botones de imagen, cada
estado una imagen
Texto de alta calidad
Optimizacin de imgenes para la Web
Imgenes en la Web
Tipos especiales de imgenes
Imgenes transparentes, GIF y
PNG
Imgenes entrelazadas,
acelerar sensacin de
visualizacin: JPEG progresivo y
GIF (Explorer no)
Imgenes de baja resolucin
Imgenes de fondo <BODY
BACKGROUND=imagen>
Imgenes en la Web
Procesamiento de imgenes para Web
Escalar al tamao deseado
Suavizar colores, plantilla
Disminuir en lo posible la profundidad de color
(dithering)
Utilizar paletas de color Web o adaptativas
Prueba de distintos formatos y niveles de
compresin. Solucin de compromiso
Acciones para mejora de la carga
Especificar siempre atributos WIDTH y HEIGHT
Insertar versiones reducidas con enlace a las HR
Carga previa de imgenes, cargas en cach o en
segundo plano
Imgenes en la Web
Formatos grficos para Web
GIF 89A
Mxima profundidad de color 256 bits
Compresin sin prdidas LZW
Carga progresiva.
Mscara de transparencia de 1 bit.
Animacin simple.
JPEG
Nmero de colores: 24 bits color o 8 bits B/N Muy alto
grado de compresin. Formato de compresin con
prdida.
No permite transparencia, ni canal alfa.
No permite animacin.
Imgenes en la Web
Formatos grficos para Web
PNG
Soporte de colores: color indexado, color
verdadero de 48 bits, escala de grises de 16 bits
Mayor compresin que el formato GIF (+10%) sin
prdida
Visualizacin progresiva en dos dimensiones
Transparencia de canal alfa en imgenes
Deteccin de errores
No permite animacin.
Imgenes en la Web
Grficos Vectoriales
Curvas de Bzier
Nodos y Manejadores
Las lneas de un objeto vectorial
pueden tener diferentes espesores
y colores
Para rellenar con un color, es necesario que los
puntos estn unidos formando una lnea cerrada;
es decir, el ltimo nodo coincide con el primero
Imgenes en la Web
Grficos Vectoriales. Ventaj as de su uso
No importa el tamao, siempre la misma nitidez.
Cada objeto viene definido por sus propias
frmulas y se maneja independientemente del
resto.
Grn precisin sobre la forma, orientacin y
ordenacin de los elementos.
El dibujo es siempre editable.
Fcil reutilizacin en otros proyectos.
El tamao de los ficheros puede ser increblemente
compacto, aumenta con la complejidad y el
tamao el nmero de trazos.
Imgenes en la Web
Grficos Vectoriales. Ventaj as de su uso
Los objetos pueden fusionarse entre s.
Permiten un manejo de letras y texto sin
limitaciones; las fuentes Type 1 y TrueType son
tambin objetos vectoriales
El clipart mayoritariamente es formato vectorial
Se pueden incluir bitmaps en un dibujo vectorial,
Si es necesario, un vector puede exportarse a un
formato rster estndar, como GIF o JPG.
Grficos Vectoriales. Limitacin
Su aspecto fro y perfecto, sin imperfecciones
Imgenes en la Web
Grficos Vectoriales. Formatos vectoriales
Formatos propietarios
Cada herramienta exporta en el suyo, incompatibles
Formatos propietarios no basados en Bezier
Para pasarlos de un programa de Windows a otro: son los
metafiles (WMF y EMF)
Formatos puente
Postscript, lenguaje de definicin de pginas y objetos en
formato vectorial
Orientados a diseo Web
Shockwave Flash (.SWF) y el SVG (scalable vector graphic)
Imgenes en la Web
Grficos Vectoriales. Utilizacin
Dibujos lineales y grficos con formas ntidas
Formas simples (iconos, pequeas ilustraciones...)
Actualmente se pueden crear dibujos de una gran
riqueza, sin el aspecto fro, asptico, imagen en
pantalla suavizada (con antialiasing )
Texto editable en forma
Smbolos o glifos
Adaptacin de texto a contornos
Imgenes en la Web
Grficos Vectoriales. SVG (scalable vector
graphic)
SVG una forma ms del lenguaje XML que separa
por completo contenido de presentacin
Porque SVG?
Para superar las limitaciones de los ficheros de mapa de
bits, los omnipresentes GIF y JPG
Alternativa al formato vectorial SWF no libre
Los contenidos de texto son editables y buscables
Imgenes en la Web
Grficos Vectoriales. SVG Ventaj as
Las asociadas a un formato vectorial
El fichero SVG no es binario: fichero de texto que
se puede editar incluso en el Bloc de notas, y sus
contenidos se pueden indexar, buscar...
Soporte de hojas de estilo CSS
Puede incluir cdigo (scripts) que modifican el
grfico dinmicamente
Al ser XML, es un formato extensible
Admite efectos como sonido, efectos visuales al
hacer clic o mover el ratn
Puede generarse dinmicamente en un servidor
web como respuesta a instrucciones de Java,
JavaScript, Perl o XML
Imgenes en la Web
Fireworks permite
Crear, editar y optimizar grficos Web
Crear y editar imgenes de mapa de bits y vectoriales
Disear efectos Web
como rollovers y mens emergentes
recortar y optimizar elementos grficos para reducir su tamao
de archivo
Automatizar tareas repetitivas para ahorrar tiempo
Abrir archivos creados en aplicaciones o formatos de
archivo diferentes,
como Photoshop, Macromedia FreeHand, Illustrator,
CorelDRAW sin compresin, WBMP, EPS,JPEG, GIF y GIF
animado.
Fireworks permite
Creacin de archivos PNG de Fireworks a partir de
archivos HTML
Es posible importar, arrastrar o copiar y pegar en
documentos de Fireworks objetos vectoriales,imgenes
de mapa de bits o texto creados en otras aplicaciones.
Fireworks trabaja en formato de edicin PNG
Fireworks exporta en formatos:
Puede guardar directamente los siguientes formatos de
archivo: PNG de Fireworks, GIF, GIF animado, JPEG,
BMP, WBMP, TIF, SWF, AI, PSD y PICT (slo Macintosh).
Barra de Herramientas
Inspector de propiedades
Paneles de trabajo
Seleccin y transformacin de objetos
Desplazar, copiar, eliminar, girar, sesgar objetos y
cambiar su escala. En documentos con varios objetos,
para organizarlos, stos se pueden apilar, agrupar y
alinear.
Trabajo con mapas de bits
Dibujo, pintura y edicin de objetos de mapa de bits
Retoque de mapas de bits
Ajuste del color y el tono de un mapa de bits
Desenfoque y perfilado de mapas de bits
Incorporacin de ruido a una imagen
Dibujo de objetos vectoriales
Dibujo de lneas, rectngulos y elipses bsicas
Dibujo de formas automticas
Dibujo de trazados libres o marcando puntos
Incorporacin texto
Texto con una gran variedad de fuentes y tamaos, as
como ajustes de acercamiento, espaciado, color,
interlineado
Conversin en texto vectorial (trazados)
Aplicacin de trazados de molde, rellenos y filtros al
texto.
Revisin ortogrfica, posterior a efectos
Fireworks - Automatizacin de tareas repetitivas
Bsqueda y reemplazo
Permite buscar y reemplazar elementos,
como texto, URLs, fuentes y colores.
Se puede buscar en el documento actual o
en varios archivos a la vez.
Slo funciona con archivos PNG de Fireworks
o vectoriales
Proceso por lotes, conversin archivos grficos
Una seleccin de archivos en otro formato o en el mismo formato con
distintas configuraciones de optimizacin.
Escalar archivos exportados
Buscar y reemplazar texto, colores, direcciones URL, fuentes y colores
Cambiar el nombre a grupos de archivos mediante combinacin de opciones
Ejecutar comandos sobre un grupo de archivos.
Fireworks - Optimizacin y exportacin
Optimizacin
Eleccin del mejor formato de archivo
Definicin de las opciones especficas del formato
Ajuste de los colores del grfico
Asistente de exportacin
Configuracin visual de la exportacin
Ajustes de optimizacin, tamaos de archivo
Definicin de colores, paletas y transparencias
Tiempos estimados de carga
Comparacin de formatos de exportacin
Tipo y formato de exportacin
Una imagen en formato GIF, JPEG u otro archivo
grfico.
Todo el documento como un archivo HTML y sus
archivos de imagen asociados.
Exportar con CSS y el formato futuro XHTML
Exportar slo las divisiones seleccionadas.
Slo un rea especfica de su documento.
Fotogramas y capas como archivos de imgenes
independientes.
Fireworks - Optimizacin y exportacin
Qu son?
Programa escrito en Java que permite
introducir un contenido multimedia
interactivo en una pgina Web
Un applet se ejecuta completamente en el
cliente. Esto significa que una vez que fue
transmitido, la velocidad de la interaccin
no depende de la velocidad y latencia de
la red. Si es necesario, el applet tambin
se puede comunicar con el servidor.
Tecnologas para multimedia en la Web
JAVA Applets
Cmo se ejecutan?
Es necesario utilizar un cliente Web que sea Java
Compatible. Estos clientes definen la mquina
virtual Java y proporcionan el conjunto de libreras
de clases estndar necesarias para que el applet
funcione
Al cargar la pgina se detecta la etiqueta <Applet>
Sintaxis:
<APPLET CODE= WITH= HEIGHT= [CODEBASE=] [ALT=] [NAME=]
[ALIGN=] [VSPACE=] [HSPACE=] >
<PARAM NAME= VALUE= >
JAVA Applets
Qu es esta tecnologa ?
Estndar de facto de animacin vectorial para la Web
Cules son los elementos que la
componen?
Flash, programa que permite crear animaciones
interactivas
Formato nativo de creacin de proyectos .FLA
Formato de exportacin a la Web .SWF
Flash player, incrustado en los navegadores permite
reproducir las pelculas swf
Tecnologa FLASH
Qu se puede hacer con Flash?
Animaciones: anuncios publicitarios, tarjetas de
felicitacin en lnea, dibujos animados, etc.
Juegos: los juegos normalmente combinan las
capacidades de animacin de Flash con las
capacidades lgicas de ActionScript.
Interfaces de usuario
Aplicaciones dinmicas de Internet: proporcionan
una interfaz de usuario para mostrar y manipular
datos almacenados de forma remota a travs de
Internet.
Tecnologa FLASH
FLASH, la herramienta de creacin
El escenario, donde se muestran los grficos,
vdeos, botones y dems objetos durante la
reproduccin
Tecnologa FLASH
La lnea de tiempo, organiza y controla el
contenido de un documento a travs del tiempo en
capas y fotogramas
Tecnologa FLASH
Las barras de herramientas y edicin
Gestin y edicin de contenidos
Los paneles (Biblioteca, etc)
El inspector de propiedades
Tecnologa FLASH
Aspectos bsicos de creacin
fotogramas y fotogramas clave
Un fotograma clave es un fotograma en el que se
define un cambio en las propiedades de un objeto de
una animacin o se incluye cdigo ActionScript para
controlar determinado aspecto del documento
Utilizacin de capas
Son como hojas de acetato transparente apiladas en el
escenario.
Las capas ayudan a organizar las ilustraciones de los
documentos.
Los objetos de una capa pueden dibujarse y editarse
sin que afecten a objetos de otras capas.
Tecnologa FLASH
Smbolos, instancias y elementos de biblioteca
Un smbolo es un grfico, un botn o un clip de
pelcula que se crea una vez en Macromedia Flash
Una instancia es una copia de un smbolo
Cada instancia de smbolo tiene sus propiedades, que son
distintas de las del smbolo
Biblioteca, contenedor de objetos grficos,
sonidos, texto, que forman parte de una pelcula.
Los objetos grficos que se guardan en una biblioteca
toman el nombre de smbolos.
Tecnologa FLASH
Los botones
Son clips de pelcula interactivos de cuatro
fotogramas
Fotograma 1 es el estado Arriba
Fotograma 2es el estado Sobre
Fotograma 3 es el estado Presionado,
Fotograma 4 El cuarto fotograma es el estado Zona
activa, que define el rea que responde al clic del
ratn. Esta rea es invisible en el archivo SFW.
Tecnologa FLASH
Creacin de movimiento
Animaciones interpoladas, dos tipos
interpolacin de movimiento
interpolacin de formas
forma eficaz de crear movimiento y realizar cambios, ya
que reduce al mnimo el tamao del archivo. En esta
animacin, Flash slo guarda los valores de los cambios
producidos entre fotogramas.
Animacin fotograma por fotograma
Cada fotograma es clave
Para animaciones complejas, cambia el escenario
Tecnologa FLASH
ActionScript
Es el lenguaje que se deber utilizar para aadir
interactividad a aplicaciones Flash
Para escribir cdigo ActionScript en Flash, se utiliza
el panel Acciones, para scripts internos fichero FLA
la ventana Script, para scripts en fichero externo
Permite realizar acciones de
Control de pelcula
Comunicacin con el navegador, extensin de Flash
Tecnologa FLASH
Trabajo con sonido
Dos tipos de sonidos: sonidos de evento y
flujos de sonido
Importacin de sonidos
WAV (slo en Windows)
AIFF (slo en Macintosh)
MP3 (Windows o Macintosh)
Si se tiene QuickTime 4 o posterior instalado
AIFF
Sound Designer II (slo en Macintosh)
Pelculas QuickTime slo sonido
Sun AU
Sonidos System 7 (slo en Macintosh)
WAV
Tecnologa FLASH Contenidos Multimedia
Trabajo con sonido
Se almacenan en Bibliotecas como smbolos
para compartirlos
Se incorporan en fotogramas clave y conviene
capa de sonido
Aspectos exportacin
ADPCM: sonidos cortos
MP3: msica, sonidos largos
Sin formato, no compresin
Voz:, sin msica
Trabajo con sonido
Sincronizacin del sonido, Opciones:
Evento: cabezal por fotograma
Inicio: no se ejecuta si ya est sonando
Detener: interrupcin inmediata
Flujo: sonidos fondo, sonido no deba descargarse en su
totalidad para empezar a reproducirse
Efectos de sonido
A travs del inspector de propiedades
en el fotograma clave donde esta
el sonido.
Se abre deplegable con efectos disponibles
Efecto personalizado Editor de Envolventes
Trabajo con vdeo
Varios mtodos para incorporar video en Flash
Incorporacin de vdeo a un archivo SWF
Este mtodo le permite incorporar un archivo de vdeo en un
archivo SWF
todos los fotogramas de vdeo representados en los fotogramas de
la propia lnea de tiempo
Vdeos de poco tamao, hay que sincronizar con el SWF
Descarga progresiva de vdeo
Mediante ActionScript para cargar archivos FLV externos en un
archivo SWF y reproducirlos en tiempo de ejecucin
El flujo de vdeo procedente de su propio servidor
Flash Communication Server o de un servicio FVSS
Vdeo QuickTime vinculado
no pasa a formar parte del archivo Flash
Trabajo con vdeo - FLV, Flash Video
Permite a los diseadores fusionar vdeo con
datos, grficos, sonido y control interactivo
dinmico
Ventajas
Ubicuidad
Control creativo completo
Integracin como un objeto Flash
Trabajo con vdeo - FLV, Flash Video
Soluciones para codificar clips de vdeo en
formato FLV
Asistente de importacin de Flash Video
Flash Video Encoder
Complemento FLV QuickTime Export
Aplicaciones compatibles
Adobe After Effects (Windows y Macintosh)
Apple Final Cut Pro (Macintosh)
Apple QuickTime Pro (Windows y Macintosh)
Avid Xpress DV (Windows y Macintosh)
Los cdecs On2 VP 6 y Sorenson Spark
Formatos
Swf y HTML predet.
Marcar si se desea
otro y aparece
nueva pestaa
Seleccionar los
destinos de los
archivos
Tecnologa FLASH Publicacin
Flash
Se pueden configurar
las opciones de
compresin de imagen y
sonido
la opcin para proteger
la pelcula ante la
importacin
opciones de depuracin
HTML
Aspectos relativos al
etiqueta <object> donde se
va a alojar la pelcula en la
pgina HTML
Seleccin de plantilla HTML
a usar
Aspectos de versin del
Player y opciones de
reproduccin
Qu es?
Multiplataforma multimedia para difundir flujos de
datos multimedia a travs de diferentes medios
Soporta una gran multitud de formatos de vdeo y
audio
Cules son los elementos que la
componen?
QuickTime Player, player multiformato gratuito
QuickTime Pro, player avanzado con posibilidades de
edicin y conversin
QuickTime Streaming Server
Plataforma QuickTime
Formatos soportados
Formatos de archivo que
importa
AIFF, AU, Avi, BMP, Cubic VR, DV, FLC, GIF,
J PEG, FLASH, MIDI, MPEG-1, MP3-layer 1 y 3,
Photoshop, PICS, PICT, PNG, QT image file, QT
MOV, TARGA, SOUND, TEXT, TIFF, VR (virtual
reality ), WAVE, 3G, mpeg2, mpeg-4
Formatos de archivo que exporta
AIFF, AU, AVI, BMP, DV STREAM, FLC, J PEG,
MIDI, PHOTOSHOP, PICT, PNG, QT Image, QT
MOVIE, TARGA, TEXT, TIFF, WAV
Cdecs de vdeo soportados
Animation, Apple BMP, Apple video, DV, Grahics,
Cinepak, H.261, H.263 Microsoft Ole, Microsoft
Video 1, Motion J PEG A and B, Photo J PEG,
Planar RGB, Sorenson Vdeo 1 y 2, 3G
Efectos de vdeo
Alpha gain, Blur, color balance, color style, color
tint, edge detection, emboss, film noise, general
convolution QuickTime HLS Balance, lens flare,
RGB Balance, Sharpen, SMPTE effects, Traveling
matte, zoom.
Compresores de sonido
24 bit integer, 32 bit floating point, 32 bit integer, 64
bit floating point, Alaw 2:1, AU, MS ADPCM,
Qdesign Music 2QuickTime Qualcomm Purevoice

Reproduccin
Con player
En navegador
Opciones de cache
Opciones de copia en
disco duro
Arquitecturas y estndares de vdeo
Arquitecturas
AVI
QuickTime
CODECS
Cinepack, Indeo 3.2, Indeo 4.1, 4.2 y 4.3, Indeo 5.1 y
5.2 Microsoft RLE, Sorenson, DivX, H261, H263...
ESTANDARES
Grupo de expertos MPEG
Grupo de expertos ITU
Arquitecturas y estndares de vdeo
Grupo de expertos ITU
H.261, H.323, H.324, H.263, H26L
Grupo de expertos MPEG
MPEG 1(MPEG1Layer3=MP3)
MPEG2
MPEG3
MPEG4 (Codec DIVX)
MPEG7 (contenidos multimedia)
MPEG21 (Seguridad)
Estndar JVT
Mejoras significativas
en la eficiencia de la
codificacin sin prdida
de calidad.
Robustez frente a
errores y adaptacin
eficiente a la
transmisin.
Qu es streaming?
Tecnologa de transmisin de medios continuos,
principalmente audio y vdeo, a travs de redes.
No existe descarga de informacin al disco del
cliente.
La informacin emitida se reproduce en tiempo real.
La informacin se transmite como un flujo de
paquetes
El servidor rompe la informacin en paquetes que se
envan a travs de la red. Los paquetes son
reensamblados por el cliente
Tipos de servicio
Vdeo bajo demanda: origen de la informacin est
almacenada en un servidor. Extensible para Audio.
Los usuarios solicitan el envo de informacin cuando lo desean, por lo que
la informacin se enva personalizada y un flujo a cada cliente (unicast)
Se permiten interacciones
En directo: el contenido se crea en el mismo
momento de su difusin.
Orientado a la multidifusin.
Se permiten las pausas sin recuperacin de la informacin emitida durante
las mismas.
Servicio sin interactividad.
Dos tipos segn el tipo de transmisin:
Unicast: se enva un flujo de informacin a cada usuario.
Multicast: se enva un nico flujo a todos los usuarios.
Tipos de servicio
Casi bajo demanda: simula el funcionamiento de un
servicio bajo demanda con flujos de vdeo en directo.
Simula el video bajo demanda, pero con flujos de
informacin en directo, para aprovechar la difusin
multicast.
Siempre con informacin almacenada.
El cliente, cuando se incorpora, lo hace al flujo que
comienza o que est prximo a comenzar.
Cuando hace pausas o retrocesos, tambin se reincorpora al
flujo ms prximo.
Emisin continua y cclica.
Arquitectura de un sistema streaming
Sistemas de
produccin
Servidor de
streaming
Cliente
Servidor Streaming
Dos modos de funcionamiento
bajo demanda
en directo
Consta de tres elementos
Comunicador
Sistema operativo
Sistema de almacenamiento
Cliente,
Recepcin, recibe datos de red
Buffer, control de la calidad del servicio
Presentacin, reproduce e interfaz de interaccin
Formatos
Los formatos deben cumplir
Informacin dividida en flujos para permitir transmisin
temporizada.
Deben mantener ndices de posicionamiento.
Son capaces de modificar la calidad de vdeo en tiempo real.
El elemento bsico es el chunk (tambin llamado objeto):
tres secciones:
Cabecera: informacin general del fichero y de cada uno de los
flujos que lo componen.
Datos: Datos e informacin de control.
ndices de posicionamiento.
Arquitecturas y formatos propietarios
Windows Media
Real Network
Quick Time
Soluciones libres
VideoLAN
ICECAST
Conclusiones
Conocer como ha evolucionado la Web para introducir
contenidos multimedia
Extensiones
Conectores
Lenguajes
Conocer como asisten al autor de pginas Web multimedia los
programas de autora
Conocer procesos de optimizacin y automatizacin de
imgenes para la Web
Conocer las tecnologas que se han desarrollado para extender
las capacidades multimedia de la Web y hacerlo de manera
eficiente
Applets de JAVA
Tecnologa FLASH
Tecnologa y plataforma QuickTime
Arquitecturas y estndares de vdeo en la Web
Ejercicios propuestos

TMM Tema6 Presentacion Integracion Medios Digitales PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

TMM Tema6 Presentacion Integracion Medios Digitales PDF

Caricato da

Copyright:

Formati disponibili

Integracin multimedia en Web:

Integracin de medios con

Potrebbero piacerti anche