Inserción de código embebido

Transcripción

1 Insertar códigos embebidos html 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. En esta sección aprenderemos a: Insertar un documento (Scribd) Insertar una presentación (Slideshare) Insertar una colección de fotos (Flickr) Insertar un video (Youtube)

2 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 el documento que queramos insertar en nuestra web, haremos clic en la barra de herramientas inferior (esquina derecha), como vemos indicado en la imagen. Se nos mostrará la el siguiente cuadro:

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

4

5 INSERTAR PRESENTACIÓN (SLIDESHARE) Se inserta de forma análoga a como hemos hecho en el caso anterior. Buscaremos en la presentación que queramos insertar en nuestra web. 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: 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:

6

7 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 De entre los distintos criterios para realizar la búsqueda utilizaremos: Para asegurarnos que utilizamos imágenes de libre distribución, marcaremos la opción Creative Commons: Obtendremos las imágenes de la búsqueda. Seleccionaremos presentación:

8 En la barra de herramientas superior haremos clic en compartir, como se indica en la imagen. Se nos mostrará el siguiente cuadro: 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:

9

10 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 y buscaremos el video con el que queremos trabajar: Clicaremos en Insertar, como indica la imagen. Nos aparecerá el siguiente cuadro:

11 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:

12 Object 1 Este artículo está licenciado bajo Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License