integración multimedia en web - ocw.innova.uned.es · — manejo visual avanzado de tablas, marcos...

Integración multimedia en Web:Integración de medios con herramientas de autoría Web y propietarias

Pablo Losada de Dios15 de Enero de 2007

Departamento de Ingeniería Eléctrica, Electrónica y de ControlETSI Industriales UNED http://www.ieec.uned.es

Máster en Ingeniería de la Web 2

ÍndiceIntroducción, Multimedia en la WebInclusión de multimedia con herramientas de autoría WebProcesos y técnicas para la optimización de imágenes para la Web

— Imágenes en HTML— Gráficos vectoriales— Procesos y optimización de imágenes con Fireworks

Tecnologías y Plataformas para introducir multimedia en la Web

— Applets de JAVA— Tecnología FLASH— Tecnología y plataforma QuickTime— Estándares, formatos y compresión de video digital— Audio y vídeo continuo, Streaming

Sesión práctica


Contexto

Conocemos las necesidades multimedia del sitioConocemos las características del medio Internet y sus limitacionesConocemos las herramientas para navegar por Internet y sus limitaciones a la hora de reproducir contenidos mulimedia.Necesitamos conocer tecnologías y formatos para optimizar y visualizar contenidos multimedia. Tenemos la necesidad de aplicaciones que optimicen la integración y los tiempos de trabajo


Objetivos

Conocer las características de los elementos multimedia que se pueden integrar en páginas WebConocer las técnicas de optimización de contenidos multimedia.Conocer tecnologías y formatos que permiten introducir contenidos multimedia “pesados” en páginas Web.Conocer plataformas que permiten reproducir contenidos multimedia de manera integrada con los navegadoresConocer como soporta HTML la integración de mediosConocer que aportan las herramientas de autoría Web a la integración de los medios digitales


Introducción, Multimedia en la WebInserción de medios digitales en Web

Problemática de incorporar multimedia en la Web— El cuello de botella , el ancho de banda de los canales de

comunicación— Problemas con gráficos alta resolución, audio y vídeo— Soluciones

• Incremento de los anchos de banda ADSL• Compresión y técnicas de streaming• Uso de caches locales• Creación de conexiones alternativas para diferentes anchos


Introducción, Multimedia en la Web¿Cómo se muestra multimedia en la Web?

Incorporada directa— Incorporada, medios digitales que las herramientas

de navegación 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 programación script, Javascript y Vbscript— Multimedia JAVA, Applets


Introducción, Multimedia en la Web MIME

Estándar para identificar el contenido multimediaTipos y subtipos— text/plain

Si se quiere ofrecer contenido multimedia en un centro Web, se debería asegurar que:— Los archivos multimedia poseen la extensión de

nombre de archivo correcta.— El servidor está configurado para asociar estas

extensiones con un determinado tipo MIME.

Relación entre el tipo multimedia con la forma de reproducción que elige el navegador


Introducción, Multimedia en la Web Etiquetas HTML para contenidos multimedia

Etiqueta EMBED— Para incluir archivos de audio y vídeo 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 vídeo con hipervínculos— Llamar a al reproducción de un archivo de audio a través de

la etiqueta <A HREF>— Necesidad de reproductores externos

• Windows Media • Real Audio y Real Vídeo

— Utilizado en formatos de audio y vídeo continuo o comprimido

• Audio: wma, mp3, ra• Vídeo: wmv, avi, mpeg, mpg, mp4, rv



Etiqueta OBJECT— Normalizar la inclusión 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 parámetros del objeto y otros elementos HTML que solo serán interpretados por los navegadores que no soporten el elemento OBJECT.

— Atributos, similares a EMBED destacando• DATA, la URL o localización del objeto incrustado• CLASSID, URL del programa cuya ejecución creará el objeto• CODEBASE, URL donde se pueden encontrar bibliotecas de

clases requeridas por el programa• CODETYPE, tipo MIME del código referenciado por CLASSID



Inclusión de animacionesDos tipos de animaciones— Animaciones gif, soportadas por los navegadores

• Se insertan como imágenes <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, vídeo e

incluso interactividad y dinamismo.• Se construyen con tecnología Macromedia Flash en

formato nativo .fla, aunque se pueden construir animaciones con otros programas como Director, Swish, etc



Inclusión de programación script— Programación orientada objeto-evento

interpretada por el navegador— Sintaxis: Etiqueta HTML para incluir el código del

programa incrustado en la página<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 página.• Calendarios, relojes...• Cajas de texto independientes del resto de la página• Formularios para correo electrónico, por ejemplo para preparar una

encuesta. • Efectos de audio y de imagen: cambio de color del fondo.• Efectos con las imágenes: cambio al pasar el ratón, imágenes que van

cambiando (no animaciones),• Posibilidad de cambiar el aspecto de una página para hacerla más

accesible.



Inclusión de programas applet de Java— Programas escritos en Java que residen en el servidor Web y

que se ejecutan en la máquina del usuario a través de la Máquina virtual Java que instalan los navegadores

— Permiten al programador realizar animaciones interactivas con el usuario con inclusión de sonidos y vídeos.

— En el servidor código precompilado archivo .class— Sintaxis: inclusión con la etiqueta

<APPLET CODE=nombre.class ATRIBUTOS> </APPLET><PARAM NAME=nombre_del_parámetro VALUE="contenido_del_parámetro">

— Los parámetros permiten configurar el funcionamiento y visualización del applet en la página




Extensiones de posición, LAYER y DIV— Permiten posicionar los objetos dentro de la página Web de

manera más 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 tamaño del contenido al tamaño 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 estándar de W3C pero permite DHTML en Netscape


¿Cómo son los editores Web visuales?— Interfaz intuitivo, entornos de programación o diseño— Asistentes de creación de objetos — Manejo visual avanzado de Tablas, marcos y capas— Administración sito Web completo, mantenimiento— Creación asistida de aplicaciones dinámicas contra Sistemas

de bases de datos (ASP, PHP, CFG, etc)— Integración con otras herramientas relacionadas con el

proceso de creación de un Web— Otros

• Gestión de estilos CSS• Acceso y edición de HTML• Soporte de Formularios• Soporte de Javascript y JAVA• Soporte de XML

Multimedia con herramientas de autoría WebHerramientas autoría Web visual


Multimedia con herramientas de autoría WebHerramientas autoría Web visual

Editores Visuales destacados— Macromedia Dreamweaver 8

• Diseño visual de CSS y unificación de paneles• Autoría de XML• Manejo avanzado de código y soporte de lenguajes de lado

servidor (ASP, JSP, etc)• Soporte de tecnologías FlashVideo, PHP5, ColdFusion, etc• Alta integración (comunicación, adaptación e Interfaz) con el

resto de programas del paquete Studio 8

— Adobe Golive CS2• Herramientas visuales de fácil utilización para la creación y

edición de páginas basadas en CSS• Gestión de componentes y activos reutilizables• Alta integración con las herramientas gráficas de Adobe,

Creative, Photoshop y PDF• Control exhaustivo del código fuente, CSS, XML, XHTML• Diseño de sitios para entornos móviles,


Interfaz de trabajo

Autoría Web con editores visualesInclusión de contenidos con Dreamweaver


Barra de Documento

Barra Insertar— Común, Diseño, Formularios, Texto, HTML, Código servidor,

Aplicación, 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 botón izquierdo del ratón



Inserción y formato de Texto— Tres tipos de inserción:

• Inserción por teclado• Por copia y pegado de textos externos ASCII o Editor de

textos• Por importación, Datos de Tabla, documento Word o Excel

— Formato de texto• Predeterminado a través hojas de estilo CSS• Opción a través de etiquetas HTML, menor control, menos

posibilidades de actualización y más código de página

— Formato visual a través Inspector de propiedades• Visualización aspecto final del estilo• Agilidad de cambios



Inserción y formato de Texto. Manejo de CSS— Conjunto de reglas de formato que controlan el aspecto del

contenido de una página 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



Inserción y edición de imágenes— Formatos soportados, JPEG, GIF y PNG— Edición

• Nuevo muestreo de imagen al cambiar el tamaño• Recorte• Modificación Brillo/Contraste• Perfilado o contraste de bordes• Optimización y edición de imágenes con Fireworks

— Opciones de apariencia: Espaciados, borde, tamaño, alineación, etc

— Establecimiento de hipervínculos— Opciones de contenido alternativo— Herramientas de creación de mapas de imagen



Inserción de Objetos de imagen— Marcador de posición

• Un marcador de posición de imagen es un gráfico que se utiliza hasta que el gráfico definitivo está listo para su incorporación a la página Web.

— Imagen de sustitución• Imagen que cambia por otra al

hacer el usuario un acción con el ratón

• Carga previa, más rapidez

— Barra de navegación


• Sucesión de botones 4 estados con memoria de estado


Inserción de objetos multimedia— Barra de inserción Común – Media

• Películas Flash• Flash Video, formato de vídeo con tecnología Flash• Flash Paper, formato de publicación

de documentos formateados con tecnología Flash

• Botones y texto Flash• Películas Shockwave

creadas con director• Applets de JAVA• Objetos ActiveX• Objetos que necesitan

Plugin— Por Menú – Insertar -- Media



Inserción de objetos multimedia – Flash— Inserción película formato .swf— Opciones

• De reproducción: Bucle y automática• De apariencia: Espaciado, Calidad, Escala alineación,

Fondo• De vista previa en la página• De edición en Flash (Si se construyó con el)• De inclusión de parámetros de funcionamiento



Inserción de objetos multimedia – Flash Video— Inserción de archivos .flv, vídeo interactivo

construido con Flash— El objeto Flash Video inserta el contenido y

conjunto de mandos de reproducción

— Dos opciones de reproducción• Vídeo de descarga progresiva, descarga el archivo al disco

duro del usuario y reproducción antes de final descarga• Flujo de vídeo continuo, emisión remota de contenido de

forma fluida sin cortes (Necesidad de servidor comunicaciones Flash)



Inserción de objetos multimedia – PlugIn— Mediante esta opción se introducen elementos de

audio y vídeo 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• Reproducción previa• Modificar atributos etiqueta <EMBED> a través de panel

de atributos o por modificación de código en Vista código• Modificar opciones de apariencia en el Inspector de

propiedades



Inserción de objetos multimedia – Applet— Manejo de atributos de la etiqueta Applet a través

de Inspector de propiedades y panel de atributos de la eiqueta

— Manejo de parámetros del applet mediante panel de parámetros o vista código



Comportamientos— Un comportamiento es una combinación de un

evento con una acción que desencadena ese evento

— Los comportamientos de Dreamweaver introducen en los documentos código JavaScript que permite dar dinamismo o interactividad a los documentos HTML estáticos

— Tipos de comportamientos• Abrir una ventana de navegador configurable. Ir a

una URL• Llamar a una función Javascript• Comprobar si está instalado el plugIn y el navegador• Control de un sonido y de una película swf• Mostrar, ocultar y arrastrar capas• Intercambiar imagen• Mostrar Menú emergente• Validar un formulario



Panel de Comportamientos— Se accede a través de Menú – Ventana – Comportamientos— Los comportamientos se personalizan según 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 imágenes— Barras de navegación

— Iconos: Botones, flechas,

líneas, símbolos, barras

— Formato de texto a través

de imágenes en blanco

— Botones de imagen, cada

estado una imagen

— Texto de alta calidad

Optimización de imágenes para la WebImágenes en la Web


Tipos especiales de imágenes— Imágenes transparentes, GIF y

PNG

— Imágenes entrelazadas, acelerar sensación de visualización: JPEG progresivo y GIF (Explorer no)

— Imágenes de baja resolución

— Imágenes de fondo <BODY BACKGROUND=“imagen”>

Optimización de imágenes para la WebImágenes en la Web


Procesamiento de imágenes para Web— Escalar al tamaño 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

compresión. Solución de compromisoAcciones para mejora de la carga— Especificar siempre atributos WIDTH y HEIGHT— Insertar versiones reducidas con enlace a las HR— Carga previa de imágenes, cargas en caché o en

segundo plano

Optimización de imágenes para la Web Imágenes en la Web


Formatos gráficos para Web— GIF 89A

• Máxima profundidad de color 256 bits• Compresión sin pérdidas LZW• Carga progresiva. • Máscara de transparencia de 1 bit. • Animación simple.

— JPEG• Número de colores: 24 bits color o 8 bits B/N Muy alto

grado de compresión. Formato de compresión con pérdida.

• No permite transparencia, ni canal alfa. • No permite animación.



Formatos gráficos para Web— PNG

• Soporte de colores: color indexado, color verdadero de 48 bits, escala de grises de 16 bits

• Mayor compresión que el formato GIF (+10%) sin pérdida

• Visualización progresiva en dos dimensiones• Transparencia de canal alfa en imágenes• Detección de errores• No permite animación.



Gráficos Vectoriales— Curvas de Bézier

• Nodos y Manejadores

— Las líneas de un objeto vectorialpueden tener diferentes espesores y colores

— Para rellenar con un color, es necesario que los puntos estén unidos formando una línea cerrada; es decir, el último nodo coincide con el primero



Gráficos Vectoriales. Ventajas de su uso— No importa el tamaño, siempre la misma nitidez.— Cada objeto viene definido por sus propias

fórmulas y se maneja independientemente del resto.

— Grán precisión sobre la forma, orientación y ordenación de los elementos.

— El dibujo es siempre editable.— Fácil reutilización en otros proyectos.— El tamaño de los ficheros puede ser increíblemente

compacto, aumenta con la complejidad y el tamaño el número de trazos.



Gráficos Vectoriales. Ventajas 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 también 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 ráster estándar, como GIF o JPG.Gráficos Vectoriales. Limitación— Su aspecto frío y perfecto, sin imperfecciones



Gráficos 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 definición de páginas y objetos en

formato vectorial

— Orientados a diseño Web• Shockwave Flash (.SWF) y el SVG (scalable vector graphic)



Gráficos Vectoriales. Utilización— Dibujos lineales y gráficos con formas nítidas

— Formas simples (iconos, pequeñas ilustraciones...)

— Actualmente se pueden crear dibujos de una gran riqueza, sin el aspecto frío, aséptico, imagen en pantalla suavizada (con antialiasing )

— Texto editable en formaSímbolos o glifosAdaptación de texto a contornos



Gráficos Vectoriales. SVG (scalable vector graphic)— SVG una forma más del lenguaje XML que separa

por completo contenido de presentación

— ¿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”



Gráficos Vectoriales. SVG – Ventajas— 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 código (scripts) que modifican el

gráfico dinámicamente— Al ser XML, es un formato extensible — Admite efectos como sonido, efectos visuales al

hacer clic o mover el ratón— Puede generarse dinámicamente en un servidor

web como respuesta a instrucciones de Java, JavaScript, Perl o XML



Optimización de imágenes para la Web Procesos y optimización de imágenes con Fireworks

Fireworks permite— Crear, editar y optimizar gráficos Web— Crear y editar imágenes de mapa de bits y vectoriales— Diseñar efectos Web

• como rollovers y menús emergentes• recortar y optimizar elementos gráficos para reducir su tamaño

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 compresión, WBMP, EPS,JPEG, GIF y GIF animado.



Fireworks permite— Creación de archivos PNG de Fireworks a partir de

archivos HTML— Es posible importar, arrastrar o copiar y pegar en

documentos de Fireworks objetos vectoriales,imágenesde mapa de bits o texto creados en otras aplicaciones.

Fireworks trabaja en formato de edición PNGFireworks 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 (sólo Macintosh).



Barra de Herramientas

Inspector de propiedades

Paneles de trabajo



Selección y transformación 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 edición 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— Incorporación de ruido a una imagen



Dibujo de objetos vectoriales— Dibujo de líneas, rectángulos y elipses básicas— Dibujo de formas automáticas— Dibujo de trazados libres o marcando puntos

Incorporación texto— Texto con una gran variedad de fuentes y tamaños, así

como ajustes de acercamiento, espaciado, color, interlineado

— Conversión en texto vectorial (trazados)— Aplicación de trazados de molde, rellenos y filtros al

texto.— Revisión ortográfica, posterior a efectos


Optimización de imágenes para la Web Fireworks - Automatización de tareas repetitivas

Búsqueda 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.— Sólo funciona con archivos PNG de Fireworks

o vectoriales

Proceso por lotes, conversión archivos gráficos— Una selección de archivos en otro formato o en el mismo formato con

distintas configuraciones de optimización.— Escalar archivos exportados— Buscar y reemplazar texto, colores, direcciones URL, fuentes y colores— Cambiar el nombre a grupos de archivos mediante combinación de opciones— Ejecutar comandos sobre un grupo de archivos.


Optimización de imágenes para la Web Fireworks - Optimización y exportación

Optimización— Elección del mejor formato de archivo— Definición de las opciones específicas del formato— Ajuste de los colores del gráfico

Asistente de exportación— Configuración visual de la exportación

• Ajustes de optimización, tamaños de archivo• Definición de colores, paletas y transparencias• Tiempos estimados de carga• Comparación de formatos de exportación


Tipo y formato de exportación— Una imagen en formato GIF, JPEG u otro archivo

gráfico. — Todo el documento como un archivo HTML y sus

archivos de imagen asociados.— Exportar con CSS y el formato futuro XHTML — Exportar sólo las divisiones seleccionadas. — Sólo un área específica de su documento. — Fotogramas y capas como archivos de imágenes

independientes.

Optimización de imágenes para la Web Fireworks - Optimización y exportación


¿Qué son?— Programa escrito en Java que permite

introducir un contenido multimedia interactivo en una página Web

— Un applet se ejecuta completamente en el cliente. Esto significa que una vez que fue transmitido, la velocidad de la interacción no depende de la velocidad y latencia de la red. Si es necesario, el applet también se puede comunicar con el servidor.

Tecnologías para multimedia en la WebJAVA Applets


¿Cómo se ejecutan?— Es necesario utilizar un cliente Web que sea “Java

Compatible”. Estos clientes definen la máquina virtual Java y proporcionan el conjunto de librerías de clases estándar necesarias para que el appletfuncione

— Al cargar la página se detecta la etiqueta <Applet>— Sintaxis:

<APPLET CODE= WITH= HEIGHT= [CODEBASE=] [ALT=] [NAME=][ALIGN=] [VSPACE=] [HSPACE=] ><PARAM NAME= VALUE= >

Tecnologías para multimedia en la WebJAVA Applets


¿Qué es esta tecnología ?— Estándar de facto de animación vectorial para la Web

¿Cuáles son los elementos que la componen? — Flash, programa que permite crear animaciones

interactivas— Formato nativo de creación de proyectos .FLA— Formato de exportación a la Web .SWF— Flash player, incrustado en los navegadores permite

reproducir las películas swf

Tecnologías para multimedia en la WebTecnología FLASH


¿Qué se puede hacer con Flash?— Animaciones: anuncios publicitarios, tarjetas de

felicitación en línea, dibujos animados, etc. — Juegos: los juegos normalmente combinan las

capacidades de animación de Flash con las capacidades lógicas de ActionScript.

— Interfaces de usuario— Aplicaciones dinámicas de Internet: proporcionan

una interfaz de usuario para mostrar y manipular datos almacenados de forma remota a través de Internet.



FLASH, la herramienta de creación— El escenario, donde se muestran los gráficos,

vídeos, botones y demás objetos durante la reproducción



FLASH, la herramienta de creación— La línea de tiempo, organiza y controla el

contenido de un documento a través del tiempo en capas y fotogramas



FLASH, la herramienta de creación— Las barras de herramientas y edición— Gestión y edición de contenidos

• Los paneles (Biblioteca, etc)• El inspector de propiedades



FLASH, la herramienta de creación— Aspectos básicos de creación

• 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 animación o se incluye código ActionScript para controlar determinado aspecto del documento

• Utilización 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.



FLASH, la herramienta de creación— Símbolos, instancias y elementos de biblioteca

• Un símbolo es un gráfico, un botón o un clip de película que se crea una vez en Macromedia Flash

• Una instancia es una copia de un símbolo– Cada instancia de símbolo tiene sus propiedades, que son

distintas de las del símbolo

• Biblioteca, contenedor de objetos gráficos, sonidos, texto, que forman parte de una película.

– Los objetos gráficos que se guardan en una biblioteca toman el nombre de símbolos.



FLASH, la herramienta de creación— Los botones

• Son clips de película 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 ratón. Esta área es invisible en el archivo SFW.



FLASH, la herramienta de creación— Creación de movimiento

• Animaciones interpoladas, dos tipos– interpolación de movimiento– interpolación de formas– forma eficaz de crear movimiento y realizar cambios, ya

que reduce al mínimo el tamaño del archivo. En esta animación, Flash sólo guarda los valores de los cambios producidos entre fotogramas.

• Animación fotograma por fotograma– Cada fotograma es clave– Para animaciones complejas, cambia el escenario



FLASH, la herramienta de creación— ActionScript

• Es el lenguaje que se deberá utilizar para añadir interactividad a aplicaciones Flash

• Para escribir código 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 película– Comunicación con el navegador, extensión de Flash



Trabajo con sonido— Dos tipos de sonidos: sonidos de evento y

flujos de sonido— Importación de sonidos

• WAV (sólo en Windows) • AIFF (sólo en Macintosh)

• MP3 (Windows o Macintosh)

Si se tiene QuickTime 4 o posterior instalado• AIFF• Sound Designer II (sólo en Macintosh) • Películas QuickTime sólo sonido • Sun AU• Sonidos System 7 (sólo en Macintosh) • WAV

Tecnologías para multimedia en la WebTecnología FLASH – Contenidos Multimedia


Trabajo con sonido— Se almacenan en Bibliotecas como símbolos

para compartirlos— Se incorporan en fotogramas clave y conviene

capa de sonido— Aspectos exportación

• “ADPCM”: sonidos cortos • “MP3”: música, sonidos largos• Sin formato, no compresión• “Voz”:, sin música



Trabajo con sonido— Sincronización del sonido, Opciones:

• Evento: cabezal por fotograma • Inicio: no se ejecuta si ya está sonando• Detener: interrupción inmediata• Flujo: sonidos fondo, sonido no deba descargarse en su

totalidad para empezar a reproducirse

— Efectos de sonido• A través 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 vídeo— Varios métodos para incorporar video en Flash

• Incorporación de vídeo a un archivo SWF – Este método le permite incorporar un archivo de vídeo en un

archivo SWF– todos los fotogramas de vídeo representados en los fotogramas de

la propia línea de tiempo– Vídeos de poco tamaño, hay que sincronizar con el SWF

• Descarga progresiva de vídeo– Mediante ActionScript para cargar archivos FLV externos en un

archivo SWF y reproducirlos en tiempo de ejecución

• El flujo de vídeo procedente de su propio servidor Flash Communication Server o de un servicio FVSS

• Vídeo QuickTime vinculado– no pasa a formar parte del archivo Flash



Trabajo con vídeo - FLV, Flash Video— Permite a los diseñadores fusionar vídeo con

datos, gráficos, sonido y control interactivo dinámico

— Ventajas• Ubicuidad• Control creativo completo• Integración como un objeto Flash



Trabajo con vídeo - FLV, Flash Video— Soluciones para codificar clips de vídeo en

formato FLV• Asistente de importación 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 códecs On2 VP 6 y Sorenson Spark



Formatos— Swf y HTML predet.— Marcar si se desea

otro y aparece nueva pestaña

— Seleccionar los destinos de los archivos

Tecnologías para multimedia en la WebTecnología FLASH – Publicación


Flash— Se pueden configurar

• las opciones de compresión de imagen y sonido

• la opción para proteger la película ante la importación

• opciones de depuración



HTML— Aspectos relativos al

etiqueta <object> donde se va a alojar la película en la página HTML

— Selección de plantilla HTML a usar

— Aspectos de versión del Player y opciones de reproducción



¿Qué es?— Multiplataforma multimedia para difundir flujos de

datos multimedia a través de diferentes medios— Soporta una gran multitud de formatos de vídeo y

audio

¿Cuáles son los elementos que la componen? — QuickTime Player, player multiformato gratuito— QuickTime Pro, player avanzado con posibilidades de

edición y conversión— QuickTime Streaming Server

Tecnologías para multimedia en la WebPlataforma QuickTime



Formatos soportadosFormatos de archivo que importa

AIFF, AU, Avi, BMP, Cubic VR, DV, FLC, GIF, JPEG, 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, JPEG, MIDI, PHOTOSHOP, PICT, PNG, QT Image, QT MOVIE, TARGA, TEXT, TIFF, WAV

Códecs de vídeo soportados Animation, Apple BMP, Apple video, DV, Grahics, Cinepak, H.261, H.263 Microsoft Ole, Microsoft Video 1, Motion JPEG A and B, Photo JPEG, Planar RGB, Sorenson Vídeo 1 y 2, 3G

Efectos de vídeo

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



Reproducción— Con player

— En navegador• Opciones de cache• Opciones de copia en

disco duro


Tecnologías para multimedia en la WebArquitecturas y estándares de vídeo

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


Tecnologías para multimedia en la WebArquitecturas y estándares de vídeo

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)

Estándar JVT

•Mejoras significativas en la eficiencia de la codificación sin pérdida de calidad.•Robustez frente a errores y adaptación eficiente a la transmisión.


Tecnologías para multimedia en la WebAudio y vídeo continuo, Streaming

¿Qué es streaming?— Tecnología de transmisión de medios continuos,

principalmente audio y vídeo, a través de redes.— No existe descarga de información al disco del

cliente.— La información emitida se reproduce en tiempo real. — La información se transmite como un flujo de

paquetes— El servidor rompe la información en paquetes que se

envían a través de la red. Los paquetes son reensamblados por el cliente



Tipos de servicio— Vídeo bajo demanda: origen de la información está

almacenada en un servidor. Extensible para Audio.• Los usuarios solicitan el envío de información cuando lo desean, por lo que

la información se envía personalizada y un flujo a cada cliente (unicast)• Se permiten interacciones

— En directo: el contenido se crea en el mismo momento de su difusión.

• Orientado a la multidifusión.• Se permiten las pausas sin recuperación de la información emitida durante

las mismas.• Servicio sin interactividad.• Dos tipos según el tipo de transmisión:

– Unicast: se envía un flujo de información a cada usuario.

– Multicast: se envía un único flujo a todos los usuarios.



Tipos de servicio— Casi bajo demanda: simula el funcionamiento de un

servicio bajo demanda con flujos de vídeo en directo.• Simula el video bajo demanda, pero con flujos de

información en directo, para aprovechar la difusión multicast.

• Siempre con información almacenada.• El cliente, cuando se incorpora, lo hace al flujo que

comienza o que está próximo a comenzar.• Cuando hace pausas o retrocesos, también se reincorpora al

flujo más próximo.• Emisión continua y cíclica.



Arquitectura de un sistema streaming



Arquitectura de un sistema streaming

— Sistemas de

producción

— Servidor de

streaming

— Cliente



Arquitectura de un sistema streaming— Servidor Streaming

• Dos modos de funcionamiento– bajo demanda– en directo

• Consta de tres elementos – Comunicador– Sistema operativo– Sistema de almacenamiento

— Cliente, • Recepción, recibe datos de red• Buffer, control de la calidad del servicio• Presentación, reproduce e interfaz de interacción



Formatos— Los formatos deben cumplir

• Información dividida en flujos para permitir transmisión temporizada.

• Deben mantener índices de posicionamiento.• Son capaces de modificar la calidad de vídeo en tiempo real.• El elemento básico es el chunk (también llamado objeto):

tres secciones:– Cabecera: información general del fichero y de cada uno de los

flujos que lo componen.– Datos: Datos e información 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 páginas Web multimedia los programas de autoríaConocer procesos de optimización y automatización de imágenes para la WebConocer las tecnologías que se han desarrollado para extender las capacidades multimedia de la Web y hacerlo de manera eficiente

— Applets de JAVA— Tecnología FLASH— Tecnología y plataforma QuickTime— Arquitecturas y estándares de vídeo en la Web— Audio y vídeo continuo, Streaming


Ejercicios propuestos

integración multimedia en web - ocw.innova.uned.es · — manejo visual avanzado de tablas, marcos...

Documents