search

AtelierCartographie / eatlas

Espace mondial : l'Atlas
https://espace-mondial-atlas.sciencespo.fr
MIT License
4 stars 4 forks source link

Gestion de multilangue #145

Closed naholyr closed 4 years ago

naholyr commented 6 years ago

Le projet doit être intégralement en anglais/français (voire plus), cela inclut :

Cette problématique doit être adressée globalement avant d'attaquer l'implémentation, dans un premier temps sans recul on va se contenter de fournir les résumés en anglais et les visiteurs anglophones devront s'en contenter, mais à plus long terme il s'agit de répondre aux questions suivantes :

Pas mal de questions à étudier et trancher

antoinerio commented 6 years ago

Bonjour Nicolas, Ces questions méritent réflexion en effet et mes collègues de l'Atelier de carto sont actuellement en congés, nous pourrons réellement trancher à partir du 3 septembre. Ceci dit, si cela peut permettre de répondre à certains points. La priorité est dans un premier temps de pouvoir accéder aux résumés FR et EN sur les pages articles et les pages parties (topic). La totalité du site sera traduite plus tard mais il faut en effet prévoir cette intégrations de traductions.

Je m'avance peut être mais je ne vois pas d'inconvénient à associer les objets FR et EN mais à voir quelle est la meilleure articulation coté BO/FO et le niveau de complexité en termes de développement.

Les contenus FR et EN doivent être séparés dans le moteur de recherche.

naholyr commented 6 years ago

Comme vu aujourd'hui avec Thomas et Delphine, pour implémenter cette partie on partirait sur des articles séparés, et une génération parallèle de deux sites (fr et en). Les URLs actuelles se verraient préfixées par la langue, et un lien fr/en serait présent sur chaque page pour basculer vers l'autre version.

Si on part sur deux ressources séparées (un article FR + un article EN) alors les grandes étapes de conception/dév sont les suivantes :

naholyr commented 5 years ago
  • Ajouter au back-office et aux données la notion de "lien" entre deux ressources pour indiquer que la version FR et la version EN sont deux mêmes articles

On n'a pas abordé cette question mais je suppose que les fichiers sont nommés de la même manière (ex. 4A07) en FR et EN, donc je pourrais simplement intégrer la langue dans l'identifiant technique d'ElasticSearch, par contre cette solution empêcherait de modifier la langue a posteriori, cette donnée faisant partie de l'identité technique de la ressource elle ne serait définissable qu'à la saisie.

À valider par @TomBor @delphinelrcl avant de démarrer.

  • Activer ce lien pour les types de ressources concernés (a priori tous ?)

À confirmer

  • Prendre en compte la gestion de la homepage racine (par exemple une redirection dans la config nginx "/ → /fr/")
  • Idéalement il faudrait mettre en place les redirections pour les anciennes URLs : un ensemble de 301 à configurer dans nginx (par exemple "/recherche.html" → "/fr/recherche.html")

Toujours vrai surtout que le site est déjà publié. À voir en fonction des stats analytics, peut-être que le nombre de visite est suffisamment faible pour l'instant pour s'épargner ça.

  • Lors de la génération d'une page ressource (ex. article) alors il y a deux possibilités :
    • Si la ressource existe aussi dans l'autre langue, on ne fait rien de spécial
    • Si elle n'existe pas il y aura plusieurs choix :
    • Désactivation du switch de langue (le plus simple)

On reste sur cette option, pour l'argument de l'URL imprévisible surtout : le bouton de switch sera alors désactivé avec un title explicatif.

Première étape : traduction des éléments fixes d'interface du frontend (tous les libellés disséminés par-ci par-là) → ~0.5 à 1j, je prépare le socle technique et les fichiers de traductions initiaux et je vous laisserai le soin de la traduction des pages globales (à propos, homepage, etc…). A priori on doit pouvoir se contenter d'un simple dictionnaire pour remplacer les chaînes, à part pour le moteur de recherche où on risque d'avoir besoin de pluralisation, comme ce besoin est très localisé je ne pense pas avoir besoin d'intégrer un système de traduction complexe, un objet JS maison sera largement suffisant.

naholyr commented 5 years ago

Attention au niveau du parsing de document, les métas sont en français, par exemple Résumé-FR dans l'article. Les articles en anglais gardent bien la même nomenclature (nom des méta en français) ?

TomBor commented 5 years ago

Pour reprendre tes différents points : Identifiant Les fichiers seront nommés de la même manière mais à y réfléchir ça serait plus pratique d'ajouter une référence à la langue. Car à l'import de tous les fichiers traduits va le drive, on fera moins d'erreur si le nom du fichier à une référence à langue, surtout avec les cartes qui ont des noms de fichiers très normés. On pourrait ajouter la référence avant l'identifiant EN-1A02-... ou après l'identifiant 1A02-EN-... Si c'est trop compliqué on reste sur ta proposition

Concerne toutes les ressources En théorie oui, mais les photos sont peut être à part. Car le fichier/l'image reste la même, ceux sont seulement les métadonnées qui sont traduites.

Redirection Effectivement le site est déjà en ligne mais la communication sur le site n'a pas commencée, il est donc encore temps de basculer sur des adresses en '/fr'. Seulement si ce travail peut être fait rapidement d'ici la fin de semaine.

Métas Oui on reste sur les mêmes noms de métas. Dans l'idéal il faudrait ajouter le support d'une nouvelle version des métas qui évite l'écueil actuel (accent, apostrophe). Et faire cohabiter les deux. Par exemple en adoptant celle dans le code

naholyr commented 5 years ago

Identifiant

OK pour ajouter la langue au nom de fichier, en suffixe, le reste devrait suivre Du coup je pré-remplis la langue à partir de ça

Concerne toutes les ressources En théorie oui, mais les photos sont peut être à part. Car le fichier/l'image reste la même, ceux sont seulement les métadonnées qui sont traduites.

A priori éviter la duplicate de contenu n'est pas évident, à étudier

Redirection Seulement si ce travail peut être fait rapidement d'ici la fin de semaine.

J'espère ;)

Métas Oui on reste sur les mêmes noms de métas. Dans l'idéal il faudrait ajouter le support d'une nouvelle version des métas qui évite l'écueil actuel (accent, apostrophe). Et faire cohabiter les deux. Par exemple en adoptant celle dans le code

Il y a des chances que ce soit très simple à mettre en place, à suivre…

naholyr commented 5 years ago

Point d'avancement :

J'ai terminé l'internationalisation des éléments d'interface du front, c'était bien plus long qu'anticipé, voici les quelques questions secondaires à lever et le reste-à-faire approximatif :

J'ai atteint le stade où les URLs ont été modifiés et le site ne peut donc plus passer en prod avant finalisation de la feature i18n. Je pusherai donc une partie des commits du jour sur une autre branche nommée i18n et basculerai sur les petites corrections/évolutions listées hier sur master.

naholyr commented 5 years ago

Testable en preview en local (je n'ai pas du tout testé la génération encore) en checkoutant la branche i18n

naholyr commented 5 years ago

Question sur les pages listant des articles :

On n'a également pas du tout parlé des définitions ! Comment souhaitez-vous aborder la chose ? Pour le moment je pars sur l'idée d'uploader un deuxième document "lexique" avec une langue différente, pour le moment c'est un document unique il faut donc faire sauter cette modification.

Question restantes :

  • Comment gérer la home "globale" ?
    • je propose une redirection dans nginx / => /fr/index.html
TomBor commented 5 years ago

Comme la logique globale du site sera un affichage lié à la langue, la page rubrique devrait se limiter à la langue sélectionnée. Quand à la recherche, oui on mixe les contenus à condition de rajouter un filtre langue et comme tu le propose d'indiquer lorsque la ressource n'est pas dans la langue sélectionnée.

Définitions => Il y aura bien un deuxième lexique

TomBor commented 5 years ago
naholyr commented 5 years ago

Normalement tout est OK concernant le multi-langue, les problématiques d'URL dans l'HTML final généré sont corrigées. Reste le filtre dans l'admin et les traductions de base pour finaliser demain matin.

naholyr commented 5 years ago

La fonctionnalité est normalement complètement implémentée à ce stade : quid du merge dans "master" ? Lors du prochain passage en prod, incluez-vous la version multilingue ou seulement les quelques corrections annexes ?

TomBor commented 5 years ago

Super. Ça serait bien de passer tout ce travail en master et par la même occasion en pprd pour s'assurer que cela fonctionne. Mais un point bloque : les traductions. On doit d'abord officialiser la traduction de l'interface et des pages statiques (ce que tu as préparé). Du coup, on doit attendre, à moins que l'on puisse faire un merge et "masquer/désactiver" le menu de sélection de langue.

TomBor commented 5 years ago

@naholyr le backoffice est traduit, mais comment on accède à la version anglaise ou plus généralement comment on change la langue du bo ?

TomBor commented 5 years ago

Un point restant, la question des redirections.

naholyr commented 5 years ago

Du coup, on doit attendre, à moins que l'on puisse faire un merge et "masquer/désactiver" le menu de sélection de langue.

Traité par la #172

@naholyr le backoffice est traduit, mais comment on accède à la version anglaise ou plus généralement comment on change la langue du bo ?

Actuellement c'est basé sur la langue du navigateur, je vais ajouter un lien pour changer dans le footer ce sera en effet plus simple

Edit: ajout des petits drapeaux dans le BO dans le commit fa2256e

Un point restant, la question des redirections.

Là-dessus c'est vous qui avez les billes :

TomBor commented 5 years ago

Après test, sur la question du stylage du sélecteur de langue. Je te soumet mon idée @naholyr car je ne suis pas en mesure de la mettre en pratique. De manière générale, le sélecteur de langue utilise du texte à la place des drapeaux (français, english). Ça je l'ai changé.

ATTENTION dans le cas où le titre du topic est long, il faudrait le couper et mettre "...", comme pour la topbar, cf image ci-dessous avec ce css

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

capture d ecran 2018-10-12 a 15 00 19

Question : la langue du navigateur à une influence sur le sélecteur de langue ?

naholyr commented 5 years ago

C'est OK pour les modifications d'emplacement du sélecteur de langue et le lien dans le breadcrumb. J'ai mis des largeurs arbitraires pour l'ellipsis (480px en desktop, 200px en mobile).

Note : le cas du nom de rubrique non traduit n'était en fait pas restreint au BO, on avait systématiquement le nom fr dans le breadcrumb de l'article également. J'ai fait un tour global pour utiliser toujours le nom traduit du topic :

Question : la langue du navigateur à une influence sur le sélecteur de langue ?

La langue navigateur n'est pas du tout prise en compte côté front. Vu ensemble : a priori on va éviter les redirections automatiques pouvant être perturbantes.

jri-sp commented 5 years ago

Bonjour,

C'est techniquement possible à faire avec nginx en utilisant des rewrite rules et la variable $http_accept_language, mais du coup ça fait quand même des redirections automatiques. Et sinon c'est très rare de voir ça implémenté côté config du serveur web, c'est souvent géré dans les frameworks ou côté applicatif en tout cas, mais ça veut pas dire que c'est pas possible à faire.

A vous de voir ce qui vous arrange...

TomBor commented 5 years ago

merci @jri-sp à minima, une redirection de la page d'accueil. Voir ce que disait Nicolas :

On n'a plus de "home" globale, il faudra donc aussi ajouter, je pense, ces deux redirections : / → /fr/index.html /index.html → /fr/index.html Je ne sais pas si les deux sont nécessaires, il infère peut-être l'une à partir de l'autre

Et on peut s'épargner je pense une redirection de toutes les pages vers leurs versions fr, sachant que les stats de consultation sont pour le moment faible et essentiellement sur la page d'accueil.

La branche statging est à jour avec mes derniers ajouts, quelques corrections de css et l'ajout de contenu pour les métas liés au partage sur les réseaux sociaux.

TomBor commented 5 years ago

Tout fonctionne bien en PPRD.

@jri-sp Je propose de passer en prod et d'ajouter la redirection de la page d'accueil. Comme je ne connais pas le fonctionnement des redirections, peux-tu t'en occuper Jérémy ?

Merci d'avance

TomBor commented 5 years ago

@jri-sp les stats analytics ont un peu évolués depuis. Du coup, si possible il faudrait élargir les redirections aux pages de topics :

naholyr commented 5 years ago

Et sinon c'est très rare de voir ça implémenté côté config du serveur web, c'est souvent géré dans les frameworks ou côté applicatif en tout cas, mais ça veut pas dire que c'est pas possible à faire.

:+1: néanmoins comme c'est un site statique je ne sais pas trop comment on pourrait le gérer, éventuellement un index.html qui s'occuperait de la redirection intelligente, ou peut-être simplement une page bilingue simple statique pour donner le choix à l'utilisateur via deux gros liens ?

jri-sp commented 5 years ago

Salut! Est-ce que je peux plutôt faire une réécriture pour toutes les pages ? ça simplifierait la config au lieu de faire du cas par cas.

TomBor commented 5 years ago

@jri-sp Si c'est plus simple et que ça touche toutes les pages c'est encore mieux ! Je te fais confiance. Sinon comme pour la pprd, le sélecteur de langue reste caché pour le moment. Merci !

jri-sp commented 5 years ago

J'ai pushé le commit https://github.com/AtelierCartographie/eatlas/commit/418dec4171f66af0caeaf2df6184a0f11b6d3b32 et déployé en PPRD. Si possible j'aimerai bien que vous testiez bien que tout fonctionne et que c'est le comportement attendu avant de passer ça en production car ce n'est pas anodin comme modification.

TomBor commented 5 years ago

Merci @jri-sp Ça fonctionne ! Mais comme la redirection est pour toutes les pages, si on pense au moment où des pages seront traduites, ça donne des choses étranges, voir par exemple :

Mais je ne sais si on peut exclure de la redirection automatique tous les liens traduits /en/

jri-sp commented 5 years ago

Oui j'avais vu ça, mais en fait ce sera géré lorsqu'on passera réellement en multilingue. C'est pour ça que j'ai laissé comme ça. mais si c'est important je peux bien faire une exclusion juste pour ça.

TomBor commented 5 years ago

@jri-sp Dans ce cas c'est bon alors ! On passe en production 🚀 Merci encore !

jri-sp commented 5 years ago

C'est déployé en prod !

TomBor commented 5 years ago

@naholyr @jri-sp Merci Jérémy, le site fonctionne, on a par contre un problème avec les images des cartes.

Dans un article ou une page ressource, les images ne s'affichent plus. exemple Par contre les vignettes de téléchargement et les résultats de recherche fonctionnent (pas toujours...)

Pourtant, en PPRD ça semblait je crois, mais je n'y ai plus accès maintenant.

TomBor commented 5 years ago

Corrigé avec le commit 6f772e7. Merci beaucoup @jri-sp !