Comunicaciones multimedia Web Multimedia Daniel A. Rodríguez Silva [email protected] Octubre de 2008 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.Elementos multimedia en la web 6.Conclusiones 7.Referencias
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
Introducción (I)
• El uso de Internet se ha incrementado enormemente en los últimos años:
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
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)
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
Introducción (y III)
• Los contenidos de Internet son cada vez más variados y vistosos: • Digitalización de la información • Audio: MP3 • 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 Web flexible
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
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 Máster en Aplicaciones de Procesado de Señal en Comunicaciones
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 • 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
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
Evolución de la web (y III)
• La evolución de la web implica un cambio en la forma de diseñarla: • Mejoras visuales • Mayor dinamismo e interactividad • Rapidez en las respuestas: comunicación asíncrona
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
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 Máster en Aplicaciones de Procesado de Señal en Comunicaciones
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 Título da páxina Título 1
Párrafo
Enlace
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
AJAX: XHTML (II)
• • • • • • • • • • •
Todas las etiquetas se deben cerrar siempre: o 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: Título Los valores de los atributos deben sempre ir entre comillas (simples o dobles):
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: Solo-lectura Los atributos desaprobados en HTML 4.01 no forman parte de XHTML: Incorrecto: Texto Azul Correcto: Texto Azul
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
AJAX: XHTML (y III)
Shady Grove
Aeolian
Over the River, Charlie
Dorian
• 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)
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
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 com una página web, se provee el lenguaje JavaScript de una implementación del DOM. Máster en Aplicaciones de Procesado de Señal en Comunicaciones
AJAX: Javascript (DOM)
• Existen 3 modelos de obxecto: • O núcleo da linguaxe e librerías Javascript • O modelo de obxecto de navegador •
Depende do propio navegador (p.ex.: window.alert() )
• O modelo de obxecto de documento (DOM)
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
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 Añade muchas mejoras
Máster en Aplicaciones de Procesado de Señal en Comunicaciones
AJAX: CSS (II)
Exemplo 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; }