Dans le moteur de Presseurop.eu

Presseurop.eu est en développement continu depuis mars 2010. Cet article met en lumière quelques fonctionnalités originales du site, notamment sa plateforme multilingue de discussion. En tant que développeur principal, j'expliquerai certains des choix faits.

Contexte: Presseurop.eu est basé sur le CMS libre Pressflow, une fourche de Drupal. Son back-office multilingue est lourdement customisé, et les rédacteurs écrivent du content uniquement en Markdown. Le site est hébergé sur deux serveurs frontaux, cachés par Varnish. Cet article se concentre sur l'interface frontale connue des utilisateurs.

Une plateforme de discussion multilingue unique

La particularité la plus remarquée de Presseurop.eu est son système de commentaires utilisateurs, qui a été conçu pour favoriser le débat transnational. Ses trois principales composantes, lancées en 2010-12, sont:

• Un seul fil de discussion à travers toutes les versions d'un document traduit – les utilisateurs voient les articles dans leur propre langue mais une seule et unique discussion entres lecteurs
• Traduction automatique facultative de tous les commentaires en langue étrangère par un bouton (traductions actuellement fournies par Google)
• Traduction dans la file des meilleurs commentaires des les rédacteurs

[[Presseurop.eu est le seul site d’actualité européen à proposer une telle plateforme de commentaires multilingues]]. Celle-ci a généré de nombreux retours positifs et a créé une croissance rapide de la participation des lecteurs sur le site.

Notre moteur de discussion possède également d'autres caractéristiques peu répandues.

Citation au lieu d'emboîtement (nested). Afin de rendre la discussion aussi utile que possible aux lecteurs non-participants, nous avons décidé d'éviter les fils de discussion avec emboîtement (des commentaires avec réponses imbriquées) et d'encourager les utilisateurs à citer des phrases particulières. Ce qui présente deux avantages théoriques :

• tout commentaire est compréhensible sans contexte
• les commentaires peuvent s'afficher en n'importe quel ordre sans que cela affecte leur sens

Les utilisateurs sont néanmoins notifiés lorsque quelqu'un cite une partie de leur commentaire - une fonctionnalité-clé des moteurs de discussion à fil emboîté.

Aucun commentaire caché. Les lecteurs non-participants voient les commentaires affichés par ordre d'importance - (1) ceux sélectionnés par les rédacteurs, puis (2) ceux recommandés par les lecteurs, puis (3) les autres. Mais les utilisateurs connectés voient les commentaires en ordre chronologique par défaut, afin de leur donner une meilleure vue sur l'ensemble de la discussion. Aucun commentaire n'est masqué sous un onglet, mais les commentaires plus longs sont en partie masqués pour éviter le recours à la pagination.

Recommendation par vote secret. Les utilisateurs qui ont contribué avec plusieurs commentaires de qualité deviennent des "membres", autorisés à publier sans modération à priori et à recommander les commentaires des autres. Cependant, seuls les commentaires qui sont recommandés par plusieurs membres obtiennent une étoile de recommendation - et l'exact "score" d'un commentaire donné n'est jamais affiché. L'objectif est de décourager les "concours de beauté" entre opinions opposées, tout en permettant aux membres du forum de marquer leur appréciation des autres.

Nettoyage aggressif. Les commentaires de lecteurs sur Presseurop.eu sont assujettis aux règles de présentation qui sont plus strictes que la moyenne. Elles ont pour objectif de protéger l'image du site et de favoriser un ton de débat élevé. En outre, [[la présence de traduction automatique exige que le contenu des lecteurs soit clair et compréhensible]]. Les commentaires sont donc limités à 1 500 caractères, afin d'encourager la concision, et des soumissions qui contiennent des sauts de paragraphe ou des majuscules en surnombre sont rejetées. Avant d'être affichés, tous les commentaires passent à travers plusieurs filtres qui améliorent leur présentation, notamment en garantissant que :

• la ponctuation est suivie d'espaces
• la ponctuation exagérée est supprimée - "!!!!! ??? ......." devient "! ? ..."
• les paragraphes sont séparés correctement - pas de sauts de lignes ambigus

Inscription sans conditions. Presseurop.eu permet aux nouveaux utilisateurs de soumettre des commentaires sans avoir confirmé leur adresse mail. La possibilité de spam est éliminée par un captcha customisé qui pose une question sur la politique ou l'histoire européenne, et aussi par la modération obligatoire de tous les commentaires postés par les nouveaux utilisateurs. Par la suite, les utilisateurs sont priés de bâtir leur réputation dans le forum en liant leur page de profil à leurs autres identités en ligne et en attirant des recommendations de la part des autres utilisateurs.

Expérience utilisateur

Presseurop.eu utilise une maquette adaptative (responsive) à seuil (breakpoint) unique, signifiant que le contenu est affiché en deux manières, selon la largeur de l'écran de l'utilisateur. [[Sur les écrans de moins de 800 pixels, la troisième colonne ne s’affiche pas]] et les commentaires ne sont chargés que facultativement. Sur les pages de deux colonnes, la deuxième colonne passe en dessous de la première.

Des principes d'UX généraux incluent:

• des boutons de navigateur standards initient toutes les actions, signifiant que les liens sous-lignés sont réservés aux URLs
• un tourbillon et du feedback de complétion sont présents sur tout bouton AJAX (par exemple, lorsque l'utilisateur poste un commentaire)
• défilement fluide des liens internes, qui sont indiqués par des flèches montantes et descendantes
• les liens externes s'ouvrent dans un nouvel onglet, et sont indiqués en tant que tels lorsqu'ils se trouvent dans le texte de l'article

Détail: La feuille de style principale se sert des principes pragmatiques de object-oriented CSS afin de lui rendre plus maintenable en l'absence d'un préprocesseur de CSS. Des commentaires et des boutons sociaux sont chargés asymétriquement afin d'éviter de bloquer la page. Le conteneur de commentaires et d'autre balisage à la volée est écrit directement au DOM sans template, normalement en JQuery et toujours en morceaux agrégés afin d'éviter des soucis de vitesse. Les deux polices web, Enriqueta et PT Sans, sont libres et ont été sélectionnées sur FontSquirrel.

Accessibilité

[[En tant que site web d'intérêt public, Presseurop prend au sérieux l'accessibilité]]. Notre site respecte les principales normes WCAG 2.0 pour les sites de contenu, aussi bien que d'importantes recommandations WAI-ARIA.

Notre taille de police de base a été augmentée à 16px, la norme des navigateurs, avant la plupart d'autres sites d'actualité, et les blocs de texte respectent les normes en termes de largeur, de justification et d'espacement des lignes.

L'usage de Markdown par les rédacteurs signifie que nous n'avons aucun problème de balisage non-voulu dans les documents. Un filtre assure que les traits d'union (-) qui séparent les clauses sont convertis en tirets (–), ce qui élimine cette confusion souvent trouvée sur le web.

Notre site se sert pleinement de:

• balisage HTML5 sémantique, notamment les tags article, section, aside, header, hgroup, figure et figcaption
• attributs role sur les composantes de page, y inclus banner, search, navigation, main, complementary et contentinfo
• attributs rel sur les liens, y inclus alternate (pour les traductions), author, bookmark, next et prev (pour la pagination), search, et tag

Les images non-décoratives s'accompagnent du texte descriptif. Toute fonctionnalité interactive, notamment le système de commentaires, est disponible en usant uniquement du clavier.

Social et syndication

Pour orienter les lecteurs vers le contenu populaire, le bloc "Les plus consultés" utilise un algorithme qui remonte les articles les plus consultés sur le site tout en attribuant un poids égal à chaque langue. Plus élémentaire, les compteurs de partage sur tous les article agrègent le nombre de partage (Twitter et Facebook uniquement) à travers les dix versions d'un document traduit.

Nous avons mis en œuvre les Twitter Cards et le Facebook Open Graph en intégralité, ce qui rend nos articles compréhensibles aux deux principaux réseaux sociaux. Les documents nouvellement publiés sont envoyés à Facebook via un flux RSS normal et à Twitter via le Twitter API. En outre, les articles sont repostés automatiquement sur Twitter jusqu'à 4 fois – après 3 heures, 18 heures, 3 jours et 7 jours – à condition d'atteindre un seul pré-défini de partages. Ce qui donne aux utilisateurs de Twitter, dans toutes les langues, plusieurs occasions de voir nos articles les plus populaires.

Enfin, à l'instar de la plupart des sites d'actualité, [[Presseurop.eu publie tous ses contenus propres (notamment les brèves et les revues de presse) en entier par RSS]] sous la licence Creative Commons BY-NC-ND. Ce qui signifie que tout site non-commercial peut reprendre nos textes, sans modifications et sans devoir demander la permission au préalable.

Détail: Spécifiquement, le bloc "Les plus consultés" prend les cinq documents les plus populaires pour chaque langue, par pages vues, pour les sept derniers jours, et affiche les quatre premiers parmi ceux-ci par ordre du nombre de langues dans lesquelles ils figurent. Le cinquième document est celui qui est présent dans le moins de langues (normalement une seule), et est censé mettre en avant les articles qui sont particulièrement populaires dans certains langues uniquement.