Capturas de pantalla anotadas: reglas y ejemplos

Una captura de pantalla anotada muestra un estado real de la interfaz e identifica las regiones exactas que el lector debe notar. La imagen lleva marcadores numerados; la página lleva la leyenda de texto correspondiente. Esa separación es el elemento: ni una imagen de producto sin marcar ni etiquetas incrustadas en los píxeles cumplen con el contrato.

** Auditoría de frescura de contenido, filtrada a una URL rastreada.**

1. URL rastreada: Confirma que la revisión se aplica a la página prevista y no a todo el dominio.
2. Filtro de estado: Limita la tabla a las páginas que requieren una decisión editorial.
3. Fecha de resultado: Muestra cuándo se actualizó por última vez el registro de auditoría subyacente.

La captura está pendiente, por lo que el comentario es una especificación de captura de producción en lugar de una referencia de imagen rota. Una vez que el recurso exista, la imagen, el título y la leyenda numerada se renderizan como una figura semántica única.

Por qué es importante este elemento

Los lectores usan una imagen de producto para responder una pregunta espacial: «¿Qué control, valor o estado significa esta instrucción?». Las interfaces densas contienen navegación, filtros, etiquetas, datos, insignias y acciones que pueden parecer igualmente importantes. Una captura de pantalla sin anotar le pide al lector que deduzca la atención del autor. Los marcadores numerados reducen esa búsqueda a una coincidencia directa entre una ubicación visible y una explicación breve.

El elemento también reemplaza el lenguaje de coordenadas frágil. «Usa el control de la derecha» se vuelve incorrecto cuando una barra de herramientas se reajusta; «elige el filtro de estado marcado como 2» sigue siendo utilizable mientras la captura esté vigente.

La capacidad de extracción automática significa que el software puede aislar y reutilizar el significado útil de una unidad de contenido. La visión artificial puede reconocer texto de la interfaz, pero no puede inferir de manera fiable por qué uno de veinte controles es importante para este procedimiento. Una leyenda visible y ordenada crea pares explícitos de marcador y explicación que los sistemas de búsqueda, las herramientas de traducción, el software de accesibilidad y las auditorías de contenido pueden procesar como texto. La imagen aporta evidencia espacial; la leyenda aporta significado buscable. Esto sigue las reglas de redacción de elementos más amplias: el contenido sigue siendo tipificado y portátil incluso cuando su motor de renderizado cambia.

Nunca incrustes la leyenda en los píxeles. El texto en píxeles no se puede traducir, buscar, seleccionar ni corregir sin editar la imagen. Además, es invisible para un lector de pantalla, un software que anuncia contenido digital a personas que no pueden ver la pantalla. Solo los números de los marcadores pertenecen a la imagen.

Cuándo usarlo

Usa una captura de pantalla anotada cuando el lector deba identificar una región específica en una interfaz real y las palabras por sí solas dejen más de un objetivo plausible. Es necesaria cuando dos controles tienen nombres similares, un estado importante es sutil, un resultado debe interpretarse en su contexto circundante, o una configuración visual no puede representarse fielmente en prosa. También es útil cuando una página de producto hace una afirmación concreta sobre la interfaz que la imagen puede demostrar.

Una captura de pantalla es opcional cuando la instrucción ya nombra un control único y visible y la interacción es convencional. «Selecciona Guardar cambios» normalmente no necesita imagen cuando la página contiene un solo botón de ese tipo. Se vuelve necesaria si la misma pantalla tiene Guardar borrador, Guardar vista y Guardar cambios, y elegir el incorrecto cambia el resultado.

Una captura de pantalla es perjudicial cuando añade peso sin resolver incertidumbre. No añadas una por decoración ni para repetir texto que queda más claro en una tabla. Catorce capturas de pantalla en una guía de catorce pasos crean catorce interrupciones, problemas de zoom en móviles y recursos obsoletos. Captura los pasos ambiguos; deja que los verbos precisos se encarguen de los rutinarios.

Los casos cercanos incluyen:

• Un panel completo usado para explicar un solo icono: recorta a la región más pequeña que conserve la orientación. Un marcador perdido en una interfaz amplia no reduce el esfuerzo de búsqueda.
• Una captura de pantalla usada como evidencia numérica: repite el valor decisivo en texto o en una tabla. Los píxeles no pueden ser la única copia accesible de una afirmación.
• Una captura de pantalla de un menú antes de que se abra: captura el estado que el lector necesita inspeccionar. El estado cerrado demuestra que el producto existe, pero no qué opción elegir.
• Una captura de pantalla que contiene registros de clientes: reemplázalos con datos de demostración estables antes de capturar. El difuminado es fácil de pasar por alto.
• Un diagrama disfrazado de captura de pantalla: usa un diagrama para relaciones abstractas. El realismo de la interfaz ayuda solo cuando la interfaz es relevante.

Dónde colocarlo

Coloca la figura después del párrafo o paso que primero le pide al lector que inspeccione la interfaz. En un procedimiento, colócala después de la acción y antes del estado de éxito o la resolución de problemas, para que el lector localice el control antes de verificar el resultado.

Mantén la imagen, el título y la leyenda juntos. Un encabezado puede introducir el grupo, pero ningún otro párrafo, nota destacada, anuncio o salto de página debe separar la captura de sus explicaciones numeradas. Un título identifica la pantalla completa y su contexto; no lleva una instrucción que pertenezca a la prosa ni reemplaza la leyenda.

No coloques dos capturas de pantalla a ancho completo juntas. Inserta la explicación que las distingue, o crea una comparación etiquetada cuando ambos estados deban evaluarse juntos. Mantén las capturas de pantalla alejadas de llamadas a la acción no relacionadas, tablas densas y galerías.

Repite el elemento solo cuando cada aparición responda a una pregunta espacial diferente. Prefiere una figura centrada; de lo contrario, asigna a los diferentes recortes nombres de archivo y propósitos distintos.

Anatomía

La captura de anatomía muestra las partes visibles y textuales de un elemento completo. Las etiquetas explicativas permanecen en la leyenda renderizada en lugar de formar parte de la imagen fuente.

Leyenda renderizada

1. Límite de contexto: Incluye suficiente interfaz circundante para identificar la página y la ubicación, pero excluye navegación no relacionada y espacio vacío.
2. Marcador numerado: Usa un círculo de alto contraste y un número entero, no solo color, para conectar una región con su entrada en la leyenda.
3. Región objetivo: Marca el control, valor o estado completo más pequeño necesario para la explicación; nunca cubre la etiqueta del objetivo.
4. Punto de referencia de orientación: Conserva un encabezado, pestaña o etiqueta de panel estable para que el lector pueda encontrar la misma área en el producto real.
5. Título: Nombra la pantalla, el estado y el escenario en texto visible debajo de la imagen.
6. Leyenda: Usa una lista ordenada cuyos números coinciden exactamente con los marcadores y cuyas entradas explican la importancia, no meramente la apariencia.

Los números de marcador comienzan en 1 y siguen el orden de la leyenda. Usa de dos a seis por imagen; uno es adecuado para un objetivo difícil, mientras que más de seis suele indicar una captura demasiado amplia.

Ejemplos de diseño

Las variantes compatibles cambian el recorte y el viewport, no la política de anotación. Cada variante usa datos de demostración, marcadores de imagen numerados, una leyenda de texto externa y un título visible.

Control centrado: Preferido para una única acción ambigua. Conserva una etiqueta de orientación para que el recorte no se convierta en un rectángulo anónimo.

Estado de flujo de trabajo: Úsalo cuando la relación entre una entrada, un estado y un resultado sea importante. Mantén la navegación global no relacionada fuera del encuadre.

URL en contexto: La única variante estándar que incluye el chrome del navegador, es decir, las pestañas, la barra de direcciones y los controles propios del navegador. Incluye solo la barra de direcciones y el indicador de permiso o seguridad necesario.

Estado móvil: Captura el diseño estrecho real cuando la interacción cambia en el ancho móvil. No reduzcas una pantalla ancha de escritorio y la llames ejemplo móvil.

Parámetros

Los parámetros forman el contrato de contenido portátil. Los valores visuales como el color del marcador, el grosor del borde y la tipografía del título pertenecen al renderizador y no son campos del autor.

El screenId identifica la superficie del producto independientemente de su nombre de archivo, de modo que una versión pueda encontrar diferentes recortes de content-freshness-audit. El archivo alt.yaml se mantiene simple: un nombre de archivo seguido de una cadena de texto alternativo plegada.

Sintaxis y ejemplos de código

Cada notación conserva los mismos metadatos, título, marcadores y orden de lectura imagen–título–leyenda.

Directiva Markdown portátil

:::annotated-screenshot{src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport=1440 density="2x" screenId="content-freshness-audit" captureDate="2026-08-27"}
Content freshness audit filtered to one tracked URL.

1. **Tracked URL:** Confirms which page the audit evaluates.
2. **Status filter:** Limits the results to pages awaiting review.
3. **Result date:** Shows when the audit data was refreshed.
:::

El adaptador resuelve alt desde el alt.yaml de la carpeta. Una clave de nombre de archivo faltante es un error de publicación, no un permiso para copiar el título.

Mapeo de shortcode de Hugo

{{< annotated-screenshot src="/images/seo-playbook/elements/annotated-screenshot/workflow-state.webp" viewport="1440" density="2x" screenId="content-freshness-audit" captureDate="2026-08-27" >}}
Content freshness audit filtered to one tracked URL.

1. **Tracked URL:** Confirms which page the audit evaluates.
2. **Status filter:** Limits the results to pages awaiting review.
3. **Result date:** Shows when the audit data was refreshed.
{{< /annotated-screenshot >}}

Este es un contrato de adaptador, no un shortcode registrado. Hasta que existan un renderizador y un recurso aprobados, usa el pipeline de figura semántica establecido o deja el comentario de captura prescrito. No sustituyas un renderizador que omita la leyenda o los campos de actualización.

Bloque o shortcode de WordPress

[annotated_screenshot src="workflow-state.webp" viewport="1440" density="2x" screen_id="content-freshness-audit" capture_date="2026-08-27"]
[caption]Content freshness audit filtered to one tracked URL.[/caption]
[marker number="1" label="Tracked URL"]Confirms which page the audit evaluates.[/marker]
[marker number="2" label="Status filter"]Limits the results to pages awaiting review.[/marker]
[marker number="3" label="Result date"]Shows when the audit data was refreshed.[/marker]
[/annotated_screenshot]

Un bloque de WordPress puede exponer los campos como controles, pero debe almacenar las descripciones de los marcadores como texto.

Ejemplos

Bueno: un estado ambiguo, tres marcadores útiles

** Revisión de frescura de contenido para demo.example/pricing/.**

1. URL rastreada: Verifica que el resultado pertenece a la página de precios seleccionada en la instrucción.
2. Necesita revisión: Identifica el filtro exacto que elimina las páginas actuales de la cola de trabajo.
3. Última actualización: Evita que el editor trate un resultado de auditoría antiguo como un diagnóstico actual.

Esto funciona porque cada marcador responde a una decisión, el recorte conserva la orientación y la leyenda explica consecuencias no visibles en los píxeles. El dominio de demostración es claramente un dato no real de cliente.

Malo: un póster de producto etiquetado

La versión mala explica un panel completo de una sola vez. Ocho flechas se cruzan, las etiquetas oscurecen los controles y la promoción incrustada no indica ninguna acción. Los marcadores del navegador crean un riesgo de privacidad, los nombres de clientes hacen que la aprobación sea incierta, ningún identificador de pantalla respalda las actualizaciones y la escala móvil hace que los objetivos sean ilegibles.

Repáralo seleccionando una tarea, usando datos de demostración aprobados, recortando al panel correspondiente y manteniendo solo los marcadores necesarios. Traslada las explicaciones a una leyenda de texto, añade texto alternativo contextual y registra el identificador de pantalla y la fecha.

Marcado de esquema y accesibilidad

Una captura de pantalla anotada no tiene un tipo especial de Schema.org. Puede poblar la propiedad image de un Article o un ImageObject con contentUrl, título, ancho y alto precisos. No inventes propiedades de marcadores; mantén la leyenda visible.

Usa semántica de figura nativa: un <figure> que contenga la <img>, un <figcaption> y la leyenda ordenada. El título nombra la pantalla completa y su estado. El atributo alt de la imagen describe lo que muestra la pantalla en este contexto; no debe comenzar con «captura de pantalla de», porque el elemento de imagen ya se anuncia a sí mismo. La leyenda proporciona las explicaciones numeradas detalladas, por lo que repetir las seis entradas en el texto alternativo crea un anuncio largo y duplicado.

Apunta a 80–180 caracteres, con 250 como límite máximo. Nombra el área del producto, el estado y el propósito marcado: «Auditoría de frescura de contenido filtrada a una URL rastreada, con marcadores en el filtro de estado y la fecha de última actualización». No transcribas la interfaz, rellenes con palabras clave ni uses el nombre de archivo. Esta imagen informativa normalmente necesita texto alternativo no vacío.

Los números de los marcadores deben ser legibles sin color. Usa alto contraste tanto en regiones de interfaz claras como oscuras, mantén su tamaño visual coherente y no cubras etiquetas ni valores. La leyenda usa una lista ordenada en el orden normal del documento; evita roles ARIA, o aplicaciones de Internet enriquecidas accesibles, que conviertan contenido estático en una alerta o widget interactivo. Una relación aria-describedby es opcional solo cuando las pruebas demuestren que mejora la navegación sin provocar que la leyenda visible se anuncie dos veces.

En anchos reducidos, el diseño responsivo debe preservar el significado. Escala una imagen ancha solo si los marcadores y los objetivos siguen siendo legibles; de lo contrario, proporciona un recorte centrado o una captura móvil genuina. Nunca causes desplazamiento horizontal a nivel de página ni requieras zoom. El título y la leyenda se envuelven debajo.

Reglas de contenido y captura

La coherencia hace que las capturas de pantalla sean comparables y reemplazables. Captura las pantallas de producto de escritorio a un viewport fijo de 1440 píxeles CSS y una densidad de píxeles de 2x, a menudo llamada densidad Retina, que registra dos píxeles de dispositivo por cada píxel CSS. Captura los estados móviles genuinos a 390 píxeles CSS y densidad 2x. Usa el tema de producto aprobado de manera coherente dentro de una guía; no alternes entre modo claro y oscuro a menos que la diferencia de tema sea el tema en cuestión.

Usa solo datos de demostración: sin nombres reales, direcciones de correo electrónico, dominios, detalles de facturación, tokens, indicaciones ni resultados. Inspecciona las barras laterales, los elementos recientes, el autocompletado, las notificaciones y los avatares antes de capturar.

Excluye el chrome del navegador a menos que una URL, un permiso o un control del navegador sea el punto central. Oculta pestañas, marcadores, extensiones, descargas, perfiles y notificaciones. Captura después de la carga; cierra la información sobre herramientas irrelevante y muestra un cursor solo cuando sea esencial.

Almacena las capturas fuente en cdn-assets/seo-playbook/elements/annotated-screenshot/. Usa nombres en minúsculas con kebab-case basados en la pantalla y el estado, como freshness-audit-needs-review.webp; nunca uses final, new, v2, el nombre de una persona o una fecha como nombre de archivo. El nombre estable permite reemplazar el recurso sin reescribir cada página. Usa WebP para la entrega normal, preferiblemente en configuración sin pérdida cuando el texto pequeño de la interfaz deba mantenerse nítido. Usa PNG solo cuando el pipeline de producción demuestre que WebP perjudica el texto o la transparencia. No uses JPEG para capturas de interfaz con texto fino y bordes definidos.

Renderiza a un máximo de 1600 píxeles CSS de ancho; una fuente de 1440 píxeles a 2x puede tener 2880 píxeles físicos. Conserva la relación de aspecto y las dimensiones intrínsecas. La optimización favorece el SEO de imágenes , pero la compresión no debe difuminar el texto ni los marcadores.

Cada carpeta de recursos contiene alt.yaml con una entrada por nombre de archivo:

freshness-audit-needs-review.webp: >-
  AmICited content freshness audit filtered to one tracked URL, with numbered markers on the review status and last-refreshed date.

La clave coincide exactamente con el nombre de archivo; el valor es el texto alternativo, no un título ni una leyenda. Los marcadores de posición, los paneles genéricos y las referencias a imágenes inexistentes están prohibidos. Las capturas pendientes usan solo un comentario SCREENSHOT y screenshotsPending = true.

Política de actualización y nueva captura

Las capturas de pantalla envejecen silenciosamente cuando un control representado se mueve o cambia de nombre. Trata cada captura como una vista de una pantalla registrada: screenId vincula los cambios del producto con los recursos, mientras que la fecha de captura identifica el estado registrado.

Un cambio en la interfaz de usuario desencadena una nueva captura cuando mueve o renombra un objetivo marcado, cambia el estado que explica la leyenda, altera la ruta de navegación necesaria para alcanzarlo, elimina un punto de referencia de orientación conservado o hace que la imagen antigua pueda llevar al lector al control equivocado. Vuelve a capturar el conjunto completo de figuras para esa pantalla, incluidas las variantes centrada y móvil. Un cambio de color, un ajuste de espaciado o la adición de una barra lateral no relacionada no requieren reemplazo automático, a menos que la captura de pantalla ahora entre en conflicto visible con la experiencia real o el estándar de accesibilidad.

Cuando una pantalla cambia, busca su screenId, luego su carpeta y nombre de archivo para detectar usos antiguos. Reemplaza los archivos estables, revisa alt.yaml e inspecciona todas las leyendas afectadas. No renombres archivos de reemplazo y dejes referencias más antiguas huérfanas.

El propietario de la pantalla del producto señala los cambios; el propietario del contenido acepta los reemplazos. Vuelve a capturar con la misma configuración de demostración, viewport, densidad y tema. Revisa las capturas de pantalla durante cada actualización sustancial de la página.

Tipos de publicación que lo utilizan

El frontmatter postTypes es la unión registrada. Cada tipo usa el mismo contrato de elemento pero aplica un umbral de requisito diferente.

Los casos de estudio requieren un límite adicional: obtener permiso explícito para mostrar información real del cliente o reconstruir la interfaz con datos de demostración claramente revelados y tratarla como una ilustración del flujo de trabajo, no como evidencia de resultados. La redacción no sustituye al consentimiento ni a una configuración controlada.

Lista de verificación de control de calidad

Un revisor verifica el riesgo de comunicación y mantenimiento antes del pulido visual.

• Propósito: La figura resuelve una ambigüedad espacial o demuestra una afirmación visible de la interfaz.
• Necesidad: Los pasos rutinarios permanecen en texto; la página no asigna una captura de pantalla a cada paso por defecto.
• Estado real: La captura muestra el menú abierto exacto, el filtro seleccionado, el resultado o el error del que se habla en el texto.
• Datos de demostración: No hay información visible de clientes, empleados, cuentas, navegadores, tokens, indicaciones ni facturación.
• Coherencia de captura: El viewport, la densidad 2x, el tema, el estado de la interfaz y la regla del chrome del navegador coinciden con el estándar.
• Recorte centrado: Queda suficiente contexto para la orientación, pero las áreas de interfaz no relacionadas no compiten con el objetivo.
• Marcadores: Hay de uno a seis números consecutivos, cada uno de alto contraste, legible y sin superponerse a etiquetas ni valores.
• Leyenda externa: Cada marcador tiene una entrada coincidente en una lista ordenada en el texto de la página; ningún texto de leyenda está incrustado en los píxeles.
• Título: La figura tiene un título visible y conciso que nombra su pantalla, estado y escenario.
• Texto alternativo: El alt.yaml de la carpeta contiene una clave de nombre de archivo exacta y una descripción contextual dentro del rango de longitud objetivo.
• Comportamiento móvil: El objetivo y los marcadores siguen siendo legibles sin desplazamiento horizontal a nivel de página ni zoom requerido; de lo contrario, existe un recorte centrado.
• Contrato de archivo: La ruta, el nombre en minúsculas con kebab-case, el formato, las dimensiones y el tamaño intrínseco siguen el estándar de entrega.
• Actualización: screenId y la fecha de captura están registrados, la interfaz real sigue coincidiendo y todas las referencias se pueden encontrar mediante búsqueda de texto.
• Paridad portátil: Las representaciones en Markdown, Hugo y WordPress preservan el mismo recurso, título, orden de marcadores y redacción de la leyenda.
• Sin recurso roto: Una ruta de imagen real aparece solo después de que el archivo exista; las capturas pendientes siguen siendo comentarios y mantienen screenshotsPending = true.

FAQ

La plantilla de academy renderiza las cinco preguntas revisadas almacenadas en el frontmatter [[faq]] de esta página. Cubren la frecuencia de las capturas de pantalla, las leyendas externas, la longitud del texto alternativo, los desencadenantes de nuevas capturas y la excepción del chrome del navegador.