Integración de medios con herramientas de autorí Web y

Integración multimedia en Web:
Integración de medios con
herramientas de autoría Web y
propietarias
Pablo Losada de Dios
15 de Enero de 2007
Departamento de Ingeniería Eléctrica, Electrónica y de Control
ETSI Industriales UNED
http://www.ieec.uned.es
Índice
Introducción, Multimedia en la Web
Inclusión de multimedia con herramientas de
autoría Web
Procesos 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
Máster en Ingeniería de la Web
2
Contexto
Conocemos las necesidades multimedia del sitio
Conocemos las características 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 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
Máster en Ingeniería de la Web
3
Objetivos
Conocer las características de los elementos
multimedia que se pueden integrar en páginas Web
Conocer 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
navegadores
Conocer como soporta HTML la integración de
medios
Conocer que aportan las herramientas de autoría
Web a la integración de los medios digitales
Máster en Ingeniería de la Web
4
Introducción, Multimedia en la Web
Inserció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
Máster en Ingeniería de la Web
5
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
Máster en Ingeniería de la Web
6
Introducción, Multimedia en la Web
MIME
Estándar para identificar el contenido
multimedia
Tipos 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
Máster en Ingeniería de la Web
7
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
Máster en Ingeniería de la Web
8
Introducción, Multimedia en la Web
Etiquetas HTML para contenidos multimedia
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
Máster en Ingeniería de la Web
9
Introducción, Multimedia en la Web
Etiquetas HTML para contenidos multimedia
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
Máster en Ingeniería de la Web
10
Introducción, Multimedia en la Web
Etiquetas HTML para contenidos multimedia
Inclusión de animaciones
Dos 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
Máster en Ingeniería de la Web
11
Introducción, Multimedia en la Web
Etiquetas HTML para contenidos multimedia
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.
Máster en Ingeniería de la Web
12
Introducción, Multimedia en la Web
Etiquetas HTML para contenidos multimedia
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
Máster en Ingeniería de la Web
13
Introducción, Multimedia en la Web
Etiquetas HTML para contenidos multimedia
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
—
Máster en Ingeniería de la Web
14
Multimedia con herramientas de autoría Web
Herramientas autoría Web visual
¿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
Máster en Ingeniería de la Web
15
Multimedia con herramientas de autoría Web
Herramientas 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,
Máster en Ingeniería de la Web
16
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
Interfaz de trabajo
Máster en Ingeniería de la Web
17
Autoría Web con editores visuales
Inclusió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
Máster en Ingeniería de la Web
18
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
19
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
20
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
21
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
22
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
23
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
24
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
25
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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)
Máster en Ingeniería de la Web
26
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
27
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
28
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
29
Autoría Web con editores visuales
Inclusión de contenidos con Dreamweaver
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
Máster en Ingeniería de la Web
30
Optimización de imágenes para la Web
Imágenes en la Web
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
Máster en Ingeniería de la Web
31
Optimización de imágenes para la Web
Imá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”>
Máster en Ingeniería de la Web
32
Optimización de imágenes para la Web
Imá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 compromiso
Acciones 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
Máster en Ingeniería de la Web
33
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.
Máster en Ingeniería de la Web
34
Optimización de imágenes para la Web
Imágenes en la Web
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.
Máster en Ingeniería de la Web
35
Optimización de imágenes para la Web
Imágenes en la Web
Gráficos Vectoriales
—
Curvas de Bézier
• Nodos y Manejadores
—
Las líneas de un objeto vectorial
pueden 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
Máster en Ingeniería de la Web
36
Optimización de imágenes para la Web
Imágenes en la Web
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.
Máster en Ingeniería de la Web
37
Optimización de imágenes para la Web
Imágenes en la Web
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
Máster en Ingeniería de la Web
38
Optimización de imágenes para la Web
Imágenes en la Web
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)
Máster en Ingeniería de la Web
39
Optimización de imágenes para la Web
Imágenes en la Web
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 forma
Símbolos o glifos
Adaptación de texto a contornos
Máster en Ingeniería de la Web
40
Optimización de imágenes para la Web
Imágenes en la Web
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”
Máster en Ingeniería de la Web
41
Optimización de imágenes para la Web
Imágenes en la Web
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
Máster en Ingeniería de la Web
42
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.
Máster en Ingeniería de la Web
43
Optimización de imágenes para la Web
Procesos y optimización de imágenes con Fireworks
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ágenes
de mapa de bits o texto creados en otras aplicaciones.
Fireworks trabaja en formato de edición 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 (sólo Macintosh).
Máster en Ingeniería de la Web
44
Optimización de imágenes para la Web
Procesos y optimización de imágenes con Fireworks
Barra de Herramientas
Paneles de trabajo
Inspector de propiedades
Máster en Ingeniería de la Web
45
Optimización de imágenes para la Web
Procesos y optimización de imágenes con Fireworks
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
Máster en Ingeniería de la Web
46
Optimización de imágenes para la Web
Procesos y optimización de imágenes con Fireworks
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
Máster en Ingeniería de la Web
47
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.
Máster en Ingeniería de la Web
48
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
Máster en Ingeniería de la Web
49
Optimización de imágenes para la Web
Fireworks - Optimización y 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.
Máster en Ingeniería de la Web
50
Tecnologías para multimedia en la Web
JAVA Applets
¿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.
—
Máster en Ingeniería de la Web
51
Tecnologías para multimedia en la Web
JAVA 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 applet
funcione
Al cargar la página se detecta la etiqueta <Applet>
Sintaxis:
<APPLET CODE= WITH= HEIGHT= [CODEBASE=] [ALT=] [NAME=]
[ALIGN=] [VSPACE=] [HSPACE=] >
<PARAM NAME= VALUE= >
Máster en Ingeniería de la Web
52
Tecnologías para multimedia en la Web
Tecnología FLASH
¿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
Máster en Ingeniería de la Web
53
Tecnologías para multimedia en la Web
Tecnologí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.
Máster en Ingeniería de la Web
54
Tecnologías para multimedia en la Web
Tecnología FLASH
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
Máster en Ingeniería de la Web
55
Tecnologías para multimedia en la Web
Tecnología FLASH
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
Máster en Ingeniería de la Web
56
Tecnologías para multimedia en la Web
Tecnología FLASH
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
Máster en Ingeniería de la Web
57
Tecnologías para multimedia en la Web
Tecnología FLASH
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.
Máster en Ingeniería de la Web
58
Tecnologías para multimedia en la Web
Tecnología FLASH
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.
Máster en Ingeniería de la Web
59
Tecnologías para multimedia en la Web
Tecnología FLASH
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.
Máster en Ingeniería de la Web
60
Tecnologías para multimedia en la Web
Tecnología FLASH
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
Máster en Ingeniería de la Web
61
Tecnologías para multimedia en la Web
Tecnología FLASH
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
Máster en Ingeniería de la Web
62
Tecnologías para multimedia en la Web
Tecnología FLASH – Contenidos Multimedia
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
Máster en Ingeniería de la Web
63
Tecnologías para multimedia en la Web
Tecnologí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
Máster en Ingeniería de la Web
64
Tecnologías para multimedia en la Web
Tecnología FLASH – Contenidos Multimedia
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
Máster en Ingeniería de la Web
65
Tecnologías para multimedia en la Web
Tecnología FLASH – Contenidos Multimedia
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
Máster en Ingeniería de la Web
66
Tecnologías para multimedia en la Web
Tecnología FLASH – Contenidos Multimedia
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
Máster en Ingeniería de la Web
67
Tecnologías para multimedia en la Web
Tecnología FLASH – Contenidos Multimedia
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
Máster en Ingeniería de la Web
68
Tecnologías para multimedia en la Web
Tecnología FLASH – Publicación
Formatos
Swf y HTML predet.
— Marcar si se desea
otro y aparece
nueva pestaña
— Seleccionar los
destinos de los
archivos
—
Máster en Ingeniería de la Web
69
Tecnologías para multimedia en la Web
Tecnologí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
Máster en Ingeniería de la Web
70
Tecnologías para multimedia en la Web
Tecnología FLASH – Publicació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
Máster en Ingeniería de la Web
71
Tecnologías para multimedia en la Web
Plataforma QuickTime
¿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
Máster en Ingeniería de la Web
72
Tecnologías para multimedia en la Web
Plataforma QuickTime
Formatos soportados
Formatos 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
Máster en Ingeniería de la Web
73
Tecnologías para multimedia en la Web
Plataforma QuickTime
Reproducción
—
Con player
—
En navegador
• Opciones de cache
• Opciones de copia en
disco duro
Máster en Ingeniería de la Web
74
Tecnologías para multimedia en la Web
Arquitecturas 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
Máster en Ingeniería de la Web
75
Tecnologías para multimedia en la Web
Arquitecturas 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)
Máster en Ingeniería de la Web
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.
76
Tecnologías para multimedia en la Web
Audio 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
Máster en Ingeniería de la Web
77
Tecnologías para multimedia en la Web
Audio y vídeo continuo, Streaming
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.
Máster en Ingeniería de la Web
78
Tecnologías para multimedia en la Web
Audio y vídeo continuo, Streaming
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.
Máster en Ingeniería de la Web
79
Tecnologías para multimedia en la Web
Audio y vídeo continuo, Streaming
Arquitectura de un sistema streaming
Máster en Ingeniería de la Web
80
Tecnologías para multimedia en la Web
Audio y vídeo continuo, Streaming
Arquitectura de un sistema streaming
—
Sistemas de
producción
—
Servidor de
streaming
—
Máster en Ingeniería de la Web
Cliente
81
Tecnologías para multimedia en la Web
Audio y vídeo continuo, Streaming
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
Máster en Ingeniería de la Web
82
Tecnologías para multimedia en la Web
Audio y vídeo continuo, Streaming
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.
Máster en Ingeniería de la Web
83
Tecnologías para multimedia en la Web
Audio y vídeo continuo, Streaming
Arquitecturas y formatos propietarios
—
—
—
Windows Media
Real Network
Quick Time
Soluciones libres
—
—
VideoLAN
ICECAST
Máster en Ingeniería de la Web
84
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ía
Conocer procesos de optimización y automatización de
imágenes para la Web
Conocer 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
Máster en Ingeniería de la Web
85
Ejercicios propuestos
Máster en Ingeniería de la Web
86