Teoría

Inserción de código embebido

También tenemos la posibilidad de insertar presentaciones, documentos, álbumes de fotos,videos etc, creados en sitios de terceros como pueden ser Scribd, Slideshare, Flickr, Picassa, Youtube, etc.

Esto es posible porque el editor que utilizamos para crear contenido nos posibilita de trabajar con html, con lo que, copiando una pequeña porción de código html (código embebido) proporcionado por los sitios externos al portal, permite acceder a este tipo de recursos que mejoran notablemente nuestra web.


Código html

INSERTAR DOCUMENTO (SCRIBD)

Para insertar una presentación con este formato, lo único que tendremos que hacer será conseguir el código html de la misma para poderlo insertar en nuestro contenido.

Una vez hayamos localizado en http://es.scribd.com el documento que queramos insertar en nuestra web,

scribd.com

haremos clic en la barra de herramientas inferior (esquina derecha), como vemos indicado en la imagen.
Se nos mostrará la el siguiente cuadro:

Codigo embed

A continuación seleccionamos embed y se nos mostrará el siguiente cuadro, donde copiaremos el código html que necesitamos. Pincharemos en copy que se encuentra remarcado.

Codigo embed

Ahora lo único que nos queda es copiar este código embebido en el contenido que estamos desarrollando (recordad que antes de pegar hay que seleccionar en el editor la opción Fuente HTML) y guardarlo. La visualización es inmediata:

Resultado scribd


INSERTAR PRESENTACIÓN (SLIDESHARE)

Se inserta de forma análoga a como hemos hecho en el caso anterior. Buscaremos en www.slideshare.net la presentación que queramos insertar en nuestra web.

slideshare

Buscaremos el código embebido. En este caso en la barra de herramientas superior. (embed como vemos indicado en la imagen).
Se nos mostrará el siguiente cuadro:


slideshare

A continuación copiaremos el código html que necesitamos.
Ahora lo único que nos queda es copiar este código embebido en el contenido que estamos creando (recordad que antes de pegar hay que seleccionar en el editor la opción Fuente HTML) y guardarlo. La visualización es inmediata:

slideshare resultado

INSERTAR ALBUM DE FOTOS (FLICKR)

Ahora lo que pretendemos es insertar en nuestra web fotos que nos puedan ser de utilidad. Por ejemplo imaginemos que necesitamos mostrar fotos de las obras de Gaudí porque vamos a realizar una actividad extraescolar en la que visitaremos una de sus obras.

Para ello iremos a
http://www.flickr.com/search/advanced.
De entre los distintos criterios para realizar la búsqueda utilizaremos:

busqueda

Para asegurarnos que utilizamos imágenes de libre distribución, marcaremos la opción Creative Commons:


Creative commons

Obtendremos las imágenes de la búsqueda. Seleccionaremos presentación:

Resultados busqueda



En la barra de herramientas superior h
aremos clic en compartir, como se indica en la imagen.

Presentación Flickr

Se nos mostrará el siguiente cuadro:

Flickr embed

A continuación copiaremos el codigo html que necesitamos, seleccionando el texto que aparece en la caja de texto o clicando en Copiar en el portapapeles.

Ahora lo único que nos queda es copiar este código embebido en el contenido que estamos realizando (recordar que antes de pegar hay que seleccionar en el editor la opción
Fuente HTML) y guardarlo. La visualización es inmediata:

flickr contenido

INSERTAR UN VIDEO (YOUTUBE)

Ahora lo que pretendemos es insertar un video en nuestra web. Por ejemplo podemos acompañar las imágenes anteriores de Gaudí con un video.

Iremos a
http://www.youtube.com y buscaremos el video con el que queremos trabajar:

Video Youtube

Clicaremos en Insertar, como indica la imagen.
Nos aparecerá el siguiente cuadro:

Youtube embed

que nos permite personalizar el codigo html a pegar en nuestro contenido. Observad que podemos incluir videos relacionados, seleccionar el color de la barra de herramientas, definir el tamaño de la ventana del video, etc.

Una vez definido, copiaremos este código embebido en el contenido que estamos creando (recordar antes de pegar hay que seleccionar en el editor la opción Fuente HTML) y guardarlo. La visualización es inmediata:

Youtube contenido

Este artículo está licenciado bajo Creative Commons Attribution Non-commercial Share Alike 3.0 License

Formació del Professorat - CEFIRE