Iframe

Los iframes tienen en general mala fama. En cambio los vemos en todas partes, casi sin darnos cuenta. Vamos a explicar qué es un iframe, para qué se utiliza en el diseño web y, por qué es tan odiado.

¿Qué es un Iframe?

¿Alguna vez has visto un documento dentro de una página web? ¿Un vídeo de Youtube fuera de Youtube, por ejemplo? Eso es un Iframe. ¡Magia! Es un elemento HTML que nos permite incrustar en un marco, dentro de nuestra página web, contenido de otra página web, y poder verlo sin problema. Iframe es la abreviatura de Inline Frame (marco incorporado, en inglés) y, durante mucho tiempo solo era soportado por el navegador que lo introdujo por primera vez en 1997, Microsoft Internet Explorer. Sí, ya llovió. Y siendo de Microsoft Explorer… ya nos da pistas de que no está muy bien considerado ;).

Después del inciso de “descubriendo la historia”, aquí os pongo un pequeño ejemplo con el último vídeo de nuestro Canal de Youtube de Marketing 4 Ecommerce:

Si se ha cargado el vídeo y podéis darle a Play… estáis accediendo a Youtube, pero no estáis en Youtube. Eso es lo estupendo. Ahora os estaréis preguntando, ¡¿pero cómo?!

¿Cómo usar un Iframe?

Pues para usar un Iframe, sólo hay que seguir estos pasos:

• Primero, hay que utilizar, en el código HTML, las etiquetas “<iframe>” y “</iframe>”. Dentro de este elemento, irán todas las especificaciones y el enlace de lo que queramos incrustar.
• Segundo, poner la etiqueta “src=”. Esto es una abreviatura de source. Establece el origen del contenido que vamos a incrustar.
• Tercero, especificaciones técnicas. Hay que especificar el tamaño del marco del Iframe, es decir, lo que queremos que nos ocupe en nuestra página. Para esto, se utilizan las siguientes etiquetas de ancho y largo, poniendo lo que queremos que ocupe en píxeles dentro de comillas o poniéndolo en %, incluyendo también ese símbolo dentro de las comillas:
  • “width=”
  • “height=”
• Finalmente, “allowfullscreen”, esto nos permite poder visualizar los vídeos en modo pantalla completa, siendo mucho más agradable.

Estos son los pasos mínimos para poder incrustar uno, aunque por supuesto, hay más elementos que se pueden especificar para que quede más enriquecido, como el título o si quieres que haga scroll dentro del marco. Este es el ejemplo con el enlace al vídeo anterior:

Que vendría a significar: En este hueco, enseña contenido recogido de esta url, con este ancho, con este alto y permite que lo ponga a pantalla completa.

Para qué se utiliza un Iframe en una web

Los Iframe se usan para poder enriquecer el contenido de nuestra web, podemos ampliar contenido con enlaces a páginas propias o a otras páginas que puedan complementarnos. Son una herramienta muy interesante, además, para que los visitantes a nuestra página no se marchen y puedan ver todo el contenido dentro de una misma dirección.

Sin embargo, hay que tener cuidado con el uso de esta etiqueta igual odiar es una palabra muy dura. Si se usa en exceso, puede causar que tu sitio web funcione de forma más lenta, ya que tendría muchos elementos para cargar y estaría haciendo llamadas a un elemento externo (la otra web) lo que siempre ralentiza el tiempo de carga. Por otra parte, hay que tener cuidado con la fuente que se enlaza, saber que proviene de un sitio seguro para evitar problemas futuros.

En conclusión, bien utilizada, es una herramienta correcta para hacer nuestro sitio web más atractivo, pero no se debe abusar ni debe ser la parte fundamental del contenido de nuestra web.

<< VOLVER AL DICCIONARIO ECOMMERCE