¿Quieres incrustar contenido externo en tu propia página web? Para ello, el iframe (del inglés inline frame, o marco incorporado) ha demostrado ser extremadamente eficaz. Se trata de una manera elegante de insertar contenido adicional en los documentos HTML. En el mejor de los casos, el usuario de la página ni siquiera se da cuenta de que el contenido procede de otra fuente. Te contamos cómo integrar el iframe en HTML.
En principio, cada página web consiste en un único documento HTML. Para insertar otros elementos, como imágenes, vídeos u otros documentos, tienes que hacerlo sobre la base de un marco independiente que te permita incrustarlos. En el pasado, esto se lograba mediante marcos HTML estándar que en la actualidad ya no se utilizan. En su lugar, se recurre a la etiqueta iframe. El inline frame crea un espacio dentro de la página donde los elementos añadidos operan de manera autónoma. De esta manera, por ejemplo, dependiendo del tamaño del contenido incrustado, el iframe permite que el elemento cuente con su propia barra de desplazamiento.
Por lo general, el iframe se utiliza para incrustar objetos de otros sitios web en una página, como vídeos de YouTube o mapas de Google Maps. Incluso algunos plugins de redes sociales o ciertas aplicaciones pueden añadirse mediante iframes, así como documentos HTML personalizados.
Los iframes se introducen en el código HTML con la etiqueta iframe.
<iframe>...</iframe>Para completar el iframe correctamente, hay que especificar también los siguientes atributos:
Además de estos atributos válidos, existen otros que ya no son compatibles desde que se utiliza iframe en HTML5. Por ello, en su lugar, se debe recurrir a soluciones del CSS para las siguientes funciones:
El contenido del iframe en sí, además de una parte del diseño, solo puede definirse por medio de los atributos. De hecho, todo el texto que se coloque entre la etiqueta de inicio y la de cierre no será contenido, sino texto alternativo, que solo se mostrará en caso de que el navegador del usuario no sea compatible con el iframe. Normalmente, esto ya no debería suceder, porque las últimas versiones de todos los navegadores habituales reconocen esta tecnología.
Un iframe de HTML válido podría tener este aspecto:
<iframe src="http://ejemplo.org/demo.html" height="400" width="800" name="demo">
<p>Su navegador no es compatible con iframes</p>
</iframe>En este ejemplo, hemos insertado un documento HTML que se encuentra en otra página web, pero también es posible incrustar documentos HTML que tengamos almacenados en nuestro propio servidor web. En este caso, solo tienes que introducir el nombre del archivo y, si el documento no se encuentra en la misma carpeta, también la ruta.
Si quieres insertar un vídeo de YouTube en tu página web, también puedes hacerlo mediante el iframe. La propia plataforma ofrece el código correspondiente en la página de cada vídeo.
Para que el iframe resulte visualmente atractivo, es necesario incorporar el lenguaje CSS. No obstante, en la mayoría de los casos, solo puede diseñarse el marco en sí mismo. Si el contenido procede de una fuente externa, rara vez podremos personalizar el diseño para adaptarlo a nuestra propia página.
El iframe es perfecto para incorporar elementos de fuentes externas a nuestra web: en lugar de enviar al usuario a otro sitio, este puede seguir navegando cómodamente por nuestra página. De este modo, aumenta mucho la facilidad de uso. Además, incrustar el iframe puede tener una ventaja técnica, porque su contenido se carga independientemente del resto de la web. De esta manera, aunque aún no se hayan cargado todos los elementos de la página, el usuario ya tiene el contenido del iframe a su disposición.
Sin embargo, el iframe va perdiendo cada vez más adeptos debido a ciertos inconvenientes. De hecho, los motores de búsqueda no tratan los elementos incrustados de manera adecuada, lo que puede afectar la optimización para los motores de búsqueda y, por lo tanto, también el posicionamiento de la página. Aún más graves son los riesgos de seguridad relacionados con el iframe: incrustar contenido externo puede perjudicar el sistema o, incluso, al propio usuario. Por ejemplo, el contenido del iframe puede guardar un plugin malicioso o esconder una amenaza de phishing sin que el propietario del sitio sea consciente de ello.
Además, en los últimos años, el uso del iframe se ha cuestionado una y otra vez debido a las leyes de protección de datos. A menudo, los iframes que se insertan en las redes sociales acceden a algunos datos del usuario, aunque este no pulse los botones de “Me gusta” o “Compartir” o, incluso, ni siquiera haya iniciado sesión en la plataforma.
Sin duda, el iframe va a seguir utilizándose a largo plazo en el desarrollo de páginas web. No obstante, en muchos casos, podemos lograr los mismos resultados mediante otras tecnologías como CSS o JavaScript, que a menudo son más recomendables.
HTML5 hace que la integración de contenido multimedia en una web sea una tarea fácil y rápida. La última versión del lenguaje de marcado define el elemento <video> y sus respectivos atributos de programación de manera muy sencilla. Otra de las alternativas para integrar vídeos la ofrecen plataformas como YouTube o Vimeo. Visita nuestra guía y consigue más información al respecto.
Actualmente, el lenguaje de las hojas de estilo CSS es una de las herramientas de diseño web más importantes. Este permite separar el contenido del diseño de una web y se encuentra en constante desarrollo gracias a los esfuerzos del Word Wide Web Consortium (W3C). Los snippets CSS facilitan de manera significativa el diseño de páginas web, asumiendo, incluso, funciones de programas como Photoshop...
El término informático sandbox se usa en el ámbito del desarrollo de software para hacer referencia al aislamiento de procesos, es decir, a los entornos aislados en los que se puede ejecutar un software de forma segura. Este aislamiento evita que programas maliciosos o que aún no estén del todo desarrollados puedan alterar o perjudicar el resto del sistema operativo.
Si integras, por ejemplo, vídeos, imágenes, Maps o un calendario en WordPress, se consume mucha capacidad de almacenamiento. Con iFrames, puedes incorporar contenidos de otras plataformas o sitios web sin sobrecargar tu biblioteca multimedia. Aquí te explicamos cómo utilizar iFrames en WordPress a través de un plugin o de forma manual.
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver packs
