Interfície del weblate

Actualment, la interfície es construeix amb Bootstrap, jQuery i poques biblioteques de tercers.

Supported browsers

Weblate admet les versions més recents i estables de tots els navegadors i plataformes principals.

Els navegadors alternatius que utilitzen la darrera versió de WebKit, Blink o Gecko, ja sigui directament o mitjançant l’API de visualització web de la plataforma, no són compatibles explícitament. Tanmateix, Weblate també hauria de mostrar-se i funcionar correctament (en la majoria dels casos) en aquests navegadors.

Els navegadors antics poden funcionar, però algunes funcions poden estar limitades.

Accessibility

Weblate s’adreça al nivell AA de WCAG 2.2 per a funcionalitats noves i modificades per a l’usuari quan sigui pràctic. Utilitzeu components HTML semàntic i Bootstrap abans d’afegir codi d’interacció personalitzat.

Quan canvieu la interfície:

• Feu que tots els controls interactius siguin accessibles i utilitzables amb un teclat.

• Mantingueu l’ordre del focus lògic i preserveu l’estil del focus visible.

• Preferiu els botons, enllaços, entrades, seleccions i taules nadius als ginys personalitzats.

• Associa tots els controls de formulari amb una etiqueta, text d’ajuda i errors de validació si escau.

• No utilitzeu el color, la forma de la icona o la posició com a única manera de transmetre l’estat.

• Anunciar canvis d’estat dinàmics que d’una altra manera no són visibles per a la tecnologia d’assistència.

• Respecteu les preferències de moviment reduït per a l’animació o el comportament de desplaçament.

• Proveu els fluxos de treball canviats amb la navegació només amb el teclat i, quan sigui pràctic, una comprovació puntual del lector de pantalla.

User interface conventions

Documentation links

Use the information icon for contextual links to the Weblate documentation instead of a textual Documentation button. In Django templates, use the documentation_icon template tag so that the link has consistent styling, labeling, and external-link behavior. Documentation icons are interactive links and have to remain keyboard-focusable. Keep textual documentation links when they are part of explanatory prose rather than a contextual action.

Gestió de la dependència

Instal·lar i gestionar biblioteques de «tercers» al «client» d’un projecte Django pot ser una mica complicat. Aquesta secció proporciona una guia pas a pas sobre com instal·lar i gestionar biblioteques de tercers utilitzades pel «costat client» de Weblate mitjançant «Webpack».

Prerequisites

Abans de continuar amb una instal·lació, assegureu-vos que teniu els requisits previs següents:

• Una versió Node.js compatible.

• El gestor de paquets yarn està instal·lat al vostre sistema.

• Executeu cd client.

• Executeu yarn install --check-files.

Installation

Per instal·lar una biblioteca, primer executeu l’ordre següent:

yarn add <lib-name>

Importing the Library

Aleshores, hi ha dues maneres d’importar la biblioteca:

1. Si es tracta d’una biblioteca per a tot el projecte (s’utilitza/es necessita a totes/la majoria de les pàgines):

   • Importa la biblioteca a src/main.js.

   • I declarar-ho a l’àmbit global (si cal).

2. Si és una biblioteca específica de la pàgina (la biblioteca s’utilitza en una pàgina o plantilla específica):

   • Creeu un fitxer nou anomenat src/<lib-name>.js.

   • Importeu-hi la biblioteca. A continuació, injecteu-lo a l’objecte window perquè sigui accessible globalment.

   • Afegiu una entrada a webpack.config.js: <lib-name>: "src/<lib-name>.js".

   • Afegiu el nom de la biblioteca a la matriu excludePrefixes a mainLicenseTransform a webpack.config.js.

   • Afegiu el nom del fitxer de llicència a additionalFiles a LicensePlugin a la matriu plugins a webpack.config.js.

   • Creeu una funció <lib-name>LicenseTransform per al fitxer de llicència introduït als passos anteriors i utilitzeu-la.

   Nota: substituïu <lib-name> pel nom real de la biblioteca de tercers.

Building the Library

Creeu les biblioteques utilitzades pel projecte executant l’ordre següent:

yarn build

Including the Library

Ara la biblioteca està construïda i llesta per al seu ús. Per incloure’l seguiu aquests passos:

1. Si la biblioteca s’ha importat a src/main.js, no calen més passos (ja que ja està inclosa a base.html).

2. Si la biblioteca s’ha importat al seu fitxer específic src/<lib-name>.js, a weblate/templates utilitzeu les etiquetes d’inclusió per enllaçar amb el fitxer JavaScript estàtic creat:

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

Estil de codificació

Weblate es basa en Biome per formatar i lligar el codi JavaScript i CSS. Les plantilles de Django tenen un format i un fil per separat per djade i djlint.

Localització

Si necessiteu algun text visible per l’usuari al codi de la interfície, hauria de ser localitzable. En la majoria dels casos, tot el que necessiteu és embolicar el vostre text dins de la funció gettext, però hi ha funcions més complexes disponibles:

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"

Vegeu també

Tema de traducció a la documentació de Django

Icons

Weblate actualment utilitza Icones de disseny de materials, en cas que cerqueu un símbol nou, comproveu-ho.

A més, hi ha scripts/optimize-svg per reduir la mida de l’SVG, ja que la majoria de les icones estan incrustades dins de l’HTML per permetre l’estil dels camins.