Español · English

Dashboards con IA · Javier Forero

Dos portafolios de dashboards de decisión construidos con IA bajo una misma dirección analítica: uno con Claude, otro con ChatGPT Work. No solo grafican: interpretan, diagnostican y convierten los datos en decisión.

▶️ Home (selector de las dos IAs): https://dashboards.javierforero.co/

Todo el sitio es bilingüe ES/EN con un selector único en la barra superior. El idioma elegido persiste entre tableros (localStorage) y se refleja en la URL (?lang=en), de modo que un enlace compartido conserva el idioma.

Estructura

/                            → selector: elige portafolio (Claude · ChatGPT)
/claude/                     → hub del portafolio construido con Claude
/claude/sla-operaciones/     → Cumplimiento de SLA · Operaciones B2B
/claude/pulso-financiero/    → Pulso Financiero · Finanzas Corporativas
/claude/desempeno-comercial/ → Desempeño Comercial · Dirección B2B
/claude/costo-vida-colombia/ → Divulgación · Costo de vida por ciudad en Colombia (DANE 2025)
/ia-compute/                 → Divulgación · La aceleración del cómputo en IA (1958–2026)
/tasas-cambio/               → Divulgación · Tasas de cambio oficiales de bancos centrales (México, Colombia, Argentina, Brasil)

El portafolio de ChatGPT Work vive en un sitio externo: https://javier-dashboards.jforero.chatgpt.site/ (su versión inglesa, en /en).

La URL antigua /pulso-financiero/ redirige automáticamente a /claude/pulso-financiero/. El stub usa ruta absoluta, nunca relativa: una ruta relativa reintroduce el bug de anidamiento claude/claude/<caso>/. /sla-operaciones/ en la raíz ya no existe: si quieres conservar los enlaces viejos de ese tablero, hay que volver a crear su stub.

Dos tipos de contenido — no confundirlos

Este repositorio aloja dos cosas con propósitos, datos y criterios de calidad distintos. La distinción es deliberada y debe permanecer visible para el visitante.

	Demo de consultoría	Pieza de divulgación
Ubicación	/claude/<caso>/	raíz: /<pieza>/
Datos	Ficticios o anonimizados, construidos para el caso	Públicos, reales, con fuente citada y verificable
Propósito	Demostrar capacidad analítica y de producto ante un cliente potencial	Explicar un fenómeno y circular en abierto (LinkedIn, POVs)
Interacción	Filtros, carga de datos propios, Q&A, gobernanza de la decisión	Exploración de una sola narrativa; sin carga de datos
Criterio de calidad	Que la mecánica del tablero sea creíble y la decisión, accionable	Que cada cifra sea trazable a su fuente y su incertidumbre esté declarada
Riesgo si se confunden	Que un lector tome los datos ficticios por reales	Que un cliente la juzgue como demo incompleta por no tener filtros

Portafolio Claude · demos de consultoría

Datos de demostración, salvo donde se declara lo contrario. Ninguna cifra corresponde a un cliente real.

Dashboard	Descripción	Enlace
Cumplimiento de SLA · Operaciones B2B	8 capas, alertas, diagnóstico del quiebre, gobernanza, Q&A conversacional y brief exportable. Sube tu propio SLA (CSV/XLSX): detección automática del quiebre, validación de continuidad mensual y recálculo completo en el navegador.	/claude/sla-operaciones/
Pulso Financiero · Finanzas Corporativas	Crecimiento, margen, caja y liquidez con puente precio-volumen. Cuatro modelos predictivos comparados a ciegas (descomposición, Holt-Winters, regresión de Fourier y SARIMA) con validación de origen móvil y benchmark ingenuo. KPIs Inteligentes, gobernanza y brief exportable. Tres orígenes de datos (demo simulado · empresa real · tus propios datos), soporte mensual y trimestral, y exportación de resultados a Excel/CSV.	/claude/pulso-financiero/
Desempeño Comercial · Dirección B2B	Ventas vs. meta por vendedor y región, diagnóstico del embudo que aísla el cuello de botella en Propuesta, pipeline ponderado por probabilidad empírica de cierre, predicción con backtest y Q&A conversacional determinista, con gobernanza de la decisión.	/claude/desempeno-comercial/

Divulgación · datos públicos verificables

Excepción declarada. Por la regla de arriba, una pieza de divulgación iría en la raíz. Costo de Vida en Colombia vive bajo /claude/ por decisión editorial: se construyó con Claude y se publicó en ese hub. Sus datos siguen siendo públicos y trazables, y la tarjeta del hub la muestra en la sección de divulgación, separada de las demos. Datos reales de fuentes citadas. Cada cifra declara su nivel de evidencia.

Pieza	Descripción	Fuente	Enlace
Costo de Vida en Colombia · 23 ciudades	Qué tan cara es la canasta básica en cada ciudad frente a la ciudad promedio. Mapa georreferenciado sobre el Marco Geoestadístico Nacional: el color cubre el territorio medido —municipio o área metropolitana completa— y el tamaño del círculo, la población urbana; el tono suave del departamento es solo contexto y los nueve departamentos sin ciudad medida quedan en gris. Tooltip con 36 meses de IPC. Declara su propio límite: el índice es un proxy construido sobre la línea de pobreza monetaria y dispersa 62 % entre extremos frente al 20 % del Deflactor Espacial de Precios del DANE, así que comunica orden y no magnitud.	DANE · Pobreza monetaria 2025, IPC, CNPV 2018, DIVIPOLA, MGN 2018	/claude/costo-vida-colombia/
La aceleración del cómputo en IA · 1958–2026	68 años de cómputo de entrenamiento, de la neurona artificial de Rosenblatt a los modelos frontera de 2026. 72 modelos, cada uno con su nivel de evidencia declarado (publicado · confirmado · probable · especulativo · tendencia). Escala logarítmica, umbral de riesgo sistémico de la EU AI Act (10²⁶ FLOP) y contraste explícito con la Ley de Moore.	Epoch AI · CC BY	/ia-compute/
Tasas de cambio oficiales · México, Colombia, Argentina y Brasil	¿Cuánto vale hoy cada moneda frente a las otras y qué tan lejos está de su comportamiento reciente? Lista con banderas y el último valor oficial de cada serie, junto al histórico de la tasa elegida, histórico diario completo con fines de semana y festivos diferenciados, comparación base 100, variaciones y conversor. Sin servidor: lee en vivo los JSON del repositorio de datos (raw.githubusercontent con respaldo jsDelivr), y cada cifra lleva su fecha y su fuente. Las cruzadas entre MXN, COP, ARS y BRL se rotulan como calculadas.	Banco de México (FIX) · Banco de la República (TRM) · BCRA (A 3500) · BCB (PTAX) · procesados en fx-bancos-centrales	/tasas-cambio/

Metodología predictiva (Pulso Financiero)

No existe un modelo bueno para todas las series: existe el que menos se equivoca con la tuya. Por eso el tablero compara cuatro modelos en cada serie en vez de fijar uno:

Modelo	Qué asume	Cuándo gana
Descomposición	Tendencia lineal + índice estacional estable	Series con tendencia limpia y estacionalidad regular
Holt-Winters	Nivel, tendencia y estacionalidad que se adaptan	Cuando el negocio cambia de ritmo
Regresión estacional (Fourier)	Ciclo anual como suma de armónicos; K elegido por AICc	Historia corta o ruidosa; pocos parámetros
SARIMA (p,1,q)(P,1,Q)ₘ	Memoria en los errores tras diferenciar	Series con inercia y arrastre

Protocolo de validación. Cada modelo se re-entrena en varios cortes del tiempo (origen móvil) y predice a ciegas los periodos siguientes; los errores (MAPE, MAE, RMSE) se promedian y se contrastan con un método ingenuo estacional. Un modelo que no supera esa referencia no aporta valor, y el tablero lo dice.

Limitación declarada. Con historias cortas todos los criterios de selección son ruidosos: si dos modelos quedan a menos de ~0,5 puntos de MAPE, la diferencia puede no ser real. El rango mínimo-máximo entre cortes hace visible esa fragilidad.

Cómo agregar contenido nuevo

Demo de consultoría (caso de negocio explorable):

1. Crea una carpeta hermana dentro de claude/ (p. ej. claude/inventario/) con su propio index.html.
2. Duplica una tarjeta en claude/index.html; cambia título, descripción, chips y enlace.
3. Agrega la URL a sitemap.xml y una fila a la tabla de demos.
4. Marca los textos traducibles con data-i18n y añade sus pares al diccionario TR.
5. Commit + push. Queda en https://dashboards.javierforero.co/claude/<carpeta>/.

Pieza de divulgación (un argumento, datos públicos):

1. Crea la carpeta en la raíz (p. ej. ia-compute/) con su propio index.html.
2. Enlázala desde claude/index.html en su propia sección, visualmente separada de las demos, para que nadie confunda datos reales con datos de demostración.
3. Agrega la URL a sitemap.xml y una fila a la tabla de divulgación.
4. Verifica que canonical, og:url, hreflang y el content_group de GA4 apunten a la ruta de raíz.
5. Cada cifra publicada debe llevar fuente citada en la propia página, no solo en el README.

Convenciones técnicas

• Bilingüe: un mapa único ES→EN por página, donde el español es la clave. El selector escribe jf-lang e iac_lang en localStorage para que el idioma persista en todo el portafolio. Cada página declara hreflang es/en/x-default.
• Tipografía: la única fuente disponible en el repo es IgraSans.otf, duplicada en assets/fonts/ y fonts/. No existen versiones .woff ni .woff2. Las páginas nuevas deben declarar @font-face con format('opentype') y las cuatro rutas, o embeber la fuente en base64.
• Nada de rel=preload para fuentes: no admite lista de alternativas y produce un 404 en consola si la ruta cambia.
• Imagen social: og-image.png (1200×630) vive en la raíz y es genérica del sitio.
• Analítica: GA4 G-MQ3K8EVKV0 en todas las páginas publicadas, con content_group propio para separarlas en los informes. Las versiones offline lo excluyen a propósito.
• Cero alucinación en métricas: toda cifra publicada debe ser trazable a una fuente citada. Un objetivo nunca se presenta como logro.

Publicar (GitHub Pages)

Settings → Pages → Deploy from a branch → main / / (root). El CNAME está en la raíz. No hay .nojekyll: hoy no hace falta porque ninguna ruta empieza por _, pero conviene agregarlo antes de crear una que sí.

Autor

Javier Forero — javierforero.co · LinkedIn · GitHub

Licencia

MIT (código). La tipografía IgraSans es de su titular y no forma parte de la licencia. Los datos de Epoch AI usados en /ia-compute/ se distribuyen bajo Creative Commons BY.