Discussion Gestion:Tâches/Liste/119/2

@Michaël St-Gelais, @Vanessa Desjardins, @Antoine Delobel, @MaudeLD. le tour sur l'édition visuelle est prêt pour une deuxième ronde de test. Vos commentaires ici svp.

Le tour est accessible à http://wikimedi.ca/wiki/An%C3%A9vrysme_de_l'aorte_abdominale?tour=visual_edition.

@Charles-Éric Noël Laflamme

@Antoine Mercier-Linteau Tout fonctionnait bien (très bien même, je trouve que c'est vraiment un moyen simple et efficace de se familiariser avec la plateforme! C'est bon pour le recrutement!) jusqu'à ce que j'en arrive à la partie "création de liens", où je n'ai carrément pas été capable de créer le lien pour le terme "Amérique du Nord" puisque chaque fois que je tentais de "surligner" avec mon curseur le terme afin de pouvoir cliquer sur l'icône de lien, la fenêtre du tour se réinitialisait et apparaissait directement sur le terme, ce qui m'empêchait de le sélectionner au complet… J'ai essayé 3-4 fois en revenant sur mes pas dans les étapes du tour et ça refaisait exactement la même chose… J'espère que je suis un peu clair haha

@Antoine Delobel J'ai déplacé l'attachement de la fenêtre du tour problématique de manière à ce qu'elle n'apparraisse plus par dessus le paragraphe. Merci!

@Charles-Éric Noël Laflamme Excellent! Je le referai pour voir la suite!

Il y a quelques boîtes qui apparaissaient juste devant l'endroit où je voulais modifier le contenu (ex. tableau importateur de pomme). Sinon, dans l'ensemble, c'est très bien ! J'aimerais le faire tester à des nouveaux. Je trouve que le contenu des boîtes est très clair. Dans mon cas, c'est bizarre, j'ai comme dû rétablir la page de test de l'éditeur visuel sur ma page brouillon. J'imagine qu'elle a déjà existé, puis que je l'avais supprimé. J'imagine que c'est pour cette raison que ça n'a pas marché d'emblée. Par contre, un coup que j'ai rétabli la page, le tuto s'est bien déroulé.

J'ai aussi remarqué que le tuto oubliait de demander à l'éditeur de cliquer sur « Modifier la page ».

Serait-il possible de joindre une capture d'écran pour les boîtes qui superposent le contenu à modifier? L'emplacement dépend en grande partie de la résolution de l'écran de l'utilisateur et donc une capture d'écran m'aiderait à reproduire le bug et à le fixer. Je vais également ajouter l'indication pour modifier la page!

On tombe souvent sur ce problème... Je vais voir si je ne suis pas capable de faire en sorte que les étapes du tour puissent être déplacées avec la souris.

@Charles-Éric Noël Laflamme, j'ai rajouté un bout de code dans MediaWiki:Gadget-tour-loader.js pour faire en sorte que les fenêtres des tours puissent être déplacées par les utilisateurs. Assez de cassage de tête avec le positionnement :)

Ce n'est pas fonctionnel pour le moment mais ça le sera lorsque le loader de tour sera opérationnel.

C'est déployé! Les fenêtres de tours peuvent maintenant être déplacées.

Comme d'hab, @Antoine Mercier-Linteau est redoutable. Merci pour ce détail important.

@Charles-Éric Noël Laflamme excellent travail!

J'aime bien le fait que le tutoriel oblige l'utilisateur à faire certaines manipulations. Ceci-dit je crois qu'il nous faudra une version longue du tutoriel d'édition et une version courte (pour montrer les boutons, comment sauvegarder et basta).

J'ai relevé quelques bugs:

1. il faut que l'utilisateur clique sur un lien de modification pour officiellement démarrer le tutoriel, ça peut ne pas être évident, je redirigerai simplement le navigateur de l'utilisateur;
2. une page est crée par instantiation du tutoriel (celui-là est pour moi);
3. le tutoriel ne se désactive pas lorsque l'utilisateur navigue ailleurs dans le site, on pourrait ne l'activer que lorsque l'utilisateur est sur sa page brouillon;
4. les indicateurs vont souvent cacher les boutons de la barre de modification, il faudrait peut-être les placer en dessous;
5. je placerais l'ajout de liens très tôt dans le tutoriel car c'est une fonction cruciale du wiki; si l'utilisateur ferme le tutoriel en plein milieu, il aura au moins intégré ça;
   1. peut-être aussi expliquer la différence entre un lien rouge et un lien bleu (vers une page qui existe?)
6. les images venant de la librairie sont fluctuantes et peuvent changer; c'est à dire que la première image disponible ne sera pas forcément celle à laquelle tu réfères dans l'instruction; j'irai avec une consigne générique de choisir une image de licorne.

À part de tout ça, c'est extrêmement pro.

Concernant la création de page par le tutoriel, j'ai investigué la chose et le problème, c'est que MediaWiki ignore l'argument d'URL %preload=visual_edition_template lorsque le contenu de la page existe déjà. Autrement, il est possible de précharger le contenu de l'éditeur visuel avec le contenu d'une page; par exemple: https://wikimedi.ca/wiki/NOMDEPAGE?veaction=edit&preload=MediaWiki%3AGuidedtour-tour-visual_edition-template

Je ne peux malheureusement pas hacker MediaWiki pour ignorer le fait que la page existe déjà. Du moins, pas sans faire des changements qui vont sérieusement compromettre la fiabilité du code.

Bref, je propose que l'on vérifie si la page destination du tutoriel existe ou pas. Si elle existe, on ajoute un compteur à son nom (ex: Utilisateur:AntoineMercier-Linteau/Tutoriel1, Utilisateur:AntoineMercier-Linteau/Tutoriel2, etc.)

Excellent travail! Voici mes commentaires:

• Cf. mon commentaire plus haut concernant la création de page. Si tu trouves que c'est trop compliqué, on peut continuer à fonctionner comme c'est maintenant tout en mettant la page dans les brouillons de l'utilisateur.
• créer la page à Utilisateur:Antoine_Mercier-Linteau/Brouillons/Tous_sur_l'édition_visuelle afin que l'essai se retrouve dans les brouillons
• le pointeur pour le menu de création de listes ne se positionne pas correctement
• pour le menu Paragraphe, il faudrait aussi dire qu'il permet de créer des sections
• il m'a fallu énormément d'essais pour passer l'étape tableau, je ne crois pas qu'elle a besoin d'être aussi stricte, on peut se limiter à la détection de la présence d'un nouveau tableau avec du contenu dans une cellule

On y est presque!

P.S. Est-ce que ce serait possible de lister les étapes couvertes par le tour dans le tableau? À mesure qu'on va développer des tours, ça va nous aider à nous assurer que tous les points sont couverts et ne sont pas dupliqués.

• De la manière dont le tour fonctionne présentement, le tour vérifie si la page destination tutoriel existe ou pas. Si elle n'existe pas, il l'a crée. Sinon, il la supprime, puis la crée. J'imagine que modifier le code de manière à créer des pages avec compteur ne serait pas une grosse modification, mais je ne l'ai pas encore implémenté.
• Fait. La page est nommé "Tutoriel Édition Visuelle" (afin d'être conformes avec celles des flashcards nommées "Tutoriel flashcards") (D'ailleurs pendant que j'y pense, faudrait-il remplacer le terme "flashcard" par "question"?)
• J'ai plus ou moins réglé le problème de pointeur. En effet, j'ai remarqué que les pointeurs de la barre de menu se semblent pas bien s'y attacher, si bien que lorsque qu'on défile la page, ce dernier reste coincé en place au lieu de suivre la barre de menu. Il existe d'ailleurs un attribut pour chaque step nommé autoFocus qui indique au tour s'il doit faire défiler la page ou non afin de mettre le pointeur en évidence. Pour les pointeurs de la barre de menu, le tour pense que ceux-ci sont au sommet de la page et fait donc défiler la page vers le haut. Le pointeur qui s'avait auparavant attaché à la barre de menu reste donc en place et se retrouve au milieu de l'écran lorsque la page a terminé de défilé vers le haut. Bref, en mettant l'option autoFocus à faux, le problème est plus ou moins réglé puisque la page ne défile plus automatiquement, mais si l'utilisateur fait défilé la page, le problème persiste. Il semble que ce bug soit à même l'extension guidedTour et donc le régler serait un peu plus compliqué.
• Je ne suis pas sûr de comprendre, puisque je crois que la création de section a été bien expliquée. Voulais-tu dire qu'il faudrait également dire que le menu permet de créer des sous-sections et sous-sous-sections? Si oui j'ai ajouté du texte au succès de l'étape en faisant mention.
• Je trouve aussi que la partie tableau reste à améliorer. J'ai changé la détection à la présence d'un nouveau tableau et du mot "Pologne", mais je crois qu'outre la détection, cette partie pourrait bénificier de plusieurs améliorations.

Je commence à lister les étapes du tour dans le tableau! Je pense aussi qu'il pourrait être intéressant de voir si l'ordre logique des étapes doit être repensé, parce que j'y suis allé un peu aléatoirement.

Parfait! Pour la création de page, on peut le laisser comme cela. J'ai repensé à la chose et on ne peut que clairement indiquer la présente des boutons Modifier (point crucial) que si la page existe déjà (ce qui me fait penser qu'il faudra créer un tutoriel sur la création de pages).

On peut passer la tâche en test et faire essayer le tour par d'autres éditeurs?

Je pense que oui, ça va sûrement mettre en lumière quelques endroits susceptibles de bloquer chez les nouveaux utilisateurs.

Utilisation de callbacks jQuery.

Jusqu'à maintenant, pour ce qui est de guider l'utilisateur à faire des opérations simples (comme mettre en texte en gras par exemple), ça va super bien. Là où ça se corse, c'est pour les opérations un peu plus difficile (comme insérer une image par exemple, qui demande de cliquer sur "Insérer", puis sur "Média", puis où l'on doit rechercher une image, pour finalement ajouter une description avant de confirmer l'insertion de l'image). Je vois actuellement 3 options pour approcher ce genre d'opération plus complexe:

1. Guider l'utilisateur vers la première étape, puis le laisser figurer le reste de l'opération sous la prémisse que celle-ci est assez intuitive. (Pas super optimal)
2. Guider l'utilisateur vers la première étape et lui indiquer de cliquer sur le bouton "Suivant" lorsque celle-ci a été faite. Le guider alors vers la deuxième étape encore en lui indiquant encore de cliquer sur le bouton "Suivant" lorsque celle-ci a été faite, etc. (Déjà plus user friendly, mais demande le clic de boutons suivants superflus)
3. Guider l'utilisateur vers la première étape et lorsque celle-ci est faite, amorcer automatiquement les consignes pour la deuxième étape, etc. (Super user friendly, mais demande l'utilisation des Callbacks du Visual Editor)

Évidemment, je pense que la 3ème option est la meilleure, mais elle demande que qu'on listen à des callbacks du Visual Editor pour passer d'une étape à une autre. Le problème, c'est que je n'ai aucune idée où trouver le nom de ces callbacks ou si même ils existent. La documentation du Visual Editor est assez limité et j'ai essayé de les catcher avec l'outil Performance du Debuggeur, mais sans chance.

Il se peut qu'ils n'aient pas programmés de callbacks pour ces fonctions de l'Éditeur Visuel.

Il y a moyen cependant, d'une étape à l'autre, d'insérer des callbacks sur des éléments arbitraires avec jQuery (exemple: $(".oo-ui-buttonElement-button").click(function(){ alert('22'); });). C'est pas idéal et ce sera fragile, mais ça pourra le faire.

Sinon, que dis-tu de déplacer l'insertion d'images sur un tour différent?

Pour ma part, je pense que l'insertion d'images à sa place dans ce tour. Ce pourrait cependant être plus sage de la retirer le temps de trouver une manière de bien l'intégrer

Ok. Ma préoccupation en ce sens en est une de longueur. Selon les recommandations des gens de MediaWiki, il est préférable de garder les tours courts afin de ne pas perdre l'attention des utilisateurs.

On verra avec les commentaires des testeurs.

Effectivement, je pense que le dernier mot revient toujours aux utilisateurs! J'ai d'ailleurs réussi à passer d'un step à un autre en utilisant des callbacks personnalisés avec jQuery comme tu avais commenté. Merci beaucoup du conseil !