Publicar multimedia en un blog/web (yIII)

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 iframe
  • height = "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 iframe
  • longdesc = "url" – Dirección en la que puede encontrarse una descripción larga del contenido del iframe
  • scrolling = "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 sharevimeo para mostrar el panel de «compartir». Observa que existe una sección específica para el código «iframe»:

sharevimeo2

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

 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 dm, y a continuación sobre dm2 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«:

dm3

Resultado:

Galerías de fotos de Flickr

Busca la galería de fotos que te interesa. Una vez en pantalla pulsa sobre el icono flicr para abrir las opciones de compartir. A continuación busca la opción «Obtener el código HTML/BBCode«:

flicr2

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 pb . Pulsa sobre el y selecciona la opción «share«. Del panel que aparece pulsa sobre el enlace «Links» y obtendrás algo como esto:

pb2

En caso de duda sobre el código a utilizar,  copia el HTML.

Resultado:

linux photo: Linux tux.jpg

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 scribd «Share on social networks». De la ventana que aparezca pulsa sobre el botón scribd2. Personaliza las opciones y luego copia el código «Embed this in your website«.

 scribd3

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 calameo. En el panel que aparece pulsa en el enlace «Mostrar opciones avanzadas» y obtendrás algo como esto:

calameo2

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

issuu

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 slide. Personaliza las opciones de presentación pulsando sobre el botón slide2.

slide3

Copia el código generado en la sección «Copy and paste this code into your blog or website» . Resultado:

Presentaciones: Slideboom

Busca la presentación que te interese y ábrela. Pulsa sobre el botón  embed(suele estar en la parte superior derecha de la página). Aparecerá esta ventana:

 embed2

Copia el código «Enbed code» y pégalo en tu artículo/web como código HTML. Resultado: