El multilingüismo en las webs de empresa
Web de la Generalitat de Catalunya Contacto
Inicio: Eres responsable de web? ¿Cómo se diseña el sitio web para facilitar la producción en diversas lenguas?
¿Cómo se diseña el sitio web
para facilitar la producción en diversas lenguas?
Aspectos técnicos
Aspectos relativos al contenido textual
Aspectos relativos al contenido gráfico
Aspectos relativos al contenido gráfico

Cuando se habla de contenido gráfico, se hace referencia a las imágenes en un documento HTML, que se suelen etiquetar de la siguiente manera:

<img src="imatges/hola.gif">
 
Las imágenes de las páginas web pueden estar en formatos diferentes: GIF, JPEG, PNG, etc. En el proceso de localización, los gráficos son importantes porque los hay que incorporan texto que habrá que traducir.

Para diferenciar las imágenes en función de la lengua del texto que contienen se puede explicitar el nombre de la lengua al final del nombre del archivo. Recordamos que no es recomendable traducir el nombre del archivo de las imágenes. Por ej.:

Recomanable
anunci_ca.gif
anunci_en.gif
anunci_es.gif

No recomanable
anunci.gif
advert.gif
anuncio.gif

Siempre que sea posible, hay que procurar que los nombres de las imágenes sean explícitos, porque cada vez es más frecuente el uso de buscadores de imágenes, especialmente de imágenes de personas. Por ej.:

Recomanable
ramon_llull.gif

No recomanable
rl.gif
ni
ramon.gif
Recomendaciones para facilitar la internacionalización del contenido gráfico:

1.
Guardar los archivos de gráficos sin texto en una carpeta separada de los archivos de texto. Así no será necesario duplicar todos los gráficos para cada idioma, sólo los que contienen texto. De esta manera se simplifica la gestión de archivos y se ahorra espacio físico en el servidor en el que se almacena el sitio web.

Veamos un ejemplo:En la figura de abajo hay una estructura de archivos de un sitio web:

las carpetas "00" y "01" contienen documentos HTML.

la carpeta "imatges" contiene todas las imágenes del sitio web, algunas de las cuales están'elles enlazadas más de una vez con varios documentos HTML contenidos en "00" i "01". De esta manera no es necesario guardar una misma imagen más de una vez en ,"00" y en "01".

 
Ejemplo de estructura de archivos de un sitio web.
Imagen de ejemplo
 
2. Diferenciar de alguna manera los gráficos que tienen texto traducible de los que notienen. De esta manera se acelera el proceso de análisis de los archivos y se ahorra espacio en el servidor, ya que sólo se duplican las imágenes que contienen texto en lenguas diferentes.

A continuación se proponen dos soluciones alternativas:

 
Diferenciar las imágenes con texto de las que no lo contienen dándoles un nombre que empiece con la letra t. De esta manera, si ordenamos los archivos por ordenalfabético reconoceremos fácilmente la serie de archivos que contienen texto (en la figura siguiente aparecen seleccionados en azul).

 
Ejemplo.
Imagen de ejemplo

Separar en carpetas diferentes los archivos de gráficos con texto y los archivosde gráficos sin texto.


 
Ejemplo.
Imagen de ejemplo
 
3. Elaborar los archivos gráficos en formato .GIF i .JPG por capas. En una capa se define el fondo del gráfico, en otra el texto, en otra el dibujo en primer plano, etc. De esta manera, será fácil modificar la capa de texto y sustituir el texto original por la traducción. Si todas las partes de los gráficos se integran en una capa, será imposible aislar el texto y habrá que volver a diseñar la imagen.

Elaboración por capas de un botón con texto:

 
Imagen de ejemplo >> Imagen de ejemplo
Capa que contiene sólo la imagen del botón   Capa que contiene sólo el texto del botón
   
>>
Imagen de ejemplo
Capa que contiene la combinación de la imagen del botón más el texto
   
 
4. Proporcionar a las personas que traduzcan los gráficos los tipos de letra que se han utilizado. De esta manera el administrador de webs se asegura de que el gráfico localizado tendrá el mismo aspecto que el gráfico original.
 
5. Dejar espacio adicional tras el texto incorporado en gráficos de manera que, si la traducción es más larga, no haga falta modificar el gráfico porque ya se haya previsto que la traducción puede ser más larga.

En el ejemplo, el botón con el texto «D'acord» tiene suficiente espacio para suficient traducirlo al inglés «Ok», pero no deja suficiente espacio para una traducción más larga como «De acuerdo». Posiblemente habría que hacer un botón nuevo durante el proceso de localización al castellano. Sin embargo, si el botón tiene suficiente espacio para una traducción más larga, no sería necesario hacer un botón de nuevo.


Botón original:
Permite traducción más breve, pero no tiene espacio para una traducción más larga:
Imagen de ejemplo
   
   
 
Índice
1. Introducción
2. ¿Qué se quiere traducir?
3. ¿Cómo se diseña el sitio web para facilitar la producción en diversas lenguas?
3.1. Aspectos técnicos
3.2. Contenido textual
3.3. Contenido gráfico
4. Fase de localización
4.1. Preparación
4.2. Realización
5. Después de la localización: la fase de comprobación
5.1. Funcionales
5.2. Visuales
6. Guía de estilo
> Bibliografía
Avanzar
         
© Generalitat de Catalunya
Aviso legal
Correo