E1 · Celular y reducir
5 minEjecuta "verificar en el celular y con reducir movimiento".
Listo cuando: celular: frames-v (filme vertical), reduzir movimento: parado y dos veces saída: 0.
Clase 7 · 16 min
Celular, peso y "reducir movimiento": el sitio que abre rápido
Mucha gente abre la página en el celular en vertical, con red móvil, y algunas personas le pidieron al sistema menos movimiento. Una película horizontal recortada en la pantalla vertical pierde el asunto; una película que avanza a la fuerza molesta a quien pidió que se detuviera. Tú revisas la página en el celular de 390 px, con reducir movimiento, y recortas el peso de la película vertical.
Comenzar la clase
En esta clase vas a
- 1Película vertical (frames-v/) y encaje por fracción de corte, en vez de cubrir siempre
- 2prefers-reduced-motion y la llave Parado / Ligado / Raio-X (Quieto / Encendido / Rayos X)
- 3Recortar el peso del celular sin quitar cuadros
- 4Qué es de este curso y qué es de la Formación inemaSEO
Objetivo: comprobar en el celular de 390 px, con reducir movimiento y en la primera carga, que la página abre rápido y no fuerza el movimiento.
01Qué cambia en el celular
Haz clic en cada etapa.
Haz clic en cada bloque del diagrama para ver qué hace.
La velocidad medida en red real, Core Web Vitals y PageSpeed son de la Formación inemaSEO. Aquí: el peso de la película y el movimiento.
02Celular y reducir movimiento
Los dos modos del verificador en la página del kit.
Terminal · verificar en el celular y con reducir movimiento
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a7; 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" --celular; echo "saída: $?"
node "$K/scripts/verificar.mjs" "$U" --reduzir | tail -2; echo "saída: ${PIPESTATUS[0]}"
kill $SFragmento · kit/site/site.css
html.parado .filme { height: auto; }
html.parado .palco { position: relative; height: auto; padding: 62vh 0 48px; background-size: 100% 60vh; background-position: top center; }
html.parado #tela { height: 60vh; bottom: auto; }
html.parado .batida { position: static; opacity: 1 !important; transform: none !important; max-width: 680px; padding: 24px clamp(16px, 6vw, 80px) 0; }Terminal · error común: ignorar reducir movimiento
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a7; 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}erro-sem-reduzir.html" --reduzir | tail -1; echo "saída: ${PIPESTATUS[0]}"
kill $SEjemplo del repositorio
Chromium 156.0.8078.4 (Playwright 1.64.0) · 390×844 quadros: 144 (frames-v/) rolagem 0% → quadro 0 · tela pintada rolagem 50% → quadro 72 · tela pintada rolagem 100% → quadro 143 · tela pintada transbordo horizontal: não celular: frames-v (filme vertical) · 390×844 OK: 3 de 3 posições saída: 0 reduzir movimento: parado (quadro 0 em 0%, 50% e 100%) OK: 3 de 3 posições saída: 0
En el celular, la página eligió frames-v; con reducir movimiento, el cuadro se quedó en 0 en las tres posiciones.
FALHA: com reduzir movimento o filme ainda anda (quadro 0 → 72 → 143) saída: 1
La copia erro-sem-reduzir.html desactiva la opción reduzir: la película avanza incluso cuando el sistema pide menos movimiento.
03El celular pesaba más que la computadora
En la clase 1, el celular descargaba 3,52 MB y la computadora 1,54 MB. Rehacer solo la película vertical con 600 px y -q:v 8 lo resuelve, sin quitar cuadros.
Terminal · rehacer la película vertical más liviana
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a7; rm -rf "$E/site"; cp -r "$K/site" "$E/site"
python3 "$K/scripts/peso.py" "$E/site" --orcamento 3 | grep -E "^celular|orçamento"
# la película vertical otra vez: 600 px de ancho y JPEG -q:v 8 (era 720 px y 6)
bash "$K/scripts/clipe.sh" "$K/exemplos/lente.jpg" "$E/v.mp4" 6 1.0 1.35 1080x1920
bash "$K/scripts/quadros.sh" "$E/v.mp4" "$E/site/frames-v" 600 8
python3 "$K/scripts/peso.py" "$E/site" --orcamento 3 --inicial 0.5 | grep -E "^celular|orçamento|teto"; echo "saída: ${PIPESTATUS[0]}"Ejemplo del repositorio
celular: tudo 3,52 MB · primeira pintura 0,06 MB · rascunho (1 em 8) 0,47 MB visitante mais pesado 3,52 MB · orçamento 3,0 MB: ACIMA do orçamento v.mp4: 6,0 s · 24 fps · 1080×1920 QUADROS: 144 · 600×1066 · 2,2 MB · 24 fps celular: tudo 2,28 MB · primeira pintura 0,05 MB · rascunho (1 em 8) 0,32 MB primeira pintura 0,05 MB · teto 0,5 MB: DENTRO visitante mais pesado 2,28 MB · orçamento 3,0 MB: DENTRO do orçamento saída: 0
Los mismos 144 cuadros, de 3,52 a 2,28 MB en el celular. Mira el resultado en el celular antes de aceptarlo: -q:v 8 es el límite que usa el curso.
04Tres reglas del celular
De las dos skills y de lo que mide el verificador.
1. Película propia
El celular en vertical recibe película vertical: clip 9:16 del generador o, en el ensayo, clipe.sh con 1080x1920.
Sin frames-v/, el kit vuelve al horizontal cubriendo la pantalla.
2. Peso propio
Mide el celular por separado (peso.py ya lo hace) y dale el presupuesto más ajustado.
Recorta el ancho y ajusta -q:v antes de sacar los cuadros.
3. Movimiento opcional
Reducir movimiento activado = película quieta y texto legible, sin scroll fijo.
El interruptor en pantalla deja la elección también a quien no tocó el sistema.
05Práctica
Celular, reducir y peso, verificados.
E2 · El error
5 minEjecuta el verificador con --reduzir en erro-sem-reduzir.html (bloque "error común: ignorar reducir movimiento"). En el navegador de la computadora, activa "reducir movimiento" del sistema y abre la página del kit y la copia con error.
Listo cuando: FALHA: com reduzir movimento o filme ainda anda y saída: 1.
E3 · Celular liviano
10 minEjecuta "rehacer la película vertical más liviana". Después prueba 540 px con -q:v 7 y compara.
Listo cuando: visitante mais pesado 2,28 MB · orçamento 3,0 MB: DENTRO do orçamento y saída: 0.
06Prueba de la clase
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
Una película 16:9 cubriendo la pantalla de un celular en vertical (390×844). ¿Qué pasa?
Correcto
Cubrir una pantalla vertical con un cuadro ancho corta los lados. Por eso existen la película vertical (frames-v/) y el encaje por fracción de corte.No es esa
Cubrir una pantalla vertical con un cuadro ancho corta los lados. Por eso existen la película vertical (frames-v/) y el encaje por fracción de corte.Repasar: Qué cambia en el celularPregunta 2 de 4
La persona activó "reducir movimiento" en el sistema. ¿Qué hace la página del kit?
Correcto
Una película atada al scroll es movimiento disparado por la persona, y quien pidió menos movimiento recibe la versión quieta. El verificador comprueba el mismo cuadro en 0%, 50% y 100%.No es esa
Una película atada al scroll es movimiento disparado por la persona, y quien pidió menos movimiento recibe la versión quieta. El verificador comprueba el mismo cuadro en 0%, 50% y 100%.Repasar: Qué cambia en el celularPregunta 3 de 4
El celular está 1,2 MB por encima del presupuesto. ¿Cuál es el primer ajuste?
Correcto
El ancho y -q:v quitan peso sin convertirlo en una presentación de diapositivas. En el ensayo: 720 px y -q:v 6 = 3,52 MB; 600 px y -q:v 8 = 2,28 MB, los mismos 144 cuadros.No es esa
El ancho y -q:v quitan peso sin convertirlo en una presentación de diapositivas. En el ensayo: 720 px y -q:v 6 = 3,52 MB; 600 px y -q:v 8 = 2,28 MB, los mismos 144 cuadros.Repasar: Celular y reducir movimientoPregunta 4 de 4
¿Dónde aprender a medir Core Web Vitals y la velocidad del sitio para buscadores?
Correcto
Este curso mide el peso de la película y el movimiento. El rendimiento para buscadores tiene su propio dueño: la Formación inemaSEO.No es esa
Este curso mide el peso de la película y el movimiento. El rendimiento para buscadores tiene su propio dueño: la Formación inemaSEO.Repasar: Qué cambia en el celularPrueba 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.
07En tres frases
VerticalEl celular en vertical recibe frames-v/ y encaje por fracción de corte.
ReducirPelícula quieta, texto legible, llave en pantalla.
PesoCelular medido aparte; ancho y -q:v antes de quitar cuadros.