PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad WEBDEV 25!
Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Esta lección le enseñará los conceptos siguientes
  • ¿Qué es un sitio multilingüe?
  • Selección de los idiomas del proyecto
  • Localización de los elementos del proyecto
  • Localización de una imagen
  • Localización del menú
  • Localización de controles
  • Localización de un mensaje de programación
  • Las herramientas de traducción
  • Entrada directa de las traducciones
  • Traducción con WDMSG y WDTRAD
  • Otros elementos a traducir: los mensajes de framework
  • Programación del cambio de idioma
  • Añadir una opción de menú
  • Programación
  • Prueba del proyecto
Lección 5.5. Gestión de varios idiomas
Esta lección le enseñará los conceptos siguientes
  • ¿Qué es un sitio multilingüe?
  • Creación de un sitio multilingüe, paso a paso.
Duración de las clases

Tiempo estimado: 50 mn
Lección anteriorTabla de contenidoSiguiente lección
¿Qué es un sitio multilingüe?
Un sitio multilingüe es un sitio que propone una interfaz en varios idiomas: Inglés, francés, alemán o cualquier otro idioma.
El mismo sitio creado con WEBDEV puede proponer hasta 64 idiomas diferentes.
Vamos a manipular un proyecto que puede ser ejecutado en inglés o en francés, según la elección del usuario.
Los siguientes pasos se utilizan para transformar un sitio en un sitio multilingüe:
  • Selección de los idiomas del proyecto.
  • Localización de los elementos del proyecto (páginas, informes, controles,...).
  • Localización de los mensajes encontrados en el código.
  • Programación del cambio de idioma en el sitio.
Vamos a aplicar estos diferentes pasos al proyecto "Full_WEBDEV_Site. Este proyecto, disponible en inglés, será traducido al francés.

Respuesta

Si no realizó las operaciones de las lecciones anteriores, puede seguir esta lección abriendo un proyecto corregido.: en la página de inicio de WEBDEV (Ctrl + <), haga clic en "Tutorial" y seleccione "Sitio WEBDEV completo (Con páginas)".
Selección de los idiomas del proyecto
  • La primera operación consiste en elegir los idiomas del proyecto.
    1. Abrir la descripción del proyecto: en la pestaña "Proyecto", en el grupo "Proyecto", haga clic en "Descripción"
    2. Haga clic en la pestaña "Idiomas. Nuestro proyecto apoyará el inglés y el francés.
    3. Haga clic en el botón "Agregar". Se muestra la ventana de selección de idiomas.
      Añadir un idioma al proyecto
    4. Haga clic en "Francés". Una marca de verificación aparece a la derecha del idioma.
    5. Valide. El idioma "francés" aparece en la lista de idiomas del proyecto.
  • En la pestaña "Idiomas" también se pueden configurar las opciones lingüísticas relativas a los números, las monedas, las fechas, ... para el idioma seleccionado. Veamos un ejemplo:
    1. Haga clic en el idioma "Francés".
    2. Seleccione la pestaña "Fecha".
    3. Por defecto se utilizan opciones lingüísticas específicas: tiene la capacidad de definir el formato de fecha así como la traducción utilizada para los días y meses. Si selecciona "Utilizar los ajustes definidos en las opciones lingüísticas del sistema operativo", los parámetros utilizados en implementación serán los parámetros del servidor (y no los parámetros de usuario).
    4. Mantenga "Use the following parameters" (Use los siguientes parámetros).
      Descripción del proyecto

Observación

En las opciones lingüísticas, tiene la posibilidad de elegir la dirección del texto para el idioma (pestaña"Notas adicionales", opción"Dirección del texto").. Esto le permite crear interfaces con un idioma escrito de derecha a izquierda.
  • Valide. Un mensaje propone sincronizar los diferentes elementos del proyecto. Responde "Sí". Todos los elementos de proyecto abiertos en el editor (páginas, informes,...) se cierran y los idiomas adicionales se añaden a estos elementos.

Observación

Pueden producirse errores de interfase de usuario. Los ignoraremos por ahora.. Estos errores se procesarán más adelante en este tutorial.
Localización de los elementos del proyecto
Todos los elementos del proyecto pueden convertirse en elementos multilingües: páginas, informes, ... Vamos a modificar algunos elementos de la página "PAGE_List_of_products" para presentar los diferentes métodos que se pueden utilizar. Vamos a ver cómo se modifica:
  • la imagen del logotipo utilizada en la página PAGE_List_of_products.
  • los subtítulos de los controles en la página PAGE_List_of_products.
  • las opciones de menú.
  • un mensaje mostrado por el código WLanguage.
  • Abra la página "PAGE_List_of_products" en el editor (haga doble clic en su nombre en el panel "Project explorer", por ejemplo).
  • Validar la actualización de modelo si es necesario.
  • En primer lugar, compruebe si la página PAGE_List_of_products está asociada a los diferentes idiomas definidos en el proyecto:
    1. Mostrar la descripción de la página ("Descripción" de el menú contextual de la página).
    2. Seleccione la pestaña "Idiomas": se muestran los dos idiomas seleccionados en el proyecto.
    3. Seleccione la pestaña "General: el título de la página debe ser traducido.
      Descripción de la página
    4. Sustitúyase el texto de la sección en francés por "Liste des produits"..
    5. Valide la ventana.

Localización de una imagen

  • Para cambiar la imagen del logotipo utilizada en la página PAGE_List_of_products según el idioma de ejecución:
    1. Abra la página "PAGE_List_of_products" si es necesario.
    2. La imagen del logo se encuentra en la modelo asociada a la página. Por lo tanto, se debe abrir la página asociada modelo:
      • Haga clic en el logo y muestre el menú contextual.
      • Seleccione la opción "Abrir modelo".
        Menú para abrir el menú modelo
      • Aparece la página modelo, rodeada de un borde naranja.
    3. Muestre la ventana de descripción del logotipo (haga doble clic en el control).
    4. En la pestaña "General", a la derecha de la sección "Imagen", haga clic en Menú control. Seleccione "Multilingüe" en el menú que aparece en pantalla..
    5. La ventana de gestión de imágenes multilingües se abre.
      Edición multilingüe
    6. Se puede utilizar una imagen diferente para cada idioma:
      • Haga clic en el botón Menú control.
      • Seleccione "Examinar" en el menú que aparece en pantalla.
      Esta función es muy útil si está usando imágenes que contienen texto. La misma imagen se utiliza en nuestro caso.
    7. Validar la ventana para la edición multilingüe.
    8. Cierre la ventana de descripción del control.
  • Como estamos ubicados en la página modelo, vamos a aprovechar la oportunidad para traducir la opción del menú "Lista de productos".

Localización del menú

Las opciones del menú se pueden traducir como los otros controles a través de la ventana de descripción de la opción, o desde el editor de páginas.
  • En nuestro ejemplo, vamos a traducir la opción "Lista de productos".
    1. Seleccione y haga clic en el menú que se encuentra en la página modelo.
    2. El menú se vuelve editable y se muestra un borde amarillo.
    3. Seleccione la opción "Lista de productos".
    4. Mostrar la ventana de descripción de la opción: mostrar el menú contextual y seleccionar "Descripción de la opción".
    5. En la ventana de descripción, escriba la opción en francés: "Lista de productos".
    6. Valide.
Las opciones también se pueden traducir en el editor de páginas.
  • Para traducir la opción "Añadir un producto":
    1. En el panel "Visualización", en el grupo "Opciones", amplíe "Idioma visualizado" y seleccione el idioma que se visualizará en el editor (en nuestro caso, francés).
    2. Las opciones del menú se muestran en el idioma seleccionado. Si ninguna traducción corresponde al idioma seleccionado, las opciones del menú se muestran en inglés.
    3. Seleccione la opción "Añadir un producto".
    4. Pulsar la tecla Space del teclado: el título se vuelve editable.
    5. Escriba la leyenda en francés: "Añadir un producto".
    6. Presione Enter para validar el título.
    7. Pulse Esc para salir del modo de edición.
    8. Guarde la página modelo ( Grabe el elemento o Ctrl + S).
    9. Restaurar el modo de visualización en inglés: En el panel "Pantalla", en el grupo "Opciones", expanda "Idioma visualizado" y seleccione "Inglés"..
    10. Actualice las páginas que utilizan la página modelo haciendo clic en el icono Propagar modificaciones de la página modelo de la barra naranja.. Validar la ventana de actualización.
    11. Cerrar la página modelo que se muestra en el editor.

Localización de controles

Un control puede mostrar información diversa al usuario:
  • una leyenda,
  • una imagen, ...
Esta información debe ser traducida. Esta información es accesible en las diferentes pestañas de la ventana de descripción del control.
  • Traducir el enlace "Modificar" que se encuentra en la página "PAGE_List_of_products":
    1. Seleccione el enlace "Modificar".
    2. Abra la ventana de descripción del control (opción "Descripción" del menú contextual).
    3. Escriba la leyenda en francés: "Modificador".
    4. Valide.
    5. Guardar la página ( Grabe el elemento o Ctrl + S).

Localización de un mensaje de programación

Todos los mensajes que se encuentran en su programa pueden ser traducidos a varios idiomas. Veamos cómo traducir un mensaje de programación:
  1. Visualice el editor de código (pulse F2 en la página PAGE_List_of_products").
  2. Escriba el siguiente código en el evento "Declaraciones globales":
    sMyString is string = "French"
  3. Para traducir este tipo de mensaje, posicione el cursor en la cadena "francés" y pulse Ctrl + T. En el panel "Código", en el grupo "Idiomas", también puede ampliar "Traducir cadenas" y seleccionar "Traducir mensajes".
  4. Aparece la ventana para editar un mensaje multilingüe.. Esta ventana le permite traducir todos los mensajes de su programa a todos los idiomas del proyecto.
  5. En la sección "Francés", escriba "Français" y valide.
    Mensaje multilingüe
  6. El icono Multilingüe así como un dígito aparecen en el editor de código. Estos iconos indican que el mensaje multilingüe existe en dos idiomas.
  7. Cierre el editor de código.
Las herramientas de traducción
Algunos elementos de la aplicación se han traducido manualmente.
Se pueden utilizar varios métodos para traducir esta información:
  • una traducción directa de los mensajes realizados en los diferentes editores: esta es la característica que se acaba de utilizar para traducir algunos elementos de nuestro sitio. Esta traducción puede posiblemente utilizar una herramienta de traducción, Google Translate (siempre y cuando usted posea una licencia), ....
  • una traducción "industrializada" realizada a través de una herramienta externa (WDMSG y WDTRAD).

Entrada directa de las traducciones

Las traducciones se escriben directamente en la interfaz del producto.: este es el método que se usaba hasta ahora.
Si desea utilizar un software de traducción o un sitio de traducción, WEBDEV puede configurarse para utilizar este software:
  1. En el panel "Inicio", en el grupo "Entorno", expanda "Opciones" y seleccione "Opciones generales de WEBDEV".
  2. Visualizar la pestaña "Traducción"
    Opciones generales de WEBDEV
  3. Especifique:
    • Si los ajustes regionales deben habilitarse automáticamente de acuerdo con el idioma utilizado para la entrada.. En este caso, si el idioma requiere un juego de caracteres específico, este juego de caracteres se seleccionará automáticamente.
    • El software o el sitio que se utilizará para la traducción. Tienes la posibilidad de utilizar WDDixio, el diccionario de traducción suministrado con WDMSG (ver párrafo siguiente), un software o sitio de traducción específico, o Google Translate..
      Para obtener más información, consulte Traducción por Google Translation.
    • Los idiomas soportados.
  4. Cuando se definen los parámetros de conversión, se puede hacer clic en el botón Botón de gestión del idioma que se encuentra en las diferentes ventanas de descripción de los elementos del proyecto.: este botón le permite utilizar el software definido para la traducción.

Traducción con WDMSG y WDTRAD

Una herramienta opcional llamada WDMSG está disponible, lo que le permite hacerlo:
  • comprobar todos los mensajes del proyecto (título de los controles, mensaje de código, título de las ventanas, etc.) con el fin de traducirlos,
  • comprobar los mensajes traducidos de nuevo.
Se revisan los mensajes a traducir:
  • en un formato de texto que puede ser configurado para ser utilizado por la mayoría de las herramientas de traducción
  • en formato HFSQL.
WDMSG también se suministra con WDTRAD, una herramienta de traducción asistida por ordenador.. WDTRAD se utiliza para escribir fácilmente todas las traducciones para la información multilingüe de un proyecto.
Contacte al Departamento de Ventas de PC SOFT para más detalles sobre WDMSG y WDTRAD.

Otros elementos a traducir: los mensajes de framework

La información y los mensajes de Notas adicionales se encuentran en el WEBDEV framework. Por ejemplo, los nombres de los días y meses utilizados por las funciones para la gestión de fechas provienen de WEBDEV framework. Para traducir una o más bibliotecas de esta framework, debe utilizar WDINT (herramienta opcional suministrada con WDMSG).
Este software se utiliza para obtener un archivo de extensión WDM que contiene todas las traducciones de las bibliotecas.. Para usar este archivo en su aplicación:
  • tiene la posibilidad de utilizar LoadError.
  • tiene la posibilidad de incluir el archivo en la descripción del proyecto en la pestaña "Idiomas".. Simplemente seleccione el idioma deseado y haga clic en la pestaña "Notas adicionales"..
    pestaña
Contacte al Departamento de Ventas de PC SOFT para más detalles sobre WDINT.
Programación del cambio de idioma
Por defecto, el proyecto se ejecuta en el lenguaje de ejecución definido para el proyecto, en la pestaña "Idiomas" de la descripción del proyecto ("Descripción" en el panel "Proyecto").
En un sitio, el idioma se puede elegir a través de una opción de menú. Puede cambiar el idioma de la aplicación que se está ejecutando utilizando Nación en el código asociado a la opción de menú.

Añadir una opción de menú

  • Para añadir una opción de menú:
    1. Si es necesario, abra "Product_List_PAGE" en el editor (haga doble clic en su nombre en el panel "Project explorer").
    2. Haz clic en el menú y selecciona "Abrir la modelo" de el menú contextual.
    3. En la página modelo, seleccione y haga clic en "Páginas".
    4. El menú se vuelve editable y se muestra un borde amarillo.
    5. Pulsar la tecla Space del teclado: el título se vuelve editable.
    6. Escriba el título ("Idiomas") y valide.
    7. Seleccione la opción "IDIOMAS" que acaba de crear.
    8. Despliega el menú contextual (clic derecho) y selecciona "Insertar un submenú".
    9. Seleccione la opción de menú que acaba de crear.
    10. Presione Espacio para editar la leyenda.
    11. Introduzca el título de la primera subopción: "Inglés". Pulse Intro para validar la entrada..
    12. Seleccione de nuevo la primera subopción.
    13. Presione Entrar: se crea una segunda subopción.
    14. Presione la tecla Espacio y escriba el título de la segunda subopción: "Francés".
  • Como estamos posicionados en la página modelo, traducimos la última opción del menú:
    1. Seleccione "CONTACTO"..
    2. Mostrar la ventana de descripción de la opción.
    3. Escriba "Contact us" para el idioma inglés.
Ahora vamos a escribir el código WLanguage necesario para cambiar de idioma.

Programación

  • Permite introducir el código para la gestión de los idiomas:
    1. Seleccione la opción "IDIOMAS .. FRANCÉS" en el modelo de páginas que se muestra en el editor.
    2. Mostrar el menú contextual (clic derecho). Seleccione "Código".
    3. Introduzca el siguiente código en el código del servidor de la opción de menú:
      Nation(nationFrench)
      PageUse(CurrentPage())
    4. Cierre la ventana de código.
    5. Seleccione la opción "IDIOMAS .. INGLÉS" en el modelo de páginas que se muestra en el editor.
    6. Mostrar el menú contextual (clic derecho). Seleccione "Código".
    7. Escriba el siguiente código:
      Nation(nationEnglish)
      PageUse(CurrentPage())
      En este código:
      • Nación se utiliza para cambiar el idioma de tiempo de ejecución del sitio.. Las constantes pasadas en parámetro permiten especificar el idioma a utilizar.
      • Uso de la página se utiliza para recargar una página (la página actual en nuestro caso) con el fin de tener en cuenta el cambio de idioma.
    8. Cierre la ventana de código.
    9. Pulse Esc para salir del modo de edición.
    10. Guarde la página modelo ( Grabar un elemento o Ctrl + S).
    11. Actualice las páginas que utilizan la página modelo haciendo clic en el icono Actualizar páginas de la barra naranja.. Validar la ventana de actualización.
    12. Cerrar la página modelo que se muestra en el editor.

Prueba del proyecto

Algunos elementos de la aplicación están siendo traducidos, ahora vamos a comprobar el cambio de idioma.
  • Para realizar la prueba de sitio:
    1. Ejecutar la prueba del proyecto ( Ejecutar prueba del proyecto entre los botones de acceso rápido). La página se muestra en modo de prueba en inglés.
    2. Seleccione "IDIOMAS... INGLÉS".
    3. Los elementos que se han traducido se muestran en francés:
      Prueba de proyecto multilingüe
    4. Cierre el navegador.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario