Merge branch 'Presentacion-Marcos'

presentaciones/marcos/Canva.txt

@@ -0,0 +1 @@
+https://canva.link/rvvkr8loc8gx8v1

presentaciones/marcos/frontend_ux.md

@@ -0,0 +1,365 @@
+# 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.”
+
+---