E1 · Puerta de control en el ensayo
10 minEjecuta "montar la página y pasar la puerta de control".
Listo cuando: PORTÃO: 4/4 OK y saída: 0.
Clase 8 · 20 min
Es hora de juntar todo en una página tuya. Partes de la plantilla del kit, cambias la foto y los textos por los de tu producto, rehaces las dos películas, pasas la puerta de control de cuatro verificaciones y publicas en GitHub Pages. El mismo verificador que corrió en tu máquina corre contra la URL pública: es él quien dice que está en línea.
Comenzar la clase
Objetivo: armar tu página a partir de la plantilla del kit, pasar la puerta de control 4 de 4 y publicar en GitHub Pages.
Las cuatro entregas que reúne la página. Haz clic en un nivel para ver el "listo cuando".
y reducir
3 ejercicios
Vertical liviano y película quieta con reducir movimiento.
Ver la claseClip de tu producto (generador o ensayo con clipe.sh) y cuadros a la tasa nativa, revisados por conferir-quadros.py.
Los cuadros en el motor del kit, con el contrato ?jump y __ready. Si le pediste la página a la skill a partir de kit/site, el mismo verificador la revisa.
Si tu película tiene más de un clip, encadénalos y ejecuta las puertas de control de site-movimento antes de montar.
Película vertical dentro del presupuesto y la página quieta para quien pidió menos movimiento.
Las clases 1, 4 y 5 entran cuando la página lo pida: la decisión por el peso, una escena Three.js y la película de la marca.
El ensayo cambia la lente de frente por la lente acostada; en el tuyo, cámbiala por la foto de tu producto y reescribe los textos del index.html.
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a8; rm -rf "$E"; mkdir -p "$E"
# tu sitio empieza como copia del modelo; cambia la foto del producto por la tuya (aquí: la lente acostada)
cp -r "$K/site" "$E/meu-site"; rm -f "$E/meu-site"/erro-*.html
bash "$K/scripts/clipe.sh" "$K/exemplos/lente2.jpg" "$E/h.mp4" 6 1.0 1.3
bash "$K/scripts/clipe.sh" "$K/exemplos/lente2.jpg" "$E/v.mp4" 6 1.0 1.3 1080x1920
bash "$K/scripts/quadros.sh" "$E/h.mp4" "$E/meu-site/frames" 1024 6
bash "$K/scripts/quadros.sh" "$E/v.mp4" "$E/meu-site/frames-v" 600 8
bash "$K/scripts/portao.sh" "$E/meu-site"; echo "saída: $?"#!/usr/bin/env bash
# portao.sh — o portão final da página: 4 conferências, uma por vez, sem modelo e sem serviço pago.
# 1. peso visitante mais pesado ≤ ORCAMENTO MB (padrão 6) e primeira pintura ≤ 0,5 MB
# 2. computador 1366×768: rolagem em 0 %, 50 % e 100 % com o quadro certo e tela pintada
# 3. celular 390×844 em pé: filme vertical (frames-v/), sem transbordo
# 4. reduzir com "reduzir movimento": o filme fica parado
# Uso: bash portao.sh <pasta-do-site> (ORCAMENTO=8 bash portao.sh … muda o teto)
set -uo pipefail
K=$(cd "$(dirname "$0")/.." && pwd)
SITE=$(cd "$1" && pwd)
T=$(mktemp -d); trap 'kill $S 2>/dev/null; rm -rf "$T"' EXIT
node "$K/scripts/servir.mjs" "$SITE" > "$T/url" & S=$!
until U=$(cat "$T/url" 2>/dev/null) && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
ok=0
python3 "$K/scripts/peso.py" "$SITE" --orcamento "${ORCAMENTO:-6}" --inicial 0.5 > "$T/1" && ok=$((ok+1)) && echo "1 peso: OK" || { echo "1 peso: FALHA"; grep -E "ACIMA" "$T/1"; }
for n in "2 computador:" "3 celular:--celular" "4 reduzir:--reduzir"; do
rot=${n%%:*}; op=${n#*:}
node "$K/scripts/verificar.mjs" "$U" $op > "$T/v" && ok=$((ok+1)) && echo "$rot: OK" || { echo "$rot: FALHA"; grep "^FALHA" "$T/v"; }
done
echo "PORTÃO: $ok/4 $([ $ok -eq 4 ] && echo OK || echo FALHOU)"
[ $ok -eq 4 ]h.mp4: 6,0 s · 24 fps · 1920×1080 v.mp4: 6,0 s · 24 fps · 1080×1920 QUADROS: 144 · 1024×576 · 2,2 MB · 24 fps QUADROS: 144 · 600×1066 · 3,5 MB · 24 fps 1 peso: OK 2 computador: OK 3 celular: OK 4 reduzir: OK PORTÃO: 4/4 OK saída: 0
La puerta de control ejecuta las cuatro revisiones una por vez y sale con 0 solo si las cuatro pasan.
Un repositorio público con la página en la raíz, GitHub Pages en la rama main. Después, el verificador contra la URL pública.
cd <carpeta-de-tu-sitio> git init -b main && git add . && git commit -m "mi página con película en el scroll" gh repo create <tu-usuario>/<nombre-del-repo> --public --source . --push gh api -X POST repos/<tu-usuario>/<nombre-del-repo>/pages -f 'source[branch]=main' -f 'source[path]=/'
K=~/projetos/formacao-cinema-ia-sites-v72/kit
curl -s -o /dev/null -w "%{http_code}\n" https://inematds.github.io/formacao-cinema-ia-sites-v72/kit/site/
node "$K/scripts/verificar.mjs" https://inematds.github.io/formacao-cinema-ia-sites-v72/kit/site/; echo "saída: $?"200 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
Esta es la página del kit publicada junto con el curso. Ejecuta el mismo bloque con la URL de tu página en GitHub Pages (tu usuario y el nombre del repositorio), unos minutos después del push.
Tu página, del modelo al aire.
Ejecuta "montar la página y pasar la puerta de control".
Listo cuando: PORTÃO: 4/4 OK y saída: 0.
Copia kit/site a una carpeta tuya, borra las copias erro-*.html, cambia la foto (clipe.sh en los dos formatos), rehaz los cuadros, reescribe los textos del index.html solo con hechos de tu producto y ejecuta la puerta de texto de la clase 6 y el portao.sh.
Listo cuando: La puerta de texto responde texto limpo y el portao.sh responde PORTÃO: 4/4 OK con saída: 0.
Publica con el bloque "publicar la carpeta en GitHub Pages" y ejecuta el verificador con tu URL.
Listo cuando: curl -s -o /dev/null -w "%{http_code}" [tu URL] responde 200 y el verificador responde OK: 3 de 3 posições con saída: 0.
Elige la fecha de inicio y cuánto tiempo tienes por semana.
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
El portao.sh dio "PORTÃO: 3/4 FALHOU" con "1 peso: FALHA". ¿Qué haces primero?
Pregunta 2 de 4
¿Por qué ejecutar el verificador también contra la URL pública?
Pregunta 3 de 4
¿Qué texto va en el index.html de tu página?
Pregunta 4 de 4
¿Cuál de estas NO es una de las cuatro verificaciones del portao.sh?
Elige una alternativa. La explicación aparece después de tu intento.