DI-006: Diseño de Componentes UI
Proyecto: Sistema de Registro de Estudiantes
Fecha: 2026-01-07
1. Mapa de Pantallas
┌──────────────────────────────────────────────────────────────┐
│ APP LAYOUT │
├──────────────────────────────────────────────────────────────┤
│ [Logo] Sistema de Estudiantes [Estudiantes] [Mat] │
├──────────────────────────────────────────────────────────────┤
│ │
│ <router-outlet> │
│ │
└──────────────────────────────────────────────────────────────┘
Rutas:
├── /students → Lista de estudiantes
├── /students/new → Formulario crear
├── /students/:id/edit → Formulario editar
├── /enrollment/:id → Inscripción de materias
└── /classmates/:id → Compañeros de clase
2. Wireframes
2.1 Lista de Estudiantes (/students)
┌─────────────────────────────────────────────────────────────┐
│ ESTUDIANTES [+ Nuevo Estudiante] │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 🔍 Buscar estudiante... │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ NOMBRE │ EMAIL │ CRÉDITOS │ ACCIONES│ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ Juan Pérez │ juan@email.com │ 6/9 │ ✏️ 🗑️ 📚 │ │
│ │ María García │ maria@email.com │ 9/9 │ ✏️ 🗑️ 📚 │ │
│ │ Carlos López │ carlos@mail.com │ 3/9 │ ✏️ 🗑️ 📚 │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ [← Anterior] [Siguiente →] │
└─────────────────────────────────────────────────────────────┘
Leyenda: ✏️ Editar 🗑️ Eliminar 📚 Inscripción
2.2 Formulario Estudiante (/students/new)
┌─────────────────────────────────────────────────────────────┐
│ ← Volver NUEVO ESTUDIANTE │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Nombre * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ Juan Pérez │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Email * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ juan@email.com │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ ⚠️ Este email ya está registrado (error ejemplo) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ [Cancelar] [Guardar] │
└─────────────────────────────────────────────────────────────┘
2.3 Inscripción de Materias (/enrollment/:id)
┌─────────────────────────────────────────────────────────────┐
│ ← Volver INSCRIPCIÓN: Juan Pérez │
├─────────────────────────────────────────────────────────────┤
│ Créditos: ████████░░ 6/9 Materias: 2/3 │
├─────────────────────────────────────────────────────────────┤
│ │
│ MIS MATERIAS INSCRITAS │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ✓ Física I │ Dra. Martínez │ [Cancelar] │ │
│ │ ✓ Programación I │ Dr. López │ [Cancelar] │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ MATERIAS DISPONIBLES │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ○ Matemáticas I │ Dr. García │ [Inscribir] │ │
│ │ ○ Matemáticas II │ Dr. García │ [Inscribir] │ │
│ │ ○ Física II │ Dra. Martínez │ ⚠️ Mismo prof │ │
│ │ ○ Programación II │ Dr. López │ ⚠️ Mismo prof │ │
│ │ ○ Base de Datos I │ Dra. Rodríguez │ [Inscribir] │ │
│ │ ... │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ [Ver Compañeros de Clase] │
└─────────────────────────────────────────────────────────────┘
2.4 Compañeros de Clase (/classmates/:id)
┌─────────────────────────────────────────────────────────────┐
│ ← Volver MIS COMPAÑEROS: Juan Pérez │
├─────────────────────────────────────────────────────────────┤
│ │
│ 📚 FÍSICA I (Dra. Martínez) │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ • María García │ │
│ │ • Carlos López │ │
│ │ • Ana Rodríguez │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ 💻 PROGRAMACIÓN I (Dr. López) │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ • Pedro Sánchez │ │
│ │ • Laura Torres │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
3. Componentes Reutilizables
| Componente |
Descripción |
Props |
ConfirmDialog |
Modal de confirmación |
title, message, onConfirm |
LoadingSpinner |
Indicador de carga |
size, color |
ErrorAlert |
Mensaje de error |
message, dismissible |
CreditsBadge |
Badge de créditos |
current, max |
SubjectCard |
Card de materia |
subject, actions |
4. Estados de UI
| Estado |
Visual |
| Loading |
Skeleton / Spinner |
| Empty |
Ilustración + mensaje |
| Error |
Alert rojo + retry |
| Success |
Toast verde |
5. Responsive Breakpoints
| Breakpoint |
Comportamiento |
| Mobile (<600px) |
Cards apiladas, menú hamburguesa |
| Tablet (600-960px) |
Grid 2 columnas |
| Desktop (>960px) |
Tabla completa, sidebar |