Visión general
Panel kanban de supervision de procesos es un prototipo de tablero operativo que se ejecuta integramente en el navegador, sin backend. Modela el ciclo de vida de una tarea a traves de cinco columnas o estados (Entrada, En proceso, Bajo supervision, Revision y Completado) y permite mover el trabajo entre ellas mediante arrastrar y soltar o botones de avance. Cada tarea lleva metadatos (proceso, owner y prioridad) y una lista de pasos cuyo porcentaje de cumplimiento se refleja en una barra de progreso dentro de la tarjeta.
El elemento diferencial es la columna "Bajo supervision", pensada para el trabajo que necesita seguimiento intenso hasta desbloquearse. El prototipo calcula una metrica de presion (porcentaje de tareas en supervision sobre el total de tareas) que se muestra como barra y texto descriptivo en el panel lateral, ademas de resaltar en rojo las tarjetas y el contador correspondiente. Visualmente, cada columna incluye una escena animada en pixel-art construida con SVG generado por codigo y animaciones CSS: un actor capturando papeles en una bandeja de entrada, un programador tecleando frente a un monitor, una lupa de QA escaneando un documento, confeti de cierre y, en la columna de supervision, un personaje "supervisor" que hace restallar un latigo animado fotograma a fotograma, lo que da nombre visual al concepto de presion.
Es una demo funcional de interfaz y experiencia, no un producto: la persistencia se hace en localStorage del propio navegador, los datos parten de una muestra precargada y no hay autenticacion, multiusuario ni sincronizacion. Sirve para ilustrar como visualizar y priorizar la carga operativa de un equipo y poner el foco en lo que esta bloqueado o requiere seguimiento.
Cómo funciona
- Carga del estado inicial Al abrir la pagina, app.js intenta leer el estado guardado en localStorage bajo la clave 'kanban-supervision-v1'. Si no existe o la lectura falla (try/catch con aviso por consola), clona un conjunto de seis tareas de muestra precargadas y las usa como punto de partida.
- Renderizado del tablero La funcion render() vacia el contenedor #board y reconstruye las cinco columnas definidas en el array 'columns'. Cada columna pinta su cabecera, su escena animada SVG, el contador de tarjetas visibles, el subtitulo descriptivo y la lista de tareas filtradas para ese estado. Cualquier interaccion relevante provoca un re-render completo.
- Filtrado y busqueda en tiempo real getVisibleTasks() combina tres condiciones: que la tarea pertenezca a la columna, que coincida con el filtro de proceso activo (Todos, Captura, Planificacion, Produccion, QA o Entrega) y que el termino de busqueda aparezca en un texto combinado de titulo, proceso, owner y prioridad. Cualquier cambio en el buscador o en los pills de filtro dispara un re-render completo del tablero.
- Movimiento de tareas Una tarea cambia de estado de tres formas: arrastrandola y soltandola en otra columna (drag and drop nativo con dataTransfer transportando el id), o con los botones de flecha izquierda y derecha de cada tarjeta. moveTaskTo() actualiza el campo 'status' de la tarea; si el destino es 'Completado' (hecho), marca automaticamente todos los pasos como hechos.
- Avance de pasos y progreso El boton central de cada tarjeta llama a advanceStep(), que marca como completado el siguiente paso pendiente; si ya estan todos hechos, los reinicia todos a cero, formando un ciclo. El porcentaje de pasos completados alimenta la barra de progreso de la tarjeta y la etiqueta 'hechos/total'.
- Calculo de metricas y presion updateStats() recalcula en cada render el total de tareas, las que estan bajo supervision y las cerradas, y deriva la presion como el porcentaje de tareas en supervision sobre el total. Ese valor ajusta el ancho de la barra de presion del panel lateral y el texto descriptivo, que cambia segun haya 0, 1 o varias tareas en seguimiento. Tras cada cambio relevante, saveState() persiste el estado completo en localStorage.
Funciones del sistema
Tablero kanban de cinco estados
Columnas Entrada, En proceso, Bajo supervision, Revision y Completado, cada una con titulo, subtitulo descriptivo, color de acento propio y un contador de tarjetas visibles.
Alta de tareas desde formulario
Formulario en el panel lateral para crear una tarea con titulo (max. 72 caracteres), proceso, prioridad y owner elegidos de listas desplegables. La nueva tarea se inserta al inicio de la columna Entrada con tres pasos por defecto sin completar (Definir alcance, Ejecutar, Verificar).
Arrastrar y soltar entre columnas
Drag and drop nativo HTML5: la tarjeta arrastrada se marca como 'dragging' (se atenua), la columna destino se resalta con la clase 'drag-over' al pasar por encima y al soltar reasigna el estado de la tarea.
Avance por botones y por pasos
Cada tarjeta tiene tres botones: mover a la izquierda, avanzar el siguiente paso pendiente y mover a la derecha. Los botones de mover se deshabilitan en los extremos del tablero (primera y ultima columna).
Filtro por proceso y buscador
Pills para filtrar por proceso (Todos, Captura, Planificacion, Produccion, QA o Entrega) y un campo de busqueda que cruza titulo, proceso, owner y prioridad de forma instantanea.
Metrica de presion de supervision
Barra de color y texto en el panel lateral que expresan el porcentaje de tareas bajo supervision respecto al total, con mensajes adaptados a 0, 1 o varias tareas en seguimiento.
Cabecera de metricas del tablero
Tres contadores en la barra superior: tareas totales, tareas bajo supervision (resaltadas en rojo) y tareas cerradas, actualizados en cada render.
Barra de progreso por tarjeta
Cada tarea muestra su lista de pasos con casillas, la etiqueta hechos/total y una barra que refleja el porcentaje de pasos completados. Las tarjetas en supervision quedan ademas resaltadas con un borde rojo.
Persistencia local
El estado completo (tareas, pasos y estados) se guarda en localStorage, de modo que al recargar la pagina el tablero conserva los cambios en ese mismo navegador.
Restaurar muestra
Boton que devuelve el tablero al conjunto de tareas de ejemplo y reinicia el filtro de proceso a Todos y la busqueda, util para volver al estado de demostracion.
Tecnologías y para qué se usan
- JavaScript (vanilla, ES5 e IIFE): Toda la logica del tablero vive en un unico app.js encapsulado en una funcion autoejecutable con 'use strict': gestion de estado, render, filtros, drag and drop, calculo de metricas y persistencia. Sin frameworks ni dependencias externas.
- HTML5 Drag and Drop API: Mueve tarjetas entre columnas usando eventos nativos dragstart, dragover, dragleave, drop y dragend, con dataTransfer para transportar el id de la tarea (text/plain).
- localStorage (Web Storage API): Persiste el estado del tablero en el navegador bajo la clave 'kanban-supervision-v1', con try/catch para degradar sin romper si el almacenamiento no esta disponible.
- HTML <template>: La estructura de cada tarjeta se define una sola vez en un elemento <template> y se clona con content.cloneNode en renderTask(), evitando construir el DOM concatenando cadenas de texto.
- CSS moderno (Grid, custom properties y color-mix): Layout de dos columnas (panel lateral + tablero) y rejilla de cinco columnas para el kanban, variables CSS para la paleta y el acento por columna (--column-accent), y color-mix() para derivar fondos y sombras a partir del color de acento de cada estado.
- SVG inline + animaciones CSS (keyframes): Las escenas pixel-art de cada columna se generan como SVG por codigo (rectangulos posicionados) y se animan con @keyframes y la funcion steps(): actor capturando papeles, programador tecleando con cursor parpadeante, lupa de QA escaneando y confeti de cierre.
- Animacion por fotogramas tipo sprite (CSS frames): La escena 'Bajo supervision' anima un latigo mediante cinco fotogramas SVG (rest, load, wave, snap y recover) que se encienden y apagan por opacidad con steps(1), junto a pixeles de chasquido (crack) que aparecen en el fotograma de impacto, simulando un ciclo de restallido que ilustra la presion.
- Google Fonts (Sora y Azeret Mono): Tipografias cargadas via preconnect: Sora para textos generales y Azeret Mono (monoespaciada) para etiquetas, contadores y badges con estetica tecnica.
- prefers-reduced-motion: Media query de accesibilidad que reduce a casi cero la duracion de animaciones y transiciones para usuarios que prefieren menos movimiento.
- Diseno responsive (media queries): Adapta el tablero a pantallas medianas (scroll horizontal de columnas de ancho fijo) y a moviles (panel apilado sobre el tablero y columna unica), manteniendo usable el kanban en distintos anchos.
Casos de uso B2B
- Supervision operativa de un equipo de servicios: visualizar el trabajo en curso y destacar lo que esta bloqueado o requiere seguimiento intenso antes de que se convierta en retraso.
- Gestion de un pipeline de entregas a cliente, moviendo cada encargo por Captura, Planificacion, Produccion, QA y Entrega y midiendo cuanta carga esta atascada bajo supervision.
- Tablero ligero para pymes o equipos pequenos que necesitan un kanban sin instalar ni contratar una herramienta SaaS, ejecutable desde un simple archivo en el navegador.
- Demostracion comercial para clientes de consultoria: ilustrar de forma tangible como se modela un flujo de procesos y como una metrica de presion ayuda a priorizar.
- Base de prototipado rapido para validar con un cliente la estructura de estados, procesos y roles de su operativa antes de construir una solucion con backend.
- Apoyo visual en sesiones de mejora de procesos: identificar cuellos de botella mirando el contador de tareas bajo supervision y la barra de presion.
Qué demuestra
- Capacidad de construir una interfaz funcional con JavaScript puro, sin frameworks ni dependencias externas, manteniendo el codigo organizado dentro de un IIFE con modo estricto.
- Manejo de estado en cliente con un patron claro de carga, mutacion, persistencia en localStorage y re-render completo tras cada cambio.
- Implementacion de interaccion combinada: drag and drop nativo junto a controles alternativos por botones, con deshabilitado contextual en los extremos del tablero.
- Dominio de la animacion en la web mediante SVG generado por codigo y @keyframes, incluyendo animacion por fotogramas tipo sprite y respeto a prefers-reduced-motion.
- Diseno de una metrica derivada (presion) a partir de los datos del tablero y su traduccion a feedback visual y textual util para decidir.
- Atencion al detalle visual y de UX: paleta coherente con custom properties, color-mix por acento de columna, layout responsive y estados de interaccion cuidados.
Otros prototipos relacionados
Constructor visual de páginas
Editor WYSIWYG con biblioteca de componentes, edición en inspector, vista previa responsive y exportación de HTML limpio. Incluye plantillas por sector para arrancar.
Ver prototipo →
CRM inmobiliario con datos públicos e IA
Suite CRM con pipeline, matching de oferta y demanda, tasador automático y radar de mercado alimentado por APIs públicas (Catastro, INE) y scraping controlado.
Ver prototipo →