🌡️ PROYECTO INTEGRADOR: MONITORIZACIÓN AMBIENTAL

Este repositorio contiene la documentación y el mockup de diseño para el sistema de Monitorización Ambiental.

Autores
Carlos Almendras
Juan Felipe Mena
David Forero

---

📑 1. Introducción

El diseño del sistema busca ofrecer una interfaz moderna, limpia y eficiente, que permita a los usuarios (administradores, técnicos y lectores) monitorizar parámetros ambientales de forma intuitiva y visual.

Se prioriza la claridad y facilidad de navegación, asegurando una experiencia fluida y agradable tanto en escritorio como en dispositivos móviles. El mockup de diseño fue desarrollado en la herramienta Figma en el plazo de una semana.

---

🎨 2. Paletas de colores y estilo visual

Colores

Color	Uso Principal
Azul y derivados	Fondo principal y botones
Blanco	Fondos y tarjetas (cards)
Gris claro	Logs
Verde	Estados correctos o activos
Rojo	Estados de error o alerta
Amarillo	Advertencias o avisos

Estilo

• Diseño minimalista con bordes redondeados.
• Sombra suave en tarjetas (cards).
• Interacciones fluidas, con animaciones suaves hover y transiciones.

---

💻 3. Interfaz web - Versión escritorio

3.2. Login

Al entrar a la página, se muestra una ventana de autentificación.

• El usuario accede al diseño correspondiente a su rol (normal, técnico o administrador).
• El formulario contará con validaciones para evitar datos incorrectos y/o inyecciones SQL.
• Mejora planificada: Intentaremos agregar la opción de recuperar una contraseña olvidada en el entorno de producción.

---

3.3. Panel de navegación (Usuario Lector)

Los usuarios sin permisos de edición podrán ver alertas, estadísticas y gráficas de las salas.

• Alertas: Muestra salas con uno o más valores críticos en un carrusel.
  • Amarillo: Valor crítico.
  • Rojo: Valor muy crítico.
  • Negro: Sensor sin señal.
  • Debajo se encuentra un historial de alertas registradas.

---

• Estado de salas: Muestra información individual por sala (temperatura, humedad, oxígeno, gráfico de registros).
  • Se puede filtrar y cada sala tiene un borde distinto que representa su estado.
  • Se pueden ver gráficos generales sobre el uso de todas las salas.

---

3.4. Panel de Administración (Admin/Técnico)

Los usuarios con permisos gestionarán usuarios, salas, alertas y dispositivos. Todos los apartados de gestión son un CRUD (Crear, Leer, Actualizar, Eliminar).

• Gestión de Usuarios: Tabla con datos de usuarios registrados con opciones para editar y eliminar.
• Gestión de Salas: Permite consultar, agregar, editar y eliminar salas registradas.
• Gestión de Dispositivos: Permite consultar, agregar, editar y eliminar dispositivos.
• Gestión de Alertas: Funcionalidad CRUD para la configuración y creación de reglas de alertas.

---

• Configuración Global: Permite al administrador configurar los umbrales de los diferentes sensores (Temperatura, Humedad, $\text{CO}_2$). Si un dato está fuera del umbral, se manda una alerta.

---

📱 4. Interfaz Web - Versión móvil

La versión móvil adapta el diseño de escritorio para pantallas más pequeñas.

4.1. Panel de navegación (Usuario)

El diseño de múltiples columnas se adapta a una columna única donde los módulos se disponen verticalmente.

---

4.2. Cambios en la navegación

Los botones de navegación de la cabecera son reemplazados por un menú desplegable.

---

4.3. Panel de Administración (Admin)

Se mantienen las mismas funcionalidades. Se implementará un menú desplegable para las opciones disponibles.

• El diseño de columna única se aplica a toda la gestión de datos y configuración.
• Se harán ajustes para eliminar la necesidad de desplazamiento en las tablas de gestión.