Diapositiva 1

Transcripción

Diapositiva 1

Comunicaciones multimedia
Web Multimedia
Daniel A. Rodríguez Silva
[email protected]
Diciembre de 2011
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
Índice
1.Introducción
2.Evolución de la web: Web 2.0
3.Comunicación asíncrona: AJAX
4.Rich Internet Applications (RIA)
5.Multimedia en la web, HTML5
6.Conclusiones
Introducción (I)
• El uso de Internet se ha incrementado
enormemente en los últimos años:
Introducción (II)
• Causas:
• Tecnologías al alcance de todos
• Mayor formación informática
• Uso de internet como medio de difusión,
profesional, ocio...
• Abaratamiento del acceso (ADSL, HSDPA)
Introducción (y III)
• Los contenidos de Internet son cada vez más
variados y vistosos:
• Digitalización de la información
• Audio: MP3, WMA, OGG
• Imágenes: Cámaras digitales
• Vídeo: TDT, DVD, DIVX, HDTV
• Posibilidad de acceder a Internet desde
multitud de dispositivos: móvil, PS, TV
• Cada vez más dispositivos permiten visualizar
contenidos multimedia  Adaptación Web
Evolución de la web (I)
• Web 1.0:
• Internauta usuario pasivo
• Búsqueda de información
• Comunicación básica entre usuarios : chats,
foros,…
• Web 2.0:
• Internauta pasa a ser el protagonista.
• Compartir es la clave  comunidades
• Contenidos cambian continuamente 
colaboración usuarios  Redes sociales
Evolución de la web (II)
• La Web 2.0. es un concepto acuñado por Tim O’Reilly en
el año 2004 y constituye un cambio de paradigma.
• La Web 2.0 se basa en tres principios fundamentales:
• La Red Social: se trata de conectar personas, no
ordenadores  Blogs, MySpace, Facebook, Twitter
• Contenidos generados por el usuario: El
internauta participa en dos direcciones: Obtiene
contenidos e introduce contenidos (etiquetados) 
Wikipedia, Flickr, YouTube
• La sabiduría de la multitud: la colaboración de gran
cantidad de internautas dentro de una red social eleva
el volumen y el valor de los contenidos hasta límites
insospechados  Wikipedia, Foros
Evolución de la web (y III)
• La evolución de la web
implica un cambio en su
diseño:
• Mejoras visuales
• Mayor dinamismo e
interactividad
• Rapidez en las
respuestas
comunicación
asíncrona
Comunicación Asíncrona: AJAX
• Supone una revolución en cuanto al interfaz web.
• Repercusión:
• Usuarios
• Interfaz más atractiva
• Reducción de tiempos de espera
• Mayor interactividad y dinamismo
• Programadores
• Diferente enfoque de las aplicaciones web
• Dominio de XHTML + Javascript + CSS
• Concepto de comunicación asíncrona
• No es una nueva tecnología, sino la combinación de varias
existentes: XHTML + Javascript + CSS
AJAX: XHTML (I)
• HTML: HyperText Markup Language
• No es lenguaje de programación; es lenguaje de
descripción de documentos.
• Etiquetas permiten estructurar los contenidos.
• Evolución de HTML  XHTML: sigue el estándar XML
<html>
<head>
<title>Título da páxina</title>
</head>
<body>
<h1>Título 1</h1>
<p><em>Párrafo</em></p>
<br/>
<img src="imaxe.png" alt="Imaxe"></img>
<a href="enlace.html">Enlace</a>
</body>
</html>
AJAX: XHTML (II)
•
•
•
•
•
•
•
•
•
•
•
Todas las etiquetas se deben cerrar siempre: <br/> o <br></br>
Los elementos anidados deben tener un orden correcto de
apertura/cierre (el que se abre último, debe cerrarse primero)
Insertar elementos de línea dentro de elementos de bloque:
<h2><em>Título</em></h2>
Los valores de los atributos deben sempre ir entre comillas (simples o
dobles): <td rowspan="3">
Las imágenes siempre deben llevar el atributo “alt” de texto alternativo
El símbolo & (ampersand) debe ser usado únicamente como parte de
una entidad: Tom & Jerry
Los nombres de elementos y atributos deben ir en minúsculas
Los atributos siempre deben ir con un valor: <textarea
readonly="readonly">Solo-lectura</textarea>
Los atributos desaprobados en HTML 4.01 no forman parte de XHTML:
Incorrecto: <font color="#0000FF">Texto Azul</font>
Correcto: <span style="color: #0000FF;">Texto Azul</span>
AJAX: XHTML (y III)
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>
• Document Object Model (Modelo de Objetos del Documento):
– Es una interfaz de programación de aplicaciones (API) para
documentos XML.
– Define la estructura lógica de los documentos y el modo en
que se accede y manipula un documento.
– Existen varios niveles de DOM (ha ido evolucionando):
• Level 0, Level 1 (XML, HTML), Level 2 (CSS, Eventos), Level 3 (Xpath)
AJAX: Javascript
• Lenguaje de programación para web que permite
ejecutar rutinas en el lado del cliente, aportando
dinamismo a la página y permitiendo a los usuarios
realizar interacciones complejas
• Es un lenguaje interpretado, no requiere compilación
• No es un lenguaje orientado a objetos propiamente dicho,
ya que no dispone de Herencia. Es más bien un lenguaje
basado en prototipos, ya que las nuevas clases se
generan clonando las clases base (prototipos) y
extendiendo su funcionalidad.
• Todos los navegadores interpretan el código JavaScript
integrado dentro de las páginas web. Para interactuar con
una página web, se provee el lenguaje JavaScript de una
implementación del DOM.
AJAX: Javascript (DOM)
• Existen 3 modelos de objeto:
• El núcleo del lenguaje y librerías Javascript
• El modelo de objeto de navegador
•
Depende del propio navegador (p.ej.: window.alert() )
• El modelo de objeto de documento (DOM)
AJAX: CSS (I)
• Cascade Style Sheets: Hojas de estilo en cascada
• Definiciones que permiten “decorar” una página web
• Interesa separar sempre el contenido de la
presentación
• Se aplican los tags del documento que tiene el contenido
(XHTML)
• Modelo de caja:
• Los elementos descritos en CSS están enmarcados en
boques o “cajas” a las cuales se le dan propiedades
• Cada caja tiene un área de contenido y las áreas
circundantes opcionales de padding, border y margin
• Con CSS es complejo tratar con curvas
• CSS2,CSS3  Añaden muchas mejoras
AJAX: CSS (II)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML><HEAD><TITLE>Exemplo</TITLE>
<STYLE type="text/css">
UL {
background: #ffc62d; margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px; /* No se especifica borde */
}
LI {
color: black; /* color del texto negro */
background: #8080ff; /* Contenido, padding será violeta */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* 0px para padding right */
list-style: none /* sin viñeta antes dun ítem */
/* Ningún borde definido */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* ancho para todos los lados */
border-color: black;
}
</STYLE></HEAD>
<BODY>
<UL>
<LI>El primer elemento
<LI class="withborder”>El segundo elemento de la lista es
más largo y se ajusta.
</UL>
</BODY></HTML>
AJAX: DHTML
• DHTML surge de juntar todas las tecnologías anteriores.
• Típicamente utilizaremos el atributo id para acceder a los
elementos HTML de forma dinámica desde Javascript:
• <div id="Nombre"> para elementos de bloque
• <span id="Nombre"> para elementos de línea
• Si queremos aplicar estilos a un elemento de este tipo,
anteponemos una # al identificador
• #Nombre { background: white; color: black }
• Se utiliza el método getElementById para instanciar el
elemento con identificador desde Javascript y poder
acceder así a sus propiedades:
• var instanciaNombre =
document.getElementById("Nombre");
• instanciaNombre.style.color = "blue";
AJAX
• AJAX viene siendo DHTML + comunicación
asíncrona con XML
• Utiliza para ese fin el objeto XMLHttpRequest
• No todos los navegadores instancian de la
misma forma este objeto:
• Firefox, Mozilla, Netscape:
• new window.XMLHttpRequest;
• Internet Explorer (a partir da versión 5.0):
• new window.ActiveXObject("Microsoft.XMLHTTP")
o mejor
• new window.ActiveXObject("MSXML2.XMLHTTP")
AJAX: XMLHttpRequest
• onreadystatechange (lectura/escritura): permite asignar
un manejador (función) para el evento que aparece
cuando cambia readyState.
• readyState (sólo lectura): estado de la petición
• 0: no iniciado
• 1: cargando
• 2: cargado
• 3: interactivo
• 4: completo
• responseText (sólo lectura): respuesta como String
• responseXML (sólo lectura): respuesta como objeto XML
• status (sólo lectura): código estado de la respuesta HTTP
• 200: Ok
• 404: No encontrado
• statusText (só lectura): texto do estado da resposta HTTP
AJAX: Ejemplo (I)
•
onclick="obtenerDatos('http://localhost/ajax/datos.php','divTexto')"
function obtenerDatos(url, idEtiqueta) {
var xhr=crearXHR();
if (xhr) {
var obx=document.getElementById(idEtiqueta);
xhr.open(“POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState==4 && xhr.status==200) {
obx.innerHTML = xhr.responseText;
}
}
var nombre=“Pepe”;
xhr.send(“nombre=“+nombre); // Datos POST
}
}
AJAX: Ejemplo (II)
• Script PHP server-side (datos.php)
<?php
$nombrePost=$_POST[“nombre"];
$email=getEmail($nombrePost); // lee el email de una BD
header("Content-type: text/plain");
$res = ‘<table><tr>
<td>Nombre: $nombrePost</td>
<td>Email: $email</td>
</tr><table>’;
echo $res;
?>
AJAX: Ejemplo (III)
<html><head><title>Exemplos AJAX</title></head>
<script language = "javascript">…</script>
<body><h2>Exemplo 3</h2>
<input type="button" value="Mostrar datos"
onclick="obtenerDatos('http://localhost/ajax/datos.php','divTexto');">
<br/><div id="divTexto"><p>La respuesta irá aquí</p></div>
</body></html>
La respuesta irá aquí
AJAX: Ejemplo (y IV)
<html><head><title>Exemplos AJAX</title></head>
<script language = "javascript">…</script>
<body><h2>Exemplo 3</h2>
<input type="button" value="Mostrar datos"
onclick="obtenerDatos('http://localhost/ajax/datos.php','divTexto');">
<br/><div id="divTexto"><p>La respuesta irá aquí</p></div>
</body></html>
Nombre: Pepe
Email: [email protected]
Ventajas AJAX
•
El interfaz tiene un tiempo de respuesta menor dando al usuario la
sensación de obtener respuestas casi instantáneas la mayor parte del
tempo.
•
El usuario puede seguir interactuando con la página mientras la
respuesta no llega.
•
Si una sección de una página encuentra un error, otras secciones no se
verán afectadas y los datos introducidos por el usuario no se perderán.
•
En las aplicaciones web clásicas se usan múltiples conexiones para
acelerar la descarga de los distintos elementos que hay dentro de
<body>, pero los elementos enlazados desde la cabecera (scripts,
CSSs) van en una única conexión bajando el rendimento. Con AJAX no
es necesario recargar la cabecera, pudiendo hacer múltiples
conexiones para obtener los diferentes contenidos dinámicamente.
•
El tráfico desde y hacia el servidor es reducido considerablemente,
porque no es necesario enviar la página completa de nuevo.
Inconvenientes AJAX
•
•
•
•
•
•
Construir aplicaciones web basadas en AJAX puede incrementar el tiempo de
desarrollo y costes. La mezcla de tecnologías y la falta de entornos de
programación que las soporten de forma conjunta dificulta, de momento la
programación y depuración de este tipo de aplicaciones.
Aún que AJAX comprende un conjunto de tecnologías muy utilizadas, los
frameworks y componentes disponibles aún no están totalmente maduros ni
estandarizados. Por ejemplo, no se puede recibir algo que no sea “texto”
Aún no están resueltos todos los aspectos relacionados con la seguridad y
privacidad. Existe excepticismo respecto a la seguridad de las aplicaciones AJAX.
La forma asíncrona con la que AJAX se comunica con el servidor entra en conflicto
con el uso tradicional de los favoritos (bookmarks) o del botón “Atrás”, ya que no
se guarda el estado exacto de la página después de unas cuantas interacciones.
Accesibilidad. No todos los navegadores (especialmente los de móviles) tienen
soporte completo para Javascript y para el objeto XMLHttpRequest en el que se
basa la comunicación asíncrona, que además no tiene un comportamento
uniforme.
AJAX no permite acceder a la información de otros servidores: el propio objeto
XMLHttpRequest, debido a restricciones de seguridad, sólo puede acceder a
información del mismo host donde está alojada la página inicial.
Ejemplos AJAX
•
•
•
•
•
•
•
•
•
Google search: http://www.google.com
Google maps: http://maps.google.es
Album fotos Flickr: http://www.flickr.com
Netvibes: http://www.netvibes.com
Bindows: http://www.bindows.net/demos
Pchess: http://www.jesperolsen.net/PChess
eyeOS: http://eyeos.org
Meebo: http://www.meebo.com
Protopage: http://www.protopage.com/
Adobe Flash
• Aplicación de Adobe (de Macromedia antiguamente) en
forma de animación que trabaja sobre "Fotogramas“.
• Permite crear contenido interactivo visualmente
atractivo (principalmente para web)
• Utiliza gráficos vectoriales e imágenes ráster, sonido,
código de programa, flujo de vídeo y audio bidireccional
• Flash es el entorno y Flash Player es la MV para ejecutar
los archivos generados con Flash (SWF).
• El plugin del reproductor es multiplataforma
• Entorno de desarrollo visual, pero se complementa con
un lenguaje de script (Action Script)
• Tecnología ampliamente utilizada para mostrar contenidos
web multimedia no complejos
• Competencia:
• Shockwave: menos popular pero más potente.
• Silverlight: solución de Microsoft
AJAX vs. Flash
•
•
•
•
•
•
•
•
•
Tecnologías diferentes que pueden coexistir
Flash: más orientado a animaciones y multimedia
Con AJAX son mucho más costosas en tiempo y esfuerzo.
Flash se programa con entornos visuales (programar es
más sencillo), pero normalmente de pago.
Flash no es libre y necesita plugin, pero está muy
extendido
Existen más librerías para AJAX que para Flash
Flash necesita requisitos hardware más exigentes que
AJAX, sobre todo para multimedia y animaciones.
Contenidos de páginas con Flash no adecuados para los
buscadores, pero tampoco todos los contenidos dinámicos
de páginas AJAX
Las páginas con Flash son más difíciles de copiar
Aplicaciones Web Híbridas (Mashups)
•
•
Sitios web o aplicaciones web que usan contenido de otras
aplicaciones web para crear un nuevo contenido completo,
consumiendo servicios directamente siempre a través de
protocolo HTTP.
• Utilizan comunicación asíncrona para obtener los contenidos
• Existe un filtrado de información para extraer sólo lo
relevante
Ejemplos:
•
•
Web que muestra noticias de deportes sacadas de RSS de varios portales de
deportes: http://news.google.es/news
Combinación Google Maps + Inmuebles: http://www.housingmaps.com
Panoramio: http://www.panoramio.com
•
•
•
•
Yahoo Pipes: http://pipes.yahoo.com
Microsoft Popfly (obsoleto): http://www.popfly.com
OpenKapow: http://openkapow.com
Intel Mash Maker http://mashmaker.intel.com/web/
•
•
Principales aplicaciones para desarrollar mashups:
Rich Internet Applications (RIA)
• Tendencia de la web hacia aplicaciones de escritorio
• Navegadores más inteligentes y potentes 
Navegador es el punto de entrada hacia servicios web
• Sistema Operativo local: Navegador + S.O. Remoto
• Esquema petición / respuesta ineficiente  tiende a
desaparecer eliminando el concepto de página
• AJAX no es más que un “parche” utilizando las
tecnologías disponibles hasta la fecha, pero no constituye
realmente un nuevo paradigma.
• Necesidad de un nuevo paradigma que aporte nuevas
tecnologías apropiadas para esta evolución de la web
• RIA es un término inventado por Macromedia en un
intento de establecer las bases de este nuevo paradigma
RIA: Concepto (I)
•
•
Es un nuevo paradigma de
desarrollo de aplicaciones web
que está emergiendo actualmente
con mucha fuerza en el mundo de
las Tecnologías de la Información y
los negocios.
Principales características:
• Riqueza: habilidad para
incorporar interactividad e
interfaces de usuario intuitivas
en el cliente
• Alcance: habilidad de la
aplicación para estar disponible
para cualquier usuario en el
lugar del planeta en el que éste
se encuentre.
RIA: Concepto (y II)
• Relación entre las aplicaciones web y las de escritorio
considerando el tipo procesamiento (cliente-servidor):
RIA: Características (I)
• Comúnmente constituye una arquitectura orientada a
servicios (SOA) que pretende ofrecer a los usuarios una
solución eficiente basada en Internet usando estándares.
• Encaja dentro del tradicional proceso de desarrollo
multicapa y se integra en los sistemas actuales
fácilmente.
• Puede servir como capa de presentación sobre Web
Services
• Puede tratar con aplicaciones complejas, reduciendo el
coste de desarrollo.
RIA: Características (y II)
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Multiplataforma
Gran interactividad, interfaces dinámicos y potentes
Procesado y renderización en el cliente
Posibilidad de realizar tareas complejas del lado de cliente
Buen funcionamiento independientemente del BW
Utilizar audio, video, imágenes y texto conjuntamente
Usar audio y vídeo de forma integrada e independientemente
del servidor o back end al cual está conectado.
Soporte para acceso desde dispositivos móviles
Enviar y recibir datos asíncronamente en background
Aceso a varios tipos de servicios multicapa (.NET, Java,
ColdFusion..) y a bases de datos
Uso de estándares (XML-RPC, SOAP, REST…) en aplicaciones
basadas en Web Services
Facilidad de integración en aplicaciones existentes
Extensible y escalable
Ser accesible desde cualquier parte
Utilizar contenido ubícuo
Plataformas RIA: Adobe
•
•
•
•
•
•
Cliente: Flash Player (con navegador), Adobe AIR (sin navegador)
Framework: Flex
Servidor: Flash Media Server, Cold Fusion…
Flex permite a aplicaciones Flash interactuar con soluciones de servidor
mediante varios protocolos como SOAP (Simple Object Access Protocol),
REST o XML via HTTP.
Flex Data Service ofrece comunicación con JavaEE application server,
real-time streaming, mensajería, seguridad y gestión de transacciones
Flex se utiliza con aplicaciones que se ejecutan dentro de un navegador
Plataformas RIA: Microsoft
• Cliente: Silverlight (plugin)
• Framework: Silverlight (XAML)
• Servidor: .NET
• Silverlight o WPF/E
(Windows Presentation
Foundation / Every-where)
permite construir
aplicaciones basadas en
.NET para ejecutarse en
el navegador de forma
similar a Flash, pero
usando estándares
(XAML).
Plataformas RIA: Sun
•
•
•
•
•
•
Cliente: Java Applet (plugin)
Framework: JavaFX (JavaFX Script)
Servidor: J2EE
Java siempre tuvo
presencia para crear
aplicaciones del lado
del cliente:
• Java Rich Client
• Applets Java
• Java Web Start
JavaFX permite
desarrollar interfaces
de cliente de forma
sencilla capaces de
interactuar con
servidores Java.
Funciona en cualquier
plataforma con JVM
instalada
Plataformas RIA: Otras soluciones
•
•
•
•
OpenLaszlo: Similar a Flex, usa Flash o DHTML/AJAX como
clientes. Servidor basado en servlets Java.
GWT (Google Web Toolkit): API que permite a los usuarios
crear aplicaciones AJAX con Java. Es Open Source y soporta
widgets.
ULC (Ultra Light Client): es una librería Java para construir
aplicaciones cliente ligeras con JEE gracias a Canoo AG. ULC
consiste en un motor de presentación ligero para el cliente
basado en Java que puede ser instalado la primera vez o
ejecutarse como un applet cada vez que sea necesario.
Echo: es una plataforma creada por Nextapp. Permite construir
aplicaciones del lado del servidor con Java y describir la GUI con
una API Java orientada a componente. En el lado del cliente se
mostrará una intefaz basada en AJAX. La transformación de la
interfaz Java a contenidos AJAX es realizada de forma
transparente por Echo.
Plataformas RIA: Comparativa
Demanda del mercado
Cloud Computing: concepto (I)
Aplicaciones de escritorio
DATOS
APLICACIÓN
• Necesitan instalación y mantenimiento
• Su rendimiento depende del equipo donde se ejecuten.
• Puede requerir permisos para instalarse en el S.O.
Cloud Computing: concepto (y II)
Aplicaciones en la nube
DATOS
APLICACIÓN
• Datos accesibles desde
cualquier lugar con una
conexión a Internet
• No necesitan instalación
• Recursos bajo demanda
Cloud Computing: niveles
• Nivel de aplicación (SaaS):
Aplicaciones típicas finales
• Nivel de plataforma (PaaS):
Ayuda para realizar tus propias
aplicaciones en la nube
• Nivel de infraestructura (IaaS)
Acceso a recursos físicos:
• CPU
• Memoria
• Máquinas Virtuales
Cloud Computing: ejemplos
Google News
Google
Calendar
Google
Docs
Gmail
Google
Talk
Google Reader
Multimedia en la Web (I)
• Imágenes:
• Es el elemento más veterano
• Formatos más utilizados: jpg, gif, png
• Es crucial ajustar el tamaño de la imagen para no
sobrecargar la página
• Navegadores manejan imágenes de forma nativa
• Audio:
• Formatos más utilizados: mp3, wma, ogg
• Gracias a la alta compresión se ha
extendido con rapidez
• Necesario plugin para reproducción
• Vídeo:
• El tamaño es el principal problema
• Formatos más utilizados: flv, wmv, avi, mpg, mov
• Necesario plugin para reproducción
Multimedia en la Web (II)
•
FLV es el formato de vídeo más utilizado gracias a su
integración con aplicaciones Flash
•
•
Formato vídeo:
•
•
•
Contienen bit streams de vídeo que son una variante del estándar
H.263, bajo el nombre de Sorenson Spark
Flash Player 8+ soporta video On2 TrueMotion VP6  mejor calidad
visual  Más costoso computacionalmente
Formato audio:
•
Codificado como MP3, pero el grabado con micrófono usa el códec
propietario Nellymoser.
También soporta audio sin comprimir ADPCM
•
•
•
•
Fichero .FLV
Dentro de un .SWF
Descarga progresiva mediante HTTP (YouTube, Metacafé…)
Mediante el protocolo RTMP (Flash Media Server)
•
•
Debe existir una aplicación Flash en el cliente encargada de la
reproducción.
Difusión:
Multimedia en la Web (y III)
• Gráficos vectoriales:
• Formato SVG (Scalable Vector Graphic)
• No muy extendido
• Sólo lo soportan los navegadores más recientes
• Formato PDF (Portable Document Format)
• Muy extendido
• Puede contener documentos complejos
• Necesita plugin
• Animaciones:
• GIF/PNG animado: útil para animaciones sencillas
• Flash / Shockwave / Silverlight:
• Animaciones más sofisticadas y vistosas
• Necesita plugin
• Applet Java: útil para animaciones muy complejas
Tipos MIME
•
•
Multipurpose Internet Mail Extensions
• Especificaciones dirigidas al intercambio a través de Internet
de todo tipo de archivos (texto, audio, vídeo, etc.) de forma
transparente para el usuario.
Principales tipos MIME multimedia:
Description of Data Content
Typical Filename Extensions
MIME type/subtype
Text and Text-Related Types
HTML text data (RFC 1866)
Plain text: documents; program listings
Document Stylesheet Types
html htm
txt c c++ pl cc h
text/html
text/plain
Cascading Stylesheets
Image Types
css
text/css
GIF
Portable Network Graphics
JPEG
TIFF
Audio/Voice/Music Related Types
gif
png
jpeg jpg jpe
tiff tif
image/gif
image/x-png
image/jpeg
image/tiff
"basic"audio - 8-bit u-law PCM
Macintosh audio format (AIpple)
Microsoft audio
MPEG audio
MPEG-2 audio
MIDI music data
Video Types
au snd
aif aiff aifc
wav
mpa abs mpega
mp2a mpa2
mmid
audio/basic
audio/x-aiff
audio/x-wav
audio/x-mpeg
audio/x-mpeg-2
x-music/x-midi
MPEG video
MPEG-2 video
Macintosh Quicktime
Microsoft video
mpeg mpg mpe
mpv2 mp2v
qt mov
avi
video/mpeg
video/mpeg-2
video/quicktime
video/x-msvideo
Insertar Elementos Multimedia (I)
•
•
No consenso en etiquetas para incrustar elementos multimedia:
BGSOUND, EMBED, APPLET, OBJECT
Intento de normalización  Etiqueta OBJECT (HTML 4.01)
Insertar Elementos Multimedia (II)
Animación Flash
Fichero MP3
Multimedia en la Web: Imágenes
• Portales destacados basados en imágenes:
• Galería de fotos on-line:
Flickr (http://www.flickr.com),
Photobucket (http://photobucket.com)
• Catálogo de fotos on-line:
Istockphoto (http://www.istockphoto.com),
Fotolia (http://es.fotolia.com)
• Blogs basados en fotografías:
Fotoblog (http://www.fotoblog.com),
Animus3 (http://www.aminus3.com)
• Geolocalización de fotografías:
Panoramio (http://www.panoramio.com)
Multimedia en la Web: Audio
• Portales destacados basados en audio:
•
•
•
Música (via streaming):
• Listas de reproducción personalizadas:
LastFM (http://www.last-fm.es ), Jiwa
(http://www.jiwa.fm), Rockola (http://www.rockola.fm)
• Radio gratis on-line:
Shoutcast (http://www.shoutcast.com),
Podcast-es (http://www.podcast-es.org)
VoIP:
• Llamadas telefónicas a través de internet:
Google Voice (https://www.google.com/voice), Gizmo5
(http://www.gizmo5.com), Jajah (http://www.jajah.com)
Texto-a-voz:
• Permite leer textos en voz alta:
Loquendo: http://www.loquendo.com/es/demo-center/tts-demo/spanish/,
Sonowebs (http://www.sonowebs.com),
Vozme (http://vozme.com)
Multimedia en la Web: Vídeo
• Portales destacados basados en vídeo:
• Difusión (donde usuarios suben vídeos, series, pelis):
• YouTube: http://www.youtube.com
• Metacafé: http://www.metacafe.com
• Dailymotion: http://www.dailymotion.com
• Megavideo: http://www.megavideo.com
• TV:
• YouTube: muchos canales de TV publican vídeos
• TerraTV: http://www.terra.tv (tb alta definición)
• Canales TV:
• RTVE: http://www.rtve.es (directo)
• Telecinco: http://mitele.telecinco.es
• LaSexta: http://www.misexta.tv
HTML5
• Nueva especificación del W3C para el estándar web
• HTML5 = HTML5 + ECMAScript + CSS3 + SVG +
+ Geolocalización + WebApps
• Características:
•
•
•
•
•
•
•
•
•
•
•
Compatibilidad: evolución del HTML4
Utilidad: centrada más en usuarios que en desarrolladores
Interoperabilidad: facilidad para intercambio de información
Acceso universal: independencia de dispositivos y plataformas
Semántica: dota de significado la información que maneja.
Almacenamiento offline: datos accesibles sin conexión.
Acceso a dispositivos: geolocalización, entradas audio/video…
Conectividad: web sockets y eventos “de servidor”.
Rendimiento e integración: web más dinámica y rápida.
CSS3: mejoras notables en la visualización final.
Multimedia: audio, video, 3D, dibujos, efectos, animaciones…
Multimedia en HTML5 (I)
•
•
•
•
•
•
Canvas: API que permite generar y renderizar dinámicamente
gráficos, mapas, imágenes, dibujos, animación…
SVG (Scalable Vector Graphics): utiliza XML para definir lo que
tiene que dibujar y se puede combinar con CSS y Javascript.
Contenedores audio/video:
• MPEG4 (.mov): basado en el contenedor QuickTime de Apple
• Flash Video (.flv): popular formato de Adobe Flash.
• Ogg (.ogv): estándar abierto (Theora+Vorbis)
• WebM: tiene el respaldo de Google (VP8+Vorbis).
• Audio Video Interleave (.avi): inventado por Microsoft.
Codecs soportados:
• Audio: MP3, AAC, Vorbis
• Video: H.264, Theora, VP8
Restricción: actualmente no se soporta streaming de audio/video
Etiquetas <audio>, <video> y <canvas> permiten insertar
audio, video y animaciones en el HTML sin necesidad de plugin.
• <video src="/videos/video1.ogg" controls=1 autoplay=1>
Multimedia en HTML5 (y II)
•
•
Características HTML5: http://slides.html5rocks.com/
Ejemplos video, canvas:
• http://www.dailymotion.com/html5
• http://people.mozilla.com/~prouget/demos/DynamicContentInj
ection/play.xhtml
Conclusiones
• La web ha evolucionado mucho desde sus inicios y han
surgido nuevas tecnologías que mejoran la experiencia
del usuario y la productividad
• Las webs son cada vez más vistosas y ricas en
contenido  necesitan soporte para la gran cantidad de
información multimedia digital que existe
• Aplicaciones web tienden a parecerse a aplicaciones
de escritorio aprovechando la gran capacidad de
computación de los clientes  S.O. remoto (WS, Cloud)
• Es necesario adaptar formatos digitales para poder
utilizar material multimedia en la web eficientemente
• Flash es actualmente la tecnología más utilizada para
visualizar contenidos multimedia en la web
• Formato contenidos multimedia cambia continuamente 
web multimedia en continua evolución  HTML5
Referencias
•
•
•
•
•
•
•
•
•
Lee Babin, “Beginning Ajax with PHP. From novice to
professional”, Ed. Apress, 2007
Dave Crane, Eric Pascarello, “AJAX in Action”, Ed. Manning,
2006
Wallace B. McClure, Scott Cate, Paul Glavich, Craig
Shoemaker, “Beginning Ajax with ASP.NET”
Antonio Paniagua Navarro, Flash CS4 Professional, Ed.
Anaya Multimedia, 2009
Y. Fain, V. Rasputnis, A. Tartakovsky, “Rich Internet
Applications with Adobe® Flex™ & Java™. Secrets of the
Masters”, Ed. SYS-CON Media, 2007
http://es.wikipedia.org/wiki/Rich_Internet_Application
http://theopensourcery.com/xmlria.htm
http://download.macromedia.com/pub/flash/whitepapers/ric
hclient.pdf
HTML5 draft: http://dev.w3.org/html5/spec/Overview.html

Diapositiva 1

Transcripción

Documentos relacionados

Descargar

http://www.myspace.com

COMO ACTUALIZAR AZ