Hebb · mockup 02 de 3 · dirección «Consola»
Una herramienta de trabajo, no un folleto.
Quien gestiona un centro de formación subvencionada vive en tablas, plazos y expedientes. Esta propuesta le da densidad, atajos y control sobre lo que ve; y al alumnado le da el mismo sistema con la densidad bajada, tipografía mayor y un solo camino claro hacia continuar donde lo dejé.
Las doce pantallas
Cinco de alumnado, cuatro de administración, dos transversales y el acceso.
Color
Neutros fríos de matiz 222°, un solo primario y cuatro semánticos. Cambia el tema arriba para ver la otra mitad.
Superficies · elevación por valor, nunca por sombra
Texto y primario · ratio medido sobre panel, modo oscuro
El terciario es el par más ajustado del sistema y aun así llega a 6,34:1. En el campus actual el equivalente --color-gray-400 se queda en 2,54:1, la mitad del mínimo exigido (hallazgo H-02 de la auditoría).
Semánticos · cuatro, disciplinados
Tipografía
Dos familias con papeles que no se cruzan: Inter para la interfaz, JetBrains Mono para el dato.
Inter · interfaz
400 / 500 / 600 / 700Prevención de Riesgos Laborales
Altura de x alta y ancho contenido: aguanta 12 y 13 px sin deshacerse, que es donde vive una tabla de gestión. En titulares se aprieta el interletrado hasta −0,028 em para que el bloque tenga borde.
JetBrains Mono · el dato
400 / 500 / 700PRL-BAS 2026/02
FSE-2026-0417 · 60 h · 68 %
19/03/2026 · 11:42 · 14 h 20 m
Todo identificador, código de convocatoria, fecha, hora, porcentaje, importe o dirección IP va en monoespaciada. Las columnas se alinean por construcción y el ojo encuentra la cifra sin leer la fila entera.
Escala
Base 13 px en gestión · base 16 px en campusForma, espacio y elevación
Radios pequeños, rejilla de 4 px y líneas de 1 px como estructura principal.
Radios
Elevación
Cinco superficies escalonadas por valor. Solo flota lo que de verdad flota: la paleta de comandos, los menús y los modales.
Movimiento
- Reposo → hover
- 90 ms
- Apertura de capa
- 150 ms
- Curva
- cubic-bezier(.2,0,.2,1)
- Rebote
- Ninguno
Todo se anula bajo prefers-reduced-motion, incluido el barrido del esqueleto de carga.
Controles
Todo lo que se pulsa es un elemento enfocable de verdad. Pulsa el tabulador para verlo.
Botones
El grupo de densidad de arriba es real: cambia la altura de fila de la tabla de más abajo y de todas las tablas del mockup, y se recuerda entre páginas.
Campos · estado normal
Formato: especialidad, guion, nivel, año y número de grupo.
Campos · error en línea
El error se queda en la página, junto al campo, con aria-invalid y aria-describedby. Hoy el campus lo comunica con un aviso flotante que desaparece en cuatro segundos y sin ningún aria-invalid (hallazgo H-04).
En modalidad mixta, teleformación y presencial deben sumar las 60 h totales. Ahora suman 45 h: faltan 15 h.
Falta el dominio después de la arroba. Ejemplo: marta.ruiz@forprocer.es
Distintivos de estado y de rol
El punto cambia de forma además de color: círculo para lo correcto, rombo para lo que avisa, triángulo para el riesgo y cuadrado para lo neutro. Y siempre hay texto. En daltonismo o en una impresión en blanco y negro la información sigue estando. Los distintivos de rol del campus actual están entre 3,07:1 y 3,30:1 (hallazgo H-10); estos, por encima de 6,5:1.
Atajos de teclado
Visibles en la interfaz, no escondidos en una ayudaCtrl K y B funcionan de verdad en las trece páginas.
La tabla
La pieza central del producto: cabecera fija, orden, agrupación, densidad y columnas de dato en monoespaciada.
| Estado | Progreso | Tiempo | Última conexión | ||
|---|---|---|---|---|---|
| Módulo 2 · Riesgos generales y su prevención | |||||
| Rosa Iglesias Vegarosa.iglesias@forprocer.es | Al día | 94 % | 58 h 20 m | 19/03 · 09:12 | |
| Marta Ruiz Peñamarta.ruiz@forprocer.es | En curso | 68 % | 44 h 15 m | 19/03 · 11:42 | |
| Diego Ferrán Costadiego.ferran@forprocer.es | 12 d sin actividad | 21 % | 13 h 05 m | 07/03 · 18:03 | |
Marca una casilla para ver la barra de acciones en lote. Por debajo de 900 px de ancho la tabla no hace scroll: cada fila se convierte en una ficha apilada con sus etiquetas delante. Reduce la ventana para comprobarlo.
Estados
Carga, vacío, error, permiso denegado y dato en riesgo. Cada pantalla del mockup muestra al menos uno.
Carga · esqueleto
Vacío
Sin incidencias abiertas
Nadie ha reportado ningún problema en las últimas dos semanas. Cuando llegue una aparecerá aquí y en el panel.
Ver el historial cerradoError
No se ha podido guardar la ponderación del calificador
Las cuatro ponderaciones suman 110 % y deben sumar 100 %. Ajusta «Visionado de contenido» a 10 % o reparte la diferencia y vuelve a guardar.
Dice qué ha pasado, con qué números y qué hacer. Nunca «se ha producido un error, revisa la consola» (hallazgo H-30).
Permiso denegado
Este apartado es de solo lectura para tu perfil
El expediente FSE-2026-0417 te da acceso al contenido y al seguimiento de las convocatorias asignadas, pero no a modificar datos del centro. Si necesitas un cambio, solicítalo a la administración de Forprocer.
Accesibilidad
La auditoría del campus tiene 40 hallazgos. El sistema nace sin ellos.
| Hallazgo | Qué pasa hoy | Cómo se resuelve aquí |
|---|---|---|
| H-02 | Gris 400 como texto: 2,54:1 | El terciario más flojo del sistema da 6,34:1 |
| H-04 | Errores solo en aviso flotante de 4 s | Error en línea, persistente, con aria-invalid |
| H-05 | Sin enlace de salto al contenido | Presente en las 13 páginas, primer elemento tabulable |
| H-10 | Distintivos de rol entre 3,07:1 y 3,30:1 | Todos por encima de 6,5:1, con forma además de color |
| H-11 | El modal no atrapa ni devuelve el foco | Foco atrapado, Escape cierra y el foco vuelve al origen |
| H-15 | Pestañas sin ARIA ni teclado | Patrón WAI-ARIA con flechas, Inicio y Fin |
| H-16 | Contador de no leídos fuera del nombre accesible | Dentro del enlace y explicado con texto para lector |
| H-20 | Emoji como único portador del estado | Forma, color y texto; nunca emoji |
| H-08 | Ninguna hoja respeta el movimiento reducido | Regla global que anula toda animación |
| H-24 | Diez pantallas sin h1 | Un h1 por pantalla, sin saltos de nivel |