[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 1
ADMINISTRACIN DE WEBSITES CON CMS PARTE II Leccin 12 Como agregar videos al contenido
Administracin de un WebSite con CMS se encuentra bajo una Licencia Creative Commons Atribucin- No Comercial-Licenciamiento Recproco 3.0 Unported. Sep 2012 Ago 2014 IDSystems [ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 2
04 COMO AGREGAR VIDEOS AL CONTENIDO
En nuestro contenido tambien podemos agregar videos a cada una de nuestras publicaciones. Hay varias maneras de hacerlo dependiendo del tipo de archivo que se trate.
Tipos de video y consideraciones
En primer lugar, al igual que con las imgenes, tenemos que saber cuales son los formatos de video que se pueden poner en nuestro sitio, ya que hay cientos de formatos y de codecs (algoritmos de compresion).
FLV Flash Video. Video convertido a flash SWF Formato de compresion y ejecucion de Flash. No necesariamente video. MPG (mpg-2, mpg-4) Formato de video comprimido estandar VCD.
El formato estandar de video fue llamado AVI (Archivo de Video), hace muchos aos. Sin embargo, este formato tiene la desventaja que es muy grande (unos 5 minutos de video facilmente podrian ser 50MB). Por lo tanto se busco formas de comprimir el video con buena calidad. Hay muchos formatos.
El primero de ellos fue el MPG (que es como JPG para las imgenes), pero hay formato de REAL PLAYER (.rm) o de QuickTime (.qt). El formato de DVD (.vob), Windows Media (.wmv) o recientemente el formato para alta calidad (792).
Pero ninguno de estos formatos nos sirve para publicar en internet, ya que son formatos que tienen gran tamao aun comprimidos. Ademas, todos estos formatos son para un reproductor en particular y tienen que estar generalmente completos para verse.
El formato ideal para prensentar videos por internet es FLV o en su caso SWF. Ya que dichos formatos basados en FLASH son streaming. Streaming significa que puede irse viendo el video mientras se esta descargando. Esto hace que los videos de Youtube se vean poco a poco y si tenemos buenca conexin, casi ininterrumpidamente como si se hubieran bajado completamente.
Entonces, las consideraciones generales son:
1. Tomar un video en un formato estandar como MPG (si nuestra camara de video o fotos no tiene este formato estandar y posee uno propio, deberemos convetir primero este video a formato estandar) 2. Si el video tiene un formato no estandar, debemos usar un programa de conversion primero 3. Usar un programa de conversion de video a formato FLASH FLV o en su caso SWF. [ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 3
4. O tener una cuenta en YouTube, Vimeo o similar para subir el video, que el portal lo convierta y luego obtener el enlace del mismo.
Insertar video en modo estandar.
En primer lugar veamos como insertamos un video de manera estandar. Nuestro portal tiene 2 editores de contenido: TinyMCE y Xstandard Lite. A estos se le puede sumar el JCE por parte del desarrollador ya que este ultimo tiene mas opciones de edicion.
Sin embargo, este editor JCE no tiene un boton para insertar videos, asi que lo primero es asegurarnos que editor estamos utilizando. Para ello, vamos al menu superior de nuestro panel
Y seleccionamos CONFIGURACION GLOBAL. Nos aparecera la siguiente pantalla:
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 4
De la cual debemos seleccionar el TINYMCE 2.0. Guardar los cambios e ir a nuestro articulo donde pondremos el video. Entramos a el y veremos que nuestro editor cambio un poco con iconos diferentes.
Debemos seleccionar el icono de film (amarillo) para insertar el medio. Se abrira la siguiente ventana:
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 5
Inmediatamente vemos que nos pregunta el TIPO de archivo de video que pondremos, el nombre o ubicacin y las dimensiones por si queremos redimensionar. El tipo de archivo sera el determinante y mas importante:
Aqu nos indica que podemos usar FLASH, QUICKTIME, SHOCKWAVE, WINDOWS MEDIA O REAL MEDIA. Traducido nos quedan las extensiones (FLV, QT, SWF, WMV, RM). Despues nos pedira la ruta del archivo y tenemos que teclearla complentamente comenzando con HTTP:// [ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 6
Si el archivo ya lo hemos subido a traves de nuestro cliente FTP a una de las carpetas, vamos a poner toda la ruta como sigue:
(NOTA: La direccion arriba es un ejemplo y no existe dicha direccion).
Automaticamente al pasar a los otros campos debemos ver la imagen previa del video. Si queremos mostrar un video de YOUTUBE, debemos anotar la direccion segn la pagina:
Aqu estamos viendo la direccion que nos proporciona Youtube, automaticamente nos da el tamao y nos da un preview del video. Lo que resta es pulsar el boton INSERTAR.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 7
Vemos que se ha insertado un recuadro de color amarillo indicandonos la posicion del video. Ahora grabamos y vamos a verlo en nuestro sitio.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 8
Y asi aparece en nuestra pagina publicada y a la vista de nuestros visitantes. Aqu vemos que el video se puede ejecutar pulsando sobre el.
** ACTUALIZACION ** Debido a los cambios tecnolgicos actuales, la plataforma de Youtube ha cambiado el formato de sus videos de flash a HTML5. Esto, con el fin de poder ser presentados en los diferentes dispositivos moviles. Sin embargo, la plataforma Joomla con su editor por defecto, no soporta el nuevo URL que provee Youtube. As que si copiamos el URL que viene por defecto en Youtube, no nos mostrar ningn video.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 9
Por lo tanto, para poder incrustar un video de YouTube, necesitamos seleccionar lo siguiente. Primeramente, ir a la parte inferior del video, donde esta COMPARTIR
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 10
Despus de ah, tenemos que seleccionar la opcin INSERTAR
Y debemos marcar la ultima casilla que indica UTILIZAR CODIGO DE INSERCION ANTIGUO
Y este codigo es el que pegaremos en la cajita de video en la pestaa de fuente, as:
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 11
Y a continuacin damos click en INSERTAR
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 12
Aparentemente no hizo nada, mas que ponernos un recuadro amarillo. Si damos un click en el botn de insercin de media veremos lo siguiente:
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 13
Ahora si nos pone la imagen del video y el codigo antiguo en el URL. Simplemente cerramos la ventana y grabamos nuestro artculo. Veamos el resultado
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 14
Sin embargo, esto tiene la desventaja que presentar el video en formato Flash. Que no ser apto para dispositivos moviles como tabletas o smartphones.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 15
Insertar video usando el complemento ALL VIDEO RELOADER
Otra forma de insertar videos comodamente es usar el complemento ALL VIDEO RELOADER que el desarrollador haya puesto en su sitio web. Cmo nos damos cuenta si lo tenemos? Al escribir o editar nuestro articulo, veremos un boton en la parte inferior del mismo para insertar el video que queramos.
NOTA: Este complemento funciona para las plataformas Joomla 1.5, si su versin de plataforma es 2.5 o superior este complemento no funcionar
Editemos de nuevo nuestro articulo, vayamos hasta el final del mismo, y pulsemos el boton AVR MEDIA. Aparecera la siguiente pantalla:
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 16
Esta es una ventana flotante que nos pregunta si insertaremos un video remoto o un video local (grabado en el mismo lugar de nuestro servidor).
Vayamos a la pestaa de LOCAL MEDIA
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 17
Lo primero es saber el archivo de video que queremos, esto se logra dando un click en la caja de despliegue MULTIMEDIA, ya que contendra los videos que hemos subido a la carpeta de AVR expresamente.
Al seleccionar uno automaticamente detectara el tipo de archivo que se trate de la siguiente opcion.
Qu otros tipos de formatos soporta?
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 18
Bastantes mas que la insercion estandar. Sin embargo, los videos deben estar en la carpeta correspondiente. Ahora solo nos falta pulsar en INSERTAR.
Y vemos que contrariamente a como se puso de manera estandar, aqu solamente nos pone un texto para insertar el video.
Ahora queremos insertar otro video de youtube. Volvemos a pulsar el boton AVR MEDIA y seleccionamos REMOTE MEDIA. Pondremos el enlace en la primera opcion
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 19
Y automaticamente nos identificara al proveedor, su id, tamao y pondra la etiqueta correspondiente. Pulsamos sobre INSERT.
Y ahora vemos que nos agrego la etiqueta de youtube. Grabamos y vamos a ver como queda publicado.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 20
Como podemos apreciar, aunque en el primero tenemos un recuadro en nuestro editor y solo etiquetas en los segundo y tercero, al publicar aparecen correctamente, tanto local como remoto.
Sin embargo, estos no tienen efectos como las imgenes en lightbox. [ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 21
Insertar videos con ALL VIDEOS
La nueva versin de AllVideos, soporta Joomla 2.5 y 3.x. Aunque tiene por defecto que no cuenta con un botn para el editor. Si tenemos instalado el editor JCE, entonces si es posible que cuente con un botn para facilitar la tarea.
Sin embargo, es posible poner los videos de una manera muy sencilla. Cuando encontremos el video que queramos insertar, por ejemplo: https://www.youtube.com/watch?v=vTSMO7T3nSw
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 22
Cuando vamos a la seccion de COMPARTIR, veremos en enlace:
http://youtu.be/vTSMO7T3nSw
Cuando estemos en el artculo debemos poner:
{youtube}vTSMO7T3nSw{/youtube}
Donde solamente, ponderemos el ID del video sin la direccin completa.
As, nuestro artculo queda de la manera siguiente:
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 23
Insertar video en galerias de videos
En otras ocasiones necesitamos hacer galerias de videos, es decir, una pagina donde solamente se vean videos y el usuario pueda seleccionar que escoger. Para esto necesitamos un complementos que nos ayude a administrar nuestros videos.
Lea la leccion 19 de la PARTE III para mas informacion.
Insertar video con efecto lightbox
Queremos que nuestro video se muestre en una caja de lightbox como en las imgenes?
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 24
Aqu necesitamos usar otro complemente llamado ROCKET. Este complemento forma parte de uno mas extenso para mostrar tambien efectos de lightbox en las imgenes. Sin embargo, nos concretaremos al video en esta ocasin. El primer paso es saber si lo tenemos instalado si el desarrollador lo ha considerado asi.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 12 Como agregar videos al contenido Pgina 25
Como siempre, podemos ver en el menu de EXTENSIONES, y GESTOR DE PLUGINS si tenemos instalado este complemento.
Ahora, para usarlo, vamos al articulo donde queremos mostrar el video:
E insertamos las etiquetas correspondientes:
{rokbox title=|RocketTheme :: Del Curso de Vialidad| size=|640 400| text=|Haga Click aqui para ver un video de lo que hacen los guardias|}images/stories/democapacita.swf{/rokbox}
Y tenemos que indicar la ruta de ubicacin en donde tenemos nuestro video. En este caso, IMAGES/STORIES/.