E1 · Portão no ensaio
10 minRode "montar a página e passar no portão".
Pronto quando: PORTÃO: 4/4 OK e saída: 0.
Aula 8 · 20 min
Hora de juntar tudo numa página sua. Você parte do modelo do kit, troca a foto e os textos pelos do seu produto, refaz os dois filmes, passa no portão de quatro conferências e publica no GitHub Pages. O mesmo verificador que rodou na sua máquina roda contra a URL pública: é ele que diz que está no ar.
Começar a aula
Objetivo: montar a sua página a partir do modelo do kit, passar no portão 4 de 4 e publicar no GitHub Pages.
As quatro entregas que a página junta. Clique num degrau para ver o "pronto quando".
Clipe do seu produto (gerador ou ensaio com clipe.sh) e quadros na taxa nativa, conferidos pelo conferir-quadros.py.
Os quadros no motor do kit, com o contrato ?jump e __ready. Se pediu a página à skill a partir de kit/site, o mesmo verificador confere.
Se o seu filme tem mais de um clipe, encadeie e rode os portões do site-movimento antes de montar.
Filme vertical no orçamento e a página parada para quem pediu menos movimento.
Aulas 1, 4 e 5 entram quando a página pedir: a decisão pelo peso, uma cena Three.js e o filme da marca.
O ensaio troca a lente de frente pela lente deitada; no seu, troque pela foto do seu produto e reescreva os textos do index.html.
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a8; rm -rf "$E"; mkdir -p "$E"
# o seu site começa como cópia do modelo; troque a foto do produto pela sua (aqui: a lente deitada)
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
O portão roda as quatro conferências uma por vez e sai com 0 só se as quatro passarem.
Um repositório público com a página na raiz, GitHub Pages na branch main. Depois, o verificador contra a URL pública.
cd <pasta-do-seu-site> git init -b main && git add . && git commit -m "minha página com filme na rolagem" gh repo create <seu-usuario>/<nome-do-repo> --public --source . --push gh api -X POST repos/<seu-usuario>/<nome-do-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 é a página do kit publicada junto com o curso. Rode o mesmo bloco com a URL da sua página, que costuma ficar em https://[seu-usuario].github.io/[nome-do-repo]/ alguns minutos depois do push.
A sua página, do modelo ao ar.
Rode "montar a página e passar no portão".
Pronto quando: PORTÃO: 4/4 OK e saída: 0.
Copie kit/site para uma pasta sua, apague as cópias erro-*.html, troque a foto (clipe.sh nos dois formatos), refaça os quadros, reescreva os textos do index.html só com fatos do seu produto e rode o portão de texto da aula 6 e o portao.sh.
Pronto quando: O portão de texto responde texto limpo e o portao.sh responde PORTÃO: 4/4 OK com saída: 0.
Publique pelo bloco "publicar a pasta no GitHub Pages" e rode o verificador com a sua URL.
Pronto quando: curl -s -o /dev/null -w "%{http_code}" [sua URL] responde 200 e o verificador responde OK: 3 de 3 posições com saída: 0.
Escolha a data de início e quanto tempo você tem por semana.
A explicação aparece depois da sua resposta.
Pergunta 1 de 4
O portao.sh deu "PORTÃO: 3/4 FALHOU" com "1 peso: FALHA". O que fazer primeiro?
Pergunta 2 de 4
Por que rodar o verificador também contra a URL pública?
Pergunta 3 de 4
Que texto vai no index.html da sua página?
Pergunta 4 de 4
Qual destes NÃO é uma das quatro conferências do portao.sh?
Escolha uma alternativa. A explicação aparece depois da sua tentativa.