{"id":914,"date":"2014-04-16T10:01:47","date_gmt":"2014-04-16T15:01:47","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=914"},"modified":"2024-11-01T11:49:58","modified_gmt":"2024-11-01T16:49:58","slug":"incrustar-un-pdf-en-una-pagina-web","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/incrustar-un-pdf-en-una-pagina-web\/","title":{"rendered":"Incrustar un PDF en una p\u00e1gina web"},"content":{"rendered":"<p>Sigo buscando y documentando soluciones para la creaci\u00f3n de espacios web usables, pr\u00e1cticos y amables con la experiencia de usuario. Pr\u00e1ctica que utilizo adem\u00e1s como excusa para crear contenido para mi blog.<\/p>\n<p>Realizo esto porque estoy convencido que, al final, el sitio web se convierte en un vendedor m\u00e1s de la empresa y la atenci\u00f3n (experiencia) que brinde al cliente (usuario) debe ser la mejor.<\/p>\n<p>Hoy estuve revisando un sitio web de una de las empresas donde trabajo y me encontr\u00e9 con un texto que me llam\u00f3 la atenci\u00f3n: &ldquo;<span style=\"text-decoration: underline\">Consulte aqu\u00ed el Organigrama (&hellip;)<\/span>&rdquo;, utilizando la palabra &ldquo;aqu\u00ed&rdquo; como r\u00f3tulo de navegaci\u00f3n.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Primera soluci\u00f3n:<\/h2>\n<p>Los r\u00f3tulos de navegaci\u00f3n deben ser dicientes, es decir, las palabras que se utilizan en el <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">enlace<\/a> deben dejar claro qu\u00e9 va a encontrar el usuario (por no agregar que Google tambi\u00e9n se interesa en lo que dicen los enlaces).<\/p>\n<p>En el caso del enlace que se menciona, la palabra &ldquo;aqu\u00ed&rdquo; no es clara sobre el recurso que est\u00e1 conectado. Lo recomendable es realizar en el enlace sobre &ldquo;Organigrama&rdquo;. Incluso, la palabra &ldquo;aqu\u00ed&rdquo; puede sobrar. Miremos un ejemplo:<\/p>\n<p>Una pr\u00e1ctica com\u00fan: <span style=\"text-decoration: underline\">Consulte aqu\u00ed<\/span> sobre los delfines rosados<\/p>\n<p>Una mejor opci\u00f3n: <span style=\"text-decoration: underline\">Conozca los delfines rosados<\/span><\/p>\n<p>Como ven, el segundo enlace es m\u00e1s preciso.<\/p>\n<h2>Segunda soluci\u00f3n:<\/h2>\n<p>Continu\u00e9 con la revisi\u00f3n del enlace y me enter\u00e9 que el recurso que conectaba era un PDF, el cual se cargaba en una nueva pesta\u00f1a del navegador. <span style=\"line-height: 1.6em;\">Me pareci\u00f3 bien, pero quer\u00eda mejorar la experiencia de usuario. Fue entonces cuando realic\u00e9 una b\u00fasqueda en Google, tratando de buscar una soluci\u00f3n sencilla, liviana y libre.&nbsp;<\/span><\/p>\n<p>Mis palabras de b\u00fasqueda fueron: &ldquo;<em>embed pdf on website<\/em>&rdquo;. Como algunos de mis estudiantes saben, no soy el mejor en ingl\u00e9s pero trato de realizar b\u00fasquedas en este idioma para obtener mejores resultados (mientras los hispanohablantes generamos m\u00e1s contenidos para la Web, como este).<\/p>\n<p>El primer resultado fue un JS (PDF.js) que -seg\u00fan el autor- es tecnolog\u00eda HTML5 que visualiza documentos PDF sin ayuda del c\u00f3digo nativo del navegador. Sin embargo ten\u00eda la duda sobre la posibilidad de incrustar el documento en la misma p\u00e1gina web.<\/p>\n<p>Revis\u00e9 un poco m\u00e1s sobre este proyecto y llegu\u00e9 al <a href=\"https:\/\/github.com\/mozilla\/pdf.js\/wiki\/Setup-PDF.js-in-a-website\">Github<\/a> de ellos. All\u00ed perd\u00ed la esperanza en la soluci\u00f3n, pues encontr\u00e9 muchos archivos y carpetas que poco me orientaban sobre su integraci\u00f3n. Sin embargo, hago la referencia por si les interesa explorar m\u00e1s.<\/p>\n<p>Regres\u00e9 a Google y segu\u00ed buscando.<\/p>\n<h2>Google, como soluci\u00f3n:<\/h2>\n<p>El <a href=\"http:\/\/stackoverflow.com\/questions\/291813\/recommended-way-to-embed-pdf-in-html\" target=\"_blank\" rel=\"noopener noreferrer\">segundo resultado de b\u00fasqueda<\/a> me ofrec\u00eda una nueva respuesta:<\/p>\n<blockquote><p><em>&ldquo;You can also use Google PDF viewer for this purpose. As far as I know it&#39;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&rdquo;<\/em><\/p><\/blockquote>\n<p>Seg\u00fan cuentas, pod\u00eda utilizar un visor de Google para incrustar el documento PDF. Esta soluci\u00f3n era libre, soportada en Google (al parecer) y f\u00e1cil de administrar.<\/p>\n<p>Aqu\u00ed est\u00e1 el c\u00f3digo de inserci\u00f3n:<\/p>\n<pre>\r\n&lt;iframe\r\n   src=&quot;http:\/\/docs.google.com\/gview?url=http:\/\/web.com\/mypdf.pdf&amp;embedded=true&quot;\r\n   style=&quot;width:700px; height:700px;&quot;\r\n   frameborder=&quot;0&quot;&gt;\r\n&lt;\/iframe&gt;\r\n<\/pre>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Explicando el c\u00f3digo de Google:<\/h2>\n<p>&iquest;Qu\u00e9 quiere decir esta l\u00ednea de c\u00f3digo HTML? Es muy f\u00e1cil comprender su significado. Para ello voy a separar la etiqueta y par\u00e1metros. Ya es tu tarea volver a armar el c\u00f3digo:<\/p>\n<p><code><strong>iframe<\/strong><\/code>: Es una etiqueta HTML que se utiliza para incrustar un recurso web en el documento actual. Piense en una regi\u00f3n de su p\u00e1gina donde se carga un contenido que est\u00e1 en otra parte.<\/p>\n<p><code><strong>src<\/strong><\/code>: Este par\u00e1metro nos permite indicar la ubicaci\u00f3n del recurso (en este caso, el PDF). La clave aqu\u00ed est\u00e1 en modificar la l\u00ednea, conservando <code>http:\/\/docs.google.com\/gview?url=<\/code>. Al final de la URL se anota la ubicaci\u00f3n del PDF.<\/p>\n<p>Por ejemplo, si el documento PDF est\u00e1 en vp.com\/veo.pdf, el par\u00e1metro <code>src<\/code> debe quedar as\u00ed:<\/p>\n<p><code>src=&quot;http:\/\/docs.google.com\/gview?url=\/\/vp.com\/veo.pdf&amp;embedded=true&quot;<\/code>.<\/p>\n<p>Como ve, se conserva: <code>&amp;embedded=true<\/code>.<\/p>\n<p><code><strong>style<\/strong><\/code>: permite definir el ancho y alto de la <code>iframe<\/code>. En el c\u00f3digo de ejemplo aparece un alto (height) y ancho (width) de 700 pixeles. Solo hace falta cambiar los valores.<\/p>\n<p><code><strong>frameborder<\/strong><\/code>: Este par\u00e1metro simplemente define el grosor del borde del <code>iframe<\/code>. Puede dejarlo en cero,&#8230; es m\u00e1s bonito.<\/p><\/blockquote>\n<h2>Listo el proceso<\/h2>\n<p>Y eso es todo. Solo hace falta insertar el c\u00f3digo en su p\u00e1gina web, guardar cambios y probar.<\/p>\n<p>Vale recordar que lo importante en la construcci\u00f3n 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 &ldquo;cuanta arandela&rdquo; sale en Google.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sigo buscando y documentando soluciones para la creaci\u00f3n de espacios web usables, pr\u00e1cticos y amables con la experiencia de usuario. Pr\u00e1ctica que utilizo adem\u00e1s 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\u00e1s de&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,66],"class_list":["post-914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=914"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/914\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}