A-201
Química · Lima Centro
Apertura5 min
Uso1 h 30
Cierre25 min
Capacidad 24
Referencia visual
Aceptada
Las piezas, una por una
Paleta de la UTP (rojo #D3052D sobre negro y blanco) y estilo de elementos tomado de prensalink.com: Libre Franklin para todo —titulares y cuerpo, como en la web de la UTP—, bordes capilares de 0.8 px, radios cortos y sombras anchas casi invisibles. Cada pantalla de los ocho portales se arma con lo que hay en esta página; si algo no está acá, primero se agrega acá.
1 · Color
Marca
Rojo UTP
--rojo · #D3052D
Rojo hondo
--rojo-hondo · #9D0322
Tinta
--tinta · #050505
Tinta 3
--tinta-3 · #262626
Papel 2
--papel-2 · #F7F7F7
Hueso
--papel-3 · #F1EFEC
Capilar
--linea · #E2E2E2
Gris texto
--gris-texto · #444444
El rojo se usa para la acción y para el acento, nunca como fondo de superficies grandes. Las áreas oscuras van en negro, no en rojo.
2 · Tipografía
Antetítulo · versalitas rojas
Titular en Libre Franklin 800
Segundo nivel, la misma familia
Tercer nivel para tarjetas y paneles
Bajada en Libre Franklin, un punto más grande que el cuerpo y en gris oscuro. Es la línea que explica el titular.
Cuerpo normal a 16 px con interlínea 1.55. Negrita para el dato que
importa, gris para lo secundario y RES-000101
en monoespaciada para todo lo que sea un código: reservas, aulas, materiales, boletas y códigos de error como
CANAL_NO_PERMITIDO.
La marca roja va detrás de dos o tres palabras del titular, nunca de una frase entera.
3 · Botones
Un solo botón primario por pantalla. El botón que destruye algo va con
.btn-peligro y, si toca datos del sistema, además pide contraseña.
4 · Estados y etiquetas
Estados: color y texto, nunca solo color
Aprobada
En espera
Rechazada
En curso
Cumplida
Redirigido
Las mismas seis clases sirven para todo. Los estados de cuenta que mira el SAE, por ejemplo, no traen piezas nuevas: son estas con otro texto.
Activa
Sin activar
Bloqueada
Sin rol
Conectado
Etiquetas
Química
Comprar
Prioritario
Lima Centro
UTPLabs Bot
Tarea crítica
3
5 · Formularios
Norma
Cómo se escribe un campo
Copiada del login real de la universidad, sso.utp.edu.pe.
Vale para los ocho portales, para los modales y para los filtros. En JavaScript se arma con
UI.campo(control, { etiqueta, ayuda }), que pone las tres piezas en su sitio.
| Pieza | Qué dice | Ejemplo |
|---|---|---|
| Etiqueta | Nombra el dato. Nunca falta. | Código UTP |
| Placeholder | Dice qué hacer, en imperativo y en segunda persona. | Ingresa tu código |
| Ayuda | El ejemplo y la regla, debajo del campo. | Ejemplo: U21100101. No escribas @utp.edu.pe. |
Nunca al revés. Un ejemplo puesto de placeholder (
U21100101) se lee como
un valor ya escrito, y encima desaparece al primer tecleo, que es justo cuando hacía falta. Y un
placeholder que repite la etiqueta no agrega nada.
Ejemplo: U21100102. Se valida con ^U\d{8}$ y se muestra el nombre antes de agregarlo.
La contraseña no coincide.
Lo lee el coordinador en su buzón. Sin comentario no se guarda el cambio.
Enlace dentro del formulario
Para la acción secundaria que no navega a ninguna parte, como el
«Restablecer contraseña» del login de la UTP. Va como <button>.
Lista de filas
Los materiales de un aula, los integrantes de un grupo, los productos de una boleta. Dato a la izquierda, estado o monto a la derecha.
- Bureta graduada 25 ml 2 de 3 Disponible
- Matraz Erlenmeyer 250 ml 0 de 1 No disponible
- Mandil de laboratorio S/ 38.00 Comprar
Boleta de compra
Lo que abre el alumno desde la notificación de una compra aceptada, para mostrársela al
encargado. Se arma con .boleta dentro de un modal; la dibuja
UI.ventanaCompra(compra), que con una compra rechazada muestra el motivo.
Universidad Tecnológica del Perú · Sede Lima Centro
BOL-00051- Mandil de laboratorioS/ 38.00 c/u× 3S/ 114.00
- Lentes de seguridadS/ 15.00 c/u× 3S/ 45.00
TotalS/ 159.00
Horario semanal del aula
Las horas ya tomadas: las clases fijas del ciclo, con curso, sección y docente, y las reservas aprobadas de otros grupos. Cada celda ocupada lleva texto, no solo color.
Lun
Mar
Mié
Jue
Vie
Sáb
07:00
Química GeneralSección 24187
Libre
Libre
Libre
Libre
Libre
09:00
Libre
ReservadoOtro grupo
Libre
Libre
Química GeneralSección 21735
Libre
11:00
RES-000102Por aprobar
CerradoMantenimiento
Libre
Libre
Libre
Libre
13:00
Mantenimiento13:00 a 15:00
Mantenimiento13:00 a 15:00
Mantenimiento13:00 a 15:00
Mantenimiento13:00 a 15:00
Mantenimiento13:00 a 15:00
Mantenimiento13:00 a 15:00
En JavaScript: UI.horarioSemanal(aula, { semana, conEspera, etiquetaReserva }).
El alumno lo usa sin códigos ajenos; coordinación, con las solicitudes en espera.
.horario-mantenimiento es el mantenimiento diario del aula: gris rayado, para que no se
confunda con una clase (rojo rayado) ni con un cierre del laboratorio (.horario-cerrado, gris punteado).
Barra de avance
El cierre de ciclo no se completa hasta el 100 %. La barra lleva el número, no solo el largo.
6 de 9 materiales verificados67 %
9 de 9 materiales verificados100 %
6 · Tarjetas, paneles y cifras
Disponible
Con fotografía
La foto entra desaturada y toma color al pasar el cursor: el color de la página lo pone el rojo, no la foto.
Panel
Radio 18, sombra ancha
Para modales, paneles laterales y bloques de resumen.
Filo rojo para la regla del negocio que hay que leer sí o sí.
14
solicitudes en espera
3
tareas fallidas en la última hora
S/ 420
daño reportado al SAE
00:42
retención por vencer
Ficha de un objeto
Los datos de consulta en pares: el nombre del dato a la izquierda y su valor a la derecha; en
celular, uno debajo del otro. Va dentro del panel que sube desde abajo, con las acciones en el pie.
Se arma con <dl class="ficha-datos">.
- Código
MAT-0114- Ubicación
- A-201 · Laboratorio de Química I
- Estado
- Buen estado
- Valor de reposición
- S/ 48.00
Es lo que se le cobra al alumno que lo rompe.
7 · Tablas
| Código | Integrante | Estado | Acción |
|---|---|---|---|
U21100101 | Diana Quispe Rojas Anfitriona | Presente | |
U21100102 | Bruno Salazar Ita | Sin marcar | |
U21100103 | Katia Mendoza Puma | No asistió |
8 · Minicalendario y contador
lun
mar
mié
jue
vie
sáb
dom
15
16
17
18
19
20
21
✓ Disponible
× Ocupado
– No se puede reservar
◉ Elegido
.ayuda-info: ayuda a pedido. Un ícono de información y una
línea que dice qué hay detrás; toda la fila es el botón y abre un modal. Es para lo que conviene saber pero no
hace falta leer siempre, como los motivos de los bloques apagados del calendario.
05:12
00:23
El contador se pone rojo bajo el minuto.
El día del encargado
El tramo en curso lleva filo rojo y la palabra «Ahora». La línea de tiempo marca dónde está la hora real, y las reservas de las próximas horas van en tarjetas grises que se despliegan.
Apertura5 min
AhoraUso del grupoquedan 32 min
Supervisión25 min
11:00 – 13:00
B-105 · Física
Ahora · 14:40
14:00 – 16:00
A-201 · Química
17:00 – 19:00
C-402 · Circuitos
C-402 · Circuitos17:00 a 19:00 Aprobado
Integrantes, materiales y compras de esa reserva.
D-101 · Cómputo20:00 a 21:00 Aprobado
Integrantes, materiales y compras de esa reserva.
9 · Mensajería
La bureta MAT-0102 llegó con la escala borrada.
Diana Quispe · hace 12 min
Ya la reemplacé con la MAT-0140. Paso a cerrar el hilo.
Tú · hace 4 min
UTPLabs Bot
El encargado canceló RES-000106. Motivo: falla de equipos o instalaciones.
Mensaje automático · prioritario
Lo que escribe el sistema va firmado y con filo rojo, para que nadie crea que le contestó una persona.
Lista de hilos y adjuntos
La lista se parte en grupos. En celular se ve la lista o el hilo, uno a la vez. En JavaScript
el hilo entero se arma con UI.vistaHilo(hilo, usuario, opciones), que usan todos
los portales.
Hasta 3 imágenes por hilo, JPG o PNG de 5 MB, verificadas por su contenido.
Mensajería del personal
Coordinación, SAE y administración. Cada fila es una persona, agrupada por rol: solo los roles que la matriz de canales permite. Con los alumnos no se dibuja ningún grupo, ni siquiera deshabilitado. Un mensaje atado a un reporte de daño lleva su número y las fotos de evidencia.
Reporte de daño N.º 2
Reporte de daño N.º 2 · RES-000101, aula A-201.
Total: S/ 52.50. Va 1 foto de evidencia.
Tú · recién
En JavaScript, la conversación es la misma UI.vistaHilo(); la burbuja
flotante, UI.burbujaChat(usuario), que se esconde en la pestaña de mensajería.
Campana del alumno
Una sola vía: no se contesta, y el panel lo dice.
Avisos
Los avisos no se responden. Para escribir, usa Mensajes.
Reserva aprobada
RES-000103, Laboratorio de Física B-105.
hace 2 h
Compra aceptada
Boleta BOL-00051 asociada a RES-000101.
14 set, 11:00
10 · Diagrama de estado
Nodos y capas
El mapa del sistema del administrador: tres filas de cajas unidas por una línea. HTML y CSS, sin librerías de diagramas. El punto de color nunca va solo: al lado siempre está el texto.
Portales lo que ve la gente
Portal del alumno
alumno.utplabs.com
Operativo
Correo saliente
2 envíos con problemas
Degradado
Servicio de IA
No responde
Caído
Chatbot
Apagado desde administración
Apagado
Backend
Backend
Spring Boot · api.utplabs.com
Operativo
11 · Avisos, carga y vacío
Cinta fija
Para lo que no se puede ignorar y no depende de la pantalla en la que uno esté: el bot pausado hace más de una hora, por ejemplo. Va arriba de todo, se queda pegada al hacer scroll y no lleva botón de cerrar. Si se pudiera cerrar, no haría falta.
El bot lleva 1 h 10 min pausado. Ningún aviso del sistema está saliendo.
Se usa poco a propósito: una cinta que aparece por cualquier cosa se vuelve parte del fondo.
Reglas de la contraseña
Acompañan al campo cuando alguien crea su contraseña, y se marcan solas
mientras escribe. Delante de cada línea va la palabra «Cumplida» o «Falta» en .sr-solo:
el estado no puede depender del color ni del icono.
- Cumplida: Entre 10 y 64 caracteres. Una frase con espacios sirve y es más fácil de recordar.
- Falta: Al menos una letra y un número.
- Pendiente: Que no contenga tu código ni tu nombre.
Avisos dentro de la página
Aviso neutro: algo que conviene saber.
Salió bien.
Falta algo antes de poder seguir.
El código o la contraseña no coinciden.
Cargando
Consultando la disponibilidad…
Vacío
Sin mensajes prioritarios
Cuando un encargado cancele una reserva o marque un material roto, el aviso aparece acá.
Panel que sube desde abajo
Para un formulario corto que sale de la pantalla en la que uno está, como el reporte de daño.
Oscurece el fondo como el modal, pero se pega al borde inferior: la cabecera y el pie quedan fijos y el
formulario se desliza entre los dos. En celular ocupa todo el ancho. Cierra con Esc, con la X o tocando el
fondo, y devuelve el foco a quien lo abrió. En JavaScript: UI.hoja(opciones), con
título, cuerpo, pie y qué hacer al cerrar.
Material 1
Ejemplo: MAT-0102. Tiene que ser del aula A-201.
Bureta graduada 25 ml · valor de reposición S/ 48.00 · gastado
Hasta S/ 48.00, el valor de reposición. Ejemplo: 35.50.
El monto no puede pasar el valor del material. Este vale S/ 48.00.
Obligatorio. Ejemplo: la escala quedó borrada al limpiarla con acetona.
El monto que pasa el valor se marca mientras se escribe; lo que falta, recién al intentar enviar. Un material roto completamente no se escribe: sale solo de su valor de reposición, en un campo de solo lectura.
Regla que no se rompe: nada de
innerHTML con texto que
venga del usuario o de la API. Todo el DOM de los portales se arma con UI.el(), que
usa textContent.