ZEP-42 : Relever des passages dans un contenu

À l'heure actuelle, commenter un contenu se fait généralement en copiant puis collant le passage problématique, à le mettre sous forme de citation dans le message destiné à l'auteur (dans un autre onglet du navigateur) puis à écrire sa remarque en-dessous de la citation. Et derechef. Les relecteurs¹ se retrouvent donc à faire des allers et retours entre le contenu et le moyen de communication avec l'auteur, ce qui est, croyez-moi, tout à fait peu pratique.

L'idée de cette ZEP est de spécifier un système permettant de commenter un contenu en place, au fur et à mesure de la lecture. Ce système se veut simple, de sorte qu'on puisse l'implémenter dans les plus brefs délais. Ainsi, même si tout le monde préfèrerait de telles possibilités, il ne sera pas question d'annotations ou de line notes à la GitHub.

Dresser une liste de remarques

Comme l'objectif est de mettre en place rapidement un ersatz aux annotations, je vous épargne l'analyse théorique du besoin et vous expose sans plus de façon une démonstration du système envisagé :

J'ai principalement travaillé sur le concept, donc le design (position, taille et style des éléments) est probablement à revoir. Commenter un passage se fait de la manière suivante.

• En mode commentaire :
  • Sélectionner le passage.
• Sinon :
  • Sélectionner le passage ;
  • Presser le bouton « Commenter ».
• Constater que la sélection a été ajoutée à la fin du message de remarques.
• Inscrire les commentaires correspondants sous la citation du passage.

Ce n'est pas fait dans la démonstration, mais il me semble intéressant de positionner le curseur à la fin du message lors du relevé d'un passage afin qu'on puisse écrire directement.

En outre, le déplacement saccadé du bouton « Commenter » n'est pas très agréable. Des idées pour pallier cela ?

Un élément à prendre en compte est l'accessibilité, c'est-à-dire la possibilité de pouvoir commenter un contenu seulement à partir du clavier.

Structurer cette liste

Afin d'aider les auteurs à traiter les remarques, il est nécessaire de leur indiquer d'où elles proviennent, c'est-à-dire de quelle section et, par extension, de quel chapitre, voire quelle partie.

Détecter le chapitre (et la partie) peut facilement se faire automatiquement puisque chacun se voit attribuer une page propre. Les sections en revanche, n'ont pas d'adresse Web correspondante et apparaissent sous forme de titres HTML. Ici, elles sont détectées automatiquement à partir de la position du passage sélectionné : on remonte les éléments HTML jusqu'à tomber sur un titre de niveau 2.

Envoyer ses retours à l'auteur

Comme spécifié dans la ZEP-41, toute remarque devrait se faire dans le sujet de bêta du contenu. Cela permet de centraliser les commentaires et d'épargner à l'auteur une pile de messages privés. Ainsi, à l'envoi des remarques, un message est automatiquement posté par le relecteur dans le sujet de bêta, lequel, en accord avec la ZEP susmentionnée, ne pourra être fermé du moment que des retours peuvent être faits sur le contenu (alors en bêta, en validation et/ou publié).

Pour finir

Toutes les remarques, questions, suggestions et critiques sont les bienvenues.

Mise à jour de la démonstration, avec détection automatique de la section. Pour fermer la modale, cliquer sur le texte.

J'ai revu le système, on a maintenant un semblant de possibilité d'annotation.

On fait correspondre à chaque bloc (élément HTML ayant l'attribut data-commentable="true") un bouton pour commenter et une zone de remarques. Au passage de la souris sur un bloc, le bouton apparaît et vous permet d'afficher la zone de commentaires associée au bloc. A la sélection d'un passage, ce dernier est automatiquement ajouté sous forme de citation à la zone de remarques correspondante.

Tout en bas du contenu, un bouton permet d'envoyer les retours (on se contente de concaténer les contenus des zones de commentaires, en ajoutant des titres pour rendre compte des sections).

Si le concept plait, je mettrai à jour la ZEP en conséquence.

Merci.

Personnellement la façon de faire me plait. C'est simple pratique et efficace.

Biensur il y'a des trucs comme le bouton qui apparait sans effets et pas toujours a la meme position, mais ça n'est que du detail ajustable. Mais dans l'ensemble j'aime bien l'idée

Merci Vayel

L’apparition du bouton décale les paragraphes. Résultat, si tu traverses la page avec ta souris, ça devient vite frénétique. C’est du détail de mise en forme, mais si ce n’est pas corrigé, ça peut vite devenir mortel.

Ouep, je laisse le soin aux devs front de nous faire un truc plus ergonomique.

Le simple fait de sélectionner une zone de texte ouvre le champ de commentaire, sans avoir à cliquer sur le bouton « Commenter », ce qui rend très pénible le simple copier-coller ordinaire.

Du coup, on enlève cette fonctionnalité ? On peut aussi procéder comme ça :

On pourrait également envisager de relever le passage dès la sélection faite (lorsque le bouton de la souris est relâché), ce qui épargnerait au relecteur de cliquer sur le bouton. Afin d'éviter que toute sélection soit considérée comme une remarque, un mode « commentaire » serait disponible, dans lequel on aurait cette automatisation.

En plus des deux remarques de Dominus que j'approuve, il n'est pas possible de laisser un commentaires sur un titre, il faut le laisser sur le 1er paragraphe de la partie, ce qui me semble assez bizarre.

Si un mode commentaire n'est pas trop lourd à mettre en place, ça me paraîtrait top.

Cette version devrait plus vous convenir :

Comme l'autre fois, j'ai modifié deux trois trucs si tu veux. (Hauteur de la textarea en fonction de son contenu, fermeture de la modal avec Echap, mode commentaire/lecture, focus de la textarea en ajoutant un commentaire …). Bon ça sert peut-être à rien, mais j'avais envie
https://jsfiddle.net/2dtkkgbc/5/

Edit : "Entrée" pour ajouter un commentaire. (Ne pas faire attention au code c'est sûrement sale, je suis pas un pro mais c'est pour l'idée)
https://jsfiddle.net/2dtkkgbc/8/

Merci Dominus, j'ai corrigé ça.

@Akna : je préfère personnellement avec le bouton de commentaire sur le côté. Pour ce qui est du textarea, on passera probablement par une modale toute faite, comme on peut en croiser quand on envoie un contenu en validation.

Comme le but est de faire un truc assez rapidement, je propose de passer cette seconde version de la ZEP en validation à la fin du week-end s'il n'y a pas de remarques particulières.

Je passe donc la ZEP en validation. Le moinsseur du message précédent n'a qu'à poster si ça ne lui convient pas.

Quelqu'un a-t-il eu l'occasion d'y jeter un oeil ? Faut-il attendre le projet Zest'Meeting pour la valider ?

Je ne vais pas te mentir, on est pas mal occupé en ce moment (3 ZEP à venir, 2 versions assez lourdes qui viennent de sortir, etc) ! On va regarder ça rapidement et on en touchera quelques mots dans le Zest Meeting !

Est-ce que ça s'est calmé ?

Serait-il au moins possible de valider (ou non) cette ZEP ? Pour le dev, je pourrai peut-être proposer un truc.

Pas vraiment, cf le compte rendu du dernier ZM. Quand j'ai un peu de temps je regarde en détails la ZEP et on la valide au prochain ZM si c'est good. Devant le peu de ressources qu'on a on ne peut pas tout faire :/

Je me permets un petit up ici.

Je m'engage à faire une PR pour ça, mais je souhaiterais m'assurer auparavant que le concept est validé.

Moi je valide le concept. Comme j'ai dit par ailleurs, avance