Combinación de múltiples elementos HTML para visualización de páginas 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 de cargar contenido de forma independiente. Los elementos HTML o multimedia en un marco pueden provenir de un sitio web distinto del sitio que proporciona el contenido adjunto. Esta práctica, conocida como framing , [1] se considera hoy en día a menudo como una violación de la política del mismo origen .
En HTML , un conjunto de marcos es un grupo de marcos con nombre a los que se pueden dirigir las páginas web y los medios; 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 un menor uso de conjuntos de marcos y el estándar HTML5 no los admite.
Etiquetas y atributos
Los marcos en HTML se crean utilizando el <frameset></frameset>par de etiquetas. La <frameset>etiqueta es una etiqueta contenedora para todas las demás etiquetas que se utilizan para crear marcos. La <frameset>etiqueta reemplaza a la <body>etiqueta en documentos de conjunto de marcos. La <frameset>etiqueta define cómo dividir la ventana en marcos.
Cada conjunto de marcos define un conjunto de filas o columnas. Si el usuario define marcos mediante el rowsatributo, se crean marcos horizontales. Si el usuario define marcos mediante el atributo cols, se crean marcos verticales.
El <noframes>elemento se puede incluir 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.ejemplo.com/frame_1.html" name = "frame_1" > < frame src = "http://alt.ejemplo.com/frame_2.html" name = "frame_2" > < noframes > Su navegador no admite marcos. < a href = "http://www.example.com/frame_1.html" > Haga clic aquí </ a > para ver el fotograma 1. < a href = "http://alt.example.com/frame_2.html" > Haga clic aquí </ a > para ver el fotograma 2. </ noframes > </ frameset >
Los conjuntos de marcos tienen un borderatributo. Si se establece en un número entero mayor que 0, el usuario puede cambiar el tamaño de los marcos arrastrando este borde, a menos que noresizeexista un atributo en un elemento de marco. Si el borde se establece en 0, no se mostrará ningún borde y el contenido de los diferentes marcos se unirá entre sí sin delineación.
El iframeelemento se utiliza en línea dentro de un cuerpo HTML normal y define el contenido inicial y el nombre de manera similar al frameelemento. Cualquier texto dentro de un <iframe></iframe>par de etiquetas se mostrará en los navegadores que no entiendan la etiqueta iframe.
< iframe src = "http://www.example.com/frame_1.html" height = "480" width = "640" > Su navegador no soporta iframes. < a href = "http://www.example.com/frame_1.html" > Haga clic aquí </ a > para ver el contenido. </ iframe >
Historia
En marzo de 1996, Netscape Navigator 2.0 introdujo los elementos utilizados para los marcos. Más tarde ese mismo año , otros proveedores de navegadores, como Apple con Cyberdog, siguieron su ejemplo. [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 usaban para mostrar y navegar en las primeras revistas en línea y aplicaciones web , como servicios de correo web y sitios de chat web . 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 utilizar un marco en la parte superior para mostrar un banner que no se podía desplazar hacia afuera. Estos marcos de banner a veces incluían el logotipo del sitio y también publicidad . [4]
XHTML 1.1, el sucesor previsto de HTML 4, eliminó todos los marcos. XFrames , el reemplazo previsto, [5] proporcionó la URI compuesta para abordar un conjunto de marcos poblado.
El estándar HTML5 posterior eliminó los conjuntos de marcos por medios diferentes a XHTML. [6] El iframeelemento permanece con una serie de opciones de " sandboxing " 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 usaba cuando se desarrollaron por primera vez:
- Simplificar el mantenimiento del contenido compartido en todas o la mayoría de las páginas, como los datos de navegación. [8] Si es necesario 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 marcos tendría que editarse si el menú de la barra lateral apareciera en todas ellas.
- Reducir la cantidad de ancho de banda necesario al no volver a descargar partes de la página que no han cambiado.
- Permite visualizar varios fragmentos de información uno al lado del otro, con la posibilidad de desplazarse por cada sección de forma independiente. Esto puede incluir la comparación de dos imágenes o vídeos uno al lado del otro, o dos formas diferentes de entender algo, como una página de texto que se desplaza de forma independiente junto a un vídeo, imágenes, animaciones, objetos giratorios en 3D, etc.
- Permitir que las notas a pie de página o digresiones aparezcan en una sección dedicada de la página cuando exista un enlace, para que el lector no pierda su lugar en el texto principal.
- La principal ventaja de los marcos es que permiten que partes de la página permanezcan fijas mientras otras se desplazan. Esto resulta útil para elementos que no desea que se desplacen fuera de la vista, como las opciones de navegación o los banners 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 generado por hilo
[9]
Crítica
La práctica de enmarcar el contenido HTML generó numerosas críticas, la mayoría centradas en cuestiones de usabilidad y accesibilidad . Entre ellas, se incluyen las siguientes:
- El encuadre rompe la identidad entre el contenido y la URL tal como se muestra en el navegador, lo que dificulta vincular o marcar como favorito un elemento de contenido particular dentro del conjunto de marcos [10].
- La implementación de marcos es inconsistente en diferentes navegadores [10]
- Los navegadores que representan el material de forma lineal no manejan bien los fotogramas. [11]
- El encuadre complica la indexación web y puede ser perjudicial para la optimización de los motores de búsqueda . [13]
- El encuadre confunde los límites entre el contenido en diferentes servidores, [14] lo que plantea problemas de infracción de derechos de autor [15]
- Los visitantes que llegan desde motores de búsqueda pueden llegar a una página destinada a mostrarse en un marco, lo que hace que el visitante no tenga forma de navegar al resto del sitio [16].
- Los marcos cambian el comportamiento del botón Atrás. [16]
- Los usuarios generalmente no esperan que los navegadores impriman los marcos de la forma en que lo hacen. [15]
- Los enlaces externos en páginas web que utilizan marcos pueden hacer que otras páginas aparezcan en el conjunto de marcos, ya que el comportamiento predeterminado de un enlace es cargarse en el marco actual si el autor no especifica lo contrario. Esto podría ser utilizado por webmasters sin escrúpulos para hacer que parezca 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 verse desordenadas y ocupar un espacio ya limitado. Este comportamiento generalmente es el resultado de un mal diseño del sitio (diseños fijos en lugar de diseños fluidos), en el que no se utilizaron correctamente todas las características del conjunto de marcos.
Este comportamiento se puede mitigar de la siguiente manera:- deshabilitar el desplazamiento para marcos más pequeños que normalmente no requieren una barra de desplazamiento;
- utilizando características de diseño fluido en las páginas de destino en lugar de diseños fijos, de modo que el contenido no provoque barras de desplazamiento horizontales en primer lugar.
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 vuelto 99% transparente.
Alternativas
A medida que se desarrolló la tecnología web, muchos de los propósitos para los cuales 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 la pantalla mientras se desplazaba otro contenido (usando position:fixed). - Server-Side Includes permitió que el contenido compartido se editara una vez y se entregara automáticamente al cliente como parte de una página terminada; a medida que aumentaron las velocidades de conexión y de la CPU del servidor, el trabajo adicional requerido para hacer esto sobre la marcha pasó a ser una consideración menor.
- Los lenguajes de programación CGI y orientados a la web y los marcos de desarrollo web como PHP y Active Server Pages , así como los sistemas de gestión de contenido respaldados por bases de datos como WordPress , proporcionaron opciones mucho más completas para mantener el contenido y proporcionar navegación.
- La creación de scripts del lado del cliente y el HTML dinámico permitieron que partes de una página se reemplazaran visualmente en función de las acciones del usuario. Esto permitió una mayor flexibilidad para mostrar contenido "secundario", como notas al pie o instrucciones, ya que ahora se podían mostrar y ocultar en cualquier parte de la página en lugar de requerir un marco predefinido.
- AJAX permitió la visualización dinámica dentro de una página de contenido incluso cuando es necesario obtenerlo del servidor, por ejemplo, en función del usuario que inició sesión o de eventos en otro lugar.
Véase también
Referencias
- ^ "Conexión a otros sitios web". 2 de abril de 2013.
Lo que hace que el enmarcado sea diferente es que, en lugar de llevar al usuario al sitio web vinculado, la información de ese sitio web se importa a la página original y se muestra en un "marco" especial. Técnicamente, cuando está viendo información enmarcada, su computadora está conectada al sitio que realiza el enmarcado, no al sitio cuya página aparece en el marco.
- ^ Garaffa, Dave (23 de diciembre de 1996). "Un regalo de Apple: Cyberdog 2.0a1" (Nota de prensa). Internet.com . Archivado desde el original el 17 de agosto de 2000. Consultado el 14 de abril de 2011 .
- ^ Ladd, Eric. "Uso de HTML 3.2, Java 1.1 y CGI; Cap. 13, Marcos". Archivado desde el original el 30 de octubre de 2007.
- ^ Shafer, Dan (1996). La magia de JavaScript y Netscape . Scottsdale, AZ: Coriolis Group Books. pp. 31. ISBN. 978-1-883577-86-5.
- ^ "Borrador de trabajo de XFrames". W3C.
- ^ Diferencias entre HTML5 y HTML4: "Los siguientes elementos no están en HTML5 porque su uso perjudica la usabilidad: frame, frameset, noframes"
- ^ Diferencias entre HTML5 y HTML4: "El elemento iframe tiene nuevos atributos llamados sandbox y srcdoc que permiten el uso de contenido en sandbox, por ejemplo, comentarios de blogs".
- ^ "Conjuntos de marcos".
- ^ Roberts, L, John. "CSS y SEO" . Consultado el 28 de enero de 2022 .
- ^ de Nielsen, Jakob (diciembre de 1996). "Los marcos apestan la mayor parte del tiempo".
- ^ "¿Deberías usar marcos?". Tutorial de código HTML. Archivado desde el original el 6 de agosto de 2016. Consultado el 7 de abril de 2010 .
- ^ "GEBoyd's How To Do Just About Anything by email – Part 1" (Cómo hacer casi cualquier cosa por correo electrónico de GEBoyd, parte 1). GeoCities . 11 de agosto de 2000. Archivado desde el original el 17 de agosto de 2000 . Consultado el 24 de junio de 2010 .
- ^ Moore-Eded, Piers. "Fundamentos de SEO 1". Lewes SEO . Consultado el 25 de febrero de 2012 .
- ^ "Club del odio a los marcos".
- ^ ab "¿Por qué los marcos son tan malvados?".
- ^ ab "Los pros y contras de los marcos en las páginas web".
Enlaces externos
- Ayuda HTML: ¿Qué pasa con los marcos?
- Consejos web de Dan: marcos
- Script diseñado para evitar enmarcar su contenido
