Trayecto de actividades#
Introducción#
El diseño generativo interactivo en tiempo real en web se refiere a la creación de contenido digital que se genera automáticamente y se adapta dinámicamente a la interacción del usuario en un entorno web. Este tipo de diseño utiliza algoritmos para producir resultados visuales o funcionales que cambian en respuesta a las acciones del usuario, proporcionando una experiencia única y personalizada cada vez que se interactúa con la aplicación.
Componentes clave#
Algoritmos generativos: programas que utilizan reglas o procesos para crear diseños automáticamente. Estos algoritmos pueden ser simples (como patrones repetitivos) o complejos (como sistemas de inteligencia artificial).
Interactividad: la capacidad del usuario de influir en el resultado generativo mediante su comportamiento o entradas. Esto puede incluir movimientos del mouse, toques en la pantalla, entradas de teclado, datos en tiempo real, etc.
Tiempo real: la generación y modificación del contenido ocurre instantáneamente en respuesta a las acciones del usuario, proporcionando feedback inmediato.
Web: la plataforma utilizada es el entorno web, lo que permite accesibilidad universal a través de navegadores sin necesidad de instalaciones adicionales.
Ejemplos#
Arte generativo: aplicaciones web que crean obras de arte únicas basadas en la interacción del usuario. Por ejemplo, un lienzo digital donde los trazos del usuario generan patrones complejos y cambiantes.
Música generativa: páginas web que generan música en tiempo real según las acciones del usuario, como mover el ratón, hacer clic, o incluso basadas en datos en vivo como el clima o el tráfico.
Visualizaciones de datos interactivas: dashboards que visualizan datos en tiempo real y permiten a los usuarios interactuar con los gráficos para explorar diferentes aspectos de la información.
Juegos web: juegos donde el entorno y los desafíos se generan dinámicamente en función de las decisiones del jugador.
Experiencias educativas: plataformas de aprendizaje que adaptan el contenido y las actividades en tiempo real según el progreso y las respuestas de los estudiantes.
Posibles Aplicaciones#
Entretenimiento: juegos y aplicaciones de arte donde cada experiencia es única debido a la generación dinámica de contenido.
Marketing: campañas interactivas que adaptan el contenido en tiempo real según las acciones y preferencias del usuario, aumentando el engagement.
Educación: herramientas que personalizan el aprendizaje adaptando los materiales y actividades según el desempeño del estudiante.
Visualización de datos: herramientas que permiten a los usuarios explorar grandes conjuntos de datos de manera interactiva, facilitando la toma de decisiones informada.
Salud y bienestar: aplicaciones que generan contenido motivacional o de relajación en tiempo real basadas en el estado emocional o físico del usuario.
Arte y cultura: instalaciones artísticas y museos virtuales que ofrecen experiencias personalizadas y en constante cambio según la interacción del visitante.
Herramientas y tecnologías#
Para implementar diseño generativo interactivo en tiempo real en web, se pueden usar diversas tecnologías, entre ellas:
p5.js: una biblioteca de JavaScript para crear gráficos y experiencias interactivas.
Three.js: una biblioteca para crear gráficos 3D en el navegador.
Node.js y WebSockets: para comunicación en tiempo real entre el servidor y el cliente.
API de sensores: para utilizar datos en tiempo real desde dispositivos como acelerómetros, GPS, etc.
Problema#
Creación de una experiencia interactiva generativa en tiempo real en la web.
Objetivo#
Diseñar y desarrollar una aplicación web interactiva que utilice principios de diseño generativo en tiempo real y se comunique con al menos dos dispositivos de cómputo externos para crear una experiencias o instalación interactiva que responda a la interacción del público y a cambios en el entorno físico.
Descripción del Proyecto#
La aplicación interactiva generativa será exhibida en un evento en vivo. La aplicación web deberá generar contenido dinámico que se modifique en tiempo real basándose en las interacciones de los usuarios y los datos recibidos de dos o más dispositivos de cómputo externos.
Requisitos del proyecto#
Utilizar tecnologías web como HTML, CSS, JavaScript, y librerías como p5.js, o Three.js para crear la interfaz y los gráficos generativos.
Implementar algoritmos generativos que produzcan contenido visual o sonoro dinámico.
Integración con dispositivos externos: conectar y comunicar la aplicación web con al menos dos dispositivos de cómputo externos que pueden leer y/o modificar el mundo físico. Los dispositivos pueden ser microcontroladores o teléfonos móviles.
Utilizar protocolos de comunicación adecuados (ASCII, binario, WebSockets) para intercambiar datos entre la aplicación web y los dispositivos.
Interacción en tiempo real: asegurar que la aplicación responda instantáneamente a las entradas de los usuarios y los datos recibidos de los dispositivos.
Implementar una interfaz de usuario que permita a los asistentes al evento interactuar fácilmente con la instalación.
Documentación y presentación#
Todo el proceso de investigación, conceptualización, diseño, desarrollo, pruebas y reflexiones lo realizarás en tu bitácora de aprendizaje. Al finalizar el proyecto, deberás presentar tu trabajo en una exposición en vivo.
Investigación 1#
Vas a comenzar explorando ejemplos de diseño generativo interactivo en tiempo real en la web. Te voy a dejar algunas preguntas guía para que investigues y compartas tus hallazgos en tu bitácora. Ten presente que puedes generar más preguntas a medida que avanzas en tu investigación, pero no olvides siempre comenzar con una pregunta. Te propondré dos actividades. La primera busca que explores de manera general el tema. En la segunda actividad, te propondré que profundices en un caso de estudio específico.
Recursos Guía#
Para comenzar tu investigación, te recomiendo revisar los siguientes recursos:
Referentes iniciales:
Referentes para seguir explorando:
Actividad 1#
¿Qué es el diseño generativo interactivo en tiempo real en la web?
¿Cuáles son las características clave de un diseño generativo interactivo?
¿Qué tecnologías se utilizan para implementar diseños generativos interactivos en la web?
¿Qué ejemplos de aplicaciones o proyectos de diseño generativo interactivo en tiempo real en la web puedes encontrar o podrían llegar a ser?
Actividad 2#
Selecciona un caso de estudio de diseño generativo interactivo en tiempo real en la web.
Describe el proyecto y sus características principales.
¿Qué tecnologías y herramientas se utilizaron en el proyecto o crees que podrían servir y por qué?
¿Cómo se logra la interactividad en el proyecto?
¿Qué impacto o valor agregado tiene la interactividad en la experiencia del usuario?
¿Qué aprendizajes puedes obtener de este caso de estudio para tu proyecto?
Investigación 2#
Actividad 1#
Lee de nuevo el enunciado del proyecto de curso.
Ahora analiza el marco que propone Patrik Hübner para diseñar sistemas de diseño generativos. Luego, vas a proponer 10 ejemplos de sistemas de diseño generativos que varían los inputs y los outputs. Estas ideas te servirán para inspirarte en la creación de tu proyecto:
Nota
Objetivo del proyecto
Diseñar y desarrollar una aplicación web interactiva que utilice principios de diseño generativo en tiempo real y se comunique con al menos dos dispositivos de cómputo externos para crear una experiencias o instalación interactiva que responda a la interacción del público y a cambios en el entorno físico.
Esta actividad la presentarás en la próxima sesión presencial para discutirla con tus compañeros y profesor. (presentación para la semana 3)
Actividad 2#
Selecciona tres casos de estudio de diseño generativo interactivo en tiempo real en la web que guarden relación con el proyecto.
Describe el proyecto y sus características principales.
¿Qué tecnologías y herramientas se utilizaron en el proyecto o crees que podrían servir y por qué?
¿Cómo se logra la interactividad en el proyecto?
¿Qué impacto o valor agregado tiene la interactividad en la experiencia del usuario?
¿Qué aprendizajes puedes obtener de este caso de estudio para tu proyecto?
Esta actividad la presentarás en la próxima sesión presencial para discutirla con tus compañeros y profesor. (presentación para la semana 4)
Investigación 3#
En este punto de tu proceso de investigación, ya has explorado los conceptos fundamentales del diseño generativo interactivo en tiempo real en la web y has buscado inspiración en casos de estudio relevantes. Ahora, es momento de profundizar un poco en las herramientas y tecnologías que podrías utilizar.
Actividad 1#
Vas realizar los tutoriales que propone Kirell Benzi en decode.gl. Específicamente, la playlist Introduction to Cables.gl and Javascript coding.
Para la sesión presecial presentarás y explicarás UNA aplicación hecha por ti donde explores el marco: INPUT-PROCESS-OUTPUT propuesto por Patrik Hübner que tenga relación con el proyecto de curso. Mira, ten presente, que aún no es momento de tener el concepto definitivo de tu proyecto, recuerda que estás explorando, pero sí es importante que comiences a experimentar con las herramientas y tecnologías que podrías utilizar.
Advertencia
NO USAREMOS LA VERSIÓN STANDALONE
Ten cuidado. Recientemente se lanzón la versión standlone de cables.gl. En este curso exploraremos la versión web.
Esta actividad la presentarás en la próxima sesión presencial para discutirla con tus compañeros y profesor (presentación para la semana 5)
Actividad 2#
Esta semana continuarás con el tutorial de la actividad 1.
Para la sesión presencial vas a desplegar una aplicación cables.gl en GitHub pages:
De nuevo, usa el marco INPUT-PROCESS-OUTPUT. Pero la novedad de esta aplicación es que explorarás todos los inputs y outputs que puedas con tu celular. De todas maneras no olvides que estamos sujetos a las limitaciones de seguridad de los navegadores móviles.
Recuerda que la aplicación debe ser interactiva y generativa.
La aplicación debe estar relacionada de alguna manera con el proyecto de curso, pero te insisto, aunque todavía no tengas el concepto, la idea es que la aplicación te ayude a explorar posibilidades para un evento en vivo.
Esta actividad la presentarás en la próxima sesión presencial para discutirla con tus compañeros y profesor (presentación para la semana 6)
Investigación 4#
En este punto del proceso de nuestro curso proyecto hemos llegado a la última etapa de investigación. En esta etapa, vas a proponer un concepto de solución. Ten presente que este concepto puede ir evolucionando, pero la idea es que te comprometas desde ahora con este concepto y lo desarrolles hasta el final del curso.
Luego de esta última fase, que comienzas hoy, y durará 2 semanas, comenzarás con la fase de prototipado. En esta fase, vas a desarrollar 4 prototipos de tu concepto de solución. Cada prototipo debe explorar diferentes aspectos de tu concepto, como la interactividad, los algoritmos generativos, la comunicación con dispositivos externos, etc.
Actividad 1#
Advertencia
Esta actividad es para la semana 7
Presentarás esta actividad como un pitch de tu proyecto. Prepara una presentación para que dure 10 minutos. Ni más ni menos.
Lee de nuevo el enunciado del proyecto de curso.
Revisa los resultados de tus investigaciones anteriores.
Propón un concepto de solución para el proyecto de curso. Este concepto debe incluir una descripción general de la aplicación, los algoritmos generativos que utilizarás, la interacción con los dispositivos externos, y la experiencia que quieres crear para los usuarios.
Presenta el diseño de la experiencia, incluyendo la narrativa, las funcionalidades clave, los beneficios para el cliente.
Describe cómo planeas implementar este concepto, qué tecnologías y herramientas utilizarás, y cuál será el proceso de desarrollo.
Qué esperas lograr con cada uno de los cuatro prototipos que desarrollarás en la siguiente fase.
Esta actividad la presentarás en la próxima sesión presencial para discutirla con tus compañeros y profesor (presentación para la semana 7)
Actividad 2#
Advertencia
Esta actividad es para la semana 8
Presentarás esta actividad como un pitch de tu proyecto. Nota que en el formato de hablo de cliente y de objetivos. En este caso, el cliente son los usuarios de tu experiencia y los objetivos son los del proyecto de curso.
Prepara un pitch de 10 minutos para presentar el diseño de la experiencia. La presentación debe tener estos puntos:
Introducción
Contexto: explica brevemente la necesidad del proyecto o problema que se va a resolver. Resalta la importancia de la interacción en tiempo real en la web y cómo esto beneficia al cliente.
Objetivo: menciona claramente el objetivo principal de la experiencia interactiva que vas a desarrollar.
Concepto creativo
Visión: describe la idea central de la experiencia. ¿Qué sensaciones o emociones buscas generar en los usuarios? ¿Cuál es el mensaje clave?
Narrativa o historia: presenta una breve narrativa o flujo de la experiencia. Explica cómo los usuarios interactuarán y qué acciones podrán realizar.
Funcionalidades clave
Interactividad: detalla las principales funcionalidades interactivas. ¿Cómo interactúan los usuarios con la web en tiempo real? ¿Qué tipo de input reciben y qué tipo de respuesta inmediata se les ofrece (output)?
Tecnología: menciona las tecnologías que se van a utilizar (p5.js, cables, otra?) y cómo estas permiten lograr la experiencia en tiempo real.
Ejemplo de flujo: si es posible, muestra un flujo de usuario con un ejemplo o prototipo rápido para que el cliente vea cómo funcionará la interacción.
Beneficios para el cliente
Impacto en el usuario final y resultados esperados.
Cronograma y recursos
Fases del proyecto: presenta el alcance de cada uno de los 4 prototipos.
Definición de tareas: describe las tareas clave que se deben realizar en cada prototipo.
Cierre
Resumen: reafirma los puntos clave de la propuesta, destacando cómo tu diseño cumple con los objetivos del cliente.
Esta actividad la presentarás en la próxima sesión presencial para discutirla con tus compañeros y profesor (presentación para la semana 8)
Prototipo 1#
Actividad 1#
Vamos a analizar juntos el caso de estudio de una aplicación que permite comunicar dos clientes en tiempo real mediante el uso de websockets.
(Semana 9)
Actividad 2#
Cada estudiante presenta los avances con su primer prototipo.
(Semana 10)
Prototipo 2#
Actividad 1#
Conversación ágil acerca de los avances y dificultades con el segundo prototipo.
Revisión de casos de estudio.
Revisión de actividades pendientes o sin entregar.
(Semana 11)
Actividad 2#
Cada estudiante presenta los avances con su primer prototipo.
(Semana 12)
Prototipo 3#
Actividad 1#
Conversación ágil acerca de los avances y dificultades con el tercer prototipo.
Revisión de casos de estudio.
Revisión de actividades pendientes o sin entregar.
(Semana 13)
Actividad 2#
Cada estudiante presenta los avances de su tercer prototipo.
(Semana 14)
Prototipo 4#
Actividad 1#
Conversación ágil acerca de los avances y dificultades con el cuarto prototipo.
Revisión de casos de estudio.
Revisión de actividades pendientes o sin entregar.
(Semana 15)
Actividad 2#
Cada estudiante presenta los avances de su cuarto prototipo.
(Semana 16)