Ficha 01 · Formatos e otimização · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Escolher formato
Comparar Lottie/GIF/vídeo
Otimizar peso
Aplicar boas práticas web

Parte I · Formatos

Exercício 1 · Codec/contentor (15 pts)

Indica o formato adequado:

a) Publicar uma animação curta no YouTube. ___

b) Microanimação de UI num site (escalável, leve). ___

c) Mestre/arquivo de alta qualidade. ___

d) Animação curta para WhatsApp, sem som. ___

a) MP4 H.264 (ou H.265), 1080p/4K, AAC. b) Lottie (JSON) — vetorial, leve, controlável por código. c) ProRes / DNxHR — qualidade alta, pouca compressão. d) MP4 H.264 curto ou WebP animado (mais leve que GIF).

Exercício 2 · GIF vs Lottie/WebP (10 pts)

Porque é, em geral, má ideia usar GIF para uma microanimação num site moderno?

GIF é pesado (limite de 256 cores, sem alfa real, compressão fraca) e não vetorial. Para o mesmo resultado visual, Lottie (vetorial, escalável, controlável por código) ou WebP animado dão peso muito menor e melhor qualidade. GIF só faz sentido por compatibilidade legada/email (e mesmo aí WebP é melhor onde for suportado).

Parte II · Otimização vídeo

Exercício 3 · Parâmetros (15 pts)

Para uma animação de 30 s para YouTube em 1080p:

a) Que codec e contentor recomendas? (5 pts)

b) Que cuidado com o fps ao exportar? (5 pts)

c) O que é codificação 2-pass e por que ajuda? (5 pts)

a) MP4 com H.264 (ou H.265 se queres ficheiro mais pequeno) + áudio AAC.

b) Manter o fps do projeto ao exportar, e constante (não converter de 30 para 25 fps a meio nem misturar fps — causa juddering/artefactos).

c) 2-pass = o codificador faz uma primeira passagem a analisar o vídeo e uma segunda a codificar com bitrate adaptado a cada parte (mais bits onde há movimento, menos onde há áreas planas). Resultado: melhor relação qualidade/peso para o mesmo bitrate-alvo.

Exercício 4 · Loudness (5 pts)

Que alvo de loudness usar e porquê?

~ −14 LUFS integrados (true peak ≤ −1 dBTP) para YouTube/streaming. As plataformas normalizam o loudness; entregar mais alto faz com que a plataforma baixe o áudio, e esmagar o som num limiter prejudica a dinâmica sem ganhar volume real.

Parte III · Lottie

Exercício 5 · Vantagens (10 pts)

Indica 2 vantagens do Lottie face a um MP4 para uma microinteração de site.

Muito mais leve (KB vs MB) e vetorial — escala perfeitamente em qualquer densidade.
Controlável por código — play/pause/segmento, mudar cores, reagir a estado (hover, clique), respeitar prefers-reduced-motion. Um MP4 toca e pronto.

(Também: alfa nativo, animação a 60 fps suave sem peso de codec.)

Exercício 6 · Limitações (10 pts)

Quando não usar Lottie?

Quando há vídeo real (filme/fotografia) ou texturas raster — Lottie é vetorial.
Quando o After Effects usa efeitos não exportáveis (alguns plugins, render avançado).
Para 3D fotorealista (usar vídeo/WebGL).
Em sistemas/clientes sem player Lottie (raro em web moderna; pode acontecer em apps legadas).

Parte IV · Acessibilidade e web

Exercício 7 · `<video>` na web (15 pts)

Escreve um snippet HTML de <video> com: - WebM + MP4 fallback, - imagem de capa (poster), - não carregar o ficheiro inteiro de início, - legendas em português.

<video controls poster="capa.jpg" preload="metadata"
       width="1280" height="720">
  <source src="anim.webm" type="video/webm">
  <source src="anim.mp4"  type="video/mp4">
  <track kind="subtitles" src="legendas.vtt" srclang="pt" label="Português" default>
  O teu browser não suporta vídeo HTML5.
</video>

WebM primeiro (mais eficiente onde suportado), MP4 como fallback universal.
poster mostra uma imagem estática até dar play.
preload="metadata" só puxa info inicial, não o ficheiro completo.
<track> WebVTT para legendas (acessibilidade + sem som).

Exercício 8 · `prefers-reduced-motion` (10 pts)

O que é e como respeitar numa animação web?

É uma preferência do utilizador (definida no SO/browser) para reduzir o movimento — importante para pessoas com sensibilidade vestibular, enxaquecas ou epilepsia. Respeita-se:

CSS: @media (prefers-reduced-motion: reduce) { ... } para desativar ou simplificar transições/animações.
Lottie/JS: verificar window.matchMedia('(prefers-reduced-motion: reduce)').matches e não tocar (ou tocar uma versão estática) quando true.

Ignorar esta preferência exclui utilizadores reais e prejudica a acessibilidade.

Parte V · Workflow

Exercício 9 · Mestre (10 pts)

Porque exportar primeiro um mestre (ProRes/DNxHR) e derivar dele as versões para cada destino?

Para não recomprimir material já comprimido (cada compressão perde qualidade que não volta). O mestre tem pouca compressão; partir dele para H.264/WebM/etc. dá uma só compressão final por destino, com melhor qualidade e menor peso. Também permite gerar futuras versões (novo formato, nova resolução) sem voltar a abrir o projeto.