Mejora tus artículos de la Base de Conocimiento con elementos visuales. Añadir capturas de pantalla aclara conceptos complejos y simplifica las instrucciones, ofreciendo a los usuarios una vista directa de los elementos de la interfaz. Esta guía te muestra cómo incorporar imágenes de forma limpia y eficaz, mejorando la claridad del contenido y la participación del lector.

Crear capturas de pantalla en un ordenador o dispositivo móvil

Para aprender a crear capturas de pantalla para la Base de Conocimiento y qué herramientas de edición puedes usar, consulta ¿Cómo puedo hacer capturas de pantalla?.

Añadir imágenes y capturas de pantalla a los artículos de la Base de Conocimiento

Subir una imagen a la Galería de medios

1. Navega a la Galería de medios.
2. En la parte inferior derecha, haz clic en el botón Upload.
3. Se abrirá el cuadro de diálogo de subida. Haz clic en el botón Browse… para navegar por los archivos de tu ordenador y seleccionar la imagen que deseas subir.
4. Después de seleccionar tu imagen, un cuadro de diálogo te pedirá que proporciones un título y una descripción para tu imagen. Rellena estos detalles y luego haz clic en el botón Upload para finalizar el proceso de subida.

Subir una imagen directamente desde el editor de artículos

Si estás editando activamente un artículo y necesitas añadir una imagen, también puedes subirla directamente desde la barra de herramientas:

1. Empieza creando un nuevo artículo o editando uno existente.
2. En el editor de artículos, haz clic en el botón Insertar Medio que se encuentra en la barra de herramientas.

   

   • Esta acción abre el diálogo Insertar Medio.
3. En la parte inferior del diálogo que aparece, selecciona el botón Upload Media para continuar.
4. En el cuadro de diálogo de subida, haz clic en el botón Browse… para navegar por los archivos de tu ordenador y seleccionar la imagen que deseas subir.
5. Después de seleccionar tu imagen, un cuadro de diálogo te pedirá que proporciones un título y una descripción para tu imagen. Rellena estos detalles y luego haz clic en el botón Upload para finalizar el proceso de subida.

Añadir una imagen a un artículo

1. Empieza creando un nuevo artículo o editando uno existente.
2. Localiza y haz clic en el botón Insertar Medio en la barra de herramientas.
3. Desde la galería, elige la imagen que deseas añadir, luego haz clic en Insert Media para incrustarla en el artículo.

Uso eficaz de las imágenes en línea

La incorporación de capturas de pantalla en línea directamente en los artículos de la Base de Conocimiento mejora la claridad y la navegación al demostrar visualmente elementos de la interfaz como botones y menús. Este enfoque agiliza los artículos, haciéndolos más fáciles de seguir al reducir el volumen de imágenes y texto, y guiando directamente a los usuarios a través de la interfaz con elementos visuales concisos y relevantes. Pautas para optimizar la integración de imágenes en línea:

• Prioriza la claridad: Emplea imágenes en línea para sustituir las indicaciones textuales por representaciones visuales precisas. Céntrate en mostrar elementos interactivos como menús y botones, asegurando que estas imágenes sean directamente relevantes y faciliten el reconocimiento e interacción rápidos por parte del usuario.
• Colocación estratégica: Integra las capturas de pantalla junto al texto relevante para combinar sin problemas las instrucciones con las guías visuales, facilitando que los usuarios sigan el hilo sin perderse en descripciones largas.
• El tamaño importa: Al seleccionar imágenes en línea, busca una altura máxima de 16 píxeles. Esto asegura que los elementos visuales sean informativos pero discretos, contribuyendo a un diseño más limpio y accesible para los usuarios que navegan por el contenido.

Uso eficaz de imágenes para instrucciones paso a paso

Incrustar capturas de pantalla entre frases en los artículos de la Base de Conocimiento demuestra visualmente acciones o tareas, cerrando la brecha entre las instrucciones de texto y su aplicación práctica. Este enfoque mejora la comprensión y el compromiso del usuario al ilustrar los pasos críticos de un proceso, haciendo que los artículos sean más interactivos y fáciles de seguir para los lectores. Las pautas para optimizar el uso de imágenes en las instrucciones paso a paso incluyen:

• Uso selectivo: Incorpora capturas de pantalla solo para conceptos que realmente se beneficien de la ayuda visual. Evita usarlas en exceso para no saturar el contenido.
• Correlación directa: Selecciona capturas de pantalla que estén directamente relacionadas con el texto que las acompaña, asegurando que cada imagen ilustre claramente la acción o tarea que se describe.
• Secuencia lógica: Organiza las capturas de pantalla para que sigan la progresión natural de los pasos, reflejando la experiencia real del usuario. Este orden cronológico apoya un flujo lógico, facilitando una guía paso a paso que los lectores pueden seguir fácilmente.
• La precisión es clave: Asegúrate de que las capturas de pantalla representen con precisión lo que los usuarios encontrarán en sus pantallas. Dado que las apariencias pueden variar entre diferentes sistemas operativos, ajusta tus capturas de pantalla en consecuencia. Para obtener orientación sobre cómo adaptar las capturas de pantalla para usuarios de Windows, Mac y Linux, consulta la guía Cómo utilizar "for".

Ejemplos

¡Es muy fácil!

• Si vas a colocar una imagen en una línea de texto (imagen en línea), no debe tener más de 16 píxeles de alto.
• Si vas a colocar una imagen entre dos frases en una serie de pasos o en una lista (ordenada o no), debe ir precedida de un punto y coma. No es necesario añadir saltos de línea alrededor de las imágenes.

Sintaxis para una imagen en línea

Así es como se ve la sintaxis wiki para una imagen en línea:

Este es el texto, seguido de [[Imagen:La imagen]], y esta es la continuación del texto.

Ejemplo de imagen en línea

Aquí tienes un fragmento de texto. Justo en el medio, hemos insertado una imagen en línea del botón de menú de Firefox. A continuación, hemos añadido texto adicional.

Sintaxis para una imagen en una serie de pasos

Así es como se ve la sintaxis wiki para "separar una imagen con un punto y coma":

# Este es un paso.
#;[[Imagen:La imagen]]
# Este es el siguiente paso.


Ejemplo de una imagen en una serie de pasos

Este es un ejemplo con un texto más largo y una imagen más grande:

1. Este es un paso. Y aquí hay algunas palabras adicionales para que puedas ver cómo se ven sobre la imagen.

   

2. Este es el siguiente paso, de nuevo, con palabras adicionales para que puedas ver cómo se ven debajo de la imagen.

Directrices de la Base de Conocimiento

Si estás interesado en aprender más sobre cómo escribir y editar artículos de la Base de Conocimiento, las directrices están aquí.