Termino esta serie de artículos sobre inserción de elementos tratando de dar opciones tanto para blogger como para otros sistemas de publicación (WordPress) o páginas web propias, tomando como origen otros sistemas de almacenamiento más allá de los servicios de Google.
<iframe>
La etiqueta <iframe>
permite insertar un documento HTML dentro de otro documento HTML. Un iframe
puede considerarse como un agujero que se abre en una página web y a través del cual se muestra otra página web. Esta etiqueta puede personalizarse mediante estos parámetros:
src = "url"
– URL del documento HTML que se visualiza en el iframeheight = "longitud"
– Altura que ocupará el iframe en el documento, en pixels o en %width = "longitud"
– Anchura que ocupará el iframe en el documento, en pixels o en %name = "texto"
– Nombre que identifica al iframelongdesc = "url"
– Dirección en la que puede encontrarse una descripción larga del contenido del iframescrolling = "yes", "no | auto"
– Indica si el iframe debe mostrar barras de scroll (horizontal y vertical) cuando el contenido incluido no cabe en el iframe
Con el siguiente ejemplo incrustaríamos en una página/artículo la página con el ejemplo de uso de impress.js para presentaciones:
<iframe src="http://bartaz.github.io/impress.js/#/bored" width="500" height="400" scrolling="no" /></iframe>
Resultado:
Puedes probar el generador de código on-line para iframe en: http://7thspace.com/webmaster_tools/iframe_generator.html
Vídeos desde Vimeo
Busca el vídeo que te interese. Una vez en pantalla pulsa sobre el botón para mostrar el panel de «compartir». Observa que existe una sección específica para el código «iframe»:
Sólo tienes que copiar y pegar ese código en tu artículo/página (recuerda que ha de hacerse sobre el código HTML/TEXTO, no sobre el editor «visual»).
En este caso tenemos la posibilidad de personalizar hasta el más mínimo detalle utilizando el enlace «+ Mostrar opciones«, que irá adaptando el código anterior:Resultado:
Vídeos desde Dailymotion
En este caso tienes dos opciones. Una vez encontrado el vídeo que te interesa ya en pantalla puedes pulsar sobre el icono , y a continuación sobre para que se copie automáticamente el código iframe.
Mucho más interesante es pulsar sobre el enlace «Exportar» por debajo del vídeo, y ampliar el panel de opciones pulsando a continuación sobre el enlace «más opciones & vista previa«:
Resultado:
Galerías de fotos de Flickr
Busca la galería de fotos que te interesa. Una vez en pantalla pulsa sobre el icono para abrir las opciones de compartir. A continuación busca la opción «Obtener el código HTML/BBCode«:
Nota: Esta opción sólo estará disponible si el autor de la galería y el tipo de licencia lo permite!
Resultado
Existe una página curiosa que permite generar galerías de Flickr con otros parámetros: http://flickrslidr.com/index.php
Fotos de PhotoBucket
Busca la foto/video/animación que te interese. Al dejar el ratón sobre ella observarás que aparece el icono . Pulsa sobre el y selecciona la opción «share«. Del panel que aparece pulsa sobre el enlace «Links» y obtendrás algo como esto:
En caso de duda sobre el código a utilizar, copia el HTML.
Resultado:
Publicación Digital: Scribd
Utiliza el buscador para localizar el documento que te interese y ábrelo. En la barra de herramientas superior de la página encontrarás en botón «Share on social networks». De la ventana que aparezca pulsa sobre el botón . Personaliza las opciones y luego copia el código «Embed this in your website«.
Resultado:
SANTA TERESA DE JESUS – POESIAS by volvox_sp
Publicación Digital: Calaméo
Busca la publicación que te interese y pulsa sobre ella. En la página resumen de la misma busca el enlace . En el panel que aparece pulsa en el enlace «Mostrar opciones avanzadas» y obtendrás algo como esto:
Resultado:
Publicación digital: Issuu
Busca y abre la publicación que te interese. Pulsa sobre el enlace «Share» y a continuación en la opción «Embed«. Para ver más opciones pulsa sobre «Styling options»:
Copia el código que aparece en «Embed code» y pégalo como en los ejemplos anteriores.
Resultado:
Presentaciones: SlideShare
Localiza con el buscador la presentación que te interese y ábrela. Sobre la presentación aparecerá una barra de herramientas con distintas opciones: pulsa sobre . Personaliza las opciones de presentación pulsando sobre el botón .
Copia el código generado en la sección «
Presentaciones: Slideboom
Busca la presentación que te interese y ábrela. Pulsa sobre el botón (suele estar en la parte superior derecha de la página). Aparecerá esta ventana:
Copia el código «Enbed code» y pégalo en tu artículo/web como código HTML. Resultado: