167 lines
12 KiB
Markdown
167 lines
12 KiB
Markdown
|
# 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 |
|