Investigación en Interacción Humano-Computador

Aprendizaje Kinestésico mediante Visión Artificial

Bienvenidos a InfoNinja. Este proyecto nace con la visión de transformar el aprendizaje tradicional en una experiencia dinámica, donde tu movimiento físico es la herramienta principal para interactuar con el contenido.

A través de nuestra arena virtual, hemos logrado que cada gesto sea una acción precisa. Te invitamos a explorar un sistema donde la tecnología de visión artificial y el conocimiento técnico convergen para poner a prueba tus habilidades en tiempo real.

Interfaz del index de la página.
Punto de partida del juego.
Interfaz de la arena.

¿Cómo
funciona
la Arena?

InfoNinja Engine

InfoNinja es una arquitectura de software diseñada para la captura y análisis de datos kinestésicos. A diferencia de las interfaces tradicionales, nuestro sistema utiliza el navegador para procesar el flujo de video en tiempo real, convirtiendo cada movimiento de tus manos en un comando lógico.

El motor del juego coordina tres capas fundamentales: la entrada de datos (visión artificial), la lógica de evaluación (banco de preguntas) y la persistencia de resultados (base de datos relacional).

"La tecnología de visión artificial no solo captura movimiento; traduce el conocimiento técnico en acciones medibles en tiempo real."
01
Capa de Visión (MediaPipe)

Utilizamos algoritmos de detección de puntos clave para mapear tu esqueleto en 720p. Esto permite que el sistema detecte colisiones entre tus manos y las esferas de respuesta sin necesidad de hardware externo.

02
Lógica de Evaluación (Motor JS)

El motor.js gestiona el ciclo de vida del juego: carga preguntas dinámicas, cronometra tus respuestas y verifica la precisión del gesto realizado frente a la opción correcta.

03
Persistencia (MySQL + PHP)

Al finalizar, el sistema encapsula tus métricas (puntaje, aciertos, errores) vía método POST hacia gestion_puntajes.php, garantizando que tu progreso sea registrado en nuestra base de datos centralizada.

Catálogo de Arenas Académicas

Ecosistemas Temáticos InfoNinja

Arena Informática

💻 Informática

Aquí te encontrarás con los pilares fundamentales del desarrollo: JavaScript, HTML, PHP, CSS y SQL. Conócelos a fondo, pero mantén tus reflejos afilados: ten cuidado con el Malware, pues una sola infección puede corromper todo tu sistema.

Arena Contaduría

📊 Contaduría

Tu precisión define el éxito en Costos, Auditoría, Impuestos, Análisis y Derecho. La exactitud es tu arma, pero no te confíes: un Descuadre Fiscal acecha entre las cifras esperando arruinar tu reputación.

Arena Administración

📈 Administración

Construye tu imperio sobre los pilares de la Administración, RRHH, Mercadeo, Estadística y Finanzas. Sé estratega, pero mantente alerta; la Quiebra es un peligro inminente para quienes pierden el control.

Arena Electrónica

⚡ Electrónica

Domina la potencia con Circuitos, Robótica, Microchips, Cálculo y Voltaje. Sé preciso, pero vigila tu entorno; un Cortocircuito puede ocurrir en cualquier instante y dejarte fuera de combate.

Arena Educación

🎓 Educación

Forja el futuro dominando Aprendizaje, Planificación, Evaluación, Psicología y Didáctica. Tu conocimiento es tu fuerza, pero no bajes la guardia: quedar Reprobado es una amenaza real para quienes fallan en la arena.

Tecnología

Stack Tecnológico

MediaPipe

MediaPipe

Implementado para reconocimiento de gestos. Mapea puntos clave en tiempo real transformando movimiento en coordenadas.

JavaScript

JavaScript

Gestiona el bucle de renderizado, validación de colisiones entre gestos y el cronómetro de la partida.

PHP 8

PHP 8

Intermediario seguro. Procesa datos enviados desde el frontend y valida la integridad de los resultados.

MySQL

MySQL

Base de datos relacional para el ranking global. Registra permanentemente cada partida.

Mecánica y Flujo

Arquitectura de Interacción

Corte Dinámico

Paradigma de Corte Dinámico

InfoNinja adopta la mecánica de interacción táctil popularizada por Fruit Ninja, pero la evoluciona hacia un entorno de visión artificial. El usuario no solo "reacciona" ante un objeto; debe procesar información académica y aplicar una respuesta motriz precisa para validar su conocimiento.

Ciclo de Decisión

Ciclo de Decisión (Game Loop)

El sistema opera en un bucle cerrado de alta eficiencia: Captura (video en tiempo real) → Procesamiento (mapeo de coordenadas) → Validación (detección de colisiones lógicas) → Persistencia (registro inmediato del puntaje).

Validación

Validación de Conocimiento

La verdadera ventaja reside en que el "corte" no es un evento aleatorio. Funciona como un trigger lógico que obliga al estudiante a discernir entre respuestas correctas e incorrectas, gamificando el proceso de evaluación tradicional.

InfoNinja Team

Conclusiones del Proyecto

InfoNinja trasciende la definición convencional de un software educativo. Al integrar Visión Artificial (MediaPipe) y Evaluación Adaptativa, hemos demostrado que es posible convertir el navegador web en una arena de competencias técnicas, donde el código no solo se lee, sino que se ejecuta a través de la interacción humana.

Como equipo de desarrollo del IUJO, este proyecto ha sido nuestra plataforma para validar la viabilidad de la interacción kinestésica como método de enseñanza.

  • Innovación: Visión artificial aplicada a la evaluación técnica.
  • Integración: Sincronización en tiempo real entre frontend y base de datos.
  • Escalabilidad: Motor de juego modular adaptable a distintas carreras.
  • Compromiso: Desarrollo de soluciones informáticas con propósito pedagógico.