Diseño y Estilo - ManuelJDonoso/Proyecto_daw GitHub Wiki
Este documento detalla el sistema de estilos base y la estructura de diseño de la aplicación Crónicas de Mérida. Cubre la estructura HTML fundamental, la organización de CSS y el enfoque de diseño responsivo utilizado en toda la aplicación. Para información sobre el sistema de enrutamiento que completa esta estructura de diseño, consulta la sección de Sistema de Enrutamiento.
La aplicación sigue una estructura de diseño consistente en todas las páginas. Esta estructura consta de cuatro componentes principales: contenedor (wrapper), encabezado (header), área de contenido principal y pie de página (footer).
El diseño se implementa como un contenedor de caja flexible (flexbox) que asegura que el pie de página permanezca en la parte inferior de la página, independientemente de la altura del contenido. El área de contenido principal se expande para llenar el espacio disponible.
La estructura HTML fundamental se define en index.php e incluye:
-
head.php: Contiene las etiquetas<head>y enlaces a hojas de estilo. -
menu.php: Define el menú de navegación. -
main: Área principal donde se carga el contenido dinámico. -
footer: Pie de página con información adicional.
La aplicación utiliza un enfoque estructurado para CSS con una hoja de estilos principal y hojas de estilos específicas para diferentes puntos de ruptura (breakpoints) para el diseño responsivo.
La hoja de estilos principal (styles.css) define variables CSS (propiedades personalizadas) que establecen un esquema de colores y tipografía consistentes en toda la aplicación. Estas variables se definen a nivel raíz y se referencian en todos los archivos CSS.
| Variable | Propósito | Valor |
|---|---|---|
--background-color |
Color de fondo principal | #232946 |
--headline-color |
Color del texto de encabezados | #fffffe |
--paragraph-color |
Color del texto del cuerpo | #b8c1ec |
--button-bg-color |
Fondo por defecto de botones | #eebbc3 |
--button-bg-color-success |
Fondo de botón de éxito | #28a745 |
--button-bg-color-danger |
Fondo de botón de alerta/peligro | #e04444 |
--button-text-color |
Color del texto de botones | #232946 |
--font-montserrat |
Fuente principal para títulos | "Montserrat", sans-serif |
--font-opensans |
Fuente principal para texto | "Open Sans", sans-serif |
--tabla-bg-color-head |
Fondo del encabezado de tablas | #2c3e50 |
La aplicación implementa un enfoque de diseño responsivo utilizando múltiples archivos CSS con consultas de medios (media queries). Estas hojas de estilo se incluyen en orden de especificidad:
El encabezado contiene el banner del sitio con el título de la aplicación "Crónicas de Mérida". Utiliza una imagen de fondo y estilos de texto personalizados.
Estructura:
<header>
<div class="banner">
<h1 class="banner__text">Crónicas de Mérida</h1>
</div>
</header>Propiedades clave de estilo:
- Imagen de fondo:
url("../assets/images/banner.png") - Tamaño de fondo:
100% 100% - Estilo de texto con efectos de sombra para visibilidad
El sistema de menús es un componente clave del diseño que se adapta según el rol del usuario. La estructura del menú incluye:
Características principales del menú de navegación:
- Visibilidad de elementos del menú basada en roles (los administradores ven más opciones)
- Posicionamiento fijo que se adhiere a la parte superior de la ventana al desplazarse
- Soporte para submenús desplegables
- Alternancia amigable para dispositivos móviles para el diseño responsivo
El área de contenido principal (main.main) se llena dinámicamente según el parámetro ?pag en la URL. Esta área se expande para llenar el espacio disponible y centra su contenido tanto horizontal como verticalmente.
Características clave de estilo:
- Crecimiento flexible para llenar el espacio disponible (
flex-grow: 1) - Contenido centrado horizontal y verticalmente
- Relleno y márgenes adecuados para la legibilidad
El pie de página proporciona información adicional y enlaces relevantes. Se mantiene en la parte inferior de la página, incluso cuando el contenido principal es corto.
Estructura:
header -> div.banner -> h1.banner__text ("Crónicas de Mérida")
Propiedades clave de estilo:
- Fondo de color contrastante
- Texto centrado
- Espaciado adecuado para separación visual
El sistema de menús es un componente clave del diseño que se adapta en función del rol del usuario. La estructura del menú incluye:
Características principales del menú de navegación:
- Visibilidad de los elementos de menú basada en roles (los administradores ven más opciones)
- Posición fija que se adhiere a la parte superior de la ventana gráfica al desplazarse
- Soporte de submenú para navegación desplegable
- Interruptor optimizado para dispositivos móviles para un diseño responsivo
El pie de página está diseñado con un fondo oscuro y texto blanco. Se coloca en la parte inferior del diseño a través de la estructura de caja flexible del envoltorio.
La aplicación utiliza varios patrones de componentes de interfaz de usuario coherentes en toda la interfaz.
Las tarjetas se utilizan ampliamente para mostrar contenido en un formato estructurado. Existen múltiples variaciones de tarjetas:
| Tipo de tarjeta | Clases CSS | Propósito |
|---|---|---|
| Tarjetas de formulario | .form-card |
Para formularios de entrada con secciones izquierda/derecha |
| Tarjetas de evento | .card-event |
Para mostrar información de eventos |
| publicaciones | .card-post |
Para publicaciones y comentarios en el foro |
| Cuadro de inicio de sesión | .login-box |
Para formularios de autenticación |
Características de la tarjeta clave:
- Acolchado y margen consistentes
- Sombras de caja para profundidad
- Esquinas redondeadas
- Jerarquía visual clara del contenido
La aplicación utiliza un enfoque de estilo de botón coherente con variaciones para diferentes acciones
Los estilos de botón utilizan variables CSS para obtener estados de coloración y desplazamiento coherentes.
Las tablas se utilizan para la visualización de datos estructurados en varias secciones de la aplicación:
Características clave del estilo de la mesa:
- Estilo de encabezado coherente con --tabla-bg-color-head
- Alternar colores de fila para facilitar la lectura
- Adaptaciones responsivas para pantallas más pequeñas
El estilo de formulario es coherente en toda la aplicación con estos patrones:
- Campos de entrada con fondos transparentes en ciertos contextos (por ejemplo, inicio de sesión)
- Acolchado y estilo de borde consistentes
- Etiquetas y espaciado claros
- Apariencia estandarizada del botón de envío
Para los usuarios autenticados con el rol de "jugador", aparece un botón de ayuda flotante en la parte inferior derecha de la pantalla. Este componente proporciona acceso a las funciones de soporte.
El foro tiene un diseño especializado de tres columnas administrado a través de JavaScript:
Este diseño permite a los usuarios navegar entre categorías, temas y publicaciones mientras mantienen el contexto.
El sistema de diseño y estilo se integra con otros sistemas de aplicación de varias maneras:
-
Visualización del menú basado en roles: El menú de navegación se adapta en función de los roles de usuario determinados por el sistema de autenticación. Los diferentes tipos de roles (visitante, jugador, moderador, administrador) ven diferentes opciones de menú.
-
Contenido cargado dinámicamente: El área de contenido principal carga diferentes vistas en función de la interpretación del parámetro por parte del sistema de enrutamiento.pag
-
Visualización de componentes condicionales: Ciertos componentes, como el botón de ayuda, solo se muestran a los usuarios con roles específicos.
Esta integración garantiza que la interfaz de usuario refleje el modelo de autorización de la aplicación y proporcione la funcionalidad adecuada en función de los permisos de usuario.