Entradas

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

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