Entradas

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

Formulario web interactivo que combine análisis de imágenes con hotspots interactivos, un sistema de tooltips global y un cuestionario educativo.

 **Situation** Necesitas crear un formulario web interactivo que combine análisis de imágenes con hotspots interactivos, un sistema de tooltips global y un cuestionario educativo. El formulario debe capturar datos del estudiante y respuestas, con un tooltip que permanezca visible sin ser cortado por elementos padres con overflow:hidden. **Task** Desarrollar un formulario HTML interactivo que: 1. Permita cargar una imagen (foto, gráfico, signo, figura o pictograma, enlaces de video) y crear hotspots interactivos sobre ella 2. Implemente un tooltip global con position:fixed que se posicione dinámicamente al hacer hover sobre los hotspots, evitando ser clippeado por overflow:hidden 3. Incluya un cuestionario con preguntas abiertas y cerradas 4. Capture nombre y correo del estudiante 5. Envíe el formulario completado a dos direcciones: correo del estudiante y c12139@utp.edu.pe **Objective** Crear una herramienta educativa interactiva que permita a estudiantes analizar imágenes mediante...

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 Tutorial de Adobe Indesign ### Propósito / Función Principal Guiar al estudiante en el desarrollo de proyectos y ejercicio de clase usando un tutorial del paso a paso para el desarrollo de proyecto en usando el programa adobe indesign con el apoyo de un archivo word con los procedimientos y las capturas de pantalla, por lo cual se solicita generar imágenes de la pantalla del adobe InDesign indicando los comandos aplicados en el tutorial como al visualización en el tutorial, ademas genera preguntas intermedias en el tutorial para afianzar conocimientos  y procedimientos tanto en el ejercicio de programa como teoria de organizacion visual y uso de la reticula y la teria de gestald ### Público Objetivo estudiantes de educacion secundaria ### Funcionalidades Deseadas 1. Registro y Persiste...

herramienta educativa web para el curso de Tipografía que articule la “Constelación de atributos de Moles”

 Situation Debes crear una herramienta educativa web para el curso de Tipografía que articule la “Constelación de atributos de Moles” en dos niveles: Nivel micro: atributos tipográficos (peso, contraste, serif/sans, proporciones, etc.) y sus valores psicológicos (pesadez, dinamismo, simpleza, elegancia, fragilidad, etc.). Nivel macro: retícula de moles en página (disposición de bloques y nodos de composición). La interfaz usará imágenes por capas y hotspots (.hs) para que el estudiante identifique: partes de la letra y atributos formales, su interpretación connotativa (constelación de atributos de Moles), su rol dentro de la retícula/constelación de moles en la página. Además, necesitas un tooltip global reutilizable y un formulario que envíe resultados al estudiante y al docente. Task Desarrollar un formulario HTML interactivo y responsive que: Capas visuales + hotspots (Capas 1 y 2 siempre activas, capa 3 solo con hotspots) Capa 1: Imagen base (foto o captura de composición tipog...

Prompt maestro :Crea una aplicación PWA (Progressive Web App)

 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 Predicados Modales de Greimas ### Propósito / Función Principal GUIÓN GAMIFICADO v2 — "MODALIDADES EN JUEGO" Semiótica Narrativa · Predicados Modales de Greimas Diseño de experiencia basado en el Modelo UxE (Córdoba-Cely et al.) Duración: 35 minutos | Nivel: Posgrado | Formato: Presencial · Equipos de 3–4 🧭 MARCO DE EXPERIENCIA UxE APLICADO AL GUIÓN Antes de ejecutar la actividad, el docente debe comprender que cada decisión de diseño responde a una de las tres dimensiones del Modelo UxE: Dimensión UxE Qué evalúa Cómo se aplica en esta sesión Estética Deleite perceptivo · primera impresión visual Proyección de campañas reales · identidad visual del juego · marcador visible Significativa Usabilidad cognitiva · claridad de las reglas · cumplimiento de metas Fichas estructur...

PROMPT MAESTRO Actividades gamificadas de análisis semiótico

# PROMPT MAESTRO ## Actividades gamificadas de análisis semiótico ### Plataforma single-file HTML · Trabajo grupal en aula · v1.0 --- ## CÓMO USAR ESTE PROMPT Este documento es un **prompt maestro reutilizable** para generar actividades gamificadas de análisis semiótico aplicado, entregables como un único archivo HTML autocontenido. **Tres audiencias lo usan en paralelo:** | Audiencia | Qué hace con el prompt | |---|---| | **Docente que diseña la actividad** | Edita los bloques marcados con `{{...}}` para definir el marco teórico, los casos a analizar y las consignas. No toca las secciones técnicas. | | **IA generadora (Claude / GPT / etc.)** | Recibe el prompt completo + los inputs del docente. Produce un archivo `.html` siguiendo todas las restricciones técnicas y pedagógicas. | | **Revisor/a técnico/a** | Usa el checklist final como criterio de aceptación. Si algún ítem falla, devuelve a la IA con la observación específica. | **Flujo recomendado:** docente completa los placeholders ...