video completo

4. Vídeo

Vídeo y animaciones ::: Introducción Diseño de materiales multimedia. Web 2.0

314

4.1 Introducción


315

4.1 Introducción 4.1.1 Conceptos básicos de vídeo digital Dimensiones. Es el tamaño del video (ancho x alto) expresado en píxeles cuando se visualiza al 100%, sin agrandar ni reducir. Los reproductores pueden mostrar un video a pantalla completa o con una ampliación del 200%, 300%, etc. En estos casos el video pierde calidad de imagen y esta pérdida depende del formato de archivo. Un video AVI puede tener cualquier ancho y alto mientras que los estándares de VideoCD son 352 x 288 y de DVD 720 x 576. Codec. Acrónimo de "codificación/decodificación". Un códec es un algoritmo especial que reduce el número de bytes que ocupa un archivo de video. Los archivos codificados con un códec específico requieren el mismo códec para ser decodificados y reproducidos. Algunos de los códecs más utilizados para el formato AVI son: DivX, XviD, CinePak, Intel Indeo 5, DV, etc. Velocidad de transmisión (bitrate) El bitrate define la cantidad de espacio físico (en bits) que ocupa un segundo de duración de ese video. El video tendrá más calidad cuanto mayor sea su bitrate y el archivo que lo contiene tendrá mayor peso. El bitrate puede ser fijo o variable. El bitrate variable consigue mayor calidad de imagen porque recoge más calidad en escenas muy cargadas o con mucho movimiento y ahorra en aquellas más estáticas. Fotogramas por segundo. Un video resulta de la exposición imágenes o fotogramas uno detrás de otro. Un parámetro de la calidad del video es el número de fotogramas por segundo que muestra durante su reproducción. Este valor oscila entre 15 y 30. Por ejemplo los vídeos en DVD en Europa exhiben 25 fotogramas por segundo (25 fps). Fotogramas Clave. Cuando se aplica un códec de compresión a un video, se suele producir cierta pérdida de la información de sus fotogramas. Algunos fotogramas (los fotogramas clave) se almacenan completamente en el archivo comprimido, mientras que el resto sólo se guardan parcialmente. En la descompresión, estos fotogramas intermedios se reconstruyen a partir de los fotogramas clave. Sistemas de televisión.

• NTSC (National Television Standards Comité = Comité Nacional de Estándares de Televisión). Cada fotograma está formado por 525 líneas y reproduce 30 fotogramas por segundo. Se utiliza en América del Norte, Centroamérica, Japón, etc.

• PAL (Phase Alternation Line = Línea Alternada en Fase): El vídeo PAL tiene 625 líneas por fotograma y 25 fotogramas por segundo. Es el sistema más extendido actualmente en Europa.

• SECAM (Séquentiel Couleur à Mémoire = Color secuencial con memoria). Muestra 625 líneas y 25 fotogramas por segundo. De origen francés, ha perdido mercado en Europa a favor del sistema PAL.

Proporción o ratio de aspecto. Es la proporción entre la anchura y altura de un video. Cuando se reproduce un video se suele mantener por defecto esta proporción para evitar deformación de las imágenes. Por este motivo cuando se elige la visualización a pantalla completa, aparecen franjas negras arriba y abajo. Es habitual una relación 4:3 para los videos domésticos (352x288 píxeles, por ejemplo) mientras que en DVD se suele trabajar con ratios de 16:9.


316

4.1.2 Formatos de archivos de video Los videos digitales se pueden guardar en archivos de distintos formatos. Cada uno se corresponde con una extensión específica del archivo que lo contiene. Existen muchos tipos de formatos de video. Aquí se citan algunos de los más utilizados. Asimismo cada tipo de archivo admite en cada momento un códec de compresión distinto. AVI (Audio Video Interleaved = Audio y Video Intercalado)

• Es el formato estándar para almacenar video digital. • Cuando se captura video desde una cámara digital al ordenador, se suele almacenar

en este formato con el códec DV (Digital Video). • El archivo AVI puede contener video con una calidad excelente. Sin embargo el peso

del archivo resulta siempre muy elevado. • Admite distintos códecs de compresión como CinePak, Intel Indeo 5, DV, etc. Los

códecs con más capacidad de compresión y una calidad aceptable son DivX y XviD. • El formato AVI puede ser visualizado con la mayoría de reproductores: Windows Media,

QuickTime, etc. siempre y cuando se encuentren instalados en el equipo los adecuados códecs para cada tipo de reproductor.

• Es ideal para guardar videos originales que han sido capturados de la cámara digital (codificados con DV).

• No es recomendable publicarlos en Internet en este formato por su enorme peso. • Los códecs CinePak, Intel Indeo, DV, etc. no ofrecen una gran compresión. Los códecs

DivX y XviD por el contrario consiguen una óptima compresión aunque se suelen destinar sobre todo a la codificación de películas de larga duración.

MPEG (Moving Pictures Expert Group = Grupo de Expertos de Películas)

• Es un formato estándar para la compresión de video digital. • Son archivos de extensión *.MPG ó *.MPEG. • Admite distintos tipos de códecs de compresión: MPEG-1 (calidad CD), MPEG-2

(calidad DVD), MPEG-3 (orientado al audio MP3) y MPEG-4 (más orientado a la web). • Se reproducen con Windows Media Player y QuickTime.

MOV (http://www.apple.com/es/quicktime/)

• Es el formato de video y audio desarrollado por Apple. • Utiliza un códec propio que evoluciona en versiones con bastante rapidez. • Este tipo de archivos también pueden tener extensión *.QT • Se recomienda utilizar el reproductor de QuickTime. Existe una versión gratuita del

mismo que se puede descargar de Internet. • Es ideal para publicar videos en Internet por su razonable calidad/peso. • Admite streaming.

WMV (http://www.microsoft.com/windows/windowsmedia/es/)

• Ha sido desarrollado recientemente por Microsoft. • Utiliza el códec MPEG-4 para la compresión de video. • También puede tener extensión *.ASF • Sólo se puede visualizar con una versión actualizada de Windows Media 7 o superior.

Esta aplicación viene integrada dentro de Windows. • Es ideal para publicar videos en Internet por razonable calidad/peso. • Admite streaming.

RM (http://spain.real.com/)

• Es la propuesta de Real Networks para archivos de video. • Utiliza un códec propio para comprimir el audio. • Este tipo de archivos tiene extensión *.RM y *.RAM. • Se visualiza con un reproductor específico: Real Player. Existe una versión gratuita

del mismo que se puede descargar de Internet.


317

• Se puede utilizar para publicar videos en Internet por su aceptable calidad/peso. • Admite streaming.

FLV (http://www.adobe.com)

• Es un formato que utiliza el reproductor Adobe Flash para visualizar vídeo en Internet. • Utiliza el códec Sorenson Spark y el códec On2 VP6. Ambos permiten una alta calidad

visual con bitrates reducidos. • Son archivos de extensión *.FLV. • Se pueden reproducir desde distintos reproductores locales: MPlayer, VLC media

player, Riva, Xine, et. • Opción recomendada para la web por su accesibilidad. Al visualizarse a través del

reproductor de Flash es accesible desde la mayoría de los sistemas operativos y navegadores web.

• Los repositorios de vídeo más conocidos en Internet utilizan este formato para la difusión de vídeos: YouTube, Google Video, iFilm, etc.

• Permite configurar distintos parámetros del vídeo para conseguir una aceptable calidad/peso.

• Admite streaming. 4.1.3 ¿Qué es el streaming? En la navegación por Internet es necesario descargar previamente el archivo (página HTML, imagen JPG, audio MP3, etc.) desde el servidor remoto al cliente local para luego visualizarlo en la pantalla de este último. La tecnología de streaming se utiliza para optimizar la descarga y reproducción de archivos de audio y video que suelen tener un cierto peso. El streaming funciona de la siguiente forma:

• Conexión con el servidor. El reproductor cliente conecta con el servidor remoto y éste comienza a enviarle el archivo.

• Buffer. El cliente comienza a recibir el fichero y construye un buffer o almacén donde empieza a guardarlo.

• Inicio de la reproducción. Cuando el buffer se ha llenado con una pequeña fracción inicial del archivo original, el reproductor cliente comienza a mostrarlo mientras continúa en segundo plano con el resto de la descarga.

• Caídas de la velocidad de conexión. Si la conexión experimenta ligeros descensos de velocidad durante la reproducción, el cliente podría seguir mostrando el contenido consumiendo la información almacenada en el buffer. Si llega a consumir todo el buffer se detendría hasta que se volviera a llenar.

El streaming puede ser de dos tipos dependiendo de la tecnología instalada en el servidor:

• Descarga progresiva. Se produce en servidores web que disponen de Internet Information Server (IIS), Apache, Tomcat, etc. El archivo de vídeo o audio solicitado por el cliente es liberado por el servidor como cualquier otro archivo utilizando el protocolo HTTP. Sin embargo, si el archivo ha sido especialmente empaquetado para streaming, al ser leído por el reproductor cliente, se iniciará en streaming en cuanto se llene el buffer.

• Transmisión por secuencias. Se produce en servidores multimedia que disponen de

un software especial para gestionar más óptimamente el streaming de audio y vídeo: Windows Media Server, Flash Communication Server, etc. La utilización de un servidor multimedia ofrece múltiples ventajas frente al servidor web. Las más destacadas son:


318

a. Mayor rapidez en la visualización de este tipo de contenidos. b. La comunicación entre servidor/cliente se puede realizar por protocolos

alternativos al HTTP. Tiene el inconveniente del bloqueo impuesto por Firewalls pero tiene la ventaja de una mayor rapidez.

c. Mejor gestión del procesador y ancho de banda de la máquina del servidor ante peticiones simultáneas de varios clientes del mismo archivo de audio o vídeo.

d. Control predefinido sobre la descarga que pueden realizar los clientes: autentificada, filtrada por IP, sin almacenarla en la caché del cliente, etc.

e. Mayor garantía de una reproducción ininterrumpida gracias al establecimiento de una conexión de control inteligente entre servidor y cliente.

f. Posibilidad de distribución de transmisiones de audio y vídeo en directo. 4.1.4 Optimización de archivos de video Para optimizar el peso del archivo de video será necesario editarlo para establecer alguno o algunos de los siguientes parámetros: En el Audio:

1) El códec de compresión de audio utilizado: MPEG Layer 1, MPEG Layer 2, MP3, etc. 2) Resolución. Establecer resoluciones más pequeñas: 32-bits, 16-bits, 8-bits, 4-bits, etc. 3) Tasa de muestreo. Definir valores inferiores: 44100 Hz., 22050 Hz., 11025 Hz, etc. 4) Velocidad de transmisión (bitrate). Configurar bitrates más bajos: 128 Kbps, 96 Kbps,

64 Kbps, etc. 5) Calidad estéreo/mono. Reducir la calidad de “stereo” a “mono”

En el Video:

1) El códec de compresión de video utilizado: MPEG-1, MPEG-2, MPEG-4, Intel Indeo, Cinepak, DivX, etc.

2) Método de BitRate. Utilizar un bitrate variable VBR puede optimizar la calidad del video y repercutir en el peso final del archivo frente a un bitrate constante CBR.

3) Velocidad de transmisión (bitrate). Configurar bitrates más bajos: 1000 Kbps, 768 kbps, 360 Kbps, etc.

4) Dimensiones. Cuanto más pequeña sea la altura y anchura en píxeles de los fotogramas de un video, menos tamaño ocupará su archivo.

5) Velocidad de fotogramas. Se puede reducir el número de fotogramas por segundo que mostrará el video: 30, 24, 20, 16, etc.

6) Fotogramas Clave. Durante la compresión también se puede indicar cada cuánto se guardará un fotograma completo (fotograma clave): 24, 48, 96, 128, etc. Cuanto mayor sea esta cadencia más bajo será el peso del archivo resultante.

Otros elementos que inciden en la optimización:

1) Duración. Cuanto más corto es un video, menos peso ocupa su archivo. En ocasiones puede resultar interesante fraccionar un archivo de video en sus escenas para facilitar su descarga.

2) Formato de archivo. Los archivos *.WMV, *.MOV, *.RM y *.FLV son los más adecuados para publicar un video en Internet por su adecuada relación calidad/peso y porque admiten streaming. Los archivos *.AVI con códecs de compresión baja son ideales para guardar los videos originales. Los archivos *.AVI con códecs DiVX-XviD son apropiados para videos de películas de cierta duración. Los archivos *.MPG con códec MPEG-1 se utilizan para crear Video-CDs. Los archivos *.MPG con códec MPEG-2 se utilizan como fuente para montar un DVD.


319

4.1.5 Dispositivos de captura de video Los dispositivos de captura de video permiten transferir al disco duro del ordenador un video ya grabado o una emisión en directo. Los más frecuentes son:

• Una cámara DV (Video Digital) conectada al puerto IEEE 1394 del equipo. Con este dispositivo se obtiene la mejor calidad porque la información de audio y video ya está en formato digital llegando simplemente al ordenador a través del mencionado puerto.

Conexión IEEE 1394 para videocámara digital

• Una cámara web conectada a un puerto USB y un micrófono conectado a la entrada MIC de la tarjeta de sonido.

Conexiones Cámara-USB y Micrófono-Tarjeta Audio • Una tarjeta sintonizadora de TV conectada a la señal de antena. • Una cámara o reproductor VHS conectado a una tarjeta de captura analógica. Este

proceso supone la conversión de video analógico a video digital. Para disponer de una información más completa de cómo conectar y configurar un dispositivo de captura, consulta la documentación que acompaña a cada hardware.

Vídeo y animaciones ::: Reproducción de vídeos con VLC Player Diseño de materiales multimedia. Web 2.0

320

4.2 Reproducción de vídeos con

VLC Media Player


321

4.2 Reproducción de vídeos con VLC Player 4.2.1 ¿Qué es VLC Media Player? VLC Media Player es un reproductor multimedia, gratuito y multiplataforma. Sus características más destacadas son:

• Soporta un gran número de formatos de audio y vídeo sin necesidad de instalar códecs adicionales: MPEG-1, MPEG-2, MPEG-4, DivX, MP3,OGG, MOV, RAM, AVI, FLV, etc.

• Es una opción muy interesante frente a otros programas comerciales para reproducir CDs de música, películas en soporte DVD o VídeoCD, etc.

• Se puede utilizar como servidor de streaming en una red local o de banda ancha.

VLC Media Player es una aplicación local para reproducir archivos multimedia del disco duro o en soporte CD/DVD. No se trata de un plugin para el navegador web. Se ha incluido en este curso por su facilidad para visualizar todo tipo de formatos y en especial DivX, FLV y películas en DVD.

4.2.2 Instalación de VLC Media Player en Windows Descarga y ejecuta el instalador del reproductor VLC Media para Windows: vlc-0.8.6d-win32.exe. Otra posibilidad es consultar su sitio web oficial: http://www.videolan.org y descargar si procede la última versión. Si deseas utilizar la versión portable para Windows descarga y descomprime el siguiente archivo a una carpeta de tu disco duro o pendrive: VLC_Portable_0.8.6d.exe 4.2.3 Instalación de VLC Media Player en Ubuntu Desde el escritorio selecciona Aplicaciones > Añadir o quitar aplicaciones. En el cuadro de diálogo Añadir o quitar aplicaciones introduce el término de búsqueda VLC. Marca la entrada VLC Media Player y pulsa en el botón Aplicar Cambios. Una vez instalado selecciona Aplicaciones > Sonido y vídeo > VLC media player y arrastra este icono hasta el escritorio para disponer de un acceso directo. 4.2.4 Reproducción de un archivo de vídeo FLV con VLC Media Player Una vez instalado el reproductor VLC Media Player puedes comprobar su correcto funcionamiento. 1. Descarga y descomprime el archivo flv.zip a una carpeta de tu equipo. 2. A continuación haz doble clic sobre el icono VLC Media Player situado en el escritorio

para iniciar este programa.

3. Se muestra la consola de reproducción de VLC media player.


322

4. Selecciona Archivo > Abrir Rápido Archivo. En el cuadro de diálogo Abrir Archivo

despliega la lista Buscar en: para situarte en la carpeta donde has descargado el vídeo.

5. Clic sobre el archivo dteatro.flv y pulsa en el botón Abrir. Se reproducirá el contenido de este archivo de vídeo.

6. Repite los pasos anteriores descargando y descomprimiendo el archivo dteatro_divx.zip

para obtener el correspondiente audio en formato *.avi codificado con DivX. Puedes experimentar otras posibilidades de VLC Media Player:

• Archivo > Abrir Rápido Archivo para visualizar otros formatos de vídeo: .mov, .wmv, … No admite el formato de RealPlayer.

• Archivo > Abrir disco permite reproducir una película en formato DVD o Video-CD.


323

• Archivo > Abrir Directorio para indicar una carpeta del equipo cuyos archivos serán reproducidos de forma secuencial.

Nota: En Windows el reproductor por defecto suele ser Windows Media Player mientras que en Ubuntu suele ser Totem

Vídeo y animaciones ::: Descarga de archivos de video Diseño de materiales multimedia. Web 2.0

324

4.3 Descarga de archivos de vídeo


325

4.3 Descarga de archivos de vídeo En este apartado se exponen distintos procedimientos para descargar archivos de vídeo que se están visualizando dentro de una página web. De esta forma se pueden reutilizar en local o bien en la intranet del centro logrando una visualización más ágil sin las limitaciones del acceso a Internet. 4.3.1 Descarga con Firefox (Unplug) ¿Qué es UnPlug? UnPlug es una extensión del navegador Mozilla Firefox que permite descargar y guardar en local un video o audio que se muestra dentro de una página web. Esta extensión realiza un chequeo de la página web mostrando todos los archivos multimedia que contiene y ofreciendo un vínculo Save para cada uno. Al pulsar en el mencionado enlace se descarga ese archivo al disco duro del equipo local. Como veremos UnPlug funciona con muchos sitios web que ofrecen repositorios de vídeos: Youtube, Google Vídeo, Current TV, etc. Como veremos más adelante este plugin también permite descargar animaciones flash. Instalación de UnPlug Para instalar una extensión o plugin en Mozilla Firefox se proponen dos métodos alternativos. Puedes elegir uno de los dos: Método 1: Instalación en línea

1. Abre Mozilla Firefox 2. Selecciona Herramientas > Complementos.

3. En el panel Complementos pulsa en el enlace Obtener extensiones.


326

4. Se accede a la página de Firefox donde se muestra el catálogo de extensiones para este navegador.

5. En el encabezado superior introduce el término Unplug y pulsa en el botón Buscar.

6. En la página de resultados de la búsqueda, haz clic en el enlace UnPlug para acceder a su página.

7. Una vez situados en la página de UnPlug haz clic en el botón Instalar ahora


327

8. Se muestra el acuerdo de licencia. Pulsa en el botón Aceptar e Instalar.

9. Se muestra el cuadro de diálogo Instalación de software. Transcurridos unos segundos se activa el botón Instalar ahora. Pulsa en este botón.


328

10. En el panel Complementos ahora se muestra el plugin instalado. Clic en el botón

Reiniciar Firefox. De esta forma la extensión de activará al reiniciar el programa.

Método 2. Instalación desde archivo local

1. Descarga el archivo unplug-1.6.06.xpi. Otra posibilidad es descargar la última versión de esta extensión desde Internet: http://unplug.mozdev.org/installation.html

2. Abre Firefox 3. Selecciona Archivo > Abrir archivo … 4. En el cuadro de diálogo Abrir archivo localiza el archivo unplug-1.6.06.xpi y pulsa en

el botón Abrir. 5. Se muestra el cuadro de diálogo Instalación de software. Transcurridos unos

segundos se activa el botón Instalar ahora. Pulsa en este botón. 6. En el panel Complementos ahora se muestra el plugin instalado. Clic en el botón

Reiniciar Firefox. De esta forma la extensión de activará al reiniciar el programa. Descarga desde YouTube YouTube es un portal web que permite a los usuarios subir, ver y compartir clips de vídeos. Su dirección es: http://www.youtube.com. El usuario puede subir un vídeo en distintos formatos y el sistema lo transforma en formato FLV (Flash Video) para servir su contenido en streaming utilizando una consola personalizada. El cliente sólo necesita disponer del plugin de Adobe Flash instalado en su navegador web para poder visualizar un vídeo. Youtube se ha convertido en un repositorio de vídeos muy popular debido, sobre todo, a la posibilidad de alojar vídeos personales de manera sencilla y a su interfaz ágil para buscar y visionar los documentos videográficos de los demás.

1. Abre el navegador web Firefox 2. Visita la web de Youtube en: http://www.youtube.com 3. Introduce como término de búsqueda “Picasso” y pulsa en el botón Search (Buscar).


329

4. En la página de resultados se mostrarán los vídeos cuyas etiquetas contengan la palabra o palabras introducidas.

5. Pulsa, por ejemplo, sobre el enlace Pablo Picasso con la descripción “Picasso painting live” (Picasso pintando en directo). Su URL directa es: http://www.youtube.com/watch?v=7vgAYTC9bRY

6. Pulsa en el botón de Unplug que aparece en la barra de herramientas del navegador o selecciona Herramientas > Unplug

7. Se mostrará una página con la descripción de todos los elementos multimedia embebidos en la página web actual.

8. Clic en el botón Save (Guardar) correspondiente al primer elemento Tipo: Vídeo Flash.


330

9. En el cuadro de diálogo Guardar selecciona en la lista Guardar en una carpeta conocida de tu disco duro y define como nombre del archivo FLV, por ejemplo, picasso.flv

10. Clic en el botón Guardar. 11. Al cabo de unos instantes se habrá descargado el archivo de vídeo. Para terminar

pulsa en el botón Cerrar de Unplug que aparece en la esquina superior derecha. 12. Para reproducirlo en local inicia VLC Media Player, selecciona Abrir archivo rápido

para navegar hasta la carpeta anterior y seleccionar el archivo picasso.flv.

4.3.2 Volcados de streaming con VLC Una de las características del streaming es que desde el reproductor o navegador no puede descargarse en local el archivo de vídeo que está visualizando. En este contexto tiene aplicación la utilización de VLC Media Player. Descarga de vídeos de la Biblioteca Virtual Cervantes

1. Abre el navegador web Firefox y visita la web oficial de la Biblioteca Virtual Cervantes: http://www.cervantesvirtual.com/videoteca/

2. Navega por este repositorio hasta que llegues a visualizar el vídeo que te interesa.


331

Para Windows

3. Clic derecho sobre el reproductor donde se está mostrando la película y en el menú contextual que se muestra elige la opción Propiedades.

Pulsa y arrastra para seleccionar la ruta del archivo que se muestra en Ubicación dentro de la pestaña Archivo. A continuación haz clic derecho sobre esta selección y elige Copiar. Con estos pasos hemos copiado al portapapeles la ruta del archivo.

Para Ubuntu Linux

3. Clic derecho sobre el reproductor y elige la opción Copiar. Esta acción copiará la URL del vídeo que se está mostrando.

Para ambos sistemas

4. Abre el programa VLC Media Player 5. Selecciona Archivo > Abrir volcado de red 6. En la pestaña Red marca la opción HTTP/HTTPS/FTP/MMS y en el cuadro de texto

URL haz clic derecho para seleccionar Pegar. De esta forma sobre esta casilla se pegará la dirección antes copiada del vídeo elegido.


332

7. En la sección Opciones Avanzadas de esta pestaña marca la opción Volcado/Salvar y a continuación pulsa en el botón Opciones …

8. En el cuadro de diálogo Volcado de salida, en la sección Outputs marca Archivo. A continuación pulsa en el botón Explorar para localizar la carpeta donde se guardará el archivo descargado y el nombre con que se guardará. En este caso como se trata de un vídeo de Windows Media Video la extensión será: WMV. Marca la opción Entrada de volcado raw y pulsa en el botón OK para guardar esta configuración.

9. Desde el panel Abrir pulsa en el botón Ok para iniciar la descarga. La consola de VLC

Player mostrará el progreso del proceso de descarga. 10. Cuando hayas terminado podrás utilizar el explorador de archivos y situarte en la

carpeta destino para hacer doble clic sobre el archivo descargado y visualizarlo con el reproductor multimedia instalado por defecto en el sistema. También podrás utilizar VLC Media Placer para reproducirlo mediante Archivo > Abrir.

4.3.3 Sitios web para descarga de vídeos Actualmente Youtube es el líder en portales con servicio de vídeo en línea. Sin embargo cada vez proliferan más los sitios web de este tipo donde es posible subir y visualizar contenidos de vídeo. En algunos de ellos también se pueden descargar vídeos al disco duro local para visualizarlo con los alumnos en aulas sin conexión a internet y también asegurando la actividad frente a las limitaciones de una conexión modesta.


333

En algunos casos se puede aplicar el plugin Unplug, otras veces el volcado de red con VLC Player y en otros casos en el mismo sitio se ofrece como alternativa la descarga directa del archivo de video. A continuación se citan algunos de los servicios de vídeos más conocidos, el formato de vídeo utilizado y el procedimiento sugerido para la descarga de activos:

1. YouTube http://www.youtube.com FLV Firefox+Unplug

2. Mediateca de EducaMadrid.

http://mediateca.educa.madrid.org/ FLV Firefox+Unplug

3. TeacherTube

http://www.teachertube.com/ FLV Descarga directa a partir de la ruta ofrecida en la etiqueta para Wordpress.

4. Google Vídeo http://video.google.es/ FLV y MP4 Firefox+Unplug para FLV y Descarga directa para MP4-Ipod

5. Revver

http://revver.com/ MOV Firefox+Unplug

6. Metacafe

http://www.metacafe.com/ FLV Firefox+Unplug

7. MySpace http://myspace.com/ FLV Firefox+Unplug

8. Dailymotion http://www.dailymotion.com/ FLV Firefox+Unplug

9. Jumpcut http://jumpcut.com/ FLV Firefox+Unplug

10. Guba http://www.guba.com/ FLV Firefox+Unplug

11. Sharkle.com http://www.sharkle.com/ FLV


334

Firefox+Unplug

12. Lulu TV http://www.lulu.tv

FLV Firefox+Unplug 13. Hiphopdeal

http://www.hiphopdeal.com/ FLV Descarga directa 14. Vsocial

http://vsocial.com/ FLV Firefox+Unplug

15. Current TV http://www.current.tv/ FLV Firefox+Unplug

16. Mobuzz TV http://dosisdiaria.mobuzz.tv/ WMV-MOV-FLV-MP4 Ipod Descarga directa

17. Colombia aprende http://www.colombiaaprende.edu.co/html/mediateca MOV Firefox+UnPlug

18. Universidad de Sevilla. http://www.sav.us.es/producciondevideo/videoenred.asp RM Descarga directa

19. TV educativa del CNICE http://tv_mav.cnice.mec.es/ MPG, FLV, WMV, MOV Descarga directa

20. TV educativa de la UNED http://www.uned.es/cemav/tv.htm WMV Descarga directa

21. Biblioteca Virtual Cervantes http://www.cervantesvirtual.com/videoteca/ WMV VLC Media Player

22. Mediateca de Educared http://campusuniv.campusred.net/vod-publico2/ WMV VLC Media Player. No se visualiza en Firefox

23. Mediateca Universidad de Oviedo http://mediateca.uniovi.es/mediateca/ WMV


335

VLC Media Player

24. Videoteca CUDI de Méjico http://www.udlap.mx/internet2/video/ WMV VLC Media Player

25. Vive, TV educativa de Venezuela http://www.vive.gob.ve/ WMV-FLV-OGG-MOV-RM Descarga directa

26. Ciencias Galilei http://www.acienciasgalilei.com/videos/video.htm WMV Descarga directa

Vídeo y animaciones ::: Captura de vídeo Diseño de materiales multimedia. Web 2.0

336

4.4 Captura de vídeo


337

4.4 Captura de vídeo En este apartado se explica el procedimiento para capturar vídeo de una cámara digital DV utilizando Windows Movie Maker en equipos Windows o bien Kino en equipos Ubuntu. 4.4.1 Windows Movie Maker para Windows Windows Movie Maker es un programa de Microsoft que permite capturar video, editar su contenido y publicarlo en distintos soportes. Instalación de Windows Movie Maker Se trata de una aplicación integrada dentro de Windows XP Service Pack 2 o Windows Vista y por ello sólo es posible utilizarlo si tenemos instalado en el ordenador esta versión del sistema operativo. Si dispones de Windows XP instalado en tu equipo, comprueba si incluye Service Pack 2:

1. Desde el escritorio de Windows elige: Inicio > Panel de Control > Sistema. 2. En la solapa General deberá aparecer la etiqueta: “Service Pack 2”.

3. Si este texto no aparece aquí deberás visitar la web de Microsoft para descargar el SP2 e instalarlo a continuación: http://www.microsoft.com/spain/windowsxp/sp2/ .

Abrir Windows Movie Maker Una vez instalado SP2, para abrir el programa:

1. Desde el escritorio de Windows, pulsa en el botón Inicio, luego en el botón Todos los programas y por último en Windows Movie Maker.


338

Otra posibilidad es crear un icono de acceso directo en el escritorio:

1. Desde el escritorio de Windows, haz clic en Inicio, luego en Todos los programas. 2. Mantén pulsada la tecla Ctrl y sin soltarla pulsa y arrastra hasta el escritorio de

Windows el elemento Windows Movie Maker. 3. En el escritorio se ha creado el acceso directo a este programa. Para acceder a él en

sucesivas ocasiones haz doble clic sobre el icono que has creado.

Capturar video de cámara DV

1. Abre el programa Windows Movie Maker. 2. Conecta la cámara DV al puerto IEEE 1394 del ordenador. Enciende la cámara y activa

en ella el modo VCR para reproducir el video tomado. 3. En el panel Tareas de película haz clic en la entrada Capturar desde dispositivo de

video. Si no está visible este panel, haz clic en el botón Tareas de la barra de herramientas.

4. Si dispones de más de un dispositivo de captura de video, se mostrará el cuadro de diálogo Dispositivo de captura de vídeo. En la lista Dispositivos disponibles, haz clic en la cámara DV. Si sólo tienes instalado este dispositivo, esta ventana no aparecerá.

5. En el cuadro Introduzca un nombre de archivo para el vídeo capturado, escribe el nombre del archivo de vídeo capturado. Por ejemplo: MiVideo001. En el cuadro Seleccione una ubicación para guardar el vídeo capturado, selecciona la ubicación en la que desea guardar el vídeo o haz clic en Examinar… para seleccionar una nueva ubicación. Windows Movie Maker guarda por defecto las capturas en la carpeta Mis vídeos situada dentro de la carpeta Mis documentos. Dejamos esta opción por defecto y pulsamos en Siguiente>


339

6. En el cuadro Configuración de vídeo, selecciona la configuración de vídeo que deseas utilizar para capturar el vídeo y audio. En este caso vamos a seleccionar la opción Mejor calidad para reproducir en mi equipo (recomendado) porque ofrece una razonable relación calidad/peso de archivo para publicar posteriormente. Clic en Siguiente>


340

Nota:

Para guardar el video con la máxima calidad posible debes elegir la opción Formato de dispositivo digital (AVI DV). El archivo generado tendrá una calidad máxima aunque cada minuto guardado ocupará entre 190 y 210 Mb. Este formato es más idóneo para guardarlo en un dispositivo de cinta o para tomarlo como partida para luego obtener otros formatos más ligeros e idóneos para la web. Para probar otras calidades de captura, selecciona Otras opciones y en la lista desplegable elige otras configuraciones.

7. En el cuadro Método de captura, puedes elegir dos tipos de captura:

• Capturar toda la cinta automáticamente. Se rebobina automáticamente la cinta de la cámara hasta el principio y se captura su contenido completo. Esta captura finaliza cuando se alcanza el final de la cinta o cuando pulses el botón Finalizar.

• Capturar partes de la cinta manualmente. En este caso podrás navegar manualmente por la cinta hasta situarte en el punto deseado para iniciar la captura.

En este caso vamos a seleccionar manualmente un fragmento de grabación para capturar. Por ello activa la segunda opción, asegúrate de que está elegida la casilla Mostrar vista previa durante la captura y pulsa en el botón Siguiente>

8. En la ventana Capturar vídeo se muestra una Vista previa. Utiliza los controles de reproducción situados debajo: Reproducir, Pausa, Stop, Ir al principio, Retroceso rápido, Avance rápido e Ir al Final. Con ellos podrás situarte al inicio del fragmento de video que deseas grabar.


341

9. Una vez situado en el inicio deseado, en la consola Controles de cámara DV, haz clic en el botón Reproducir. Verás su contenido en la ventana Vista previa.

10. Asegúrate de que la casilla Crear clips cuando finalice el asistente está activado. Si deseas detener la captura automáticamente después de transcurridos XX minutos entonces debes activar la opción Capturar límite de tiempo (hh:mm) e introduce este valor. Por ejemplo: 00:01, para capturar sólo un minuto. Si eliges Silenciar altavoces no se reproducirá el audio por los altavoces durante la captura pero sí se incluirá en la captura.

11. A continuación pulsa en el botón Iniciar captura. Observa que durante el proceso de captura se muestra el tiempo de Video capturado y el Tamaño del archivo de vídeo que se va formando.

12. Si no has elegido captura con límite de tiempo, para detener la captura elige Detener captura.

13. Para terminar clic en el botón Finish (Terminar). 14. Tras unos segundos de espera se muestra el clip o clips de video que componen la

captura. Están situados dentro de una colección con el mismo nombre que el proporcionado inicialmente. En este caso MiVideo001.


342

15. El contenido de esta nueva colección se guardar en un único archivo *.AVI ó *.WMV situado en la carpeta Mis Vídeos dentro de la carpeta Mis documentos.

16. Si deseas eliminar una colección, pulsa en el botón Colecciones de la barra de herramientas; en el panel izquierdo selecciona la colección elegida y pulsa la tecla Supr. También debes utilizar el Explorador de archivos de Windows para situarte en la carpeta Mis documentos > Mís vídeos , elegir el archivo del mismo nombre que contiene los recursos de video de esta colección y pulsar la tecla Supr.

17. Asegúrate de que en el panel inferior está activada la vista Escala de tiempo. Si no es así pulsa en el botón Mostrar escala de tiempo que aparece en este panel.

18. Desde el panel de Contenidos que muestra los elementos de la colección arrastra y suelta los clips de vídeo sobre la pista de Video. Para eliminar un clip de la Escala de tiempo, selecciónalo previamente y pulsa la tecla Supr.

19. Quizás sea necesario pulsar reiteradamente el icono de la lupa “+” para visualizar la escala de tiempo a un tamaño adecuado.

20. Pulsa y arrastra hacia la izquierda el selector de recorte del clip de vídeo situado en la pista Video para definir la duración adecuada de cada clip


343

21. Coloca sobre la línea de tiempo los clips de video uno detrás de otro para confeccionar la película.

22. Para guardar la película final, haz clic en la entrada Guardar en el equipo situada en el Panel de película o bien elige Archivo > Guardar archivo de película … > Mi PC

23. Se muestra el Asistente para guardar película donde debes introducir el nombre de la película, por ejemplo: mivideo , y la carpeta donde se guardará el archivo. Dejando la opción por defecto se almacenará en la carpeta Mis documentos > Mis vídeos. Clic en el botón Siguiente >

ç

24. En la cuadro Configuración de película, haz clic en Mostrar más opciones para visualizar las distintos configuraciones de publicación. Activa Otras opciones y en la lista desplegable elige Vídeo para banda ancha (340 Kbps). Observa que en la esquina inferior izquierda de este cuadro se muestran los Detalles de la configuración elegida en cada caso: Tipo de archivo, velocidad de bits, tamaño de la pantalla, relación de aspecto y fotogramas por segundo. Clic en Siguiente.


344

25. Cuando se haya completado con éxito la publicación se mostrará un nuevo cuadro. Marca la casilla Reproducir película al pulsar Finalizar para que ésta se muestre en el reproductor de Windows Media inmediatamente después de haber pulsado el botón Finalizar.

26. Recuerda que el archivo de video se ha guardado con el nombre que has definido dentro de la carpeta Mis documentos > Mis vídeos.

4.4.2 Kino para Ubuntu Linux Kino es un editor de vídeo digital para Linux que permite capturar vídeo de una cámara DV, recortar los clips creados, añadir algunos efectos y exportar a un formato de vídeo: MPEG-1, MPEG-2, VCD, SVCD o DVD. Instalación de Kino

1. Desde el escritorio de Ubuntu selecciona Aplicaciones > Añadir o quitar … 2. En el panel Añadir o quitar aplicaciones introduce kino en la casilla de búsqueda y

pulsa la tecla enter. 3. Marca la casilla de activación en la entrada Kino-Editar vídeos DV y pulsa en el botón

Aplicar cambios. 4. Una vez instalado cierra todas las ventanas de la instalación. 5. Si deseas disponer de un icono de acceso directo de Kino sobre el escritorio

selecciona Aplicaciones > Sonido y Vídeo > Kino y arrástralo hasta el escritorio.


345

Configuración de permisos del puerto raw1394

Es necesario activar los permisos oportunos en el puerto raw1394 para que Kino pueda utilizar este puerto en la captura de vídeo. Esta operación sólo se realiza una vez. 1. Selecciona Aplicaciones > Accesorios > Terminal 2. Teclea sudo chmod 666 /dev/raw1394 3. Te solicitará la contraseña de root. Introduce esta password. 4. Cierra la ventana de terminal.

Instalación del paquete mjpegtools

Para que Kino pueda realizar la exportación de vídeo al formato MPEG es necesario instalar en nuestro sistema el paquete mjpegtools. Esta operación sólo se realiza una vez. 1. Elige Sistema > Administración > Gestor de paquetes Synaptic 2. Pulsa el botón Buscar e introduce mjpegtools y pulsa en el botón Buscar. 3. Marca mediante doble clic el paquete mjpegtools aceptando la instalación de los

paquetes dependientes. 4. Clic en el botón Aplicar 5. En el cuadro de diálogo de Resumen selecciona Para ser instalado y luego pulsa en el

botón Aplicar. 6. Una vez finalizada la instalación cierra el gestor de paquetes.

Abrir Kino

1. Selecciona Aplicaciones > Sonido y Vídeo > Kino o bien doble clic sobre el icono situado en el escritorio

2. Las principales partes del interfaz de Kino son:


346

1. Barra de menú: con acceso a las distintas opciones del programa. 2. Barra de herramientas donde se encuentran accesibles los botones de las

acciones de uso más habitual. 3. StoryBoard. En este cuadro se situarán los clips de película o imágenes

capturados o importados. 4. Visor. Mostrará la reproducción del clip de película seleccionado en el panel

StoryBoard. 5. Barra de tareas. Cada botón de esta barra permite realizar las tareas más

habituales durante la edición de una película. 6. Barra de reproducción. Incluye los controles habituales para la reproducción del

clip de vídeo elegido en el panel Storyboard o bien para manejar la cámara DV durante el proceso de captura.

7. Barra de estado. Muestra información de interés durante la edición del vídeo.

Capturar video de cámara DV

1. Conecta la cámara DV al puerto IEEE 1394 del ordenador. Enciende la cámara y activa en ella el modo VCR para reproducir el video tomado.

2. En la barra de tareas pulsa en el botón o pestaña Captura. 3. Kino guarda por defecto el video capturado en un archivo de nombre capture y

extensión .dv en la carpeta personal del usuario del sistema: /home/<usuario>/capture.dv . Si deseas modificar el nombre o la ruta pulsa en el botón Examinar situado a la derecha del cuadro de texto Fichero.

4. Utiliza los controles de reproducción (al principio, hacia atrás, reproducir, pausa, stop, hacia delante o al final) de la propia cámara o de la barra de control de reproducción de Kino para desplazarse por la cinta grabada de la cámara y situarse en el punto de inicio de la captura.


347

5. Inicia la reproducción desde la cámara y cuando aparezca en el visor de Kino pulsa en el botón Captura para iniciarla. Durante este proceso se mostrará en la esquina inferior izquierda de la barra de estado el mensaje: Capturando /home/<usuario>/…

6. Para finalizar la captura pulsa en el botón Detener. Transcurridos unos segundos se creará el archivo *.dv en la carpeta indicada del equipo y este archivo estará disponible desde el panel Storyboard de Kino.

Recortar un clip de vídeo

1. En el panel Storyboard pulsa sobre el clip de video para seleccionarlo. 2. Sobre el panel de tareas derecho haz clic en el botón Recortar. 3. Utiliza los controles de reproducción para visualizar el clip de vídeo


348

4. Durante la reproducción, en el instante que estimes oportuno, debes pulsar en el botón Ajustar el punto de entrada a la posición inicial para definir el punto inicial del clip de vídeo. Idem con el botón Ajustar el punto de salida a la posición inicial para establecer el punto final del clip de vídeo.

5. Otra posibilidad para definir el fragmento de clip de película es arrastrar los marcadores de entrada y salida sobre la línea de tiempo. Si necesitas mayor exactitud puedes definir los valores numéricos de estos puntos introduciéndolos por teclado o bien pulsando en los botones de incremento/decremento adjuntos.

6. Para verificar el fragmento seleccionado puedes reproducir el clip de película activando previamente el botón de reproducción continua del fragmento.

7. Para aplicar el recorte elegido pulsa en el botón Aplicar.


349

Exportar el archivo de vídeo

1. El video final se construirá a partir de la secuencia de clips de película situados de arriba hacia abajo en el panel Storyboard.

2. Para exportar el vídeo final pulsa en el botón Exportar en la barra de tareas. 3. Clic en la pestaña MPEG. 4. En el cuadro de texto Fichero pulsa en el botón Examinar para introducir un nombre

de archivo. Por ejemplo: mivideo. Este archivo se guarda por defecto en la carpeta del usuario actual: /home/<usuario>/

5. Despliega la lista Formato de fichero y elige 0 – MPEG1 Genérico o bien 3 – MPEG2 Genérico. A continuación pulsa en el botón Exportar.

6. Al cabo de unos instantes se habrá creado el archivo mivideo.mpeg en la carpeta indicada.

Reproducir el vídeo final

1. Elige Aplicaciones > Sonido y vídeo > VLC Media Player 2. Abre la carpeta donde se ha creado el archivo mpeg. 3. Arrastra y suelta este archivo de video sobre la consola de reproducción de VLC Media

Player.

4. Al cabo de unos instantes comenzará la reproducción del vídeo a través de VLC media player.

Vídeo y animaciones ::: El DVD como fuente de vídeo Diseño de materiales multimedia. Web 2.0

350

4.5 El DVD como fuente de vídeo


351

4.5 EL DVD COMO FUENTE DE VÍDEO 4.5.1 Extracción de vídeo de un DVD con AutoGordian (Windows) 4.5.1.1 Introducción En este apartado se propone un procedimiento para convertir el vídeo de un DVD a un archivo AVI con códec DivX o XviD. A partir de este AVI es posible extraer un fragmento y convertirlo en un formato más propio de publicación web: FLV, WMV, MOV o RAM. Otra posibilidad es la grabación del archivo AVI resultante en un CD-ROM utilizando un programa de grabación de CDs. Esta segunda opción es habitual en la realización de copias de seguridad de DVDs. En el mercado actual casi todos los reproductores DVD incorporan la prestación de la lectura de CDs y DVDs con archivos AVI DivX y XviD. Nota importante: El software e instrucciones recogidas en este capítulo se proponen como método para realizar copias de seguridad de los DVDs originales propios y siempre dentro de un uso particular no comercial. En cualquier caso esta información NO se expone para ser usada como herramienta para vulnerar materiales con copyright. La utilización que se efectúe, total o parcial del archivo de vídeo resultante, estará supeditada en todo momento a los derechos de autor y propiedad intelectual legalmente establecidos. 4.5.1.2 Software necesario DVD Decrypter. La conversión de una película de DVD en otro formato no se puede realizar a partir de la unidad lectora de DVDs. El elevado número de accesos que esta operación necesita podrían dañar esta unidad por sobrecalentamiento. Por este motivo siempre es necesario copiar el contenido del DVD al disco duro. Esta copia de archivos no se puede realizar mediante copiar y pegar usando el Explorador de Windows porque a menudo se encuentran encriptados. Es necesario un programa que desencripte los archivos del DVD y los copie al disco duro. En esta operación no supone ninguna pérdida en la calidad del vídeo. En la actualidad existen algunos programas que realizan esta tarea. Por su facilidad y compatibilidad se propone DVD Decrypter. Se puede descargar de forma gratuita del sitio Free-Codecs.com (http://www.free-codecs.com/) Descarga y descomprime el archivo DVDDecrypter.exe en una carpeta de tu disco duro o pendrive. Se trata de una versión portable del programa que se inicia al ejecutar el archivo DVDDecrypter.exe que aparece dentro de esa carpeta. Auto Gordian Knot Auto Gordian Knot (http://www.autogk.me.uk/) es un paquete de programas que automatiza muchas de las operaciones necesarias para realizar la conversión DVD-AVI. Auto Gordian Knot es un programa gratuito que se descarga de su web oficial. Descarga y descomprime el archivo AutoGordian.exe en una carpeta de tu disco duro o pendrive. Se trata de una versión portable del programa que se inicia al ejecutar el archivo AutoGK 2.47b.exe que aparece dentro de esa carpeta.


352

4.5.1.3 Pasos para convertir DVD a AVI

1. Copiar el DVD al disco duro con DVD Decrypter. 2. Cargar los archivos originales. 3. Seleccionar pista de audio y subtítulos. 4. Definir tamaño del fichero. 5. Configurar parámetros avanzados. 6. Crear película.

A continuación se explican con detalle cada uno de estos pasos. Paso 1. Copiar el DVD al disco duro

1. Introduce el disco DVD en la unidad lectora. 2. Inicia del programa DVD Decrypter. 3. En la lista Source (Origen) selecciona la unidad lectora donde has introducido el DVD.

En el marco derecho aparecerán todos los archivos que contiene.

Notas:

• Unidad lectora de DVD no detectada. A veces el DVD Decrypter no detecta la unidad de DVD y en consecuencia no está disponible en la lista Source. Esto suele deberse a que no están instalados los drivers ASPI correspondientes a esa unidad DVD. ASPI significa Advanced SCSI Programming Interface y es el software que gestiona la comunicación entre el ordenador y el dispositivo lector. Para resolver este problema basta con descargar los drivers ASPI de Windows, descomprimir el ZIP y ejecutar el programa aspiinst.exe que contiene. Estos drivers se pueden descargar desde la web oficial de Adaptec (http://www.adaptec.com). La denominación exacta de este software es: Windows ASPI drivers version v4.71.2 y se pueden aplicar a todos los sistemas Windows a partir de la versión 98.

• Disco DVD bloqueado. En alguna ocasión será necesario, antes de ejecutar DVD Decrypter, introducir el disco en el lector y a continuación abrir el reproductor de que dispongamos para visualizar DVDs (por ejemplo WindDVD o PowerDVD). De esta forma conseguiremos liberar las claves de los archivos protegidos. Cerramos el reproductor y abrimos DVD Decrypter.

4. DVD Decrypter tiene dos modos de trabajo: modo File (Archivo) donde trabaja con los

archivos del DVD y modo IFO donde trabaja con los contenidos del DVD (capítulos, pistas, extras, etc). En este caso es necesario trabajar en modo IFO para lo cual en la barra de menú de DVD Decrypter selecciona Mode > IFO


353

Al activar este modo se mostrarán los contenidos del DVD: (Chapter 1, 2, … = Capítulo 1, 2, …) en lugar de los archivos.

5. Al activar el modo IFO, DVD Decrypter selecciona automáticamente la pista de mayor

duración que es la que suele contener la película. El resto de pistas se corresponden con los créditos, tomas falsas y extras que acompañan. En la pestaña Input (Entrada) comprueba que está seleccionada la película (la pista de mayor duración) y que debajo se encuentran seleccionados todos los capítulos (Chapter 1, 2, 3, …).

6. En el marco Destination (Destino) haz clic sobre el icono de carpeta con lupa para definir la carpeta del disco duro donde se guardarán los contenidos del DVD. Por ejemplo en la carpeta C:\video o bien D:\video si dispones de un segundo disco duro o partición.

7. Es importante realizar la siguiente comprobación. En la barra de menús de DVD Decrypter selecciona Tools > Settings (Herramientas > Configuración). En la pestaña IFO Mode (Modo IFO) dentro de la sección Create Additional Files (Crear Archivos Adicionales), comprueba que la casilla Stream Information (Información de Stream) está activada. Esto producirá en el disco duro un fichero de texto con toda la información del DVD necesaria para que AutoGK concluya con éxito.

8. Desde la ventana principal de DVD Decrypter, pulsa en la pestaña Stream Processing (Procesamiento del Flujo). Se puede activar la casilla Enable Stream Processing (Permitir Procesamiento del Flujo) y desmarcar, por ejemplo, el audio en inglés para que sólo se copie el audio en español. Para extraer del DVD sólo el vídeo o sólo el audio, activa la casilla Enable Stream Processing, seleccionaríamos sólo la pista deseada y en el área Stream: N/A que aparece en el panel inferior activamos la opción Demux. Si eliges un audio AC3, se creará un archivo de audio AC3; si eliges un vídeo, se creará un MPEG-2 sin audio; si eliges una pista de subtítulos (Subtitle) se


354

crearán dos archivos: IFO y VOB (son subtítulos en modo imagen que luego se puede pasar a texto con la aplicación SubRip). En un principio se recomienda dejar activadas todas las pistas.

9. En la pestaña Stream Processing se muestran los principales datos del DVD:

• Dimensiones del vídeo: 720x576 • Proporción: 16:9 • Sistema de vídeo: PAL. • Número de la pista de audio en Español: 0x81 (pista 2 en el orden de

arriba/abajo). 10. Para iniciar el proceso pulsa en el botón Decrypt (Desencriptar).

11. Una vez finalizado el proceso se mostrará el mensaje Operation Successfully Completed! (Operación Completada con Éxito). Pulsa en el botón Aceptar.

12. Cierra la ventana del programa DVD Decrypter.


355

Paso 2. Cargar los archivos originales

1. Abre Auto Gordian Knot.

2. Como podrás observar AutoGK es un programa que simplifica en 4 pasos (steps) la conversión DVD-AVI: • Step 1: Select input source and output file (Paso 1: Elegir fuente de entrada y

archivo de salida). • Step 2: Select audio track and subtitle track. (Paso 2: Elegir pista de audio y

pista de subtítulos). • Step 3: Select output size (Paso 3: Elegir tamaño de salida). • Step 4 (optional): advanced parameters (Paso 4 –opcional-: parámetros

avanzados).

3. En la sección Step 1: Select input source and output file (Paso 1: Elegir fuente de entrada y archivo de salida) En “Input directory” localiza el archivo *.VOB que has capturado del DVD anteriormente.

4. En el cuadro de texto Input directory (Carpeta de entrada), pulsa en el icono situado a la derecha que muestra una flecha verde sobre una carpeta.


356

5. Se muestra el cuadro de diálogo Buscar carpeta. En él debes localizar el archivo video situada en el disco duro donde has guardado los archivos importados con DVD Decrypter. Clic en el botón Aceptar. Observa que cuando AutoGK detecta los archivos de DVD situados en esta carpeta, en el cuadro inferior de esta sección muestra la información del vídeo. En este caso: PAL – 720x576 – 16:9 – 25 fps

6. En el cuadro de diálogo Output file: (Archivo de Salida), se completa automáticamente con el mismo nombre de archivo y la extensión *.avi. Para modificar la carpeta de destino y el nombre de archivo pulsa en el icono que muestra la flecha verde sobre una carpeta.

7. Se muestra el cuadro de diálogo Guardar como. En la lista Guardar en: define la carpeta destino donde se guardará el archivo AVI final. Por ejemplo dentro de la carpeta video. En la casilla Nombre introduce un nombre de archivo para este AVI. Por ejemplo: video. AutoGK añadirá automáticamente la extensión AVI. Pulsa en el botón Aceptar para concluir.

Paso 3. Seleccionar pista de audio y subtítulos

1. En la sección Step 2: Select audio track and subtitle track. (Paso 2: Elegir pista de audio y pista de subtítulos), podrás seleccionar el audio/audios y también los subtítulos.

2. En la lista Audio track(s) (Pistas de Audio), selecciona la pista o pistas de audio que

deseas exportar al archivo de vídeo final. Pueden existir varias procedentes del DVD. Las pistas disponibles en esta lista dependerán de las ofrecidas por el DVD original y del tipo de importación realizada con DVD Decrypter. Si no deseas incorporar no marques ninguna pista.

3. En la lista Subtitle track(s) (Pista de Subtítulos) elige No Subtitles (Ningún Subtítulo). En este cuadro podrías elegir una de las pistas de subtítulos disponibles.

Paso 4. Definir el tamaño del fichero

1. En la sección Step 3: Select output size (Paso 3: Elegir tamaño de salida), podemos seleccionar el tamaño final que ocupará el archivo. Cuanto mayor sea, mejor será la calidad del archivo final.

2. Activa la opción Predefined size (Tamaño predefinido) y en la lista desplegable selecciona la entrada 1 CD (700 Mb) o bien 2 CDs(1400 Mb). En este caso se recomienda esta segunda opción ya que suele ofrecer una relación peso/calidad muy interesante. Al final obtendremos tantos ficheros como CDs hayamos marcado. Esto permitirá grabar en CD los archivos resultantes de esta conversión.

3. Si seleccionas la opción Custom size (MB) (Tamaño personalizado (MB)), podrás definir el tamaño que tendrá la película final. AutoGK creará un archivo AVI con este tamaño y si es superior a 700 Mb, también producirá los archivos resultantes de haber


357

fragmentado éste en trozos de peso igual o inferior a 700 Mb. Esto facilitará la copia en soporte CD.

4. Si seleccionas la opción Target Quality (in percentage) (Calidad Destino (en porcentaje)), podrás seleccionar el % de calidad que tendrá el archivo final con independencia del peso del archivo.

Paso 5. Configurar parámetros avanzados

1. En la sección Step 4 (optional): advanced parameters (Paso 4 –opcional-: parámetros avanzados), podremos configurar opcionalmente algunos parámetros de la película final. Pulsa en el botón Advanced Settings (Configuración avanzada).

En el botón “Advanced Settings” se accede a la configuración de los parámetros avanzados

2. En el cuadro Advanced Options (Opciones Avanzadas) se puede configurar:

• Output resolution settings (Configuración Resolución Vídeo). Permite definir la anchura o resolución horizontal del vídeo (la vertical será calculada automáticamente en función de la proporción de la película). Si se selecciona Auto width (Anchura automática), AutoGK calculará la resolución más óptima en función de un test de compresibilidad. Es la opción recomendada. Si se elige Minimum width (Anchura mínima) o bien Maximum width (Anchura máxima) y en el contador derecho se define una anchura –por ejemplo, 640 píxeles- entonces la resolución horizontal que utilizará AutoGK para crear la película final será como mínimo o como máximo respectivamente el valor indicado. Si marcas la opción Fixed width (Anchura Fija), la película tendrá exactamente como resolución horizontal la cantidad de píxeles indicada.

• Output audio type (Tipo de Audio de Salida). Permite definir el tipo de audio que deseamos en la película: AC3, VBR MP3 (bitrate variable) o bien CBR MP3. En la mayoría de los casos la opción recomendada es Auto. Si eliges la opción Auto (Automática), para archivos de 700 Mb o menos, el audio será: VBR MP3 a 128 Kbps. Sin embargo para archivos superiores a 700 Mb, el formato de audio será AC3. Si hemos incluído dos pistas de audio y aquí hemos configurado un tipo concreto de audio, ambos tendrán ese formato: ambas AC3 o bien ambas MP3. Si existen dos pistas de audio y aquí elegimos Auto, entonces la primera tendrá formato AC3 y la segunda MP3 VBR 128 Kbps.


358

• Códec. Se puede usar cualquiera de los dos: DivX y XviD. Es necesario que el códec elegido esté instalado en el equipo. Recuerda que al instalar Auto Gordian Knot el códec de XviD ya se instala directamente porque viene incluído en el paquete mientras que DivX (versión Create) es necesario descargarlo e instalarlo aparte.

• Subtitle Options (Opciones de SubTítulos). Este apartado sólo es necesario configurarlo si hemos incluído subtítulos en la película final. Si marcas la opción Display only forced subtitles (Mostrar solamente subtítulos forzados) sólo se mostrarán los subtítulos forzados, es decir, aquellos que se muestran siempre en la película aunque no tengamos activados los subtítulos. Ejemplo: Traducción al español o inglés del discurso de un personaje que habla en un tercer idioma y cuyo contenido se considera importante para el desarrollo de la acción. En el paso 2 tendríamos que haber selccionado la pista de subtítulos en el idioma adecuado. La opción Use external subtitles se refiere a la posibilidad de cargar los subtítulos de un archivo externo pero no funciona bien en todos los reproductores por lo que conviene no activarlo.

3. Si pulsas en el botón Preview (Vista previa), tras cierta espera, podrás ver una vista

previa del aspecto final del vídeo pero sin el audio.

Paso 6. Crear película

1. Cuando se ha finalizado la configuración de todos los parámetros, haz clic en el botón Add Job (Añadir Tarea).

2. En la Cola de Tareas (Job queue) aparecerá una nueva entrada con información del nombre del archivo AVI final, su carpeta de ubicación y una casilla de verificación activada.

3. Una vez introducida esta tarea en la Cola de Tareas podemos cerrar AutoGK y continuar en otro momento con la conversión definida. Otra posibilidad es abrir otro DVD para añadir una segunda tarea de conversión a la lista. En cualquier caso la codificación no comenzará hasta que no se lo indiquemos.

4. Para comenzar con la creación de la película AVI final pulsa en el botón Start (Inicio).

5. AutoGK irá abriendo y cerrando programas según lo vaya necesitando para realizar las distintas partes del proceso: creación del proyecto con DGIndex, test de compresibilidad, compresión con VirtualDubMod, audio con BeSweet, etc. En la


359

ventana de eventos (Log Window) irán apareciendo los mensajes de lo que se está haciendo. En los primeros pasos habrá que fijarse en la barra de tareas porque al desplegar alguna de estas aplicaciones será necesario aceptar las condiciones de la licencia de uso para que el proceso pueda continuar.

6. Una vez pulsado en el botón Start (Inicio) el proceso ya está automatizado y es necesario que se realice sin pausas. Si durante el transcurso del mismo pulsas en el botón Abort (Detener) habría que empezar desde el principio en la siguiente tentativa.

7. La duración de la conversión dependerá de la duración del DVD original y de las características del equipo (procesador, memoria RAM, disco duro, etc.). A título orientativo, por ejemplo, un DVD con una película de 2 horas de duración, en un Pentium IV-2Ghz con 1Gb de RAM puede tardar alrededor de 5 horas. Por ello es necesario armarse de un poco de paciencia. Si vas a dejar el ordenador trabajando solo, una opción interesante es marcar la casilla Shutdown when done (Apagar cuando termine). De esta forma el equipo se apagará cuando finalicen todos las tareas almacenadas en la Cola de Tareas.

8. La tarea terminará cuando en la Log Window (Ventana de eventos) aparezca el mensaje de tarea finalizada: [dd/mm/aaaa hh:hh:ss] Job finished. Total time: X hours XX minutes X seconds.

9. Cierra la ventana de Auto Gordian Knot. Paso 7. Ver película

1. Cuando ha finalizado la conversión, utiliza el Explorador de Windows para situarte en la carpeta donde has creado el archivo AVI final. En el ejemplo anterior era la carpeta video situada en el directorio raíz del disco duro C: ó D:

2. Con intención de ahorrar espacio en disco y una vez terminado con éxito el proceso de conversión DVD-AVI, conviene eliminar la carpeta temporal auto_gk que se ha creado en la misma carpeta donde se ha guardado este AVI. También conviene borrar los archivos *.VOB que se han generado con DVD Decrypter.

3. Para visualizar el video arrástralo y suéltalo sobre una ventana de VLC Media Player. Este reproductor puede leer archivo AVI codificados con Xvid.

Nota:

La mayoría de los reproductores de DVD actuales reconocen el formato DivX y XviD. Comprueba en la documentación del tuyo si es compatible con estos formatos. Algunos modelos suelen mostrar incluso en su carcasa exterior el logo de DivX para indicar esta característica. Si es así, basta con grabar el archivo AVI desde el disco duro del ordenador a un CD-ROM como si se tratase de un CD de datos utilizando un programa tipo Nero Burning o similar. Al introducir este disco en el reproductor DVD se visualizará en pantalla.


360

4.5.2 Extraer fragmentos de un DVD con ChopperXP y Super © (Windows) 4.5.2.1 Introducción Chopper XP es una aplicación que permite extraer fácilmente un fragmento de cualquier DVD. Es un cortador de archivos .vob donde a través de un sencillo interfaz donde se reproduce el archivo original se puede marcar el inicio y final del fragmento seleccionado para luego guardarlo como un archivo independiente. Se propone utilizar este programa para obtener un fragmento de vídeo que luego se convertirá a FLV utilizando Super © 4.5.2.2 Instalación de Chopper XP

1. Descarga y descomprime el archivo chopperXP.exe en una carpeta de tu equipo o pendrive. Es la versión portable de este programa que se ejecuta al acceder a la carpeta resultante y ejecutar el archivo Chopper.exe

4.5.2.3 Uso de Chopper XP para extraer fragmentos DVD.

1. Descarga y descomprime el archivo dteatro_vob.zip en la carpeta miweb\videos. Como resultado de la extracción obtendrás el archivo dteatro.vob. Se trata de un archivo VOB extraído de la carpeta VIDEO_TS de un DVD de vídeo. La elevada calidad de un archivo .vob condiciona que tenga una corta duración para evitar un elevado tamaño de archivo a descargar.

2. Abre Chopper XP

3. Selecciona File > Open vob (Archivo > Abrir vob)


361

4. En el cuadro de diálogo Select source vob file (Elegir archivo vob fuente) elige la carpeta miweb\videos en la lista Buscar en. Selecciona el archivo dteatro.vob y pulsa en el botón Abrir.

5. En la consola de Chopper pulsa en el botón play para iniciar la reproducción del archivo .vob. Puedes utilizar el resto de botones para detener, ir al principio, ir al final, etc. Otra posibilidad es arrastrar el deslizador sobre la barra de progreso cuando se está reproduciendo el archivo.

6. Para marcar el inicio del fragmento a extraer haz clic en el botón Mark In en el instante que se considere de la reproducción. Para marcar el final del fragmento pulsa en el botón Mark Out. Utiliza estos botones para elegir un fragmento de VOB.

7. Una vez seleccionado el fragmento elige File > Save vob as (Archivo > Guardar vob como)

8. En el cuadro Save file as (Guardar archivo como ) elige en la lista Guardar en la carpeta destino donde se guadará el nuevo .vob. Por ejemplo: miweb\videos.


362

9. Introduce el nombre del nuevo archivo. Por ejemplo: dteatro_one.vob. Pulsa en el botón Guardar.

10. Durante el proceso de extracción se mostrará la barra de progreso del cuadro de diálogo Extracting vob (Extrayendo vob) .

11. Al finalizar aparece el mensaje File extraction successful (Extracción de archivo con éxito). Pulsa en el botón Aceptar.

Nota: Chopper XP puede leer directamente un archivo .vob de la carpeta video_ts de un dvd aunque la opción más recomendable es copiar previamente el .vob original al disco duro del equipo. En algunos discos dvd será necesario utilizar el programa Decrypter para realizar la copia del .vob del dvd al disco duro.


363

4.5.2.4 Conversión de formato VOB a FLV El formato *.VOB tiene una calidad y peso muy elevados para ser utilizados en la publicación web. En este apartado se describe el procedimiento para transformar un archivo .vob al formato .flv utilizando el programa Super ©

1. Abre Super © 2. Sobre la lista de archivos haz clic derecho y selecciona Add Multimedia File(s)

(Añadir Archivo(s) Multimedia). Otra posibilidad es arrastrar y soltar el archivo a convertir en este recuadro desde el explorador de archivos.

3. Despliega la lista Buscar en: para seleccionar la carpeta miweb\videos. Elige el archivo dteatro.vob y pulsa en el botón Abrir.


364

4. Select the Output Container (Elige el contenedor de salida). Despliega esta lista y selecciona la opción “swf or flv (Flash)”. En este caso el códec de vídeo será Flash Video y el códec de audio: mp3.

5. Video. En este caso marca el tamaño de ventana del vídeo 320x240 en el apartado Video Scale Size (Tamaño de ventana del vídeo). Marca NoChange para no modificarlo respecto al original. El resto de opciones pueden modificarse pero en este caso vamos a aceptar los valores por defecto.

6. Audio. Dejamos los valores por defecto. Si no interesa integrar el audio en el vídeo final marcaríamos en la opción Disable Audio (Desactivar Audio).

7. En el área OUTPUT aparece un resumen de las opciones seleccionadas anteriormente.

8. Para definir la carpeta donde se guardará el vídeo destino haz clic derecho sobre la ventana de Super © para elegir Output File Saving Management (Configuración de la carpeta destino).

9. En el cuadro de diálogo Browse to save the rendered file? (Navegando para guardar el archivo renderizado?) selecciona la carpeta destino, por ejemplo, miweb\videos. Clic en el botón SAVE Changes (Guardar cambios).

10. Para iniciar el proceso de conversión haz clic en el botón Encode (Active Files). 11. Al seleccionar .flv como formato de salida se ofrece la posibilidad de guardar el vídeo

como SWF o bien como FLV. En este caso selecciona FLV y pulsa en el botón OK. 12. Tras concluir el proceso puedes ver el resultado final pulsando en el botón Play The

Last Rendered File (Reproducir el último archivo renderizado). Otra posibilidad es utilizar el reproductor VLC Media Player instalado con anterioridad y que permite visualizar archivos FLV.


365

4.5.3 Extracción de vídeo de un DVD con dvd::rip (Ubuntu) 4.5.3.1 Introducción En este apartado se propone un procedimiento para convertir el vídeo de un DVD a un archivo AVI con códec XviD. A partir de este AVI es posible extraer un fragmento y convertirlo en un formato más propio de publicación web: FLV, WMV, MOV o RAM. Otra posibilidad es la grabación del archivo AVI resultante en un CD-ROM utilizando un programa de grabación de CDs. Esta segunda opción es habitual en la realización de copias de seguridad de DVDs. En el mercado actual casi todos los reproductores DVD incorporan la prestación de la lectura de CDs y DVDs con archivos AVI DivX y XviD. Nota importante: El software e instrucciones recogidas en este capítulo se proponen como método para realizar copias de seguridad de los DVDs originales propios y siempre dentro de un uso particular no comercial. En cualquier caso esta información NO se expone para ser usada como herramienta para vulnerar materiales con copyright. La utilización que se efectúe, total o parcial del archivo de vídeo resultante, estará supeditada en todo momento a los derechos de autor y propiedad intelectual legalmente establecidos. 4.5.3.2 Software necesario dvd::rip Es un programa que permite ripear un DVD de vídeo, es decir, obtener un archivo o archivos de vídeo en el disco duro a partir de los contenidos de este soporte. Para instalar dvd::rip en Ubuntu:

1. Desde el escritorio selecciona Aplicaciones > Añadir y quitar programas 2. En la casilla Buscar introduce el término rip. 3. Marca la casilla del programa dvd::rip y a continuación pulsa en el botón Aplicar

cambios. Sigue los pasos hasta finalizar. mplayer dvd::rip utiliza por defecto el programa mplayer para reproducir los fragmentos de DVD y archivos generados. Para instalarlo sigue una rutina similar a la anterior: Aplicaciones > Añadir y quitar programas. Códecs para DVD encriptados La mayoría de los DVDs comerciales están encriptados. Para poder leerlos sin problemas desde dvd::rip, mplayer o incluso VLC Media Player es necesario instalar una librería adicional. Para ello sigue estos pasos:

1. Abre un terminal de consola mediante Aplicaciones > Accesorios > Terminal. 2. Teclea la siguiente orden:

sudo apt-get install libdvdread3 debhelper fakeroot

3. Se solicita la contraseña de root y el CD de instalación de Ubuntu. 4. A continuación ejecuta el siguiente comando:

sudo /usr/share/doc/libdvdread3/install-css.sh


366

Configuración de dvd::rip

1. Inicia el programa mediante Aplicaciones > Sonido y vídeo > dvd::rip 2. La primera vez que se inicia este programa se muestra el cuadro de diálogo de

Preferencias. Estas opciones se podrán modificar en todo momento desde el programa a Editar > Preferencias.

3. En la pestaña Configuraciones básicas se muestran las distintas opciones por defecto del programa. Será necesario utilizar el explorador de archivos para crear la carpeta dvdrip-data dentro del directorio /home/<usuario>/. En esta carpeta será donde se guarden los archivos de la conversión. Tras la creación de esta carpeta pulsa en el botón Comprobar todo para obtener el OK.

4. En la pestaña Comandos comprueba que el Comando de reproducción de DVD y el Comando de reproducción de archivo es el programa mplayer que hemos instalado para reproducir los DVDs y archivos creados.


367

5. Para cerrar la configuración pulsa en el botón Aceptar. 4.5.3.3 Convertir DVD a AVI con dvd::rip

1. Introduce el DVD en la unidad del ordenador. 2. Inicia el programa mediante Aplicaciones > Sonido y vídeo > dvd::rip 3. Selecciona Archivo > Nuevo proyecto 4. En la pestaña Almacenamiento introduce el nombre del proyecto de captura.

Ejemplo: cortos2007. En este caso interesa elegir un nombre significativo con el contenido del vídeo.

5. Pulsa en el botón + Crear proyecto. 6. Se muestra el cuadro de diálogo Guardar proyecto y en Nombre: aparece el nombre

del proyecto. Clic en el botón Aceptar. 7. En la pestaña Almacenamiento y en la sección Elegir un modo de extracción marca

la opción Copiar los datos del DVD al disco duro antes de codificar. Conviene activar esta opción para copiar el contenido del DVD al disco duro antes de iniciar la codificación. Esto agilizará el proceso y protegerá la unidad lectora de DVD.

8. Clic en la pestaña Extraer Tìtulo. Pulsa el botón Leer tabla de contenidos del DVD para leer las pistas del DVD que se mostrarán en el listado inferior.


368

9. Para visualizar una pista márcala en el listado y a continuación pulsa en el botón Ver título(s)/capítulo(s) seleccionados.

10. Para comenzar la extracción de la pista al disco duro del equipo, selecciona la pista que deseas y luego pulsa en el botón Extraer título(s)/capítulo(s) seleccionados.

11. Si deseas tener información de la evolución de la extracción pulsa en la pestaña Registro.

12. En la pestaña Codificar comprueba los siguientes parámetros que normalmente suelen venir definidos por defecto:

• Opciones de contenedor > Selecciona contenedor: AVI • Opciones de vídeo > Códec de vídeo: xvid • Opciones de vídeo > Tasa de vídeo: 25.000 • Opciones de vídeo > Hacer dos pasadas: Sí • Cálculo de tasa de bits de vídeo > 2x700 • Opciones del audio > Seleccionar pista: elegir la pista de audio del idioma

adecuado si hubiera varias. • Opciones de audio > MP3: Tasa de bits de 128 kbit/s y 48000 Hz.

13. Para iniciar el procedimiento de codificación pulsa en el botón Codificar. 14. Si deseas ver cómo evoluciona proceso activa la pestaña Registro. 15. Una vez concluido el proceso el archivo AVI resultante de la transformación se

encontrará en la carpeta: /home/<usuario>/<nombre_proyecto>/avi/. Para visualizarlo haz clic derecho sobre este archivo y elige Abrir con MPlayer o bien Abrir con VLC Media Player. Desde el programa dvd::rip puedes reproducir el archivo AVI pulsando en el botón Ver de la pestaña Codificar.

Vídeo y animaciones ::: Conversión de formatos de vídeo Diseño de materiales multimedia. Web 2.0

370

4.6 Conversión de formatos de vídeo


371

4.6 Conversión de formatos de vídeo 4.6.1 Propiedades de un vídeo Introducción MediaInfo es un programa gratuito que permite visualizar las propiedades y metadatos de un archivo de audio o vídeo. ¿Qué información de un archivo multimedia te permite comprobar MediaInfo?

• Metadatos generales del archivo: título, autor, director, album, número de pista, fecha, duración, etc

• Vídeo: códec, bitrate, fotogramas por segundo, aspecto, etc. • Audio: codec, velocidad de muestreo, canales, idioma, bitrate, etc. • Texto: idioma de subtítulos. • Capítulos: número y lista de capítulos.

Cuando el reproductor que estamos utilizando no es capaz de visualizar un archivo de audio o de vídeo por un problema de códecs, MediaInfo es una interesante aplicación porque permite obtener toda la información de ese archivo. Incluso proporciona una dirección en Internet donde es posible encontrar un reproductor o códec con que se pueda visualizar. ¿Qué formatos de archivo puede leer MediaInfo?

• Video: MKV, OGM, AVI, DivX, WMV, QuickTime, Real, MPEG-1, MPEG-2, MPEG-4, DVD (VOB)...

• Audio: OGG, MP3, WAV, RA, AC3, DTS, AAC, M4A, AU, AIFF... • Subtítulos: SRT, SSA, ASS, SAMI...

¿Qué puedes hacer con MediaInfo?

• Leer múltiples formatos de archivo de vídeo y de audio. • Mostrar la información técnica y de metadatos en forma de texto, árbol, html, … • Exportar esta información como texto. • Integración de MediaInfo en el explorador de archivos de Windows

Instalación de MediaInfo en Windows

1. Descarga y ejecuta el archivo MediaInfo_0.7.5.9_GUI_Win32.exe. Es el instalador de MediaInfo. Otra opción es visitar su web y descargar la última versión: http://mediainfo.sourceforge.net/es

2. Otra posibilidad es descargar la versión portable para windows: MediaInfo_0.7.5.9.exe para instalar en una carpeta del disco duro o bien en una pendrive.

Instalación de MediaInfo en Ubuntu Linux

1. Selecciona Aplicaciones > Accesorios > Terminal para abrir un terminal de consola. 2. Autentifícate como root mediante:

su <enter> [introduce contraseña de root] 3. Con el editor gedit abre el archivo que contiene el listado de fuentes de software:

gedit /etc/apt/sources.list

4. En la última línea del este archivo de fuentes añade:


372

deb http://srvremi.free.fr/ubuntu gutsy main

5. Desde gedit selecciona Archivo > Guardar y luego cierra este editor. 6. Reinicia el listado de fuentes de instalación mediante:

apt-get update

7. Instala el programa mediante el comando:

apt-get install mediainfo-gui

8. Para acceder al programa elige Aplicaciones > Sonido y vídeo > MediaInfo Uso de MediaInfo

1. Descarga y descomprime el archivo flv.zip a la carpeta del disco duro. Repite el mismo proceso para el archivo dteatro_divx.zip. Como resultado de esta tarea dispondrás en la menciona carpeta de los archivos: dteatro.flv y dteatro_divx.avi

2. Existen dos métodos alternativos para abrir un archivo con MediaInfo: a. Inicia el programa y luego selecciona Archivo > Abrir archivo para localizar y

abrir uno de los archivos multimedia descargados anteriormente, p.e., dteatro.flv.

b. Si has instalado MediaInfo en Windows desde el explorador de archivos de Windows haz clic derecho sobre el archivo multimedia y selecciona la opción MediaInfo.

3. Siguiendo cualquiera de estos dos procedimientos se mostrará la ventana de

MediaInfo donde se puede leer la infomación relativa al archivo abierto.

4. Repite los pasos 2 y 3 para el archivo dteatro_div.avi.


373

5. Observa que al abrir un archivo de vídeo con MediaInfo se ofrece un botón de SitioWeb con enlace a una web donde se pueden obtener los códecs o reproductor necesarios para reproducir ese archivo en nuestro equipo.

4.6.2 Conversión de formatos de vídeo en Windows: SUPER © Introducción Para realizar la conversión de formatos de vídeo se propone Super © en equipos Windows y WinFF en Ubuntu. Super © significa “Simplified Universal Player Encoder & Renderer”, es decir, “Reproductor, Codificador y Renderizador Universal Simplificado”. Se trata de un programa gratuito para Windows que ofrece un sencillo interfaz para convertir un archivo de vídeo a otro formato. No requiere la instalación de códecs externos porque ya los incorpora en su instalación. Super © reproduce y admite para convertir una amplia variedad de formatos de archivos de entrada:

• Vídeo: 3gp/3gp/3g2(teléfonos móviles), asf, avi(DivX, H263, H263+, H264, XviD, MPEG4, MSmpeg4 etc..), dat, fli, flc, flv (flash video), mkv, mpg (Mpeg I, Mpeg II), mov (H263, H263+, H264, MPEG4 etc..), mp4(H263, H263+, H264, MPEG4), ogg, qt, rm, ram, rmvb, str (playstation), swf (flash), ts (HDTV), viv, vob y wmv.

• Audio: aac, ac3, amr, mmf, mp2, mp3, mp4, mpc, ogg, ra, wav, wma. Super © soporta la conversión a los siguientes formatos:

• Vídeo: 3gp/3gp/3g2, asf, avi, avi for Pocket PC, gif, mov, mp4, mpg, ogg, swf, flv, vob, wmv, AutoMode, Apple-IPod, MS-Zune, Sony-PS3 y PSP.

• Audio: aac, ac3, amr, mmf, mp2, mp3, mp4, mpc, ogg, wav y wma. Instalación de Super © Descarga y ejecuta desde aquí el instalador de Super ©: SUPERsetup_200825.exe. Otra posibilidad es visitar su página web para descargar una versión más reciente: http://www.erightsoft.com/SUPER.html


374

Otra posibilidad es descargar y descomprimir a una carpeta de tu disco duro o pendrive la versión portable de este programa: SUPER.exe Conversión de un vídeo a distintos formatos

1. Descarga y descomprime el archivo wmp.zip. Como resultado de la extracción obtendrás el archivo de vídeo: dteatro.wmv.

2. Abre Super ©

Paso 1: Selecciona el archivo fuente.

3. Para seleccionar el archivo de vídeo original pulsa y arrastra ese fichero desde el explorador de Windows para soltarlo en el recuadro inferior de la ventana de Super ©. Otra opción alternativa es hacer clic derecho sobre este recuadro y seleccionar la opción Add Multimedia Files (Añadir archivos multimedia) para examinar el sistema de carpetas de tu disco duro y seleccionar el archivo de vídeo correspondiente.

4. Utiliza cualquiera de los dos procedimientos alternativos anteriormente descritos para situar en la lista de archivos fuente, el vídeo dteatro.wmv Para eliminar un archivo


375

de esta lista haz clic derecho sobre este elemento y selecciona la opción Remote item(s) from job list (Eliminar elemento(s) de la lista de tareas).

Paso 2: Define el formato del archivo multimedia destino.

5. Selecciona como destino el formato del archivo contenedor del vídeo. Super © ofrece una amplia gama de formatos. En este caso vamos a seleccionar el *.flv (Flash Vídeo). Despliega la lista Select the Output Container (Elegir Contenedor de Salida) y elige la opción swf o flv (Flash).

6. Observa que en la lista Select the Output Video Codec (Elige el códec del vídeo de

salida) puedes seleccionar el códec de vídeo para ese archivo final. En este caso sólo se ofrece una opción: Flash Video pero en función del contenedor elegido podría haber varios.

7. En la lista Select the Output Audio Codec (Elige el códec del audio de salida) es posible seleccionar el códec de audio. En este caso sólo se ofrece una opción: mp3 pero en función del contenedor elegido podría haber varios.

Paso 3: Configura las opciones de vídeo y audio del archivo multimedia destino

8. En la sección VIDEO del panel de Super © puedes aceptar las opciones por defecto o bien personalizar ciertos detalles del vídeo: • Video Scale Size (tamaño de la ventana): que no cambie – NoChange- o bien un

tamaño concreto, por ejemplo, 320x240 píxeles. • Aspect (aspecto): es la relación de proporcionalidad entre anchura y altura de la

ventana del vídeo. No selecciones ninguna opción para no modificar el aspecto original. Otra posibilidad es elegir 4:3 o bien 16:9 que son las proporciones más habituales.

• Frame/Sec (fotogramas por segundo). En este caso define 25 fps. • Bitrate kbps. Puedes elegir un bitrate del vídeo seleccionando una opción de esta

lista desplegable. • Options(opciones). Calidad del vídeo, ajustes, opciones de recorte (Crop), etc.


376

9. En la sección AUDIO del panel de Super © puedes aceptar las opciones por defecto o bien personalizar ciertos detalles del audio:

• Disable Audio (Desahibilitar el audio): marca esta opción si deseas que el vídeo

destino no contenga la pista de audio. • Samplig Freq (Frecuencia de muestreo): selecciona el valor más apropiado. • Channels (Canales): elige 2 para una calidad estéreo y 1 para mono. • Bitrate Kbps: para elegir otro valor distinto despliega la lista y elige una opción. • DVD Language Select ..: Si el archivo original es una pista de DVD aquí podrás

seleccionar el número de pista del audio correspondiente al idioma elegido. Paso 4: Define la carpeta destino del archivo

10. Clic derecho sobre el archivo de vídeo la lista para seleccionar Output File Saving Management (Configuración de la carpeta destino).


377

11. En el cuadro de diálogo Browse to save the rendered file? (Navegando para guardar el archivo renderizado?) selecciona la carpeta destino. Clic en el botón SAVE Changes (Guardar cambios).


378

Paso 5: Codificar el archivo destino.

12. Para iniciar el proceso de conversión haz clic en el botón Encode (Active Files).

13. Al seleccionar .flv como formato de salida se ofrece la posibilidad de guardar el vídeo como SWF o bien como FLV. En este caso selecciona FLV y pulsa en el botón OK.

14. Tras concluir el proceso puedes ver el resultado final pulsando en el botón Play The Last Rendered File (Reproducir el último archivo renderizado). Otra posibilidad es utilizar el reproductor VLC Media Player instalado con anterioridad y que permite visualizar archivos FLV.

Nota: Como veremos más adelante, el formato de vídeo .flv es muy apropiado para la publicación en la web. Por este motivo es necesario disponer de un programa como Super © para convertir de forma rápida y fácil cualquier vídeo a este formato. 4.6.3 Conversión de formatos de vídeo en Ubuntu Linux: WinFF WinFF es un convertidor gratuito de formatos de vídeo para sistemas windows, linux y mac. Permite convertir un vídeo de un formato a otro de una forma fácil, rápida y en un solo paso. Este programa ofrece al usuario un interfaz gráfico aunque en realidad la tarea de conversión se traslada automáticamente a una línea de comandos para que la ejecute ffmpeg, otro programa muy efectivo pero que sólo se puede utilizar mediante línea de comandos. De esta forma WinFF nos evita tener que conocer y escribir la sintaxis de ffmpeg en una ventana de terminal. La instalación de WinFF en un sistema Ubuntu consta de dos pasos: la instalación del paquete ffmpeg y del programa WinFF


379

Instalación de ffmpeg En Ubuntu se puede instalar el paquete ffmpeg utilizando el gestor de paquetes de Synaptic (Sistema > Administración > Gestor de paquetes Synaptic) pero esta instalación no permitirá que ffmpeg convierta algunos formatos de vídeo interesantes porque se trata de una versión que no incorpora sus correspondientes códecs, por ejemplo, el códec mp3 de audio para archivos de salida en formato FLV. Por este motivo se recomienda realizar una instalación a partir del código fuente de ffmpeg. Los pasos para realizar esta tarea son:

1. Abre una ventana de terminal mediante Aplicaciones > Accesorios > Terminal. 2. Para obtener información sobre el paquete de código fuente de ffmpeg teclea:

sudo apt-get build-dep ffmpeg

3. Para obtener información y descargar los paquetes adicionales teclea y pulsa enter:

sudo apt-get install liblame-dev libfaad2-dev libfaac-dev libxvidcore4-dev liba52-0.7.4 liba52-0.7.4-dev libdts-dev

4. Para descargar al equipo el paquete de código fuente de ffmpeg teclea y pulsa enter:

apt-get source ffmpeg

5. Para situarse en la carpeta que contiene el código fuente teclea y pulsa enter:

cd ffmpeg-*/

6. Define las opciones de configuración para la compilación del código fuente ffmpeg. Esto permitirá que ffmpeg incorpore los códecs más importantes. Si dispones de una versión de Ubuntu anterior a la 7.10 teclea en una sola línea:

./configure --enable-gpl --enable-pp --enable-vorbis --enable-libogg --enable-a52 --enable-dts --enable-dc1394 --enable-libgsm --disable-debug --enable-mp3lame --enable-faad --enable-faac --enable-xvid --enable-shared --prefix=/usr

Si dispones de la versión 7.10 de Ubuntu entonces teclea en una sola línea:

./configure --enable-gpl --enable-pp --enable-libvorbis --enable-libogg --enable-liba52 --enable-libdts --enable-dc1394 --enable-libgsm --disable-debug --enable-libmp3lame --enable-libfaad --enable-libfaac --enable-xvid --enable-shared --prefix=/usr

7. Compila el código introduciendo la orden:

make

8. Crea el paquete de instalación y ejecútalo mediante:

sudo checkinstall -D make install Nota:

Puede ocurrir que más adelante Ubuntu nos proponga actualizar el paquete ffmpeg. En este caso conviene no instalar la actualización porque perderíamos la configuración que hemos definido y algunas conversiones de formatos de archivo no se realizarían con éxito.


380

Instalación de WinFF

1. Descarga e ejecuta el paquete de instalación de WinFF: winff-0.33-i386.deb. Otra posibilidad es visitar la web oficial de su desarrollador y descargarte la última versión: http://biggmatt.com/winff/

2. Al hacer doble clic sobre un paquete *-deb se mostrará la ventana del Instalador de paquetes. Clic en el botón Instalar el paquete.

3. Introduce la contraseña de root para que la instalación se pueda completar. 4. Cierra las ventanas del instalador.

Conversión de un vídeo a distintos formatos

1. Descarga y descomprime el archivo wmp.zip a la carpeta personal. Como resultado de la extracción obtendrás el archivo de vídeo: dteatro.wmv.

2. Abre WinFF mediante Aplicaciones > Sonido y vídeo > WinFF 3. En la ventana de WinFF pulsa en el botón Add (Añadir) y navega para localizar,

señalar y abrir el archivo dteatro.wmv. Otra posibilidad es utilizar el explorador de archivos y arrastrar el icono de este archivo de vídeo desde su carpeta para soltarlo sobre la ventana de WinFF. Esta aplicación admite la conversión por lotes de un listado de archivos de vídeo con sólo añadirlos a esta lista.

4. En este caso vamos a convertir el archivo de vídeo fuente al formato FLV de Video Flash. En la lista desplegable Convert to … selecciona la opción Flash Vídeo (flv) for Web use (4:3) . Si pulsas en el botón Options (Opciones) se mostrará en la parte inferior distintos parámetros de la conversión que se pueden personalizar.

5. En el cuadro de texto Output folder (Carpeta destino) se indica la carpeta donde se guardará el archivo de vídeo final.

6. Para iniciar la conversión pulsa en el botón Convert (Convertir).

Reproducir el vídeo FLV 1. Abre el reproductor: Aplicaciones > Sonido y Vídeo > VLC media player. Este

reproductor es una excelente aplicación para visualizar vídeos FLV de Flash. 2. Selecciona Archivo > Abrir rápido Archivo para navegar a la carpeta donde se

encuentra almacenado el nuevo archivo. Selecciónalo y pulsa en el botón Abrir. Otra posibilidad es utilizar el explorador de archivos y arrastrar el icono de este archivo de vídeo desde su carpeta para soltarlo sobre la ventana de VLC Media Player.

Vídeo y animaciones ::: Integración HTML de Vídeo Flash (FLV) Diseño de materiales multimedia. Web 2.0

381

4.7 Integración HTML básica de vídeo flash


382

4.7 Integración HTML básica de Vídeo Flash 4.7.1 Introducción En la actualidad el formato FLV (Flash Video http://www.adobe.com) 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.

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

En este apartado veremos cómo integrar vídeos FLV en una página web utilizando el reproductor flash multimedia desarrollado por Jeroen Wijering (http://www.jeroenwijering.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. 4.7.2 Reproductor de un vídeo FLV

1. Descarga y descomprime el archivo flvplayer.zip en una carpeta del disco local. 2. 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.

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

4. Regresa al explorador de archivos en la carpeta flvplayer. Dentro de esta carpeta se encuentra: • La página HTML que permite el acceso a todo el conjunto: index.html • El reproductor de vídeo: flvplayer.swf • El fichero de javascript swfobject.js que asegura la integración del reproductor

en la página HTML sin tener que hacer clic sobre él antes de interactuar con sus botones.

• 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: imagen.gif


383

5. Abre Kompozer y utilízalo para abrir el archivo index.html 6. Clic en la pestaña Código fuente. 7. Si deseas insertar el reproductor en otra página basta con copiar y pegar las

siguientes líneas de código HTML:

<script type="text/javascript" src="swfobject.js"></script> Esta línea se sitúa entre las etiquetas <head> … </head> de la página HTML para asegurar referencia al código javascript que asegura la correcta integración del reproductor.

Y luego en el cuerpo de la página el siguiente código HTML: <p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Se necesita descargar el reproductor de Flash</a> para ver este video.</p> <script type="text/javascript"> var s1 = new SWFObject("flvplayer.swf","single","240","212","7"); s1.addParam("allowfullscreen","true"); s1.addVariable("file","video.flv"); s1.addVariable("image","imagen.gif"); s1.addVariable("width","240"); s1.addVariable("height","212"); s1.write("player1"); </script> 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. La botonera ocupa 20 píxeles de altura. Sumados a los 192 del vídeo hacen un total de 212 píxeles para el total del reproductor.

Vídeo y animaciones ::: Integración HTML de una lista de vídeos flash (FLV) Diseño de materiales multimedia. Web 2.0

384

4.8 Integración HTML de una lista de

vídeos flash (FLV)


385

4.8 Integración HTML de una lista de vídeos FLV 4.8.1 Introducción En la actualidad el formato FLV (Flash Video http://www.adobe.com) ha experimentado un gran auge como medio para publicar contenidos de vídeo en Internet. En este apartado veremos cómo integrar vídeos FLV en una página web utilizando el reproductor flash multimedia desarrollado por Jeroen Wijering (http://www.jeroenwijering.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. 4.8.2 Reproductor de una lista de vídeos FLV

1. Descarga y descomprime el archivo flvlistplayer.zip en la carpeta miweb\flvlistplayer.

2. Desde el explorador de archivos abre la carpeta miweb\flvlistplayer y haz doble clic en el archivo index.html. Con esto se abrirá el navegador mostrando las cinco posibilidades estándar que se contemplan: FLV simple, FLV con imagen previa, Lista FLV simple, Lista FLV con imagen previa y Lista FLV con display lateral.

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

4. Regresa al explorador de archivos en la carpeta miweb\flvlistplayer. Dentro de esta carpeta se encuentra: • La carpeta videos que contiene los archivos de video FLV que se reproducen.

Todos ellos tienen unas dimensiones de 240x192 píxeles. • La carpeta images que contiene los GIFs con las imágenes previas de los cinco

videos y mismas dimensiones que los vídeos. • La página HTML que permite el acceso a todo el conjunto: index.html • El reproductor de audio universal: mediaplayer.swf • Los archivos XML: playlist1.xml y playlist2.xml que contiene la lista de

reproducción de vídeos con la siguiente información: ubicación de cada archivo de audio, de la imagen asociada, título, autor, etc.

• El fichero de javascript swfobject.js que asegura la integración del reproductor en la página HTML sin tener que hacer clic sobre él antes de interactuar con sus botones.

5. Abre Kompozer y utilízalo para abrir el archivo index.html 6. Clic en la pestaña Código fuente. 7. Si deseas insertar el reproductor en otra página basta con copiar y pegar las

siguientes líneas de código HTML:

<script type="text/javascript" src="swfobject.js"></script>


386

Esta línea se sitúa entre las etiquetas <head> … </head> de la página HTML para asegurar referencia al código javascript que asegura la correcta integración del reproductor. FLV simple

<div id="player1">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','212','7'); so.addParam('allowfullscreen','true'); so.addVariable('file','videos/dt_escenario.flv'); so.addVariable('height','212'); so.addVariable('width','240'); so.write('player1'); </script> 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. Recuerda que el archivo de video debe situarse en la carpeta videos. En las variables height y width se indican la altura y anchura en píxeles con que se visualizará el reproductor. La botonera ocupa 20 píxeles de altura. Sumados a los 192 del vídeo hacen un total de 212 píxeles para el total del reproductor. FLV con imagen previa

<div id="player2">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','212','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','192'); so.addVariable('file','videos/dt_vestuario.flv'); so.addVariable('height','212'); so.addVariable('image','images/dt_vestuario.gif'); so.addVariable('width','240'); so.write('player2');


387

</script> En la variable image se indica la referencia a la ubicación del archivo de imagen que se muestra antes de iniciar la reproducción del video. Puedes modificar este valor para visualizar una imagen con otro nombre distinto. Recuerda que el archivo de imagen debe situarse en la carpeta images. En la variable displayheight se indica la altura con que se visualizará el área display que muestra esta imagen y luego el vídeo. Lista FLV simple

<div id="player3">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','360','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','192'); so.addVariable('file','playlist1.xml'); so.addVariable('height','360'); so.addVariable('width','240'); so.write('player3'); </script> En la variable file en lugar de indicar un archivo flv se especifica un archivo XML que contiene una lista de vídeos. El reproductor ocupará una altura de 360 píxeles de acuerdo con lo indicado en el variable height. Al área del display (donde se muestra la imagen o vídeo) se le asigna una altura de 192 píxeles. Esto se indica en la variable displayheight. La botonera ocupa una altura de 20 píxeles. En consecuencia por debajo esta barra se mostrará la lista de reproducción ocupando 148 píxeles. Es el resultado de la siguiente operación: 360 – (192+20) = 148 px Lista FLV con imagen previa


388

<div id="player4">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','240','360','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','192'); so.addVariable('file','playlist2.xml'); so.addVariable('height','360'); so.addVariable('width','240'); so.write('player4'); </script> En la variable file se apunta al archivo playlist2.xml que contiene la información sobre la lista de vídeos: ubicación de archivos mp3, imágenes asociadas, títulos, autores, etc. Lista FLV con display lateral


389

<div id="player5">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('mediaplayer.swf','mpl','360','212','7'); so.addParam('allowfullscreen','true'); so.addVariable('displayheight','172'); so.addVariable('file','playlist2.xml'); so.addVariable('height','212'); so.addVariable('width','360'); so.addVariable('displaywidth','216'); so.write('player5'); </script> En la variable displaywidth se indica la anchura en píxeles que ocupará el área de display que se sitúa a la izquierda de la lista de reproducción. Para que el sistema funcione correctamente es necesario comprobar que en la misma carpeta de la página html se encuentren los archivos swfobject.js y mediaplayer.swf. Si se trata de una lista también debe incluirse el correspondiente archivo xml. Además deben ubicarse correctamente los archivos de imagen y de video respectivamente en las subcarpetas images y videos.

8. En la página flvplayer.html dispones de un asistente que permite configurar las

distintas opciones del reproductor de Jeroen Wijering. El resultado final será el código embed o bien el objeto swfobject que se puede copiar y pegar en una página HTML para insertar en ella el reproductor. Para ello elige una opción en la lista de modelos de configuración. Al seleccionarla se rellenarán automáticamente los valores de configuración básica asociados que puedes personalizar.


390

Tras elegir un modelo o bien pulsar en el enlace recargar reproductor se mostrará una vista previa del reproductor. En la parte inferior se podrá copiar y pegar el código embed o bien el código swfobject. Si deseas configurar otros parámetros más avanzados pulsa en el botón configuración avanzada para introducir estos valores. No olvides pulsar en el botón recargar reproductor para comprobar los cambios.

A continuación se explica cada parámetro y la sintaxis de los archivos xml de las listas de reproducción. Variables :

• Altura del display (displayheight). Establece la altura del área de visualización en píxeles. Si no se especifica valor, será la altura del reproductor menos la consola de reproducción (20 píxeles).

• Ubicación del archivo (file). Es la ubicación del archive a reproducir. Puede ser un archivo simple (MP3/JPG/SWF/PNG/GIF/FLV/RTMP) o una lista de reproducción. Puede estar situado en la misma carpeta que el reproductor, en otra carpeta o en una URL de Internet.

• Altura del reproductor (height). Indica los pixels que ocupa el reproductor por completo.

• Imagen vista previa (image). Cuando se reproduce un FLV, se puede utilizar esta variable para mostrar una imagen de formato JPG/SWF/PNG/GIF como vista previa al


391

inicio de la reproducción. Se puede asignar una imagen a cada video en la lista de reproducción.

• Anchura del reproductor (width). Define la anchura del reproductor. Variables de COLOR:

• Color fondo (backcolor). Es el color de fondo del reproductor en formato hexadecimal. Ejemplo: 0xFFFFFF (blanco).

• Color primer plano (frontcolor). Es el color de textos y botones. • Color resaltado (lightcolor). Color del rollover y activo del reproductor.

Variables de APARIENCIA:

• Scroll automático de lista (autoscroll). Si se marca esta casilla se mostrará una barra de scroll si el número de elementos es demasiado grande.

• Anchura de visualización (displaywidth). Si se define un valor inferior a la anchura del reproductor se consigue que la imagen aparezca a la izquierda de la lista de reproducción ocupando esa anchura.

• Barra de control más grande (largecontrols). Al activar esta casilla se duplica el tamaño de visualización de la barra de control. Es especialmente útil para usuarios con dificultades visuales.

• Mostrar logo (logo). Sitúa el logo de marca de agua en la esquina inferior derecha de la imagen. Se recomienda utilizar un archivo PNG de fondo transparente.

• Ajustar imagen (overstretch). Se pueden elegir las siguientes opciones: Ajuste simple (se ajusta a la dimensión –anchura o altura- más próxima manteniendo la proporción en fondo negro), Ajuste proporcional (se ajustan ambas dimensiones para ocupar todo el espacio manteniendo la proporción). Ajuste no proporcional (se ajusta cada dimension al espacio disponible pudiendo deformarse la imagen/video) y Sin ajuste (se mantienen las dimensiones originales de la imagen/video).

• Mostrar dígitos del contador (showdigits). Si se desmarca esta casilla no se mostrará el tiempo de reproducción

• Mostrar ecualizador gráfico (showeq). Si se activa esta opción se mostrará un ecualizador gráfico sobre la parte inferior de la imagen durante la reproducción.

• Mostrar iconos de carga/play (showicons). Muestra el icono “play” en el centro de la imagen para que el usuario pueda iniciar la reproducción pulsando en él.

• Miniaturas de la lista (thumbsinplaylist). Si se elige esta opción para cada pista de la lista de reproducción se observará la vista previa de la imagen especificada en el elemento image del archivo xml.

Variables de REPRODUCCIÓN:

• Inicio automático (autostart). Cuando se activa esta variable se logra que el reproductor se inicia cuando se carga la página.

• Longitud del buffer (bufferlength). Es el número de segundos durante los cuales un archivo FLV (vídeo) será almacenado en el búffer antes de iniciar su reproducción. Es una opción interesante para conexiones de clientes lentas. El valor por defecto es 3 segundos.

• Reproducción indefinida (repeat). El valor por defecto es “No” para indicar que el reproductor se detendrá tras reproducir un audio o un elemento de la lista de reproducción. De esta forma se preserva el ancho de banda. Si se selecciona “Una vez cada item” se reproducirá una sóla vez cada pista de la lista y al final se detendrá. Si se elige “Sí” se reproducirá indefinidamente el audio o lista de reproducción.

• Reproducción aleatoria (shuffle). Si marcas esta casilla se reproducirán en orden aleatorio las pistas de video de una lista.

• Volumen inicial (volume). Define el porcentaje de volumen (0-100) con que se iniciará el reproductor.

Variables de INTERACCIÓN: La configuración de algunas variables de interacción puede ser compleja y requiere ciertos conocimientos avanzados de programación. No obstante se recogen en este apartado a modo


392

de cita y al margen del curso. Para más información consulta la página del creador del reproductor Jeroen Wijering (http://www.jeroenwijering.com/)

• MP3 de audio extra (audio). Especifica la ubicación de un archivo mp3 externo que se utilizará como banda sonora adicional. De esta forma se pueden añadir comentarios de accesibilidad o del propio autor del vídeo.

• URL del script estadístico (callback). Define la ubicación de un script (PHP/ASP) que el reproductor llamará cada vez que un vídeo se inicie o detenga. Esto puede servir para guardar estadísticas de uso. Para más información consultar la página de Jeroen Wijering.

• URL archivo subtítulo (captions). Establece la ubicación del archivo de texto externo que contiene los subtítulos. El reproductor soporta formato SMIL y SRT muy utilizado en el ripeado de DVDs.

• Permitir javascript (enablejs). Si marcas esta opción se activa la interacción javascript. Esta funcionalidad sólo funciona en línea e incluye control de reproducción, carga asíncrona de archivos multimedia y recuperación de información de las pistas a javascript.

• Botón Pantalla Completa (fsbuttonlink). Si activas esta opción se mostrará un botón para mostrar la reproducción a pantalla completa. Esto sólo funciona si el reproductor de Flash del cliente es 9.0.28 o superior.

• Identificador para scripts (id). Es el identificador único del archivo que se reproduce y se suele utilizar para el script de callback. Se puede especificar un id para cada elemento de una lista de reproducción.

• Enlace para redireccionar a (link). Si configuras la marca de agua con el logo, puedes definir en esta variable una URL donde enlazar cuando el cliente hace clic sobre este logo. Se puede definir un enlace para cada elemento de la lista de reproducción.

• Enlace del clic sobre visor (linkfromdisplay). Si activas esta opción al hacer clic sobre la imagen (no sólo sobre el logo) se navegará hasta la página indicada en el parámetro link.

• Destino del enlace (linktarget). Establece el marco donde se mostrará en enlace definido. Por defecto es “_self” aunque se puede definir “_blank” para mostrarlo en una nueva página.

• Script de streaming (streamscript). Es la URL de un script de servidor que se puede utilizar para simular streaming mediante PHP, ASP o LigHTTPD.

• Tipo de archivo (type). El reproductor determina el tipo de archivo que se reproducirá. La opción por defecto es automático pero en esta variable se puede indicar al reproductor el tipo de archivo: flv, mp3, etc.

• Usar audio extra por defecto (useaudio). Al desactivar esta opción se fuerza que no suene la pista de audio extra por defecto.

• Usar subtítulos por defecto (usecaptions). Al desmarcar esta casilla se fuerza que los subtítulos se oculten por defecto.

• Usar pantalla completa flash9 (usefullscreen). Desmarca esta variable si no deseas que se muestre el botón de pantalla completa en el reproductor.

• Usar atajos de teclado (usekeys). Si activas esta opción funcionarán ciertas teclas en el reproductor: barra espaciadora (play/pausa) y teclas de flecha (moverse sobre los audios de una lista).

Las listas de reproducción. El reproductor de Jeroen Wijering permite cargar un audio FLV simple o una lista de reproducción.


393

1. Utiliza el explorador de archivos para situarte en la carpeta miweb\flvlistplayer. 2. Clic derecho sobre el archivo playlist2.xml y selecciona Abrir con > Bloc de notas.

Este archivo contiene una de las listas de videos que utiliza el reproductor. 3. Observa que cada pista se especifica entre etiquetas <track>…</track> y dentro de

ella se indica el título del vídeo <title>, el autor <creator>, la ubicación del archivo <location> y de la imagen previa asociada <image>.

<track> <title>El autor</title> <creator>dteatro</creator> <location>videos/dt_autor.flv</location> <image>images/dt_autor.gif</image> </track>

4. Puedes editar este archivo modificando estos valores para incluir otras pistas en la lista de reproducción.

5. Dentro de cada etiqueta <track> se pueden utilizar las siguientes etiquetas para cada pista de audio:

• <location> …</location>. Indica la ubicación del archivo de video. • <title> …</title>. Título de la pista. • <link> …</link>. Enlace asociado a esa pista. • <image> …</image>. Imagen previa asociada. • <creator> …</creator>. Autor del video.

6. El reproductor soporta 3 formatos de archivo de listas de reproducción: XSPF (muy

utilizadas en Música Creative Commons) , RSS (utilizada con frecuencia para Podcasts) y ATOM (propia de blogs). Como puede leerse en el encabezado del archivo playlist2.xml abierto anteriormente se trata de una lista XSPF:

<playlist version="1" xmlns="http://xspf.org/ns/0/">

Vídeo y animaciones ::: Integración HTML de objetos Flash Diseño de materiales multimedia. Web 2.0

394

4.9 Integración HTML de objetos Flash


395

4.9 Integración HTML de objetos Flash 4.9.1 ¿Qué es un objeto Flash? Un objeto Flash es un archivo de extensión *.SWF que ha sido diseñado con el programa Adobe Flash (http://www.adobe.es) y que se suele embeber dentro de una página HTML para mostrarse a través del navegador. Esta tecnología ha experimentado tal auge que actualmente se considera indispensable en la elaboración de animaciones y juegos multimedia interactivos en educación. Lejos de crear objetos flash porque ello excede el propósito de este curso en este capítulo se describe el procedimiento de cómo reutilizar un SWF descargado o existente para integrarlo dentro de una página HTML. 4.9.2 Descarga de objetos Flash con Firefox

1. Abre Firefox y selecciona Herramientas > Complementos.

2. En el cuadro de diálogo Complementos verifica si está instalado el complemento UnPlug. En caso contrario haz clic en el enlace Obtener extensiones y visita la página web de complementos de Mozilla Firefox para buscarlo, descargarlo e instalarlo. Tras su instalación quizás sea necesario reiniciar el navegador.

3. Desde Firefox introduce la cadena de búsqueda “Happy Pill” en la barra de búsquedas de Google y haz clic en el botón derecho (icono de lupa) o bien pulsa la tecla <enter>


396

4. En la página de resultados de Google haz clic sobre uno de los enlaces que conduce a

este juego interactivo en Flash. 5. Una vez situado en la página web que muestra este objeto haz clic en el botón

Unplug que aparece en el extremo derecho de la barra de herramientas. Otra posibilidad es seleccionar Herramientas > UnPlug.

6. En el panel UnPlug que muestra el navegador localiza el archivo tipo Flash de nombre happy….swf Pulsa en el botón Save (Guardar) que acompaña a ese archivo SWF.

7. En el cuadro de diálogo Guardar como localiza la carpeta miweb\swfs 8. En la casilla Nombre introduce como happypill.swf 9. Clic en el botón Guardar.


397

10. Clic en el botón Close para cerrar el panel de UnPlug. Tras la descarga del archivo *.SWF que contiene la animación Flash se puede visualizar utilizando el navegador web Mozilla Firefox. Abre el navegador y selecciona Archivo > Abrir Archivo. Localiza y abre el archivo happypill.swf situado en la carpeta miweb\swfs. Una vez que se dispone del archivo .swf se puede reutilizar integrándolo en nuestra propia página HTML. En el siguiente apartado se explica el procedimiento para hacerlo. Notas: En muchas ocasiones el archivo SWF es un objeto independiente, es decir, contiene todo lo que necesita para funcionar adecuadamente. Sin embargo en otras necesita disponer de archivos auxiliares que la animación carga en tiempo de ejecución. Se trata de información almacenada en bases de datos, archivos txt o xml, imágenes, etc. Por este motivo puede ocurrir que al descargarlo no funcione en el equipo local. En la dirección: http://www.consumer.es/infografias/ podrás encontrar un repositorio de infografías educativas muy interesante. 4.9.3 Integración HTML básica de objetos Flash En esta actividad vamos a insertar una animación en formato *.SWF dentro de una página. Los archivos *.SWF son animaciones diseñadas con el programa Adobe Flash (http://www.adobe.es) que permiten altas dosis de interactividad con un razonable peso de descarga.

1. Extrae a la carpeta miweb\swfs de tu disco duro el contenido del archivo: blobs.zip. Como resultado de esa extracción encontrarás en esta carpeta los siguientes archivos: un archivo de texto (blobs.txt) y un archivo de flash (blobs.swf)

2. Abre Kompozer. Selecciona Archivo > Nuevo o pulsa en el botón Nuevo. 3. Minimiza Kompozer y utiliza el explorador de archivos de Windows para situarte en

en la carpeta miweb\swfs. Haz doble clic sobre el archivo blobs.txt para abrirlo.. 4. Desde el Bloc de notas elige Edición > Seleccionar todo para luego elegir Edición >

Copiar. Cierra el editor y regresa a Kompozer. 5. Sitúa el cursor debajo del título y elige Editar > Pegar. 6. Selecciona el título “Blobs” y asígnale el tipo de formato Título 1. Selecciona los

textos “Descripción” e “Instrucciones” y pulsa en el botón Negrita (B) de la barra de


398

Formato. Selecciona el listado completo de instrucciones y pulsa en el botón Lista con viñetas.

7. Selecciona la etiqueta OBJECT/EMBED y elige Editar > Cortar para eliminarla y copiarla al portapapeles.

8. Elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho para seleccionar Pegar. Clic en el botón Insertar.

9. La etiqueta que integra el objeto flash (SWF) en la página es:

<object width="550" height="400"> <param name="movie" value="swfs/blobs.swf"> <embed src="swfs/blobs.swf" type="application/x-shockwave-flash" width="550" height="400"> </object>

Los parámetros de esta etiqueta se explican a continuación:

• <object …>… </object> es la etiqueta que contiene el objeto Flash. Esta etiqueta es interpretada por los navegadores que utilizan un control activeX para


399

reproducir la película Flash como por ejemplo Internet Explorer. Otros exploradores web no utilizan este control activeX por lo que es necesario incluir también la etiqueta embed.

• Los atributos de object permiten definir la altura (height) y la anchura (width) en píxeles con que se visualizará la animación Flash.

• La etiqueta object tiene un parámetro muy importante donde se indica dónde está ubicado el archivo swf que contiene la animación Flash. En este caso es el archivo blobs.swf dentro de la carpeta swfs: <param name=”movie” value=”swfs/blobs.swf”>

• <embed>…</embed> es una etiqueta incluída dentro de la etiqueta <object> y que es interpretada por navegadores que no utilizan el control activeX y en su lugar usan el reproductor de Flash como por ejemplo Netscape, Mozilla, Opera, etc. La etiqueta embed tiene distintos atributos para indicar la ubicación del archivo swf (src), las dimensiones de visualización, etc.

• Es necesario utilizar ambas etiquetas: object/embed para que una animación Flash se visualice correctamente en todos los navegadores web.

• Puedes copiar y pegar esta etiqueta en otras páginas web y luego modificar las dimensiones de visualización y la ubicación/nombre del SWF que deseas mostrar en cada caso.

10. Clic en el botón Guardar. Introduce el título de la página: Blobs y guárdala con el nombre blobs.html en la carpeta miweb.

11. Para ver el resultado final haz clic en el botón Navegar. Puede ser necesario descargarse el plugin desde la web de Adobe para visualizar correctamente esta animación (http://www.adobe.com)

4.9.4 Integración HTML avanzada de objetos Flash La integración de una animación Flash en una página HTML tal y como se ha explicado en el apartado anterior suele presentar dos problemas comunes:

1. Si navegas con Internet Explorer por una página que contiene un objeto Flash, por ejemplo la página blobs.html que has diseñado en el apartado anterior, observarás que es necesario hacer previamente un primer clic sobre ella antes de interactuar con sus elementos. Al situar el puntero del ratón sobre la película, ésta presenta un borde a su alrededor, el puntero del ratón toma el aspecto de una mano e incluso se visualiza el mensaje: “Haga clic para activar y usar este control”. Este efecto no ocurre si se utiliza Firefox.

2. Si los visitantes no disponen del plugin de Flash instalado y configurado en el navegador web no podrán visualizar este objeto. En su lugar verán un rectángulo vacío.

Con intención de resolver los dos problemas mencionados, se propone utilizar una etiqueta más avanzada para integrar un objeto flash en una página HTML.

1. Extrae a la carpeta miweb\swfs de tu disco duro el contenido del archivo: mastermind.zip. Como resultado de esa extracción encontrarás en esta carpeta los siguientes archivos: un archivo de texto (mastermind.txt) y un archivo de flash (mastermind.swf)

2. Extrae a la carpeta miweb\scripts de tu disco duro el contenido del archivo ZIP que se adjunta a continuación. Como resultado de esa extracción encontrarás en esta carpeta el archivo con código javascript: AC_RunActiveContent.js

3. Abre Kompozer. Selecciona Archivo > Nuevo o pulsa en el botón Nuevo. 4. Minimiza Kompozer y utiliza el explorador de archivos de Windows para situarte en

en la carpeta miweb\swfs. Haz doble clic sobre el archivo mastermind.txt para abrirlo.

5. Desde el Bloc de notas elige Edición > Seleccionar todo para luego elegir Edición > Copiar. Cierra el editor y regresa a Kompozer.

6. Sitúa el cursor debajo del título y elige Editar > Pegar.


400

7. Selecciona el título “Mastermind” y asígnale el tipo de formato Título 1. Selecciona los textos “Descripción” e “Instrucciones” y pulsa en el botón Negrita (B) de la barra de Formato. Selecciona el listado completo de instrucciones y pulsa en el botón Lista numerada.

8. Selecciona la línea <script scr=”scripts/AC_ … </script> y elige Editar > Cortar para eliminarla y copiarla al portapapeles.

9. En la parte inferior de la página pulsa sobre la pestaña Código fuente

10. Sitúa el cursor inmediatamente debajo de la línea <title></title> y antes de la etiqueta de cierre </head>

11. Elige Editar > Pegar o bien pulsa la combinación de teclas <Ctrl>+<V>

12. Esta etiqueta referencia un archivo externo con el código javascript: AC_RunActiveContent.js situado dentro de la carpeta scripts del sitio web. Si lo ubicas en otra carpeta deberás indicarlo en la ruta src de esta etiqueta.

13. En la parte inferior de la página pulsa sobre la pestaña Normal para regresar al documento en vista normal.

14. Selecciona la etiqueta completa: <script> …</script><noscript>…</noscript> y elige Editar > Cortar para eliminarla y copiarla al portapapeles.

15. Sitúa el cursor entre el párrafo Descripción y el párrafo Instrucciones. 16. A continuación elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho

para seleccionar Pegar. Clic en el botón Insertar.


401

17. La etiqueta que integra el objeto flash (SWF) en la página es:

<script type="text/javascript"> AC_FL_RunContent( 'width','380','height','430','title','Mastermind','src','swfs/mastermind','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','swfs/mastermind' ); </script> <noscript> <object width="380" height="430" title="Mastermind"> <param name="movie" value="swfs/mastermind.swf"> <embed src="swfs/mastermind.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="380" height="430"></embed> </object> </noscript>

Los parámetros de esta etiqueta se explican a continuación:

• <script …>… </script> indica la función de Javascript AC_FL_RunContent que consigue que no sea necesario hacer clic sobre el objeto Flash para activarlo. Esto sólo funciona si el navegador tiene activada la ejecución de scripts. Recuerda que para que funcione el código debe estar situado en un archivo externo ubicado en scripts/AC_RunActiveContent.js

• <noscript> … </noscript> Es la etiqueta que se ejecuta si el navegador web no tiene activada la ejecución de scripts. Observa que dentro de ella se encuentra la etiqueta object/embed que se presentó en el apartado anterior.

• Al definir el parámetro pluginspage se conseguirá que si el usuario no tiene instalado el plugin de Flash en su navegador, sea redireccionado a la página de Adobe donde podrá descargarlo e instalarlo.

• Puedes copiar y pegar esta etiqueta completa en otras páginas web y luego modificar las dimensiones de visualización y la ubicación/nombre del SWF que deseas mostrar en cada caso.

18. Clic en el botón Guardar. Introduce el título de la página: Mastermind y guárdala con el nombre mastermind.html en la carpeta miweb.


402

19. Para ver el resultado final haz clic en el botón Navegar. Conviene utilizar Internet Explorer para comprobar que en este caso no es necesario hacer un clic previo sobre la animación flash para poder interactuar con ella.

4.9.5 Asistente de integración HTML de objetos Flash

1. Descarga y descomprime el archivo fplayer.zip dentro de la carpeta miweb\fplayer. 2. Como resultado de la extracción encontrarás dentro de esta carpeta los archivos:

index.html, movie.swf y swfobject.js

3. A continuación haz clic sobre el siguiente enlace: flashplayer.html. Esta página es un asistente para generar el código HTML necesario para insertar un objeto Flash en una página web.


403

4. Antes de generar el código introduce valores en las distintas opciones de Configuración Básica. • URL del archivo Flash SWF. Indica la ruta y nombre del archivo SWF que contiene

el objeto de Flash. En este caso teclea: movie.swf • Dimensiones. Permite indicar si las dimensiones de la película se proporcionan en

Píxeles o bien en Porcentaje. El porcentaje es relativo a la ventana del navegador. Ejemplo: 100%/-100% hará que la película ocupe toda la ventana del navegador.

• Anchura y Altura. Indica las dimensiones con que se visualizará el objeto Flash. • Reproducir al inicio. La reproducción se iniciará tras cargarse la animación. Es la

opción por defecto que seleccionaremos en este caso. Si desmarcas esta opción se detendrá al comienzo. El usuario iniciará la reproducción al pulsar en un botón de la película o mediante la opción Reproducir del menú contextual que se muestra al hacer clic derecho sobre la película.

• Reproducir indefinidamente. Para la animación que nos ocupa no es pertinente aunque en otros casos si se marca hará que la película Flash se reproduzca en ciclo cuando alcanza el último fotograma.

5. Para definir los parámetros de Configuración Avanzada pulsa en el enlace

configuración avanzada. En este apartado podrás establecer los siguientes valores: • Calidad. Esta opción permite definir la relación entre el tiempo de procesamiento

y el suavizado de cada fotograma antes de que aparezca en la pantalla del usuario. La opción por defecto es Óptima.

• Modo de ventana. Permite establecer una opción de transparencia, posición y capas de la ventana de Flash.

Ventana. Reproduce la película Flash en su propia ventana rectangular dentro de la página web. De esta forma la reproducción resulta lo más rápido posible. Es la opción por defecto.

Opaco sin ventana. Mueve los elementos detrás de las películas Flash ( por ejemplo, con HTML dinámico) para evitar que éstos se muestren.

Transparente sin ventanas: Muestra el fondo de la página HTML donde se incrusta la película a través de todas las áreas transparentes de la película.

• Alineación HTML. Elige una opción de Alineación HTML para colocar la ventana de la película de Flash dentro de la ventana del navegador. La opción por defecto es Izquierda.

• Escala. Elige una opción de Escala para colocar la película dentro de los límites especificados si se cambió el ancho y la altura original de la película.

Mostrar todo. Es la opción por defecto. La película se muestra visible por completo en el área especificada y sin distorsión. Para mantener el ratio (relación anchura-altura) original es posible que utilice bordes a ambos lados de la película.

Sin borde. Ajusta la película al área especificada pero sin distorsión. Mantiene el ratio (relación anchura-altura) original recortando el área de visualización si es necesario.

Exacto. Ajusta la película al area disponible deformando la imagen si es necesario.

• Alineación Flash. Elige una opción de Alineación Flash para configurar la forma en que se coloca la película dentro de la ventana y cómo se recorta si fuera necesario.

• Mostrar Menú. Muestra un menú de reproducción cuando el usuario hace clic con el botón derecho del ratón en la película. Es la opción por defecto. Si se desmarca esta opción se mostrará un menú reducido sin las opciones de reproducción.

• Color de fondo. Es el valor hexadecimal del código de color RGB que especifica el color de fondo de la película. Utiliza este atributo para sobrescribir el color de fondo original de la película. Este atributo no afecta al color de fondo de la página HTML.


404

• URL Base. Especifica el directorio base o URL utilizado para resolver todas las rutas relativas contenidas en la película Flash. Es un atributo especialmente útil cuando las películas Flash están en una carpeta distinta del resto de archivos. En este caso no es necesario indicar la URL Base.

• Variables. Son variables=valores separados por el signo “&” que se pasan desde el código HTML al objeto Flash para que éste las interprete. Ejemplo: file=mozart.mp3&volumen=80. En este caso no son necesarias.

6. Tras definir los distintos valores de estos atributos pulsa en el enlace generar código 7. El asistente genera dos tipos de código al pulsar en los enlaces mostrar código embed

/ mostrar código swfobject. • Código object/embed. Es el etiquetado básico. No utiliza javascript pero tiene el

inconveniente de que el usuario de Internet Explorer debe hacer clic sobre el objeto Flash para seleccionarlo previamente antes de comenzar a interactuar con él.

• Código swfobject. Es el etiquetado complejo. Utiliza javascript. Es necesario que el archivo swfobject.js esté situado en la ruta que se indica en esta etiqueta. Se interactúa directamente sobre el objeto flash sin necesidad de efectuar un clic previo de activación.


405

8. En cualquiera de los dos casos haz clic derecho sobre el cuadro de texto que muestra el código y elige Seleccionar todo.

9. Clic derecho de nuevo sobre el cuadro de texto y elige Copiar. 10. Abre Kompozer 11. Selecciona Archivo > Abrir para abrir el archivo miweb\fplayer\index.html 12. Sitúa el cursor en el punto de la página donde deseas insertar el objeto Flash. 13. A continuación elige Insertar > HTML y en el cuadro Insertar HTML haz clic derecho

para seleccionar Pegar. Clic en el botón Insertar. 14. Clic en el botón Guardar. 15. Para ver el resultado final haz clic en el botón Navegar. Puede ser necesario

descargarse el plugin desde la web de Adobe para visualizar correctamente esta animación (http://www.adobe.com)

4.9.6 Integración HTML de un mapa Google

1. Descarga y descomprime el archivo googlemaps.zip en la carpeta miweb\googlemaps 2. Como resultado de la extracción encontrarás varios archivos:

• index.html. Si haces doble clic sobre este archivo se abrirá el navegador web mostrando un mapa de Google del área que hemos seleccionado.

• gmap.swf Es el objeto flash que se conecta con Google Maps y muestra el mapa interactivo.

• swfobject.js Es el archivo de código javascript que evita tener que hacer clic sobre el mapa para activarlo previamente si se accede con Internet Explorer.

• evaristo.kml. Es una archivo de etiquetas con extensión *.kml que contiene la información de los marcadores que aparecerán en el mapa.

3. Abre Kompozer. 4. Selecciona Archivo > Abrir para localizar y abrir el archivo index.html situado en la

carpeta miweb\googlemaps 5. En la parte inferior de la página pulsa sobre la pestaña Código fuente


406

6. El código HTML que inserta en la página el objeto de Flash es el siguiente:

<html> <head> <script type="text/javascript" src="swfobject.js"></script> <title>Google Maps</title> </head> <body> <h1>Google Maps</h1> <div id="gmaps">This text will be replaced</div> <script type="text/javascript"> var so = new SWFObject('gmap.swf','mpl','650','500','9'); so.addVariable('clatitud','43.5327566488622'); so.addVariable('clongitud','-5.674635881667000'); so.addVariable('route','evaristo.kml'); so.addVariable('zoom','16'); so.addVariable('maptype','satellite'); so.addVariable('czoom','true'); so.addVariable('cposition','true'); so.addVariable('ctype','true'); so.addVariable('cnavigator','false'); so.write('gmaps'); </script> </body> </html>

7. Observa que la referencia al objeto flash está en gmap.swf de SWFObject. 8. En la sintaxis se pueden definir los distintos parámetros con que se mostrará

inicialmente el mapa: • clatitud y clongitud son las coordenadas geográficas en formato decimal del

punto central del mapa. • route se refiere al nombre del archivo KML que contiene la información de

ubicación de los marcadores. En este caso evaristo.kml. • zoom es el grado de magnificación con que se visualizará inicialmente el mapa. • maptype indica el tipo de mapa que se mostrará inicialmente: satellite, map o

hybrid. • czoom si tiene valor “true" (verdadero) el usuario dispondrá del control del zoom. • ctype si tiene valor “true” (verdadero) el usuario dispondrá de los botones para

cambiar al modo de mapa, satélite o híbrido. • cnavigator si tiene valor=”true” se podrá disponer del control de navegación para

poder moverse por el mapa con más comodidad.

9. Prueba a modificar algunos de estos parámetros iniciales y comprobar el resultado que produce.

10. Minimiza Kompozer y abre el archivo evaristo.kml utilizando el editor de textos por defecto del sistema.

11. Repasando las etiquetas de este documento observa que el marcador y sus propiedades están definidas entre las etiquetas <Placemark> … </Placemark>. Respetando la sintaxis se pueden añadir más etiquetas o bien modificar los datos de este marcador para situarlo en otro sitio.

Vídeo y animaciones ::: Integración HTML de applets de Java Diseño de materiales multimedia. Web 2.0

407

4.10 Integración HTML de applets de Java


408

4.10 Integración HTML de un applet de Java 4.10.1 Applets: qué son y dónde conseguirlos Java es un lenguaje de programación creado por la empresa Sun Microsystems. Se ha destinado fundamentalmente al diseño de aplicaciones para Internet. Sus características más destacadas a nivel de usuario son:

• Los programas creados con Java funcionan en cualquier equipo con independencia de su arquitectura o sistema operativo. Esto se ha conseguido mediante la utilización de un software adicional que es necesario tener instalado en el equipo para que la aplicación funcione. Este software es un intérprete de los programas conocido normalmente Java Runtime Environment (JRE).

• Uno de los éxitos de Java son los applets. Son pequeños programas que pueden ser integrados dentro de una página web para dotarla de la interactividad que el simple código HTML no puede proporcionar. Los applets creados por otros se pueden reutilizar en otras páginas. Para ello es necesario integrarlo en un archivo HTML y configurar adecuadamente sus parámetros.

• El principal inconveniente de los applets es su lentitud para arrancar. El navegador al detectarlo en una página, debe cargar primero la máquina virtual Java y luego ésta debe leer su código e interpretarlo. Esto provoca cierta ralentización aunque con el tiempo se han conseguido versiones más potentes y rápidas de las nuevas máquinas virtuales de Java.

• Se pueden conseguir más applets en la URL: http://javaboutique.internet.com • El proyecto Descartes (http://descartes.cnice.mec.es/ ) del CNICE utiliza applets de

java para la enseñanza y aprendizaje de la geometría. 4.10.2 Instalación de Java Runtime Environment (JRE) Windows

1. Descarga y descomprime el intérprete de programas Java Rutime Environment (JRE): jre-6u5-windows-i586-p-s.exe. Otra posibilidad es consultar la web oficial de Java para comprobar si existe una versión más actual: http://www.java.com/es/download/

2. Ejecuta el instalador y sigue los pasos del asistente para completar la instalación. Ubuntu

1. Desde el escritorio de Ubuntu selecciona Sistema > Administración > Gestor de paquetes Synaptic.

2. En el cuadro de diálogo Gestor de Paquetes Synaptic pulsa en el botón Buscar. 3. Introduce como término de búsqueda: sun java 6 y pulsa en el botón Buscar. 4. Localiza el paquete sun-java6-plugin haz doble clic sobre su casilla de verificación.

Confirma la instalación de las dependencias y pulsa en el botón Aplicar. 4.10.3 Integración HTML del applet “Sopa de letras”

1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a continuación: sopa.zip. Como resultado de esa extracción encontrarás una nueva carpeta llamada sopa y en su interior los siguientes archivos: sopa.htm, terminos.txt y el applet principal WordSeach.class y sus applets auxiliares: WSButton.class, WSGrid.class, WSList.class y WSWord.class.

2. Abre Kompozer y a continuación selecciona Archivo > Abrir para localizar la página miweb\sopa\sopa.html y abrirlo.


409

3. En el modo Vista Normal sólo se puede leer el título. Sin embargo si haces clic en la pestaña Código fuente se podrá acceder al código HTML que inserta el applet en esta página HTML.

4. La etiqueta HTML que integra el applet es:

<applet code="WordSearch.class" height="350" width="425"> <param name="gridcolors" value="black,white,#ccffcc,#008000"> <param name="listcolors" value="#008000,#ffcc00,#000000"> <param name="files" value="terminos.txt"> </applet> • <applet …> … </applet> es la etiqueta que define el applet dentro de la página.

El atributo code indica la ubicación del archivo externo *.class que lo contiene (WordSeach.class, en este caso). Con los atributos height y width se indican las dimensiones en píxeles de visualización.

• El nombre de los parámetros admitidos por un applet de Java y el rango de valores para cada uno viene ya definido por el programador que lo diseñó. En el caso que nos ocupa se contemplan 3 parámetros: gridcolors, listcolors y files.

• El parámetro gridcolors permite especificar el color de la cuadrícula de letras: texto, fondo, palabra encontrada y palabra marcada (separados por comas). Como valores se puede utilizar el código hexadecimal del color: #FFCC00 o bien nombre del color standard: white, black, yellow, red, etc.

• listcolors indica el color en la lista de palabras : texto, fondo y palabra encontrada (separados por comas).

• files especifica el nombre del archivo de texto que contiene los términos de la sopa de letras. En este caso es el archivo terminos.txt

• Para integrar este applet en otra página basta copiar y pegar esta etiqueta <applet …> … </applet> y asegurarse de que los archivos *.class y *.txt se ubican en la misma carpeta que la página HTML.

5. Puedes modificar en esta etiqueta alguno de los colores de la parrilla o de la lista e

incluso el archivo de texto que contiene las palabras a buscar. 6. Para guardar los cambios haz clic en el botón Guardar de la barra de Redacción de

Kompozer. 7. Si deseas modificar el título de la sopa de letras o bien los términos a buscar, desde

el explorador de Windows localiza el archivo terminos.txt situado dentro de la carpeta miweb\sopa\ y haz doble clic sobre él. Se abrirá el Bloc de Notas mostrando el contenido del mismo.


410

8. El título de la sopa de letras debe ir en la primera línea y precedido del símbolo "#". Luego cada término deberá ir en una línea distinta. Realiza las modificaciones oportunas. Para terminar elige Archivo>Guardar y cierra el Bloc de Notas.

9. Para comprobar el correcto funcionamiento de esta aplicación desde Kompozer abre el archivo sopa.html y luego pulsa en el botón Navegar. Debes esperar unos segundos a que se cargue la máquina virtual de Java e inicie el subprograma.

Notas: • Recuerda que para visualizar esta aplicación es necesario tener instalado en el

equipo Java Runtime Environment (JRE). http://www.java.com/es/download/ • Puedes conseguir más applets en la dirección: http://javaboutique.internet.com

4.10.4 Integración HTML del applet “Puzzle”

1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a continuación. Como resultado de esa extracción encontrarás una nueva carpeta llamada puzzle y en su interior los siguientes archivos: puzzle.html, bufon.gif y Jigsaw.jar.

2. Abre Kompozer y a continuación abre el archivo puzzle.html. 3. Clic en el pestaña Código fuente para ver la etiqueta que integra el applet.

<applet codebase="./" archive="Jigsaw.jar" code="Jigsaw.class" height="380" width="480"> <param name="Image" value="bufon.gif"> <param name="ImgWidth" value="216"> <param name="ImgHeight" value="298"> <param name="Rows" value="2"> <param name="Cols" value="2"> <param name="AutoSnap" value="3"> <param name="KeepBoardClear" value="true"> <param name="Connector" value="-1"> <param name="CanRotate" value="false"> <param name="DimHelpImage" value="60"> <param name="BreakupText" value="Comenzar"> <param name="TidyText" value="Mezclar"> <param name="SolveText" value="Resolver"> <param name="MessageText" value="¡ MUY BIEN !"> <param name="AllowSolve" value="true"> <param name="HelpImageGrayed" value="true"> <param name="OuterFrameColor" value="#FFCC00"> <param name="BgColor" value="#FFCC00"> <param name="LosePieces" value="false"> <param name="AutoShowPieces " value="true"> </applet>

4. A continuación se especifican los nombres de los principales parámetros y sus valores para el applet Jigsaw.class contenido dentro del archivo comprimido Jigsaw.jar.

Párametros obligatorios

• Image. Es el nombre del archivo que contiene la imagen del puzzle. Ejemplo:

bufon.gif. Debe estar situado en la misma carpeta. • ImgWidth La anchura en píxeles de la imagen en el puzzle. La imagen original

se ajustará al tamaño especificado. • ImgHeight .La altura en píxeles de la imagen en el puzzle. La imagen original

se ajustará al tamaño especificado. • Rows. El número de filas del puzzle. • Cols. El número de columnas del puzzle.


411

Párametros opcionales

• AutoSnap. Se usa para facilitar la ubicación correcta de las piezas. Cuando la pieza se acerca a su posición correcta se enganchará a modo de imán. Este valor puede oscilar entre 0 y 15. El valor 15 permite que la pieza se sitúe automáticamente sobre la posición correcta desde lejos.

• KeepBoardClear. Si está activado (true) las piezas desordenadas se situarán siempre fuera del área de construcción del puzzle tanto al comenzar como al pulsar el botón Mezclar.

• Connector. Define el tamaño de los enganches en las piezas del puzzle. Es un valor entre -1 y 4 aunque se recomienda el valor -1.

• CanRotate. Permite que las piezas puedan girarse pulsando el botón derecho del ratón sobre ellas. Su valor puede ser true o false.

• DimHelpImage. Si está definido muestra una copia de la imagen en el área de construcción del puzzle para ayudar a su diseño. Es un valor numérico de 0 a 100 que indica la transparencia de la imagen sólo si el parámetro HelpImageGrayed está activado.

• HelpImageGrayed. Si está activado (true) y se usa la imagen de guía, ésta se convertirá a una escala de grises.

• Bicolor. Color de fondo del applet. Ejemplo: #FFCC00 • OuterFrameColor. Color del borde del marco del applet. • InnerFrameColor. Color del marco alrededor del área de construcción del

puzzle. • BoardColor. Color del área de construcción del puzzle si no se usa la imagen

guía • SelectColor. Color que rodea a una pieza cuando se sitúa el puntero del ratón

sobre ella. • TextColor. Color del texto que aparece cuando se resuelve el juego. • AllowSolve. Si está desactivado (false) no aparecerá el botón de Resolver.

Este botón se muestra por defecto si no se especifica este parámetro. • BreakupText. Define el texto que aparecerá en el botón Comenzar • TidyText. Define el texto del botón Mezclar. Observa que el botón Mezclar

sólo revuelve las piezas no colocadas. • SolveText. Texto del botón Resolver. • MessageText. Texto del feedback al alumno cuando concluye con éxito el

puzzle. • RunTarget. Nombre del marco donde se mostrará la página indicada por el

parámetro RunURL cuando se resuelva el puzzle. • RunURL. URL de la página que se mostrará cuando el puzzle se resuelva

adecuadamente.

5. Puedes utilizar la vista Código fuente de Kompozer para acceder al código HTML de la página y modificar los valores de estos parámetros.

6. Recuerda que debes seleccionar Archivo > Guardar para guardar los cambios realizados.

7. Para comprobar el funcionamiento de esta aplicación, ábrela desde Kompozer y luega pulsa en el botón Navegar. Otra posibilidad es utilizar el explorador de archivos y hacer doble clic sobre el archivo miweb\puzzle\puzzle.html. Debes esperar unos segundos a que se cargue la máquina virtual de Java e inicie el subprograma.

8. Se puede insertar este applet en una página HTML en blanco con sólo copiar y pegar el código HTML antes indicado. No olvides copiar el archivo *.JAR y *.GIF en la misma carpeta de esta nueva página.


412

4.10.5 Integración HTML de un objeto JClic Para visualizar un paquete de JClic a través del navegador es necesario tener instalada el entorno JRE de java. En este apartado se explica cómo crear una página que muestra un paquete de JClic con todos los applets necesarios para su correcto funcionamiento.

1. Descarga y descomprime a la carpeta miweb el contenido del archivo jclic_ejemplo.zip.

2. Como resultado de la extracción encontrarás dentro de la carpeta miweb/jclic_ejemplo los siguientes archivos y carpeta:

• jclic. Es la carpeta que contiene los applets necesarios para que el paquete de actividades funcione correctamente.

• capaon.jclic.zip. Es el paquete jclic que contiene todos los activos y configuración del paquete.

• index.htm. Es la página HTML a través de la cual se carga el paquete para visualizarlo e interactuar con él a través del navegador.

3. Abre Kompozer. 4. Selecciona Archivo > Abrir para localizar y abrir el archivo index.html situado en la

carpeta miweb\jclic_ejemplo 5. En la parte inferior de la página pulsa sobre la pestaña Código fuente

6. El código HTML que inserta en la página el objeto de JClic es el siguiente:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>¿Hacia dónde?</title> <script language="JavaScript" src="jclic/jclicplugin.js" type="text/javascript"></script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="window.focus();"> <script language="JavaScript"> setJarBase('jclic'); writePlugin('capaon.jclic.zip', '100%', '100%'); </script> </body> </html>

7. Observa que la referencia para cargar los applets de java está en el archivo de javascript: jclicplugin.js que se encuentra en la carpeta jclic.

<script language="JavaScript" src="jclic/jclicplugin.js" type="text/javascript"></script>

8. Con la siguiente orden de Javascript indicamos la carpeta jclic que se toma como

base para buscar todos los applets necesarios:

<script language="JavaScript"> setJarBase('jclic');


413

…

9. La referencia al paquete específico que se carga se encuentra en la línea de código:

writePlugin('capaon.jclic.zip', '100%', '100%'); Si deseas cargar otro paquete del rincón de Clic:

1. Abre el navegador web y visita la dirección: http://clic.xtec.net/db/listact_es.jsp 2. En el catálogo de paquetes localiza uno y sitúate en la página que muestra su

información. 3. En la parte inferior encontrarás el enlace de descarga de ese paquete:

4. Selecciona y copia este enlace para pegarlo a continuación en la casilla de dirección del navegador. Esta acción producirá la descarga en local de este paquete.

5. Utiliza el explorador de archivos para copiar y pegar este archivo al interior de la carpeta miweb\jclic_ejemplo

6. A continuación abre el archivo index.html con Kompozer y modifica el nombre del paquete en la línea de código correspondiente:

writePlugin('capaon.jclic.zip', '100%', '100%');

7. Elige Archivo > Guardar para guarder los cambios. Si visualizas la página HTML verás que muestra el nuevo paquete que has referenciado.

video completo

Documents