Upload
vudieu
View
218
Download
0
Embed Size (px)
Citation preview
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
Máster en Ingeniería de la Web 3
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
Máster en Ingeniería de la Web 4
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
Máster en Ingeniería de la Web 5
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
Máster en Ingeniería de la Web 6
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 7
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
Máster en Ingeniería de la Web 8
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 9
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
Introducción, Multimedia en la Web Etiquetas HTML para contenidos multimedia
Máster en Ingeniería de la Web 10
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
Introducción, Multimedia en la Web Etiquetas HTML para contenidos multimedia
Máster en Ingeniería de la Web 11
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
Introducción, Multimedia en la Web Etiquetas HTML para contenidos multimedia
Máster en Ingeniería de la Web 12
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.
Introducción, Multimedia en la Web Etiquetas HTML para contenidos multimedia
Máster en Ingeniería de la Web 13
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
Introducción, Multimedia en la Web Etiquetas HTML para contenidos multimedia
Máster en Ingeniería de la Web 14
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 15
¿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
Máster en Ingeniería de la Web 16
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,
Máster en Ingeniería de la Web 17
Interfaz de trabajo
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 18
Barra de Documento
Barra Insertar— Común, Diseño, Formularios, Texto, HTML, Código servidor,
Aplicación, Flash.
Barra de Estado
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 19
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 20
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 21
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 22
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 23
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
• Sucesión de botones 4 estados con memoria de estado
Máster en Ingeniería de la Web 24
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 25
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 26
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)
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 27
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 28
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 29
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 30
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
Autoría Web con editores visualesInclusión de contenidos con Dreamweaver
Máster en Ingeniería de la Web 31
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
Máster en Ingeniería de la Web 32
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
Máster en Ingeniería de la Web 33
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
Máster en Ingeniería de la Web 34
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.
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 35
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.
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 36
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
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 37
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.
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 38
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
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 39
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)
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 40
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
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 41
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”
Optimización de imágenes para la Web Imágenes en la Web
Máster en Ingeniería de la Web 42
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 Imágenes en la Web
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— 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 44
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á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).
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
Barra de Herramientas
Inspector de propiedades
Paneles de trabajo
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
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 47
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 48
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 49
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 50
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
Máster en Ingeniería de la Web 51
¿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
Máster en Ingeniería de la Web 52
¿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
Máster en Ingeniería de la Web 53
¿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
Máster en Ingeniería de la Web 54
¿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.
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 55
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
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 56
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
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 57
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
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 58
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.
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 59
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.
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 60
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.
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 61
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
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 62
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
Tecnologías para multimedia en la WebTecnología FLASH
Máster en Ingeniería de la Web 63
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
Máster en Ingeniería de la Web 64
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
Tecnologías para multimedia en la WebTecnología FLASH – Contenidos Multimedia
Máster en Ingeniería de la Web 65
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
Tecnologías para multimedia en la WebTecnología FLASH – Contenidos Multimedia
Máster en Ingeniería de la Web 66
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
Tecnologías para multimedia en la WebTecnología FLASH – Contenidos Multimedia
Máster en Ingeniería de la Web 67
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
Tecnologías para multimedia en la WebTecnología FLASH – Contenidos Multimedia
Máster en Ingeniería de la Web 68
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
Tecnologías para multimedia en la WebTecnología FLASH – Contenidos Multimedia
Máster en Ingeniería de la Web 69
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
Máster en Ingeniería de la Web 70
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
Tecnologías para multimedia en la WebTecnología FLASH – Publicación
Máster en Ingeniería de la Web 71
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
Tecnologías para multimedia en la WebTecnología FLASH – Publicación
Máster en Ingeniería de la Web 72
¿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
Máster en Ingeniería de la Web 73
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
Máster en Ingeniería de la Web 74
Tecnologías para multimedia en la WebPlataforma QuickTime
Reproducción— Con player
— En navegador• Opciones de cache• Opciones de copia en
disco duro
Máster en Ingeniería de la Web 75
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
Máster en Ingeniería de la Web 76
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.
Máster en Ingeniería de la Web 77
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
Máster en Ingeniería de la Web 78
Tecnologías para multimedia en la WebAudio 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 79
Tecnologías para multimedia en la WebAudio 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 80
Tecnologías para multimedia en la WebAudio y vídeo continuo, Streaming
Arquitectura de un sistema streaming
Máster en Ingeniería de la Web 81
Tecnologías para multimedia en la WebAudio y vídeo continuo, Streaming
Arquitectura de un sistema streaming
— Sistemas de
producción
— Servidor de
streaming
— Cliente
Máster en Ingeniería de la Web 82
Tecnologías para multimedia en la WebAudio 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 83
Tecnologías para multimedia en la WebAudio 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 84
Tecnologías para multimedia en la WebAudio 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 85
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
Máster en Ingeniería de la Web 86
Ejercicios propuestos