Imagen Escrita 2025
| Asignatura(s) | Imagen Escrita |
|---|---|
| Año | 2025 |
| Período Académico | segundo |
| Tipo de Curso | Ramo Lectivo |
| Profesores | Javiera Ruiz ver |
| Estudiantes | Florencia ozores, Valentina Aguirre, Francisco Daniou, Karol Vargas, Jenyfer Pérez, Matilde Orellana, Gloria García, Beatriz Castro Vega, Amparo Pérez, Dana Gonzalez, Francisco Guevara, Benjamin Ramirez Herrera, Camila Mata, Iván Castillo, Nicolás Rivera, Josefa González, Magdalena Gutiérrez Sepúlveda, Gustavo Rivera, Muriel Sanchez, Amanda Fernández, Yasna Romo, Piera Ivelic Porzio, Carlos Quiroga Gatica, Rocío Meneses, Martina Alvear ver |
| Palabras Clave | programación creativa, p5js, javascript, html, css |
| Carreras Relacionadas | Diseño |
Introducción al curso
Este curso se centra en la intersección entre diseño, programación y arte generativo. Utilizando p5.js como herramienta principal, el curso explora los fundamentos de la programación creativa y su aplicación en el diseño visual interactivo.
A través del creative coding se hace énfasis en el pensamiento computacional como herramienta de diseño, fomentando un enfoque innovador en la resolución de problemas visuales y la creación artística. La integración de herramientas de IA busca ampliar las posibilidades creativas y técnicas, sirviendo como complemento al proceso de diseño y programación
Herramientas
- P5js: Biblioteca de JavaScript que simplifica la programación para artistas, diseñadores, educadores y principiantes.
- Visual Studio Code como herramienta (entorno de desarrollo) principal del curso.
- Github: Plataforma de desarrollo colaborativo que permite a los usuarios alojar y revisar código, gestionar proyectos y construir software.
- Guía HTML y CSS: Lenguajes de marcado utilizados para estructurar y diseñar contenido en la web.
- ChatGPT: Para generación y depuración de código
Evaluaciones
| Entrega 1 | Entrega Final | Nota por entrega de encargos | |
|---|---|---|---|
| Fecha | 25 de septiembre | 23 de octubre | Todas las clases |
| Porcentaje | 40% | 50% | 10% |
Clase 1: Introducción al curso
Contenidos
- Objetivos de la asignatura
- Organización del semestre
- Pensamiento algoritmico/computacional
- Arte generativo
- Creative Coding
- p5.js (entorno de desarrollo, function setup/draw, sistema de coordenadas, formas básicas 2d)
Presentación
Ejemplo de la clase
Encargo 1: Abstracción de portada de álbum
Selecciona la portada de un álbum musical que sea de tu interés y crea una abstracción visual inspirada en ella. Para ello, deberás observar y reinterpretar la imagen original considerando sus proporciones, colores predominantes y formas principales.
La composición final debe ser desarrollada en un sketch de p5.js, utilizando figuras básicas (como rectángulos, círculos, líneas) y/o trazado con beginShape() y vertex() para construir formas más complejas.
Tareas
Ejemplo de título de la tarea: Encargo 1 IE - Nombre del Álbum / Nombre y Apellidos
Clase 2: Introducción al Front End 1 - 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
Código de la clase
<ref>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio Web Imagen Escrita</title>
</head>
<body>
<main>
<header>
<h1>IE 2025</h1>
</header>
<div id="left">
<div class="content">
<p> Aqui va el párrafo </p>
<a href="https://enlace-a-la-wiki.com" target="_blank">
<button>Ver proyecto en la wiki</button>
</a>
</div>
</div>
<div id="right">
<h2>Mis proyectos</h2>
<div class="proyectos">
<nav>
<a href="https://www.ejemplo.com" target="_blank">
<img src="assets/img1.jpg" alt="Descripción de la imagen"> imagen 1
</a>
<a href="https://www.ejemplo.com" target="_blank">
<img src="assets/img2.jpg" alt="Descripción de la imagen"> imagen 2
</a>
</nav>
</div>
</div>
</main>
</body>
</html>
</ref>
Presentación
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 3: Introducción al Front End 2 - CSS
Contenidos
- Introducción CSS
- Selectores y propiedades
- Desarrollo de un sitio web estático en vivo
- Github
- Formato de entrega de encargo evaluado 1
Recursos para la clase
- Drive: https://drive.google.com/drive/u/2/folders/1jQhywD4UdkUMDofcF8wUziNH1SyNSrRR
- Tipografías Google Fonts:
- Space Mono: https://fonts.google.com/specimen/Space+Mono
- Open Sans: https://fonts.google.com/specimen/Open+Sans
Presentación
Sitios Web del Curso (Encargo evaluado)
Fecha de entrega: 25 de septiembre (mediodía)
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
- Tareas en la Wiki (1, 2, 3, 4)
- Sitio Web (Se sube como proyecto en la wiki), deben incluir:
- Enlace a github pages (url del sitio web)
- Enlace al repositorio de Github
- Breve reflexión del trabajo
Clase 4: Variables, Condicionales y Loops
Contenidos
- Declaración e inicialización de Variables
- Operaciones matemáticas aplicadas a variables
- Estructuras de control: if, else, for
- Generación de patrones utilizando bucles
- Aleatoriedad controlada en el diseño
- Interactividad básica con el mouse
Presentación
Ejemplos de la clase
Condicionales
For Loop
For Loop + Condicionales
Encargo 2
Crear un sketch que incluya For Loop y/o Condicionales. Experimentación libre.
Deben subir el encargo como tarea "2"
Clase 5: 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
Presentación
Ejemplos de la clase
Funciones de transformación
Identidad circular
Patrones Complejos
Encargo 3
Crear un patron complejo usando funciones de transformación (transalte, rotate, scale, push, pop). Es un requisito ser capaz de explicar la lógica detrás del código propuesto.
Deben subir el encargo como tarea "3"
Clase 6: Funciones Personalizadas y Recursión
Contenidos
- Funciones propias de p5.js
- Definir y llamar Funciones Personalizadas
- Fractales
- Recursión
- Interacción: Slider, MouseX, MouseY
Presentación
Ejemplos de la clase
Funciones
Funciones Recursivas
Funcion MAP
Encargo 4
*Generar un patrón recursivo, implementando algún tipo de interacción (Slider, MouseX, MouseY)
Deben subir el encargo como tarea "4"
Entrega Evaluada 1: Sitio Web Personal
Fecha de entrega: 25 de septiembre (mediodía)
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
- Tareas en la Wiki (1, 2, 3, 4)
- Sitio Web (Se sube como proyecto en la wiki), deben incluir:
- Wireframe
- Descripción del código y la propuesta
- Enlace a github pages (url del sitio web)
- Enlace al repositorio de Github
- Breve reflexión del trabajo
Formato de registro en la Wiki
- Subir como Proyecto
- Palabra Clave: sitioweb
Sitios Web del Curso
Clase 7: Programación Orientada a Objetos
Contenidos
- Fundamentos POO
- Clases
- Objetos
- Arreglos
- Eventos
Presentación
Ejemplos de la clase
Clase 8: Programación Orientada a Objetos 2 - Partículas y Movimiento Avanzado
Ejemplos de la clase
- Sistema de Partículas - Función Estrella
- Nodos Conectados - Ruido de Perlin
- Sistema de Partículas 3D
Encargo 5
Crea un sistema de partículas interactivo que responda al movimiento del mouse o a otros inputs.
Deben subir el encargo como tarea "5"
