Tema

Fuente

Tamaño

Ancho de texto

Interlineado

Acento de los controles

0 de 0 0%
MÓDULO 3.2

Haz una revisión visual de verdad

Aprende con el caso video → artículo y también prueba lo que ve el lector.

Al final: Construir un plan visual e inspeccionar la salida renderizada.

6 tópicos
55 min estimación con práctica
6 ejercicios comentados
1 verificación final
1

Planifica la relación entre idea e imagen

Argumento Evidencia visual Posición en el texto Pie de foto
Una imagen útil tiene una función que puedes expresar en una frase.

Qué es

Antes de seleccionar capturas, lista lo que el artículo necesita explicar. Para cada argumento, indica qué evidencia visual ayudaría al lector. El plan visual puede incluir idea, un timestamp candidato, un detalle esencial y la posición prevista.

Por qué aprender

Capturar primero y escribir después suele generar una colección de imágenes sueltas. Empezar por la función didáctica evita insertar un dashboard solo porque es colorido. A veces una tabla o un diagrama autoral explica mejor.

Conceptos clave

Argumentolo que el texto afirma.
Evidencialo que la imagen muestra.
Posicióndonde ayuda.
Pie de fotoconexión explícita con la idea.
EJEMPLO COMENTADO · 3.2.1
Idea: la revisión encontró dos errores.
Visual: pantalla con resultados de las pruebas.
Detalle: dos casos fallidos y el resumen.
Posición: después de explicar los criterios de evaluación.

✓ Haz así

Escribe la función antes de elegir el frame.

✗ Evita este error

Usar el mismo frame para afirmaciones diferentes sin explicarlo.

Practica antes de revelar

¿Qué visual explica mejor la diferencia entre regla y juicio?

Ver respuesta comentada

Un comparativo lado a lado con cálculo exacto y elección editorial. Una foto decorativa de una computadora no muestra esa diferencia.

2

Elige frames estables y completos

Transición Frame estable Detalle completo Captura aprobada
El mejor instante es aquel en que la información está completa, no un segundo elegido previamente.

Qué es

Una captura precisa debe tener sentido como imagen estática. Verifica si una transición terminó, si el cursor no tapa los datos y si están presentes las etiquetas importantes. Vuelve unos instantes en la fuente cuando sea necesario para recuperar contexto.

Por qué aprender

El lector del artículo no vio los segundos anteriores. Una caja sin título o un número sin unidad exige adivinación. Este es uno de los problemas mostrados en la comparación del video: capturas que pertenecen a la fuente, pero no funcionan aisladas.

Conceptos clave

Estabilidadanimación finalizada.
Contextoetiqueta y unidad presentes.
Focodetalle visible.
Fuentetimestamp recuperable.
EJEMPLO COMENTADO · 3.2.2
Reprobar: la mitad de la tabla todavía fuera de la pantalla.
Reprobar: score visible, pero sin nombre de la métrica.
Aprobar: resultado + etiqueta + contexto suficiente.

Del concepto a la acción

  1. Transición: identificar la condición inicial.
  2. Frame estable: aplicar la decisión descrita.
  3. Detalle completo: verificar el efecto en el ejemplo.
  4. Captura aprobada: registrar la evidencia de salida.

✓ Haz así

Compara al menos dos frames cuando el momento sea ambiguo.

✗ Evita este error

Aceptar un recorte solo porque se extrajo del video correcto.

Practica antes de revelar

¿Un número “94” aislado explica una mejora de calidad?

Ver respuesta comentada

No. Es necesario mostrar o explicar la métrica, la escala y la relación con la evaluación anterior. El número solo puede significar cualquier cosa.

3

Recorte para explicar sin distorsionar

Imagen completa Área relevante Contexto preservado Lectura final
El detalle crece, pero las etiquetas que le dan sentido continúan en el encuadre.

Qué es

Un buen recorte incrementa la información relevante y preserva el contexto. Un resaltado puede guiar la mirada, pero no debe esconder valores que cambiarían la interpretación. En material sensible, usa ocultación opaca cuando sea necesaria y esté autorizada la eliminación.

Por qué aprender

El zoom excesivo elimina títulos; el zoom insuficiente vuelve el texto ilegible. La elección debe verificarse en el tamaño de lectura real. Nunca declares que la privacidad quedó resuelta solo porque se aplicó un efecto de blur.

Conceptos clave

Recorteeliminar distracción.
Contextopreservar significado.
Destacadoguiar la mirada.
Revisiónverificar exposición y legibilidad.
EJEMPLO COMENTADO · 3.2.3
Checklist de recorte
[ ] El dato central es legible.
[ ] El título o la leyenda explica la métrica.
[ ] No se cortó ninguna etiqueta esencial.
[ ] Los campos sensibles no aparecen en la salida final.

✓ Haz así

Inspecciona el archivo final después de exportar la imagen.

✗ Evita este error

Confundir un destacado visual con prueba de que el contenido es correcto.

Practica antes de revelar

Si al quitar el encabezado el número queda ambiguo, ¿cuál es la solución?

Ver respuesta comentada

Ampliar el recorte o agregar un pie de foto fiel y suficiente. Si el pie de foto necesita inventar contexto que la fuente no proporciona, la imagen no sirve.

4

Coloca las imágenes junto a la explicación

Afirmación Imagen correspondiente Interpretación Próxima idea
La unidad didáctica es el conjunto texto + imagen, no la imagen aislada.

Qué es

La secuencia de texto e imagen construye entendimiento. El lector debe encontrar la imagen cerca de la afirmación que ella respalda. Cuatro capturas agrupadas al final pueden indicar que la inserción falló o que la revisión no examinó el orden final.

Por qué aprender

El video muestra este problema al comparar salidas: tener las imágenes en el documento no basta. La verificación debe recorrer el artículo ya armado, incluyendo el espacio entre bloques y el vínculo con los párrafos.

Conceptos clave

Proximidadmenos búsqueda visual.
Ordenacompaña el razonamiento.
Pie de fotoexplica la relación.
Ritmoalternar explicación y evidencia.
EJEMPLO COMENTADO · 3.2.4
Bien: explicar los tres filtros → mostrar los tres filtros.
Mal: explicar el informe → mostrar la pantalla inicial.
Mal: terminar el artículo con capturas sin leyenda.

✓ Haz así

Lee la secuencia final como alguien que no vio la fuente.

✗ Evita este error

Aprobar según la cantidad de archivos insertados.

Practica antes de revelar

Una imagen relevante aparece tres secciones después del párrafo. ¿Qué revisar?

Ver respuesta comentada

Reubica la imagen cerca del párrafo o reorganiza la secuencia textual. La corrección es de montaje; no requiere regenerar todo el artículo.

5

Inspecciona desktop, celular y estados de la interfaz

Desktop Celular Teclado + temas Registro de defectos
Varía la condición de lectura; mantén la misma tarea para comparar.

Qué es

Una página debe verse renderizada para confirmar geometría, contraste y legibilidad. Abre anchos diferentes, prueba navegación con teclado y verifica estados expandidos, temas y paneles. Las capturas son evidencia de estados específicos, no de todas las posibilidades.

Por qué aprender

Leer el código no revela necesariamente texto cortado, foco escondido por el menú o un botón cubierto por otro elemento. La revisión debe vincular observaciones visuales con acciones concretas y preservar el contenido mientras corrige el layout.

Conceptos clave

Viewporttamaño del área de lectura.
Overflowel contenido se desborda del contenedor.
Focoposición visible del teclado.
Estadoabierto, cerrado, tema y progreso.
EJEMPLO COMENTADO · 3.2.5
Paso 1: abrir la página y la primera sección.
Paso 2: reducir al ancho de celular.
Paso 3: usar Tab y abrir el panel.
Paso 4: verificar texto, foco y desplazamiento.

Del concepto a la acción

  1. Desktop: identificar la condición inicial.
  2. Celular: aplicar la decisión descrita.
  3. Teclado + temas: verificar el efecto en el ejemplo.
  4. Registro de defectos: registrar la evidencia de salida.

✓ Haz así

Registra el ancho, la página y el estado del defecto observado.

✗ Evita este error

Hacer una sola captura única de auditoría completa de accesibilidad.

Practica antes de revelar

Una tabla es ancha en el celular. ¿Cómo preservar la legibilidad?

Ver respuesta comentada

Usa un contenedor con desplazamiento horizontal identificado, manteniendo la página dentro de la pantalla. No reduzcas la fuente hasta que sea ilegible ni escondas columnas importantes.

6

Transforma un defecto visual en una regla comprobable

Defecto observado Regla mínima Nuevo caso Siguiente revisión
La mala imagen se vuelve aprendizaje solo cuando cambia el procedimiento y la prueba.

Qué es

El feedback visual útil identifica localización, síntoma y efecto. “La segunda imagen cortó el título y quedó incomprensible” es más accionable que “las imágenes quedaron mal”. La regla nueva debe atacar la causa y entrar en la siguiente revisión.

Por qué aprender

Si solo corriges el archivo final, el proceso puede repetir el error en la próxima ejecución. Actualiza la instrucción de selección, agrega un caso y verifica si el cambio también funciona en un video diferente.

Conceptos clave

Observacióndefecto concreto.
Impactoperjuicio para el lector.
Reglaprevención generalizable.
Pruebacaso que detecta recurrencia.
EJEMPLO COMENTADO · 3.2.6
Defecto: frame capturado durante una transición.
Regla: elegir estados visuales completos y estables.
Prueba: video con animación larga en la explicación principal.
Aceptación: ningún frame depende de contenido todavía oculto.

✓ Haz así

Preserva los buenos ejemplos como contraprueba de la corrección.

✗ Evita este error

Prohibir todos los frames con movimiento por culpa de un caso.

Practica antes de revelar

Escribe un feedback para cuatro imágenes sueltas al final.

Ver respuesta comentada

“Las cuatro últimas capturas no tienen una conexión clara con los párrafos. Relaciona cada una con una afirmación, reposiciona y verifica la secuencia renderizada. Elimina las que no aportan explicación.”

VERIFICACIÓN SIN BLOQUEO

Verifique su comprensión

Se capturó un frame a mitad de una animación y cortó la conclusión. ¿Cuál es la corrección mínima?

¿Qué te llevas de este módulo?

Construir un plan visual e inspeccionar la salida renderizada.

  • Planifica la relación entre idea e imagen.
  • Elige frames estables y completos.
  • Recorte para explicar sin distorsionar.
  • Posiciona las imágenes junto a la explicación.
  • Inspecciona en escritorio, celular y estados de la interfaz.
  • Transforma un defecto visual en una regla comprobable.

Próxima acción: guarde el ejercicio en su laboratorio y registre lo que todavía necesita revisión.

Referencia de este módulo: transcripción proporcionada y fuentes y notas técnicas del curso.