Firefox OS : Localiser son application

Actuellement, le Marketplace Firefox gère trois langues : anglais (US), espagnol et portugais (Brésil).

Mais comment avec un code unique localiser son application ?

Localiser le fichier manifest.webapp de votre application Firefox OS

Afin de définir la locale par défaut de l’application, il faut définir la clé “default_locale” :

{
  "name": "NomApp",
  "developer": {
    "name": "Mon organisation",
    "url": "http://url.organisation.org"
  },
  "description": "Mon application",
  "default_locale": "fr"
}

Pour localiser le nom de l’organisation ou la description, il faut ajouter une clé “locales” :

{
  "name": "NomApp",
  "developer": {
    "name": "Mon organisation",
    "url": "http://url.organisation.org"
  },
  "description": "Mon application",
  "default_locale": "fr",
  "locales": {
    "es": {
      "description": "Mi aplicación",
      "developer": {
        "name": "Mi organización",
        "url": "http://es.url.organisation.org"
      }
    },
    "it": {
      "description": "La mia applicazione",
      "developer": {
        "name": "La mia organizzazione",
        "url": "http://it.url.organisation.org"
      }
    }
  }
}

Localiser le contenu de votre application Firefox OS

Initialisation

Pour l’application, c’est différent. Il faut tout d’abord inclure soit la librairie webL10n (fichier) – créé par Fabien Cazenave (@fabi1cazenave), hébergé sur GitHub (fabi1cazenave\\webL10n) et compatible IE -, soit la version de Firefox OS(fichier) et un fichier de type ressources qui contient les liens vers les différentes langues:

<html>
  <head>
    <script src="shared/js/l10n.js"></script>
    <link rel="resource" type="application/l10n" href="l10n_app.ini" />
  </head>
</html>

Fichiers de langue

Ce fichier INI a une architecture simple. Tout d’abord on importe la langue par défaut, puis pour chaque langue, on crée une section avec les différents imports pour chaque fichier de langue. Mais un exemple vaut mieux que quelques mots :

@import url(app.en-US.properties)

[fr]
@import url(app.fr-FR.properties)

Ces fichiers properties ont la même architecture : une clé avec une chaine.

# Pour le fichier app.fr-FR.properties
about=A propos
author=Auteur

# Pour le fichier app.en-US.properties
about=About
author=Author

Localisation du code HTML

Désormais, il reste à l’intégrer au code HTML. Pour cela, dans du code HTML5, il faut créer un attribut data-l10n-id qui contiendra la clé. Par exemple :

<header data-l10n-id="about"></header>
<span data-l10n-id="author"></span>

Afin d’éviter un effet de clignotement, je conseille de remplir la balise avec la langue par défaut. Ainsi le précédent exemple ressemblerait à cela :

<header data-l10n-id="about">About</header>
<span data-l10n-id="author">Author</span>

Localisation des attributs HTML

Mais la puissance de la librairie webL10N ne s’arrête pas là car cette librairie permet aussi de localiser les attributs.
Imaginez ce code avec un élément HTML qui contient un attribut localisable :

<button data-l10n-id="btnSend" title="Titre du Bouton">Message du bouton</button>

Et avec le fichier de langue suivant, vous traduisez les attributs de votre élément HTML.

[en-US]
btnSend = Button Message
btnSend.title = Button Title
[fr]
btnSend = Message du bouton
btnSend.title = Titre du Bouton

Gestion d’arguments dans la localisation

Continuons à imaginer que vous souhaitiez traduire une phrase avec une variable à l’intérieur. Par exemple, ma phrase sera “Bienvenue, Progi1984 ! Vous utilisez le projet webL10N.” avec mon pseudo et le nom du projet comme variables.

Pour le code HTML, on utilise un nouvel attribut HTML5 data-l10n-args qui contient les arguments sous forme d’un JSON.

<p data-l10n-id="welcomeuse" data-l10n-args='{"user": "Progi1984", "project": "webL10N" }'></p>

Pour le fichier de langue, les arguments se trouvent entre accolades.

[en-US]
welcomeuse = Welcome, {{user}}! You use the project {{project}}.
[fr]
welcomeuse = Bienvenue, {{user}} ! Vous utilisez le projet {{project}}.

Gestion du Pluriel

Maintenant que vous savez les arguments sans problème, nous allons les utiliser pour gérer le pluriel.
Prenons la phrase “x Articles en attente”, elle est variable en fonction du nombre d’articles :

  • 0 : “Aucun article en attente”
  • 1 : “1 article en attente”
  • 2 et + : “x articles en attente”

Au niveau du code HTML, on va utiliser l’argument “num” qui contiendra le nombre d’articles :

<p data-l10n-id="articlespending" data-l10n-args='{"num": "0" }'></p>

Au niveau du fichier de langues, on va utiliser la macro plural() :

[en-US]
articlespending= {[ plural(num) ]}
articlespending[zero]  = No pending article
articlespending[one]   = One pending article
articlespending[other] = {{num}} pending articles
[fr]
articlespending= {[ plural(num) ]}
articlespending[zero]  = Aucun article en attente
articlespending[one]   = 1 article en attente
articlespending[other] = {{num}} articles en attente

Ainsi, en fonction du nombre d’articles (“num“), webL10N prendra la phrase correcte pour traduire.

Conclusion

Pour conclure, voici les étapes pour localiser son application Firefox OS :

  • Inclure dans l’entête HTML le fichier javascript l10n.js
  • Inclure dans l’entête HTML le fichier INI des langues
  • Créer les fichiers de langues (au format PROPERTIES)
  • Modifier le fichier HTML pour inclure les attributs personnalisés data-l10n-id

Aide :

[EDIT 16/04/2013 08h20] : Correction de la syntaxe de certains attributs suite à une erreur de syntaxe. Merci à @jwajsberg
[EDIT 17/04/2013 14h00] : Ajout du lien vers la librairie webL10N suite au tweet de @nhoizey
[EDIT 17/04/2013 16h30] : Rectification du lien vers le fichier l10n.js du projet B2G suite au tweet de @nhoizey
[EDIT 17/04/2013 22h30] : Mise à jour sur la localisation des attributs suite au tweet de @jwajsberg
[EDIT 17/04/2013 23h20] : Mise à jour sur la gestion des arguments et du pluriel suite au tweet de @fabi1cazenave

Cet article Firefox OS : Localiser son application est apparu en premier sur RootsLabs.

tags : application développement firefox firefox os os son
1 vote
15/04/2013 10:30
Ecrit par Progi1984 - Afficher l'article originel
Vus : 630
Publié par Progi1984 : 78