Relecture, Interface utilisateur

, par _Eric_

Diagramme de transitions entre les pages

Le schéma ci-dessous illustre les principales transitions entre les pages concernées par le plugin Relecture.

Page d’un article

Contextes

Un seul contexte d’affichage de cette page : ?exec=article&id_article=xx.

Design

Objectifs

La page article est le point d’entrée principal pour ouvrir une relecture ou y accéder pour consultation ou participation.

Transitions

  • A1 : si l’article possède le statut « proposé à l’évaluation » et si aucune relecture n’est déjà ouverte, alors la boite d’information de l’article affiche, pour les auteurs autorisés à modifier l’article uniquement, un bouton « Ouvrir une relecture » ;
  • si une relecture est ouverte sur l’article :
    • la boite d’information de l’article affiche un nouveau statut non éditable, « en relecture » ;
    • A2 : un bouton « accéder à la relecture » inclus dans la boite d’information, permet aux auteurs autorisés à modifier ou à participer à la relecture de se rendre sur la page de la relecture en cours ;
    • un encart est inclus dans le corps de l’article pour informer sur la relecture en cours (début, fin, révision) ;
  • A3 : si l’article a déjà fait l’objet de relectures, un bouton est inclus dans la boite d’information de l’article et permet de se rendre sur la page des relectures terminées de l’article. Par défaut, la relecture terminée la plus récente est affichée.

Changement du statut de l’article pendant la relecture

Deux solutions pouvaient être envisagées :

  • bloquer le statut de l’article à « proposé à l’évaluation » et rajouter quelque part dans la boite d’information ou dans le corps de l’article un avertissement sur le fait que l’article est en relecture ;
  • ou rajouter le statut « en relecture » comme un statut d’article supplémentaire mais dont la gestion est un peu particulière : n’utilise pas le formulaire instituer, bloqué le temps de la relecture, non disponible dans les formulaires instituer de l’article.

C’est la deuxième solution qui a été retenue. La mise en œuvre sous SPIP 3 est discutée dans le l’article Relecture, discussions sur les mises en œuvre possibles.

Ajout de boutons d’actions concernant les relectures de l’article (A1, A2, A3)

Deux solutions possibles également :

  • utiliser un bloc « raccourcis » dans la colonne navigation ;
  • ou insérer ces boutons dans le bloc d’information de l’article.

C’est la deuxième solution qui a été retenue. La mise en œuvre sous SPIP 3 est discutée dans le l’article Relecture, discussions sur les mises en œuvre possibles

Information sur la relecture en cours

Étant donné que Relecture insère des blocs dans une page qui n’est pas celle de l’objet relecture mais de l’objet article, on ne peut pas utiliser le mécanisme Z automatisé pour la page article mais on doit utiliser des pipelines.
L’information d’une relecture ne pouvant pas être assimilée à une configuration l’utilisation du pipeline « afficher_config_objet » n’est pas adaptée. On préfère donc le pipeline « affiche_gauche. »

Le pipeline « affiche_gauche » inclut un fichier HTML contenu dans le répertoire prive/squelettes/navigation/ ce qui semble être a priori le plus logique. Ce fichier HTML contient le code du bloc d’information sur la relecture en cours et tient compte des autorisations et conditions d’affichage pour visualiser les boutons d’action.

Page de suivi de la relecture

Contextes

Un seul contexte possible : ?exec=relecture&id_relecture=xx

Design

Objectifs

La page Relecture a pour but de proposer une « fiche de relecture » permettant :

  • d’informer les auteurs sur les attendus de la relecture et les participants ;
  • de consulter rapidement les commentaires déjà émis ;
  • et de suivre l’avancement de la prise en compte des commentaires.

Cette page est le point de passage obligé pour déposer un nouveau commentaire ou modérer un commentaire déjà émis mais n’est pas destinée à la rédaction des commentaires ; ces opérations sont respectivement dévolues aux pages xxx et yyy.

Par contre, une fois la relecture clôturée, cette page reste consultable et exportable dans un format bureautique.

Transitions

  • R1 : si il existe d’autres relectures associées à l’article que celle affichées, celles-ci sont listées dans une boite du bloc extra. Le titre de chacune d’elle est un lien vers sa fiche.
  • R2 : pour les auteurs et les admins, un bouton « Participer à la relecture » permet de se rendre dans la page des commentaires afin de les modérer.
  • R3 : pour les auteurs de l’article, un bouton « Modifier la description » permet d’éditer la description de la relecture (seul champ éditable).
  • R4 : modération d’un commentaire

Mise en œuvre de la fiche relecture

Étant donnée que la fiche de l’objet relecture comporte des champs particuliers, il n’est pas possible d’utiliser l’échafaudage standard d’un objet. On surcharge donc l’échafaudage avec un fichier relecture.html dans le répertoire squelettes/contenu/. Ce fichier inclus entre autres :

  • le titre de la relecture composé du terme Relecture accolé à l’identifiant et l’article concerné par cette relecture
  • l’appel au formulaire « dater » pour préciser la date de fin des commentaires
  • l’appel au formulaire « editer_liens » pour définir la liste des relecteurs (parmi les auteurs disponibles)
  • les boites ouverture et clôture qui précisent la date et la révision de chacun de ces évènements
  • la description qui est le seul champ texte modifiable de la fiche
  • et la liste des textes de l’article qui doivent être relus sous la forme d’un accordéon jquery ui.

Personnalisation du formulaire dater

Étant donnée la généricité des boutons et des libellés de ce formulaire, seul le titre a nécessité une modification. Aucune configuration n’étant possible, il faut utiliser le pipeline formulaire_charger et affecter la variable $flux['data']['_label_date'].

En outre, pour que cette date ne soit modifiable que si la relecture n’est pas clôturée, il faut surcharger la variable $flux['data']['editable'].

Personnalisation du formulaire editer_liens

Pour ce formulaire, il faut aussi changer le titre via le pipeline formulaire_charger - variable $flux['data']['titre'] - et rendre modifiable la liste des relecteurs si la relecture n’est pas clôturée en surchargeant la variable $flux['data']['editable'].

Par contre, il n’y a pour l’instant aucun moyen simple de personnaliser les boutons :

  • Ajouter un auteur
  • Retirer un auteur
  • Créer et associer un auteur ainsi que le sous-titre Ajouter un auteur.

Mise en œuvre de l’accordéon jquery des textes de l’article

Pour ne pas encombrer d’emblée la fiche de relecture, on présente les textes à relire sous forme d’un accordéon jquery ui fermé par défaut. Pour afficher un tel widget, il faut :

  1. charger la librairie « jquery ui accordion » et ses dépendances, c’est-à-dire les jquey ui widget.
  2. rajouter dans le squelette relecture.html le bloc HTML nécessaire pour matérialiser l’accordéon
  3. rajouter un script jquery pour initialiser les options voulues pour l’accordéon.

Le bloc HTML est de la forme :

  1. <div class="accordion">
  2. <h5>Titre 1</h5>
  3. <div>Texte 1</div>
  4. <h5>Titre 2</h5>
  5. <div>Texte 2</div>
  6. </div>

Télécharger

et le script d’initialisation :

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. jQuery(document).ready(function() {
  4. $( ".accordion" )
  5. .accordion({ header: 'h5' })
  6. .accordion({ collapsible: true })
  7. .accordion({ active: false });
  8. });
  9. //]]>
  10. </script>

Télécharger

La première option désigne le sélecteur qui sert de titre de chaque section, la seconde permet de fermer l’ensemble des sections et la troisième initialise l’accordéon avec toutes ses sections fermées.

Mise en œuvre du bloc navigation

Le bloc navigation d’un objet contient en utilisant l’échafaudage standard la boite d’informations de l’objet, son logo et l’appel au pipeline d’affichage de configuration supplémentaire (comme le formulaire de forum dans la page article). La page relecture ne possédant pas de logo il faut donc surcharger le mécanisme d’échafaudage en créant un fichier relecture.html dans squelettes/navigation/ qui n’inclut plus l’appel au formulaire de logo.

Mise en œuvre du bloc extra

Le bloc extra ne contient rien de défini par l’échafaudage standard. Le remplissage est donc laissé à la discrétion de chaque objet par l’intermédiaire du mécanisme Z : il faut ainsi créer un fichier relecture.html dans squelettes/extra/. Pour l’objet relecture, le bloc extra contient la liste des relectures, ce qui est classique pour la plupart des objets.

Étant donnée que la liste des relectures est un tableau utilisé maintes fois dans le plugin, une inclusion est créée : priveb/squelettes/inclure/relectures.html. Elle formate en tableau HTML la liste des relectures suivant les critères passés en paramètre comme le statut, les relectures exclues, le contexte d’affichage...

Mise en œuvre de la liste des commentaires déjà déposés

A compléter...

Formulaire d’ouverture et d’édition d’une relecture

Contextes

  • ouverture (création) d’une nouvelle relecture : ?exec=relecture_edit&new=oui&id_article=yy
  • édition (modification) des paramètres de la relecture : ?exec=relecture_edit&id_relecture=xx

Transitions

  • E1 : correspond au bouton enregistrer. Aucun traitement particulier n’est nécessaire, le traitement standard convient.

Mise en œuvre des fonctions de création et de modification

Lors de l’ouverture (création d’un objet relecture) ou de l’édition de la description l’échafaudage standard appelle un page relecture_edit dans laquelle il intègre automatiquement un formulaire d’édition des champs éditables, donc dans notre cas, seulement la description.

Il faut donc créer les fichiers editer_relecture.html - le squelettes - et le fichier editer_relecture.php pour le traitement PHP des fonctions charger, vérifier et traiter du formulaire. SPIP offre dans sa version 3 nombre de traitements génériques appliqués aux objets de base comme les articles, les rubriques, les auteurs... Plusieurs solutions sont ainsi possibles pour coder l’insertion/édition d’un objet relecture :

  1. recoder entièrement les fonctions CVT et l’action d’édition associée.
  2. recoder l’action « editer » en conservant les appels aux fonctions CVT génériques.
  3. surcharger uniquement les fonctions de base de l’action comme inserer_objet et instituer_objet.
  4. utiliser les pipelines « pre_insertion » et « pre_edition » intégrés dans les fonctions inserer_objet et instituer_objet.

C’est la solution 4 qui a été choisie pour l’objet relecture car elle circonscrit et minimise le code à écrire. Cependant, on n’échappe pas à modifier les fonctions « charger » et « traiter » du formulaire pour passer des informations supplémentaires ou désactiver des traitements automatiques standard. Il serait d’ailleurs possible de rendre les traitements standard plus smart en utilisant la configuration de l’objet voire en l’amélioration légèrement.

Pour la modification d’un objet relecture, les traitements standard sont adéquats.

Page d’édition des commentaires

Page d’accueil du site

Contextes

  • un seul contexte possible : ?exec=accueil

Design

Les informations présentées dans cette page ont pour but de rappeler à l’auteur connecté les relectures en cours auxquelles il participe en tant que relecteur ou qu’il administre conformément à ses autorisations sur l’article. Ces listes servent ainsi de pense-bête.

Mise en œuvre des listes de relectures

Il n’existe qu’une seule méthode pour insérer des informations spécifiques dans la page d’accueil : utiliser les pipelines. Trois pipelines sont principalement utilisables :

  • le pipeline « accueil_informations », pour insérer des éléments simples dans la boite d’infos de la page d’accueil uniquement.
  • le pipeline « accueil_encours », pour insérer des éléments plus complexes dans la boite « en cours » de la page d’accueil utilisée par les objets natifs de SPIP.
  • le pipeline « affiche_milieu », qui permet pour toute page d’insérer des éléments quelconques en fin de la colonne centrale.

La première solution n’est pas adaptée à la présentation d’une liste complexe d’éléments. En outre, pour éviter de surcharger la boite « encours » avec des informations qui ne sont pas forcément du même niveau, on choisit le pipeline « affiche_milieu ».

Le pipeline fait tout simplement appel à un squelette HTML stocké dans le répertoire squelettes/contenu/.