Componentes de interfaz
Tecnologías frontend base, librerías de referencia, catálogo referencial de componentes y sus estados.
Lineamientos de componentes y tecnologías base
Actualmente, el área de desarrollo de sistemas no cuenta con una biblioteca institucional de componentes propia. Sin embargo, con el objetivo de mantener coherencia visual y experiencia de usuario consistente, se establecen los siguientes lineamientos tecnológicos y de diseño como base para nuevos desarrollos.
Tecnologías frontend utilizadas
Dependiendo de las necesidades funcionales y arquitectónicas de cada proyecto, los sistemas desarrollados por el área utilizan principalmente las siguientes tecnologías:
- Angular para aplicaciones empresariales y sistemas administrativos.
- Next.js para aplicaciones web modernas orientadas a rendimiento, SSR o experiencias más dinámicas.
Librerías y plantillas base
Como referencia visual y técnica, los proyectos pueden apoyarse en las siguientes herramientas utilizadas actualmente por el área:
- Fuse Angular como plantilla base para sistemas administrativos y dashboards.
- MDash Angular para proyectos que requieran estructuras administrativas predefinidas o layouts reutilizables.
Los equipos externos o áreas que desarrollen sistemas integrados con el ecosistema institucional deberán priorizar el uso de estas tecnologías y librerías, o bien mantener compatibilidad visual y estructural con ellas.
Consideraciones generales
- No se recomienda desarrollar componentes visuales completamente personalizados cuando exista una alternativa equivalente en Angular Material u otra librería base utilizada institucionalmente.
- Cualquier personalización importante de estilos o comportamiento debe realizarse respetando los lineamientos visuales institucionales definidos para colores, tipografía, espaciados y accesibilidad.
- Los nuevos sistemas deben procurar reutilizar patrones visuales y de interacción ya presentes en sistemas institucionales existentes.
Catálogo referencial de componentes
Los siguientes componentes representan la base visual esperada para sistemas desarrollados o integrados con plataformas institucionales. Las implementaciones pueden variar según la tecnología utilizada, pero deben respetar comportamiento, accesibilidad y coherencia visual.
| Componente | Referencia / Especificación | Estados |
|---|---|---|
| Botón principal | Color primario institucional · texto blanco · altura mínima 40 px · radios consistentes con el framework utilizado | Default, Hover, Disabled, Loading |
| Botón secundario | Fondo transparente o neutro · borde primario o sin borde · texto primario | Default, Hover, Disabled |
| Botón peligroso | Color asociado a error/destrucción · requerir confirmación en acciones críticas | Default, Hover, Disabled |
| Campo de texto | Compatible con Angular Material o librería equivalente · soporte para label, helper y validaciones | Default, Focus, Error, Disabled, Read-only |
| Select / Dropdown | Comportamiento consistente con inputs institucionales | Default, Open, Error, Disabled |
| Checkbox / Radio | Área táctil accesible · color primario al seleccionar | Unchecked, Checked, Indeterminate, Disabled |
| Tarjeta (Card) | Contenedor con separación visual clara · bordes y sombras suaves | Estática, Hover, Seleccionada |
| Alerta / Toast | Mensajes contextuales con iconografía y colores semánticos | Éxito, Error, Advertencia, Información |
| Modal / Diálogo | Overlay, foco controlado y cierre accesible | Confirmación, Formulario, Informativo |
| Paginación | Navegación clara y responsive | Default, Activo, Disabled |
| Tabla de datos | Soporte para ordenamiento, acciones y filtros | Básica, Con acciones, Con filtros |
| Breadcrumb | Navegación contextual consistente | — |
| Menú lateral (Sidenav) | Compatible con navegación responsive y colapsable | Expandido, Colapsado, Ítem activo |
| Barra de navegación | Logo institucional UNACH · navegación principal · perfil de usuario | Desktop, Mobile |
Ejemplos visuales de referencia
Estas muestras reflejan el comportamiento esperado de los componentes base. Las implementaciones pueden variar según la tecnología (Angular Material, etc.), pero deben respetar geometría, color y estados.
Botones
Altura mínima 40 px, padding horizontal 16 px, radio 8 px (--radius-md). Todo botón interactivo debe documentar Default · Hover · Pressed · Disabled · Loading.
Campos de texto
Material Outlined como base. Altura 40 px, radio 8 px. Etiqueta sobre el campo, helper text debajo, mensajes de error en rojo institucional.
Controles de formulario
Área táctil accesible (mínimo 24 × 24 px de hit-target), color primario al activarse, estados explícitos.
Alertas y badges
Iconografía + color semántico + texto. Los colores de estado nunca son decorativos.
Tarjetas
Tres estados: estática (borde 1 px), elevada (sombra suave), seleccionada (borde 2 px primary).
Estática
Acreditación CNA · vigente hasta 2028
Elevada
Matrículas procesadas hoy
Seleccionada
Pedagogía en Educación Física
Tabla de datos
Header gris claro, mayúsculas pequeñas trackeadas, hover de fila sutil, divisores horizontales únicamente.
| Estudiante | Programa | Estado | Arancel | Último acceso |
|---|---|---|---|---|
| Daniela Ruiz Morales | Pedagogía en Educación Física | Activo | Al día | 14/05/2026 |
| Pedro Caro Vergara | Pedagogía en Educación Física | Activo | Pendiente | 14/05/2026 |
| Antonia Jara Sandoval | Pedagogía en Inglés | Egresado | Al día | 02/03/2026 |
| Matías Pino Larenas | Agronomía | Suspendido | Vencido | 08/04/2026 |
Estados de los componentes
Todo componente interactivo debe contemplar y documentar los siguientes estados:
- Default: estado inicial sin interacción.
- Hover: cursor sobre el elemento (solo desktop).
- Focus: elemento seleccionado con teclado o toque.
- Active / Pressed: durante la pulsación.
- Disabled: no disponible para interacción.
- Loading: proceso en curso; siempre indicar con spinner o skeleton.
- Error: estado de validación fallida.
- Success: acción completada correctamente.