365 lines
10 KiB
Markdown
365 lines
10 KiB
Markdown
# Apuntes de presentacion — Frontend + UX (Marcos)
|
|
|
|
Notas extendidas para exponer la parte de interfaz y experiencia de usuario. Incluye el guion, el por que de cada decision y el funcionamiento interno. Esta pensado para explicar mas de lo que aparece en las slides.
|
|
|
|
---
|
|
|
|
## 1) Vista de mando (KPIs + grid)
|
|
|
|
**Que mostrar:**
|
|
- Captura real del dashboard principal (KPIs arriba + grid debajo)
|
|
|
|
**Por que es importante:**
|
|
- Es la entrada principal del usuario y resume el estado global.
|
|
- Permite pasar de vision general a detalle en un clic.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Los KPIs agregan informacion clave: proyectos activos, presupuesto y progreso medio.
|
|
- Debajo se renderiza el grid con tarjetas, cada una representando un proyecto.
|
|
- La jerarquia visual dirige la mirada primero a los KPIs y luego a la exploracion.
|
|
|
|
**Guion corto:**
|
|
- “La vista de mando prioriza lectura rapida: KPIs arriba y tarjetas abajo.”
|
|
- “Con un vistazo se entiende el estado general y se puede bajar al detalle.”
|
|
|
|
---
|
|
|
|
## 2) KPI protagonista
|
|
|
|
**Que mostrar:**
|
|
- Captura del KPI grande (ej. 94.2%)
|
|
|
|
**Por que es importante:**
|
|
- Jerarquia visual clara para decisiones rapidas.
|
|
- La comparacion contextual evita interpretar mal el dato.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Numero principal con tipografia grande.
|
|
- Texto de apoyo con comparativa y periodo temporal.
|
|
- Se usa contraste para que el dato sea lo primero que se lea.
|
|
|
|
**Guion corto:**
|
|
- “Numero grande, etiqueta corta y contexto de mejora.”
|
|
- “El usuario detecta la tendencia sin leer mucho texto.”
|
|
|
|
---
|
|
|
|
## 3) Grid vs List
|
|
|
|
**Que mostrar:**
|
|
- Dos capturas reales: grid y list
|
|
|
|
**Por que es importante:**
|
|
- Grid para exploracion visual; list para operacion rapida.
|
|
- El usuario elige la forma de trabajo que necesita.
|
|
|
|
**Como funciona y que muestra:**
|
|
- El toggle cambia la representacion sin cambiar la fuente de datos.
|
|
- El grid prioriza tarjetas y resumen; la lista prioriza columnas y densidad.
|
|
- Se mantiene el mismo estado de filtros y busqueda al cambiar la vista.
|
|
|
|
**Guion corto:**
|
|
- “Cambio de vista inmediato sin perder contexto.”
|
|
- “Es el mismo contenido, con distinta densidad de informacion.”
|
|
|
|
---
|
|
|
|
## 4) Project Card (unidad visual)
|
|
|
|
**Que mostrar:**
|
|
- Captura real de una tarjeta
|
|
|
|
**Por que es importante:**
|
|
- Resume estado, progreso y presupuesto en un bloque.
|
|
- Es el componente base de la UI.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Incluye estado con badge, progreso con barra y cifras clave.
|
|
- Usa color para semaforizacion y lectura inmediata.
|
|
- Es reutilizable en grid y otras vistas.
|
|
|
|
**Guion corto:**
|
|
- “La tarjeta condensa lo esencial sin saturar.”
|
|
- “Badges y color facilitan lectura rapida.”
|
|
|
|
---
|
|
|
|
## 5) Toolbar (busqueda, filtros, exportacion)
|
|
|
|
**Que mostrar:**
|
|
- Captura real de la toolbar en proyectos
|
|
|
|
**Por que es importante:**
|
|
- Centraliza acciones clave y acelera la navegacion.
|
|
- Reduce pasos para filtrar y exportar.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Busqueda por texto con actualizacion instantanea.
|
|
- Filtros por estado y otros atributos.
|
|
- Accion de exportacion para reporting rapido.
|
|
|
|
**Guion corto:**
|
|
- “Todo lo operativo esta en una sola barra.”
|
|
- “UX clara: buscar, filtrar, exportar.”
|
|
|
|
---
|
|
|
|
## 6) Filtrado ultra-rapido
|
|
|
|
**Que mostrar:**
|
|
- Captura del input de busqueda + snippet corto con `useMemo`
|
|
|
|
**Por que es importante:**
|
|
- Respuesta instantanea sin recargar.
|
|
- Reduce friccion y mejora la percepcion de velocidad.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Se memoiza la lista filtrada para evitar recalculos innecesarios.
|
|
- El filtro trabaja sobre el dataset cargado en memoria.
|
|
- La UI responde a cada pulsacion sin bloquear.
|
|
|
|
**Guion corto:**
|
|
- “El filtrado se calcula en memoria y se actualiza al vuelo.”
|
|
- “La UI responde en tiempo real incluso con listas grandes.”
|
|
|
|
---
|
|
|
|
## 7) Vista de detalle 360 grados
|
|
|
|
**Que mostrar:**
|
|
- Captura real del detalle con tabs
|
|
|
|
**Por que es importante:**
|
|
- Todo el proyecto en una sola pantalla, pero segmentado.
|
|
- Evita saltos entre paginas.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Cabecera con informacion clave y acciones.
|
|
- Bloque de estadisticas y progreso.
|
|
- Tabs para tareas, Gantt y datos relacionados.
|
|
|
|
**Guion corto:**
|
|
- “Tabs para dividir informacion sin perder contexto.”
|
|
- “Reduce la carga cognitiva del usuario.”
|
|
|
|
---
|
|
|
|
## 8) Acciones criticas
|
|
|
|
**Que mostrar:**
|
|
- Captura del header del detalle con botones de accion
|
|
|
|
**Por que es importante:**
|
|
- Las acciones clave siempre visibles.
|
|
- Menos pasos para editar, exportar o cerrar.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Botones de accion primaria con contraste y jerarquia.
|
|
- Acciones secundarias en menu contextual si existen.
|
|
- Se mantiene consistencia con el resto de headers.
|
|
|
|
**Guion corto:**
|
|
- “Acciones primarias en cabecera para operativa rapida.”
|
|
- “Mejora la eficiencia del flujo.”
|
|
|
|
---
|
|
|
|
## 9) Segmentacion de informacion
|
|
|
|
**Que mostrar:**
|
|
- Captura de tabs/resumen en detalle
|
|
|
|
**Por que es importante:**
|
|
- Cada seccion tiene su proposito.
|
|
- Mantiene coherencia y legibilidad.
|
|
|
|
**Como funciona y que muestra:**
|
|
- La informacion se distribuye por contextos (resumen, tareas, timeline).
|
|
- Se evita scroll excesivo y se mejora la orientacion.
|
|
- Los tabs conservan estado visual y posicion.
|
|
|
|
**Guion corto:**
|
|
- “La informacion se agrupa por contexto, no por pantalla.”
|
|
- “Facilita la navegacion mental.”
|
|
|
|
---
|
|
|
|
## 10) Data mapping (Dolibarr -> UI)
|
|
|
|
**Que mostrar:**
|
|
- Captura del mapper en `types/project.ts`
|
|
|
|
**Por que es importante:**
|
|
- Dolibarr devuelve datos crudos; la UI necesita formato amigable.
|
|
- Se estandarizan fechas, estados y etiquetas.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Se transforma `status` en etiquetas legibles y colores.
|
|
- Fechas pasan de timestamp a formato local.
|
|
- Presupuesto y progreso se normalizan para la UI.
|
|
|
|
**Guion corto:**
|
|
- “El mapper convierte datos de API en modelos de UI consistentes.”
|
|
- “Esto evita errores y mejora la claridad para el usuario.”
|
|
|
|
---
|
|
|
|
## 11) Tolerancia a fallos
|
|
|
|
**Que mostrar:**
|
|
- Captura del banner de error con boton Reintentar
|
|
|
|
**Por que es importante:**
|
|
- El sistema comunica fallos sin bloquear al usuario.
|
|
- Permite recuperar la operacion rapidamente.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Mensaje de error claro y accion inmediata.
|
|
- Estado de fallo visible sin romper la UI.
|
|
- Reintento vuelve a lanzar la peticion.
|
|
|
|
**Guion corto:**
|
|
- “Mensaje claro + accion inmediata.”
|
|
- “Se mantiene la confianza en la interfaz.”
|
|
|
|
---
|
|
|
|
## 12) Estados de carga (skeletons)
|
|
|
|
**Que mostrar:**
|
|
- Captura real de skeletons en dashboard
|
|
|
|
**Por que es importante:**
|
|
- Evita pantallas vacias durante la carga.
|
|
- Mantiene jerarquia visual.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Se renderizan placeholders con la misma estructura que el contenido real.
|
|
- El usuario entiende que hay informacion en camino.
|
|
- La percepcion de rendimiento mejora aunque la red sea lenta.
|
|
|
|
**Guion corto:**
|
|
- “El usuario sabe que la informacion llegara.”
|
|
- “Mejora la percepcion de rendimiento.”
|
|
|
|
---
|
|
|
|
## 13) Producto final (desktop / tablet / detalle)
|
|
|
|
**Que mostrar:**
|
|
- Tres capturas reales: dashboard desktop, vista movil, detalle
|
|
|
|
**Por que es importante:**
|
|
- Demuestra consistencia visual en distintos contextos.
|
|
- Refuerza que el producto esta terminado.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Layout responsive con breakpoints.
|
|
- Sidebar y tablas se adaptan a pantalla.
|
|
- Mismo lenguaje visual en todas las resoluciones.
|
|
|
|
**Guion corto:**
|
|
- “UI coherente en escritorio, movil y detalle.”
|
|
- “Experiencia continua sin cambios de lenguaje visual.”
|
|
|
|
---
|
|
|
|
## 14) Conclusiones (Frontend + UX)
|
|
|
|
**Que mostrar:**
|
|
- Slide de conclusiones sin capturas
|
|
|
|
**Por que es importante:**
|
|
- Cierre claro con tres ideas fuertes.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Escalabilidad: componentes reutilizables y layout consistente.
|
|
- UX: busqueda y filtrado minimizan tiempo de acceso.
|
|
- Frontend: stack moderno y cohesion visual.
|
|
|
|
**Guion corto:**
|
|
- “Escalabilidad: arquitectura modular para crecer.”
|
|
- “UX: acceso rapido a informacion clave.”
|
|
- “Frontend: stack moderno y UI consistente.”
|
|
|
|
---
|
|
|
|
## 15) Arquitectura de UI (resumen tecnico)
|
|
|
|
**Que mostrar:**
|
|
- Esquema simple: datos -> mapeo -> componentes -> vistas
|
|
|
|
**Por que es importante:**
|
|
- Explica el flujo completo de datos hacia la interfaz.
|
|
- Justifica por que la UI es estable y mantenible.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Los servicios obtienen datos desde Dolibarr.
|
|
- El mapper convierte datos crudos a formato UI.
|
|
- Componentes reutilizables construyen las vistas.
|
|
|
|
**Guion corto:**
|
|
- “La UI consume datos normalizados y los presenta en componentes.”
|
|
- “Esto hace la interfaz escalable y consistente.”
|
|
|
|
---
|
|
|
|
## 16) Sistema de diseno (tokens y componentes)
|
|
|
|
**Que mostrar:**
|
|
- Captura de variables/tokens en `app/globals.css`
|
|
|
|
**Por que es importante:**
|
|
- Garantiza coherencia visual.
|
|
- Facilita cambios globales de estilo.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Variables CSS para color, tipografia y espaciado.
|
|
- Componentes de UI consistentes con Tailwind + shadcn/ui.
|
|
- Estilos utilitarios sin CSS ad-hoc.
|
|
|
|
**Guion corto:**
|
|
- “Tokens = coherencia y escalabilidad visual.”
|
|
- “Componentes reutilizables evitan duplicar estilos.”
|
|
|
|
---
|
|
|
|
## 17) Accesibilidad y usabilidad
|
|
|
|
**Que mostrar:**
|
|
- Captura con componentes nativos (botones, inputs) y estados focus
|
|
|
|
**Por que es importante:**
|
|
- Mejora la experiencia para todos los usuarios.
|
|
- Cumple buenas practicas de accesibilidad.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Uso de elementos semanticos y aria cuando aplica.
|
|
- Contraste suficiente en badges y botones.
|
|
- Navegacion por teclado en menus y formularios.
|
|
|
|
**Guion corto:**
|
|
- “La UI es usable con teclado y mantiene buen contraste.”
|
|
- “Se prioriza accesibilidad desde la base.”
|
|
|
|
---
|
|
|
|
## 18) Rendimiento percibido
|
|
|
|
**Que mostrar:**
|
|
- Captura de skeletons y un ejemplo de renderizado rapido
|
|
|
|
**Por que es importante:**
|
|
- La velocidad percibida es clave en productos de gestion.
|
|
- Mejora la sensacion de fluidez.
|
|
|
|
**Como funciona y que muestra:**
|
|
- Carga progresiva con placeholders.
|
|
- Evita flashes de contenido sin estilo.
|
|
- Componentes optimizados para renderizar rapido.
|
|
|
|
**Guion corto:**
|
|
- “La carga se siente inmediata aunque haya espera real.”
|
|
- “Eso mantiene al usuario en flujo de trabajo.”
|
|
|
|
--- |