Diseño Gráfico

  # > Prompt listo para pegar en un asistente de código y reproducir la colección completa > (un único archivo HTML con cuatro juegos educativos de semiótica, estilo victoriano, > con mecánica de refuerzo del aprendizaje). --- ## 1. Rol y encuadre Actúa como **experto en desarrollo web frontend (HTML5, CSS3 y JavaScript vanilla)** y en **diseño instruccional** . Vas a crear una **colección de juegos educativos gamificados** para un curso universitario de **Semiótica de la Imagen** , entregada como **un único archivo HTML autocontenido y offline**. ## 2. Objetivo pedagógico Que estudiantes de diseño/comunicación visual **apliquen principios de semiótica y antropología visual** (niveles denotativo, connotativo y mítico-ideológico; tipos de signo de Peirce; figuras retóricas; códigos culturales) mediante una experiencia tipo **investigación detectivesca al estilo Sherlock Holmes**. ## 3. Público Equipos de 2 a 4 estudiantes (secciones de 20–35), nivel intermedio/avanzado...

 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 se...

## Rol Actúa como **desarrollador front-end senior + diseñador instruccional**. Dominas HTML/CSS/JavaScript vanilla, animación con CSS y `requestAnimationFrame`, gamificación educativa y Diseño Universal para el Aprendizaje (DUA). ## Objetivo Crea una **aplicación web educativa gamificada** para la asignatura **Semiótica Visual** de la Universidad Tecnológica del Perú (UTP), titulada **"Operación Retórica Visual"**. Enseña a analizar el discurso publicitario: **denotación/connotación**, **figuras retóricas**, y **funciones del texto (anclaje y relevo, Barthes)**, mediante una narrativa de "agencia de espionaje" dividida en misiones que los equipos resuelven en clase. ## Restricciones técnicas (obligatorias) - **Un solo archivo** `operacion_retorica.html`, **autocontenido**: todo el CSS y el JavaScript van inline. **Sin dependencias externas, sin frameworks, sin build, sin CDN.** - **100 % del lado del cliente**, funciona offline abriendo el archivo. No envía datos a...

Lámina turnaround profesional estilo estudio de cine y videojuegos, formato retrato vertical 9:16. Canvas completamente aprovechado con jerarquía visual clara: identidad facial primero, cuerpo después. Sección superior: Un close-up de rostro muy grande ocupando el 50–60% del ancho, posicionado como ancla visual principal. A su lado, una cuadrícula compacta de rotación de cabeza mostrando múltiples ángulos (frente, ¾, perfil, espalda, mirando arriba, mirando abajo) más un recorte de retrato de apoyo. Esta fila superior debe establecer la identidad facial de forma inmediata e inequívoca. Sección media: T-pose frontal, T-pose espalda, pose neutral frontal — tres paneles distribuidos de forma uniforme y equilibrada. Sección inferior: Perfil izquierdo, perfil derecho, ¾ frontal, espalda completa, ¾ espalda y pose caminando — organizados en filas limpias con espaciado balanceado. Los paneles de cuerpo completo deben ser suficientemente grandes para preservar proporciones y detalle de vestime...

 Retrato de una persona de perfil, con gafas redondas, en un estilo minimalista de arte vectorial. Alto contraste de luz y sombra con ángulos agudos. La paleta de colores es monocromática, dominada por tonos de negro, con sutiles reflejos beige en la cara y el cabello. La composición es cerrada, centrándose en la silueta del sujeto contra un fondo negro sólido. Un efecto dramático ilumina solo partes del rostro y el cabello, creando una sensación de misterio e introspección. El clima es andtico contemplativo.

════════════════════════════════════════════════════════════════ SISTEMA UNIVERSAL DE DETECCIÓN MORFOLÓGICA TIPOGRÁFICA — ISO 128 VERSIÓN 2.1 | ANALIZADOR DE BOCETO A PLANO | COLOR EDITION ════════════════════════════════════════════════════════════════ REGLA CROMÁTICA OBLIGATORIA DEL DIBUJO TÉCNICO: — AZUL: usar exclusivamente para TODAS las cotas, líneas de cota,   líneas auxiliares de cota, flechas, textos de medida, ejes de   construcción, ejes de simetría, líneas base, altura x, altura de   mayúscula, ascendente, descendente y guías de alineación. — ROJO: usar exclusivamente para TODAS las figuras circulares,   semicirculares o curvilíneas de construcción, incluyendo círculos,   arcos, filetes, radios, circunferencias guía, lazos circulares,   bowls construidos por circunferencia y marcas de centro. — NEGRO: usar exclusivamente para la FORMA FINAL de la letra,   incluyendo contornos visibles del glifo, fustes, travesaños,   terminales, serifs...

════════════════════════════════════════════════════════════════ UNIVERSAL TYPOGRAPHIC MORPHOLOGY DETECTION SYSTEM — ISO 128 VERSION 2.0 | SKETCH-TO-BLUEPRINT ANALYZER ════════════════════════════════════════════════════════════════ PHASE 01 — MANDATORY SKETCH ANALYSIS (execute before any drawing): step 1.1 — letter identification:   scan the attached sketch and identify which letter of the alphabet   is represented. declare: LETTER = [identified character],   CASE = [uppercase / lowercase], STYLE = [serif / sans-serif /   script / blackletter / humanist / geometric / transitional]. step 1.2 — primary geometric primitive inventory:   catalog ALL visible geometric primitives in the sketch:   CIRCLES & ARCS:     — count total number of circles visible (full and partial)     — for each circle: assign ID (C1, C2, C3...), estimate diameter       relative to the largest circle (C1 = 100%, others as %)     — classif...

Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript, especializado en experiencias educativas interactivas para adultos de 30 a 50 años. Crea una aplicación PWA (Progressive Web App) en un único archivo HTML, completamente funcional, responsiva y visualmente impactante, titulada: “Infografía Interactiva: Dinámica y Táctica del Balonmano” OBJETIVO GENERAL Diseña una experiencia educativa inmersiva que explique de forma clara, atractiva y técnicamente sólida los fundamentos tácticos, dinámicos y visuales del balonmano para usuarios de 30 a 50 años. La propuesta debe evitar cualquier estética infantil o excesivamente juvenil y, en su lugar, adoptar un lenguaje visual maduro, profesional, tecnológico y contemporáneo. PROPÓSITO PEDAGÓGICO La aplicación debe: - Explicar conceptos tácticos, posiciones, reglas y dinámica del balonmano con precisión, claridad y utilidad práctica. - Organizar la información en bloques modulares que permitan exploración autónom...

 👉 Aviso para IMAGEN Póster infográfico vertical 9:16 con estética premium de divulgación científica sobre [TEMA]. Fondo sobrio, limpio y cómodo, con luz de estudio envolvente y un render 3D hiperrealista como protagonista, mostrando estructura exacta, proporciones naturales y texturas ricas en detalle. Composición editorial moderna: encabezado grande y contundente en la zona superior, acompañado de una frase breve estilo explicación científica. Distribuye alrededor del sujeto entre 4 y 6 módulos informativos con esquinas redondeadas, pictogramas, pequeños esquemas técnicos y conectores finos dirigidos a puntos relevantes. Incluye un personaje experto en miniatura, investigador, naturalista o divulgador, interactuando con el elemento mediante una lupa, puntero o tableta. En la zona inferior, agregue una banda con datos clave y tarjetas de comparación rápida. Usa una paleta coherente con el tema, reforzada con acentos vivos. Resultado viral, claro, cinematográfico, profesional, ed...

 Transforma este mapa conceptual 3D vertical 9:16 sobre [TEMA] en un reel profesional, fluido y visualmente espectacular. Conserva exactamente el diseño original, la estructura conceptual, los textos y la posición de todos los elementos. Aplica movimiento de cámara cinematográfico tipo push-in lento combinado con paralaje suave para reforzar profundidad 3D. Secuencia animada: Entrada progresiva del encabezado superior con fade elegante. Aparición gradual del núcleo principal del mapa conceptual con iluminación sutil. Las conexiones del mapa se dibujan progresivamente desde el centro hacia afuera, simulando pensamiento o inteligencia artificial organizando ideas. Cada módulo conceptual aparece con escala ligera, fade suave y micro movimiento flotante natural. Iconos, diagramas y elementos secundarios presentan animaciones discretas y limpias. Pulsos de energía recorren las conexiones entre conceptos para dar sensación de explicación automática. El personaje experto realiza un gesto ...

 Mapa conceptual 3D vertical 9:16 con estética premium, futurista y educativa sobre [TEMA]. Fondo limpio, moderno y cinematográfico, con iluminación envolvente suave y ambiente tecnológico elegante. En el centro, un núcleo principal hiperrealista y visualmente impactante representando el concepto principal de [TEMA], con acabado 3D detallado, profundidad realista, texturas premium y composición clara. Desde el concepto central nacen múltiples ramas organizadas visualmente, conectadas mediante líneas finas luminosas o conectores holográficos elegantes. Distribuye entre 4 y 8 conceptos secundarios alrededor del núcleo, cada uno dentro de módulos flotantes con esquinas redondeadas, pequeños iconos, mini diagramas, etiquetas claras y explicaciones cortas fáciles de entender. Cada bloque conceptual debe conectarse de forma lógica y visualmente ordenada, creando sensación de inteligencia, claridad y estructura mental avanzada. Añade pequeñas animaciones visuales implícitas como pulsos de...

 # PROMPT MAESTRO — "LOS DECODIFICADORES ANDINOS: RETÓRICA VISUAL" (INDIGENISMO 60s EDITION) ### Tema: LA RETÓRICA VERBAL EN LA IMAGEN — Semiótica Visual, Semana 13 (UTP) ## Rol y objetivo Eres un desarrollador frontend experto en aplicaciones web educativas con estética **indigenista peruano de los 60s / Pop Acholado** (inspirado en Jesús Ruiz Durand y la gráfica de la Reforma Agraria). Debes crear una **PWA completa en UN SOLO archivo `.html` monolítico**, sin dependencias externas (salvo imágenes locales), para la sesión de **Semiótica Visual, Semana 13 (UTP)**. - Docente: **Mg Mario Quiroz** - Curso: **Semiótica Visual** · Año 2026 · Semana 13 · UTP - Footer fijo: `DOCENTE: MG MARIO QUIROZ · SEMIÓTICA VISUAL · 2026 · SEMANA 13` - **Tema: La retórica verbal en la imagen.** - **Logro de la sesión:** Al finalizar, el estudiante **identifica y aplica las figuras retóricas verbales presentes en la imagen publicitaria**, reconociendo su función persuasiva y connotativa en el pr...

 Para adaptar este *prompt* a un público de 15 a 21 años, es necesario abandonar el enfoque infantil (mascotas, colores primarios, Comic Sans, lectura estrictamente lineal) y evolucionar hacia una estética mucho más madura, tecnológica y dinámica. A esta edad, los usuarios responden mejor a diseños inspirados en interfaces de videojuegos deportivos (como FIFA/EA Sports), apps de fitness o dashboards de análisis de datos. Además, corregí la sección de "Funcionalidades Deseadas" (que en tu original contenía un mensaje de error sobre un documento de ASP.NET) para que le pida a la IA características interactivas reales. Aquí tienes el prompt actualizado y listo para usar: --- **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 Infografía Interactiva: Dinámica y Táctica del Balonmano ### Propósito / Función Principal El texto enfatiza qu...

 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 Infografia para niños sobre balonmano ### Propósito / Función Principal El texto enfatiza que la función no es hacer un "póster bonito", sino lograr el diseño más efectivo para el nivel de quien aprende. Aplicando los criterios de la clase al tema del balonmano, la infografía tendría los siguientes propósitos específicos:  Transmitir una única idea central: Su función es enseñar un concepto muy concreto del deporte usando solo de 3 a 5 datos simples con vocabulario básico. Por ejemplo, en lugar de explicar todas las reglas, se enfocaría solo en cómo se hace un pase o cómo se anota.  Conectar mediante el juego y la narrativa: Su propósito es captar la atención del niño utilizando un tono lúdico y narrativo, haciendo preguntas directas o utilizando personajes-guía (como una mascota ...