Ilustración Aplicada: Productos Digitales Web-App

📋 Tabla de contenidos

• 🎯 Visión del Track
• Contexto
  • Perfil del estudiante
• 🤖 Desarrollo Asistido por IA (Docs-First + Archivos de Contexto)
  • Archivos de Contexto (Nueva Metodología)
  • El Enfoque de Dos Fases (No Negociable)
  • Patrones de Prompts
    • Patrón 1: El Prompt de Planificación
    • Patrón 2: El Prompt Arquitecto
    • Patrón 3: El Prompt de Implementación
    • Patrón 4: El Prompt Revisor
    • Patrón 5: El Prompt Rubber Duck
  • ✅ Buen Uso de IA
  • ❌ Mal Uso de IA
• 📊 Framework de Product Management
  • Pensamiento de Producto
• 🏆 Criterios de Diseño Nivel Awwwards
  • Diseño Visual (30%)
  • Experiencia de Usuario (30%)
  • Ejecución Técnica (25%)
  • Innovación y Concepto (15%)
  • ¿Qué puedes construir en este módulo?
• 🎓 Objetivos del módulo
  • Fundamentos técnicos
  • Aplicaciones creativas
  • Desarrollo profesional
• 🏛️ Metodología ATELIER
  • El Acrónimo ATELIER
  • Aprendizaje experiencial
• 📅 Estructura de Sesiones (4 × 3.5 horas)
  • Visión General del Timeline
  • Sesión 1 — Discovery & Foundation (3.5h)
  • Sesión 2 — Visual Excellence & Content Strategy (3.5h)
  • Sesión 3 — Personalización del Portfolio Scrollytelling (3.5h)
  • Sesión 4 — Galería de Proyectos y Lanzamiento (3.5h)
• ✅ Entregables (Mínimo Viable)
  • Por Sesión
  • Totales
• 🧪 Evaluación (Criterios Awwwards)
  • Componente Técnico (40%)
  • Componente Creativo (40%)
  • Componente Procesual (20%)
  • Métricas de Éxito Técnico
• 📚 Referencias
  • Recursos Web
  • Inspiración Nivel Awwwards
  • Herramientas de Diseño
  • Bibliografía Viva (Zotero)
  • Metodología IA
• 🧭 Nota Crítica
  • Consideraciones Éticas de IA
  • Principios del Creador Consciente

“La IA no es el destino. La IA es la brújula que nos ayuda a navegar hacia el florecimiento humano.”

Declaración de Asistencia IA: Este track integra desarrollo asistido por IA siguiendo la metodología docs-first. Planes, prompts e informes de implementación se documentan durante todo el proceso. La pedagogía está fundamentada en la experiencia de aula y la reflexión crítica sobre el rol de la IA en la educación.

🎯 Visión del Track

Este track transforma el aprendizaje tradicional de desarrollo web en un sprint de producto profesional. En 4 sesiones intensivas (14 horas totales), pasarás de cero a un portfolio digital nivel premio utilizando:

• 🤖 Desarrollo Asistido por IA — Metodología docs-first con planificación antes de implementación
• 📊 Visión de Product Manager — Cada decisión responde a necesidades de usuario y objetivos de negocio
• 🏗️ Enfoque Arquitectónico — Pensamiento sistémico, patrones reutilizables, código mantenible
• 🏆 Criterios Awwwards — Estándares de diseño visual, UX, técnica e innovación de nivel industria

┌─────────────────────────────────────────────────────────┐
│                    FILOSOFÍA DEL TRACK                   │
├─────────────────────────────────────────────────────────┤
│                                                          │
│   Publicar rápido. Diseñar con excelencia.              │
│   Codificar profesionalmente. Presentar con confianza.  │
│                                                          │
│   No eres estudiante haciendo ejercicios.               │
│   Eres creador/a construyendo tu portfolio profesional. │
│                                                          │
└─────────────────────────────────────────────────────────┘

Contexto

Este módulo está diseñado para estudiantes de Ilustración Aplicada que desean expandir sus habilidades creativas al entorno digital, centrándose en el desarrollo de productos web y aplicaciones interactivas. El curso asume que los estudiantes tienen una sólida base en principios visuales y de diseño, pero poca o ninguna experiencia en programación.

Perfil del estudiante

• Formación artística: Background en ilustración, diseño gráfico o artes visuales
• Interés digital: Curiosidad por cómo sus habilidades creativas pueden aplicarse a medios interactivos
• Nivel técnico: Principiantes en programación, con disposición para aprender
• Objetivos profesionales: Diseñadores UX/UI, desarrolladores front-end creativos, artistas digitales

🤖 Desarrollo Asistido por IA (Docs-First + Archivos de Contexto)

Este track integra la Guía Práctica de Desarrollo Asistido por IA como metodología central.

Archivos de Contexto (Nueva Metodología)

IMPORTANTE: En este track aprenderás a usar archivos de contexto para evitar duplicar información en prompts.

Archivos clave:

• project-brief.md - Tu fuente de verdad (contenidos, colores, tipografías, proyectos)
• project-inspiration.md - Referencias visuales y tendencias

Cómo usarlos con IA:

1. Completa project-brief.md con TODOS tus contenidos preparados
2. En cada prompt, adjunta project-brief.md
3. Instruye a la IA: “Lee project-brief.md sección X para obtener Y”
4. La IA extrae la información - NO la dupliques en el prompt

Beneficios:

• ✅ Prompts más cortos y claros
• ✅ Fuente única de verdad (DRY principle)
• ✅ Fácil de actualizar - cambias el brief, no 10 prompts
• ✅ Aprendes a usar contexto profesionalmente

El Enfoque de Dos Fases (No Negociable)

Para cualquier tarea no trivial, las interacciones con IA deben seguir:

┌─────────────────────────────────────────────────────────┐
│           EL ENFOQUE DE DOS FASES                        │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  FASE 1: PLANIFICACIÓN                                   │
│  ─────────────────────                                   │
│  → Solicita a la IA generar un plan de desarrollo        │
│  → Documenta en ./docs/plan-[feature].md                 │
│  → Revisa y aprueba antes de proceder                    │
│                                                          │
│  FASE 2: IMPLEMENTACIÓN                                  │
│  ─────────────────────────                               │
│  → Solo después de documentar el plan                    │
│  → La IA implementa según el plan                        │
│  → Genera informe de implementación                      │
│                                                          │
└─────────────────────────────────────────────────────────┘

Por qué importa:

• Arquitectura intencional: Previene generación de código sin rumbo
• Consciencia: Te obliga a pensar antes de codificar
• Trazabilidad: Documenta decisiones para referencia futura
• Aprendizaje: Planificar enseña a descomponer problemas
• Debugging: A las 2 AM, te agradecerás la documentación

Patrones de Prompts

Patrón 1: El Prompt de Planificación

Usa cuando: Inicias cualquier feature o componente nuevo

Genera un plan de desarrollo para [nombre del feature] con:

1. Visión general y criterios de éxito
2. Fases de implementación con entregables específicos
3. Decisiones de arquitectura y trade-offs
4. Prompts específicos para cada fase
5. Estrategia de testing

Documenta esto en formato docs/plan-[nombre-feature].md.
No implementes todavía—solo planificación.

Patrón 2: El Prompt Arquitecto

Usa cuando: Evalúas opciones de diseño

Necesito implementar [feature]. Antes de escribir código:

1. Propón 2-3 enfoques arquitectónicos
2. Compara trade-offs de cada uno (rendimiento, mantenibilidad, complejidad)
3. Recomienda uno con justificación detallada
4. Describe los pasos de implementación

No escribas código todavía—quiero entender el diseño primero.

Patrón 3: El Prompt de Implementación

Usa cuando: Ejecutas una fase planificada

Siguiendo el plan en docs/plan-[feature].md, implementa la Fase [N]:

[Descripción específica de la tarea]

Restricciones:

- Sigue el sistema de diseño en assets/css/style.css
- Asegura contraste WCAG AA (4.5:1 para texto)
- Mobile-first responsive (320px a 1920px)
- Progressive enhancement (funciona sin JS)
- Usa elementos HTML5 semánticos

Después de implementar, genera un informe documentando:

1. Archivos modificados y por qué
2. Decisiones clave tomadas
3. Recomendaciones de testing
4. Notas de handoff para la siguiente fase

Patrón 4: El Prompt Revisor

Usa cuando: Control de calidad y code review

Revisa este [HTML/CSS/JS] críticamente:

[pega código]

Analiza:

1. Corrección y funcionalidad
2. Cumplimiento de accesibilidad WCAG AA
3. Problemas de rendimiento
4. Vulnerabilidades de seguridad
5. Preocupaciones de mantenibilidad
6. Mejoras sugeridas

Sé duro pero constructivo.

Patrón 5: El Prompt Rubber Duck

Usa cuando: Debugging (te ayuda a descubrir la solución)

Tengo un bug. Déjame explicar qué espero vs. qué pasa:

Esperado: [descripción]
Actual: [descripción]
Código: [pega]

No me des la respuesta inmediatamente.
Hazme preguntas que me ayuden A MÍ a descubrir el bug.

✅ Buen Uso de IA

• Planifica primero: Siempre crea documento de plan para features no triviales
• Ingeniería de prompts: Preguntas específicas, ricas en contexto, con restricciones
• Generación de código: Genera boilerplate después de planificar
• Resolución de problemas: Usa prompts “Rubber Duck” para descubrir bugs tú mismo/a
• Documentación: Genera informes de implementación después de cada fase
• Exploración de diseño: Pide 2-3 opciones con trade-offs
• Accesibilidad: Solicita cumplimiento WCAG AA en cada prompt

❌ Mal Uso de IA

• Copiar código sin entenderlo
• Saltarse la fase de planificación (error más crítico)
• No testear código generado por IA
• Ignorar accesibilidad y rendimiento
• Dejar que la IA tome decisiones creativas por ti
• No documentar el trabajo asistido por IA

📊 Framework de Product Management

Cada sesión sigue un ciclo de desarrollo de producto:

┌─────────────────────────────────────────────────────────┐
│              CICLO DE PRODUCTO POR SESIÓN                │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  1. DISCOVERY    → Investigación, análisis, necesidades │
│  2. DEFINITION   → Alcance, requisitos, métricas        │
│  3. DESIGN       → Wireframes, sistema visual, patrones │
│  4. DEVELOPMENT  → Construir, testear, iterar           │
│  5. DELIVERY     → Deploy, medir, recoger feedback      │
│  6. OPTIMIZATION → Refinar basándose en datos           │
│                                                          │
└─────────────────────────────────────────────────────────┘

Pensamiento de Producto

Antes de cada feature, pregunta:

🏆 Criterios de Diseño Nivel Awwwards

Tu proyecto será evaluado con estándares de industria:

Diseño Visual (30%)

Experiencia de Usuario (30%)

Ejecución Técnica (25%)

Innovación y Concepto (15%)

¿Qué puedes construir en este módulo?

Ejemplos de proyectos que desarrollarás:

• Portfolio digital interactivo: Presenta tu obra con animaciones sutiles y navegación fluida
• Web art piece: Una ilustración que responde al usuario, con micro-interacciones y transiciones
• Versión digital de obra impresa: Transforma tu libro ilustrado, cómic o zine a experiencia web
• Landing page de proyecto: Presenta tu serie de ilustraciones con contexto y narrativa
• Micro-app creativa: Pequeña aplicación que showcase tu estilo visual único
• Galería inmersiva: Espacio expositivo virtual con filtros, lightbox y animaciones
• Storytelling interactivo: Narrativa visual donde el usuario controla el descubrimiento
• Tarjeta de presentación digital: Mini-sitio que funciona como portafolio vivo
• Proyecto editorial web: Revista o catálogo con diseño responsive y multimedia
• Prototipo de producto digital: Concepto de app o servicio con tu identidad visual

🎓 Objetivos del módulo

Al finalizar este módulo, los estudiantes serán capaces de:

Fundamentos técnicos

• Comprender los principios básicos del desarrollo web moderno (HTML, CSS, JavaScript)
• Dominar herramientas de desarrollo y flujos de trabajo profesionales con IA
• Implementar diseños responsivos que funcionen en múltiples dispositivos (320px-1920px)
• Aplicar principios de accesibilidad WCAG AA y usabilidad web
• Usar desarrollo asistido por IA de forma ética e intencional

Aplicaciones creativas

• Transformar ilustraciones estáticas en experiencias web interactivas
• Crear animaciones y transiciones que mejoren la narrativa visual
• Desarrollar interfaces atractivas y funcionales para proyectos digitales
• Integrar elementos multimedia en proyectos web complejos
• Alcanzar estándares de diseño nivel Awwwards

Desarrollo profesional

• Construir un portafolio digital que showcase habilidades técnicas y creativas
• Pensar como Product Manager: decisiones basadas en usuario y negocio
• Comprender el ciclo completo del desarrollo de productos digitales
• Evaluar críticamente las implicaciones éticas y sociales del diseño digital
• Documentar y presentar trabajo con case studies profesionales

🏛️ Metodología ATELIER

Este módulo sigue la metodología ATELIER, que se caracteriza por:

El Acrónimo ATELIER

• Arquitectura: Piensa como product manager antes de codificar
• Técnica: Construye con estándares modernos (HTML5, CSS Grid, ES6+)
• Experiencia: Diseña interacciones que deleiten y enganchen
• Lanzamiento: Despliega temprano y a menudo (MVP en S1)
• Iteración: Refina basándote en feedback y métricas
• Exhibición: Presenta tu trabajo con confianza y claridad
• Reflexión: Documenta decisiones, aprendizajes y próximos pasos

Aprendizaje experiencial

• Proyecto central: Cada estudiante desarrolla un producto web completo a lo largo del módulo
• Iteración continua: Feedback constante y mejora progresiva
• Reflexión crítica: Análisis del proceso y resultados en cada etapa
• Asistencia IA: Aceleración con metodología docs-first

📅 Estructura de Sesiones (4 × 3.5 horas)

Visión General del Timeline

Sesión 1 — Discovery & Foundation (3.5h)

Fase de Producto: Discovery → Definition → MVP Launch

Publicar tu primer “Hello, Web” y arrancar el proyecto con un wireframe y un commit inicial.

• Sesión:
  • S1 — La web como lienzo + planteamiento del proyecto

Desglose de tiempo:

Prompt IA recomendado:

Genera un plan de discovery de producto para un [tipo de sitio] dirigido a [audiencia específica].

Incluye:

1. 5 necesidades clave del usuario basadas en pain points de [audiencia]
2. Análisis competitivo de [ejemplos de competidores]
3. 3 features de diferenciación únicas con justificación
4. User stories (Como [usuario], quiero [acción], para que [beneficio])
5. Métricas de éxito para validación

Documenta en formato docs/plan-discovery.md.

Canon recomendado:

• Guía para Configurar un Entorno de Desarrollo Web
• Práctica: HTML semántico + Fundamentos de CSS

Entregables S1:

• ✅ URL live (GitHub Pages)
• ✅ Wireframe documentado
• ✅ Sistema de diseño implementado (variables CSS)
• ✅ Estructura HTML semántica
• ✅ Mobile-responsive
• ✅ 1 commit significativo

Sesión 2 — Visual Excellence & Content Strategy (3.5h)

Fase de Producto: Content → Visual Design → Component Library

Construir galerías de imágenes y layouts que muestren tu trabajo con ritmo visual y jerarquía.

• Sesión:
  • S2 — Galerías y layouts para tu arte

Desglose de tiempo:

Prompt IA recomendado:

Basándote en estas referencias visuales [describe o adjunta imágenes]:

1. Sugiere una paleta de colores (3-5 colores) con códigos hex que transmita [mood/feeling]
2. Asegura ratios de contraste WCAG AA (4.5:1 para texto, 3:1 para UI)
3. Recomienda 2 combinaciones de Google Fonts que encajen con esta estética
4. Proporciona justificación para cada elección
5. Incluye guías de uso (primario para CTAs, secundario para acentos, etc.)

Testea todas las combinaciones con WebAIM Contrast Checker.

Canon recomendado:

• Media: Video y contenido audiovisual
• Diseño Web: Responsive, Fluido e Intrínseco
• Diseño Intrínseco Web

Entregables S2:

• ✅ Contenido compelling y bien escrito
• ✅ Diseño visual nivel Awwwards
• ✅ Librería de componentes reutilizables
• ✅ Responsive en todos los dispositivos
• ✅ Micro-interacciones y pulido CSS
• ✅ 1 commit significativo

Sesión 3 — Personalización del Portfolio Scrollytelling (3.5h)

Fase de Producto: Completar Brief → Personalizar Diseño → Integrar Contenidos → Testing

Completa project-brief.md con todos tus contenidos, personaliza el sistema de diseño (colores/tipografías) y rellena las secciones scrollytelling con tus textos preparados.

• Sesión:
  • S3 — Personalización del Portfolio Scrollytelling

Desglose de tiempo:

Ejemplo de Prompt con Archivos de Contexto:

Personaliza la Hero Section del portfolio.

## 📎 CONTEXTO
Adjunta: `project-brief.md`

Lee sección "Contenidos Preparados" → "Lema/Tagline para Hero"

## TAREA

Actualiza en `index.html` la Hero Section con:
- Nombre del brief
- Tagline del brief
- Emoji apropiado para tu especialidad

NO dupliques información del brief en este prompt - la IA debe LEER el archivo adjunto.

## REPORT
1. Nombre extraído del brief: [...]
2. Tagline integrado: [...]
3. Responsive: Verificado ✓

[La IA completará después de leer project-brief.md]

Aprendizaje clave: Usa archivos de contexto para evitar duplicar información.

Canon recomendado:

• Tailwind CSS: Configuración y Fundamentos
• Diseño Web: Responsive, Fluido e Intrínseco

Entregables S3:

• ✅ project-brief.md completado al 100%
• ✅ Sistema de diseño personalizado (colores + tipografías del brief)
• ✅ Todos los componentes con contenido real (no placeholders)
• ✅ Responsive verificado (320px-1440px)
• ✅ Accesibilidad WCAG AA
• ✅ 1 commit significativo con portfolio personalizado

Sesión 4 — Galería de Proyectos y Lanzamiento (3.5h)

Fase de Producto: Galería ImageKit → UX Testing → Iteración → Launch & Present

Añadir galería de proyectos con imágenes de ImageKit, realizar testing UX con compañeros, iterar con feedback y lanzar el portfolio público.

• Sesión:
  • S4 — Galería de Proyectos y Lanzamiento

Desglose de tiempo:

Ejemplo de Prompt con Contexto para Galería:

Crea galería de proyectos usando mis imágenes de ImageKit.

## 📎 CONTEXTO
Adjunta: `project-brief.md`

Lee sección "Proyectos para Galería" - extrae:
- URLs de ImageKit de cada proyecto
- Títulos, descripciones, categorías
- Alt text

## UBICACIÓN

Añadir NUEVA sección en `index.html` después del `parallax-section`, antes de "My Work".

## ESTRUCTURA

Genera UNA card por cada proyecto listado en project-brief.md con:
- Imagen optimizada (tr:w-400,h-300,q-80,f-auto)
- Título y descripción del brief
- Tag de categoría
- Lazy loading
- Grid responsive auto-fit

NO dupliques - extrae todo de project-brief.md

## REPORT
1. Proyectos extraídos: [N] del brief
2. Categorías únicas: [lista]
3. URLs optimizadas: ✓
4. Alt text: ✓
5. Grid responsive: ✓

[La IA completará]

Canon recomendado:

• Introducción a JS
• JS: DOM Manipulation

Entregables S4:

• ✅ Navegación sticky con menú hamburguesa responsive
• ✅ Galería con mínimo 6 proyectos (ImageKit optimizado)
• ✅ Lightbox funcional (opcional pero recomendado)
• ✅ Testing UX con compañero completado
• ✅ 2-3 mejoras críticas implementadas por feedback
• ✅ Meta tags Open Graph
• ✅ Case study documentado
• ✅ Portfolio público y funcionando
• ✅ 1 commit final significativo

✅ Entregables (Mínimo Viable)

Por Sesión

Totales

• ✅ Sitio publicado (URL) + repo en GitHub
• ✅ Documentación docs-first (plans + reports)
• ✅ Mínimo 4 commits significativos (1 por sesión)
• ✅ Case study de portfolio
• ✅ Presentación final

🧪 Evaluación (Criterios Awwwards)

Componente Técnico (40%)

Componente Creativo (40%)

Componente Procesual (20%)

Métricas de Éxito Técnico

┌─────────────────────────────────────────────────────────┐
│              LIGHTHOUSE TARGETS                          │
├─────────────────────────────────────────────────────────┤
│  Performance:     90+                                    │
│  Accessibility:   100                                    │
│  Best Practices:  90+                                    │
│  SEO:             100                                    │
├─────────────────────────────────────────────────────────┤
│  HTML Válido:     W3C Validator ✓                        │
│  CSS Válido:      W3C CSS Validator ✓                    │
│  JS Errors:       0 en consola                           │
└─────────────────────────────────────────────────────────┘

📚 Referencias

Recursos Web

• MDN Web Docs
• CSS-Tricks
• JavaScript.info
• A List Apart

Inspiración Nivel Awwwards

• Awwwards — Sitios premiados, tendencias
• CSS Design Awards — Galería de excelencia
• FWA — Cutting edge digital
• Siteinspire — Curación de diseño web

Herramientas de Diseño

• Coolors — Generador de paletas
• Realtime Colors — Visualiza colores en diseño
• WebAIM Contrast Checker — Verificador de contraste
• Type Scale — Escalas tipográficas

Bibliografía Viva (Zotero)

• Zotero Web Atelier (UDIT) Library

Metodología IA

• Guía Práctica de Desarrollo Asistido por IA
• ACM Code of Ethics
• UNESCO Recommendation on AI Ethics

🧭 Nota Crítica

Este curso busca formar creadores conscientes: no solo “hacer web”, sino reflexionar sobre impacto, ética, accesibilidad y cultura visual.

Consideraciones Éticas de IA

┌─────────────────────────────────────────────────────────┐
│ 🌍 CONSIDERACIONES CLIMÁTICAS                            │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  Entrenar GPT-4 ≈ 50,000 kg CO₂ (≈ 5 vuelos            │
│  transatlánticos por pasajero)                          │
│                                                          │
│  Cada consulta consume energía. Pregunta con intención. │
│                                                          │
│  Considera:                                              │
│  → ¿Es esta consulta necesaria?                         │
│  → ¿Podría encontrar esto en documentación?             │
│  → ¿Estoy usando IA para aprender o por pereza?         │
│                                                          │
└─────────────────────────────────────────────────────────┘

Principios del Creador Consciente

• Cuestiona paradigmas establecidos
• Considera implicaciones sociales y éticas
• Desarrolla una voz auténtica
• Contribuye a un ecosistema digital más inclusivo
• Documenta tu proceso y decisiones
• Comparte conocimiento con la comunidad