Incrustar un PDF en una página web

Sigo buscando y documentando soluciones para la creación de espacios web usables, prácticos y amables con la experiencia de usuario. Práctica que utilizo además como excusa para crear contenido para mi blog.

Realizo esto porque estoy convencido que, al final, el sitio web se convierte en un vendedor más de la empresa y la atención (experiencia) que brinde al cliente (usuario) debe ser la mejor.

Hoy estuve revisando un sitio web de una de las empresas donde trabajo y me encontré con un texto que me llamó la atención: “Consulte aquí el Organigrama (…)”, utilizando la palabra “aquí” como rótulo de navegación.

Primera solución:

Los rótulos de navegación deben ser dicientes, es decir, las palabras que se utilizan en el enlace deben dejar claro qué va a encontrar el usuario (por no agregar que Google también se interesa en lo que dicen los enlaces).

En el caso del enlace que se menciona, la palabra “aquí” no es clara sobre el recurso que está conectado. Lo recomendable es realizar en el enlace sobre “Organigrama”. Incluso, la palabra “aquí” puede sobrar. Miremos un ejemplo:

Una práctica común: Consulte aquí sobre los delfines rosados

Una mejor opción: Conozca los delfines rosados

Como ven, el segundo enlace es más preciso.

Segunda solución:

Continué con la revisión del enlace y me enteré que el recurso que conectaba era un PDF, el cual se cargaba en una nueva pestaña del navegador. Me pareció bien, pero quería mejorar la experiencia de usuario. Fue entonces cuando realicé una búsqueda en Google, tratando de buscar una solución sencilla, liviana y libre. 

Mis palabras de búsqueda fueron: “embed pdf on website”. Como algunos de mis estudiantes saben, no soy el mejor en inglés pero trato de realizar búsquedas en este idioma para obtener mejores resultados (mientras los hispanohablantes generamos más contenidos para la Web, como este).

El primer resultado fue un JS (PDF.js) que -según el autor- es tecnología HTML5 que visualiza documentos PDF sin ayuda del código nativo del navegador. Sin embargo tenía la duda sobre la posibilidad de incrustar el documento en la misma página web.

Revisé un poco más sobre este proyecto y llegué al Github de ellos. Allí perdí la esperanza en la solución, pues encontré muchos archivos y carpetas que poco me orientaban sobre su integración. Sin embargo, hago la referencia por si les interesa explorar más.

Regresé a Google y seguí buscando.

Google, como solución:

El segundo resultado de búsqueda me ofrecía una nueva respuesta:

“You can also use Google PDF viewer for this purpose. As far as I know it's not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL”

Según cuentas, podía utilizar un visor de Google para incrustar el documento PDF. Esta solución era libre, soportada en Google (al parecer) y fácil de administrar.

Aquí está el código de inserción:

<iframe
   src="http://docs.google.com/gview?url=http://web.com/mypdf.pdf&embedded=true"
   style="width:700px; height:700px;"
   frameborder="0">
</iframe>

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

Explicando el código de Google:

¿Qué quiere decir esta línea de código HTML? Es muy fácil comprender su significado. Para ello voy a separar la etiqueta y parámetros. Ya es tu tarea volver a armar el código:

iframe: Es una etiqueta HTML que se utiliza para incrustar un recurso web en el documento actual. Piense en una región de su página donde se carga un contenido que está en otra parte.

src: Este parámetro nos permite indicar la ubicación del recurso (en este caso, el PDF). La clave aquí está en modificar la línea, conservando http://docs.google.com/gview?url=. Al final de la URL se anota la ubicación del PDF.

Por ejemplo, si el documento PDF está en vp.com/veo.pdf, el parámetro src debe quedar así:

src="http://docs.google.com/gview?url=//vp.com/veo.pdf&embedded=true".

Como ve, se conserva: &embedded=true.

style: permite definir el ancho y alto de la iframe. En el código de ejemplo aparece un alto (height) y ancho (width) de 700 pixeles. Solo hace falta cambiar los valores.

frameborder: Este parámetro simplemente define el grosor del borde del iframe. Puede dejarlo en cero,… es más bonito.

Listo el proceso

Y eso es todo. Solo hace falta insertar el código en su página web, guardar cambios y probar.

Vale recordar que lo importante en la construcción de un sitio es la experiencia de usuario. Busque, experimente e integre soluciones que den valor a su sitio. Pero, atento, la idea tampoco es saturar su espacio web con “cuanta arandela” sale en Google.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

¡Vamos por los 25.000 suscriptores en YouTube! Suscríbete

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

—

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Incrustar un PDF en una página web por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internaciona . Basada en una obra en https://e-lexia.com/blog .