📅 Agenda oficial del día

Un día para
innovar.

Ideación, prototipado digital y exposición en un solo día. Todo lo que necesitas para arrancar tu proyecto.

7:00 AM – 3:00 PM
HTML · CSS · JavaScript
Estimador de Proyectos
Ver agenda
Programa

Agenda del día

Cada bloque está diseñado para maximizar el aprendizaje y la creatividad del equipo.

7:00Personal
🚪 Llegada de personal logístico y administrativo
  • Organización de espacios: Mesa PC, Zona Café, Mesa de Inscripción
  • Pegar los QR en los puntos asignados
7:3030 min
⚙️ Alistamiento y verificaciones
  • Verificación de app de acreditación (4 monitores en mesa de inscritos por sede)
  • Personal logístico ubicado en puerta de ingreso
  • Verificación e inventario de PC y carga (7:00–8:00 a.m.)
7:301 hora
📋 Registro de participantes
  • Apertura de puertas e inicio del proceso de registro
  • Entrega de escarapelas a los participantes
  • Proyección de presentación de fondo y música ambiental
8:3015 min
🎉 Apertura del Bootcamp Day
  • Bienvenida oficial a todos los participantes
8:4515 min
🧊 Actividad rompe hielo (psicosocial)
  • Dinámica de integración y activación grupal
9:0010 min
🚶 Desplazamiento a los salones
  • Campistas se dirigen a los salones asignados
9:1050 min
💡 Inicio: Master Class del reto y exploración
  • Presentación del reto del día
  • Exploración del problema y contexto
10:0030 min
☕ REFRIGERIO  ·  Formación de grupos  ·  1er stiker
10:302 horas
🖥️ Creación y ejecución del reto por equipos
  • Trabajo colaborativo en la solución del reto
  • 3er stiker (Instagram) y entrega de Kit
12:301 hora
🍽️ ALMUERZO  ·  2do stiker  ·  4to stiker
1:3030 min
🎯 Preparación de cierre de pitch
  • Refinamiento de la propuesta y ensayo del pitch
2:0045 min
🎤 Presentación de pitch (3 minutos)
  • Cada equipo expone su solución en máximo 3 minutos
  • Entrega de kit u obsequio a los participantes
2:4515 min
🎁 Sorteo de premio
  • Rifa sorpresa entre los participantes del evento
3:00Cierre
🏁 Cierre y agradecimientos
  • Palabras de cierre y agradecimiento a los participantes
  • 🎉 ¡Hasta la próxima!
Retos del día

Reto: Estimador de Proyectos

Construye desde cero una herramienta web interactiva usando HTML, CSS y JavaScript vanilla. Gestiona tareas, recursos y riesgos, calcula costos automáticamente y visualiza los resultados.

Este taller tiene como objetivo que construyas, desde cero, una herramienta web interactiva de estimación de proyectos usando únicamente HTML, CSS y JavaScript vanilla — sin frameworks ni librerías externas obligatorias.

1
🎯Objetivo General▾

Construir una aplicación web de una sola página (single-page app) que permita gestionar tareas, recursos y riesgos, calcular costos automáticamente y visualizar los resultados.

2
📌Contexto y Motivación▾

En cualquier proyecto — de software, diseño, construcción o marketing — existe una fase crítica: estimar cuánto tiempo, cuánto cuesta y qué riesgos existen. Sin esa estimación, los proyectos se desbordan.

  • Aplica manipulación dinámica del DOM con JavaScript puro
  • Implementa lógica de cálculo de costos, totales y contingencias
  • Diseña una interfaz clara, organizada y usable
  • Visualiza datos con gráficas o diagramas simples
  • Exporta o imprime el resultado de la estimación
3
🏪Caso de Uso Sugerido▾

Proyecto: Tienda en línea para una empresa local

  • Incluye: diseño de páginas, catálogo de productos, carrito de compras, pasarela de pago e integración con WhatsApp
  • Equipo disponible: 1 diseñador, 2 desarrolladores, 1 tester
  • Define al menos 5 tareas, 3 recursos y 2 riesgos dentro de tu estimador
"No diseñes para el usuario que imaginas, diseña para el usuario que existe."

La aplicación debe incluir al menos los siguientes módulos funcionales. Cada uno es un componente independiente que se integra al resumen final.

1
📝Módulo de Tareas▾

Agregar, editar y eliminar tareas del proyecto.

  • Nombre de la tarea
  • Días estimados de duración
  • Costo asociado
  • Responsable del entregable
2
👥Módulo de Recursos▾

Registrar roles del equipo con tarifa diaria y días asignados.

  • Nombre del rol (diseñador, desarrollador, tester…)
  • Tarifa diaria en la moneda del proyecto
  • Días asignados al proyecto
  • Cálculo automático del subtotal por rol
3
⚠️Módulo de Riesgos▾

Listar los riesgos del proyecto con su nivel de impacto y probabilidad.

  • Nombre o descripción del riesgo
  • Nivel de impacto: alto, medio, bajo
  • Probabilidad de ocurrencia: alta, media, baja
4
📊Resumen y Totales▾

Mostrar el consolidado financiero y temporal del proyecto.

  • Costo total base (tareas + recursos)
  • Contingencia configurable en porcentaje
  • Total final estimado con contingencia aplicada
  • Contador de riesgos críticos
5
📈Visualización (Avanzado)▾

Gráfica de barras o dona con distribución de costos o días por tarea.

  • Usa Chart.js desde CDN para implementar las gráficas
  • Diagrama de Gantt relativo mostrando la proporción de días por tarea
  • Leyenda dinámica que se actualiza con cada cambio
Chart.jsCanvas APIJS reduce()

💡 Entregables mínimos

  • Al menos 5 tareas, 3 recursos y 2 riesgos registrados en la herramienta
  • Cálculo automático de totales funcionando correctamente
  • Interfaz navegable y estéticamente organizada
  • Bonus: exportación en TXT o gráficas con Chart.js

Si es tu primera vez construyendo algo así, estos conceptos son clave para el desarrollo de la herramienta.

1
🌐DOM — Manipulación dinámica▾

Actualiza la interfaz sin recargar la página usando JavaScript puro.

  • document.getElementById() para acceder a elementos
  • innerHTML para reescribir el contenido de un bloque
  • addEventListener() para capturar eventos del usuario
2
🗂️Arrays de objetos▾

Guarda tus tareas y recursos en arreglos de objetos.

  • Ejemplo: [{ nombre: 'Tarea A', días: 5, costo: 1000 }]
  • Manipúlalos con push(), splice() y map()
3
🔄Patrón Render▾

Crea una función que dibuje toda la tabla desde cero cada vez que el arreglo cambie.

  • Crea renderTareas() y llámala después de cada cambio
  • Combina .map() con template literals para generar filas HTML
  • Asigna el resultado a innerHTML del contenedor
4
🧮Cálculos con reduce()▾

JavaScript reduce() es tu mejor aliado para sumar costos y días.

  • Ejemplo: total = tareas.reduce((suma, t) => suma + t.costo, 0)
  • Aplica el porcentaje de contingencia sobre el total base
5
📉Gráficas con Chart.js▾

Importa Chart.js desde CDN e implementa gráficas con pocas líneas.

  • CDN: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js
  • Tipos recomendados: doughnut para costos, bar para días
  • Recuerda destruir el chart anterior antes de recrearlo: chart.destroy()

Aquí puedes ver y explorar la solución de referencia del reto. Úsala como inspiración — no como copia. Tu versión debe reflejar tu propio código y criterio.

estimador-de-proyectos.html — Demo de referencia
Siguiente reto
Reto 2 — Predictor de Demanda con Datos Sucios
Ciencia de datos · Series temporales · Holt-Winters · Forecast con intervalo de confianza
Ver Reto 2 →
`; let demoLoaded = false; function loadDemo() { if (demoLoaded) return; demoLoaded = true; document.getElementById('demo-frame').srcdoc = DEMO_HTML; } function toggleAcc(card) { card.classList.toggle('open'); } // Animate timeline items progressively; items are visible by default (no JS dependency) if ('IntersectionObserver' in window) { const tlItems = document.querySelectorAll('.tl-item'); tlItems.forEach(el => el.classList.add('anim')); const obs = new IntersectionObserver(entries => { entries.forEach((e, i) => { if (e.isIntersecting) { setTimeout(() => e.target.classList.add('vis'), i * 45); obs.unobserve(e.target); } }); }, { threshold: 0.06 }); tlItems.forEach(el => obs.observe(el)); }