Modelos de gestión de contenidos

Transcripción

1 NTSI Gestión de contenidos multimedia en sitios Web Objetivo: Proporcionar al alumno conceptos básicos sobre gestión de contenidos multimedia en sitios web de modo que conozca y diferencie las capacidades de cada una de las alternativas tecnológicas así como la complejidad técnica requerida. Introducción Por gestión de contenidos multimedia en sitios Web entendemos la capacidad de ofrecer archivos multimedia desde un servidor para que estos puedan ser obtenidos y visualizados mediante el uso de un navegador web. El primer diseño de los protocolos HTTP y HTML solo contemplaba la maquetación de contenidos basados en texto e imágenes estáticas.. Sin embargo no ha sido hasta hace poco con la llegada de la versión 5 del protocolo HTML que se ha formalizado la gestión nativa de contenidos multimedia en navegadores Web. A pesar de esto desde hace algunos años existen soluciones propietarias que han permitido incorporar el vídeo en las paginas Web. De todas ellas la más relevantes es el producto Adobe Flash que está soportado en todos los navegadores. Modelos de gestión de contenidos Descarga Es el mecanismo más simple y también el que ofrece menos capacidades. Se basa en asociar enlaces HTML con archivos binarios. El navegador permite acceder al contenido pero no interacciona con él sino que lo guarda en el directorio de descargas. Este modelo presenta las siguientes características: Todos los navegadores ofrecen soporte nativo es decir no hace falta instalar ningún tipo de aplicación. El navegador no interacciona con el contenido que puede ser: un documento de texto un vídeo o un programa ejecutable etc. La reproducción del contenido no se puede llevar a cabo hasta que se ha completado la descarga. Es necesario disponer de una aplicación adicional para visualizar el contenido Descarga continua Requiere de una aplicación o Plugin asociado al navegador capaz de iniciar la reproducción antes de completar la descarga. Este modelo presenta las siguientes características: Se requiere una aplicación externa asociada al navegador (plugin) ya que este no dispone de soporte nativo para reproducción multimedia. El fichero se visualiza dentro del navegador.

2 La reproducción se inicia inmediatamente después de activar la aplicación de reproducción. No existe un enlace HTML como tal asociado al contenido. Pseudo streaming El pseudo streamig es muy similar la descarga continua con la diferencia fundamental de que el punto de reproducción es seleccionable (seekable). En los dos modelos anteriores el archivo de media se descargaba de forma secuencial. En una película de 1:30 horas no es posible visualizar el minuto 50 hasta que no se hayan descargado los 49 minutos anteriores. En el modelo de pseudo streaming sin embargo es posible saltar del minuto 2 al 50 de forma inmediata sin descargar el contenido intermedio. Este modelo presenta las siguientes características: Se requiere una aplicación externa asociada al navegador (plugin) ya que este no dispone de soporte nativo para reproducción multimedia. El contenido se visualiza dentro del navegador. La reproducción se inicia inmediatamente después de activar la aplicación de reproducción. Es posible realizar saltos en la posición de reproducción Streaming Este es un modelo radicalmente diferente a los anteriores en el que no existe un archivo de descarga. El contenido se transmite en tiempo real al navegador. Es el modelo que más capacidades ofrece y el que requiere mayor complejidad de implementación. Se caracteriza por: Requiere un plugin asociado al navegador No existe un archivo de descarga sino que el media se transmite en el momento que tiene que ser reproducido Utiliza protocolo propios de transmisión como RTSP o RTMP Modelos de servicio Se definen como CDN (Content Delivery Network) a las redes de distribución de contenidos multimedia. En la actualidad existen dos modalidades principales: Video bajo demanda: En estas redes se ofrece un directorio de contenidos. Cada usuario selecciona el contenido que desea visualizar y el momento de inicio. Resulta apropiado para visualización de contenidos preexistentes. Ejemplo de estas redes es Youtube Difusión (Broadcast): En estas redes se ofrece una lista de canales que el usuario puede seleccionar. Todos los usuario conectados a un canal visualizan el mismo contenido es decir no es posible seleccionar el momento de inicio de los contenidos ni avanzar o atrasar la reproducción. Este modelo es muy apropiado para distribución de contenidos en directo. Un ejemplo de estas redes es Zattoo.

3 Gestión de contenidos con Adobe Flash En prácticas anteriores el alumno ha aprendido a insertar contenidos en páginas web a través de los siguientes mecanismos: Enlaces directos: Permiten acceder a los contenidos en formato binario. Tenemos libertad de seleccionar el contenido pero carecemos de interactividad Acceso a contenidos de CDN a través de enlaces directos: Un CDN nos ofrece un enlace no al contenido sino a la aplicación de visualización. Disponemos de media empotrado en la web pero limitado a los contenidos del CDN. Acceso a contenidos de CDN a través de Gadgets: Estamos limitados por las características de la aplicación

4 En esta práctica el alumno aprenderá a empotrar contenidos en paginas web sin depender de un CDN o gadget. Para ello usará una aplicación de reproducción basada en el plugin Flash de Adobe. Player: Es una aplicación programada en el lenguaje ActionScript que usa las capacidades de Adobe Flash para la reproducción de contenidos. Existen multitud de aplicaciones de este estilo que se ofrecen con licencias comerciales y también opensource: Flowplayer: DarkOnyx: anatomy.com/en Moyea: Es posible incluso construir un player a medida utilizando el lenguaje ActionScript. ( En esta practica el alumno usara la aplicación FlowPlayer para desarrollar varios ejemplos de gestión de contenidos. Configuración de FlowPlayer Todas las aplicaciones ActionScript se descargan desde la red junto con los contenidos HTML por lo que más que instalar se habla de configurar. El siguiente código muestra la configuración básica necesaria para FlowPlayer que se realiza directamente sobre el código HTML de la página Web <! - Referencia al código javascript que realizar la integración de la aplicación dentro del navegador El código se descarga junto a la página web desde un servidor de internet --> <script src=" <! - Enlace al contenido href: Establece la URL al archivo de media situado en internet id : Define quien gestiona el enlace. Por defecto el navegador --> <a href=" style="display:block;width:520px;height:330px" id="player"> </a> <! - Inicializa FlowPLayer flowplayer("player" "

5 Descarga continua con FlowPlayer FlowPlayer dispone de capacidad para realizar una descarga continua de ficheros con extensión flv que es el formato multimedia de Adobe. Para ello el alumno seguirá los siguientes pasos: Abrir el editor de texto GEDIT Insertar el siguiente código HTML <script src=" <!-- Añade un video con formato de descarga continua --> <a href=" style="display:block;width:520px;height:330px" id="player"> </a> flowplayer("player" " Insertar el enlace al contenido deseado Guardar el archivo con el nombre player_video_1.html Abrir el archivo creado con un navegador La misma operación se puede realizar para un archivo de audio (player_audio_1) <script src=" <a </a> href=" style="display:block;width:520px;height:26px" id="player"> flowplayer("player" " Pseudo Streaming con FlowPlayer FlowPlayer soporta pseudo streaming de los contenidos para ello es necesario seguir el siguiente procedimiento: Abrir el editor de texto GEDIT Insertar el siguiente código HTML

6 <script src=" clip: // make this clip use pseudostreaming plugin with "provider" property provider: 'pseudo' url: ' plugins: pseudo: url: 'flowplayer.pseudostreaming swf' Guardar el archivo como player_video_2.html y abrirlo con un navegador. Notas: La referencia al contenido se realiza ahora a través del parámetro url y no en el enlace <a>. Es necesario activar el plugin pseudo e indicar el enlace al código Combinación de medias FlowPlayer permite realizar una combinación de medias. El siguiente procedimiento genera una página en la que se combina un audio y una portada. Abrir el editor de texto GEDIT Insertar el siguiente código HTML <script src=" clip: // our song url: ' // "cover art" coverimage: '

7 Guardar el archivo con el nombre player_audio_2.html Abrir el archivo creado con un navegador Es posible también combinar el media con contenidos HTML (player_audio_3.html) <script src=" clip: // our song url: ' // "cover art" coverimage: ' plugins: // content plugin settings playinfo: url: 'flowplayer.content swf' backgroundcolor:'#002200' top:25 right: 25 width: 160 height: 60 html: '<p>artist: <b>the National</b></p> <p>album: <b>block</b></p> <p>title: <b>fake Empire</b></p>' Creación de un CDN con FlowPlayer FlowPlayer dispone de funcionalidad para la inserción y compartición de medias en páginas web permitiendo de esta forma crear un pequeño CDN basado en un modelo de vídeo bajo demanda. Para la compartición de un contenido es necesario ejecutar el siguiente procedimiento Abrir el editor de texto GEDIT Insertar el siguiente código HTML <script src=" clip: // make this clip use pseudostreaming plugin with "provider" property provider: 'pseudo'

8 url: ' plugins: pseudo: url: 'flowplayer.pseudostreaming swf' sharing: // load the sharing plugin url: 'flowplayer.sharing swf' Guardar el archivo como player_video_3.html y abrirlo con un navegador. Seleccionar la opción Embed </> dentro del área del player Editar la página web donde queramos compartir el contenido. Para ello el alumno accederá a su práctica de sitios Web de Google Sites. Seleccionará una de las páginas y empotrará el contenido insertándolo directamente a través de la opción HTML del editor

9 También es posible compartir contenidos de audio (player_audio_5.html) <script src=" clip: // our song url: ' // "cover art" coverimage: ' plugins: // content plugin settings playinfo: url: 'flowplayer.content swf' backgroundcolor:'#002200' top:25 right: 25 width: 160 height: 60 html: '<p>artist: <b>the National</b></p> <p>album: <b>block</b></p> <p>title: <b>fake Empire</b></p>' sharing: // load the sharing plugin url: 'flowplayer.sharing swf' Objetivos El objetivo de la práctica es el de integrar un contenido multimedia en una página web alojada en Google Sites. Se deben verificar los siguientes aspectos: El contenido multimedia debe proceder de un archivo controlado por el alumno. Dicho archivo estará alojado en el repositorio documental creado por el alumno en la práctica Web El contenido debe ser interactivo. Su reproducción debe comenzar inmediatamente después de acceder a la pagina web donde se aloja. El contenido debe ser seekable siendo posible acceder a cualquier momento independientemente del grado de descarga. El contenido debe estar insertado en la página web a través de un enlace de tipo Embed. De hecho esta es la única alternativa para insertar contenidos en Google Sites. El contenido debe ofrecer información sobre su temática a través de un título o descripción que se mostrará en la propia ventana del player.