Imagen Escrita 2023
De Casiopea
| Asignatura(s) | Imagen Escrita |
|---|---|
| Año | 2023 |
| Tipo de Curso | Ramo Lectivo |
| Profesores | Herbert Spencer |
| Profesor(es) Ayudante(s) | Javiera Ruiz |
| Estudiantes | Pedro Beltrán, Dominique Carvajal González, Antonella Andrea Saa Roman, Martina Fernández Ferry, Valeria Muñoz Valdivia, Monserrat Romero, Valeria González Vásquez, Antonia Campillay Miranda, Sarai Farías Pincheira, Catalina Cabezas, Misael Vergara, Sophia Maluenda, Valentina Martínez, Annelys Mendez Feliz, Amanda Muñoz, Emilie Cabello, Javiera Iturrieta, Antonia Aguirre, Florencia Pimentel, Antonia Navarro Cassi, Valentina Maldonado, Ingeborg Gundersen, Antonia Cirelli Gonzalez Tapia, Adriana Vicencio, Agustina Silva, Catalina Esperanza González Godoy, Damian Maturana, Yion Yi Carvajal, Antonia Belaustegui, Ignacio Herrera, Almendra Ortega, MartinaToledo, Diego Mejías |
| Palabras Clave | programación, html, css, p5js, javascript, chatgpt |
| Carreras Relacionadas | Diseño |
Estudiantes
Horario de clases: viernes 9:30 - 11:30
Introducción al Curso
El curso de Imagen Escrita para este año está diseñado para proporcionar a los estudiantes una comprensión sólida de los conceptos fundamentales de la programación y el diseño web. Se utilizarán herramientas como HTML, CSS, P5js y Github. Este año, se incorpora una nueva herramienta al arsenal: ChatGPT, un modelo de lenguaje avanzado desarrollado por OpenAI. ChatGPT será una herramienta invaluable para ayudar a traducir las ideas de pseudocódigo a código real, facilitando el pensamiento lógico y específico necesario para desarrollar proyectos funcionales..
Criterios de Evaluación
- Comprensión y Aplicación de Conceptos: Los estudiantes deben demostrar una comprensión sólida de los conceptos de programación y diseño web enseñados en el curso y aplicarlos de manera efectiva en sus proyectos.
- Creatividad y Originalidad: Los proyectos deben ser originales y mostrar un uso creativo de las herramientas y técnicas enseñadas en el curso.
- Funcionalidad del Proyecto: Los proyectos deben ser completamente funcionales y libres de errores de programación.
- Presentación y Documentación: Los estudiantes deben presentar su trabajo de manera profesional y proporcionar documentación adecuada para sus proyectos.
- Participación y Colaboración: Los estudiantes deben participar activamente en las discusiones en clase y colaborar de manera efectiva con sus compañeros.
Herramientas del Curso
- HTML y CSS: Lenguajes de marcado utilizados para estructurar y diseñar contenido en la web.
- Decargar el software 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.
- P5js: Biblioteca de JavaScript que simplifica la programación para artistas, diseñadores, educadores y principiantes.
- Wiki Casiopea API: Interfaz de programación de aplicaciones que permite la consulta y visualización de datos.
- ChatGPT: Modelo de lenguaje avanzado que puede ayudar a traducir pseudocódigo a código real.
Cronograma del Curso
Sesión 1: Viernes, 11 de Agosto
- Tema: Introducción al curso, Github y Markdown: Se introducirá Github, una plataforma de desarrollo colaborativo, y Markdown, un lenguaje de marcado ligero.
- Conceptos clave:
- Ejercicio de clase: Presentaciones de los participantes
Sesión 2: Viernes, 18 de Agosto
- Navegador Web y el inspector como herramienta de diseño
- Introducción a HTML y CSS
- Presentación del Editor P5js
- Creación de un repositorio en Github
- Publicación Web a partir de un repositorio
- Crear una Tarea (en Wiki Casiopea) y agregarla al curso
Enlaces Importantes
- HTML W3Schools: Tutorial completo y referencia para aprender HTML.
- Mozilla Developer Network - HTML: Documentación extensa y guías sobre HTML por Mozilla.
- CSS Zen Garden: Proyecto de diseño comunitario que expone la flexibilidad del CSS y de la importancia del uso de estándares Web.
- CSS-Tricks: Consejos, trucos y tutoriales para aprender CSS.
- W3Schools - CSS: Tutorial completo y referencia para aprender CSS.
- GitHub: Plataforma principal para el control de versiones y colaboración.
- Git: Sitio oficial de Git con documentación completa.
- Atlassian - Git Tutorials: Tutoriales detallados para aprender Git.
- p5.js: Biblioteca JavaScript para la programación creativa.
- p5.js Web Editor: Editor en línea para p5.js.
- Visual Studio Code: Editor de código fuente desarrollado por Microsoft.
- Editores para markdown: Joplin para PC y MacDown para Mac.
Ejercicio de clase: Creación y publicación de una página web básica utilizando Github Pages:
Sitios Web del Curso
Sesión 3: Viernes, 25 de Agosto
- Tema: Introducción a HTML y CSS: Se introducirán los conceptos básicos de HTML y CSS, los lenguajes de marcado utilizados para estructurar y diseñar contenido en la web.
- Conceptos clave:
- Revisión de la estructura básica de una página HTML
- Concepto del DOM (Document Object Model).
- Uso de atributos HTML como href, src, id, class, etc.
- Uso de selectores CSS, propiedades y valores
- Creación de una hoja de estilos CSS
- HTML
- CSS
- THE EXPERIMENTAL LAYOUT LAB the Jen Simmons, diseñadora y miembro del grupo de especificación de CSS. Canal de YT LayoutLand
- Ejercicio de clase: Avance en el diseño y estructura del sitio web personal utilizando una grilla.
Enlaces de la Clase
- Figma: Herramienta de prototipado
- Penpot: Herramienta de prototipado opensource
- Layout Land: Canal de Youtube de Jen Simmons, documentación en video sobre Grid CSS
- Sketch de la clase: Canvas como fondo de un sitio web
- Process Compendium
- Video Process Compendium
Tarea Nº2
- Agregar una foto al perfil de la Wiki (cuadrada, que aparezca su rostro, pueden usar el filtro mostrado en clases)
- Leer Process Compendium de Casey Reas, y experimentar en el editor de p5.js con Formas, Comportamientos y Elementos. Deben enlazar la url del editor en la tarea n° 2 y además agregar el sketch realizado a su sitio web de portafolio.
- Si utilizan Chat GPT, compartir los prompts/inputs que permitieron generar el código.
Tareas
EJEMPLO: Encargo 02 IE 2023 - (Nombrar encargo) / Nombre y Apellidos
Sesión 4: Viernes, 1 de Septiembre
- Tema: Introducción a P5js y herramientas de dibujo: Se introducirá P5js, una biblioteca de JavaScript que simplifica la programación para artistas, diseñadores, educadores y principiantes.
- Conceptos clave:
- Tema random: Shaders
- Identidad circular
- Creación de formas con beginShape y endShape
- Ciclos for simples y anidados
- Interacción con el mouse y el teclado
- Tarea:
- Crear una película con una función propia que se dibuje al hacer click (o tap), al modo de un timbre de goma
- Ideal es que este sketch quede hospedado en el mismo sitio que las otras tareas, que tenga un índice navegable al modo de un portafolio de trabajos del curso
- En el caso de usar chatGPT, incorporar en la tarea el prompt utilizado. Se debe subir la misma forma indicando Tarea Número 3:
Tarea N° 3
EJEMPLO: Encargo 02 IE 2023 - (Nombrar encargo) / Nombre y Apellidos
Sesión 5: Viernes, 8 de Septiembre
- Tema: Conceptos básicos de programación: funciones propias y recursividad Se introducen los conceptos de funciones propias y recursividad en la programación.
- Conceptos clave:
- Tema random: Live Coding, Hydra
- Declaración y uso de funciones
- Recursividad y casos base
- Funciones propias
- Recursividad
Enlaces de la Clase
Tarea Nº4
- Crear un sketch en el que experimenten con la recursión, considerando cualidades de elementos que se puedan encontrar en la naturaleza
- En caso de consultar a Chat GPT, recuerden publicar los prompt en la wiki de su tarea
- IMPORTANTE: Además de agregar la tarea a su sitio web, deben compartir la url en la tarea 4
Tareas
EJEMPLO: Encargo 04 IE 2023 - (Nombrar encargo) / Nombre y Apellidos
Sesión 6: Viernes, 15 de Septiembre
- Tema: Programación orientada a objetos
- Conceptos clave:
Enlaces de la Clase
Tarea Nº5
- Experimentar con objetos que cumplan con la condición de dibujar en el espacio. Es importante agregar un valor plástico a su composición, es decir, tener especial cuidado con el diseño visual
- En caso de consultar a Chat GPT, recuerden publicar los prompt en la wiki de su tarea
- IMPORTANTE: Además de agregar la tarea a su sitio web, deben compartir la url en la tarea 5
- Mejorar sitio web personal, plantear una manera de exponer sus trabajos haciendo énfasis en la modificación de CSS.
Tareas
EJEMPLO: Encargo 05 IE 2023 - (Nombrar encargo) / Nombre y Apellidos
Sesión 7: Viernes, 22 de Septiembre
- Tema random: memes
- Tema: Concepto de objetos en programación: Se introducirá el concepto de objetos en la programación.
- Conceptos clave:
- Creación y uso de objetos
- Propiedades y métodos de los objetos
- Objetos
- Ejercicio de clase: Creación de un campo de partículas moviéndose de forma coherente a partir de una función noise compartida. Enlace al sketch de ejemplo.
Enlaces de la Clase
- Tipos de blendMode
- Coolors
- Adobe Color
- Kroma: entrenador de IA para paletas de colores
Tarea Nº6
Explorar variaciones del campo de partículas moviéndose en base a la función noise explorando diferentes posibilidades plásticas de las partículas como por ejemplo:
- edad
- opacidad
- rotación y/o tamaño
- experimentar con diferentes posibilidades de
blendMode.
Tareas
Sesión 8: Viernes, 29 de Septiembre
- Tema: Color: Se introducirán los conceptos específicos de color en pantalla.
Enlaces de la clase
- Color en P5js
- Variables de Color
- Juego de color, para ver qué tan sensible soy...
- Ejemplos de manipulación de color:
- Un ejemplo simple donde se obtiene el color a partir de las coordenadas del mouse
- Un ejemplo complejo donde convierto las coordenadas del mouse al índice del arreglo de colores de los pixeles de una foto
- P5js y SVG
- Ejemplo de Exportación SVG utilizando la librería SVG vinculada desde index.html. Este ejemplo utiliza
noLoop(), se dibuja de una sola vez. - otro ejemplo de exportación con el loop de
draw()donde el dibujo acumula un número preciso de fotogramas.
Encargo
Ya comenzamos a hablar de los proyectos finales de este curso y acordamos centrarnos en el diseño del sitio personal o portafolio de cada uno, independiente de las exploraciones en P5js que sigan realizando a partir de las materias tratadas en clase.
- Respecto del diseño del sitio personal, pedimos construir un proyecto del curso y documentar las maquetas realizadas en Figma o similar. La próxima clase discutiremos acerca de cómo pasar de maquetas a diseño front-end. Discutiremos acerca de layouts.
- Respecto de las exploraciones A partir de la materia vista en clases se recomienda complejizar la exploración previa de objetos para construir una máquina de partículas coloreadas que pinten.
Tarea N°7
Sesión 9: Viernes, 6 de Octubre
Temas
- Layout en HTML con CSS. Ver CSS: Orden de las propiedades
- Diseño adaptable a pantallas
Sesión 10: Viernes, 13 de Octubre
Sesión 11: Viernes, 20 de Octubre
En esta revisión revisamos proyectos, abordamos temas de CSS y grilla. Vemos también la animación entre estados (para botones). Se trabaja en un ejemplo de canvas fijo como fondo
Sesión 12: Viernes, 10 de Noviembre
- Revisión de trabajos y cierre del curso
Sesión 13: Viernes, 17 de Noviembre
- Entrega final: Finalización del trabajo en los proyectos finales y exposición. Los estudiantes finalizarán sus proyectos y se preparará una presentación final.
Proyectos Finales
El proyecto final de curso es libre y puede tomar diversas formas y/o modalidades:
- La versión de base, sería abordar el proyecto como un portafolio Web personal. El el caso que se opte por esta modalidad, se deb considerar lo siguiente:
- El portafolio debe contener, al menos, las tareas y proyectos realizados en este curso
- Debe ser un diseño propio realizado en HTML y CSS (no una plantilla genérica disponible online). Se puede basar en un diseño existente pero debe necesariamente incorporar una propuesta personal
- Es deseable que el proyecto esté en un solo repositorio y que el diseño sea adaptable a diversos tipos de pantalla
- Exploración gráfica. Esta modalidad implica un avance sobre los temas tratados en clase (como recursividad, identidad circular, objetos, etc.) con foco en la expresión gráfica o plástica de un algoritmo gráfico (o máquina gráfica) que genere un resultado impreso (SVG) o interactivo (P5js). Los proyectos que tomen esta modalidad deberán exponerse en la entrada de la escuela (Zaguán) o en la portada de esta wiki.
Para cualquier caso elegido se deberá un nuevo proyecto con el campo Cursos Relacionados:Imagen Escrita 2023 donde se documentará el objetivo del proyecto, sus definiciones conceptuales, sus bocetos y avances en diseño así como los enlaces al código.
Aspectos a considerar en los proyectos
Aquí se describen los elementos esenciales que deben formar parte de cada uno de los proyectos, de acuerdo al consenso establecido en clases:
Portafolio
- Contenidos:
- Índice de trabajo: Presentación de cada ítem
- Información del autor/a
- Documentar proceso y decisiones de diseño
- Diseño:
- Layout / Diagramación:
- Consistencia: Existencia de un sistema visual
- Responsive (Adaptable a distintos formatos)
- Propuesta tipográfica y cromática
- Layout / Diagramación:
- Documentación del proyecto en la Wiki
- URL de enlace al repositorio en Github
Exploración gráfica
- Documentación y proceso (Wiki):
- Incluir observación (observación: croquis, concepto, desarollo del fundamento)
- Versiones e Iteraciones (Registrar cada iteración para ver el avance)
- Formato de salida
- Impresión: SVG (Alta resolución), Exposición en la escuela
- Exploración digital, Exposición en la página principal de la Wiki
- URL de enlace al repositorio en Github
