Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje17-10-2011, 22:02 (UTC)    
Título del mensaje: [TUTO] Iframes y usabilidad

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.

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. 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.

Imagen Vista:

Código:
http://www.desarrolloweb.com/articulos/images/usabilidad/print.gif


3. Ejemplos, codigo, referencias.

Codigo general para crear un iFrame.


Codigo Resultado

Cita:
<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;

Código:
<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>




Vista Previa

Cita:
http://guias-programas.es.tl/Inframe.htm




PD: Bueno este post fue creado espesial mente por el comentario que iso nuestro querido MOD TokArg , En el cual site su respuesta

tokarg escribió:
No sé si hay tutoriales acerca de los iframes. Estaría bueno contar con alguno que explique bien las funciones del código y especialmente cada atributo. En el código de arriba están faltando algunos de los atributos más importantes y en ocasiones son confundidos con estilos.
En relación a lo que nombra el amigo estilos-css, o Guias como le digo yo XD acerca de que un sitio es mejor con iframes no estoy muy de acuerdo. Yo uso algunos iframes en mi sitio porque tuve la necesidad de conectar mi web a una base de datos. Trato de usarlos lo menos posible y buscar todas las alternativas ya que no son fáciles de incrustar porque hay que definirlos en un width y height exacto además de la uniformidad que le dan a la carga de la página e interacción del usuario.
En el caso que dice estilos-css de colocar un banner rotativo lo que yo haría es usar javascript y de ese modo esquivar los iframes


Saludos!


Espero que el tutorial les alla sido de ayuda y les sirva a futuro :D !

FUENTE : http://www.desarrolloweb.com/articulos/667.php


Ultima edición por guias-programas el Vie Nov 25, 2011 11:56 pm; editado 1 vez
Mensaje17-10-2011, 22:11 (UTC)    
Título del mensaje:

buen tutorial amigo GyP
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje17-10-2011, 22:17 (UTC)    
Título del mensaje:

nuestrasxarlas escribió:
buen tutorial amigo GyP


Gracias por comentar :D xarlas
Mensaje17-10-2011, 23:46 (UTC)    
Título del mensaje:

Si tokarg llega a leer este, intenta probar con Ajax

Los iframes o frames tienen varias dificultades en cuanto al SEO debido a que están en otro sitio básicamente.

Por mas que quieras indexar esos resultados te veras en un gran problema para hacerlo :S
______________
Quieres mi web? Yo también :P
Mensaje17-10-2011, 23:50 (UTC)    
Título del mensaje:

En HTML5 la etiqueta <iframe> es obsoleta, se usa la etiqueta <object>

saludos!
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje18-10-2011, 10:40 (UTC)    
Título del mensaje:

todobanners escribió:
Si tokarg llega a leer este, intenta probar con Ajax

Los iframes o frames tienen varias dificultades en cuanto al SEO debido a que están en otro sitio básicamente.

Por mas que quieras indexar esos resultados te veras en un gran problema para hacerlo :S


Hola , Gracias por comentar , pero no entendi tu respuesta (:
Mensaje24-11-2011, 09:39 (UTC)    
Título del mensaje: Problema con <iframe>

En primer lugar gracias por el tutorial, es interesante.
En segundo lugar, una pregunta:
- En un apartado de mi pagina (http://lacepa.es.tl/PRENSA-LOCAL-DE-HOY.htm) he insertado unos iframes para mostrar las noticias locales, pero no se ven completas, por lo que me pregunto si hay alguna forma de reducir el tamaño de lo que se muestra en los iframes, para que se vean sin tener que desplazarse lateralmente, o en su defecto, algún otro modo de hacerlo, curioso y obtenga el mismo o similar resultado.
Muchas gracias por la atención, y un saludo.
Mensaje24-11-2011, 14:08 (UTC)    
Título del mensaje:

Buena Informacion, me ha sido util.
Saludos
______________


Ultima edición por idiomasdelmundo el Jue Nov 24, 2011 10:08 am; editado 1 vez
Mensaje24-11-2011, 21:34 (UTC)    
Título del mensaje:

idiomasdelmundo escribió:
Buena Informacion, me ha sido util.
Saludos


Gracias por comentar :D
Mensaje24-11-2011, 23:55 (UTC)    
Título del mensaje:

Buena Info guias programas
______________


Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group