Combinación de múltiples elementos HTML para visualización de páginas web
En el contexto de un navegador web , un marco es 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. El HTML o los elementos 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] hoy en día suele considerarse una violación de la política del mismo origen .
En HTML , un conjunto de marcos es un grupo de marcos con nombre al que se pueden dirigir páginas web y 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 la <body>etiqueta en los documentos de conjuntos 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 marcos utilizando el rowsatributo, se crean marcos horizontales. Si el usuario define marcos mediante el uso, colsse crean marcos verticales.
El <noframes>elemento puede incluirse para que los navegadores web con marcos deshabilitados (o navegadores que no los admitan) 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" nombre = "frame_2" > < noframes > Su navegador no soporta 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 cuadro 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 noresizehaya un atributo presente en un elemento del marco. Si el borde se establece en 0, no se mostrará ningún borde y el contenido de diferentes marcos lindará 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 navegadores que no comprendan 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 ese mismo año. [2] En ese momento, Netscape propuso marcos al World Wide Web Consortium (W3C) para su inclusión en el estándar HTML 3.0. [3]
Los marcos se utilizaron para mostrar y navegar por 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 requerir funciones del servidor como inclusiones del lado del servidor o soporte CGI . Estas características 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. Estos marcos de banner a veces incluían el logotipo del sitio además de publicidad . [4]
XHTML 1.1, el sucesor previsto de HTML 4, eliminó todos los marcos. XFrames , el eventual reemplazo previsto, [5] proporcionó el URI compuesto para abordar un conjunto de marcos poblado.
El último estándar HTML5 eliminó los conjuntos de marcos por medios diferentes a XHTML. [6] El iframeelemento permanece con una serie de opciones de " zona de pruebas " 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 al menú de navegación de la barra lateral, el autor de la página web debe cambiar solo un archivo de la página web, mientras que cada página individual en un sitio web tradicional sin marcos tendría que editarse si apareciera el menú de la barra lateral. sobre todos ellos.
- Reducir la cantidad de ancho de banda necesario al no volver a descargar partes de la página que no habían cambiado.
- Permitir ver varias piezas de información una al lado de la otra, con la posibilidad de desplazarse por cada sección de forma independiente. Esto podría incluir la comparación lado a lado de dos imágenes o videos, o dos formas diferentes de entender algo, como una página de texto que se desplaza de forma independiente junto a un video, 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 se vincula, para que el lector no pierda su lugar en el texto principal.
[9]
Crítica
La práctica de enmarcar contenido HTML generó numerosas críticas, la mayoría centradas en preocupaciones de usabilidad y accesibilidad . Éstas incluyen:
- El encuadre rompe la identidad entre el contenido y la URL tal como se muestra en el navegador, lo que dificulta vincular o marcar un elemento particular de contenido dentro del conjunto de marcos [10]
- La implementación de marcos es inconsistente en diferentes navegadores [10]
- Los navegadores que renderizan material linealmente no manejan bien los fotogramas. [11]
- El enmarcado complica la indexación web y puede ser perjudicial para la optimización de los motores de búsqueda . [13]
- El framing 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. [dieciséis]
- Los usuarios normalmente no esperan que los navegadores impriman marcos como 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 cargar 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 en realidad del sitio que aloja el conjunto de marcos.
- Si la resolución de la pantalla o el tamaño de la ventana del navegador es demasiado bajo, cada cuadro tendrá barras de desplazamiento que pueden verse desordenadas y ocupar un espacio ya limitado. Este comportamiento normalmente se debe más bien a un mal diseño del sitio (diseños fijos en lugar de diseños fluidos), por lo que no todas las funciones del conjunto de marcos se utilizaron correctamente.
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 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.
Alternativas
A medida que se desarrolló la tecnología web, muchos de los propósitos para los cuales se utilizaron los marcos se hicieron posibles de manera que evitaron 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) - Las inclusiones del lado del servidor permitieron 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 la CPU del servidor y las velocidades de conexión aumentaron, el trabajo adicional requerido para hacer esto sobre la marcha pasó a ser una consideración menor.
- CGI y lenguajes de programación orientados a la web y marcos de desarrollo web como PHP y Active Server Pages , así como sistemas de gestión de contenidos respaldados por bases de datos como WordPress , proporcionaron opciones mucho más ricas para mantener el contenido y proporcionar navegación.
- Las secuencias de comandos del lado del cliente y el HTML dinámico permitieron reemplazar visualmente partes de una página en función de las acciones del usuario. Esto permitió mucha más flexibilidad para mostrar contenido "lateral", como notas a pie de página o instrucciones, ya que ahora se podían mostrar y ocultar en cualquier lugar 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 recuperarlo del servidor, por ejemplo, en función del usuario que inició sesión o eventos en otros lugares.
Ver también
Referencias
- ^ "Conexión a otros sitios web". 2 de abril de 2013.
Lo que hace que el encuadre 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ás viendo información enmarcada, tu computadora está conectada al sitio que realiza el encuadre, no al sitio cuya página aparece en el marco.
- ^ Garaffa, Dave (23 de diciembre de 1996). "Un regalo de Apple: Cyberdog 2.0a1" (Presione soltar). Internet.com . Archivado desde el original el 17 de agosto de 2000 . Consultado el 14 de abril de 2011 .
- ^ Muchacho, Eric. "Uso de HTML 3.2, Java 1.1 y CGI; Capítulo 13, Marcos". Archivado desde el original el 30 de octubre de 2007.
- ^ Shafer, Dan (1996). Magia de JavaScript y Netscape . Scottsdale, AZ: Libros del grupo Coriolis. págs.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 daña la usabilidad: frame, frameset, noframes"
- ^ Diferencias entre HTML5 y HTML4: "El elemento iframe tiene nuevos atributos llamados sandbox y srcdoc que permiten el contenido sandboxing, por ejemplo, comentarios de blogs".
- ^ "Conjuntos de cuadros".
- ^ Roberts, L, Juan. «CSS y SEO» . Consultado el 28 de enero de 2022 .
- ^ ab Nielsen, Jakob (diciembre de 1996). "Los fotogramas apestan la mayor parte del tiempo".
- ^ "¿Debería utilizar marcos?". Tutorial de código HTML.
- ^ "Cómo hacer casi cualquier cosa por correo electrónico de GEBoyd - Parte 1". GeoCiudades . 11 de agosto de 2000. Archivado desde el original el 17 de agosto de 2000 . Consultado el 24 de junio de 2010 .
- ^ Moore-Eded, Muelles. "Fundamentos de SEO 1". SEO de Lewes . Consultado el 25 de febrero de 2012 .
- ^ "Odio el club Frames".
- ^ ab "¿Por qué los marcos son tan malvados?".
- ^ ab "Los pros y los contras de los marcos en las páginas web".
enlaces externos
- Ayuda HTML: ¿Qué hay de malo con los marcos?
- Consejos web de Dan: marcos
- Script diseñado para evitar el encuadre de su contenido
