Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web...

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

Transcript of Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web...

Page 1: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Multimedia y Web 2.0

Vídeo. Integración

Page 2: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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......................................................................................... 11

Crear el artículo en Blogger ................................................................................................. 13

Insertar Vídeo en Wordpress .................................................................................................. 14

Blip.tv................................................................................................................................... 15

DailyMotion ......................................................................................................................... 17

Otros servicios de vídeo ...................................................................................................... 18

VodPod: importación de vídeos para Wordpress ............................................................... 20

Youtube: vídeo en streaming .................................................................................................. 21

Publicación de un vídeo en YouTube .................................................................................. 22

Insertar vídeo de Youtube en Blogger ................................................................................. 26

Insertar vídeo de Youtube en Wordpress ........................................................................... 29

Insertar una lista de vídeos Youtube en Blogger ................................................................ 32

Añadir un vídeo de Youtube a un gadget de Blogger .......................................................... 37

Añadir un vídeo de Youtube a un widget de Wordpress .................................................... 42

OverStream: Vídeos subtitulados de Youtube .................................................................... 47

Servicios de Vídeo ................................................................................................................... 54

Copiar el código embed del vídeo ....................................................................................... 54

Insertar el vídeo .................................................................................................................. 57

Actividades .............................................................................................................................. 59

Page 3: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 4: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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:

https://www.blogger.com/start?hl=es

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.

Page 5: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

Page 6: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 7: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 http://www.adobe.com). 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.

Page 8: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

(http://www.longtailvideo.com/). 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.

Page 9: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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: http://www.blogger.com 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 http://sites.google.com/site/<nombre_usuario>. 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.

Page 10: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 11: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 12: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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="http://sites.google.com/site/fernandoposada/video/flvplayer.swf"

width="384" height="308" allowfullscreen="true"

flashvars="file=http://sites.google.com/site/fernandoposada/video/video.flv&ima

ge=http://sites.google.com/site/fernandoposada/video/captura.jpg&width=384&h

eight=308">

</embed>

Selecciona este código <embed> … </embed> y elige Editar > Copiar.

Page 13: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 13

Crear el artículo en Blogger

Abre una nueva pestaña del navegador web y accede a la URL de inicio de

Blogger:

https://www.blogger.com/start?hl=es

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.

Page 14: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 15: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 15

Blip.tv

Visita la web de Blip.tv (http://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.

Page 16: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 17: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 (http://www.dailymotion.com/es)

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:

http://www.dailymotion.com/video/xcfw1n_el-viento-de-marte-medido-gracias-a_tech

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]

Page 18: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 (http://www.flickr.com/explore/video/)

2. Copia el identificador ID del vídeo que figura en la última parte de su URL:

Ejemplo: http://www.flickr.com/photos/chaddles/2402990826

3. En el código HTML del artículo de Wordpress pega la etiqueta:

Page 19: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 19

[flickr video=http://www.flickr.com/photos/chaddles/2402990826]

o bien

[flickr video=2402990826]

Para que no se muestre la información inicial al principio del vídeo:

[flickr video=2402990826 show_info=no]

Para definir la altura y anchura en píxeles del reproductor:

[flickr video=2402990826 w=200 h=150]

LiveVideo

1. Localiza un vídeo en LiveVideo (http://www.livevideo.com/)

2. Copia el identificador ID del vídeo que figura en su URL.

Ejemplo:

http://www.livevideo.com/video/F25406F905A64843B19E7CDC3CFD04A4/cool-mac.aspx

3. En el código HTML del artículo de Wordpress pega la etiqueta:

[livevideo id=F25406F905A64843B19E7CDC3CFD04A4]

PodTech

1. Localiza un vídeo en PodTech (http://www.podtech.net/)

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.

Viddler

1. Localiza un vídeo en Viddler (http://www.viddler.com/)

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

Page 20: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 20

Videolog

1. Localiza un vídeo en Videolog (http://videolog.tv/)

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 (http://vodpod.com) 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 http://vodpod.com/wordpress/ 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 (http://www.revver.com). 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.

Page 21: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 (http://www.youtube.com) 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

Page 22: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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:

www.youtube.com. Haz clic en el enlace Acceder que aparece en la esquina

superior derecha y debes introducir tu dirección de correo electrónico

[email protected] (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: 24-25 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.

Page 23: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 24: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 25: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 MP4.

11. 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.

Page 26: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

No, no permitir que se puntúe este vídeo. No permitir que

este video pueda ser votado.

Inserción.

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 : http://www.youtube.com. 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:

Page 27: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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:

https://www.blogger.com/start?hl=es

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.

Page 28: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

Page 29: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 : http://www.youtube.com. 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:

http://www.youtube.com/watch?v=CkRS3wDg1xU

Page 30: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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=http://www.youtube.com/watch?v=CkRS3wDg1xU]

11. Pulsa en el botón Publicar y luego en el enlace Vista previa.

Page 31: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 31

Ejemplos de parámetros de integración de Youtube en WP

Para especificar la altura y anchura de forma explícita:

[youtube=http://www.youtube.com/watch?v=H2Ncxw1xfck&w=320&h=240]

Para especificar sólo la anchura:

[youtube=http://www.youtube.com/watch?v=H2Ncxw1xfck&w=320]

Para reproducir el vídeo en High Definition-Alta Definición (HD):

[youtube=http://www.youtube.com/watch?v=H2Ncxw1xfck&hd=1]

Para reproducir el vídeo en HD con altura y anchura específicos:

[youtube=http://www.youtube.com/watch?v=H2Ncxw1xfck&w=480&h=360&hd=1]

Para ocultar los vídeos relacionados que aparecen una vez finalizada la reproducción del vídeo:

[youtube=http://www.youtube.com/watch?v=H2Ncxw1xfck&rel=0]

Para mostrar el cuadro de búsqueda en Youtube:

[youtube=http://www.youtube.com/watch?v=H2Ncxw1xfck&showsearch=1]

Page 32: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

Page 33: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 34: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 35: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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:

https://www.blogger.com/start?hl=es

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.

Page 36: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

Page 37: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 : http://www.youtube.com.

Page 38: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

Page 39: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 192x159.

11. Para terminar pulsa en el botón GUARDAR.

12. Clic en el enlace Ver blog para observar el resultado final.

Page 40: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 40

Los canales en Youtube

Es una página asociada al usuario con una URL del tipo: http://www.youtube.com/user/<nombre_usuario> 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: http://www.youtube.com/user/rtve Europa Press: http://www.youtube.com/user/europapress Antena 3: http://www.youtube.com/user/antena3 La Sexta: http://www.youtube.com/user/misextatv Cuatro: http://www.youtube.com/user/cuatro

Page 41: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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: http://www.youtube.com/user/rtve

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.

Page 42: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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 (http://vodpod.com/). 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: http://www.youtube.com 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.

Page 43: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 44: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

Page 45: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 46: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 47: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 47

OverStream: Vídeos subtitulados de Youtube

¿Qué es Overstream?

Overstream (http://www.overstream.net) 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

Page 48: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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: http://www.youtube.com/watch?v=z_RAEESmsrs

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):

Page 49: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 50: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 51: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 52: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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

Page 53: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 53

Insertar un video Overstream en una entrada de Wordpress

Visita la web de OverStream (http://www.overstream.net), 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).

Page 54: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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:

Page 55: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 55

Revver: http://www.revver.com Vimeo: http://www.vimeo.com Metacafe: http://www.metacafe.com

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.

Page 56: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 57: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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.

Page 58: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 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:

http://vimeo.com/240975

Entonces se puede añadir al código HTML de una entrada la siguiente etiqueta:

[vimeo http://vimeo.com/240975]

O bien

[vimeo 240975]

La anchura y altura por defecto del reproductor insertado es 400x300 píxeles. Sin embargo en la etiqueta se pueden especificar otras dimensiones:

[vimeo http://vimeo.com/240975 w=500&h=400]

Page 59: Multimedia y Web 2.0 Vídeo. Integración€¦ · Ministerio de Educación. ITE |Multimedia y Web 2.0 5 Introduce el título de la nueva entrada: Turismo rural. En la barra de herramientas

Ministerio de Educación. ITE |Multimedia y Web 2.0 59

Actividades

Actividad 1: Insertar un vídeo en tu blog

1. Obtén un archivo de vídeo de corta duración. 2. Inserta este archivo de vídeo en tu blog utilizando alguno de los procedimientos

explicados.

Actividad 2: Vídeos en Youtube

1. Utiliza tu cuenta de usuario en Youtube para subir un vídeo propio. 2. Configura los parámetros de apariencia y funcionamiento del visor de tu vídeo.

Otra posibilidad es utilizar un vídeo ajeno. 3. Copia y pega el código embed para insertar este vídeo en un artículo de tu

blog.

Actividad 3: Insertar un video Web 2.0 en tu blog

1. Tras analizar los procedimientos de integración en tu blog de un vídeo alojado en distintos servicios Web 2.0, deduce el procedimiento universal para insertar en un artículo cualquier vídeo alojado en uno de estos servicios de vídeo.

2. Inserta en una entrada de tu blog un vídeo alojado en Vimeo, DailyMotion, Revver, Metacafe, etc.