Curso: Interacción Hombre-Computador (202W0606) · Semestre 2026-2 · UNMSM — FISI Docente: Mg. Ing. Ernesto D. Cancho-Rodríguez, MBA (GWU) Equipo A · Fecha del plan: 16 de octubre de 2026
La guía (26.09.29.v4[print].Guia_Lab_06_Metaforas_de_Interfaz.pdf) exige dos documentos Word y sus
artefactos, comprimidos en un único archivo:
yy.mm.dd.IHC_LabS06_GrupoA_Metafora.zip
| Entregable | Contenido obligatorio (sección L.6) |
|---|---|
| Informe L.4 — Documentación paso a paso | Paso 1 (6.1): regeneración desde el prompt hasta una versión propia mejorada del HTML + verificación con capturas. Paso 2 (6.2): evidencia + interpretación. Paso 3 (6.3): evidencia + CSV → Excel + análisis de ≥ 30 registros. Paso 4 (6.3b): notebook mejorado + EDA. Paso 5: diagramas UML mejorados en SVG con su .puml + interpretación de cada uno. |
| Informe L.5 — Reporte analítico de la metáfora propia | Metáfora nueva (distinta de las 12 de la galería) con dominio fuente, dominio destino, ≥ 5 correspondencias y tipo; prototipo HTML autocontenido e instrumentado; evaluación con ≥ 3 compañeros y CSV con n ≥ 30; análisis en notebook con ≥ 1 gráfico; Excel con Tabla con formato; anexos de capturas y de UML (SVG + .puml). |
Rúbrica (20 pts, L.7): Metáfora (original, 5+ correspondencias, tipo) · Prototipo (interactivo, diseño rico, instrumentado) · Evaluación (3+ participantes, CSV) · Análisis (gráficos + interpretación) · Documentación (informe + UML). El plan apunta al nivel «Excelente» en los cinco.
| Insumo | Origen | Estado |
|---|---|---|
| Guía Lab 06 (PDF) | Carpeta / Classroom «P05: Parte1» | ✅ |
ejercicio_6_1_galeria_metaforas.html, ejercicio_6_2_comparativa_estilos.html |
Classroom «Parte2 METAFORAS: Los HTML/JS» | ✅ |
ejercicio_6_3_medicion_interaccion.html (= https://stately-croquembouche-93dd68.netlify.app/, versión desplegada por el docente; el código es idéntico al archivo local) |
Classroom «Parte3» | ✅ |
| Galería 6.1 desplegada: https://spiffy-creponne-8c534b.netlify.app/ | Classroom «Parte2» | ✅ (copia en insumos/netlify/) |
ejercicio_6_3_analisis_metaforas.ipynb |
Classroom «L06: Parte4» | ✅ |
5 diagramas UML del docente (D1Comp… a D5UC…, .puml) |
Classroom «Parte5: Casos de Metáforas: Diagramas UML» | ✅ descargados en insumos/uml_docente/ |
| PPT Sesión 06 (metáforas) | S6/Lab06_Analisis_Metaforas/insumos/ |
✅ (reutilizable para el marco teórico) |
| Plantilla de informe con carátula (docx-js) y escudo | S6/…/build/generar_informe.js |
✅ (se reutiliza, adaptada a APA 7) |
| CSV reales del ejercicio 6.3 (participantes del equipo) | Los envía una integrante | ⏳ pendiente |
| CSV reales del prototipo L.5 (≥ 3 compañeros, n ≥ 30) | Los genera el equipo con el prototipo nuevo | ⏳ pendiente (requiere que el equipo lo use) |
Regla de integridad: no se inventan datos de participantes. Los análisis de los pasos 3, 4 y L.5 se ejecutan solo con CSV reales. Mientras lleguen, el notebook se prueba con un archivo marcado explícitamente como
PRUEBA_que no entra al informe.
S7 - Grupal/
├── PLAN.md ← este documento
├── README.md ← portada del repositorio con enlaces
├── insumos/ ← material del docente, sin modificar
│ ├── uml_docente/ netlify/ csv_reales_6_3/ (pendiente)
├── L4_paso_a_paso/
│ ├── paso1_galeria/ ← prompt, HTML regenerado y versión mejorada, capturas
│ ├── paso2_estilos/ ← capturas + cálculo de contraste WCAG
│ ├── paso3_medicion/ ← CSV reales consolidados + Excel con Tabla
│ ├── paso4_python/ ← notebook mejorado (.ipynb) + gráficos
│ └── paso5_uml/ ← 5 diagramas mejorados (.puml + .svg)
├── L5_metafora_propia/
│ ├── prototipo/ ← HTML autocontenido instrumentado
│ ├── datos/ ← CSV de la evaluación + Excel con Tabla
│ ├── notebook/ ← análisis .ipynb + gráficos
│ ├── uml/ ← diagramas de la metáfora (.puml + .svg)
│ └── capturas/
├── build/ ← scripts (docx-js, conversión CSV→Excel, render PlantUML)
└── entregables/ ← 2 .docx (+ PDF de control) y el .zip final
Repositorio público en GitHub (cuenta del token: nicola3113). Cada fase termina con un commit y un push.
El token se usa solo como variable de entorno: nunca se escribe en archivos, en la URL del remoto ni en
el historial.
README.md, .gitignore (excluye node_modules/, temporales de Office).aria-* en el modal.prefers-color-scheme) y contraste AA verificado.participante; validar columnas y rangos.files.upload())..ipynb ejecutado + capturas..puml del docente a SVG (servidor oficial de PlantUML, no hay Java local).<<include>>/<<extend>>.Proyecto del equipo: Ernesto Investing AI (plataforma de gestión de portafolio de inversiones, Lab 04). Tarea clave frecuente: revisar el estado del portafolio y decidir si rebalancear.
Propuesta de metáfora: «El portafolio como huerto» — tipo estructural (con rasgos ontológicos). No coincide con ninguna de las 12 de la galería (escritorio, carrito, progreso ascendente, arrastrar y soltar, migas de pan, conversacional, ventanas, panel de control, zoom espacial, asistente paso a paso, papelera, nube).
| # | Dominio fuente (huerto) | Dominio destino (portafolio) |
|---|---|---|
| 1 | Parcela del huerto | Sector o clase de activo (diversificación) |
| 2 | Planta | Activo / posición abierta |
| 3 | Tamaño de la planta | Valor de mercado de la posición (peso en el portafolio) |
| 4 | Follaje verde / marchito | Rendimiento positivo / negativo |
| 5 | Sembrar una semilla | Comprar un activo nuevo |
| 6 | Regar | Aportar capital a una posición |
| 7 | Podar | Vender parcialmente / tomar ganancias |
| 8 | Cosecha | Dividendos o cupones cobrados |
| 9 | Clima y estaciones | Ciclo y volatilidad del mercado |
Degradación elegante prevista: las plantas no pierden 30 % en un día; por eso cada planta muestra al pasar el cursor la cifra exacta (precio, variación, peso), de modo que la ruptura de la metáfora sea predecible.
Diseño del experimento (intra-sujeto): el prototipo muestra la misma cartera en dos condiciones —
A: vista metafórica (huerto) y B: vista convencional (tabla/gráfico plano)— con 3 tareas cada una
(p. ej., «¿qué sector pesa más?», «identifica el activo con peor rendimiento», «aporta S/ 500 al activo X»),
orden contrabalanceado. Se registra con performance.now() y addEventListener: participante, condicion,
tarea, tiempo_ms, clics, errores, exito y una pregunta de facilidad (SEQ 1–7). Con ≥ 5 participantes ×
6 tareas = ≥ 30 filas (la guía pide mínimo 3 compañeros; se apunta a 5 o más de los 11 integrantes).
performance.now()), documentación
de pandas, matplotlib, SciPy y PlantUML.yy.mm.dd.IHC_LabS06_GrupoA_Metafora.zip con la fecha de entrega.| Qué | Quién | Para qué fase |
|---|---|---|
| CSV reales del ejercicio 6.3 (≥ 5 participantes) | Integrante que los envía | Fases 3–4 |
| Usar el prototipo L.5 desde el enlace y exportar el CSV (≥ 5 integrantes) | Todos | Fase 6 |
| Captura de verificación en Firefox (si nadie lo autoriza instalar) | Quien tenga Firefox | Fase 1 |
| Fecha exacta de entrega (para el nombre del .zip) | Equipo | Fase 8 |
Arboleda Sánchez, Ericka Sofía · Cabrejos Palomino, Christian Daniel · Ccoicca Fernández, Adrián · Cerna Sifuentes, Augusto Nicolás · Grijalva De La Cruz, Rony Smith · Martines Cancho, Josué · Postigo Vega, Diana Carolina · Siesquen Torres, Katherine Lizbeth · Tecsi Alanoca, Jean Carlo · Tonconi Isidro, María Sunori · Villegas Niño, Marco Antonio.