AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WEBDEV 2024!
Ayuda / Tutorial WEBDEV / Tutorial - Gestionar varios idiomas en un sitio web
  • Adaptar un sitio web a varios idiomas
  • ¿Qué es un sitio multilingüe?
  • Ejemplo práctico: integrar varios idiomas en un sitio web
  • Etapa 1: Seleccionar los idiomas del proyecto
  • Etapa 2: Elegir los idiomas en el análisis
  • Agregar idiomas en el análisis
  • Información multilingüe compartida
  • Aplicar los cambios
  • Etapa 3: Adaptar los diferentes elementos del proyecto a varios idiomas
  • Verificar que el nuevo idioma se tiene en cuenta en la página
  • Traducir opciones de menú
  • Traducir los controles del sitio web
  • Traducir textos de programación
  • Cambiar el idioma mediante programación
  • Botones de idioma
  • Prueba de la página
  • Información adicional: Herramientas de traducción
  • Traducir un texto con un programa de traducción
  • Traducción con WDMSG y WDTRAD
  • Otros elementos a traducir: mensajes del framework

Tutorial - Gestionar varios idiomas en un sitio web

Adaptar un sitio web a varios idiomas
Abordaremos los siguientes temas:
  • ¿Qué es un sitio multilingüe?
  • Crear un sitio multilingüe, paso a paso.
Durée de la leçon 50 min
¿Qué es un sitio multilingüe?
Un sitio multilingüe es un sitio web con una interfaz de usuario en varios idiomas: español, inglés, francés o cualquier otro idioma.
En WEBDEV, un mismo sitio puede incluir hasta 64 idiomas diferentes.
Vamos a usar un proyecto que puede ejecutarse en inglés o francés, según la decisión del usuario.
Ejemplo práctico: integrar varios idiomas en un sitio web
Supongamos que hemos desarrollado un sitio web con una UI en un idioma (p. ej., inglés), pero necesitamos realizar algunos cambios para adaptarlo a otro idioma (p. ej., francés).
Estos cambios deben seguir diferentes etapas en un orden específico. La primera etapa consiste en indicar que el proyecto admite varios idiomas. Esta etapa es absolutamente esencial para desarrollar un sitio web multilingüe.
Veamos las principales etapas para desarrollar un sitio WEBDEV multilingüe. Las etapas son las siguientes:
  • Elegir los idiomas que admite el proyecto.
  • Elegir los idiomas que admite el análisis.
  • Adoptar los métodos para traducir los diferentes elementos del proyecto (páginas, reportes, controles, etc.).
  • Adoptar los métodos para traducir texto en el código.
  • Programar el cambio de idioma en el sitio.
Para seguir estas etapas, utilizaremos el proyecto "Full_WEBDEV_Site". Este proyecto está en inglés y vamos a traducirlo al francés.
Abrir el proyecto de ejemplo
  1. Vaya a la página de inicio de WINDEV (Ctrl + <).
  2. En la página de inicio, haga clic en "Tutorial", luego en "Tutorial - Create a WEBDEV website (Back Office and Front Office)", haga doble clic en "Full WEBDEV Site - Answers".
Etapa 1: Seleccionar los idiomas del proyecto
Primero, seleccionaremos los idiomas del proyecto.
  1. Abra 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 incluirá los idiomas inglés y francés.
  3. Haga clic en "Agregar". La ventana de selección de idiomas se abre.
    Agregar un idioma al proyecto
  4. Haga clic en "Francés". A la derecha del idioma aparece una marca de verificación.
  5. Valide. El idioma "Francés" aparece en la lista de idiomas del proyecto.
La pestaña "Idiomas" también permite configurar las opciones de idioma para números, divisas, fechas, etc., en el idioma seleccionado. Veamos un ejemplo:
  1. Haga clic en "Francés".
  2. Seleccione la pestaña "Fecha".
  3. De forma predeterminada, se utilizan las opciones de idioma de Windows. Seleccione la opción "Utilizar los siguientes parámetros" para definir el formato de la fecha y la traducción de los días y meses.
    Si selecciona la opción "Utilizar la configuración definida en las opciones de idioma del sistema operativo", la configuración utilizada para la implementación será la del servidor y no la definida por el usuario.
  4. Conserve la opción "Utilizar los siguientes parámetros".
    Descripción del proyecto
En las opciones de idioma, puede elegir la dirección del texto (pestaña "Varios", opción "Dirección de escritura"). Esto le permite crear interfaces con un idioma escrito de derecha a izquierda.
Ahora, solo queda aplicar los cambios:
  1. Valide la ventana de descripción del proyecto.
  2. Un mensaje le pide que sincronice los diferentes elementos del proyecto. Responda "Sí". Todos los elementos abiertos en el editor (páginas, reportes, etc.) se cierran y los idiomas adicionales se agregan a estos elementos.
    Observación: Los títulos que existen en el idioma de origen del proyecto se copian automáticamente a los idiomas agregados.
Etapa 2: Elegir los idiomas en el análisis
De forma predeterminada, un análisis se crea en un idioma específico y no se puede traducir.
Sin embargo, alguna información puede introducirse en varios idiomas (notas de la documentación, información compartida, etc.).
¿Por qué traducir los datos del análisis?
De forma predeterminada, los controles creados a partir de los campos del análisis tienen el texto del campo especificado en el análisis. Si se especificó un título en la información compartida del campo, este se utilizará al crear el control. En un proyecto multilingüe, esta información debe traducirse para que los nuevos elementos estén en todos los idiomas necesarios.
Cuando se cambia el idioma del proyecto relacionado con el análisis, este cambio no se aplica automáticamente al análisis, dado que los análisis pueden estar compartidos entre varios proyectos.

Para descubrir cómo funciona, primero vamos a agregar los idiomas en el análisis y, a continuación, introduciremos la información compartida en varios idiomas.

Agregar idiomas en el análisis

Para utilizar varios idiomas en el proyecto "Full_WEBDEV_Site":
  1. Abra el editor de análisis: haga clic en Cargar análisis del proyecto en los botones de acceso rápido del menú de WEBDEV.
  2. En la descripción del análisis (opción "Descripción del análisis" del menú contextual), seleccione la pestaña "Idioma".
  3. La lista de idiomas del análisis aparece. Como el francés no está en la lista, tenemos que agregarlo:
    • Haga clic en el botón "Agregar".
    • Seleccione "Francés".
    • Valide la ventana de selección de idiomas.
  4. Valide la ventana de descripción del análisis.
    Para tener en cuenta todos los idiomas del proyecto relacionados con el análisis actual, haga clic en "Sincronizar con el proyecto".

Información multilingüe compartida

Veamos un ejemplo sencillo de cómo introducir información compartida en varios idiomas: vamos a definir el título del control enlazado al campo "Address" del archivo de datos "Customer":
  1. Seleccione el archivo de datos Customer.
  2. Abra la descripción de los campos (seleccione "Descripción de los campos" en el menú contextual del archivo de datos).
  3. Seleccione el campo "Address" y abra los parámetros del control enlazado al campo seleccionado (información compartida). Para ello, haga clic en el enlace en la parte inferior de la pantalla. La información compartida se muestra en una nueva ventana.
  4. En la pestaña "General", en el título francés, introduzca "Adresse".
  5. Valide la ventana de información compartida.
  6. Valide la ventana de descripción de los campos.
    La información compartida del análisis se puede traducir:
    • al crear el análisis.
    • en cualquier momento a través del editor.
    • en cualquier momento a través de WDMSG y WDTRAD, herramientas utilizadas para extraer, traducir y reintegrar los diferentes elementos del proyecto. Estas dos herramientas se presentarán más adelante en este tutorial.

Aplicar los cambios

Para tener en cuenta los cambios, debe generar el análisis: en la pestaña "Análisis", en el grupo "Análisis", haga clic en "Generación".
Cierre el editor de análisis (haga clic en la "X" del análisis en las pestañas de documentos abiertos).
Etapa 3: Adaptar los diferentes elementos del proyecto a varios idiomas
Todos los elementos del proyecto pueden ser multilingües: páginas, reportes, etc.
Vamos a modificar algunos elementos de la página "PAGE_List_of_products" para ver los diferentes métodos que se pueden utilizar. Vamos a ver cómo modificar:
  • los títulos de los controles de 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 el nombre de la página en el panel "Explorador de proyectos").
Valide la actualización del modelo si es necesario.

Verificar que el nuevo idioma se tiene en cuenta en la página

En primer lugar, compruebe si la página PAGE_List_of_products está asociada a los diferentes idiomas definidos en el proyecto:
  1. Abra la descripción de la página (opción "Descripción" del menú contextual de la página).
  2. Seleccione la pestaña "Idioma": los dos idiomas seleccionados en el proyecto aparecen.
  3. Seleccione la pestaña "General". En "Título", podemos ver que el título especificado en inglés se copió automáticamente en el idioma que agregamos.
    De forma predeterminada, cuando se agrega un idioma a un proyecto, todos los títulos se crean automáticamente con el contenido del idioma existente. Esto evita que queden espacios en blanco mientras se traducen los distintos elementos.
  4. Traduzcamos el título de la página: reemplace el texto de la sección "Francés" por "Liste des produits".
    Descripción de la página
  5. Valide la ventana de descripción.

Traducir opciones de menú

Al igual que los controles, las opciones de menú pueden traducirse a través de la ventana de descripción o directamente en el editor de páginas.

En nuestro ejemplo, vamos a traducir la opción "List of products".
  1. El menú se encuentra en el modelo asociado a la página. Abra el modelo de páginas:
    • Haga clic en el menú y abra el menú contextual.
    • Seleccione la opción "Abrir modelo".
      Menú para abrir el modelo
    • El modelo de páginas aparece con un marco de color.
  2. Seleccione el menú del modelo de páginas y pulse la barra espaciadora.
  3. El menú se vuelve editable y aparece un borde amarillo.
  4. Seleccione la opción "List of products".
  5. Abra la ventana de descripción de la opción: abra el menú contextual y seleccione "Descripción de la opción".
  6. En la ventana de descripción, traduzca la opción al francés: "Liste des produits".
  7. Valide.
Las opciones también se pueden traducir directamente en el editor de páginas. Utilizaremos este método para traducir la opción "Product form":
  1. En la pestaña "Vista", en el grupo "Opciones", despliegue "Idioma mostrado" y seleccione el idioma que desea que se muestre en el editor (Francés en este caso).
  2. Las opciones de menú se muestran en el idioma seleccionado. Si ninguna traducción corresponde al idioma seleccionado, las opciones de menú se muestran en inglés.
  3. Seleccione la opción "Product form".
  4. Pulse la barra espaciadora: el texto pasa a modo de edición.
  5. Introduzca el siguiente texto en francés: "Fiche produit".
  6. Presione la tecla Entrar para confirmar los cambios.
  7. Presione Esc para salir del modo de edición.
  8. Guarde el modelo de páginas (Guardar elemento o Ctrl + S).
  9. Vuelva al modo de visualización en inglés: en la pestaña "Vista", en el grupo "Opciones", despliegue "Idioma mostrado" y seleccione "Inglés".
  10. Actualice las páginas que utilizan el modelo de páginas haciendo clic en el ícono Aplicar los cambios del modelo de páginas en el encabezado del modelo. Valide la ventana de actualización.
  11. Cierre el modelo de páginas que se muestra en el editor.

Traducir los controles del sitio web

Un control puede mostrar diferente información al usuario:
  • un título,
  • una imagen, etc.
Algunas veces es necesario traducir esta información. Puede acceder a ella en las diferentes pestañas de la ventana de descripción del control.
Para traducir el enlace "Edit" de la página "PAGE_List_of_products":
  1. Seleccione el enlace "Edit".
  2. Abra la ventana de descripción del control (seleccione "Descripción" en el menú contextual).
  3. Introduzca el siguiente texto en francés: "Modifier".
  4. Valide.
  5. Guarde la página (Guardar elemento o Ctrl + S).

Traducir textos de programación

Todos los mensajes de su programa pueden traducirse a varios idiomas.
Veamos cómo traducir un mensaje de programación:
  1. Abra el editor de código (presione F2 en la página PAGE_List_of_products").
  2. Escriba el siguiente código en el evento "Declaraciones globales":
    Declaraciones globales (servidor)
    MyString is string = "List of products"
  3. Para traducir este tipo de mensajes, ubique el cursor en la cadena "List of products" y presione Ctrl + T. También puede ir a la pestaña "Código", en el grupo "Idiomas", despliegue "Traducir cadenas" y seleccione "Traducir mensajes".
  4. La ventana de edición de mensajes multilingües se abre. Esta ventana le permite traducir todos los mensajes del programa a todos los idiomas del proyecto.
  5. En "francés", introduzca "Liste des produits" y valide.
    Mensaje multilingüe
  6. El ícono Multilingüe aparece en el editor de código. Este ícono indica que el mensaje multilingüe está disponible en varios idiomas. Puede ver rápidamente las traducciones pasando el cursor por encima del ícono.
  7. Cierre el editor de código.
Cambiar el idioma mediante programación
Hemos traducido diferentes elementos en la página "PAGE_List_of_products". Ahora, veamos cómo cambiar el idioma del sitio web.
De forma predeterminada, el proyecto se ejecuta en el idioma definido para el proyecto en la pestaña "Idiomas" de la descripción del proyecto (opción "Descripción" en la pestaña "Proyecto").
En un sitio web, existen varios métodos para seleccionar el idioma que se utilizará. En la mayoría de los casos, se utiliza una opción de menú (o un botón "Idioma"). Puede cambiar el idioma de la aplicación en ejecución llamando a la función Nation en el código de la opción de menú.
En nuestro ejemplo, el modelo de páginas ya tiene 2 banderas que servirán para cambiar de idioma. Vamos a utilizarlas. El modo de funcionamiento es el siguiente: al hacer clic en una bandera, el sitio web se muestra en el idioma correspondiente. Por ejemplo, al hacer clic en la bandera de Estados Unidos, el sitio se muestra en inglés.
Para ello, se crearon dos controles Botón en el modelo (uno para cada idioma).

Botones de idioma

Los botones de idioma se encuentran en el modelo de la página PAGE_List_of_products.
  1. Si es necesario, abra la página "PAGE_List_of_products" en el editor (haga doble clic en el nombre de la página en el panel "Explorador de proyectos").
  2. Haga clic en el control Botón con la bandera de Estados Unidos y seleccione "Abrir modelo" en el menú contextual.
  3. Seleccione este control en el modelo de páginas. Haga clic derecho para abrir el menú contextual y seleccione "Código".
  4. Introduzca el siguiente código en el código Servidor de la opción de menú:
    Clic en BTN_English (LAYOUT_Language) (servidor)
    Nation(nationEnglish)
    PageUse(CurrentPage())
    Veamos este código rápidamente:
    • La función Nation cambia el idioma de ejecución del sitio. Las constantes pasadas como parámetros especifican el idioma que se va a utilizar.
    • La función PageUse recarga la página (la página actual en nuestro caso) para aplicar el nuevo idioma.
Realice las siguientes acciones: Escriba el siguiente código en el botón con la bandera de Francia:
Clic en BTN_Français (LAYOUT_Language) (servidor)
Nation(nationFrench)
PageUse(CurrentPage())

Hemos realizado todos los cambios necesarios en el modelo de páginas.:
  1. Cierre la ventana de código.
  2. Guarde el modelo de páginas (Guardar elemento o Ctrl + S).
  3. Actualice las páginas que utilizan el modelo de páginas haciendo clic en el ícono Actualizar páginas en el encabezado del modelo. Valide la ventana de actualización.
  4. Cierre el modelo de páginas que se muestra en el editor.

Prueba de la página

Hemos traducido algunos elementos de la aplicación. Ahora, vamos a cambiar el idioma en modo de prueba.
Para probar el cambio de idioma en la página PAGE_List_of_products:
  1. Haga clic en Probar proyecto en los botones de acceso rápido. La página se muestra en modo de prueba en inglés.
    Prueba de un proyecto multilingüe
  2. Haga clic en la bandera de Francia al final de la página.
  3. Los elementos traducidos se muestran en francés:
    Prueba de un proyecto multilingüe
  4. Cierre el navegador.
Información adicional: Herramientas de traducción
Hemos traducido manualmente algunos elementos del sitio web.
Sin embargo, WEBDEV ofrece varios métodos de traducción:
  • traducir los mensajes directamente en los editores: este es el método que utilizamos anteriormente para traducir algunos elementos del sitio. Con esta solución, puede utilizar una herramienta de traducción como Google Traductor (es posible que necesite una licencia), etc.
  • traducir grandes cantidades de texto mediante una herramienta externa (WDMSG y WDTRAD).

Traducir un texto con un programa de traducción

Las traducciones se pueden introducir directamente en la interfaz: este es el método que hemos utilizado hasta ahora.
Sin embargo, también es posible configurar WEBDEV para utilizar un programa o sitio web de traducción:
  1. En la pestaña "Inicio", en el grupo "Entorno", despliegue "Opciones" y seleccione "Opciones generales de WEBDEV".
  2. Vaya a la pestaña "Traducción".
    Opciones generales de WEBDEV
  3. Especifique:
    • Si los parámetros regionales deben activarse automáticamente según el idioma de entrada. En este caso, si el idioma requiere un conjunto de caracteres específico, este se seleccionará automáticamente.
    • El software o sitio de traducción que se va a utilizar. Puede utilizar WDDIXIO, un diccionario de traducción incluido en WDMSG (véase el párrafo siguiente), un software o sitio de traducción específico, o Google Traductor.
      Para obtener más información, consulte Traducción con Google Traductor.
    • Los idiomas utilizados.
  4. Una vez definidos los ajustes de traducción, puede utilizar el botón Botón de gestión de idiomas en las diferentes ventanas de descripción de los elementos del proyecto: este botón le permite utilizar el programa de traducción.

Traducción con WDMSG y WDTRAD

WDMSG es una herramienta opcional que permite:
  • extraer todos los mensajes del proyecto (títulos de controles, mensaje de código, títulos de ventanas, etc.) para traducirlos,
  • reintegrar los mensajes traducidos.
Los mensajes a traducir se extraen:
  • en un formato de texto que se puede configurar para utilizarse con diferentes herramientas de traducción.
  • en formato HFSQL.
WDMSG también incluye WDTRAD, una herramienta de traducción asistida. WDTRAD permite introducir fácilmente todas las traducciones de los recursos multilingües de un proyecto.
Póngase en contacto con el Departamento de ventas de PC SOFT para obtener más información sobre WDMSG y WDTRAD.

Otros elementos a traducir: mensajes del framework

El framework de WEBDEV contiene diferentes tipos de información y mensajes. Por ejemplo, los nombres de los días y meses utilizados por las funciones de gestión de fechas provienen del framework de WEBDEV. Para traducir una o varias bibliotecas del framework, debe utilizar WDINT (herramienta opcional proporcionada con WDMSG).
Este software permite obtener un archivo de extensión WDM que contiene todas las traducciones de las bibliotecas. Para usar este archivo en la aplicación:
  • utilice la función LoadError.
  • agregue el archivo en la pestaña "Idiomas" de la descripción del proyecto. Simplemente seleccione el idioma deseado y haga clic en la pestaña "Varios".
    Pestaña
Póngase en contacto con el Departamento de ventas de PC SOFT para obtener más información sobre WDINT.
Tabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 14/12/2023

Señalar un error o enviar una sugerencia | Ayuda local