Wireframes de pantallas principales¶
Los siguientes wireframes muestran la estructura visual y la disposición de los componentes principales de cada pantalla. Se representan con Mermaid para mantener la coherencia con el resto de la documentación y permitir su evolución a mockups de alta fidelidad.
Convenciones¶
- 🔲 = Zona de contenido
- 📋 = Listado / tabla
- ✏️ = Formulario
- 🔘 = Botón de acción
- 📎 = Carga de archivos
- ⓘ = Información contextual
- ⚠️ = Mensaje de validación
Login¶
flowchart TB
subgraph Login
Header[🔲 Encabezado institucional]
Form[✏️ Formulario]
Actions[🔘 Acciones]
end
Form --> Campo1[Correo]
Form --> Campo2[Contraseña]
Form --> Link[¿Olvidó su contraseña?]
Actions --> B1[🔘 Iniciar sesión]
Actions --> B2[🔘 Ingresar con RegID]
Header -.-> Logo[Logo UC + Posgrado]
Panel del Aspirante¶
flowchart LR
subgraph Sidebar
M1[🔘 Inicio]
M2[🔘 Convocatorias]
M3[🔘 Mis solicitudes]
M4[🔘 Mi expediente]
M5[🔘 Documentos]
M6[🔘 Notificaciones]
end
subgraph Main
H[🔲 Bienvenida]
Cards[🔲 Tarjetas]
T1[📋 Convocatorias activas]
T2[📋 Estado de solicitudes]
end
Cards --> C1[ⓘ Próxima convocatoria]
Cards --> C2[ⓘ Solicitud en revisión]
Cards --> C3[ⓘ Alerta documental]
Formulario de solicitud de matrícula¶
flowchart TB
subgraph Form
Step[🔲 Stepper 1/4]
P1[✏️ Datos personales]
P2[✏️ Programa y edición]
P3[📎 Documentos]
P4[🔲 Resumen y envío]
end
P1 --> F1[Nombre, apellidos, identidad]
P1 --> F2[Correo, teléfono]
P2 --> F3[Programa, edición, modalidad]
P3 --> F4[Título universitario 📎]
P3 --> F5[Identidad 📎]
P3 --> F6[Autorización 📎]
P4 --> F7[ⓘ Resumen de la solicitud]
P4 --> B1[🔘 Guardar borrador]
P4 --> B2[🔘 Enviar solicitud]
P4 --> W1[⚠️ Validación en línea]
Panel del Estudiante¶
flowchart LR
subgraph Sidebar
S1[🔘 Inicio]
S2[🔘 Mi matrícula]
S3[🔘 Expediente]
S4[🔘 Asistencia]
S5[🔘 Calificaciones]
S6[🔘 Evaluación final]
S7[🔘 Certificación]
end
subgraph Main
Banner[🔲 Estado académico]
KPIS[🔲 Indicadores]
Charts[🔲 Gráficos de progreso]
T1[📋 Próximas actividades]
end
Banner -.-> S[ⓘ En curso · 65% créditos]
KPIS --> K1[Créditos]
KPIS --> K2[Asistencia]
KPIS --> K3[Promedio]
Validación documental (Secretaría)¶
flowchart TB
subgraph Toolbar
F[🔲 Filtros]
B1[🔘 Exportar]
end
subgraph Listado
T[📋 Solicitudes pendientes]
T --> R1[Fila solicitud]
T --> R2[Fila solicitud]
T --> R3[Fila solicitud]
end
R1 --> Detalle[🔲 Detalle]
Detalle --> Docs[📎 Documentos adjuntos]
Detalle --> Acc[🔘 Aprobar docs]
Detalle --> Rec[🔘 Solicitar corrección]
Detalle --> Aud[⓲ Auditoría visible]
Registro de calificaciones (Profesor)¶
flowchart TB
subgraph Select
A[🔲 Seleccionar programa]
B[🔲 Seleccionar actividad]
end
subgraph Tabla
T[📋 Estudiantes]
T --> E1[Estudiante · valor · obs]
T --> E2[Estudiante · valor · obs]
T --> E3[Estudiante · valor · obs]
end
subgraph Acciones
Save[🔘 Guardar borrador]
Send[🔘 Enviar a expediente]
Sync[🔘 Sincronizar con Moodle]
end
Evaluación de solicitudes (Comité)¶
flowchart TB
subgraph Listado
L[📋 Solicitudes en evaluación]
L --> S1[Solicitud]
L --> S2[Solicitud]
end
S1 --> Panel[🔲 Panel de evaluación]
Panel --> Info[⓲ Datos del aspirante]
Panel --> Docs[📎 Documentos validados]
Panel --> Dec[🔘 Aprobar]
Panel --> DecR[🔘 Rechazar]
Panel --> Mot[✏️ Motivo]
Panel --> Pla[⓲ Plazas disponibles]
Certificación y titulación¶
flowchart TB
subgraph Verificacion
V[⓲ Verificación automática]
V1[✔ Créditos cumplidos]
V2[✔ Evaluación final aprobada]
V3[✔ Documentación completa]
end
subgraph Emision
Tipo{Tipo de programa}
Cert[🔘 Generar certificado]
Tit[🔘 Generar título]
end
subgraph Salida
Cod[⓲ Código de validación]
Hist[🔘 Registrar en histórico]
Desc[🔘 Permitir descarga]
end
V --> Tipo
Tipo -->|Curso/Entren./Diplomado| Cert
Tipo -->|Maestría/Especialidad| Tit
Cert --> Cod
Tit --> Cod
Cod --> Hist
Cod --> Desc
Dashboard institucional (Dirección)¶
flowchart LR
subgraph KPIs
K1[⓲ Matriculados]
K2[⓲ Graduados]
K3[⓲ Eficiencia terminal]
K4[⓲ Deserción]
K5[⓲ Aprobación]
K6[⓲ Asistencia promedio]
end
subgraph Graficos
G1[📊 Programas por tipo]
G2[📊 Evolución por edición]
G3[📊 Distribución por facultad]
end
subgraph Acciones
A1[🔘 Exportar PDF]
A2[🔘 Exportar Excel]
A3[🔘 Exportar XML]
end
Administración de usuarios¶
flowchart TB
subgraph Toolbar
F[🔲 Filtros y búsqueda]
New[🔘 Nuevo usuario]
end
subgraph Tabla
U[📋 Usuarios]
U --> R1[Usuario · rol · estado]
U --> R2[Usuario · rol · estado]
end
R1 --> Det[🔲 Detalle]
Det --> Edit[🔘 Editar]
Det --> Rol[🔘 Asignar rol]
Det --> Bloq[🔘 Bloquear]
Det --> Aud[⓲ Auditoría del usuario]