Arquitectura Central

Propósito y Alcance

Este documento explica los componentes arquitectónicos centrales de la aplicación Crónicas de Mérida, enfocándose en el sistema de enrutamiento, la estructura del diseño y el flujo de la aplicación. Proporciona una visión técnica de cómo las diferentes partes de la aplicación están organizadas e interactúan entre sí.

Para información sobre la autenticación de usuarios y el control de acceso basado en roles, consulta la sección de Gestión de Usuarios. Para detalles sobre subsistemas funcionales específicos, consulta su documentación respectiva: Sistema de Foro, Gestión de Materiales y Sistema de Notificaciones.

Visión General

La aplicación Crónicas de Mérida sigue una arquitectura de enrutamiento centralizado con una plantilla de diseño consistente. La aplicación está construida utilizando PHP para el procesamiento del lado del servidor, con CSS y JavaScript para la presentación e interactividad en el cliente.

Sistema de Enrutamiento

La aplicación utiliza un sistema de enrutamiento basado en parámetros centrado en el archivo index.php. Este enrutador central procesa las solicitudes entrantes y las dirige a los archivos de vista apropiados basándose en el parámetro de consulta pag en la URL.

Flujo de Enrutamiento

El proceso de enrutamiento funciona de la siguiente manera:

1. El archivo index.php es el punto de entrada para todas las solicitudes.
2. Se inicia una sesión y se verifica la autenticación del usuario.
3. Se inicializan las variables de rol del usuario basadas en la sesión actual.
4. Se incluye la vista apropiada basada en el parámetro pag en la URL.
5. Si el parámetro pag no coincide con ninguna vista conocida, se muestra una página de error.

La declaración switch en index.php maneja más de 20 rutas diferentes, mapeando cada una a un archivo de vista específico en el directorio views.

Estructura del Diseño

La aplicación implementa una estructura de diseño consistente en todas las páginas. El diseño principal consiste en:

Componentes del Diseño

El diseño se implementa utilizando un diseño basado en flexbox que asegura:

1. El encabezado contiene el banner del sitio en la parte superior de cada página.
2. El menú de navegación aparece debajo del encabezado y puede volverse "pegajoso" al desplazarse.
3. El área de contenido principal se expande para llenar el espacio disponible, manteniendo el pie de página en la parte inferior.
4. El pie de página está consistentemente posicionado en la parte inferior de la página.

El CSS que organiza este diseño está definido principalmente en el archivo styles.css principal, con variantes responsivas cargadas según el tamaño de la pantalla.

Estructura del CSS del Diseño

Componente CSS	Selector	Propósito
Contenedor	.wrapper	Contenedor flex para todo el diseño de la página
Encabezado	header	Contiene el banner del sitio con imagen de fondo
Banner	.banner	Muestra el título del sitio con estilo
Menú	.menu	Menú de navegación con capacidad de posición fija
Contenido	main	Área de contenido flexible con alineación centrada
Pie de página	.footer	Área de pie de página fija en la parte inferior

Flujo de la Aplicación

El flujo principal de la aplicación sigue un patrón de solicitud-respuesta típico de las aplicaciones web en PHP. Cada solicitud pasa por el punto de entrada index.php y se procesa de la siguiente manera:

Secuencia de Procesamiento de Solicitudes

Puntos clave en el flujo de la aplicación:

1. La gestión de sesiones comienza inmediatamente en index.php.
2. Los roles de usuario se determinan al principio del proceso.
3. La estructura de la página (encabezado, menú, área de contenido, pie de página) es consistente en todas las vistas.
4. La selección de la vista se determina por el parámetro pag.
5. Diferentes roles de usuario pueden ver diferentes elementos de la interfaz de usuario (por ejemplo, botón de ayuda para jugadores).

Arquitectura CSS

La aplicación emplea un enfoque estructurado de CSS utilizando variables CSS y organización basada en componentes.

Variables CSS

La aplicación define un conjunto de variables CSS (propiedades personalizadas) para mantener colores y tipografía consistentes en toda la interfaz:

:root {
  --color-primario: #123456;
  --color-secundario: #abcdef;
  --fuente-principal: 'Arial', sans-serif;
  /* Otras variables */
}

Estas variables crean un lenguaje visual consistente y facilitan la implementación de modificaciones temáticas.

Estructura de componentes

El CSS está organizado por componente, con convenciones de nombres claras que siguen una metodología similar a la BEM:

Tipo de componente	Seleccionadores de ejemplo	Objeto
Componentes de diseño	.wrapper, .menu, .footer	Estructura de la página
Componentes de la interfaz de usuario	.card, .form-card, .login-box	Elementos de interfaz reutilizables
Utilidades	.hidden	Clases de ayuda para necesidades comunes
Modificadores	--success, --danger	Estilos de variantes para componentes

Puntos de integración

La arquitectura central proporciona varios puntos de integración clave para otros subsistemas: 1. autenticación basada en sesión: El objeto de usuario se almacena en la sesión y está disponible para todas las vistas 2. variables de acceso basadas en el rol: Variables como $es_admin, $es_moderadoracceso a las características 3. Inclusión de la vista central : Todo el contenido se carga a través del área de contenido principal 4. Estilo común: Las variables CSS y las clases de componentes aseguran la consistencia visual

Diagrama de integración

Consideraciones técnicas

Cabe destacar varios aspectos técnicos clave de la arquitectura central:

1. Manejo de errores centralizado : Rutas inválidas por defecto a una página de error
2. Conexión de base de datos consistente: Se establece y se reutiliza una sola conexión
3. Base de diseño sensible: El CSS está estructurado para soportar diferentes tamaños de dispositivo
4. Adaptación de la interfaz de usuario basada en el papel de la función de usuario basada en la función de usuario
5. Integración de JavaScript : El script básico se carga para todas las páginas

Estas consideraciones garantizan que la aplicación siga siendo sostenible y proporciona una experiencia de usuario coherente en diferentes partes del sistema.