iFrames (incluye introducción al mundo del frame)

1. Los iFrames ayudan a insertar páginas con mayor control que usando los "frames" tradicionales.

Con los frames tradicionales se necesita una página web donde se definen la dimensión y posición de los marcos junto a las
llamadas a los documentos a insertar.

Esto genera una página "index" que se encuentra vacía de contenido haciendo que los usuarios de nuestro site, tengan que cargar (primero) una página vacía de contenido que genera los frames y (segundo) el contenido de cada página a insertar.

El tiempo de carga con los frames es mas lento que usando páginas simples donde todo el contenido y código reside en el mismo documento.

Que son los frames?

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

Con los iFrames, podemos insertar una página web dentro de otra, de la misma forma que insertamos un gráfico 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 página index al mostrar información, los buscadores pueden indexar el contenido de nuestro site de forma natural ofreciendo información relevante dentro de los resultados mostrados al usuario.

2. El uso mas natural es el de la publicidad y sites de colaboración.

Con el iFrame los banners cobran una nueva dimensión. El anunciante puede colocar dentro de un site una página web que va mas alla del banner, ya que el usuario podrá ser capar de rellenar un cuestionario, consultar mas páginas 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 cupón de descuento.

El usuario puede rellenar el cuestionario y finalizar el proceso sin abandonar el site de origen (este anuncio se encontró dentro de "Yahoo! Mail").

El problema que presentaba este anuncio es que el formulario era muy largo (hasta 4 pantallas dentro del iframe).

El iFrame también permite que, con mínimo mantenimiento, un site pueda permitir la colaboración de varias personas a la hora de ofrecer información sin interrumpir la producción por cambios en el diseño del mismo.

La unión de
hojas de estilo con iFrames ayuda a crear sites donde el mantenimiento (técnico, diseño, plantillas…) y la actualización del contenido no crean conflictos usando muy pocos recursos de programación.

3. El Iframe 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.

• A la hora de imprimir el contenido de una página 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 página hacia abajo creando una impresión errónea.

• Los bookmarks se hacen sobre la página que contiene el iFrame y no sobre el iFrame en concreto. Para solucionar esto,
  debes ofrecer una página exenta a la que el usuario pueda recurrir sin tener que pasar por el iFrame.

• Para los buscadores la solución pasa por crear metas apropiados y procurar ofrecer algo de contenido clave dentro de
  la página index. Procura crear un sumario del contenido ofrecido y haz referencias a la información mostrada dentro del iFrame.

El iFrame (al igual que el frame tradicional) no es una solución adecuada para mostrar contenido de forma intensiva. Si es adecuado para temas de publicidad, sites de colaboración entre varios usuarios y para crear sites con mantenimiento mínimo usando muy pocos recursos de programación.

4. Ejemplos, código, referencias.

Código general para crear un iFrame.

Ejemplo de iFrame con mas variables: