Misión Semiótica: estilo Sherlock Holmes

 Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.

Crea una aplicación PWA (Progressive Web App) con los siguientes requisitos:

### Nombre de la Aplicación

Misión Semiótica: estilo Sherlock Holmes

### Propósito / Función Principal

El propósito central de la actividad “Misión Semiótica: estilo Sherlock Holmes” es convertir la sesión de 90 minutos en una experiencia de investigación visual guiada, donde el estudiante asume el rol de detective que debe resolver un caso semiótico realista: analizar imágenes en contextos culturales específicos y justificar decisiones visuales de una campaña comunicacional.

En términos didácticos, su función principal es articular las cinco fases del modelo IUTPC (Inicio, Utilidad, Transformación, Práctica, Cierre) dentro de un aplicativo interactivo gamificado que obliga al estudiante a recorrer, paso a paso, el ciclo completo: observar, describir, interpretar, relacionar, argumentar y reflexionar sobre imágenes semióticas. No se trata solo de “jugar”, sino de utilizar la narrativa de caso policial y las mecánicas de juego (puntos, insignias, retos, checklist) como mediadores para profundizar el análisis de signos, códigos culturales y figuras retóricas.

Más específicamente, la actividad cumple estas funciones principales:

Función de contextualización profesional: sitúa el aprendizaje en un encargo verosímil (una ONG que solicita una campaña sobre identidad cultural y diversidad en Lima), de modo que cada pregunta, decisión y análisis se justifica por una necesidad comunicacional real y no solo por un ejercicio abstracto de aula.

Función de andamiaje cognitivo: cada bloque de preguntas (abiertas y cerradas) está diseñado para llevar al estudiante desde el nivel denotativo al connotativo y luego al mítico-ideológico, guiando la transición desde la percepción espontánea hasta el análisis semiótico y antropológico fundamentado.

Función de articulación teoría–práctica: la actividad integra microexplicaciones de antropología visual y semiótica con análisis guiado de casos y, finalmente, con la ficha de análisis aplicada a piezas de la propia campaña del estudiante, asegurando que la teoría se ponga en juego en decisiones concretas de diseño.

Función de evaluación formativa: las preguntas cerradas con retroalimentación automática y la rúbrica integrada en la fase de práctica convierten al aplicativo en un dispositivo de evaluación continua del logro de la sesión (identificación de niveles de análisis, figuras retóricas, códigos culturales y pertinencia argumentada).

Función metacognitiva: el cierre con “Dos estrellas y un deseo”, preguntas de reflexión y checklist final ayuda al estudiante a explicitar qué cambió en su forma de mirar las imágenes y cómo proyectará este aprendizaje en sus futuros proyectos de diseño, consolidando su identidad como diseñador visual consciente de los contextos culturales.

En síntesis, la función principal de la actividad es garantizar que el alumno alcance el logro de la sesión —aplicar principios de antropología visual y semiótica al análisis y diseño de campañas visuales culturalmente pertinentes— mediante una experiencia gamificada y narrativa que da coherencia a todas las fases del modelo didáctico y refuerza el compromiso cognitivo y emocional del estudiante.

### Público Objetivo

El público objetivo de esta actividad de aprendizaje está conformado por estudiantes universitarios de carreras de diseño, comunicación visual o afines, que cursan asignaturas de semiótica visual, teoría de la imagen o diseño de campañas comunicacionales en niveles intermedios o avanzados.  Más específicamente, se dirige a:  Estudiantes que ya manejan nociones básicas de lenguaje visual, composición, color, tipografía y lectura de imágenes, y se encuentran en una unidad dedicada a figuras semióticas, retórica de la imagen y antropología visual.  Grupos que trabajan en proyectos de campaña comunicacional, donde deben diseñar piezas visuales y justificar sus decisiones frente a criterios de pertinencia cultural, eficacia persuasiva y coherencia con una audiencia específica.  Estudiantes con familiaridad media o alta con herramientas digitales, capaces de interactuar con un aplicativo HTML gamificado y participar en dinámicas colaborativas (trabajo en parejas o tríos, discusión guiada, coevaluación).  En términos de número y organización, la actividad está pensada para secciones de clase entre 20 y 35 estudiantes, distribuidos en equipos de 2 o 3, lo que facilita la discusión de casos, el reparto de roles (detective principal, analista de signos, cronista del caso) y la presentación breve de resultados al cierre de la sesión.

### Funcionalidades Deseadas

El aplicativo interactivo en HTML se desarrollará como una experiencia de aprendizaje gamificada y secuencial, orientada al análisis semiótico y antropológico de la imagen en contextos culturales. El trabajo será realizado de manera grupal, con un mínimo de 2 y un máximo de 4 estudiantes por equipo, quienes deberán registrar obligatoriamente sus nombres y apellidos, correo electrónico institucional y código de la clase antes de iniciar la navegación por las actividades. Esta condición permitirá identificar claramente a los integrantes del grupo, asociar sus respuestas al equipo correspondiente y generar un informe final individualizado por conjunto de trabajo.

La interfaz deberá iniciar con una pantalla de presentación donde se muestre el propósito de la actividad, el logro de aprendizaje y la narrativa investigativa que guía toda la experiencia. Desde ese momento, el estudiante comprenderá que no se trata solo de responder preguntas, sino de resolver un caso visual mediante observación, interpretación, análisis y argumentación. El recorrido pedagógico conservará la secuencia Inicio, Utilidad, Transformación, Práctica y Cierre, en coherencia con el modelo IUTPC, para asegurar que cada fase cumpla una función precisa dentro del aprendizaje.

Durante el desarrollo del aplicativo se insertarán preguntas abiertas y cerradas distribuidas estratégicamente en cada fase. Las preguntas abiertas permitirán que el equipo exprese inferencias, justificaciones, interpretaciones y reflexiones metacognitivas; las preguntas cerradas, por su parte, servirán para verificar conceptos clave, orientar la atención hacia decisiones correctas y activar retroalimentación inmediata. Cada pregunta cerrada deberá ofrecer pistas, indicios o sugerencias que conduzcan al razonamiento correcto sin entregar directamente la respuesta, de modo que el estudiante pueda descubrirla mediante observación y deducción.

La retroalimentación debe ser formativa y motivadora. En lugar de señalar solo si la respuesta es correcta o incorrecta, el sistema ofrecerá mensajes breves con pistas como “observa el contraste”, “revisa el contexto cultural”, “piensa en qué elemento capta primero la atención” o “recuerda la relación entre parte y todo”. Así, cada error se convertirá en una oportunidad de aprendizaje y cada acierto reforzará el pensamiento semiótico. Este mecanismo responde a la lógica de la misión tipo detective y refuerza el carácter lúdico del aplicativo.

La práctica principal consistirá en que cada equipo complete un informe de análisis semiótico-antropológico a partir de las piezas visuales propuestas o de su propia campaña comunicacional. Ese informe será respondido por el equipo de trabajo dentro de la misma plataforma y quedará listo para revisión, discusión y retroalimentación. Al finalizar, el aplicativo deberá ofrecer botones claramente visibles para imprimir el informe completo y también para imprimir solo la versión consolidada de las respuestas del equipo, de manera que el docente pueda recoger evidencia física o digital del trabajo realizado.

En el cierre, el sistema mostrará un resumen del desempeño, la puntuación obtenida, la insignia o rango alcanzado y una síntesis de fortalezas y aspectos por mejorar. Además, deberá incluir un bloque final con el pie de página institucional: Mg. Mario Quiroz Martinez — Curso de Semiótica de la Imagen 2026. Este footer funcionará como firma académica y cierre visual del aplicativo, reforzando la autoría docente y la pertenencia del recurso al curso correspondiente.

### Diseño y Estilo Visual

El diseño y estilo visual del aplicativo adoptará una estética victoriana inglesa, inspirada en los rasgos ornamentales de finales del siglo XVIII y comienzos del siglo XIX, con predominio de marcos decorativos, simetría compositiva, tipografía clásica, fondos oscuros y acentos dorados o burdeos. Esta elección visual busca reforzar la narrativa investigativa del proyecto, otorgándole una atmósfera solemne, elegante y académica, coherente con el carácter semiótico y cultural de la experiencia interactiva.

### Interacción y Comportamiento

La etapa del caso debe estructurarse como un módulo interactivo de investigación en el que el usuario analiza indicios, relaciona pistas, descarta sospechosos y formula conclusiones a partir de evidencias visibles y ocultas. El sistema debe presentar cada hallazgo como una tarjeta o carta con información parcial, obligando al estudiante a reconstruir el caso mediante observación, comparación y memoria activa.

Desde el punto de vista funcional, la interfaz debe permitir tres operaciones principales: explorar pruebas, vincular culpables con evidencias y validar hipótesis mediante retroalimentación inmediata. Esto es coherente con arquitecturas interactivas basadas en actualizaciones parciales de estado, donde el sistema responde sin recargar la experiencia completa y mantiene el flujo de resolución del usuario.

Juego de cartas

El juego de cartas puede integrarse como una mecánica de memoria investigativa: cada carta representa un indicio, una evidencia, un testimonio o un culpable potencial. El estudiante debe voltear, emparejar, ordenar o descartar cartas para construir una cadena lógica del caso, usando repetición espaciada, reconocimiento visual y asociaciones semánticas.

La secuencia recomendada es:

Carta 1: escena.

Carta 2: indicio físico.

Carta 3: testimonio.

Carta 4: evidencia.

Carta 5: sospechoso.

Carta 6: contraste o coartada.

Cada carta debe activarse con un evento claro: clic, giro, arrastre o selección, y luego mostrar una microretroalimentación que confirme si la relación con la prueba es correcta o si debe revisarse. De este modo, la actividad no solo evalúa memoria, sino también toma de decisiones basada en patrones, algo muy alineado con el enfoque de juegos educativos y aprendizaje interactivo descrito en la tesis sobre social media y serious games.

Prompts para evidencias

Los prompts deben guiar la observación sin entregar la respuesta directamente. Pueden formularse como preguntas cortas, precisas y escalonadas para cada indicio.

Prompts de observación

¿Qué elemento aparece primero en la escena?

¿Qué detalle parece fuera de lugar?

¿Qué color, forma o símbolo sugiere un indicio importante?

¿Qué objeto podría ser evidencia y por qué?

¿Qué parte de la imagen parece querer ocultar información?

Prompts de inferencia

¿Qué relación tiene este indicio con el sospechoso?

¿Qué evidencia contradice esta versión del caso?

¿Qué información falta para confirmar la hipótesis?

¿Qué indicio es más fuerte y cuál es accesorio?

¿Qué culpable se asocia mejor con la cadena de pruebas?

Prompts de validación

Selecciona la evidencia que confirma tu hipótesis.

Ordena las cartas según la secuencia real del caso.

Descarta el culpable que no coincide con las pruebas.

Justifica por qué esta carta pertenece al conjunto de evidencias.

Identifica la relación entre pista, sospechoso y conclusión.

Comportamiento del sistema

El comportamiento del aplicativo debe mantener un estado progresivo del caso: cartas desbloqueadas, evidencias encontradas, sospechosos descartados y conclusión final acumulada. Además, debe evitar que el estudiante avance por azar; por eso, algunas cartas pueden estar bloqueadas hasta que se resuelva correctamente una pista anterior.

También conviene incluir una lógica de memoria visual: cuando el estudiante encuentra una prueba, el sistema la guarda en un panel de “indicios reunidos” y la relaciona con cartas previas para activar asociaciones. Esto refuerza el aprendizaje por reconocimiento, secuencia y reconstrucción del caso, no solo por lectura pasiva.

### Tecnologías y Estructura

Descripción técnica del proyecto interactivo

El proyecto interactivo se construye sobre una arquitectura de tres capas tecnológicas que trabajan de forma coordinada para sostener la experiencia de aprendizaje investigativo. La primera capa es HTML5 semántico, que define la estructura de cada módulo, carta y panel del caso mediante etiquetas como section, article, div con atributos data-*, y formularios con textarea e input, lo que permite que el sistema identifique el estado de cada carta, su fase de pertenencia y su condición de bloqueada, activa o completada. La segunda capa es CSS3 con efectos hover, que genera la experiencia visual interactiva mediante transformaciones tridimensionales, transiciones suaves, filtros de desenfoque y gradientes que responden al movimiento del cursor o al evento de clic. La tercera capa es JavaScript vanilla, que controla el comportamiento progresivo del caso: registra las cartas reveladas, desbloquea las siguientes en cadena, acumula el puntaje y actualiza el estado del expediente sin recargar la experiencia.

Las cartas como unidad central de aprendizaje

Cada carta del juego investigativo funciona como una unidad mínima de aprendizaje que contiene una evidencia, un indicio o un culpable potencial. Técnicamente, cada carta se construye con un contenedor que mantiene dos caras: una cara frontal con el verso del naipe y un identificador visual del indicio, y una cara posterior que revela el prompt de análisis, el campo de respuesta del estudiante y el botón de validación. La transición entre ambas caras se logra mediante el efecto flip 3D de CSS, que aplica transform: rotateY(180deg) sobre el contenedor interior con transform-style: preserve-3d y backface-visibility: hidden, generando la sensación física de voltear una carta real.

Efectos visuales y su función pedagógica

Los efectos hover no son decorativos sino que cumplen una función pedagógica precisa dentro de la experiencia. El efecto holográfico con gradiente ::before se reserva para las cartas de culpable confirmado, generando un brillo visual que refuerza el significado del hallazgo y actúa como retroalimentación estética inmediata. El efecto all-but-me blur, implementado con el selector moderno :has(.card:hover) .card:not(:hover) combinado con filter: blur(3px), difumina todas las cartas excepto la que el estudiante está analizando, forzando la concentración visual en un solo indicio a la vez, lo que es coherente con los principios de atención selectiva descritos en los estudios sobre juegos educativos. El efecto glassmorphism con backdrop-filter: blur() se aplica al panel lateral de evidencias acumuladas, creando una superficie translúcida que permite al estudiante ver el expediente del caso mientras sigue analizando nuevas cartas.

Secuencia encadenada inspirada en el sistema Stebbins

La lógica de desbloqueo de cartas adapta el principio matemático del sistema Si Stebbins, que establece que cada carta en el mazo está separada por tres posiciones numéricas y sigue el orden de palos Corazones, Picas, Diamantes y Tréboles. En el contexto del proyecto, esta regla se traduce en que cada carta desbloqueada activa la siguiente según una cadena predefinida de evidencias: escena, indicio físico, testimonio, prueba, sospechoso y coartada, de modo que el estudiante experimente la sensación de descubrimiento progresivo sin percibir que la secuencia está predeterminada. JavaScript implementa esta cadena mediante el atributo data-id numérico de cada carta, y al completar una, busca y activa la carta con el identificador siguiente, retirando la clase bloqueada y añadiendo la clase activa.

Comportamiento del estado del caso

El sistema mantiene en memoria un objeto estadoCaso que registra las fases completadas, las cartas reveladas, los culpables descartados y el puntaje acumulado, sin depender de localStorage ni sessionStorage, ya que el aplicativo corre en un entorno de iframe con restricciones de almacenamiento. Este estado interno garantiza que el estudiante no pueda avanzar por azar, que las retroalimentaciones automáticas respondan con precisión al progreso real del análisis y que el sistema muestre siempre el informe del expediente con la información ya reunida. Al finalizar el recorrido, el aplicativo calcula el puntaje total, asigna el rango de desempeño correspondiente según el baremo del guion técnico y despliega el mensaje personalizado de cierre del caso.

Experiencia visual de las cartas de sospechoso

Las cartas de sospechoso incorporan el efecto tourist card 3D de Prismic, que combina rotateX, rotateZ, translateY y translateZ para generar una sensación de profundidad y perspectiva cuando el cursor se desplaza sobre la carta, como si el expediente del sospechoso se levantara físicamente del escritorio del detective. Este efecto se activa únicamente cuando la carta ha sido desbloqueada por el flujo del caso, porque mostrar sospechosos antes de reunir las evidencias previas rompería la lógica narrativa de la investigación. Las cartas de sospechoso incluyen además un indicador de estado visual implementado con hue-rotate animado en @keyframes, que cambia de color entre rojo, naranja y verde según el nivel de evidencia reunida contra ese sospechoso, reforzando la retroalimentación visual sin necesidad de texto explicativo adicional.

Integración del prompt como activador cognitivo

Cada carta incorpora un prompt visible en la cara posterior que aparece mediante el efecto profile card slide, el cual aplica transform: translateY() sobre el contenido del prompt al momento del giro, generando una entrada suave del texto que evita la sensación abrupta de aparición repentina. El prompt está diseñado para activar tres niveles cognitivos en secuencia: primero observación directa con preguntas del tipo "¿qué ves?", luego inferencia cultural con preguntas del tipo "¿qué significa?", y finalmente validación argumentada con consignas del tipo "justifica tu hipótesis". Esta progresión es coherente con el enfoque de diagnóstico y evaluación de competencias de resolución de problemas descrito en la tesis sobre serious games y aprendizaje entre pares.

### Instrucciones Finales

Entrega toda la aplicación en un único archivo HTML listo para ejecutarse.

Usa Bootstrap 5 para lograr un diseño moderno y responsivo.

Incluye service worker y manifest.json para funcionamiento offline e instalación como PWA.

Asegúrate de que el diseño sea completamente responsivo en dispositivos móviles.