Multimedia y Web 2.0. Vídeo. Integración

Transcripción

1 Multimedia y Web 2.0 Vídeo. Integración

2 Contenido Vídeo III (Integración)... 3 Objetivos... 3 Insertar vídeo en Blogger... 4 Insertar un vídeo... 4 El formato Flash Vídeo (FLV)... 7 Publicación de vídeo FLV en Blogger... 8 Generar el código para incrustar Crear el artículo en Blogger Insertar Vídeo en Wordpress Blip.tv DailyMotion Otros servicios de vídeo VodPod: importación de vídeos para Wordpress Youtube: vídeo en streaming Publicación de un vídeo en YouTube Insertar vídeo de Youtube en Blogger Insertar vídeo de Youtube en Wordpress Insertar una lista de vídeos Youtube en Blogger Añadir un vídeo de Youtube a un gadget de Blogger Añadir un vídeo de Youtube a un widget de Wordpress OverStream: Vídeos subtitulados de Youtube Servicios de Vídeo Copiar el código embed del vídeo Insertar el vídeo Actividades Ministerio de Educación. ITE Multimedia y Web 2.0 2

3 Vídeo III (Integración) Actualmente asistimos a un auge de los espacios Web 2.0 donde es posible visualizar vídeos procedentes de emisiones de televisión, fragmentos de películas, anuncios publicitarios, producciones personales o profesionales de los propios usuarios, etc., etc. Gracias al desarrollo de la tecnología de streaming y el incremento de la velocidad de navegación por parte de los clientes, es posible acceder a vídeos a través de internet con una calidad de reproducción aceptable. En este módulo veremos algunos detalles de algunos de estos servicios más populares (Youtube, Revver, Vimeo, etc.) y cómo integrar en tu blog los vídeos alojados en ellos. Objetivos Objetivo general Conocer los principales servicios de vídeo Web 2.0, sus características y el procedimiento para integrarlos en las entradas de tu blog. Objetivos específicos Conocer las características y ventajas del formato de vídeo Flash FLV. Crear una cuenta en un servicio Web 2.0 de vídeo, subir vídeos e integrarlos en las entradas de tu blog. Deducir el procedimiento general para integrar en un artículo del blog cualquier vídeo alojado en un servicio Web 2.0 a partir del código embed que se proporciona para Blogger o Wordpress. Diseñar en OverStream una banda de subtítulos en castellano para un vídeo ajeno alojado en Youtube e insertarlo en una entrada del blog. Ministerio de Educación. ITE Multimedia y Web 2.0 3

4 Requisitos previos Para abordar este módulo con ciertas garantías es necesario dominar previamente las siguientes competencias: Manejar con soltura archivos y carpetas en el sistema operativo Windows o Ubuntu. Conocer los conceptos y fundamentos básicos del vídeo digital. Insertar vídeo en Blogger En un blog de Blogger es posible subir de forma gratuita directamente vídeos para integrar en una entrada del mismo. En este apartado vamos a ver el procedimiento para publicar vídeos en Blogger. Insertar un vídeo Descarga y descomprime el archivo turismorural.zip. Como resultado obtendrás un archivo de vídeo turismorural.mov que puedes visualizar en tu equipo utilizando VLC Media Player. Abre una nueva pestaña del navegador web y accede a la URL de inicio de Blogger: Introduce tus credenciales (usuario y contraseña) en el apartado Accede a través de tu cuenta de Google y pulsa en el botón Acceder. Si el proceso de autentificación se ha producido con éxito te situarás en el Escritorio. En este panel aparecerán los distintos blogs que gestionas en Blogger. Clic en el botón NUEVA ENTRADA para acceder directamente al interfaz de edición del blog donde deseas publicar el artículo. Ministerio de Educación. ITE Multimedia y Web 2.0 4

5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas del editor haz clic en el botón Añadir vídeo. Se mostrará el cuadro de diálogo Añade un vídeo en tu entrada de blog para subir el vídeo desde nuestro equipo. Clic en el botón Examinar para localizar y señalar el archivo turismorural.mov que hemos obtenido en un paso anterior. Como se indica en este cuadro de diálogo se pueden subir vídeos en formatos AVI, MPEG, MOV (QuickTime), RM (Real) y WMV (Windows Media). El tamaño máximo del archivo de vídeo subido será de 100 MB. Teclea el Título del vídeo y marca la casilla de verificación de condiciones. En la parte inferior activa la casilla de aceptación de condiciones y pulsa en el botón SUBIR VÍDEO. Durante los segundos invertidos en la subida del archivo de vídeo al servidor se mostrará dentro del editor un reproductor multimedia con información al Ministerio de Educación. ITE Multimedia y Web 2.0 5

6 respecto: Uploading vídeo (Subiendo vídeo). Your video will appear here when finished (Tu video aparecerá aquí cuando haya terminado). Si el proceso de subida se realiza con éxito se mostrará el reproductor con un botón PLAY en el centro. Para terminar pulsa en el botón PUBLICAR ENTRADA. Ministerio de Educación. ITE Multimedia y Web 2.0 6

7 A continuación haz clic en el enlace Ver blog para ver el resultado final. Al pulsar en el botón Play se reproducirá el vídeo subido. Nota: Este sistema de publicación de vídeos en Blogger nos ofrece, por ahora, poco control sobre la edición y eliminación de los vídeos subidos. Es uno de los temas pendientes de mejorar en Blogger. El formato Flash Vídeo (FLV) En la actualidad Blogger no admite al autor de un blog subir directamente un archivo en formato FLV (Flash Video Sin embargo es un hecho que este formato ha experimentado un gran auge como medio para publicar contenidos de vídeo en Internet. Varias son las razones que justifican este fenómeno: El cliente sólo necesita tener instalado el plugin o reproductor de Adobe Flash en su navegador web. Ministerio de Educación. ITE Multimedia y Web 2.0 7

8 Es accesible desde la mayoría de los sistemas operativos (Windows, Linux, Mac, etc.) y navegadores web (IExplorer, Firefox, NetScape, Safari, Opera, etc.). Esto garantiza un acceso universal al contenido. La consola de reproducción se puede incluir fácilmente en una página web y al estar diseñado con Adobe Flash admite un skin con un alto grado de personalización: fondos, colores, botones, logo del centro o empresa, comportamiento, etc. Se puede reproducir en distintos reproductores locales: MPlayer, VLC media player, Riva, Xine, et. Los repositorios de vídeo más conocidos en Internet han apostado por este formato para la difusión de vídeos: YouTube, GoogleVideo, ifilm, etc. El formato FLV utiliza los códecs Sorenson Spark y On2 VP6 que permiten una alta calidad visual con bitrates reducidos. Es un formato que admite streaming, es decir, tras unos segundos iniciales de almacenamiento en el buffer, comienza su visualización y esta se produce de forma ininterrumpida mientras se completa en segundo plano la descarga del resto del vídeo. Publicación de vídeo FLV en Blogger En este apartado se expone cómo integrar vídeos FLV en una entrada del blog utilizando el reproductor flash multimedia desarrollado por Jeroen Wijering ( Se utiliza en muchos sitios web ya que permite la configuración de múltiples parámetros y admite la reproducción de archivos flv simples y de listas de reproducción. En este caso vamos a utilizarlo para reproducir un vídeo FLV que alojamos previamente en Google Sites. Introducción Descarga y descomprime el archivo flvplayer.zip en una carpeta del disco local. Desde el explorador de archivos abre la carpeta flvplayer y haz doble clic en el archivo index.html. Con esto se abrirá el navegador mostrando el contenido de un video FLV. La consola de reproducción para un archivo flv permite iniciar y detener el vídeo así como arrastrar la barra de progreso de la pista y del volumen. En la reproducción de listas de vídeos FLV también se proporcionan botones para saltar al siguiente o anterior de la lista. También se ofrece un botón que permite visualizar el vídeo en modo pantalla completa. Ministerio de Educación. ITE Multimedia y Web 2.0 8

9 Regresa al explorador de archivos en la carpeta flvplayer. Dentro de esta carpeta se puedes encontrar los siguientes archivos: La página HTML que permite el acceso a todo el conjunto: index.html El reproductor de vídeo de Jeroen Wijering creado en tecnología Adobe Flash: flvplayer.swf El video FLV que se reproduce: video.flv La imagen previa en formato GIF que se muestra antes de iniciar la reproducción del vídeo y que tiene la misma dimensión del vídeo: captura.jpg Subida de archivos a Google Sites Accede a la web de Blogger: Introduce las credenciales de tu cuenta Google y pulsa en el botón Acceder. Clic en el enlace Mi cuenta que aparece en la esquina superior derecha de Blogger. Clic en el enlace Sitios para acceder al servicio Google Sites asociado a la cuenta Google. En el listado de Mis sitios haz clic en el enlace Mi Sitio para acceder al sitio por defecto asociado a la cuenta. Su URL de acceso público es En este caso vamos a guardar en este espacio los archivos que vamos necesitar para luego enlazarlos desde el blog. La acción anterior te sitúa en la página principal de tu sitio Google. Para organizar los archivos se propone crear una carpeta de nombre video donde guardar los archivos pdf. Clic en el botón Crear página. Elige como plantilla la opción Archivador. Ministerio de Educación. ITE Multimedia y Web 2.0 9

10 En Nombre introduce video. Observa que la carpeta contenedora de archivos se creará en la ruta: /site/<nombre_usuario>/video. Clic en el botón Crear página. Se creará esa carpeta y el sistema te colocará dentro de ella. Clic en el botón Añadir archivo para pulsar en el botón Examinar y localizar el archivo de imagen captura.jpg. Clic en el botón Subir. Repite el paso anterior para subir el archivo del reproductor flvplayer.swf y el archivo de vídeo video.flv. El vídeo tardará un poco en subir porque tiene cierto peso. Ministerio de Educación. ITE Multimedia y Web

11 No cierres esta ventana o pestaña del navegador porque posteriormente volveremos a ella. Generar el código para incrustar Regresa a la carpeta donde se encuentran los archivos descargados y haz clic derecho sobre el archivo index.html para seleccionar Abrir con > Bloc de notas. El código que integra el reproductor y el vídeo en la página es: <embed src="flvplayer.swf" width="384" height="308" allowfullscreen="true" flashvars="file=video.flv&image=captura.jpg&width=384&height=308"> </embed> En la variable file se indica la referencia a la ubicación del archivo de vídeo flv que se reproduce. Puedes modificar este valor para reproducir un vídeo con otro nombre distinto. En las variables height y width se indican la altura y anchura en píxeles con que se visualizará el reproductor. El vídeo tiene unas dimensiones originales de 384x288 píxeles. Puede comprobarlo utilizando MediaInfo tal y como se explicaba en un apartado anterior. La botonera ocupa 20 píxeles de altura. Sumados a los 288 del vídeo hacen un total de 308 píxeles para el total del reproductor. Ministerio de Educación. ITE Multimedia y Web

12 A continuación modificamos este código para que el reproductor (flvplayer.swf), la imagen (captura.jpg) y el video (video.flv) sean los que has subido a tu espacio en Google Sites. Para ello regresa a la página de Google Sites y haz clic derecho sobre el enlace correspondiente al reproductor flvplayer.swf y elige la opción Copiar la ruta del enlace. Sitúate en el Bloc de Notas, selecciona el valor del parámetro src, es decir, el contenido comprendido entre las comillas y a continuación selecciona Editar >Pegar. Elimina la coletilla attredirects=0 de la URL pegada. Repite el paso anterior para sustituir la ruta a video.flv y a la imagen captura.jpg. El resultado final podría ser un código similar a éste: <embed src=" width="384" height="308" allowfullscreen="true" flashvars="file= ge= eight=308"> </embed> Selecciona este código <embed> </embed> y elige Editar > Copiar. Ministerio de Educación. ITE Multimedia y Web

13 Crear el artículo en Blogger Abre una nueva pestaña del navegador web y accede a la URL de inicio de Blogger: Introduce tus credenciales (usuario y contraseña) en el apartado Accede a través de tu cuenta de Google y pulsa en el botón Acceder. Si el proceso de autentificación se ha producido con éxito te situarás en el Escritorio. En este panel aparecerán los distintos blogs que gestionas en Blogger. Clic en el botón NUEVA ENTRADA para acceder directamente al interfaz de edición del blog donde deseas publicar el artículo. Teclea el título: Los medios de transporte. Clic en el enlace Edición de HTML para mostrar el código HTML del artículo. Sitúate en la edición HTML del artículo del blog al final del mismo. Clic derecho y selecciona Pegar. Esta acción pegará el código HTML generado anteriormente. Ministerio de Educación. ITE Multimedia y Web

14 Para terminar pulsa en el botón PUBLICAR ENTRADA. A continuación haz clic en el enlace Ver blog para ver el resultado final Insertar Vídeo en Wordpress En un blog de Wordpress, a diferencia de Blogger, no se pueden subir de forma gratuita directamente vídeos para integrar en una entrada del mismo. Se requiere contratar el servicio de pago VideoPress Upgrade. Este sistema no será tratado en este material por razones obvias. Sin embargo en una entrada de un blog de Wordpress se pueden insertar de forma gratuita vídeos alojados en servicios externos. En este capítulo vamos a tratar algunos de ellos. Ministerio de Educación. ITE Multimedia y Web

15 Blip.tv Visita la web de Blip.tv ( Utiliza el buscador para localizar el vídeo que te interesa. Otra opción es crear una cuenta y subir tu propio vídeo. Sitúate en el vídeo para su visualización. En la columna lateral derecha que acompaña al vídeo se ofrece una barra en color naranja. Haz clic en el combo Share y selecciona la opción Embed. A continuación haz clic en el combo Show Player y selecciona la opción Wordpress.com. Clic en el botón Go. Ministerio de Educación. ITE Multimedia y Web

16 Selecciona el código que se ofrece debajo, haz clic derecho y elige Copiar. Sobre el editor HTML de entradas de Wordpress.com haz clic derecho y selecciona Pegar. Ministerio de Educación. ITE Multimedia y Web

17 Clic en el botón Publicar/Actualizar y a continuación haz clic en el enlace Vista previa para ver el aspecto del vídeo insertado en el artículo. DailyMotion Visita la web de DailyMotion ( Busca el vídeo que deseas insertar en un artículo de tu blog Wordpress. Fíjate en la URL o dirección de esa página del tipo: En esta dirección aparece el identificador ID de este vídeo en DailyMotion. En este ejemplo el identificador es: xcfw1n En el código HTML de la entrada de tu blog en Wordpress.com introduce la siguiente etiqueta: [dailymotion id=xcfw1n] Ministerio de Educación. ITE Multimedia y Web

18 Clic en el botón Publicar y luego en el enlace Ver artículo. Otros servicios de vídeo Flickr Video 1. Localiza un vídeo en Flickr ( 2. Copia el identificador ID del vídeo que figura en la última parte de su URL: Ejemplo: 3. En el código HTML del artículo de Wordpress pega la etiqueta: Ministerio de Educación. ITE Multimedia y Web

19 LiveVideo [flickr video= o bien [flickr video= ] Para que no se muestre la información inicial al principio del vídeo: [flickr video= show_info=no] Para definir la altura y anchura en píxeles del reproductor: [flickr video= w=200 h=150] 1. Localiza un vídeo en LiveVideo ( 2. Copia el identificador ID del vídeo que figura en su URL. Ejemplo: PodTech Viddler 3. En el código HTML del artículo de Wordpress pega la etiqueta: [livevideo id=f25406f905a64843b19e7cdc3cfd04a4] 1. Localiza un vídeo en PodTech ( 2. Haz clic en el botón naranja Share (Compartir). 3. Marca la casilla Embedding in Wordpress.com y haz clic en el botón Copy. 4. Pega en el código HTML del artículo de Wordpress la etiqueta copiada. 1. Localiza un vídeo en Viddler ( 2. Haz clic en el botón Embed This (Insertar Esto). 3. Marca la opción Wordpress.com, selecciona el código y haz clic derecho para Copiar. 4. Pega en el código HTML del artículo de Wordpress la etiqueta copiada Ministerio de Educación. ITE Multimedia y Web

20 Videolog 1. Localiza un vídeo en Videolog ( 2. Haz clic en el botón Wordpress. 3. Selecciona el código y haz clic derecho para Copiar. 4. Pega en el código HTML del artículo de Wordpress la etiqueta copiada. VodPod: importación de vídeos para Wordpress VodPod ( es un servicio intermedio que permite incorporar a un artículo de Wordpress.com un video alojado en cualquier servicio de vídeos: Youtube, Revver, Vimeo, etc. Sólo es necesario que el vídeo esté en formato Flash Vídeo (FLV) y que el servicio que lo aloja ofrezca el código embed. Gracias a VodPod es posible salvar la limitación que ofrece Wordpress.com de no admitir las etiquetas <embed > en la edición de sus artículos y no poder con ello insertar vídeos de estos servidores. 1. Visita la web de VodPod y registrate como usuario. Identifícate con tu usuario y contraseña. 2. Visita la página utilizando el navegador Mozilla Firefox. 3. En tu navegador Mozilla Firefox debes tener visible la barra de marcadores mediante Ver > Barras de herramientas > Barras de herramientas de marcadores. 4. Arrastra el botón Post to Wordpress para soltarlo sobre la barra de marcadores del navegador. 5. A continuación accede a la página de un servicio de vídeo. Por ejemplo: Revver ( Localiza el vídeo que deseas insertar y pulsa en el marcador Post to WordPress. 6. Se mostrará un cuadro de diálogo emergente donde debes introducir la URL de tu blog, el usuario y contraseña para editar en ese blog. Clic en Publish. 7. Se cerrará esta ventana y se mostrará el editor de entradas con un nuevo artículo conteniendo el código correspondiente a ese vídeo. Ministerio de Educación. ITE Multimedia y Web

21 8. Tras publicar y ver la vista previa de ese artículo, observarás que el vídeo se ha integrado en el artículo. Youtube: vídeo en streaming YouTube ( es un servicio de búsqueda y alojamiento de vídeos que ofrece la posibilidad de asignar tags o etiquetas a los mismos para facilitar su localización. En poco tiempo este sitio web se ha convertido en el mayor repositorio de vídeos en Internet. Cualquier usuario puede registrarse de forma gratuita y subir sus vídeos. Estos pueden ajustarse a cualquier temática siempre y cuando no sea pornográfica y no incumplan las leyes vigentes sobre copyright y pertinencia de contenidos. Acceso autentificado a Youtube Para subir tus propios vídeos es necesario registrarse como usuario en Youtube. Sin embargo si ya dispones de credenciales Google puedes utilizarlas para acceder a Ministerio de Educación. ITE Multimedia y Web

22 este servicio con ellas. Básicamente existen dos formas de acceder al espacio autentificado de Youtube: Acceso directo. Abre el navegador y visita la URL de Youtube: Haz clic en el enlace Acceder que aparece en la esquina superior derecha y debes introducir tu dirección de correo electrónico usuario@gmail.com (no el usuario) y tu contraseña de Google. Acceso desde Blogger. Haz clic en el enlace Mi cuenta que se muestra en la esquina superior derecha una vez que te has autentificado. En la página Mi cuenta haz clic en la entrada al servicio Youtube. Publicación de un vídeo en YouTube YouTube puede aceptar casi cualquier formato de vídeo para las subidas: WMV,.AVI,.MOV y.mpg. Sin embargo se ha comprobado que la configuración que ofrece mejores resultados para la mayoría de los usuarios es la que se indica a continuación. Códec del vídeo: H.264, MPEG-2 o MPEG-4 preferiblemente Resolución recomendada: 1280 x 720 (16 x 9 HD) o bien 640 x 480 (4:3 SD) aunque admite también resoluciones inferiores como 480x360. Formato de audio: MP3 o AAC preferiblemente en estéreo con 44,1 khz de bitrate. Fotogramas por segundo: fps Tamaño de archivo máximo: 2 GB Los pasos para subir un vídeo son: 1. Descarga y descomprime el archivo paisajesasturias.zip en tu disco duro. Como resultado obtendrás el archivo de vídeo paisajesasturias.wmv 2. Accede de forma autentificada a Youtube directamente o a través de Blogger. En ambos casos se mostrará la página de Youtube con tu nombre de usuario en la esquina superior derecha. 3. Haz clic en el enlace Subir. 4. Pulsa en el botón Subir vídeo. Si dispones de cámara web en el equipo otra opción es pulsar en el botón Grabar de cámara web para crear el vídeo utilizando este dispositivo. 5. Se abre un cuadro de diálogo donde debes seleccionar el vídeo a subir. En cuanto pulsas el botón Aceptar comienza la subida al servidor. 6. Mientras se sube el archivo puedes completar los siguientes datos del vídeo Título. Por ejemplo: Paisajes asturianos. Ministerio de Educación. ITE Multimedia y Web

23 Descripción. Texto breve que describe el vídeo. Ejemplo: Algunas fotografías sobre paisajes asturianos. Etiquetas. Facilitan la búsqueda del vídeo. Se introduce una o varias etiquetas separadas por espacios. Ejemplo: asturias paisajes. Estos son los campos obligatorios para poder subir un vídeo. En el resto se pueden dejar las opciones por defecto. Categoría. Selecciona una categoría o tema. Ejemplo: Viajes y eventos. Privacidad. Es posible elegir entre Comparte tu vídeo con el mundo (opción recomendada) o bien Privado. 7. Clic en el botón Guardar cambios. Se mostrará una entrada en el listado de vídeos subidos. 8. Una vez finalizada la subida haz clic en el enlace Mis Vídeos. A la sección Mis Vídeos siempre puedes ir desde el menú horizontal superior pulsando en el nombre de usuario y seleccionando la opción Mis vídeos. Ministerio de Educación. ITE Multimedia y Web

24 Nota: Después de subir el archivo al servidor puede ocurrir que tengas que esperar unos minutos para que se complete la conversión del vídeo. YouTube procesa el formato original del archivo para transformarlo en formato Video Flash. 9. Observa que se ha creado una entrada nueva con el vídeo. Para visualizar su contenido haz clic en el botón Reproducir. 10. Desde este panel se puede pulsar en sus distintos botones para realizar diversas tareas: Reproducir. Para visualizar el vídeo tal y como lo verán el resto de usuarios de Youtube. Editar. Permite personalizar distintos parámetros avanzados de reproducción del vídeo. Anotaciones. Es una herramienta ideal para crear anotaciones sobre la línea de tiempo del propio vídeo: bocadillos, notas, regiones destacadas, indicaciones de pausa, etc. Cambiar Audio. Facilita modificar la pista original de audio por otra del listado que propone Youtube. Otra posibilidad es pulsar en el enlace Título y Subtítulos y se puede subir un archivo de subtítulos. Ministerio de Educación. ITE Multimedia y Web

25 Insight. Al hacer clic en este botón se mostrarán distintos datos estadísticos sobre la visualización del vídeo. Eliminar. Se utiliza para eliminar el vídeo de Youtube y liberar con ello el espacio disponible para la cuenta en el servidor. Descargar MP4. Al pulsar en este botón se descargará la película en formato de alta calidad MP Clic en el botón Editar. Se mostrará la página Información y configuración de ese vídeo. En ella se ofrecen distintas secciones: Información del vídeo. Contiene el título, descripción, etiquetas y categoría que se introdujeron al principio. Desde aquí se pueden modificar. Miniatura del vídeo. Permite elegir la imagen estática que representará el vídeo. Fecha y mapa. Permite definir la fecha en que fue grabado y sobre una mapa de Google Maps geolocalizar el recurso indicando el lugar geográfico concreto donde se tomó. Opciones para compartir y emitir vídeos. En este apartado se puede elegir entre Privacidad. Compartir el vídeo con el mundo (opción recomendada). Privado (visible para un máximo de 25 personas). Comentarios Permitir comentarios automáticamente. Opción por defecto. Permitir comentarios de amigos automáticamente y demás comentarios sólo con aprobación Permitir todos los comentarios únicamente con aprobación No permitir comentarios Comentar votación. Sí, permitir a los usuarios votar sobre los comentarios. Opción por defecto. No permitir las votaciones a los comentarios. Respuestas en vídeo. Sí, permitir que se añadan respuestas en vídeo automáticamente. Permitir que otros usuarios de YouTube puedan relacionar automáticamente sus vídeos con el mío. Ministerio de Educación. ITE Multimedia y Web

26 Sí, permitir respuestas una vez que las haya aprobado. Es la opción por defecto. No, no permitir respuestas en vídeo. No permitir relacionar este video con otros. Puntuaciones. Sí, permitir que otras personas puntúen este vídeo. Permitir que este video pueda ser puntuado por los usuarios. Es la opción por defecto. Inserción. No, no permitir que se puntúe este vídeo. No permitir que este video pueda ser votado. Sí, los sitios externos pueden insertar y reproducir este vídeo. Es la opción por defecto. No, los sitios externos NO pueden insertar ni reproducir este vídeo. Distribución. Sí, hacer que este vídeo esté disponible en móviles y TV No, este vídeo no debería estar disponible en móviles ni en TV. 12. Para guardar los cambios pulsa en el botón Guardar cambios. Insertar vídeo de Youtube en Blogger Elegir el vídeo en Youtube 1. Abre el navegador web y visita la web de Youtube : Introduce tus credenciales para autentificarte. En este caso se propone insertar un vídeo propio pero también se puede insertar un vídeo ajeno que se localiza utilizando el buscador de Youtube. 2. Clic en la sección <Usuario> Mis Vídeos (Mis vídeos). Otra posibilidad es utilizar el buscador de Youtube para localizar un vídeo subido por otro usuario. 3. Clic en la imagen de un vídeo del listado o bien sobre el botón Reproducir. Se visualiza una página mostrando la reproducción del vídeo. 4. A la derecha del cuadro que contiene el código Insertar pulsa en el botón Personalizar. En el cuadro que se muestra puedes elegir algunas opciones: Ministerio de Educación. ITE Multimedia y Web

27 Incluir vídeos relacionados. Si marcas esta casilla se mostrarán los vídeos relacionados con éste al finalizar su reproducción. Mostrar borde. Incluye un marco de color alrededor del reproductor. Activar cookies de acción retardada. Si activas las cookies de acción retardada entonces el reproductor creará en el ordenador del visitante este tipo de cookies. Por defecto no las crea cuando el reproductor está incrustado en una página 5. También puedes elegir la gama de colores del reproductor que más se ajusta a la página donde se incrustará así como el tamaño del reproductor. 6. Haz clic derecho en el código del cuadro de texto Insertar y elige Copiar. Esta acción copiará el código embed/insertar en el portapapeles. Insertar el vídeo en una entrada de Blogger 1. Abre una nueva pestaña del navegador web y accede a la URL de inicio de Blogger: 2. Introduce sus credenciales (usuario y contraseña) en el apartado Accede a través de tu cuenta de Google y pulsa en el botón Acceder. 3. Si el proceso de autentificación se ha producido con éxito te situarás en el Escritorio. Ministerio de Educación. ITE Multimedia y Web

28 4. En este panel aparecerán los distintos blogs que gestionas en Blogger. 5. Clic en el botón NUEVA ENTRADA para acceder directamente al interfaz de edición del blog donde deseas publicar el artículo 6. Teclea el título: Paisajes de Asturias 7. Clic en el enlace Edición de HTML para mostrar el código HTML del artículo. 8. Sitúate en la edición HTML del artículo del blog al final del mismo. Clic derecho y selecciona Pegar. Esta acción pegará el código HTML generado anteriormente. 9. Para terminar pulsa en el botón PUBLICAR ENTRADA. 10. A continuación haz clic en el enlace Ver blog para ver el resultado final Ministerio de Educación. ITE Multimedia y Web

29 Insertar vídeo de Youtube en Wordpress Elegir el vídeo en Youtube 1. Abre el navegador web y visita la web de Youtube : 2. Identifícate con tus credenciales para localizar un vídeo propio o utiliza el buscador para localizar un vídeo ajeno. 3. Una vez situado en la reproducción del vídeo que te interesa, haz clic en el botón Compartir. Se mostrará un cuadro de diálogo con la URL de la página que contiene este video. 4. Selecciona la URL del vídeo. Es de la forma: Ministerio de Educación. ITE Multimedia y Web

30 5. Clic derecho sobre esta URL y elige Copiar. Insertar el vídeo en una entrada de Wordpress 6. Desde el Escritorio de Wordpress.com selecciona Entradas > Añadir. 7. Teclea el título: Picasso. 8. Clic en el enlace Edición de HTML para mostrar el código HTML del artículo. 9. Sitúate en la edición HTML del artículo del blog al final del mismo. Clic derecho y selecciona Pegar. Esta acción pegará la URL del vídeo copiada anteriormente. 10. A partir de esta URL añade la etiqueta [youtube=... para completar, en el caso del ejemplo que nos ocupa, lo siguiente: [youtube= 11. Pulsa en el botón Publicar y luego en el enlace Vista previa. Ministerio de Educación. ITE Multimedia y Web

31 Ejemplos de parámetros de integración de Youtube en WP Para especificar la altura y anchura de forma explícita: [youtube= Para especificar sólo la anchura: [youtube= Para reproducir el vídeo en High Definition-Alta Definición (HD): [youtube= Para reproducir el vídeo en HD con altura y anchura específicos: [youtube= 1] Para ocultar los vídeos relacionados que aparecen una vez finalizada la reproducción del vídeo: [youtube= Para mostrar el cuadro de búsqueda en Youtube: [youtube= Ministerio de Educación. ITE Multimedia y Web

32 Insertar una lista de vídeos Youtube en Blogger Crear una lista de vídeos en Youtube YouTube ofrece la posibilidad de crear listas de reproducción de vídeos alojados en este servicio. Estos pueden ser propios o ajenos. En el siguiente ejemplo se recoge el procedimiento para construir una lista de reproducción y luego insertarlo en un artículo de tu blog. 1. Accede a Youtube con tus credenciales de usuario. 2.En la barra de menú horizontal superior elige Usuario > Listas de reproducción. 3. Elige Nuevo > Lista de reproducción. 4. Introduce el título de la nueva lista de reproducción. Por ejemplo: Picasso en Youtube. En este caso vamos a crear una lista de vídeos sobre el pintor Picasso. Clic en el botón Ministerio de Educación. ITE Multimedia y Web

33 5. Completa los datos de la lista de reproducción: Título, Descripción, Etiquetas y Configuración de Privacidad. Marca la opción Público o Privado para indicar la privacidad de la lista de reproducción. Se recomienda utilizar la opción por defecto: Público. 6. Clic en el botón Guardar cambios. Ministerio de Educación. ITE Multimedia y Web

34 7. A continuación utiliza el buscador de YouTube situado en la parte superior de la página para buscar vídeos sobre Picasso. Introduce el término "Picasso" y pulsa en el botón Buscar. 8. Haz clic sobre el título de uno de los vídeos para visualizarlo. 9. En la barra de opciones que aparece debajo del reproductor haz clic sobre el enlace Listas de reproducción. Se visualiza una lista desplegable con las listas de reproducción creadas. Elige la entrada correspondiente a la lista "Picasso en Youtube". Clic en el botón Añadir. 10. Repite los pasos anteriores para añadir dos o tres vídeos más sobre Picasso. No es necesario utilizar de nuevo el buscador porque en la lista Videos Relacionados se muestran algunos vídeos que están relacionados con el actual. 11. En la barra de menú horizontal superior elige Usuario > Listas de reproducción. 12. En el panel izquierdo debajo de la entrada Listas de reproducción se mostrarán todas las listas creadas. Al seleccionar una de ellas, en el panel derecho, se mostrará el listado de vídeos que la forman. Para eliminar un vídeo de la lista márcalo en la casilla de verificación que se ofrece en la primera columna y a continuación pulsa en el botón Suprimir. Ministerio de Educación. ITE Multimedia y Web

35 Insertar la lista de vídeos en una entrada de Blogger 1. En la columna izquierda donde aparecen las listas de reproducción haz clic en la lista de reproducción creada. 2. Clic en el botón Compartir donde se muestra la URL de la lista de reproducción o bien el código embed. 3. Clic derecho en el cuadro de texto Insertar código y elige Seleccionar todo. A continuación haz clic derecho y elige Copiar. 4. Abre una nueva pestaña del navegador web y accede a la URL de inicio de Blogger: 5. Introduce sus credenciales (usuario y contraseña) en el apartado Accede a través de tu cuenta de Google y pulsa en el botón Acceder. Ministerio de Educación. ITE Multimedia y Web

36 6. Si el proceso de autentificación se ha producido con éxito te situarás en el Escritorio. 7. En este panel aparecerán los distintos blogs que gestionas en Blogger. 8. Clic en el botón NUEVA ENTRADA para acceder directamente al interfaz de edición del blog donde deseas publicar el artículo. 9. Teclea el título: Videos de Picasso. 10. Clic en el enlace Edición de HTML para mostrar el código HTML del artículo. 11. Sitúate en la edición HTML del artículo del blog al final del mismo. Clic derecho y selecciona Pegar. Esta acción pegará el código HTML generado anteriormente. 12. Para terminar pulsa en el botón PUBLICAR ENTRADA. 13. A continuación haz clic en el enlace Ver blog para ver el resultado final Ministerio de Educación. ITE Multimedia y Web

37 Nota: Las listas de reproducción NO se integran en un artículo de Wordpress.com ni siquiera utilizando el servicio VodPod.com Añadir un vídeo de Youtube a un gadget de Blogger Los vídeos de Youtube se pueden publicar en una entrada de nuestro blog de Blogger como hemos visto en un apartado anterior. Otra posibilidad es incorporar vídeos de Youtube en un gadget de la barra lateral del blog para que estén siempre disponibles al lector. Se puede incorporar un vídeo individual en un gadget del tipo HTML/Javascript o bien un canal de Youtube o los vídeos relacionados con una lista de etiquetas en un gadget del tipo Barra de Vídeo. Añadir un vídeo de Youtube a un gadget del blog 1. Abre el navegador web y visita la web de Youtube : Ministerio de Educación. ITE Multimedia y Web

38 2. Utiliza el buscador para situarte en el vídeo que deseas insertar en tu blog. Se visualiza una página mostrando la reproducción del vídeo. 3. A la derecha del cuadro que contiene el código Insertar pulsa en el botón Personalizar. En el cuadro que se muestra puedes elegir algunas opciones: Incluir vídeos relacionados. Si marcas esta casilla se mostrarán los vídeos relacionados con éste al finalizar su reproducción. Mostrar borde. Incluye un marco de color alrededor del reproductor. Activar cookies de acción retardada. Si activas las cookies de acción retardada entonces el reproductor creará en el ordenador del visitante este tipo de cookies. Por defecto no las crea cuando el reproductor está incrustado en una página. 4. También puedes elegir la gama de colores del reproductor que más se ajusta a la página donde se incrustará así como el tamaño del reproductor. En este caso vamos a elegir un tamaño del reproductor de 320x265 píxeles. 5. Haz clic derecho en el código del cuadro de texto Insertar y elige Copiar. Esta acción copiará el código embed/insertar en el portapapeles. 6. Desde el interfaz de gestión de Blogger elige Diseño > Elementos de la página. 7. Clic en el enlace Añadir un gadget. 8. Pulsa en el botón + para añadir el gadget HTML/Javascript Ministerio de Educación. ITE Multimedia y Web

39 9. En la página Configurar HTML/Javascript introduce el Título del gadget. Por ejemplo: Vídeo destacado. 10. Clic derecho sobre el cuadro de Contenido y elige Pegar. Para que el reproductor no sobrepase los límites de la barra lateral en algunas de las plantillas utilizadas quizás sea necesario reducir las dimensiones 320x265 píxeles que aparecen en este código por 192x Para terminar pulsa en el botón GUARDAR. 12. Clic en el enlace Ver blog para observar el resultado final. Ministerio de Educación. ITE Multimedia y Web

40 Los canales en Youtube Es una página asociada al usuario con una URL del tipo: a la que cualquier visitante puede acceder de forma pública y que contiene el perfil del usuario, sus vídeos, favoritos, etc. El usuario propietario de un canal accede a la administración del mismo pulsando en el nombre de usuario que aparece en la esquina superior derecha. Desde su gestión se pueden configurar múltiples aspectos de este canal: títulos, colores, módulos, etc. Algunos ejemplos de canales Youtube: RTVE: Europa Press: Antena 3: La Sexta: Cuatro: Ministerio de Educación. ITE Multimedia y Web

41 Añadir un canal temático de Youtube a un gadget del blog 1. Desde el interfaz de gestión de Blogger elige Diseño > Elementos de la página. 2. Clic en el enlace Añadir un gadget. 3. Pulsa en el botón "+" para añadir el gadget Barra de vídeo 4. En la página Configurar Barra de Vídeo introduce el Título del gadget. Por ejemplo: Canal RTVE. 5. En esta página se pueden configurar los siguientes parámetros: Youtube. Permite elegir las opciones de Vídeos más vistos, Vídeos mejor valorados y Vídeos recientes. En este caso marcaremos Vídeos recientes. Canales. Introduce aquí rtve que el identificador Youtube del canal de RTVE fácilmente deducible de su URL: Palabras clave. Puedes introducir etiquetas para que sólo se muestren los vídeos que tengan asociadas estas palabras. En este caso tecleamos noticias. 6. En la parte inferior se muestra una vista previa en función de las opciones elegidas. 7. Pulsa en el botón GUARDAR. 8. Clic en el enlace Ver blog para observar el resultado final. Ministerio de Educación. ITE Multimedia y Web

42 Añadir un vídeo de Youtube a un widget de Wordpress Los vídeos de Youtube se pueden publicar en una entrada de nuestro blog de Wordpress como hemos visto en un apartado anterior. Otra posibilidad es incorporar vídeos de Youtube en un widget de la barra lateral del blog para que estén siempre disponibles al lector. Se puede incorporar una colección de vídeos en un widget del tipo VopPod Vídeos. Visita la web de VodPod ( Clic en Login para introducir tus credenciales (usuario y contraseña) y pulsa el botón Login. Clic en el enlace Your videos (Tus vídeos). Clic en el botón New collection (Nueva colección). En el cuadro de texto Name your collection (Nombre de tu colección) teclea el identificador, por ejemplo, Canal Picasso. Clic en el botón Create (Crear). Abre una nueva pestaña en el navegador web mediante Archivo > Nueva pestaña. Visita la web de Youtube: y utiliza el buscador para localizar un vídeo de Picasso. Clic en el botón Insertar para mostrar el cuadro de código embed asociado a ese vídeo. Ministerio de Educación. ITE Multimedia y Web

43 Clic derecho sobre este código y selecciona Copiar. Regresa a la pestaña donde se encuentra Vodpod y pulsa en el botón Add Video (Añadir Vídeo). En el cuadro de diálogo que se muestra haz clic derecho sobre el cuadro de texto y elige Pegar para pegar el código embed copiado anteriormente. Clic en el botón Continue (Continuar). Confirma la elección pulsando en el botón Yes, This is the video (Sí, este es el vídeo). En el siguiente cuadro de diálogo introduce el título del vídeo en Title, las etiquetas de búsqueda en Tags y comentarios opcionales en Comments. Ministerio de Educación. ITE Multimedia y Web

44 Despliega el combo Add to Collection (Añadir a la colección) para elegir la colección deseada. Ejemplo: Canal Picasso. Clic en el botón Save (Guardar). Repite los pasos anteriores para añadir a la colección de VodPod un par de vídeos de Youtube sobre Picasso. Regresa a VodPod y haz clic en Home y luego en Your vídeos (Tus vídeos). Para filtrar los vídeos de esta colección despliega el combo Collection y elige el nombre de la misma. En el listado se muestran los vídeos de esta lista. En el pie de la página de VodPod haz clic en el enlace Widgets. Otra posibilidad es pulsar en el enlace Home > Sharing Ministerio de Educación. ITE Multimedia y Web

45 Despliega en combo Share on (Compartir en...) y elige Wordpress.com En el área Advanced Setup (Configuración avanzada) selecciona como Sytle (Estilo), por ejemplo, Social Standard y como Source Collection (Colección Fuente) la colección de vídeos creada con anterioridad: Canal Picasso. Selecciona y haz clic derecho para Copiar el código que se proporciona. Abre una pestaña nueva en el navegador web y accede al interfaz de administración de tu blog Wordpress. Para añadir el widget a tu blog selecciona Apariencia > Widgets. Ministerio de Educación. ITE Multimedia y Web

46 Arrastra el widget VodPod Videos de la columna izquierda de widgets disponibles a la columna derecha de widgets visibles. Al soltar el widget se abrirá su panel de configuración. Clic derecho y elige Pegar para pegar el código en la ventana de configuración del widget. Clic en el botón Guardar. Al visualizar el frontend del blog se mostrará un widget con los vídeos de la colección. Ministerio de Educación. ITE Multimedia y Web

47 OverStream: Vídeos subtitulados de Youtube Qué es Overstream? Overstream ( es un espacio donde puedes personalizar un vídeo en línea alojado en sitios como Youtube, Google Video, MySpace Video, etc. incorporándole comentarios y subtítulos. Mientras el vídeo se guarda en su repositorio original, Overstream ofrece un visor propio a través del cual se visualiza ese vídeo en sincronía con los textos introducidos. Desde Youtube se pueden añadir títulos, subtítulos y anotaciones a tus propios vídeos pero no a los vídeos subidos por otros usuarios. Con Overstream se puede subtitular cualquier video alojado, por ejemplo, en Youtube. Los vídeos subtitulados se pueden compartir con los demás e integrar dentro de una página web o entrada de tu blog. Crear un vídeo subtitulado Visita la web de Overstream y regístrate para disponer de un nombre de usuario y contraseña. Una vez que dispongas de ella introdúcelas para entrar en sesión Ministerio de Educación. ITE Multimedia y Web

48 En otra pestaña del navegador utiliza el buscador de Youtube para localizar el vídeo en línea que deseas subtitular. Una vez situado en él, selecciona la dirección en la barra del navegador, clic derecho y elige Copiar. Ejemplo: Regresa a OverStream. Pulsa en el enlace Create overstream (Crear subtítulos). Se muestra el cuadro de diálogo Vídeo URL (dirección del vídeo). En la casilla Enter Vídeo URL (Introduce URL del vídeo) haz clic derecho y selecciona Pegar para pegar la dirección copiada con anterioridad. Clic en el botón Ok. Tras unos segundos de espera en el visor se cargará la película. Los pasos para crear los subtítulos serían (ver imagen): Ministerio de Educación. ITE Multimedia y Web

49 1) Clic en el botón play de la consola de reproducción. Cuando estimes necesario añadir un comentario pulsa en el botón pause. 2) En la esquina inferior derecha pulsa en el botón add (añadir). 3) Introduce el subtítulo por teclado. Observa que en el listado se crea una entrada con el texto y también se ofrece una vista previa en el visor de la película. Para eliminar un texto se selecciona previamente en el listado y se pulsa en el botón remove (eliminar). Es necesario tener en cuenta que el subtítulo se muestra por defecto durante 3 segundos. Este valor se puede modificar en Options (opciones). Si deseas ampliar la duración del subtítulo seleccionado utiliza los controles Start Time y End Time (Tiempo de inicio y de fin). 4) Para guardar el proyecto pulsa en el botón save (guardar). Se muestra el cuadro de diálogo Overstream Name Dialog (Save To Server) (Nombre de los subtítulos para guardar en el servidor). Introduce un nombre y pulsa en OK. Ministerio de Educación. ITE Multimedia y Web

50 Tras guardar el proyecto se mostrará el mensaje Overstream "título" created in the database (Overstream "título" creado en la base de datos). Pulsa sobre la pestaña Overstream Properties (Propiedades del Overstream). En esta página conviene configurar los siguientes parámetros: Access Level (Nivel de acceso) como Public, Subtitle Language (Idioma de Subtítulos) como Spanish, Tags (Etiquetas) separados por comas, Rating (Votación) y User Comments (Comentarios) activarlos o desactivarlos. Ministerio de Educación. ITE Multimedia y Web

51 Para guardar los cambios introducidos en los parámetros de configuración pulsa en el botón Save Overstream Properties (Guardar propiedades del OverStream) Clic en el enlace My Overstream. Observa que aparece la entrada correspondiente a los subtítulos recién creados. Para actualizar su contenido pulsa en el enlace Edit. Para ver el resultado final pulsa en el enlace Play. Debajo del reproductor se muestra un cuadro de texto con el código Embed. Clic derecho y selecciona Copiar para copiar este código HTML al portapapeles. Insertar un video Overstream en una entrada de Blogger 1. Crear una NUEVA ENTRADA en Blogger y define como título "El Sistema Solar". 2. Clic en el enlace Edición de HTML para mostrar el código HTML del artículo. Ministerio de Educación. ITE Multimedia y Web

52 3. Sitúate en la edición HTML del artículo del blog al final del mismo. Clic derecho y selecciona Pegar. Esta acción pegará el código HTML copiado anteriormente. 4. Para terminar pulsa en el botón PUBLICAR ENTRADA. 5. A continuación haz clic en el enlace Ver blog para ver el resultado final Ministerio de Educación. ITE Multimedia y Web

53 Insertar un video Overstream en una entrada de Wordpress Visita la web de OverStream ( introduce tus credenciales de usuario y accede al overstream que deseas insertar en un artículo de tu blog de Wordpress. Clic derecho sobre el cuadro de texto del código Embed y selecciona Copiar. Haz clic en el botón Post to Wordpress En el cuadro de diálogo Post to your Blog haz clic en el enlace (Click if you're having trouble) (Clic si tienes problemas). Sobre el cuadro de texto haz clic derecho y elige Pegar. Clic en el enlace preview (vista previa). Ministerio de Educación. ITE Multimedia y Web

54 Introduce la URL of your blog (URL de tu blog), Username (Usuario) y Password para realizar la publicación directa sobre tu blog de Wordpress. Teclea el título del nuevo artículo que contendrá el vídeo Title y el texto del mismo en Body. Clic en el botón Publish. Clic en el botón View your blog (Ver tu blog). Se mostrará un artículo de tu blog conteniendo el video overstream. Es posible posteriormente reeditar esta entrada y modificar su texto. Servicios de Vídeo En la Web 2.0 existen multitud de espacios donde es posible almacenar vídeos para su posterior difusión y publicación en nuestro blog. La reproducción mediante streaming que proporcionan estos espacios facilitan su visionado a través de Internet. Actualmente el líder en este sector es Youtube pero también existen otras alternativas interesantes: Revver, Vimeo o Metacafe. La integración de un vídeo de estos servidores en el artículo de un blog de Blogger siempre se realiza copiando y pegando el código Embed que se ofrece en la visualización de cada vídeo. Copiar el código embed del vídeo Visita la web de uno de estos servicios: Ministerio de Educación. ITE Multimedia y Web

55 Revver: Vimeo: Metacafe: Utiliza el buscador para localizar el vídeo que te interesa. Sitúate en su página para visionarlo. El siguiente paso es copiar el código embed. En cada servicio web se hace de una forma distinta: Revver Clic en el botón More Options (Más opciones) Asegúrate de que en la lista Select a format (Selecciona un formato) está seleccionada la entrada Flash Embed. Clic derecho sobre el cuadro de código y elige Seleccionar todo. Haz clic derecho de nuevo y elige Copiar. Ministerio de Educación. ITE Multimedia y Web

56 Vimeo Clic en el botón </> Embed que aparece dentro del reproductor. En el cuadro Embed this video (Incrusta este vídeo) haz clic derecho sobre el código y selecciona la opción Copiar. Ministerio de Educación. ITE Multimedia y Web

57 Metacafe Clic en el botón <> Incrustar. Clic derecho en la casilla Embeddable Player y selecciona Seleccionar todo y luego Copiar. Insertar el vídeo Blogger 1. Crear una NUEVA ENTRADA en Blogger y define como título "Mis vídeos". 2. Clic en el enlace Edición de HTML para mostrar el código HTML del artículo. 3. Sitúate en la edición HTML del artículo del blog al final del mismo. Clic derecho y selecciona Pegar. Esta acción pegará el código HTML copiado anteriormente. 4. Para terminar pulsa en el botón PUBLICAR ENTRADA. A continuación haz clic en el enlace Ver blog para ver el resultado final Wordpress 1. Clic en el botón Post to Blog que se encuentra en la barra de marcadores de Mozilla Firefox. 2. Haz clic en el botón Post to Wordpress 3. En el cuadro de diálogo Post to your Blog haz clic en el enlace (Click if you're having trouble) (Clic si tienes problemas). Sobre el cuadro de texto haz clic derecho y elige Pegar para pegar el código. Clic en el enlace preview (vista previa) 4. Introduce la URL of your blog (URL de tu blog), Username (Usuario) y Password para realizar la publicación directa sobre tu blog de Wordpress. Ministerio de Educación. ITE Multimedia y Web

58 5. Teclea el título del nuevo artículo que contendrá el vídeo Title y el texto del mismo en Body. Clic en el botón Publish. 6. Clic en el botón View your blog (Ver tu blog). Se mostrará un artículo de tu blog conteniendo el video overstream. Es posible posteriormente reeditar esta entrada y modificar su texto. Revver Vímeo Metacafe Nota: Nota: Wordpress.com contempla la integración de vídeos de Vimeo utilizando una etiqueta específica sin ser necesaria la utilización de un procedimiento general que proporciona VodPod. Si la URL directa de un vídeo en Vimeo es del tipo: Entonces se puede añadir al código HTML de una entrada la siguiente etiqueta: [vimeo O bien [vimeo ] La anchura y altura por defecto del reproductor insertado es 400x300 píxeles. Sin embargo en la etiqueta se pueden especificar otras dimensiones: [vimeo w=500&h=400] Ministerio de Educación. ITE Multimedia y Web