Imagen Escrita 2026
| Asignatura(s) | Imagen Escrita |
|---|---|
| Año | 2026 |
| Período Académico | segundo |
| Tipo de Curso | Ramo Lectivo |
| Profesores | Javiera Ruiz ver |
| Estudiantes | Raissa Garrido, Catalina Barrios Núñez, Matías Arancibia, Natalia Vilches, Joaquina San Juan, Laura Cabach, Natalia León, Paulina Jelves, Francisca Toro, Rafaela Waller, Florencia Valdivia, Fernanda Pérez Olivares, Angelina Echeverría, José Tomás Quezada, Valentina Córdova, Kai Yáñez, Florencia Godoy, Antonella Martínez, Aratza Concha, Enzo Vignolo, Sofía Medina, Luciana Valdés, Andrea Serra, Olivia Rodríguez, Marina Basualto, Isabel Sáez, Antonia Aguilera, Mateo Correa ver |
| Palabras Clave | programación creativa, arte generativo, p5js, front end, javascript, html, css |
| Carreras Relacionadas | Diseño |
| Docencia Vinculada | No |
Introducción al curso
La asignatura Imagen Escrita introduce a los estudiantes en el arte generativo, el creative coding y el desarrollo web como medios de exploración visual e interactiva. A través de ejercicios progresivos en JavaScript (p5.js) HTML y CSS, los estudiantes desarrollan experiencias digitales basadas en reglas, comportamientos y relaciones.
La asignatura aborda el código como material de diseño y una forma de escritura visual. Por ello, el proceso no comienza directamente en la programación, sino en la conceptualización y la formulación de lógicas algorítmicas. Estas definiciones iniciales se traducen posteriormente en el desarrollo de prototipos digitales que son refinados mediante un proceso iterativo de depuración de código.
La inteligencia artificial se incorpora como una herramienta de apoyo para traducir ideas a código, explorar alternativas, comprender estructuras, detectar errores y reorganizar soluciones. Su uso no reemplaza la conceptualización ni las decisiones formales del estudiante. Por el contrario, exige aprender a formular problemas con precisión, evaluar críticamente los resultados generados y apropiarse del código mediante su lectura, explicación y modificación.
Al finalizar el curso, los estudiantes serán capaces de concebir una propuesta visual desde una lógica sistémica, implementarla en p5.js, comprender y modificar código asistido por IA y construir un sitio web básico para organizar, documentar y publicar sus exploraciones.
Horario
| Horario | Sala |
|---|---|
| Jueves Claves 9,10 - 11,12 14:30- 17:00 |
Sala Entrepiso B Matta 12 |
Evaluaciones
| Entrega Módulo 1 | Entrega Módulo 2 | Encargos Semanales | |
|---|---|---|---|
| Fecha | 24 de septiembre | 22 de octubre | Semanal |
| Porcentaje | 40% | 40% | 20% |
Módulo 1: Fundamentos de programación en p5.js
Clase 1: Introducción a la asignatura
Ejemplos de la clase
Encargo: Reinterpretación de una portada del álbum mediante código
Escoge la portada de un álbum músical de tu interés y reinterprétala mediante dibujo con código. Identifica sus proporciones, colores, formas y composición, y traduce estos elementos a un sketch de p5.js.
Utiliza solamente figuras básicas y/o formas construidas con beginShape() y vertex(). La propuesta debe conservar rasgos reconocibles de la portada original.
¿Qué se debe entregar?
Se debe documentar en la wiki:
- Proceso de diseño: Dibujos, esquemas que permitan comprender las lógicas de dibujo en p5.js
- Sketch de p5.js (Cómo subir un sketch a la wiki https://wiki.ead.pucv.cl/Widget:P5js)
Material de apoyo
- Selector de color Hexadecimal: https://htmlcolorcodes.com/es/
- Video explicación del encargo: https://youtu.be/B7xTOZfQKsI
Tareas
- n° Tarea: 1
- Ejemplo de título de la tarea: Encargo 1 IE - Nombre del Álbum - Nombre y Apellidos
Clase 2: Variables, Condicionales y Bucles
Ejemplos de la clase
Condicionales
For Loop
Encargo
Crear una composición visual en p5.js formada por una serie repetida de elementos (círculos, líneas, rectángulos u otras formas simples) cuyo aspecto cambie progresivamente con el paso del tiempo.
El sketch debe incluir:
- Variables para controlar al menos dos propiedades visuales, por ejemplo tamaño, posición, color o velocidad.
- bucle for para construir una serie de al menos 10 elementos.
- Condicional que produzca un cambio visible cuando ocurra una condición determinada.
Tareas
- n° Tarea: 2
- Ejemplo de título de la tarea: Encargo 2 IE - Nombre y Apellidos
Clase 3: Funciones de transformación
Contenidos
- Funciones de transformación: translate(), rotate(), scale()
- Funciones push() y pop()
- Identidad circular
- Generación de patrones complejos aplicando transformaciones
Ejemplos de la clase
- Funciones de transformación + push() pop()
- Patrón complejo - Rectángulo blanco
- Patrón Complejo - Rectángulo colores
- Patrón complejo - Líneas
Encargo
Crear un patrón complejo usando funciones de transformación (translate, rotate, scale, push, pop).
El sketch debe incluir únicamente los contenidos que hasta ahora hemos revisado en clases.
Tareas
- n° Tarea: 3
- Ejemplo de título de la tarea: Encargo 3 IE - Nombre y Apellidos
Clase 4: Funciones
Contenidos
- Funciones de p5.js
- Funciones Personalizadas
- Funciones Recursivas
Ejemplos de la clase
Encargo
Generar un patrón recursivo, implementando algún tipo de interacción (Slider, MouseX, MouseY, MouseIsPressed, etc)
El sketch debe incluir únicamente los contenidos que hasta ahora hemos revisado en clases.
Tareas
- n° Tarea: 4
- Ejemplo de título de la tarea: Encargo 4 IE - Nombre y Apellidos
Clase 5: Programación Orientada a Objetos
Ejemplos de la clase
Encargo
Crea un sistema de partículas en el que cada partícula utilice una función personalizada para definir su forma visual. Experimenta con sus propiedades y comportamientos.
Tareas
- n° Tarea: 5
- Ejemplo de título de la tarea: Encargo 5 IE - Nombre y Apellidos
Clase 6: Archivos e Inputs externos en p5.js
Ejemplos de la clase
Encargo Evaluado U1
Proyectos
- Título del Proyecto: Nombre de la obra - Entrega U1 IE
- Palabra clave: u1
- Imagen principal: Frame representativo del sketch
Módulo 2: Introducción al Front-End
Clase 8: Introducción al Front-End - HTML
Contenidos
- Diseño UI / WEB
- Introducción HTML
- Estructura documento y etiquetado
- Nuevas herramientas de desarrollo: Github y VSC
- Estructura de un sitio web estático
Encargo
Revisar la documentación HTML de Mozilla para aprender más sobre etiquetas
Si bien este encargo no requiere documentación en la wiki y no es evaluado, es muy importante para profundizar en la materia.
Clase 9: Introducción al Front-End - CSS
Clase 10: Publicar el sitio en Github
Encargo Evaluado U2: Portafolio Web Personal
Fecha de entrega: 25 de octubre
El objetivo de este encargo es crear un sitio web personal y funcional (sitio publicado en GITHUB PAGES), tomando como punto de partida la plantilla de ejemplo trabajada en clases.
Es importante que sus sitios no se parezcan estructuralmente al ejemplo base, por lo que deberán realizar un wireframe inicial, modificar el contenido y estructura HTML, modicficar las propiedades CSS segun los requerimientos de su diseño y estructura del sitio.
El ejemplo entregado en clases muestra solo el mínimo de secciones, deben ir más allá: agregar páginas, componentes, secciones de información u otros elementos que refuercen la identidad de su sitio personal.
Elementos a evaluar
1. Estructura HTML y Wireframe (40%)
- Wireframe presentado y coherente con la estructura del HTML y la visualización final del sitio.
- Modificación del contenido (títulos, párrafos, imágenes, enlaces a tareas).
- Inclusión de al menos 3 secciones o componentes propios (más allá del ejemplo base).
- Estructuras coherentes y lógicas (considerando uso de etiquetas y contenedores adecuados para el contexto de uso)
- Enlaces correctos a los encargos de p5.js
2. Estilos CSS y diseño visual (50%)
- Decisiones de diseño: propuesta visual, jerarquias, diagramación, contraste color - tamaños.
- Cambios en layout (grilla distinta al ejemplo, uso de flex/grid, reorganización).
- Cambios en tipografía (familia, tamaños, peso) y color (fondo, botones, texto).
- Aplicación de al menos 10 propiedades CSS nuevas, con efectos visibles (ej: sombras, transiciones, transformaciones, filtros, etc.).
- Responsividad (que el sitio se adapte a pantallas) (?)
3. Publicación y vinculación (10%)
- Sitio publicado en GitHub Pages con URL funcional.
Entregables
- Sitio Web Publicado
- Documentación - proyecto en la wiki, deben incluir:
- Palabra clave: sitioweb
- Wireframe
- URL del sitio web publicado
- Enlace al repositorio de Github (para revisar el código)
- Breve reflexión del trabajo, declaración de uso de IA
Sitios Web del Curso
| Alumnos | URL«URL» es un tipo y propiedad predefinida, proporcionada por Semantic MediaWiki, para representar valores URI/URL. | |
|---|---|---|
| Sitio Web IE 2026 - Joaquina San Juan | Joaquina San Juan | https://joaquinasanjuan.github.io/entrega-final-ie/ |
| Sitio Web IE 2026 - Matias Arancibia | Matías Arancibia | https://spicymatias.github.io/Entrega-Final-IE-2026/ |