E1 · Instalar
10 minClona el curso y ejecuta el bloque "instalar o kit".
Listo cuando: La salida muestra npm ci: 0, chromium: 0 y Version 1.64.0.
Clase 1 · 15 min
Qué es un sitio cinematográfico y cuándo vale su peso
Un sitio cinematográfico parece una película que avanza con el scroll. Por debajo, no hay 3D ni video reproduciéndose: hay cuadros de un clip dibujados en un canvas, uno por posición del scroll. Eso pesa. En esta clase corres la página de ejemplo del kit, mides cuánto pesa para cada visitante y decides, con un número, si tu producto pide una.
Comenzar la clase
En esta clase vas a
- 1El camino clip → cuadros → canvas → scroll, y por qué no es un video reproduciéndose
- 2Instalar el kit y ver la página de ejemplo pasar el verificador
- 3Medir el peso por visitante: computador, celular y primer pintado
- 4Decidir con un presupuesto en MB, antes de gastar en un generador
Objetivo: correr el sitio de ejemplo del kit, medir su peso y decidir, con un presupuesto en MB, si tu producto pide uno.
01La película que avanza con el scroll
Haz clic en cada etapa. La vuelta es la pregunta que lo decide todo: ¿cuánto pesa esto?
Haz clic en cada bloque del diagrama para ver qué hace.
El efecto "3D" viene del clip, no de un motor 3D. La profundidad dibujada en código es la clase 4.
02Cuándo vale la pena y cuándo no
La película cuesta ancho de banda del visitante y tiempo tuyo. Se paga en pocos casos.
1. Vale la pena
Producto con forma, material o mecanismo que se entiende mejor en movimiento: un lente, un reloj, una pieza de máquina, un plato.
Página de lanzamiento, que el visitante abre una vez y mira con calma.
2. No vale la pena
Página que la persona lee con prisa: servicio, precio, artículo, panel. La película retrasa lo que vino a buscar.
Cuando el producto no cambia nada al girar o acercarse: un texto bien escrito vende mejor.
3. Sin generador
Las dos skills de INEMA (clases 3 y 6) tienen un camino solo con código: formas, luz y texto animados por el scroll, sin generar video. Cero créditos.
Este curso entero funciona así: los clips de ensayo salen de una foto con ffmpeg.
4. Con generador
Los clips de tu generador se vuelven cuadros. Cuánto cuesta depende del generador: el piloto de site-movimento gastó 300 créditos de Kling 3.0 (kling-video-v3_0) en 720p (README del proyecto, 18/10/2026).
Qué generador y qué versión: curso 1 de la formación.
03Instalar el kit
El kit está dentro del repositorio de este curso. Clónalo una vez e instálalo; usa Node 20.10+, ffmpeg y el Chromium de Playwright.
Una vez · clonar el curso
cd ~/projetos && git clone https://github.com/inematds/formacao-cinema-ia-sites-v72
Terminal · instalar el kit
cd ~/projetos/formacao-cinema-ia-sites-v72/kit
npm ci --no-audit --no-fund > ${TMPDIR:-/tmp}/npm-sites.log 2>&1; echo "npm ci: $?"
npx playwright install chromium > ${TMPDIR:-/tmp}/pw-sites.log 2>&1; echo "chromium: $?"
npx playwright --version
npm ls --depth=0 | tail -2
ffmpeg -version | head -1 | cut -d' ' -f1-3Ejemplo del repositorio
npm ci: 0 chromium: 0 Version 1.64.0 └── three@0.186.1 ffmpeg version 6.1.1-3ubuntu5
Playwright queda fijo en 1.64.0 y three en 0.186.1 en el package.json del kit: lo que instalas es lo que fue probado.
04Ver la página de ejemplo funcionando
El servidor del kit toma un puerto libre y escribe la URL en un archivo; el bucle espera a que la URL responda antes de probar.
Terminal · servir y verificar la página del kit
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a1; rm -rf "$E"; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/verificar.mjs" "$U"; echo "saída: $?"
kill $SEjemplo del repositorio
Chromium 156.0.8078.4 (Playwright 1.64.0) · 1366×768 quadros: 144 (frames/) rolagem 0% → quadro 0 · tela pintada rolagem 50% → quadro 72 · tela pintada rolagem 100% → quadro 143 · tela pintada transbordo horizontal: não OK: 3 de 3 posições saída: 0
El verificador abre la página en tres puntos del scroll y comprueba el cuadro y la pantalla. Para mirar con tus propios ojos, ejecuta solo la 1.ª línea del servidor y abre la URL en el navegador.
05Medir el peso por visitante
Cada visitante descarga una sola película: la horizontal en el computador o la vertical en el celular en vertical.
Terminal · peso con presupuesto de 6 MB
K=~/projetos/formacao-cinema-ia-sites-v72/kit python3 "$K/scripts/peso.py" "$K/site" --orcamento 6 --inicial 0.5; echo "saída: $?"
Terminal · error común: presupuesto de 2 MB
K=~/projetos/formacao-cinema-ia-sites-v72/kit
python3 "$K/scripts/peso.py" "$K/site" --orcamento 2 | tail -1; echo "saída: ${PIPESTATUS[0]}"Ejemplo del repositorio
PESO: quadros-v 3,49 · quadros 1,50 · js 0,02 · html/css 0,01 (MB) computador: tudo 1,54 MB · primeira pintura 0,05 MB · rascunho (1 em 8) 0,22 MB celular: tudo 3,52 MB · primeira pintura 0,06 MB · rascunho (1 em 8) 0,47 MB primeira pintura 0,06 MB · teto 0,5 MB: DENTRO visitante mais pesado 3,52 MB · orçamento 6,0 MB: DENTRO do orçamento saída: 0
El primer pintado es un techo de lo que llega antes del primer cuadro: cuenta todo archivo de la carpeta que no es un cuadro. El celular pesa más que el computador aquí: la clase 7 lo corrige.
visitante mais pesado 3,52 MB · orçamento 2,0 MB: ACIMA do orçamento saída: 1
Con un presupuesto de 2 MB, el celular pasa del techo y el script sale con 1. Es ese código el que lee una puerta de control automática.
06Práctica
Del kit instalado a tu decisión escrita.
E2 · Ver funcionando
5 minEjecuta el bloque "servir e verificar a página do kit". Después abre la URL en tu navegador y haz scroll en la página.
Listo cuando: OK: 3 de 3 posições y saída: 0.
E3 · Tu decisión con número
10 minElige un producto tuyo. En un archivo decisao.txt, escribe tres líneas: Produto: …, Visitante mais pesado: … MB (el número del kit, o el tuyo si ya tienes cuadros) y Decisão: … (película, solo código o página común, con el motivo).
Listo cuando: grep -c -E "^(Produto|Visitante mais pesado|Decisão):" decisao.txt responde 3.
07Prueba de la clase
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
¿Por qué la película del scroll se dibuja cuadro a cuadro en un canvas, y no con un video y currentTime?
Correcto
La búsqueda (seek) en el video tiene retraso y el resultado se traba. El canvas dibuja una imagen ya decodificada. El precio es el peso: una imagen por cuadro.No es esa
La búsqueda (seek) en el video tiene retraso y el resultado se traba. El canvas dibuja una imagen ya decodificada. El precio es el peso: una imagen por cuadro.Repasar: La película que avanza con el scrollPregunta 2 de 4
peso.py dice "computador 1,54 MB · celular 3,52 MB". ¿Qué número va al presupuesto?
Correcto
Cada visitante descarga una sola película. El presupuesto vale para quien paga más, aquí el celular. Sumar los dos cuenta a un visitante que no existe.No es esa
Cada visitante descarga una sola película. El presupuesto vale para quien paga más, aquí el celular. Sumar los dos cuenta a un visitante que no existe.Repasar: Instalar el kitPregunta 3 de 4
¿Para cuál de estas páginas la película en el scroll tiene menos probabilidad de valer el peso?
Correcto
Quien abre una tabla de precios quiere el número, rápido. La película retrasa lo que la persona vino a buscar. Un producto con forma y material es el caso clásico.No es esa
Quien abre una tabla de precios quiere el número, rápido. La película retrasa lo que la persona vino a buscar. Un producto con forma y material es el caso clásico.Repasar: Cuándo vale la pena y cuándo noPregunta 4 de 4
¿Qué es el "primer pintado" en peso.py?
Correcto
Es un peso, no un tiempo: lo que necesita llegar para que la pantalla deje de estar negra. Tiempo de carga y Core Web Vitals son de la Formación inemaSEO.No es esa
Es un peso, no un tiempo: lo que necesita llegar para que la pantalla deje de estar negra. Tiempo de carga y Core Web Vitals son de la Formación inemaSEO.Repasar: Instalar el kitPrueba terminada
Acertaste {a} de {n}. Si aciertas todas, la clase se marca como completada.Elige una alternativa. La explicación aparece después de tu intento.
08En tres frases
MecánicaEl clip se vuelve cuadros; el scroll elige el cuadro; el canvas dibuja.
CostoPeso por visitante: computadora, celular y primer pintado.
DecisiónCon un presupuesto en MB, antes de gastar en un generador.