La mayoría de estos servicios nos darán directamente el código HTML con las etiquetas adecuadas para conseguir incluir dicho objeto en nuestra entrada, por lo que no será necesario que tengamos conocimientos de lenguaje HTML para ello, pero no está de más conocer un poco las etiquetas del lenguaje HTML que nos lo permiten: las etiquetas <iframe> o <embed>.
Veremos varios ejemplos de cómo incluir en nuestras entradas diversos objetos de distintos servicios: páginas web externas, documentos (pdf, doc, txt), vídeos, audio, mapas...
En HTML5 (la última versión del lenguaje) algunos de estos códigos han quedado anticuados, pero aun se pueden usar gracias a la retro compatibilidad.
Importante: todos los códigos que veis en los cuadros de texto, deben ser introducidos desde la pestaña HTML del editor de entradas. Si lo hacemos desde la pestaña redactar, no funcionarán
Vídeos
En el caso de los vídeos, debemos tener en cuenta que el propio editor de entradas dispone de un botón que facilita su uso, especialmente si el origen es YouTube. Gracias a esto podemos insertar un vídeo en nuestro blog sin escribir nada de código. Pero si deseamos insertar vídeos con otros orígenes o bien deseamos tener algo de control sobre cómo se van a ver en nuestro blog, conocer cómo funciona no está de más.
En páginas como YouTube, Vimeo, dailymotion... podemos obtener vídeos que podemos incrustar en las entradas de nuestro blog. Para ello buscamos en la página del vídeo en cuestión algún botón con la etiqueta "compartir", "share", "insertar" o "embed" y copiaremos el código obtenido, como en este ejemplo de Vimeo.
Podemos modificar algunos parámetros, como las etiquetas width (ancho) y height (alto) para adaptar el vídeo a la plantilla de nuestro blog.
Con el anterior código obtendremos este vídeo en nuestro blog. Hemos añadido además una etiqueta DIV (sección) y hemos centrado el vídeo (align center). Asimismo hemos modificado el ancho (width) y el alto (height) originales para que el vídeo luzca mayor y mas vistoso, ya con un tamaño de 800x600
Y al reproducir el vídeo comprobamos que se reproduce en un cuadro sin ningún de bandas negras
Páginas web
Podemos incrustar una página web externa dentro de nuestro blog.
Esta página web esta incrustada mediante el siguiente código:
Nótese la ultima opción Width="100%". Esto nos permite que el marco para la página web siempre vaya a ocupar el 100% del ancho del blog, sea cual sea la resolución a la que los visitantes lo estén viendo. Si la resolución fuese pequeña para mostrarla entera, mostraría las barras de desplazamiento (scrolling="auto")
Documentos pdf
Tener en cuenta que para que los documentos puedan ser vistos por nuestros visitantes, estos archivos tendrán que tener habilitada la propiedad "compartir" en el servicio de almacenamiento.
O sea, si yo tengo en Google drive almacenado una presentación, puedo incrustarla en un iframe, pero antes tengo que habilitar en Google drive "compartir" para ese archivo.
El ancho podemos ponerlo en porcentaje del ancho de nuestro blog, como ya vimos antes. Además hemos remarcado el borde con frameborder=2.
Hemos sustituido "dirección del archivo" por una que hemos buscado por internet. Nótese la posibilidad de apuntar a cualquier página del documento (con #page=XX al final) y la posibilidad de poner un enlace de descarga para aquellos navegadores que no permitan ver el pdf..
Hemos sustituido "dirección del archivo" por una que hemos buscado por internet. Nótese la posibilidad de apuntar a cualquier página del documento (con #page=XX al final) y la posibilidad de poner un enlace de descarga para aquellos navegadores que no permitan ver el pdf..
En el ejemplo anterior estamos mostrando en nuestro blog un archivo que no es de nuestra propiedad, alojado en otro servidor (www.december.com). Es posible que en casos como este el propietario haya protegido su documento contra nuestro intento de "copia" (hotlinking es su nombre habitual) y no permita que se vea en nuestro blog, así que deberemos desistir o probar con otro documento.
Si tenemos en pdf alojado en nuestro drive, el proceso se ilustra en el siguiente gif animado
Documentos .doc, pptx, xls
Para documentos de nuestra propiedad, alojados en Google drive o OneDrive el primer paso es habilitar el compartir el archivo. De la opcion por defecto (restringir) debemos cambiar a "cualquier persona con el enlace", de forma que los visitantes de nuestro blog puedan acceder al contenido. Después, iremos al menú archivo.
- En Google drive encontraremos un opcion que dice "publicar en la web" y que nos da el código para insertar en la entrada de nuestro blog"
- En OneDrive iremos a la opcion "compartir" que nos ofrece la opcion "insertar", con el que también obtenemos el código necesario
Estos pasos son independientes del archivo que queramos incluir: de texto, hoja de calculo, presentación, formulario...
Archivos Flash
El caso de los archivos flash (con extensión .swf) es problemático. El que antiguamente fuera el estándar para animaciones e interactividad en la web, ha caído progresivamente en el desuso debido a numerosos problemas de seguridad.Actualización 2021: Definitivamente, Flash ha sido baneado de Internet y los navegadores ya no permiten su visualización. Para seguir consultando recursos antiguos puede usarse algún truco, aunque solo funciona con archivos Flash sencillos (activescript 2) y requiere de incluir un código en cada pagina que incluya archivos flash:
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
Para incrustar archivos flash podemos usar la etiqueta embed o bien la etiqueta object, mas configurable
Embed es la etiqueta HTML que usaremos para incrustar archivos flash. También se usaba antiguamente para incrustar vídeos y otros archivos, aunque ahora YouTube y similares entregan sus vídeos con la etiqueta iframe, a la espera de utilizar las etiquetas previstas en el lenguaje HTML5.
Con el siguiente código:
Obtenemos (después de desbloquear los archivos flash en el navegador):
La etiqueta object es más configurable
Aviso: Veréis que hay un espacio delante de la primera etiqueta Object. No debería esta ahí, pero si no la pongo, el cuadro de texto no funcionaba. Si copias el código, acuérdate de borrar ese espacio
Ahora solo nos queda encontrar esa animación o archivo flash que queramos incrustar en el blog. Para ello podemos usar la búsqueda avanzada de Google. Si en la caja de búsqueda, tras la cadena a buscar añadimos "filetype:swf" los resultados proporcionados por google incluirán solamente archivos flash relacionados con la búsqueda realizada. (Parece ser que Google incluso piensa en eliminar los archivos flash de los resultados de búsqueda)
Insertar Audio
No hay comentarios:
Publicar un comentario