{"id":6896,"date":"2019-04-29T01:37:00","date_gmt":"2019-04-29T05:37:00","guid":{"rendered":"https:\/\/extassisnetwork.com\/tutoriales\/?p=6896"},"modified":"2019-05-26T19:30:40","modified_gmt":"2019-05-26T23:30:40","slug":"que-es-un-iframe","status":"publish","type":"post","link":"https:\/\/extassisnetwork.com\/tutoriales\/que-es-un-iframe\/","title":{"rendered":"\u00bfQu\u00e9 es un iFrame?"},"content":{"rendered":"

iFrame es la abreviatura de Inline Frame y es un elemento poderoso en el dise\u00f1o web. Probablemente hayas visto innumerables videos de YouTube insertados en sitios distintos a YouTube.<\/p>\n

Un Iframe es un documento de una web que se inserta en otra p\u00e1gina web.<\/strong>\u00a0Se trata de un elemento que\u00a0puede albergar cualquier tipo de contenido en su interior y que ayuda, entre otras cosas, a ampliar el mensaje que se ofrece con fuentes externas o con material complementario<\/strong>\u00a0que pueda resultar de inter\u00e9s para el usuario que entra<\/p>\n

En este art\u00edculo, analizaremos m\u00e1s de cerca qu\u00e9 es un iFrame y c\u00f3mo usarlo, y hablaremos sobre otras cosas que vale la pena tener en cuenta antes de colocar un iFrame en tu documento\u00a0HTML.<\/p>\n

\u00bfQu\u00e9 es un iFrame?<\/span><\/h2>\n

Un iFrame es un marco (frame) dentro de un marco. Es un componente de un elemento HTML que permite incrustar documentos, videos y medios interactivos dentro de una p\u00e1gina. Al hacer esto, puedes mostrar una p\u00e1gina web secundaria en su p\u00e1gina principal.<\/p>\n

El elemento iFrame permite incluir un fragmento de contenido de otras fuentes. Puede integrar el contenido en cualquier lugar dentro de tu p\u00e1gina, sin tener que incluirlos en la estructura de tu dise\u00f1o web, como un elemento tradicional.<\/p>\n

Sin embargo, no es bueno usar el iFrame en exceso, ya que puede poner lenta tu p\u00e1gina y ser un riesgo para la seguridad, especialmente si utilizas contenido de un sitio web sospechoso. Puedes pensar en un iFrame como una parte de tu contenido, pero no como parte de tu sitio. Por ejemplo, si quieres agregar un video de YouTube para aportar valor a tus lectores, puedes insertar un elemento iFrame en ese post.<\/p>\n

Para qu\u00e9 sirve un Iframe<\/h2>\n

Un Iframe sirve para que cualquier publicaci\u00f3n que se haga en una p\u00e1gina web pueda quedar mucho m\u00e1s enriquecida y ser m\u00e1s atractiva y completa para el visitante.<\/strong>\u00a0As\u00ed, las webs pueden a\u00f1adir v\u00eddeos, im\u00e1genes o cualquier otro recurso procedente de terceros para que se muestre autom\u00e1ticamente por pantalla.<\/p>\n

Ajustables y f\u00e1ciles de usar, son un recurso muy utilizado sobre todo en medios de comunicaci\u00f3n digitales<\/strong>\u00a0gracias a su capacidad para ofrecer informaci\u00f3n adicional que pueda ser interesante para el usuario. Utilizar este elemento es positivo para\u00a0crear un contenido de calidad, pero negativo para los algoritmos de b\u00fasqueda, que cada vez penalizan m\u00e1s la adici\u00f3n de c\u00f3digo con material externo.<\/p>\n

C\u00f3mo usar iFrame<\/span><\/h2>\n

Ahora ya sabes que iFrame es un elemento adicional para compartir contenido de otros sitios. Puedes agregarlo para darle a los lectores un contexto sobre un tema determinado. Tambi\u00e9n es posible insertar un elemento iFrame utilizando la etiqueta\u00a0<iframe><\/strong>\u00a0en un documento HTML. Copia el c\u00f3digo siguiente, p\u00e9galo en el bloc de notas y guarda el archivo en formato .html:<\/p>\n

\n\t\t\t\t
\r\n<iframe src="https:\/\/www.youtube.com\/watch?v=CeqPx7NnnBw" \r\nwidth="680" height="480" allowfullscreen><\/iframe><\/pre>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n
El c\u00f3digo anterior mostrar\u00e1 un video en YouTube. Ahora examinemos cada etiqueta por separado:<\/p>\n
    \n
  • La etiqueta <iframe>\u2026 <\/iframe> se usa para contener el video dentro del iFrame.<\/li>\n
  • El fuente de iFrame (src) es el origen del contenido del servidor externo o interno. No olvides poner el c\u00f3digo incrustado en la URL.<\/li>\n
  • Ancho y alto es la relaci\u00f3n de aspecto del iFrame. Puedes insertar un tama\u00f1o fijo como 680 \u00d7 480 p\u00edxeles (px) como en el ejemplo. O bien, puedes utilizar un m\u00e9todo basado en el porcentaje (10%-100%) para ajustar el iFrame autom\u00e1ticamente.<\/li>\n<\/ul>\n
    Riesgos de seguridad<\/span><\/h2>\n
    Por naturaleza, el elemento iFrame no representa ning\u00fan riesgo de seguridad para tu p\u00e1gina web o tus lectores. En parte, fue desarrollado para ayudarle a los creadores de contenido a agregar material visualmente atractivo para los lectores. Sin embargo, debes prestar atenci\u00f3n al agregar un iFrame de un sitio web no confiable.<\/p>\n
    Hubo una oleada de inyecci\u00f3n de c\u00f3digo iFrame en algunos sitios web leg\u00edtimos, como ABC News, en el 2008. Este tipo de ataque redirige a los visitantes a un sitio malicioso, que luego instalar\u00e1 un virus en la PC de los visitantes o intentar\u00e1 robar informaci\u00f3n confidencial. Por eso no se recomienda incluir iFrame como parte integral de tu sitio web.<\/p>\n
    Si crees que un sitio web no es seguro, ni siquiera te molestes en enlazarlo y no pongas su contenido en tu elemento iFrame.<\/p>\n","protected":false},"excerpt":{"rendered":"
    iFrame es la abreviatura de Inline Frame y es un elemento poderoso en el dise\u00f1o web. Probablemente hayas visto innumerables videos de YouTube insertados en sitios distintos a YouTube. Un Iframe es un documento de una web que se inserta en otra p\u00e1gina web.\u00a0Se trata de un elemento que\u00a0puede albergar cualquier tipo de contenido en […]<\/p>\n","protected":false},"author":2,"featured_media":6906,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45],"tags":[226],"class_list":{"0":"post-6896","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-general","8":"tag-iframe"},"_links":{"self":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/posts\/6896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/comments?post=6896"}],"version-history":[{"count":0,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/posts\/6896\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/media\/6906"}],"wp:attachment":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/media?parent=6896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/categories?post=6896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/tags?post=6896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}