Hispanopedia Wiki
Articulo de referencia

Marco (World Wide Web)

En el contexto de un navegador web , un marco es una parte de una página web o ventana del navegador que muestra contenido independientemente de su contenedor, con la capacidad ...

Hispanopedia WikiContenido en espanolLectura gratuita

En el contexto de un navegador web , un marco es una parte de una página web o ventana del navegador que muestra contenido independientemente de su contenedor, con la capacidad de cargar contenido de forma independiente. Los elementos HTML o multimedia de un marco pueden provenir de un sitio web distinto del sitio que proporciona el contenido que lo contiene. Esta práctica, conocida como enmarcado , [ 1 ] se considera hoy en día una violación frecuente de la política del mismo origen .

En HTML , un frameset es un grupo de marcos con nombre a los que se pueden dirigir páginas web y contenido multimedia; un iframe permite colocar un marco dentro del cuerpo de un documento.

Desde principios de la década de 2000, la preocupación por la usabilidad y la accesibilidad ha motivado una disminución en el uso de conjuntos de marcos, y el estándar HTML5 no los admite.

Etiquetas y atributos

Los marcos en HTML se crean usando el <frameset></frameset>par de etiquetas. La <frameset>etiqueta es una etiqueta contenedora para todas las demás etiquetas que se usan para crear marcos. La <frameset>etiqueta reemplaza la <body>etiqueta en documentos con conjunto de marcos <frameset>. La etiqueta define cómo dividir la ventana en marcos.

Cada conjunto de marcos define un conjunto de filas o columnas. Si el usuario define los marcos mediante el rowsatributo, se crean marcos horizontales. Si el usuario define los marcos mediante el atributo, colsse crean marcos verticales.

Este <noframes>elemento puede incluirse para que los navegadores web con marcos deshabilitados (o navegadores que no admiten marcos) puedan mostrar algo al usuario, como en este ejemplo:

< frameset cols = "85%, 15%" > < frame src = "http://www.example.com/frame_1.html" name = "frame_1" > < frame src = "http://alt.example.com/frame_2.html" name = "frame_2" > < noframes > Tu navegador no admite marcos. <a href="http://www.example.com/frame_1.html"> Haga clic aquí </a> para ver el marco 1. <a href="http://alt.example.com/frame_2.html"> Haga clic aquí </a> para ver el marco 2. </noframes> </frameset>​​​​​​

Los conjuntos de marcos tienen un borderatributo. Si se establece en un número entero mayor que 0, el usuario puede redimensionar los marcos arrastrando este borde, a menos que noresizeun elemento de marco tenga un atributo. Si el borde se establece en 0, no se mostrará ningún borde y el contenido de los diferentes marcos se juntará sin separación.

Este iframeelemento se utiliza en línea dentro de un cuerpo HTML normal y define el contenido y el nombre iniciales de forma similar al frameelemento. Cualquier texto dentro de un <iframe></iframe>par de etiquetas se mostrará en navegadores que no entiendan la etiqueta iframe.

< iframe src = " http://www.example.com/frame_1.html" height = " 480 " width = " 640 " > Su navegador no admite iframes. <a href="http://www.example.com/frame_1.html"> Haga clic aquí </a> para ver el contenido . </iframe>

Historia

Netscape Navigator 2.0 introdujo los elementos utilizados para los marcos en marzo de 1996. Otros proveedores de navegadores, como Apple con Cyberdog, siguieron su ejemplo más tarde ese mismo año. [ 2 ] En ese momento, Netscape propuso los marcos al Consorcio World Wide Web (W3C) para su inclusión en el estándar HTML 3.0. [ 3 ]

Los marcos se utilizaban para mostrar y navegar por las primeras revistas en línea y aplicaciones web , como servicios de correo web y sitios de chat . Los marcos tenían la ventaja de permitir que los elementos se mostraran en todo el sitio sin necesidad de funciones del servidor, como inclusiones del lado del servidor o compatibilidad con CGI . Estas funciones no eran comunes en los primeros servidores web accesibles al público.

Los primeros sitios web solían usar un marco en la parte superior para mostrar un banner que no se podía desplazar. Estos marcos de banner a veces incluían el logotipo del sitio, así como publicidad . [ 4 ]

XHTML 1.1, el sucesor previsto de HTML 4, eliminó todos los marcos. XFrames , el reemplazo previsto para el futuro, [ 5 ] proporcionó la URI compuesta para acceder a un conjunto de marcos poblado.

El estándar HTML5 posterior eliminó los conjuntos de marcos mediante métodos distintos a los de XHTML. [ 6 ] El iframeelemento conserva varias opciones de " aislamiento " destinadas a compartir contenido entre sitios. [ 7 ]

Ventajas

Al permitir que el contenido se cargara y navegara de forma independiente, los marcos ofrecían varias ventajas sobre el HTML simple que se utilizaba cuando se desarrollaron por primera vez:

  • Simplifica el mantenimiento del contenido compartido en todas o la mayoría de las páginas, como los datos de navegación. [ 8 ] Si se necesita agregar un elemento a un menú de navegación de la barra lateral, el autor de la página web solo necesita cambiar un archivo de página web, mientras que cada página individual en un sitio web tradicional sin marco tendría que editarse si el menú de la barra lateral apareciera en todas ellas.
  • Reduciendo la cantidad de ancho de banda necesario al no volver a descargar partes de la página que no han cambiado.
  • Permite visualizar varias piezas de información simultáneamente, con la posibilidad de desplazar cada sección de forma independiente. Esto podría incluir la comparación de dos imágenes o vídeos, o dos maneras diferentes de comprender algo, como una página de texto que se desplaza independientemente junto a un vídeo, imágenes, animaciones, objetos 3D giratorios, etc.
  • Permitir que las notas a pie de página o las digresiones aparezcan en una sección específica de la página cuando se haga referencia a ellas, para que el lector no pierda el hilo del texto principal.
  • La principal ventaja de los marcos es que permiten que algunas partes de la página permanezcan fijas mientras otras se desplazan. Esto resulta útil para elementos que no se desean ocultar, como las opciones de navegación o los anuncios publicitarios.
  • Los marcos unifican recursos que residen en servidores separados. Por ejemplo, puede usar marcos para combinar su propio material (y gráficos de navegación) con material de discusión encadenado generado.

Crítica

La práctica de enmarcar el contenido HTML generó numerosas críticas, la mayoría centradas en problemas de usabilidad y accesibilidad . Estas incluyen:

  • El uso de marcos rompe la identidad entre el contenido y la URL tal como se muestra en el navegador, lo que dificulta enlazar o marcar como favorito un elemento de contenido específico dentro del conjunto de marcos [ 9 ].
  • La implementación de marcos es inconsistente en diferentes navegadores [ 9 ]
  • Los navegadores que renderizan el material linealmente no manejan bien los marcos. [ 10 ]
  • El uso de marcos complica la indexación web y puede ser perjudicial para la optimización de motores de búsqueda . [ 12 ]
  • El framing confunde los límites entre el contenido en diferentes servidores, [ 13 ] lo que plantea problemas de infracción de derechos de autor [ 14 ].
  • Los visitantes que llegan desde motores de búsqueda pueden aterrizar en una página destinada a mostrarse en un marco, lo que resulta en que el visitante no tenga forma de navegar al resto del sitio [ 15 ].
  • Los marcos modifican el comportamiento del botón de retroceso. [ 15 ]
  • Los usuarios normalmente no esperan que los navegadores impriman los marcos de la forma en que lo hacen. [ 14 ]
  • Los enlaces externos en páginas web que utilizan marcos pueden provocar que otras páginas aparezcan dentro del conjunto de marcos, ya que, por defecto, un enlace se carga en el marco actual si el autor no especifica lo contrario. Esto podría ser aprovechado por administradores web inescrupulosos para simular que el contenido de otro sitio forma parte del sitio que aloja el conjunto de marcos.
  • Si la resolución de la pantalla o el tamaño de la ventana del navegador son demasiado bajos, cada marco tendrá barras de desplazamiento que pueden resultar desordenadas y ocupar un espacio ya limitado. Este comportamiento suele deberse a un mal diseño del sitio (diseños fijos en lugar de diseños fluidos), donde no se utilizan correctamente todas las funciones de los conjuntos de marcos. Este comportamiento podría mitigarse mediante:
    • Deshabilitar el desplazamiento para marcos más pequeños que normalmente no requerían una barra de desplazamiento;
    • Utilizar características de diseño fluidas en las páginas de destino en lugar de diseños fijos, para que el contenido no provoque barras de desplazamiento horizontales.

Seguridad

Los marcos crean dificultades tanto técnicas como de interfaz de usuario para la aplicación de la política del mismo origen . Como ejemplo de esto último, una página externa puede engañar a un usuario para que realice una acción en una página interna (cargada mediante el elemento iframe) que se ha hecho 99% transparente.

Alternativas

A medida que se desarrollaba la tecnología web, muchos de los propósitos para los que se utilizaban los marcos se hicieron posibles de maneras que evitaban los problemas identificados con los marcos.

  • Las hojas de estilo en cascada (CSS) permitían que los elementos de una página se desplazaran de forma independiente (usando la overflowpropiedad) o se mantuvieran en pantalla mientras se desplazaba otro contenido (usando position:fixed).
  • La función Server-Side Includes permitía editar el contenido compartido una sola vez y entregarlo automáticamente al cliente como parte de una página finalizada; a medida que aumentaban la velocidad de la CPU del servidor y de la conexión, el trabajo adicional necesario para hacerlo sobre la marcha dejó de ser un factor importante.
  • Los lenguajes de scripting orientados a CGI y a la web , así como los marcos de desarrollo web como PHP y Active Server Pages , y los sistemas de gestión de contenido basados ​​en bases de datos como WordPress , ofrecieron opciones mucho más completas para el mantenimiento del contenido y la navegación.
  • La programación del lado del cliente y el HTML dinámico permitieron reemplazar visualmente partes de una página según las acciones del usuario. Esto brindó mucha más flexibilidad para mostrar contenido secundario, como notas al pie o instrucciones, ya que ahora podían mostrarse y ocultarse en cualquier parte de la página, sin necesidad de un marco predefinido.
  • AJAX permitía la visualización dinámica de contenido dentro de una página, incluso cuando era necesario obtenerlo del servidor, por ejemplo, en función del usuario que había iniciado sesión o de eventos ocurridos en otros lugares.

Véase también

Referencias

  1. ↑ "Conexión a otros sitios web" . 2 de abril de 2013. La diferencia del enmarcado radica en que, en lugar de redirigir al usuario al sitio web enlazado, la información de dicho sitio se importa a la página original y se muestra en un "marco" especial. Técnicamente, al visualizar información enmarcada, el ordenador se conecta al sitio que realiza el enmarcado, no al sitio cuya página aparece en el marco.
  2. ↑ Garaffa, Dave (23 de diciembre de 1996). "Un regalo de Apple: Cyberdog 2.0a1" (Comunicado de prensa). Internet.com . Archivado del original el 17 de agosto de 2000. Recuperado el 14 de abril de 2011 .
  3. ↑ Ladd, Eric. "Uso de HTML 3.2, Java 1.1 y CGI; Cap. 13, Marcos" . Archivado del original el 30 de octubre de 2007.
  4. ↑ Shafer, Dan (1996). JavaScript & Netscape wizardry . Scottsdale, AZ: Coriolis Group Books. pp . 31. ISBN  978-1-883577-86-5.
  5. ↑ "Borrador de trabajo de XFrames" . W3C.
  6. ↑ Diferencias entre HTML5 y HTML4 : "Los siguientes elementos no están en HTML5 porque su uso perjudica la usabilidad: frame, frameset, noframes"
  7. ↑ Diferencias de HTML5 con respecto a HTML4 : "El elemento iframe tiene nuevos atributos llamados sandbox y srcdoc que permiten aislar el contenido, por ejemplo, los comentarios de un blog."
  8. ↑ "Conjuntos de marcos" .
  9. 1 2 Nielsen, Jakob (diciembre de 1996). "Los fotogramas apestan la mayor parte del tiempo" .
  10. ↑ "¿Deberías usar marcos?" . Tutorial de código HTML. Archivado del original el 6 de agosto de 2016. Consultado el 7 de abril de 2010 .
  11. ↑ "GEBoyd's Cómo hacer prácticamente cualquier cosa por correo electrónico – Parte 1" . GeoCities . 11 de agosto de 2000. Archivado del original el 17 de agosto de 2000. Consultado el 24 de junio de 2010 .
  12. ↑ Moore-Eded, Piers. "Fundamentos de SEO 1" . Lewes SEO . Consultado el 25 de febrero de 2012 .
  13. ↑ "Club de los que odian los marcos" . Archivado del original el 28 de marzo de 2002.
  14. 1 2 "¿Por qué son tan malvados los marcos?" .
  15. 1 2 "Ventajas y desventajas de los marcos en las páginas web" .
  • Ayuda de HTML: ¿Qué tienen de malo los marcos?
  • Consejos web de Dan: Marcos
  • Script diseñado para evitar la incrustación de tu contenido.
Marco (World Wide Web) | Hispanopedia Wiki