Iframe y usabilidad

Vemos lo que son los frames flotantes, cómo crearlos y sus características, ventajas e inconvenientes, más destacados en el campo de la usabilidad. Incluye introduccion al mundo del frame e iframe.
Resumen:
  • Los iFrames ayudan a insertar una pagina web dentro de otra con mayor control que usando los "frames" tradicionales.
  • Ya no se necesita tener una pagina que defina los frames con lo que se mejora algo el registro en los buscadores.
  • El uso mas natural es el de la publicidad y sites de colaboracion (e-zines, sites personales, logs de informacion...).
  • Tiene los mismos inconvenientes que un frame tradicional (imprimir, bookmarks, buscadores).
  • Ejemplos de iFrames, codigo, referencias.
Que son los frames?
ejemplo de construccion de una pagina con frames

ejemplo de construccion de una pagina usando iframes
1. Los iFrames ayudan a insertar paginas con mayor control que usando los "frames" tradicionales.

Con los frames tradicionales se necesita una pagina web donde se definen la dimesion y posicion de los marcos junto a las llamadas a los documentos a insertar. Esto genera una pagina "index" que se encuentra vacia de contenido haciendo que los usuarios de nuestor site, tengan que cargar (primero) una pagina vacia de contenido que genera los frames y (segundo) el contenido de cada pagina a insertar. El tiempo de carga con los frames es mas lento que usando paginas simples donde todo el contenido y codigo reside en el mismo documento.

Por el lado de los buscadores, el problema reside en que el primer documento a indexar se encuentra vacio de contenido siendo el mas relevante para el ranking dentro de los resultados.

Con los iFrames, podemos insertar una pagina web dentro de otra, de la misma forma que insertamos un grafico o una tabla. El iFrame es un objeto que se manipula con la misma libertad que cualquier otro elemento dentro del espacio HTML.

Teniendo en cuenta el tiempo de carga, al usuario se le presenta una portada con el contenido del site de forma directa, cargando el resto de elementos (incluidos el iframe) de forma natural.

La pagina index al mostrar informacion, los buscadores pueden indexar el contenido de nuestro site de forma natural ofreciendo informacion relevante dentro de los resultados mostrados al usuario.


2. El uso mas natural es el de la publicidad y sites de colaboracion.

Con el iFrame los banners cobran una nueva dimension. El anunciante puede colocar dentro de un site una pagina web que va mas alla del banner, ya que el usuario podra ser capar de rellenar un cuestionario, consultar mas paginas sin abandonar el site del anunciante, etc.

En este ejemplo de anuncio de Tide (marca de detergentes), se ofrece el mensaje y la posibilidad de recibir un cupon de descuento. El usuario puede rellenar el cuestionario y finalizar el proceso sin abandonar el site de origen (este anuncio se encontro dentro de yahoo! Mail).

ejemplo de banner dentro de un iframe ejemplo de banner dentro de un iframe ejemplo de banner dentro de un iframe

El problema que presentaba este anuncio es que el formulario era muy largo (hasta 4 pantallas dentro del iframe). La version HTML del mismo, sigue siendo muy largo, pero al menos es mas comodo de leer al disponer de todo el navegador.


El iFrame tambien permite que, con minimo mantenimiento, un site pueda permitir la colaboracion de varias personas a la hora de ofrecer informacion sin interrumpir la produccion por cambios en el diseño del mismo. La union de hojas de estilo con iFrames ayuda a crear sites donde el mantenimiento (tecnico, diseño, plantillas...) y la actualizacion del contenido no crean conflictos usando muy pocos recuros de programacion.


3. Tiene los mismos inconvenientes que un frame tradicional.

A pesar de estas posibles virtudes, los iFrames siguen teniendo los mismos problemas que los frames tradicionales a la hora de querer imprimir el contenido, hacer un bookmark o ser indexado por un buscador.

previo de impresion de un iframe
  • A la hora de imprimir el cotenido de una pagina con iFrames en un explorer sobre un iMac el contenido del iFrame se desborda del limite definido para el mismo empujando al contenido de la pagina hacia abajo creando una impresion erronea.
  • Los bookmarks se hacen sobre la pagina que contiene el iFrame y no sobre el iFrame en concreto. Para solucionar esto, debes ofrecer una pagina exenta a la que el usuario pueda recurrir sin tener que pasar por el iFrame.
  • Para los buscadores la solucion pasa por crear metas apropiados y procurar ofrecer algo de contenido clave dentro de la pagina index. Procura crear un sumario del contenido ofrecido y haz referencias a la informacion mostrada dentro del iFrame.
El iFrame (al igual que el frame tradicional) no es una solucion adecuada para mostrar contenido de forma intensiva. Si es adecuado para temas de publicidad, sites de colaboracion entre varios usuarios y para crear sites con mantenimiento minimo usando muy pocos recursos de programacion.


4. Ejemplos, codigo, referencias.

Codigo general para crear un iFrame.

Codigo Resultado
    <iframe src="news.html" width="100%" height="160" align="center">

    Texto alternativo para los usuarios que no ven iFrames. Por lo general se recomienda poner un enlace a la pagina contenida dentro del iFrame. Noticias iFrame.

    </iframe>
    Ejemplo de iFrame con mas variables;

    <iframe id="localscene" name="localscene" src="localscene.php" frameborder="0" framespacing="0" scrolling="auto" border="0" style="position:absolute; left:726px; top:231px; width:216; height:250; z-index:5">

    Sorry, your browser doens't support iframe. Please upgrade your browsers.


    </iframe>
Ver el ejemplo en HalfProject.com


Enlaces de interes:


Comentarios recibidos:
- De: "Maelmori"
Esta vez para complementar informacion a nivel técnico: es posible lograr el mismo efecto que un iframe en Netscape 4, usando el atributo src de la etiqueta Layer. Referencia http://www.dansteinman.com/dynduo/es/source.html como la traducción es pésima y horrible, te mando el enlace en inglés http://www.dansteinman.com/dynduo/en/source.html El implementarlo o no entonces depende más del compromiso con el standard del programador (o de sus ganas de trabajar, claro :) ya que como sabrás el iFrame es lo standard a nivel de recomendacion W3C.

Una vez más el uso del iframe tienen sus consecuencias en el entorno de la seguridad, claro: http://www.guninski.com/frame2-desc.html.
La brecha permite acceder a cookies, archivos locales... Una joya, vamos. Creo que estaba corregido en el último parche del explorer, pero el workarround es Workaround: Disable Active Scripting

Compartir

Comentarios

Carlos Sosa

14/7/2002
Despues de leer este articulo, se me ocurrio que un IFRAME, podria tener un atributo que se pudiera fijar para que se expanda hasta mostrar todo el html que se cargue dentro de el, o sea que se pueda fijar un ancho y que el largo sea el apropiado, ni mas ni menos que el justo para mostrar todo su contenido sin cortar nada.

Luego de experimentar un poco, lo logre. Quizas de una forma no del todo correcta, pero funciona. quienes esten interesados, escribanme.

Carlos Sosa
Carlos@jodete.com

Diego

23/9/2002
El problema de esto es que solo anda en Internet Explorer, no?

En realidad los SSI no sirven porque si uno incluye un archivo que contiene imágenes estas no se ven, salvo que esten referenciado de manera relativa. Alguien tiene alguna solucion para esto ?

Respuesta

Si utilizas otras tecnologías como PHP tienes más control sobre los includes y puedes hacer todo tipo de direccionamientos, absolutos al sitio, relativos a la página o a la raiz del sitio.

El tema es que no manejo las SSI porque empezé a trabajar directamente con ASP y PHP y no te puedo decir cómo hacer las cosas sin temor a equivocarme, pero si alguien tiene idea que lo escriba como comentario.

Recuerdo que estas cosas se pueden preguntar en la lista de correo de ayuda.

alejandra

05/11/2002
el iframe solo funciona en explorer.. necesito algo que funcione en netscape también, alguien sabe?

COMENTARIO

A partir de versiones 6 o superioes de Netscape también se implementó compatibilidad con IFRAME.

Daniel

22/9/2003
El problema realmente serio surge con la versión de IExplorer 6.0.28. Con esta versión, cuando estableces un enlace con target="nombreiframe", la página no se carga en el iframe, sino que el explorador abre una ventana nueva!!!.

En versiones anteriores no ocurre esto. Por ahora aún estoy intentado solucionarlo, pero ando un poco perdido.

Si alguien tiene alguna idea, que me lo diga.

En Netscape, a partir de la verión 6, funciona prefectamente.

Icker Handrey

30/9/2003
Para Alejandra:

Se que es un poco tarde para la respuesta, pero no sabia de este web. Una solución para usar algo similar en NETSCAPE es ilayer, funciona muy bien desde la version 4.7 y seria más o menos así:

<iframe src="pagina.html">
<ilayer src="pagina.html"></ilayer>
</iframe>

Carlos Sosa

28/9/2004
El metodo que encontre (del que hablomas arriba) no sirve para cargar cualquier tipo de pagina....
La pagina cargada dentro del iframe debe ser propia....
esto es para poder incluir una rutina dentro del codigo de la pagina....
Esta rutina (en javascript) se encarga de modificar las dimensiones del IFRAME que contiene la pagina...
He confeccionado un ejemplo...
quizas no sea lo suficientemente didactico...
pero creo que podra dar una idea....


http://membres.lycos.fr/csosa/

o

http://membres.lycos.fr/csosa/index.html

Pueden probarlo e incluso bajarse el ejemplo para activarlo en su propia computadora....

Carlos.

jorge

01/7/2005
Se pueden pasar variables x url con el iframe? ej:
<IFRAME SRC="titular.php?id=$id&" NAME="ZONE1" HEIGHT="350" WIDTH="450">

jamp

23/10/2005
Que tan cierto es, que los iframes son buenos para que los hackers entren por ahi a nuestra web y sean modificadas.

Gracias

Luis

30/9/2006
Uno de los grandes inconvenientes de los iframes en IE es que no permiten el manejo de cookies, si por ejemplo se desea tener la pagina de google.com embebida en nuestro site, entonces al momento de que el usuario se logee, la pagina de google le devolvera un mensaje diciendo que las funciones de cookies estan desactivadas, esto se debe a que los iframes no aceptan cookies provenientes de terceras personas, es decir, el IE acepta cookies de la pagina madre que se carga, perono acepta cookies de la pagina embedida.

www.todoperiodicos.com

18/1/2007
Saludos, esto de los frames a nosotros nos ha salido muy "curradito"

expandiendo a nuestro antojo el iframe
puedes verlo en: www.todoperiodicos.com

saludos.

Iru

14/2/2007
Buenas!
Utilizando el iframe se puede hacer que este le pase el contenido a la página principal donde se encuentra el iframe. Por ejemplo si en nuestra página ponemos un iframe con un formulario que nuestra página pueda coger algún dato de ese formulario.
Muchas gracias

Darayon

01/1/2009
Pues a mi ver me a funcionado muy bien el iframe.
Claro hay paginas que son tan grandes que es mejor que se abra en una ventana nueva pero las paginas que caractes sensillo siempre se ven bien en la iframe los invito a ver que tal me quedo y con respecto al problema de que se habre en otra pagina y no en la iframe creo que es por que NO le ponen nombre a la iframe es decir que el archivo se abra en el iframe dirigiendola con el nombre.

mi pagina web es

http://darayon.com

Pablo Bras

02/2/2009
Hola, tengo una pagina web de agencia de viajes (www.viajesbrasmar.com), el buscador de vuelos es otra pagina que pertenece a la empresa que me proporciona la información. Al día de hoy tengo un banner en la pagina principal donde al dar click al boton te abre la otra pagina, pero estoy buscando la forma de hacerlo en iframe para que al momento de dar click en el boton aparezca como ligada a viajesbrasmar.com ¿Alguien me podría ayudar? soy nuevo en esto... Gracias

kevin

17/5/2009
Excelente
Valla es una nota excelente :D me sirvio mucho!!!

Oliver

18/5/2009
Un detalle para Dayaron
Primero agradecer a todos desde los que crearon este sitio web hasta los que participan con tanta dedicacion. En especial a Carlos.

Para Dayaron un pequeño detalle, fui a ver tu sitio web y tienes puesto el conosimiento nos hara libre, conocimiento es con C ....
Un saludo a todos

ROOMARCO

31/7/2009
IFRAME
BUENAS NOCHES COMO PUEDO HACER PARA INSERTAR ALGO A UN IFRME

chalio

01/10/2009
importante saber respecto al uso de iframe
he notado que la etiqueta iframe nos ayuda a colocar un marco flotanten sobre una pagina y yo la he usado varias veces pero saben algo es importante checar hacia donde estamos dirigiendo nuestro sitio ya que los usuarios que tengan otro navegador diferente al popular internet explorer o mozilla firefox como opera o safari no soportan esta etiqueta ojo
saludos

riglesias

28/2/2010
es posible mover el documento html dentro del iframe
Hola a todos

hace tiempo que utilizaba el iframe, ahora con los css4 mucho menos, pero necesito colocar en un solo documento html diferentes html cargados de otros sitios. Pense que una posibilidad eran lo iframes, pero el problema es que necesito centrar la información de ese segundo documento dentro del iframe, para ver solo la parte que me interesa... alguna idea

gracias

veronica

15/4/2010
iframe
necesito saber como puedo actualizar un iframe desde otro iframe, es decir cuando le envio datos de uno al otro no me responde

charo

02/11/2010
FRAMES
HOLA . ESTOY INTENTANDO PONER UN CUBO 3D CON FOTOS MIAS PERO CUANDO PONGO EL CODIGO EN MI PAGINA NO SALE NADA, HE VISTO POR INTERNET QUE HAY QUE PONER UN IFRAME, PERO YO NO ENTIENDO MUCHO DE ESTO ¿ME PUEDES EXPLICAR MUY CLARITO COMO SE HACE? ES QUE SOY UN POCO TORPE GRACIAS POR TODO

arturo

24/2/2011
mejora tu pagina kon mas ejemplos
fijensen ejta pagina: http://sestud.uv.es/manual.esp/frame.htm
tien ejemplos ejta muy buena... pero ustedes tienen mucho mas kontenido y solo les falta mas ejemplos y seran la mejor.. XD ¡¡¡

redinformaticagonzalez

22/3/2011
Iframes
hola Buen dia soy nuevo es esto de la programación, y publique Un sitio Web hace algunos días y no me gusta la manera como este pasa de una página a otra les dejo la Url para que la Vean http://www.catas.cl.

Cuendo doy Click en Bar En la Url se Refleja esto http://www.catas.cl/bar.html y asi susecibamente con todas las páginas.

Por Lo que me aconsejo Devo usar Un Inframe pero no se como?

Desde ya se Agradece.

tirso

26/3/2012
iframe
Hola estoy implementando un iframe

para mostrar una web

el problema que me pasa, es que en el iframe pongo un URL con datos de SECION .... para no tener que loguearse en el iframe

pero aun asi me muestra la pagina de inicio para registrarse

.....

alejafer79

16/7/2012
Necesito Ayuda con Iframe en IE
Tengo un problema. En Firefox, Chrome y Opera se ve bien mi Iframe, pero en Internet Explorer en vez de mostrarlo debajo del todo como debe ser, me lo muestra al costado. Lo que pasa es que yo tengo un ifrmae dentro de otro, y el iframe que esta dentro (solo en IE) se pone al costado, y se ve espantoso. Alguna ayuda? Necesito algo que no me modifique donde se ve bien. Muchas gracias!
El código que tengo para mostrar el segundo Iframe es el siguiente:
<p align="center"><iframe name=mapa width="650" height="500" allowtransparency="true" frameborder="no" scrolling="no" marginheight="0" marginwidth="0" src="https://XXX"></iframe></p>

nataliaBarkito

13/8/2012
Un formulario a varia paginas y como meter una web dentro de otra
pues bien tengo que montar una web utilizando el modelo-vista-controlador , mi web consta de unas plantillas en las que hay unos formularios en cada una , todas tienen un campo oculto el cual le da un valor a cada plantilla , este formulario tiene que ser enviado a varias paginas ,es decir , tengo que el campo oculto sea enviao a un index dnde yo elija que plantilla quiero utilizar y por tro lado ls datos del formulario sean enviado al controlador para poder operar con el. Ahora mismo todas mis variables son $_GET y por tanto todo funciona bien pero no se como enviar este formulari a los dos sitios a la vez . Por otro lado tambien necesito insertar estas plantillas dentro del index y que cada vez que le de a un enlace o a un boton lo que sea me aparezcan dentro del mismo index sin tener que cambiar de pagina. Muchas gracias

Waldier Rafael

04/5/2014
Google Sites
Hola, como insertar iframe en Google sites?. Podrian ayudarme

Albert Pino

15/7/2014
Dentro del iframe no funcionan las acciones jquery
Saludos, el conflicto es que la página local se carga y se muestra dentro del iframe, pero al hacer click en los botones la acción "animatescroll" no funciona, o sea no desplaza hacia el siguiente texto; pero en la pagina html cargada directamente si funciona correctamente.