Sites cinematográficos|INEMA.CLUB-PRO

Aula 8 · 20 min

Seu site: uma página de produto com rolagem cinematográfica publicada

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
Mesa de trabalho à noite com um monitor grande mostrando uma página de produto desfocada, um celular, um tablet e uma caneca.

Nesta aula você vai

  1. 1O modelo do kit como ponto de partida, com a sua foto e o seu texto
  2. 2O portão 4/4: peso, computador, celular e reduzir movimento
  3. 3Publicar no GitHub Pages e verificar a URL pública
  4. 4Seu plano com datas e o mapa da formação inteira

Objetivo: montar a sua página a partir do modelo do kit, passar no portão 4 de 4 e publicar no GitHub Pages.

01O mapa da sua página

As quatro entregas que a página junta. Clique num degrau para ver o "pronto quando".

Passo 1Quadros

seu clipe

3 exercícios

Pasta de quadros conferida, horizontal e vertical.

Ver a aula
Passo 2Rolagem

contrato

3 exercícios

Página que passa no verificador nos três pontos.

Ver a aula
Passo 3Filme

opcional

4 exercícios

Filme encadeado com continuidade PASSA.

Ver a aula
Passo 4Celular

e reduzir

3 exercícios

Vertical leve e filme parado com reduzir movimento.

Ver a aula
Ao final do cursoUma página de produto sua, com filme na rolagem, publicada e verificada na URL pública.
8 aulas
Clique num exercício para ver o que fazer e o "pronto quando".
  1. 1/4

    Quadros

    Clipe do seu produto (gerador ou ensaio com clipe.sh) e quadros na taxa nativa, conferidos pelo conferir-quadros.py.

  2. 2/4

    Rolagem

    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.

  3. 3/4

    Filme

    Se o seu filme tem mais de um clipe, encadeie e rode os portões do site-movimento antes de montar.

  4. 4/4

    Celular

    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.

02Do modelo à sua página, com o portão

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.

Terminal · montar a página e passar no portão
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: $?"
Arquivo · kit/scripts/portao.sh
#!/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 ]
Exemplo do repositório
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.

03Publicar e verificar no ar

Um repositório público com a página na raiz, GitHub Pages na branch main. Depois, o verificador contra a URL pública.

Uma vez · publicar a pasta no GitHub Pages
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]=/'
Terminal · verificar uma página publicada
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: $?"
Exemplo do repositório
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.

04Prática

A sua página, do modelo ao ar.

E1 · Portão no ensaio

10 min

Rode "montar a página e passar no portão".

Pronto quando: PORTÃO: 4/4 OK e saída: 0.

E2 · A sua página

60 min

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.

E3 · No ar

15 min

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.

05Gere o seu plano com datas

Escolha a data de início e quanto tempo você tem por semana.

06Teste da aula

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?

07Em três frases

ModeloParta do kit; troque foto, quadros e texto.
PortãoPeso, computador, celular e reduzir: 4/4 antes de publicar.
No arGitHub Pages e o mesmo verificador na URL pública.

Fim da Formação Cinema com IA: os 6 cursos

Aula anteriorVoltar ao início do curso