Publicaciones etiquetadas ‘oEmbeb’

Incrustar fotos y vídeos alojados en Flickr con el método oEmbed en tu blog

Escrito por eco escuela 2.0 el . Posteado en Tema 3: Incrustar contenido multimedia

La información de espacio de almacenamiento disponible para el blog de Centro, como la cuota utilizada hasta el momento, se puede consultar a través de la pestaña “Escritorio” de tu panel de administración del blog. Por defecto, los blogs de los Centros tienen 650Mb para almacenar sus imágenes y documentos. Pero si abusamos en subir a la galería multimedia fotos generadas con cámaras y teléfonos de última generación (que generan archivos de fotos a alta resolución) o documentos no optimizados en su tamaño, este espacio mermará muy rápidamente.

12-03-2014 12-20-40

Una solución podría ser utilizar un servicio de almacenamiento de fotos y vídeos externo que nos parezca de confianza. Este servicio podría ser un clásico y pionero como Flickr. Vamos a ver como insertar contenido multimedia, subido previamente, desde Flickr en tu blog, ahorrando así en el espacio de tu cuota de almacenamiento del blog.

Ten en cuenta que si optas por almacenamientos externos, estarás alojando contenido en servidores ajenos a la Consejería de Educación, Universidades y Sostenibilidad, por lo que se hace muy importante leer y entender los términos y condiciones de aceptación en el momento del registro de una cuenta, ya sea en flickr, Google (para los servicios de Youtube o Picasa), etc.

Podemos crear una cuenta en Flickr para alojar nuestros propias imágenes y/o vídeos para, posteriormente, incrustarlos en nuestro blog (una salida del colegio a una exposición, una excursión, un acontecimiento del Centro, etc.). También podemos incrustar imágenes de otros usuarios. En este tutorial no vamos a explicar como dar de alta una cuenta de usuario en Flickr, ni tampoco como subir imágenes y crear diferentes agrupaciones (llamadas galerías), en nuestra cuenta.

Mediante el sencillo método oEmbed podemos insertar imágenes y vídeos por separados, o incluso galerías, como veremos a continuación.

Incrustar una fotografía alojada en Flickr

Debes de localizar la foto a través del navegador de Internet, copias la URL y la pegas en la entrada de tu blog, donde quieras insertar la foto de Flickr, en una sola línea y sin hipervínculos (si copias la URL con Google Chome o internet explorer, al pegarlo en tu entrada, este te genera un hipervínculo).

Por ejemplo

http://www.flickr.com/photos/13037909@N06/3012917281/in/set-72157608769706803/

Daría el siguiente resultado en la entrada del blog:

P2230188

Si no ves nada revisa el código insertado en la vista HTML de tu editor de texto en la entrada, , y elimina todo código que se encuentre antes y después de la URL que pegaste, por ejemplo:

<a href=”http://www.flickr.com/photos/13037909@N06/3012917281/in/set-72157608769706803/”>http://www.flickr.com/photos/13037909@N06/3012917281/in/set-72157608769706803/</a>

Pegamos desde Chrome y nos generó un hipervínculo. Lo solucionamos quitando la etiqueta de enlace y su cierre (todo lo que está en rojo), y dejamos la URL de la foto y/o vídeo en una sóla línea y sin hipervínculos.

También podemos encontrarnos con lo siguiente:

<p>http://www.flickr.com/photos/13037909@N06/3012917281/in/set-72157608769706803/</p>

Aquí, en la vista HTML de la entrada, eliminamos la etiqueta de párrafo y su cierre.

Incrustar un vídeo alojado en Flickr

En método sería el mismo. Veamos el ejemplo de un vídeo. Debes de localizar el vídeo a través del navegador de Internet, copias la URL y la pegas en la entrada de tu blog, donde quieras insertar el vídeo de Flickr, en una sola línea y sin hipervínculos.

Por ejemplo

http://www.flickr.com/photos/13037909@N06/6992179234/in/photostream

Daría el siguiente resultado en la entrada del blog:

Si no ves nada revisa el código insertado en la vista HTML de tu editor de texto en la entrada, , y elimina todo código que se encuentre antes y después de la URL que pegaste, siguiendo los ejemplos que pusimos en el apartado anterior de incrustar fotografías.

Incrustar una Galería de fotos y/o vídeos alojadas en Flickr

Primeramente, después de subir las fotos y/o vídeos a tu cuenta flickr, debes agruparlas en una galería a través de las opciones que te proporciona el servicio de este repositorio de imágenes y vídeos online.

Para publicar la galería en tu blog, localiza la galería y haz clic para acceder a ella:

Una vez en ella, localiza el enlace que abra la presentación a pantalla completa, y pulsa sobre el mismo:

Una vez que hayas accedido al “show” de la presentación, copias la URL y la pegas en la entrada de tu blog, donde quieras insertar la galería, en una sola línea y sin hipervínculos.

Por ejemplo

http://www.flickr.com/photos/13037909@N06/sets/72157629590404748/show/

Daría el siguiente resultado en la entrada del blog:

Si no ves nada revisa el código insertado en la vista HTML de tu editor de texto en la entrada, 12-03-2014 10-29-02, y elimina todo código que se encuentre antes y después de la URL que pegaste, siguiendo los ejemplos que pusimos en el apartado anterior de incrustar fotografías.

Insertar archivos de sonido en nuestro blog

Escrito por eco escuela 2.0 el . Posteado en Tema 3: Incrustar contenido multimedia

050412_1215_Incrustaroe59.png

Incrustar un documento sonoro subido a nuestra galería multimedia.

Insertar un archivo *.mp3 subiéndolo a librería multimedia de nuestro blog:

Subir el archivo sonoro a nuestro blog y situar un enlace al mismo en una entrada.

  • Buscaremos el archivo en nuestro ordenador. Para crear o transformar archivos de sonido podemos ayudarnos de un fantástico programa que se encuentra instalado en todos los ordenadores distribuidos por la Consejería como es Audacity.
  • En el menú lateral izquierda del Escritorio del panel de administración de nuestro blog en WordPress elegiremos la opción Entradas → Añadir nueva.
    12-03-2014 10-32-17
  • Introducimos un título y un texto.

  • pulsando sobre el botón “Añadir objeto”  12-03-2014 11-01-41, localizamos el archivo sonoro en nuestro equipo y arrastramos a la zona de subida de archivos. También podremos utilizar el botón de Elegir Archivos y explorar de forma tradicional.
    12-03-2014 10-35-42
  • Cuando se produce con éxito la subida en la parte inferior de este panel se muestran los datos del archivo subido. Introduce un título significativo al documento. Por ejemplo: “IES Los Cardones”.
    12-03-2014 10-40-34
  • Luego, en la zona “AJUSTES DE LA PANTALLA DE ADJUNTOS” elegimos la opción”Enlace al archivo de medios” y pulsaremos sobre “Insertar en la entrada” :
    12-03-2014 10-45-20
  • De regreso al editor de la entrada veremos que se ha insertado un enlace con el título al archivo que hemos subido a nuestra librería.

  • Para terminar pulsa en el botón Publicar.

  • Para visualizar el aspecto del artículo haz clic en el botón Ver entrada. El archivo sonoro es un enlace que se abrirá en otra página cuando hagamos clic sobre el enlace.

Subir el archivo sonoro a nuestro blog y reproducirlo en la propia entrada.

  • Buscaremos el archivo en nuestro ordenador pulsando sobre el botón “Añadir objeto” y seguimos los pasos explicados anteriormente.
  • Luego, en la zona “AJUSTES DE LA PANTALLA DE ADJUNTOS” elegimos la opción”Enlace al archivo de medios” y seleccionaremos la URL del enlace y haremos clic derecho para elegir la opción Copiar.
    12-03-2014 10-49-36
  • Para cerrar este panel haz clic fuera de este panel o en el aspa “x” de la esquina superior derecha.
  • Regresaremos al editor de la entrada y pegaremos la URL en una línea. Nos fijaremos de que está en una sola línea y de que no tiene ningún hipervínculo.

  • Para terminar pulsa en el botón Publicar.

  • Para visualizar el aspecto de la entrada haremos clic en el botón “Ver entrada”.

Subir el archivo sonoro a nuestro blog y reproducirlo en la propia entrada.

  • Buscaremos el archivo en nuestro ordenador pulsando sobre el botón “Añadir objeto” y seguimos los pasos explicados anteriormente. En la zona “AJUSTES DE LA PANTALLA DE ADJUNTOS” elegimos la opción”Incrustar reproductor de medios”  y pulsaremos sobre “Insertar en la entrada” :
    12-03-2014 11-04-07
  • Para terminar pulsa en el botón Publicar.
  • Para visualizar el aspecto de la entrada haremos clic en el botón “Ver entrada”.

Podcasting

El podcasting consiste en la distribución de archivos
multimedia (normalmente audio o vídeo, que puede incluir texto como subtítulos y notas) mediante un sistema de redifusión (RSS) que permita suscribirse y usar un programa que lo descarga para que el usuario lo escuche en el momento que quiera. No es necesario estar suscrito para descargarlos.

Un podcast se asemeja a una suscripción a un blog hablado en la que recibimos los programas a través de Internet. También una ventaja del podcast es la posibilidad de escuchar en lugares sin cobertura.

Una de las funcionalidades que nos ofrece el blog es la facilidad para incrustar estos archivos de sonido o podcast que se comparten en la nube y que se pueden escuchar o ver desde la página web en la que han sido colocados. Blogs como WordPress y otros permiten realizar podcasting con el uso de herramientas gratuitas (plug-ins), como WordTube o Podpress.

Como hemos visto sería posible almacenarlos en el WordPress que nos ofrece Blog de los Centros, sin embargo, no parece una opción muy aconsejable, pues además de la complicación a la hora de crearlos habría que sumar la de los problemas que pueden surgir para alojar estos archivos tan grandes y que saturan tanto el ancho de banda.

Afortunadamente existen opciones de alojamiento especializadas en podcasting que nos ofrecen servicios gratuitos de alojamiento: Archive.org; Blip.tv; Cadpost; Podomatic; Poderato; divShare; ivoox; livestream

Incrustar un podcasting en una entrada

Si lo que queremos es incrustar un podcast que esté ubicado en algún alojamiento de la Web 2.0, seguiremos los pasos que hemos visto para incrustar vídeos o presentaciones. Es necesario comprobar que la URL de la herramienta está incluida en el listado de sitios de confianza para WordPress.

  • Seleccionaremos el podcast en el servicio donde lo hemos subido o localizado. En el ejemplo utilizaremos divShare.

  • Una vez lo hemos seleccionado nos permite descargarlo o embeberlo. Seleccionamos “Embed”:

  • Se abrirá una pantalla en la que podremos seleccionar el estilo de la barra y copiar el código para incrustar en nuestra entrada:

Creación de una audioguía

Las audioguías se están convirtiendo en un interesante recurso para colocar información sonora sobre lugares de interés y localizarlas geográficamente. Esto las convierte en un interesante recurso para utilizar con nuestro alumnado, grabar documentos, colocarlos en la nube y descargarlos en diferentes soportes (teléfono móvil, mp3,…) para ser escuchados durante una visita o en otro momento.

Woices es un portal en dónde podremos encontrar y crear audioguías localizadas geográficamente sobre Google maps, de modo que podremos conocer de primera mano las opiniones y recomendaciones de otros usuarios de viva voz.

Sólo tendremos que registrarnos si queremos crear nuestros propio audio, sino bastará con entrar a curiosear.

Como hemos visto hasta ahora la forma de incrustar este tipo de documentos en nuestro blog resulta muy sencilla. Tan solo tendremos que localizar la audioguía, copiar el código, pegarlo en nuestra entrada de blog y ya lo hemos incrustado el reproductor en nuestro blog.

Incrustar un e-book realizado con Issuu

Escrito por eco escuela 2.0 el . Posteado en Tema 3: Incrustar contenido multimedia

050412_1215_Incrustaroe36.png

Es una atractiva herramienta que nos permite compartir documentos en pdf y presentarlos de manera muy atractiva en forma de libro o cuento.

A continuación mostramos un ejemplo con la guía del profesorado clIC escuela 2.0, elaborado con un procesador de texto y guardado en formato pdf, para luego subirlo a Issuu. Para publicar este documento embebido en nuestro blog de centro (wordpress), debemos de seguir los siguientes pasos:

      • Necesitaremos una dirección con un documento en Issuu. Para realizar el ejemplo utilizaremos la siguiente dirección.

        http://issuu.com/ecoescuela20/docs/guiaprofescuela20

      • Crearemos una entrada como hacemos habitualmente y le pondremos un título y algún texto descriptivo.

    • Iremos a la página en donde está el documento que nos interesa insertar en nuestro blog y copiamos la dirección URL.

    • Regresaremos al editor de la entrada. Pegaremos la dirección URL en el lugar del editor visual de la entrada en donde nos interesa que se visualice el documento. Nos fijaremos de que está en una línea sola y de que no tiene ningún hipervínculo. La dirección sería algo parecido a esto:

    • Para terminar pulsa en el botón Publicar.

      • Para visualizar el aspecto de la entrada haremos clic en el botón “Ver entrada”.

Incrustar un archivo pdf mediante el sistema oEmbeb

Escrito por eco escuela 2.0 el . Posteado en Tema 3: Incrustar contenido multimedia

050412_1215_Incrustaroe28.png

Insertar un archivo *.pdf subiéndolo a librería multimedia de nuestro blog:

  • Subir el archivo a nuestro blog y situar un enlace al mismo en una entrada.
    • Buscaremos el archivo en nuestro ordenador. Los procesadores de texto y los programas de presentaciones están incorporando la funcionalidad de guardar los archivos en formato .pdf.
    • En el menú lateral izquierda del Escritorio del panel de administración de nuestro blog en WordPress elegiremos la opción Entradas → Añadir nueva
      12-03-2014 10-32-17
  • Introducimos un título y un texto.
  • Pulsamos sobre Subir/Insertar, localizamos el archivo en nuestro equipo y arrastramos a la zona de subida de archivos. También podremos utilizar el botón de Elegir Archivos y explorar de forma tradicional [Se permite subir distintos tipos de archivos: imágenes (*.jpg/*.jpeg, *.png y *.gif), documentos PDF (*.pdf), documentos de Word (*.doc y *.docx), presentaciones de Powerpoint (*.ppt, *.pptx, *.pps y *.ppsx), hojas de Exce (*.xls, *.xlsx) y documentos de OpenOffice (*.odt)].
    27-02-2014 14-32-05
  • Cuando se produce con éxito la subida en la parte inferior de este panel se muestran los datos del archivo subido. Introduce un título significativo al documento. Por ejemplo: “Catálogo de Teleformación”. Luego pulsaremos sobre “Insertar en la entrada”:
    12-03-2014 9-37-17
  • De regreso al editor de la entrada veremos que se ha insertado un enlace con el título al archivo que hemos subido a nuestra librería.
  • Para terminar pulsa en el botón Publicar.

  • Para visualizar el aspecto del artículo haz clic en el botón Ver entrada.

  • Subir el archivo .pdf a nuestro blog y visualizarlo en la propia entrada.
    • Buscaremos el archivo en nuestro ordenador igual que hicimos anteriormente.
    • En el menú lateral izquierda del Escritorio del panel de administración de nuestro blog en WordPress elegiremos la opción Entradas à Añadir nueva
      12-03-2014 10-32-17
  • Introducimos un título y un texto.
  • Pulsamos sobre Subir/Insertar, localizamos el archivo en nuestro equipo y arrastramos a la zona de subida de archivos. También podremos utilizar el botón de Elegir Archivos y explorar de forma tradicional.
    27-02-2014 14-32-05
  • Cuando se produce con éxito la subida en la parte inferior de este panel se muestran los datos del archivo subido. Introduciremos los datos del archivo. Seleccionaremos la URL del enlace y haremos clic derecho para elegir la opción Copiar.
    12-03-2014 9-37-17
  • Para cerrar este panel haz clic en el aspa “x” de la esquina superior derecha o haz clic fuera de este panel.
  • Regresaremos al editor de la entrada y pegaremos la URL en una línea. Nos fijaremos de que está en una línea sola y de que no tiene ningún hipervínculo.
  • Para terminar pulsa en el botón Publicar.
  • Para visualizar el aspecto de la entrada haremos clic en el botón “Ver entrada”.

 Insertar un archivo *.pdf que se encuentre en otra página Web:

Si queremos embeber un documento pdf que ya está alojado en otro servidor o página de internet no haría falta subirlo a nuestra galería multimedia. Si tenemos la dirección URL del archivo WordPress hará el resto.

Para ello localizaremos el archivo pdf directamente en la web lo abriremos y copiaremos la dirección URL que aparece en el explorador. Luego la incrustaremos en la entrada que estamos creando a través del método oEmbed. Recordamos los pasos:

  • Crearemos una nueva entrada por el método que hemos practicado. Le pondremos un título y un texto explicativo.

  • Iremos a la página en donde está el documento que nos interesa insertar en nuestro blog y copiamos la dirección URL donde se encuentra el documento.

  • Regresaremos al editor de la entrada. Pegaremos la dirección URL en el lugar del editor visual de la entrada en donde nos interesa que se visualice el documento. Nos fijaremos de que está en una línea sola y de que no tiene ningún hipervínculo. La dirección sería algo parecido a esto:

  • Para terminar pulsa en el botón Publicar.

Para visualizar el aspecto de la entrada haremos clic en el botón “Ver entrada”.

Incrustar un vídeo con oEmbeb

Escrito por eco escuela 2.0 el . Posteado en Tema 3: Incrustar contenido multimedia

050412_1215_Incrustaroe9.png

Hemos visto que ahora puede resultar un poco más sencillo incrustar vídeos de YouTube en nuestro Blog de eco escuela 2.0. Todo lo que necesitamos hacer para integrarlo en una entrada o una página es escribir la dirección URL del vídeo en el editor de contenido de la entrada o la página. Asegurándonos de que la dirección está en una sola línea y de que no hemos creado un hipervínculo.

  • Primero localizaremos el vídeo en YouTube y copiamos la dirección URL que aparece en el explorador o también si buscamos el botón compartir que nos ofrece YouTube veremos que nos ofrece una dirección corta especial para este sistema de embebido.

  • Copiaremos la dirección al portapapeles (ctrl+c).
  • Pegaremos la dirección en el editor de texto de la entrada o de la página fijándonos de que está en una línea independiente (ctrl+v):

  • Para finalizar haremos clic sobre Publicar o sobre vista previa para ver el resultado.

Recordar que para que funcione debe de estar marcada la casilla de verificación “Auto-incrustados” casilla en el escritorio de WordPress: Ajustes > Multimedia.

Podemos optar por utilizar la visión HTML del editor de la entrada y pegar la dirección con el siguiente código que permite embeber controlando la altura y la anchura con la que se visualiza en vídeo.

Incrustar o embeber contenido (oEmbeb en WordPress)

Escrito por eco escuela 2.0 el . Posteado en Tema 3: Incrustar contenido multimedia

050412_1215_Incrustaroe1.png
Insertar código embebido (etiquetas object e iframe) en todos los blogs de ecoescuela

Ha sido abierta la funcionalidad de insertar código embebido (etiquetas object e iframe) en todos los blogs de ecoescuela. Esta posibilidad, que ya estaba operativa en blog de los Centros (edublogs), ahora se ha abierto para el blog del profesorado (ecoblog) y del aula (aulablog – próximamente disponibles).
Pero recuerden, sólo usuarios con perfil de administrador (cada uno de los profes en su propio blog personal) y los editores pueden embeber código en entradas, páginas y widgets de texto, tal como venía sucediendo en blogs/web de los Centros, el resto de usuarios (autores, y suscriptores) lo deben hacer por el método oembed).

¿Qué es oEmbeb?

oEmbeb es un sistema, integrado en WordPress, mediante el cual puedes visualizar contenido multimedia solo con añadir la URL en el editor de texto de WordPress.

Imagen sacada de: http://ayudawordpress.com/insertar-slideshare-con-oembed/

WordPress es una herramienta en constante evolución y en cada una de sus nuevas versiones incorpora mejoras que afectan tanto a la seguridad como a la ergonomía y facilidad de uso.

En la última versión de WordPress se ha desarrollado una nueva forma de incrustar vídeos, imágenes y otros contenidos en el blog que tratan de facilitarnos la tarea. Ahora ya no es necesario localizar el código de embeber contenido que se utilizaba en algunas de las herramientas de la Web 2.0 que nos permiten compartir contenido multimedia.

oEmbed

La inserción de contenidos en nuestro blog se ha tratado de simplificar, sobre todo, si se realiza con oEmbed, un protocolo para que el sitio A
(como tu Blog del profesorado o el blog de centro) haga una petición al sitio B
(como YouTube) para obtener el código HTML (la dirección URL) necesario para integrar el contenido del sitio A
(en este caso sería un vídeo) en el sitio B.

oEmbed fue diseñado para evitar el tener que copiar y pegar el código HTML del sitio de alojamiento de los medios de comunicación que deseamos incrustar y en lugar del mismo utilizar únicamente la dirección URL del sitio. Es compatible con vídeos, imágenes, texto, y mucho más.

¿Se puede usar cualquier tipo de dirección con el sistema oEmbeb?

Por defecto, no.

Su Blog del profesorado o blog del centro (WordPress) sólo reconocerá e integra aquellas URLs que coincidan con una lista blanca interna. Esto se hace así por motivos de seguridad.

¿Qué sitios puedo incrustar copiándola dirección?

Puede utilizar todos estos que pertenecen a la lista blanca:

¿Cómo puedo añadir soporte para más sitios web?

Para poder añadir soporte para un sitio web adicional que no se encuentra en la lista que hemos mencionado habría que revisar si el sitio es compatible con oEmbed o no. Si un sitio es compatible con oEmbed, para agregar el formato del sitio y la URL a la lista blanca interna, debe ponerse en contacto con los administradores de Blogs de los Centros a través e una incidencia a Cibercentro, para que estos lo estudien y registren.

  • A través de este método, ya se ha creado soporte para Issuu, SlideShare, Scribd y pdf. Pues de forma predeterminada, sólo se puede integrar en sitios web que se enumeran en la lista blanca interna. Esto es para evitar incrustación accidental desde sitios web maliciosos.

¿Cómo funciona oEmbeb?

Todo lo que se necesitamos hacer para integrar algún contenido multimedia en una entrada o una página es escribir la dirección URL en el editor de contenido de la entrada o página. Asegúrese de que la dirección está en una sola línea y no es un hipervínculo.

Por ejemplo: Para insertar un vídeo de YouTube con el editor visual pondríamos únicamente la dirección (ojo tiene que estar en una línea independiente y no puede estar centrado):

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

Su Blog (WordPress) de forma automática integrará en la noticia este vídeo que está alojado en YouTube cuando se visualiza la entrada. A continuación lo vemos en el ejemplo:

En caso de error: En caso de visualizar la notica y observar que no funciona el vídeo que acabos de embeber haremos varias revisiones rutinarias:

  • Que el código está escrito en una sola línea y no tiene ningún código delante o detrás que impida a WordPress reconocerlo, en caso de duda podemos cambiar la modo HTML y visualizarlo desde allí. En la imagen vemos algunos ejemplos de lo que nos puede pasar:

Podemos utilizar oEmbeb con la visión HTML

Para aquellos usuarios que se sientan más a gusto con el editor “Texto” 12-03-2014 10-29-02 pueden optar por utilizar la URL en el código abreviado . Se logrará el mismo efecto, pero no requiere la dirección que en una única línea ni la casilla de “Auto-incrustado” habilitada. También nos permite controlar las dimensiones y establecer un máximo (pero no fijo) ancho y alto. En el ejemplo siguiente veremos como se puede hacer:

Ajustando sólo anchura:


<

Ajustando la anchura y altura:

En los casos en que WordPress por algún motivo no puede integrar la URL obtendrá un hipervínculo a la dirección.

Barra amarilla corporativa del Gobierno de Canarias

© Gobierno de Canarias

A %d blogueros les gusta esto: