Concevoir des applications pour un public mondial

L’internationalisation est le processus de conception et de développement d’une application de manière à permettre une localisation facile dans différentes langues, régions et contextes culturels. Découvrez l’importance d’i18n dans le développement Web et quelques étapes pour y parvenir efficacement.

Alors qu’Internet continue de connecter les gens du monde entier, la conception et le développement d’applications Web destinées aux utilisateurs de différentes régions et localités sont devenus essentiels. Ce processus, connu sous le nom internalisationgarantit que nos applications sont accessibles, fonctionnelles et culturellement appropriées pour les utilisateurs du monde entier.

Dans cet article, nous explorerons l’importance de l’internalisation dans le développement Web et discuterons de certaines mesures que nous pouvons prendre pour y parvenir efficacement.

Qu’est-ce que l’internationalisation ?

Internationalisation, souvent abrégée en i18n (où 18 représente le nombre de lettres omises entre « i » et « n »), est le processus de conception et de développement d’une application de manière à permettre une localisation facile dans différentes langues, régions et contextes culturels. Cela implique de séparer l’interface utilisateur et le contenu de la base de code de l’application pour faciliter la traduction et l’adaptation.

Pourquoi est-ce important?

• Base d’utilisateurs élargie: En adaptant nos applications à différentes régions et localités, nous pouvons atteindre un public mondial plus large, augmentant ainsi notre base d’utilisateurs et notre clientèle potentielle.
• Expérience utilisateur améliorée: L’internationalisation permet aux utilisateurs d’accéder à nos applications dans leur langue et leur contexte culturel préférés, offrant ainsi une expérience plus personnalisée et plus engageante.
• Conformité à la réglementation: Dans certains pays, il existe des exigences légales pour que les candidatures soient accessibles dans la langue locale. En internationalisant notre application, nous garantissons le respect de ces réglementations et pouvons éviter toute complication juridique qui pourrait survenir.

Pour le reste de l’article, nous énumérerons quelques réflexions importantes à garder à l’esprit lorsque l’on tente de parvenir à une internationalisation efficace au sein d’une application.

Séparer le texte du code

L’une des choses les plus importantes que nous puissions faire pour faciliter la traduction et l’adaptation du texte dans notre application est d’extraire toutes les chaînes de texte destinées aux utilisateurs de notre code et de les stocker dans des fichiers de ressources externes ou des bases de données.

Par exemple, au lieu de coder en dur une chaîne de texte dans notre code JavaScript comme ceci :

const greeting = "Hello, World!";

Nous pouvons le stocker dans un fichier de ressources séparé comme en.json:

{
  "greeting": "Hello, World!"
}

Une fois que nous avons séparé nos chaînes de texte du code et les avons stockées dans des fichiers de ressources externes, nous pouvons facilement créer des fichiers de traduction pour d’autres langues. Ces fichiers de traduction contiendront les versions traduites des chaînes de texte.

Par exemple, pour créer un fichier de traduction pour une autre langue, comme le français, nous pouvons créer un nouveau fichier de ressources nommé fr.json:

{
  "greeting": "Bonjour, le monde !"
}

Nous pouvons répéter ce processus pour toutes les langues supplémentaires que nous souhaitons prendre en charge, en créant un nouveau fichier de traduction pour chaque langue et en fournissant les traductions appropriées.

es.json (Espagnol)

{
  "greeting": "¡Hola, Mundo!"
}

de.json (allemand)

{
  "greeting": "Hallo, Welt!"
}

Chaque fichier de traduction suit la même structure, avec les mêmes clés que le fichier de ressources d’origine (en.json dans ce cas), mais avec des valeurs traduites spécifiques à la langue cible.

Utiliser les bibliothèques de localisation

Une fois que nous avons créé les fichiers de traduction pour différentes langues, nous pouvons utiliser des bibliothèques de localisation pour gérer le chargement et la récupération des traductions dans notre application. Ces bibliothèques fournissent des méthodes et des outils pratiques pour gérer les traductions et basculer dynamiquement entre différentes langues.

Une bibliothèque de localisation populaire en JavaScript est i18suivant. Il offre des fonctionnalités puissantes pour gérer l’internationalisation et la localisation, telles que la traduction de chaînes, l’interpolation, la pluralisation, etc. Voici un exemple de la façon dont nous pouvons importer et initialiser i18next pour gérer la localisation dans notre application :

import i18next from "i18next";
import en from "./en.json";
import fr from "./fr.json";
import es from "./es.json";
import de from "./de.json";

i18next.init({
  lng: "en", 
  resources: {
    en: {
      translation: en,
    },
    fr: {
      translation: fr,
    },
    es: {
      translation: es,
    },
    de: {
      translation: de,
    },
  },
});

Dans cet exemple, nous initialisons i18next et fournissez la langue par défaut comme 'en' (Anglais). Le resources L’objet contient les données de traduction pour chaque langue. Chaque langue est identifiée par son code de langue (par exemple, 'en', 'fr', 'es', 'de') et a un imbriqué translation objet qui contient les chaînes de texte traduites.

Une fois notre configuration de traduction initialisée, nous pouvons alors utiliser le i18next.t() fonctionner n’importe où dans notre application pour recevoir des chaînes traduites en fonction de la clé de traduction qui a été spécifiée et de la langue sélectionnée par l’utilisateur.

const greeting = i18next.t("greeting");

console.log(greeting); 

Enfin, nous souhaitons offrir à l’utilisateur final la possibilité de basculer entre différentes langues. Le i18next la bibliothèque fournit le changeLanguage() méthode que nous pouvons utiliser pour changer dynamiquement de langue dans notre application. Cela déclenchera i18next pour charger et afficher les traductions pour la langue choisie.

i18next.changeLanguage("fr"); 

Les bibliothèques de localisation comme i18next offrent souvent des fonctionnalités supplémentaires pour gérer des scénarios de traduction complexes, tels que la pluralisation, les traductions basées sur le genre et l’interpolation variable. Assurez-vous de vérifier le Documentation de la bibliothèque spécifique que vous choisissez pour plus d’informations sur l’utilisation avancée.

Formater les dates, les heures et les nombres

Les dates, les heures et les nombres ont souvent des formats différents selon les paramètres régionaux. Nous devons utiliser des bibliothèques de localisation ou des fonctionnalités de langage intégrées disponibles dans notre langage de programmation pour garantir un formatage précis et localisé des dates, des heures et des nombres.

En JavaScript, le International L’objet fournit un ensemble de fonctionnalités pour formater les dates, les heures et les nombres en fonction de différents paramètres régionaux. Voici un exemple de formatage d’une date dans le en-US lieu.

const date = new Date();
const options = { year: "numeric", month: "long", day: "numeric" };
const formattedDate = new Intl.DateTimeFormat("en-US", options).format(date);

console.log(formattedDate);

Voici un autre exemple d’utilisation de Intl s’opposer à un formatage différent des chiffres entre les États-Unis et l’Allemagne.

const number = 1004580.89;
const formattedNumberDE = new Intl.NumberFormat("de-DE").format(number);
const formattedNumberUS = new Intl.NumberFormat("en-US").format(number);

console.log(formattedNumberDE); 
console.log(formattedNumberUS); 

Nous fournirons une analyse plus approfondie de Intl objet et ses caractéristiques dans un prochain article.

Considérez les langues de droite à gauche (RTL)

En plus de prendre en charge différentes langues, il est essentiel de prendre en compte la mise en page et l’alignement du texte pour les langues écrites de droite à gauche (RTL), comme l’arabe, l’hébreu et l’ourdou. Il est important d’adapter la mise en page et l’orientation du texte de notre application aux langues RTL pour offrir une expérience transparente aux utilisateurs de ces régions.

CSS fournit un dir propriété que nous pouvons utiliser pour gérer le texte RTL. En définissant le dir propriété à rtl (ou autoqui laisse l’agent utilisateur décider), nous pouvons garantir que le texte et les éléments de notre application sont correctement alignés pour les langages RTL.

<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>

<hr />

<p dir="rtl">
  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
</p>

Dans l’exemple de code ci-dessus, nous alignons les textes anglais et arabe séparés dans l’alignement approprié.

Conclure

En conclusion, l’internationalisation (i18n) est un processus crucial dans le développement Web qui permet aux applications de s’adresser aux utilisateurs de différentes régions et localités.

En séparant le texte du code, en utilisant des bibliothèques de localisation comme i18next ; formater les dates, les heures et les nombres de manière appropriée ; et en considérant les langages de droite à gauche (RTL), nous pouvons créer des applications plus accessibles, fonctionnelles et culturellement appropriées pour un public mondial.

Outre les étapes mentionnées dans cet article, il existe d’autres considérations liées à l’internationalisation, telles que la prise en charge de la monnaie, des unités de mesure et de l’accessibilité. Dans les articles suivants, nous passerons en revue certaines de ces autres considérations à garder à l’esprit, ainsi qu’un exercice pratique d’installation et d’utilisation d’une bibliothèque d’internalisation dans une application JavaScript.