Introducción

A la hora de elaborar documentación es muy normal la inclusión de imágenes en ella. Las imágenes suelen ayudar a comprender la utilización de una herramienta o nos muestran un esquema que aclara la utilización de una librería.

A la hora de incluir esas imágenes en la documentación hay que tener en cuenta:

Estructura de carpetas

A la hora de incluir imágenes en la documentación tenderemos a estructurar las carpetas de una de las dos siguientes formas:

Sea uno u otro el caso tendremos que tener en cuenta las siguientes consideraciones:

Nombrado

El nombre que se le de a la imagen debe ser descriptivo.

Ejemplo:

No vale Boton1, debe ser botonAñadirNuevaCapa

A la imagen que no tienen la paleta de colores optimizada se la identifica con un sufijo "-24". La imagen con la paleta optimizada no llevará sufijo.

Ejemplo:

botonAñadirNuevaCapa-24.png

También se le añade un sufijo que haga referencia al idioma de la interface de usuario cuando se capturó la imagen, usando la nomenclatura de la iso639.

Ejemplo:

Un imagen que haya sido capturada con la interface de usuario en castellano debe ir acompañada del sufijo "es"

botonAñadirNuevaCapa-es.png

Calidad

Tip

Es recomendable que lea el apartado "Inclusion de imágenes o diagramas" del documento Normas y recomendaciones

Normalmente cuando estemos capturando imágenes para la aplicación almacenaremos dos o tres archivos:

El utilizar archivos PNG cuya paleta de colores está optimizada se debe a que la exportación de la documentación a formatos PDF es capaz de optimizar mucho mejor el almacenamiento de imágenes en paleta de colores que en color de 24 bits.

El programa que utilizamos para la captura de imágenes es Gimp Con él, una vez capturada la imágen se optimiza la paleta de colores, adecuándola al número de colores necesario para que la imágen no pierda calidad. El criterio es visual. Como regla puede decirse que un botón por ejemplo "Cancelar" se ve bien con una paleta de 8 o 16 colores y una imágen de 3D con mucho colorido no suele necesitar más de 64.

El menú de optimización de la paleta de colores está en Imagen -> Modo -> Indexado.

images/en/gimp-menu-image-mode.png

Menú optimizar paleta de colores

En la ventana podemos seleccionar el número de colores que queremos y el modo de optimización.

images/en/gimp-dialog-indexed-color-conversion.png

Ventana optimización de la paleta de colores.

Como ya se ha comentado, es recomendable dejar accesibles los 2 archivos (el de la imágen optimizada y el que no tiene la paleta optimizada). La razón es que si luego se quiere realizar algún tratamiento a la imágen, por ejemplo resaltar un área, recortarla o escalarla, ... la imágen con la paleta optimizada no tiene la misma calidad que la imágen que no tiene la paleta optimizada.

Como nota final, tener en cuenta que la imagen debe guardarse sin compresión.

Subir y enlazar una imagen en un documento

Para subir una imagen, se deberá acceder al directorio previo al del documento y acceder a la carpeta "images" (si no está creada se deberá crear con el menú "agregar un nuevo ítem"-->"carpeta"). Dentro de la carpeta "images" deberá haber una carpeta por cada idioma al que esté traducido el documento (es: español, en: inglés, it: italiano, de:alemán...), y dentro de cada carpeta de cada idioma deberá haber el mismo número de imágenes. Si la carpeta no está creada se creará como se ha comentado anteriormente. Después se entrará en la carpeta del idioma correspondiente, y se seleccionará la pestaña "agregar un nuevo ítem"-->"imagen".

images/es/pestanya_agregar_imagen_8.png

Pestaña Agregar imagen

En la siguiente ventana se pondrá el título y con el comando "Examinar" se buscará la imagen a subir al servidor. Finalmente se ejecutará el comando "Guardar".

Para enlazar una imagen desde la traducción del documento, si por ejemplo el idioma desde el cual se está traduciendo es el español, se dispondrá del siguiente texto:

.. figure:: images/es/pestanya_agregar_imagen_1.png
   :align: center

donde "es" es el nombre de la carpeta correspondiente al español. Se deberá sustituir el nombre de dicha carpeta por el de la carpeta donde están las imágenes del nuevo idioma, así como el nombre de la imagen que se ha subido previamente al servidor en el nuevo idioma. Por ejemplo, en la traducción a inglés podría ser:

.. figure::images/en/add_image_tab_1.png
   :align: center