Marcos

1.6 Marcos

Dentro del ámbito de los lenguajes de marcas, el concepto de marcos (en inglés, frames) representa una técnica fundamental para estructurar y distribuir contenidos en una página web. Los marcos permiten dividir una ventana del navegador en varias secciones independientes, cada una de las cuales puede cargar y mostrar un documento HTML distinto. Esta funcionalidad facilita la creación de interfaces complejas y modulares, donde diferentes áreas de la página pueden actualizarse o navegarse de forma autónoma, sin afectar al resto del contenido.

El uso de marcos fue muy popular en las primeras etapas del desarrollo web, especialmente en los años 90 y principios del siglo XXI. Sin embargo, con la evolución de las tecnologías y los estándares web, su uso ha sido en gran medida reemplazado por técnicas más modernas, como el diseño con CSS y JavaScript. A pesar de ello, comprender su funcionamiento y fundamentos es esencial para entender la historia del desarrollo web y las alternativas actuales.

En este apartado se abordarán los conceptos clave relacionados con los marcos, su estructura, ventajas, limitaciones y las mejores prácticas para su utilización en contextos específicos. Además, se analizará cómo los marcos se relacionan con otros métodos de estructuración de contenidos en páginas web modernas.

2. Marco Teórico y Fundamentos

2.1 Definiciones y Conceptos Clave

Un marco en el contexto del desarrollo web es un elemento que permite dividir la ventana del navegador en varias áreas independientes mediante la utilización de etiquetas específicas en HTML. Cada uno de estos segmentos puede cargar un documento HTML diferente, creando así una estructura de múltiples paneles dentro de una misma página.

El elemento principal para definir marcos en HTML clásico es la etiqueta <frameset>, que reemplaza a la etiqueta <body> en documentos que contienen marcos. Dentro del <frameset>, se colocan varias etiquetas <frame>, cada una especificando un documento distinto a cargar en ese marco particular.

Es importante distinguir entre:

• Marcos independientes: cada marco carga un documento separado y puede tener su propia navegación o contenido dinámico.
• Sistema de navegación: los marcos facilitan la creación de menús o barras laterales que permanecen constantes mientras el contenido principal cambia.

Por ejemplo, una estructura típica puede incluir un marco superior para el encabezado, un marco lateral para el menú y un marco central para el contenido principal.

2.2 Teorías y Principios

El uso de marcos responde a principios fundamentales relacionados con la modularidad y la separación de contenidos en el diseño web. Desde una perspectiva técnica, los marcos permiten:

• División lógica del contenido: separar distintas áreas funcionales dentro de una misma interfaz.
• Navegación persistente: mantener elementos como menús o cabeceras visibles mientras el resto del contenido cambia.
• Carga asíncrona parcial: actualizar solo ciertos marcos sin recargar toda la página.

Técnicamente, esta separación se realiza mediante la carga independiente de documentos HTML en cada marco. Sin embargo, desde el punto de vista conceptual, también implica una división clara entre estructura (marcos) y contenido (documentos cargados en ellos), siguiendo principios básicos del diseño modular.

Desde una perspectiva técnica más avanzada, los marcos también facilitan:

• Navegación diferenciada: permitir que diferentes partes del sitio tengan su propia lógica de navegación.
• Persistencia del estado: mantener ciertos elementos visibles o interactivos sin recargar toda la interfaz.

2.3 Desarrollo Teórico

El elemento <frameset> fue introducido en HTML 4.01 como parte del estándar para crear páginas con múltiples paneles. La estructura básica consiste en definir las divisiones horizontales o verticales mediante atributos como rows (filas) o cols (columnas). Por ejemplo:

<frameset rows="100,*">
  <frame src="cabecera.html">
  <frame src="contenido.html">
</frameset>

En este ejemplo, se crea un marco superior fijo para la cabecera y un marco inferior que ocupa el resto del espacio para el contenido principal.

Los atributos principales son:

• rows: define las alturas horizontales de los marcos (ejemplo: "100px", "20%, *").
• cols: define las anchuras verticales (ejemplo: "200px", "30%, *").
• src: indica la URL del documento HTML que se cargará en ese marco.
• Name: permite asignar un nombre a cada marco para referenciarlo desde enlaces o scripts.

Cada <frame> puede tener atributos adicionales como name, longdesc, scrolling, etc., que controlan aspectos específicos de su comportamiento y accesibilidad.

No obstante, cabe señalar que el uso de <frameset> y <frame> ha sido desaconsejado desde HTML5 debido a problemas relacionados con accesibilidad, usabilidad y compatibilidad con dispositivos móviles. En su lugar, se recomienda utilizar técnicas modernas basadas en CSS y JavaScript para lograr estructuras similares sin recurrir a estos elementos obsoletos.

2.4 Relaciones y Contexto con Otros Conceptos del Curso

Los marcos están estrechamente relacionados con otros conceptos abordados en este curso:

• Estructura del documento HTML: Los marcos definen cómo se distribuyen diferentes documentos dentro de una misma ventana del navegador.
• Navegadores web: La compatibilidad y soporte para marcos varía según el navegador; por ejemplo, navegadores modernos limitan o eliminan soporte para <frameset>.
• Técnicas modernas: La evolución hacia diseños responsivos y dinámicos ha desplazado el uso de marcos hacia soluciones como AJAX, componentes web y frameworks JavaScript.
• Sistemas de navegación: Los marcos facilitaban crear sistemas complejos donde diferentes áreas tenían sus propias rutas o enlaces internos.

3. Ejemplos Aplicados

Ejemplo 1: Estructura básica con marcos horizontales

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo simple con marcos</title>
</head>
<frameset rows="100,*">
  <frame src="encabezado.html" name="encabezado">
  <frame src="contenido.html" name="contenido">
</frameset>
</html>

Aquí se crea una página que divide la ventana en dos partes horizontales: un encabezado fijo y un área principal para contenido dinámico. Cada uno carga documentos distintos (encabezado.html, contenido.html) que pueden contener sus propios contenidos HTML.

Ejemplo 2: Uso profesional en intranet corporativa

<!DOCTYPE html>
<html>
<head>
  <title>Sistema interno</title>
</head>
<frameset cols="200,*">
  <frame src="menu.html" name="menu">
  <frame src="principal.html" name="principal">
</frameset>
</html>

En este escenario empresarial, se utiliza un marco lateral para el menú (menu.html) que permite navegar por diferentes módulos o funciones del sistema interno sin recargar toda la interfaz. La sección principal (principal.html) muestra los contenidos específicos seleccionados por el usuario desde el menú lateral.

Ejemplo 3: Caso complejo con múltiples niveles anidados (teórico)

<!DOCTYPE html>
<html>
<head></head>
<frameset rows="50,*">
  <frame src="topbar.html" name="topbar">
  <frameset cols="200,*">
    <frame src="sidebar.html" name="sidebar">
    <frame src="content.html" name="content">
  </frameset>
</frameset>
</html>

Aquí se combina una estructura anidada: un marco superior para la barra superior y debajo un conjunto horizontal dividido entre barra lateral y área principal. Este esquema refleja sistemas más complejos donde diferentes niveles jerárquicos facilitan la navegación avanzada.

Síntesis visual:

4. Análisis y Consideraciones Especiales

Aunque los marcos ofrecen ventajas evidentes en términos de modularidad visual y persistencia de elementos como menús o cabeceras, presentan varias limitaciones importantes:

• Afectación a la accesibilidad: Los sistemas basados en marcos complican la navegación para usuarios con discapacidades, ya que muchos lectores de pantalla tienen dificultades para interpretar estructuras fragmentadas correctamente.
• Dificultades SEO: Los motores de búsqueda pueden tener problemas para indexar correctamente contenidos distribuidos en múltiples marcos si no están bien configurados.
• No compatible con dispositivos móviles: La mayoría de los dispositivos móviles no soportan bien los marcos debido a restricciones en tamaño y adaptabilidad responsive.
• Sustitución por técnicas modernas: Actualmente, tecnologías como CSS Flexbox/Grid junto con JavaScript permiten crear diseños responsivos e interactivos sin recurrir a estructuras basadas en marcos obsoletas.

A nivel práctico, si se decide utilizar marcos por motivos específicos (como aplicaciones legacy), es recomendable limitar su uso a casos controlados y garantizar alternativas accesibles mediante técnicas complementarias como ARIA roles o enlaces internos bien estructurados.

5. Síntesis y Conceptos Clave

Bajo este apartado hemos analizado el concepto fundamental de "marcos", entendiendo su definición técnica, principios subyacentes, estructura formal mediante etiquetas HTML específicas (<frameset>, <frame>) y sus aplicaciones prácticas tanto históricas como actuales (en contextos legacy). Se ha destacado además su relación con otros conceptos clave del curso como la estructura documental, navegadores web y técnicas modernas alternativas.

Pese a su obsolescencia tecnológica actual, comprender cómo funcionaban los marcos ayuda a entender la evolución del diseño web hacia enfoques más eficientes, accesibles y adaptativos basados en CSS y JavaScript. La correcta interpretación histórica también facilita decisiones informadas sobre cuándo aplicar soluciones tradicionales frente a tecnologías modernas emergentes.

Con este conocimiento profundo sobre los "marcos", estamos preparados para abordar temas relacionados con técnicas avanzadas de estructuración visual y funcionalidad dinámica en páginas web modernas dentro del siguiente módulo del curso.