Super Prompt Adaptado — Semana 16: Figuras Retóricas Publicitarias
Super Prompt Adaptado — Semana 16: Figuras Retóricas Publicitarias
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:
1. Nombre de la Aplicación
RethoricaLab — Simulador de Análisis Retórico Publicitario
*(Subtítulo: Laboratorio de Figuras de Adjunción | Semiótica de la Imagen — Semana 16)*
2. Propósito / Función Principal
El propósito de la aplicación web es servir como un simulador interactivo de análisis semiótico-retórico orientado a la identificación y clasificación de figuras retóricas de adjunción presentes en piezas gráficas publicitarias reales, aplicando el modelo de operaciones y relaciones de Jacques Durand.
Sus funciones principales integradas son:
Galería de Avisos Publicitarios (Banco de Imágenes Activado): La aplicación presenta los 7 avisos publicitarios del banco de imágenes de la sesión como tarjetas visuales interactivas. El estudiante selecciona uno para iniciar su análisis. Cada tarjeta muestra la marca, el nombre del producto/campaña y una descripción visual denotativa del aviso, ya que las imágenes son referenciadas textualmente (no como archivos externos). Los 7 avisos del banco son:
Aviso 1 — Audio Pro Addon C10: Altavoz compacto de diseño escandinavo, fondo blanco minimalista, asa de cuero en la parte superior, premios "What Hi-Fi?" visibles, logotipo en la parte inferior central, lema "Sound of Scandinavia".
Aviso 2 — TAG Heuer Aquaracer: Chris Hemsworth portando el reloj Aquaracer Calibre 5, fondo oscuro dramático, eslogan #DontCrackUnderPressure en gran escala, logotipo "Swiss Avant-Garde Since 1860" en la esquina superior derecha.
Aviso 3 — Hudson's Bay Manoplas Rojas: Diseño gráfico con las icónicas manoplas rojas olímpicas canadienses, texto "Apoya a nuestros atletas", precio "$15", logotipo de los Juegos Olímpicos y enlace a thebay.com/olympics.
Aviso 4 — Mionetto Prosecco: Botella de prosecco italiana con etiqueta "Prestige Collection 1887", fondo elegante, texto "Más que solo un Prosecco", descriptores sensoriales de sabor (manzana dorada, miel, melocotón blanco).
Aviso 5 — Rocco Forte Hotels: Fotografía familiar de los Forte almorzando en casa de campo, texto cursivo "Our Forte / Making hospitality our life", lista de hoteles de lujo en ciudades europeas.
Aviso 6 — CyberPowerPC: Imagen de PC gaming de alto rendimiento, pincelada naranja con "LET'S GO!", logo Intel Core i7, texto "Gaming PC of Choice by Top Gamers".
Aviso 7 — Jones Bootmaker / Bugatti: Aviso minimalista con la palabra "bugatti" en tipografía blanca grande sobre fondo oscuro, bloque inferior negro con "JONES / Hacedor de Botas / Desde 1857".
Motor de Análisis Retórico Guiado (Ficha de Durand Digital): Una vez seleccionado el aviso, la aplicación despliega una ficha de análisis interactiva estructurada en 4 campos progresivos obligatorios:
Descripción denotativa: ¿Qué se ve literalmente en el aviso? (campo de texto libre)
Identificación de la figura retórica de adjunción: El estudiante selecciona de un menú interactivo cuál de las 4 figuras está presente (Repetición / Comparación / Antítesis / Acumulación), indicando la operación (Adjunción) y la relación semiótica correspondiente (Identidad / Similitud / Oposición / Diferencia) según el modelo de Durand.
Efecto persuasivo: ¿Qué sensación o idea produce en el receptor? (campo de texto libre con pregunta guía)
Conexión con campaña propia: ¿Podrías usar esta figura en tu campaña? ¿Para qué producto, servicio o causa? (campo de texto libre con pregunta guía)
Sintetizador de Informe "Dictamen Retórico": Al completar los 4 campos, el sistema ensambla automáticamente en tiempo real un informe textual final titulado "Dictamen Retórico", que articula los hallazgos del estudiante en lenguaje académico fluido y está listo para exportarse como PDF de evidencia de aprendizaje.
Panel de Referencia Teórica Permanente: Un panel lateral o desplegable siempre accesible que muestra el cuadro de clasificación de Durand (operaciones × relaciones) con las 4 figuras de adjunción de la sesión, sus definiciones resumidas y un ejemplo orientador para cada una. Este panel actúa como "andamiaje cognitivo" permanente durante el análisis.
3. Público Objetivo
El público objetivo directo de esta aplicación son:
Estudiantes de Pregrado cursando la carrera de Diseño Publicitario y Comunicación.
Jóvenes matriculados en la asignatura Semiótica de la Imagen, Unidad 4: Figuras Semióticas.
Usuarios que trabajan de forma individual durante la fase de Práctica autónoma de la sesión (25 minutos), con acceso a sus apuntes y al cuadro de Durand como referencia.
Docentes y facilitadores que supervisan la sesión, utilizando la herramienta para visualizar el proceso de análisis y realizar evaluación formativa inmediata, con acceso al resumen de respuestas.
4. Funcionalidades Deseadas (Interacción y Lógica Narrativa)
La aplicación no debe ser un formulario estático, sino una experiencia web narrativa e interactiva que acompañe al estudiante desde la observación del aviso hasta la formulación del dictamen analítico. El desarrollador debe actuar como un Arquitecto de experiencia pedagógica por desplazamiento, integrando las siguientes funcionalidades:
Narrativa Impulsada por el Desplazamiento (Scroll Pedagógico): El progreso a través de las 4 fases del análisis (Observación denotativa → Identificación retórica → Efecto de sentido → Conexión proyectiva) debe sentirse como un recorrido de inmersión progresiva. Al desplazar la página, el estudiante "penetra" visualmente la capa superficial del aviso hacia su estructura retórica profunda.
Scroll Snapping y Secciones Pegajosas: La pantalla debe anclarse suavemente en cada fase del análisis para que el estudiante no pierda el foco visual mientras completa sus reflexiones. El panel lateral de referencia teórica (cuadro de Durand) debe permanecer visible o rápidamente accesible en todo momento.
Animaciones en Cascada: Los 4 campos de análisis no deben aparecer simultáneamente. Deben revelarse de forma secuencial con retrasos escalonados (efectos tipo stagger) una vez que el estudiante selecciona el aviso, guiando la lectura y el pensamiento de manera ordenada.
Microinteracciones de Retroalimentación: Al seleccionar una figura retórica en el menú interactivo, la tarjeta debe iluminarse con el color institucional correspondiente, mostrando automáticamente la operación, la relación semiótica y la definición breve de Durand como confirmación visual inmediata.
Lógica de Análisis Dinámico (Interacción Funcional):
Selector visual de aviso publicitario: galería de 7 tarjetas con nombre de marca, producto/campaña y descripción denotativa abreviada. Al hacer clic, el aviso seleccionado se "activa" visualmente y despliega la ficha de análisis.
Selector interactivo de figura retórica con retroalimentación automática: al elegir la figura, aparecen automáticamente la operación (Adjunción), la relación semiótica y la definición del modelo de Durand.
Campos de texto con contadores de caracteres mínimos para garantizar respuestas reflexivas (mínimo 80 caracteres por campo).
Motor de síntesis que recopila los textos ingresados y genera automáticamente el "Dictamen Retórico" final en texto académico fluido y cohesionado, listo para leerse y exportarse.
5. Diseño y Estilo Visual
El diseño visual de la aplicación fusionará la estética vanguardista del movimiento cubista con la identidad gráfica institucional del IDC, creando una experiencia interactiva que refleje visualmente la deconstrucción analítica del signo publicitario. El desarrollador deberá aplicar las siguientes directrices:
Síntesis y Geometrización Analítica: La interfaz prescinde del naturalismo y la perspectiva óptica tradicional. Las 4 fases del análisis (Observación, Identificación, Efecto, Conexión) se construirán mediante la deconstrucción hacia formas geométricas esenciales, con bloques de contenido asimétricos que simulen la superposición de planos retóricos.
Paleta de Colores Institucional (Branding IDC): El diseño cromático se aplica en bloques sólidos, planos y puros, usando estrictamente los colores del Instituto de Diseño y Comunicación:
Amarillo IDC para llamados a la acción, botones de avance y retroalimentación activa:
#f3a100Azul IDC para contenedores, encabezados y estructura teórica:
#0072b9Grises IDC para bases, tipografías y campos de texto:
#555553y#545452Blanco para el fondo principal, garantizando protagonismo a los elementos plásticos
Codificación visual de las 4 figuras de adjunción: Cada figura retórica tiene un bloque de color identificador dentro de la paleta institucional: la Repetición en azul sólido, la Comparación en amarillo, la Antítesis en gris oscuro, y la Acumulación en una combinación de los tres para reflejar su naturaleza sumativa.
Estética de Collage Digital: El lienzo de la aplicación actúa como un gran collage analítico interactivo. Las tarjetas de aviso, los campos de análisis, los bloques del cuadro de Durand y los botones aparecerán como "recortes" geométricos adosados sobre la pantalla que se reordenan secuencialmente al avanzar por las fases.
Recursos Gráficos y UI Embebida: Todo icono, ilustración geométrica o logotipo (incluyendo el logo del IDC) deberá integrarse directamente en formato SVG inline o base64 dentro del código, garantizando que la composición sea autosuficiente. La interfaz culminará con un bloque geométrico a modo de pie de página que integre el texto: "Mg. Mario Quiroz Martínez — Semiótica de la Imagen | Unidad 4: Figuras Semióticas".
6. Interacción y Comportamiento
La aplicación debe desarrollarse bajo las siguientes reglas de comportamiento, priorizando una experiencia fluida sin recargas de página:
Navegación Guiada y Suave: La transición entre las 4 fases del análisis se realiza mediante desplazamientos automáticos en la misma pantalla. Al completar una fase y hacer clic en el botón de continuar, la vista se desliza fluidamente hacia el siguiente bloque de trabajo.
Selección con Retroalimentación Inmediata: En la fase de Identificación Retórica, al seleccionar una de las 4 figuras de adjunción, el sistema muestra automáticamente: (a) la operación semiótica según Durand (siempre "Adjunción"), (b) la relación específica (Identidad, Similitud, Oposición o Diferencia), y (c) la definición resumida de la figura, en un bloque de confirmación con diseño visual destacado en el color institucional correspondiente.
Migración Inteligente de Datos al Dictamen: Los textos ingresados en los 4 campos de análisis se transfieren automáticamente al módulo del "Dictamen Retórico" en tiempo real, ensamblándose de forma cohesionada y fluida sin que el estudiante deba reescribir nada.
Prevención de Errores y Avisos Amigables: Si el estudiante intenta avanzar a la siguiente fase o exportar el dictamen sin haber completado los campos mínimos, la interfaz mostrará un recordatorio visual sutil, destacando el campo vacío en el amarillo institucional (#f3a100) y mostrando el mensaje: "Para avanzar, completa este análisis con al menos 80 caracteres."
Reinicio Controlado: Al terminar el análisis de un aviso y exportar el dictamen, el estudiante puede elegir entre (a) analizar otro aviso del banco y reiniciar la ficha en blanco, o (b) cerrar la sesión. Al reiniciar, los datos del aviso anterior se borran completamente de la memoria temporal.
Construcción del Dictamen en Tiempo Real: A medida que el estudiante completa los 4 campos, el "Dictamen Retórico" de la fase final se ensambla al instante, mostrándose como texto académico fluido y legible, preparándose visualmente para la lectura final y la exportación como evidencia de aprendizaje.
7. Tecnologías y Estructura
Estructura Base (HTML5 Semántico): Todo el esqueleto de la aplicación vivirá en un solo archivo. Se usarán etiquetas de marcado claras para dividir la narrativa en bloques: (1) Registro del estudiante, (2) Galería de avisos / Selección del caso, (3) Ficha de análisis en 4 fases progresivas, (4) Dictamen Retórico y exportación.
Estilos y Maquetación (Tailwind CSS vía CDN): La estética cubista corporativa, la paleta institucional IDC, las transiciones suaves y el diseño responsivo se lograrán mediante este marco de trabajo, importado mediante un enlace directo en la cabecera del documento.
Interactividad y Motor Lógico (Vanilla JavaScript): El cerebro del simulador se construirá con JavaScript puro y nativo, incrustado al final del archivo. Este código gestiona la selección de avisos, la retroalimentación al elegir figuras retóricas, la transferencia de textos al dictamen y el ensamblaje del informe final, sin recargar la página.
Almacenamiento en Memoria Temporal: No se requiere conexión a bases de datos ni servidores externos. Toda la información escrita por el estudiante se gestiona en el momento. Si la página se cierra, la ficha vuelve a quedar en blanco, ideal para un entorno de simulación rápida en aula.
Generador de Dictamen Nativo: Para la evidencia de aprendizaje, se configurarán reglas de estilo específicas para impresión. El botón de exportación utilizará la función de imprimir del navegador, limpiando la pantalla para que el PDF resultante no muestre botones ni herramientas de edición, entregando un informe de análisis semiótico visualmente impecable y listo para la rúbrica de evaluación.
8. Sistema de Registro del Estudiante
La aplicación requiere una pantalla de registro inicial que funcione como puerta de acceso al laboratorio de análisis.
Pantalla de Recepción: Al abrir la aplicación, antes de mostrar la galería de avisos, el sistema presenta un formulario limpio con estética corporativa IDC, titulado "Registro del Analista — Semiótica de la Imagen".
Campos de Identificación: El formulario requiere obligatoriamente: (1) Nombres y Apellidos, (2) Código o Correo Institucional, (3) Sección/Grupo. Solo un estudiante por registro (práctica individual según el modelo didáctico de la Semana 16).
Firma Automática del Dictamen: Los datos ingresados se imprimen automáticamente en el encabezado del "Dictamen Retórico" y en la exportación PDF, asegurando que la autoría del análisis quede documentada para la rúbrica de evaluación formativa.
Prevención de Avance: El botón "Ingresar al Laboratorio" permanece bloqueado si los campos obligatorios no están completos, mostrando un aviso visual amigable en el amarillo institucional.
9. Requisitos Adicionales
Los iconos y elementos visuales que acompañen la interfaz deben estar en formato SVG inline dentro del código, incluyendo el logotipo del IDC y la representación geométrica del cuadro de Durand (tabla operaciones × relaciones) como elemento visual fijo de referencia.
Colores estrictamente IDC:
#f3a100,#0072b9,#555553,#545452.El cuadro completo de Durand para las 4 figuras de adjunción debe estar embebido como componente visual interactivo, no como texto plano.
10. Instrucciones Finales
Entrega toda la aplicación en un único archivo HTML listo para ejecutarse sin servidor.
Usa Bootstrap 5 para lograr un diseño moderno y responsivo.
Incluye service worker y manifest.json embebido para funcionamiento offline e instalación como PWA.
Asegúrate de que el diseño sea completamente responsivo en dispositivos móviles (mínimo 375px).
El flujo de la aplicación debe respetar el modelo didáctico IUTPC de la sesión: el estudiante sigue el recorrido Observación → Identificación → Efecto → Conexión → Dictamen, alineado con las fases de Inicio, Utilidad, Transformación, Práctica y Cierre de la Semana 16.
Este es el Super Prompt completo, estructurado en 10 secciones. La lógica de cada sección deriva directamente de las actividades planificadas en el modelo didáctico de la Semana 16 del curso Semiótica de la Imagen. Los 7 avisos (Audio Pro, TAG Heuer, Hudson's Bay, Mionetto, Rocco Forte Hotels, CyberPowerPC y Jones Bootmaker/Bugatti) operan como el banco de imágenes mencionado en la fase de Práctica autónoma, donde el estudiante selecciona uno de los 6 a 8 avisos disponibles para aplicar el modelo de Durand.
La transformación estructural respecto al prompt original de BizCure es la siguiente:
Comentarios
Publicar un comentario