Entradas

PROMPT PROFESIONAL: GENERADOR DE PWA GAMIFICADAS EDUCATIVAS

 # PROMPT PROFESIONAL: GENERADOR DE PWA GAMIFICADAS EDUCATIVAS ## INSTRUCCIÓN PRINCIPAL Actúa como un arquitecto de experiencias de aprendizaje interactivo y desarrollador frontend senior. Genera una **Progressive Web App (PWA) autocontenida en un único archivo HTML** para cualquier **actividad pedagógica universitaria**. La aplicación debe ser completamente funcional, visualmente impactante, responsive, y lista para ejecutarse sin dependencias externas críticas (excepto CDN de Bootstrap e íconos). La PWA debe adaptarse a **CUALQUIER contexto temático** (no solo semiótica): historia del arte, teoría del color, tipografía, diseño editorial, fotografía, branding, comunicación visual, sociología de la imagen, psicología de la percepción, narrativa visual, o cualquier otra unidad de aprendizaje del curso. --- ## CONTEXTO ACADÉMICO CONFIGURABLE El usuario proporcionará los siguientes datos al inicio de cada solicitud: | Parámetro | Descripción | Ejemplo | |-----------|-------------|----...

IconiShift · El Reto de la Marca

 # IconiShift · El Reto de la Marca > **PWA Gamificada de Semiótica Visual e Iconicidad**   > Estilo Art Déco · Curso: Semiótica de la Imagen · UTP 2026   > Docente: Mg. Mario Quiroz Martinez --- ## Descripción **IconiShift** es una Progressive Web App (PWA) autocontenida diseñada para la enseñanza gamificada de semiótica visual aplicada al diseño y la comunicación. La aplicación guía a los estudiantes a través de 5 retos progresivos y 4 misiones de auditoría semiótica, donde deben aplicar las teorías de **Peirce**, **Eco** y **Villafañe** para analizar, clasificar y proyectar signos visuales en contextos reales de diseño peruano e internacional. La interfaz adopta una estética **Art Déco** con paleta dorado-negro, tipografías Cinzel y Poiret One, y elementos decorativos geométricos que evocan la década de 1920. --- ## Características Principales | Característica | Descripción | |---------------|-------------| | **PWA Offline** | Service Worker integrad...

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

 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 La imagen como signo. El signo visual. La figuratividad. La iconicidad. ### Propósito / Función Principal Este es un guion instruccional y de experiencia de usuario para la **PWA gamificada**, diseñada específicamente para ser desarrollada por tu equipo de 4 integrantes. El concepto une las bases del desarrollo de la PWA (Fases 1-4) con los contenidos teóricos de semiótica e iconicidad de la imagen (Villafañe, Peirce, Eco). --- # GUION DE LA APP: "IconiShift: El Reto de la Marca" ## 📱 Visión General de la PWA * **Narrativa/Concepto:** El usuario es un "Consultor de Identidad Visual" contratado para salvar marcas peruanas atrapadas en anacronismos temporales. Para avanzar, debe descodificar el signo visual, modificar sus niveles de iconicidad y adaptarlos al contexto sociocu...

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

 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 La imagen como signo. El signo visual. La figuratividad. La iconicidad. ### Propósito / Función Principal 3. TRANSFORMACIÓN (T) Construcción activa del conocimiento mediante interacción con nueva información Objetivo: Construir comprensión sólida y diferenciada de los conceptos de signo visual, figuratividad e iconicidad, identificando sus tipos, niveles y aplicaciones en el diseño de comunicación para marcas. Actividades Propuestas Actividad 1 — El signo visual: de Pierce a Eco (15 min) El docente presenta el núcleo teórico del signo visual articulando las tres grandes posiciones del debate semiótico:[ppl-ai-file-upload.s3.amazonaws] La pregunta fundacional: ¿La imagen es un signo como cualquier otro o tiene una naturaleza especial? Barthes (1961) afirmó que la fotografía era "...

Infografía interactiva en formato HTML

 Situación Necesito crear una infografía interactiva en formato HTML del contenido de un archivo PDF/ resultado del resultado de analisis presentado en el texto de prompt, que implemente principios de UX Research para mejorar la experiencia del usuario. Esto significa aplicar metodologías basadas en investigación de usuarios, accesibilidad, usabilidad y diseño centrado en el usuario. Tipografia legible (sin distorsion en ancho) Tarea Diseña un HTML interactivo que incorpore las mejores prácticas de UX Research, incluyendo: navegación intuitiva, estructura clara de información, retroalimentación visual para interacciones, accesibilidad (WCAG), y patrones de diseño que reduzcan fricción en la experiencia del usuario. Objetivo Crear una interfaz que sea fácil de usar, accesible para todos los usuarios, y que guíe de manera natural hacia los objetivos principales sin confusión o fricción innecesaria. Conocimiento Los principios clave de UX Research que debes aplicar incluyen: Jerarquía...

Skill maestro para diseñar entregables académicos

 --- name: aula-d3magindesign description: Skill maestro para diseñar entregables académicos de Mario Quiroz (marca d3magindesign) — herramientas HTML interactivas, documentos Word/PPT/PDF y exámenes de admisión — para sus cursos en UTP e IDC. Activa este skill SIEMPRE que el usuario pida una herramienta semanal de clase, una actividad gamificada, una rúbrica evaluativa, un infográfico con hotspots, un ejercicio tipográfico, un constructor de briefs, una guía de InDesign, una variante de examen de admisión, una calculadora de retícula editorial, una infografía interactiva, una clase en diapositivas, o cualquier artefacto pedagógico para los cursos Semiótica de la Imagen, Fundamentos del Diseño Tipográfico, Diseño de Información, Diagramación Editorial, Proyecto Ilustrador, o cualquier curso de diseño/comunicación. Activa también cuando el usuario diga frases informales como "una actividad para la clase", "algo para los chicos del curso", "una herramienta para e...