sábado, 21 de abril de 2012

Vídeo en tu blog. Ejemplificación de integración del vídeo con JWPlayer utilizando una cuenta de DropBox.


Se trata de integrar un vídeo con JWPlayer en un artículo de Blogger.

Lo que se espera después de añadir el código embed que inserta el visor JWPlayer básico, el vídeo, así como la imagen de vista previa, todo ello alojado en una cuenta de Dropbox, es:



Una opción para evitar las limitaciones de la subida directa a nuestro Blog de un vídeo es integrar vídeos *.FLV utilizando un reproductor JW Player.

Se ejemplifica cómo integrar vídeos *.FLV en esta entrada del blog utilizando el reproductor JW Player, utilizando una cuenta de DropBox.

Se trata de un visor *.SWF diseñado con tecnología Flash. Para su correcta visualización es necesario que el navegador web cliente disponga del plugin de Flash Player.

El archivo que se corresponde con el visor jwplayer.swf necesario para este ejemplo, lo tienes en el zip de este enlace jwplayer.zip [3,6 MB].
Los otros 3 archivos son de ejemplo. Puedes bajar el archivo comprimido, y descomprimir el mismo en una carpeta.

¡comprueba lo que sucede al hacer clic en index.htm!






El visor y los archivos de vídeo y captura de imagen para el ejemplo de esta entrada y distintos a los anteriores, han sido subidos a Dropbox.




El código embed que se necesita se corresponde con este patrón
<embed src="jwplayer.swf" width="384" height="312" allowfullscreen="true"     flashvars="file=video.flv&image=captura.jpg"> </embed>


<embed src="jwplayer.swf" width="384" height="312" allowfullscreen="true"     flashvars="file=video.flv&image=captura.jpg"> </embed>

Se necesita sustituir el visor jwplayer, el vídeo y la captura por los nuevos archivos. Nosotros ya los tenemos en nuestra cuenta de Drupbox, pero... ¿Qué proceso se ha seguido?

El archivo de vídeo lo hemos conseguido visitando el Banco de recursos multimedia del INTEF: http://recursostic.educacion.es/bancoimagenes/web/.

Utilizamos el buscador con el término “estructuras” para localizar y descargar un vídeo de este repositorio.



De los vídeos mostrados nos interesa el AVI de título "Las estructuras artificiales".
Clic en Descargar archivo.





El vídeo obtenido en el Banco Multimedia del INTEF tiene un formato de archivo AVI-XviD y ocupa 71836 KB. Lo convertimos al formato FLV (Flash Vídeo) utilizando el programa WinFF.



En el nuevo formato FLV, el tamaño se ha reducido a 8952 KB.




Ahora necesitamos obtener la imagen de captura. Abre el reproductor VLC Media Player y en Preferencias > Preferencias de vídeo, define JPG como el formato de archivo de salida de las capturas de pantalla, así como el lugar donde se guarda la captura. Cierre el reproductor y vuelve a abrirlo. A continuación reproduce el vídeo FLV y realiza una captura de pantalla en un archivo JPG.


A esta imagen se le puede añadir un texto con un procesador de imágenes:



Sube a tu cuenta en Dropbox la imagen capturada JPG, el vídeo FLV obtenido y el reproductor JW Player.
En nuestra cuenta de DropBox, Carpeta Public, se ha creado una nueva carpeta con el nombre VideoEstructurasArtificiales. Dentro de esa carpeta subimos los archivos. 
También podemos subir los tres archivos por ejemplo a Google Sites.

Tenemos un ejemplo detallado en esta entrada: Publicar un vídeo con JWPlayer en Blogger. Ejemplificación.






¿Recuerdas el código a utilizar en la pestaña HTML de Blogger?



<embed src="jwplayer.swf" width="384" height="312" allowfullscreen="true"     flashvars="file=video.flv&image=captura.jpg"> </embed>



Desde el explorador de archivos del sistema Windows haz clic derecho sobre cada archivo subido para elegir DropBox > Copiar enlace público. Si utilizas el interfaz web de Dropbox, haz clic sobre el archivo y elige Copiar enlace público.

En nuestro caso:

http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/jwplayer.swf

http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/LasEstructurasArtificiales.flv

http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/capturaLasEstructurasArtificialesRotulado.jpg



En el código embed sustituye los nombres de los archivos por las URLs obtenidas para cada uno de ellos alojados en la cuenta de DropBox.


En este ejemplo se sustituyo el de jwplayer.swf

<embed src="http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/jwplayer.swf" width="384" height="312" allowfullscreen="true"     flashvars="file=video.flv&image=captura.jpg"> </embed>



En este ejemplo se añade el de video.flv al anterior jwplayer.swf


<embed src="http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/jwplayer.swf" width="384" height="312" allowfullscreen="true"     flashvars="file=http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/LasEstructurasArtificiales.flv&image=captura.jpg"> </embed>



y los tres sustituidos sustituyendo captura.jpg que es el que faltaba.


<embed src="http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/jwplayer.swf" width="384" height="312" allowfullscreen="true"     flashvars="file=http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/LasEstructurasArtificiales.flv&image=http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/capturaLasEstructurasArtificialesRotulado.jpg"> </embed>



Los pasos a seguir para insertar el código en la entrada de Blogger:

  1. Crea una entrada en tu blog con un título alusivo y un breve texto. Como complemento puedes añadirle las etiquetas:
  2. Clic en el botón Crear entrada nueva para acceder directamente al interfaz de edición del blog donde deseas publicar el artículo.
  3. Teclea un título. En mi caso: Vídeo en tu blog. Ejemplificación de integración del vídeo con JWPlayer utilizando una cuenta de DropBox.

  1. Clic en botón HTML para mostrar el código HTML del artículo.
  2. Añade a ella el código que inserta el visor, el vídeo, y la captura que ha de servir como imagen de vista previa. Todos ellos alojados en tu cuenta de Dropbox:
<embed src="http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/jwplayer.swf" width="384" height="312" allowfullscreen="true"     flashvars="file=http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/LasEstructurasArtificiales.flv&image=http://dl.dropbox.com/u/74269054/VideoEstructurasArtificiales/capturaLasEstructurasArtificialesRotulado.jpg"> </embed>


  1. Copia el código embed. Clic derecho sobre el código HTML del artículo y selecciona Pegar. 


  1. Para terminar pulsa en el botón Publicar y a continuación haz clic en el enlace Ver blog para ver el resultado final. 







Jose Ángel Laredo

lunes, 16 de abril de 2012

Publicar una presentación de Picasa en Blogger: Ejemplificación


Se describe una ejemplificación de como publicar una presentación de Picasa en Blogger.
  1. Nos autentificamos en Picasa Web: http://picasaweb.google.com 
  2. Se mostrará la pestaña Página Principal donde son accesibles los álbumes que tenemos subidos al servidor. Clic sobre el álbum Telefonía ICT para abrirlo. 
 
Mis álbumes recientes. Publico en la red
El candado indica que "solo tu" puedes acceder al álbum. Tenemos que convertirlo en público en la Web. Observe el cambio del candado por otro icono

Mis álbumes recientes. Publico en la red
Es posible compartir tus fotos con todo el mundo, sólo con los amigos que desees o mantenerlas en privado. Picasa incorpora la posibilidad de asociar una licencia Creative Commons a cada foto o álbum indicando las condiciones de uso.



  1. En la columna derecha, haz clic en Enlazar a este álbum. Se mostrará los enlaces para enviar por correo electrónico o para embeber en tu blog una imagen con un enlace al álbum en Picasa Web. 
Se describe una ejemplificación de como publicar una presentación de Picasa en Blogger.
Clic en el enlace Incrustar proyección de diapositivas.



  1. Clic en el enlace Incrustar proyección de diapositivas.
    Se muestra el cuadro de diálogo Crear una presentación de diapositivas… [Crea una presentación de diapositivas portátil para tu sitio web, tu blog, MySpace, etc]. 
  2. Elige como tamaño de la presentación por ejemplo Grande 400 px. y marca las opciones Mostrar títulos y Reproducir automáticamente. 
  3. Selecciona el código HTML mediante clic derecho, elegir seleccionar todo y copiar.
 
Se describe una ejemplificación de como publicar una presentación de Picasa en Blogger.
cuadro de diálogo Crear una presentación de diapositivas…

  1. Accede a Blogger y desde el Escritorio haz clic en el botón Crear entrada nueva. 
  2. Añade un título. En mi ejemplo: Publicar una presentación de Picasa en Blogger: Ejemplificación.
  3. En el editor haz clic en el pestaña HTML y pega el código embed copiado anteriormente.
<embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="400" height="267" flashvars="host=picasaweb.google.com&captions=1&hl=es&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Flaredomw20%2Falbumid%2F5730427102159769057%3Falt%3Drss%26kind%3Dphoto%26hl%3Des" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. Clic en el botón Publicar.
  2. Pulsa en el botón Ver blog para comprobar cómo se visualiza la presentación.




Jose Ángel Laredo

Telefonía ICT

viernes, 13 de abril de 2012

Publicar una imagen de Picasa en Blogger. Ejemplificación


Nuestra imagen a publicar en Blogger se encuentra en nuestro álbum Web de Picasa. (http://picasaweb.google.com)


Al acceder autentificado se mostrará la página Mis álbumes recientes donde son accesibles los álbumes que tenemos subidos al servidor. En el ejemplo, para abrir el álbum Telefonía ICT, que hemos creado con anterioridad, hacemos clic sobre el.


Es posible compartir tus fotos con todo el mundo, sólo con los amigos que desees o mantenerlas en privado. Picasa incorpora la posibilidad de asociar una licencia Creative Commons a cada foto o álbum indicando las condiciones de uso.


Selecciona una imagen del álbum haciendo clic sobre ella para visualizarla en solitario. Por ejemplo, sobre las manos manejado una herramienta.




Se puede obtener la URL absoluta de la fotografía mediante clic derecho sobre la imagen y seleccionando la opción Copiar la ruta de la imagen, en el portapapeles.
Quizás esta imagen (800×600 píxeles – 218 KB), sea grande para incrustar en un artículo de tu blog, pero blogger te permite ajustar el tamaño de la misma, (pequeño, mediano, grande, extra grande, tamaño original)

Ejemplo de publicación en diferentes tamaños:


Pequeño




Mediano




Grande




¿Como se han insertado las imágenes anteriores en la entrada de Blogger?


  1. Desde el Escritorio de Blogger haz clic en el botón Crear entrada nueva.
  2. Añade un título: En mi ejemplo "Publicar una imagen de Picasa en Blogger. Ejemplificación".
  3. En el editor de artículos pulsa en el botón Inserta imagen.
  4. En el cuadro de diálogo haz clic en Desde una URL.
  5. Clic derecho sobre el cuadro de texto, pega la URL de la imagen aquí. Esta tarea pegará la URL absoluta de la imagen.
  6. Si tu URL es correcta, verás una vista previa aquí. Las imágenes grandes pueden tardar unos minutos en aparecer.
  7. Para insertar la imagen en el artículo pulsa en el botón inferior Añadir las imágenes seleccionadas.
  8. Clic en el botón Publicar.
  9. Para ver el aspecto del artículo haz clic en el botón Ver Blog.  



Otra posibilidad es insertar la imagen en el artículo mediante la opción Desde Álbumes Web de Picasa > Telefonía ICT






Resultado esperado: Inserción de una imagen en tu blog. Localizada la fotografía relacionada con el tema que nos interesa. En este caso, la imagen de la cámara digital alojada en el servicios Web 2.0: Picasa Álbum. Elaboramos el artículo conteniendo título, una pequeña descripción textual y la inserción de esta imagen en la entrada. 

Construcción de una pequeña instalación de telefonía con cables de pares. Puedes subir varios archivos a la vez. Su formato debe ser JPG, GIF o PNG.
Puedes subir varios archivos a la vez. Su formato debe ser JPG, GIF o PNG.




Debido a la constante evolución de las telecomunicaciones, surge la necesidad de elaborar normativas que regulen la infraestructura necesaria que permita un uso racional con la versatilidad necesaria que facilite el uso de las mismas sin realizar nuevas infraestructuras cada vez que aparece una mejora tecnológica. En este contexto los títulos de los ciclos formativos de la familia Electricidad/Electrónica contienen un módulo profesional dedicado a adquirir competencias profesionales para que el alumnado desarrolle su actividad en pequeñas y medianas empresas mayoritariamente privadas dedicadas al montaje y mantenimiento de infraestructuras de telecomunicación en edificios.


Jose Ángel Laredo







jueves, 12 de abril de 2012

Subir fotografías a Picasa Web. Ejemplificación

Procedimiento para subir fotos a tu cuenta de Picasa Web: http://picasaweb.google.com/


En este caso subimos todas las imágenes a un álbum independiente.
Clic en el botón Subir.
Introducimos el nombre o título del álbum. Por ejemplo: Telefonía ICT.




Seleccionar fotos de tu equipo. Haz clic en el botón Seleccionar fotos … En el cuadro de diálogo Carga de archivos localiza la carpeta que contiene las fotos. Haz clic en el primera imagen, mantén pulsada la tecla Mayus (Flecha arriba situada debajo del Bloq Mayus) y sin soltarla haz clic en la última imagen. De esta forma se seleccionan todas. Clic en el botón Abrir.



Clic en las imágenes para su ampliación
Tras unos instantes se completará la subida al servidor Picasa de las fotos elegidas. Se mostrarán en el panel del álbum. Clic en el botón Aceptar.
Clic en la pestaña página principal para regresar a la portada de Álbumes Web de Picasa. Observa que ahora aparece el álbum creado.





Al crear un nuevo álbum se define por defecto como privado, es decir, sólo el propietario [ Solo Tú ] puede acceder a sus fotografías. Para hacer público el álbum es necesario configurarlo expresamente. Clic sobre la portada del álbum y opción Acciones > Propiedades del álbum.


Cuando se configura la visibilidad Público en la Web en la entrada al álbum de la Página principal se muestra el correspondiente icono. 



Propiedades del álbum.
Permite modificar el título, fecha de creación, visualización pública o privada, etc... que se ha establecido al crear el álbum.
Tapa del álbum.
Ofrece la posibilidad de elegir la imagen que representará al álbum en el listado de álbumes. [seleccionado en la captura de imagen]
Mapa del álbum.
Se accede a un mapa Google donde es posible situar cada una de las fotos.
Títulos.
Si deseas modificar el título descriptivo que acompaña a cada imagen.





Tapa del álbum.
Ofrece la posibilidad de elegir la imagen que representará al álbum en el listado de álbumes. Se selecciona una imagen para la tapa. Observa la imagen elegida en la imagen y su representación en una imagen anterior. 


El proceso ha finalizado.
Clic en el botón Presentación de diapositivas para ver una proyección que muestra la secuencia de fotos contenidas en el álbum Telefonía ICT


Clic en la imagen para visualizar a tamaño original


Información obtenida del curso Multimedia y Web 2.0 edición 2012 del INTEF
Jose Ángel Laredo