A/IAALQUIM IASELECTED WORK · CASE 01
← Volver al portafolio

CASE 01 · LIVE DEMO INTERACTIVE COURSEWARE

Graph Engineering 101

Diseñar la estructura de un sistema de agentes antes de dejarlo ejecutar.

Graph Engineering 101 convierte un tema técnico emergente en un curso autocontenido con 19 módulos, simulaciones, progreso persistente, examen, cheat sheet y fuentes. La pieza permite aprender recorriendo estados y decisiones, no solo leyendo definiciones.

ROLRESEARCH · CURRICULUM · INTERACTION DESIGN · BUILD2026
Abrir curso interactivo Volver al portafolio en inglés
19módulos interactivos
01examen final
LOCALprogreso persistente
0dependencias de backend

PROJECT CARD / RECRUITER VIEW

Ficha técnica del proyecto.

ESTADO EXPLÍCITO LIVE DEMO
USUARIO OBJETIVO

AI engineers, builders y líderes técnicos que necesitan razonar sobre orquestación, estados, recuperación y evidencia en sistemas agenticos.

QUÉ CONSTRUÍ YO

Investigué el tema, diseñé la arquitectura pedagógica, escribí el contenido, construí las interacciones y empaqueté el curso como una experiencia web autocontenida.

AI ENGINEERING SIGNAL / RECRUITER VIEW

Backend, APIs, despliegue, pruebas y controles.

DEPLOYMENT
Artefacto HTML/CSS/JS servido desde el despliegue edge del portafolio.
BACKEND / API
Ninguno por diseño: el curso es portable y no depende de servicios activos.
STATE
Persistencia de progreso y módulos completados mediante localStorage.
TESTING
Pruebas de contrato verifican 19 lecciones, examen final y persistencia.
RISK CONTROL
Sin autenticación, secretos, datos personales ni superficie de backend.
ARQUITECTURA RESUMIDA
  1. 01HTML semántico
  2. 02CSS responsive
  3. 03JavaScript local
  4. 04Estado en localStorage
  5. 05Fuentes enlazadas
QUÉ FUNCIONA HOY
  • 19 módulos navegables
  • Progreso persistente
  • Simulaciones interactivas
  • Examen final y cheat sheet
DECISIONES TÉCNICAS DIFÍCILES
  • Distinguir una práctica emergente de un estándar establecido
  • Enseñar límites y fallos, no solo patrones felices
  • Mantener todo el curso portable y sin backend
MEDIA Y DEMO
DEMO
Curso público completo
CAPTURAS
Escenas y simulaciones dentro del curso
QUÉ QUEDA PENDIENTE
  • Graph engineering es un campo emergente; el curso evita presentarlo como una norma universal.
  • La experiencia demuestra diseño pedagógico y de interacción, no certifica desempeño de un sistema agentico específico.
  • El video de recorrido aún no existe; la demo interactiva es el artefacto principal.

01 / PROBLEMA

Los loops agenticos son fáciles de dibujar y difíciles de operar.

Cuando plan, ejecución, recuperación y evidencia viven dentro de un prompt o loop opaco, los fallos se vuelven difíciles de reproducir. El reto pedagógico era mostrar la estructura sin simplificar en exceso.

02 / DECISIÓN DE DISEÑO

Enseñar el grafo como una máquina de estados observable.

El curso presenta decisiones, transiciones, límites y artefactos mediante simulaciones y ejercicios. Cada módulo agrega una capa operativa y mantiene visibles las zonas de incertidumbre del campo.

SYSTEM / END TO END

El producto como flujo explícito.

Cada fase tiene una responsabilidad distinta. Esa separación hace posible observar el sistema, probarlo y corregirlo sin depender de intuición.

  1. 01

    Investigar

    Separar prácticas útiles, lenguaje emergente y afirmaciones que requieren cautela.

    SOURCE
  2. 02

    Modelar

    Convertir conceptos en estados, transiciones, contratos y fallos observables.

    GRAPH
  3. 03

    Simular

    Permitir que el estudiante compare loops, grafos y rutas de recuperación.

    RUN
  4. 04

    Evaluar

    Cerrar el recorrido con preguntas, práctica y una referencia compacta.

    TEST
  5. 05

    Persistir

    Guardar el avance en el navegador sin introducir cuentas o infraestructura innecesaria.

    STATE

PROOF / WHAT IS ACTUALLY SHOWN

Evidencia, no decoración.

Las etiquetas indican si el dato fue observado, proviene del artefacto o corresponde al registro profesional del caso.

PRUEBA AUTOMATIZADA19secciones de lección en el artefacto
CÓDIGO INSPECCIONADOLOCALSTORAGEprogreso persistente
CÓDIGO INSPECCIONADOEXAMevaluación final funcional
ARTEFACTO DESPLEGADOPUBLICcurso disponible sin login

SCOPE / HONEST BOUNDARIES

Lo demostrado y lo que aún requiere validación.

Un portafolio técnico también debe mostrar dónde termina la evidencia disponible.

  • Graph engineering es un campo emergente; el curso evita presentarlo como una norma universal.
  • La experiencia demuestra diseño pedagógico y de interacción, no certifica desempeño de un sistema agentico específico.
  • El video de recorrido aún no existe; la demo interactiva es el artefacto principal.

CASE 01 / GRAPH ENGINEERING 101

Diseñar la estructura de un sistema de agentes antes de dejarlo ejecutar.

Abrir curso interactivo Ver todo el portafolio