Interfaz de Weblate

El interfaz de usuario actualmente es elaborado utilizando Bootstrap, jQuery y unas pocas bibliotecas de terceros.

Navegadores admitidos

Weblate es compatible con las versiones estables más recientes de todos los navegadores web principales, en todas las plataformas.

No se brinda servicio técnico explícito al emplear navegadores alternativos que hacen uso (directo o a través del API de visualización web de la plataforma) de la versión más reciente de WebKit, Blink o Gecko. Sin embargo, Weblate se visualizará y funcionará correctamente en esos navegadores, en la mayoría de los casos.

Es posible que navegadores más antiguos funcionen, pero determinadas funciones se verán limitadas.

Accesibilidad

Weblate targets WCAG 2.2 Level AA for new and changed user-facing functionality where practical. Use semantic HTML and Bootstrap components before adding custom interaction code.

Cuando cambie el primer plano:

  • Asegúrese que todos los controles interactivos sean accesibles y utilizables mediante el teclado.

  • Mantenga un orden de enfoque lógico y conserva el estilo de enfoque visible.

  • Prefer native buttons, links, inputs, selects, and tables over custom widgets.

  • Associate every form control with a label, help text, and validation errors where applicable.

  • No utilice el color, la forma del icono o la posición como única manera de transmitir el estado.

  • Anunciar cambios de estado dinámicos que no son visibles para las tecnologías de asistencia.

  • Respete las preferencias de movimiento reducido para el comportamiento de animación o desplazamiento.

  • Se realizaron pruebas de flujo de trabajo modificados con navegación solo mediante teclado y, cuando fue posible, una comprobación puntual con un lector de pantalla.

Gestión de dependencias

Puede ser un poco complicado instalar y administrar bibliotecas de terceros en el cliente de un proyecto Django. Esta sección proporciona una guía paso a paso sobre como instalar y administrar bibliotecas de terceros utilizadas por el lado del cliente de Weblate mediante Webpack.

Pre‐requisitos

Antes de proceder con una instalación, asegúrese que tenga los siguientes pre‐requisitos:

  • Una versión compatible de Node.js.

  • El gestor del paquete yarn está instalado en su sistema.

  • Ejecute cd client.

  • Ejecute yarn install --check-files.

Instalación

Para instalar una biblioteca, primero ejecuta las instrucciones siguientes:

yarn add <lib-name>

Importar la Biblioteca

Después, hay dos maneras para mejorar la biblioteca:

  1. Si es una biblioteca de proyecto-amplio (es utilizada/necesaria en todas/mayoría de páginas):

    • Importa la biblioteca en src/main.js.

    • Y decláralo dentro del ámbito global (si es necesario).

  2. Si es la biblioteca específica de la página (se utiliza la biblioteca dentro de una página específica o plantilla):

    • Crea un archivo nuevo nombrado src/<lib-name>.js.

    • Importa la biblioteca dentro de ello. Después inyéctalo en el objeto ventana para ser accesible globalmente.

    • Añade un apunte en webpack.config.js: <nombre-lib>: "src/<nombre-lib>.js".

    • Agrega nombre de biblioteca en formación excludePrefixes en mainLicenseTransform en webpack.config.js.

    • Añade el archivo de la licencia en additionalFiles en LicensePlugin dentro del plugins de formación en webpack.config.js.

    • Crea una función <lib-name>LicenseTransform para el archivo de la licencia introducida en los pasos anteriores y utilízalo.

    Nota: Remplaza <lib-name> con el nombre actual de la biblioteca de terceros.

Compilar la Biblioteca

Compila las bibliotecas utilizadas por el proyecto, ejecutando la instrucción siguiente:

yarn build

Incluyendo la Biblioteca

Ahora la biblioteca está construida y preparada para su uso. Para incluirla siga estos pasos:

  1. Si la biblioteca fue importada en src/main.js, ningún paso más se requiere (como ya está incluido en base.html).

  2. Si la biblioteca fue importada en su archivo src/<lib-nombre>.js específico, en weblate/plantillas utilice las etiquetas incluidas para enlazar la construcción estática del archivo JavaScript:

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

Estilo de codificación

Weblate depende de Biome para formato y comprobar el código JavaScript y CSS. Las plantillas de Django se formatean y se analizan por separado mediante djade y djlint.

Localización

Si necesitaría texto visible para el usuario en el código frontend, éste sería localizable. En la mayoría de los casos, basta con encapsular el texto dentro de la función gettext, pero hay disponibles características más complejas:

document.write(gettext("this is to be translated"));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext("literal for the singular case",
        "literal for the plural case", object_count);

fmts = ngettext("There is %s object. Remaining: %s",
        "There are %s objects. Remaining: %s", 11);
s = interpolate(fmts, [11, 20]);
// s is "There are 11 objects. Remaining: 20"

Ver también

Tema de traducción en la documentación de Django

Iconos

Weblate actualmente utiliza Iconos de Diseño Material, en caso que esté buscando símbolo nuevo, compruebe ese.

Adicionalmente, hay scripts/optimize-svg para reducir el tamaño del SVG tanto de los iconos estén embebidos por dentro del HTML para conceder estilo de las rutas.