Interacción y
Render Web
Avanzado
En 16 semanas van a poder construir esto. Más importante: van a entender por qué funciona, y van a poder decidir cuándo no hacerlo así.
Esto es lo que hay del otro lado
No expliquen todavía cómo están hechos. Solo véanlos.
Igloo Inc
Narrativa 3D con scroll. Dirección de arte y render en el mismo plano.
igloo.inc REF 02Active Theory
El techo profesional. Experiencias para marcas globales, casi todo WebGL.
activetheory.net REF 03Bruno Simon
Un portafolio que se maneja en coche. Three.js puro — esto es alcanzable.
bruno-simon.com EXTRAAT Lab
El laboratorio: experimentos sueltos, sin cliente. Así se ve investigar.
atlab.ioCómo vamos a trabajar
Hay 10 minutos de tolerancia. Pasados los 10, arrancamos — sin importar cuántos estemos en el salón.
Sí van a existir retardos y cuentan; la siguiente sesión les explico exactamente cómo funcionan. Por ahora quédense con lo importante: la clase empieza a tiempo.
Si acordamos 10, 15 o 20 minutos, son exactamente esos. Reanudamos puntual, otra vez sin importar cuántos hayan vuelto.
Esta clase dura 4 horas. La puntualidad en los cortes es lo que hace que el tiempo alcance para todo.
Todo lo que entreguen debe correr a 60 fps en la laptop más lenta del grupo. Esa máquina es nuestro target oficial.
Tener buena laptop no da ventaja en la calificación. Da la responsabilidad de probar en otra antes de entregar.
Formato I like / I wish / What if. Se le habla al trabajo, no a la persona.
Quien presenta escucha y anota; no se defiende durante la ronda. Participar en la crítica de otros también califica: el silencio no es neutral.
Aquí hay gente con experiencia laboral y gente que apenas vio JavaScript el semestre pasado. Los ejercicios tienen piso y techo justo por eso: todos entregan lo mismo, cada quien lo lleva tan lejos como pueda. El nivel del que partes no cambia el trato que recibes.
La defensa oral vale más que el código
Pueden llegar con código que no escribieron. No pueden llegar con decisiones que no tomaron.
Herramientas de IA
Están permitidas. No les voy a pedir que finjan que no existen. Están reguladas, porque el criterio no se delega.
- Struggle first. 30 minutos sin IA ante un problema nuevo. No es castigo: es donde aprenden a formular la pregunta.
- Bitácora obligatoria. Qué pediste, qué te dio, y qué rechazaste y por qué. Esa última columna es la que califica.
- Ventanas hands-on-keys. Momentos de clase sin IA, anunciados al empezar.
Entregar código que no pueden explicar. Eso no es "usar IA" — es no haber hecho el trabajo. Se detecta en la defensa, siempre.
Alejandro Alvarado
aka "Andrew"Clientes
Nadie construye un sitio solo
Fíjense en cómo está escrito cada uno: no dice "hice el sitio de Spotify". Dice qué componente exacto construí. Así se acredita el trabajo real en producción, y así van a tener que hablar de lo suyo en la defensa.
Google News — 20 Years
Sección de Trivia completa: UI en WebGL, animaciones de fondo e interacción, WCAG y responsive a móvil.
Spotify — Playlist in a Bottle
Integración WebGL con HTML/CSS accesible (WCAG), interacción por gesto y sonido, y level-of-detail por dispositivo.
20 Years of Xbox Museum
Timeline UI y navegación de hitos. Las microinteracciones son shaders GLSL, no CSS — por eso responden a frame rate.
Sundance — New Frontier
UI de overlay 2D y componentes 3D dentro del mundo: pantallas alimentadas por CMS y media que responde a la proximidad. Desktop, móvil y Oculus Quest.
Hulu — Made by Her: Monuments
Un solo entorno 3D reutilizado para web y VR en vez de dos proyectos. Hotspots que mueven la cámara en pantalla, y a los que caminas en VR.
Spotify — All-RapCaviar
Animaciones y transiciones como shaders WebGL bajo gesto táctil, leaderboard en vivo y share cards generativas. Cero premios, la mejor historia de ingeniería.
Tres razones
Animación e interactividad
Disfruto la experiencia que se genera cuando lo que ves o escuchas reacciona a ti — a tus movimientos, a tu data. Para mí ahí hay cierta magia, y amplifica nuestras sensaciones.
Práctica y experimentación
La web es un medio entre muchos, pero funciona parecido a otras tecnologías que comparten el renderizado en tiempo real. Y es flexible: con lo mismo puedes hacer instalaciones y proyecciones de gran formato.
Alcance y accesibilidad
Sigue siendo una de las plataformas donde llegas a las personas con menos fricción. No hay que descargar nada, no compras acceso, y se adapta al dispositivo que tengas: smartphone, laptop, PC, visor de realidad virtual.
Esto no vale calificación
No lo voy a compartir con nadie. Lo uso para diseñar bien el curso y para armar los equipos de trabajo.
Escribir "no sé" es una respuesta válida y útil. Si adivinan, me dan información falsa y diseño mal el semestre. Sin buscar en internet, sin IA.
- Parte A — Diez preguntas conceptuales. No hay una sola respuesta correcta; me interesa cómo piensan, no la definición de libro.
- Parte B — Autoevaluación honesta del 1 al 5 en HTML, CSS, JS, terminal, git, canvas, 3D e IA.
Cinco niveles. Lleguen hasta donde lleguen.
No se espera que terminen los cinco. Si llegan al nivel 2, está perfectamente bien. Si llegan al 5, también.
Dibuja un círculo en el centro del canvas.
Haz que ese círculo se mueva horizontalmente y rebote en los bordes.
Crea otro círculo que siga al mouse con suavidad — no pegado al puntero.
Haz que la velocidad de ambos no dependa de los fps de la máquina.
500 partículas independientes, direcciones aleatorias, rebotando, a 60 fps.
Descarguen el archivo y ábranlo en el navegador. Las instrucciones también están en la consola — F12.
Descanso
Reanudamos puntual, sin importar cuántos hayan vuelto. Lo acordamos hace un rato.
Node, npm y Vite
Al terminar tienen un proyecto corriendo con dev server, versionado en git y publicado en GitHub. Ese es el esqueleto de todo lo que haremos este semestre.
- Node LTS — verificar con
node -vynpm -v - npm create vite@latest — plantilla Vanilla, JavaScript
- npm install y npm run dev
- git init, primer commit, push a un repo nuevo
node_modules/ nunca se sube a git. Se reconstruye con npm install desde el package.json. Si la suben, el repo pesa 300 MB y nadie lo puede clonar.
Quien ya tenga Node instalado o haya usado npm: no avanzan solos. Se sientan con alguien que no lo tenga. Explicar es la forma más rápida de consolidar lo que ya saben.
Su primera línea de código es un render loop
No es casualidad. Todo lo que hagamos este semestre — 2D, 3D, shaders, React — corre sobre esto. Es el latido.
Y sí: el fondo de la primera pantalla de hoy es exactamente esto. Vuelvan a subir cuando terminen.
Un círculo que rebota en los bordes, con movimiento independiente del framerate. Debe verse igual de rápido en su laptop que en la más lenta del salón.
Un segundo círculo que sigue al mouse con easing — usando exponential decay, no un factor fijo por frame.
De un círculo a N partículas, con N fácil de cambiar.
Contador de fps visible en pantalla.
Encuentra el N máximo que sostiene 60 fps en la máquina target y documéntalo en el README.
Sin IA. Después, permitida con bitácora. A las 12:10 cerramos con crítica: tres pantallas conectadas y el formato I like / I wish / What if.
Para el jueves 13
- Terminar Latido hasta donde lleguen, con al menos el piso completo.
- Push al repo con README: qué hiciste, qué N máximo sostuviste, qué te costó trabajo.
- Primera entrada de bitácora de IA — aunque sea "no usé".
- Respaldo en Brightspace.
Traigan la laptop cargada y con el entorno funcionando. Si algo se rompió en casa, escríbanme antes del miércoles — no el jueves a las 8:30.