Sujet sur Discussion Gestion:Tâches/Liste/119

@Charles-Éric Noël Laflamme, voici un exemple de code pour générer des tours (source):

/*
 * Guided Tour to test guided tour features.
 */
( function ( gt ) {
	// XXX (mattflaschen, 2012-01-02): See GuidedTourHooks.php
	var tour, launchTourButtons,
		pageName = mw.config.get( 'wgGuidedTourHelpGuiderUrl' );

	// Should match shouldShowForPage from firstedit.js
	function shouldShowFirstEdit() {
		return ( mw.config.get( 'wgCanonicalNamespace' ) === '' && mw.config.get( 'wgIsProbablyEditable' ) );
	}

	tour = new gt.TourBuilder( {
		/*
		 * This is the name of the tour.  It must be lowercase, without any hyphen (-) or
		 * period (.) characters.
		 *
		 * If this is an on-wiki tour, it should match the MediaWiki page.  For instance,
		 * if this were on-wiki, it would be MediaWiki:Guidedtour-tour-test.js
		 */
		name: 'test'
	} );

	tour.firstStep( {
		name: 'overlay',
		titlemsg: 'guidedtour-tour-test-testing',
		descriptionmsg: 'guidedtour-tour-test-test-description',
		overlay: true
	} )
		.next( 'callout' );

	tour.step( {
		/*
		 * Callout of left menu
		 */
		name: 'callout',
		titlemsg: 'guidedtour-tour-test-callouts',
		descriptionmsg: 'guidedtour-tour-test-portal-description',
		// attachment
		attachTo: '#n-portal a',
		position: '3'
	} )
		.next( 'descriptionwikitext' )
		.back( 'overlay' );

	tour.step( {
		name: 'descriptionwikitext',
		titlemsg: 'guidedtour-tour-test-mediawiki-parse',
		// This deliberately does not use descriptionmsg in order to demonstrate
		// API-based parsing as used by some on-wiki tours.
		// Normal Extension tours should use descriptionmsg.
		description: new gt.WikitextDescription( mw.message( 'guidedtour-tour-test-wikitext-description' ).plain() ),
		attachTo: '#searchInput',
		// try descriptive position (5'oclock) and use skin-specific value
		position: {
			fallback: 'bottomRight',
			monobook: 'right'
		}
	} )
		.next( pageName ? 'descriptionpage' : 'launchtour' )
		.back( 'callout' );

	if ( pageName ) {
		tour.step( {
			/*
			 * Test out mediawiki description pages
			 */
			name: 'descriptionpage',
			titlemsg: 'guidedtour-tour-test-description-page',
			description: new mw.Title( pageName ),

			overlay: true,

			buttons: [ {
				action: 'wikiLink',
				page: pageName,
				namemsg: 'guidedtour-tour-test-go-description-page',
				type: 'progressive'
			} ]
		} )
			.next( 'launchtour' )
			.back( 'descriptionwikitext' );
	}

	launchTourButtons = [ {
		action: 'end'
	} ];

	if ( shouldShowFirstEdit() ) {
		launchTourButtons.unshift( {
			namemsg: 'guidedtour-tour-test-launch-editing',
			onclick: function () {
				gt.endTour();
				gt.launchTour( 'firstedit' );
			}
		} );
	}

	/*
	 * Test out tour launching
	 */
	tour.step( {
		name: 'launchtour',
		titlemsg: 'guidedtour-tour-test-launch-tour',
		descriptionmsg: 'guidedtour-tour-test-launch-tour-description',

		// attachment
		overlay: true,

		buttons: launchTourButtons
	} )
		.back( pageName ? 'descriptionpage' : 'descriptionwikitext' );
}( mw.guidedTour ) );

Tu peux également voir un autre exemple ici à même Wikipedia.

Si je souhaite par exemple ajouter et exécuter cet exemple de code sur une page quelconque, comment dois-je m'y prendre?

Je n'ai pas encore lu la documentation alors vite comme ça je ne sais pas trop. Je te reviens là-dessus.

Entre-temps on peut travailler sur nos cas d'utilisation et les différentes étapes du tour guidé en lien. J'en ai inscrit trois en mode brouillon dans la description de la tâche, mais il y en certainement plus.

As-tu des idées? Comme nouveau contributeur tu sais beaucoup plus que moi ce qu'un utilisateur novice veut apprendre, ses questions, etc.

J'ai visionné les vidéos présentes dans la section aide et je crois qu'un bon point de départ serait de reproduire intégralement les apprentissages ciblés dans les vidéos sous-forme de GuidedTour. Je pense aussi que la page Brouillon des utilisateurs pourrait être utilisée pour pratiquer les exercices d'édition comme l'ajout d'une image, d'un tableau, d'une référence, etc. Il en est de même pour la création de flashcards.

Par cotnre, une des lacunes des vidéos est à mon avis l'absence d'explication des pages à structure pré-définie, comme le cas d'une page de maladie par exemple. J'imagine que c'est le point qui était soulevé par "ontologie"? Dans tous les cas, je pense qu'il serait éventuellement également pertinent d'offrir des GuidedTours ou vidéos qui présente les conventions et les modèles à utiliser pour ce genre de page ayant une structure pré-définie.

J'ai également pensé que si un utilisateur explore un environnement particulier pour la première fois (par exemple la création de flashcards), un GuidedTour ou vidéo approprié lui soit d'emblée proposé. Je m'y connais pas du tout en cookies, mais j'imagine que ce serait possible de les utiliser pour accomplir cette tâche.

Pour ce qui est de ma première question, j'ai cru comprendre en lisant cette page (https://www.mediawiki.org/wiki/Extension:GuidedTour) qu'il était possible de créer un GuidedTour de 2 manières.

  1- En ajoutant le fichier javascript du GuidedTour au namespace de mediawiki
  2- En passant par une extension GuidedTour dans laquelle le fichier javascript est enregistré. Je n'ai pas vu cette extension sur wikimedica, alors j'imagine qu'il est nécessaire de l'installer avant.

Le code du GuidedTour en tant que tel semble lui assez straigh forward. Je vais continuer à explorer l'environnement du wiki et j'aurai alors probablement d'autres idées.

Excellent réflexe d'avoir visionné les vidéos. Je dois te confier par contre qu'ils ont été créés dans les premiers mois de Wikimedica alors que l'ontologie n'existait pas encore et que les visées du projet se limitaient essentiellement au pré-clinique. C'est une excellent idée de cibler les apprentissages des vidéos, ça nous permettra de les remplacer avec quelque chose de plus interactif.

Effectivement, il faudra que le tour se déclenche alors qu'un utilisateur explorer un environnement pour la première fois. À cet effet, je vais ajouter une section à cette tâche qui nous permettra de mieux définir les cas d'usage, les conditions pour qu'un tour se déclenche (ex: on ne déclenchera pas un tour qui montre comment éditer une page si l'utilisateur n'en a pas l'autorisation), les points d'entrée pour le tour, etc.

J'ai aussi trouvé ce tutoriel (https://www.mediawiki.org/wiki/Extension:GuidedTour/Write_an_on-wiki_tour) qui détaille les étapes de création d'un tour.

L'extension a été installé et j'ai codé un début de tour en guise de démo, toute l'information se trouve dans la section Tours.

J'ai consulté la section Tours , j'ai testé le tour qui a été créé et il marche très bien. Par contre, je ne suis par certain de savoir comment je peux moi-même écrire d'autres Tours. J'ai tenté de modifier la page MediaWiki:Guidedtour-tour-basic navigation.js, mais hélas le message suivant est affiché:

Vous ne pouvez pas modifier cette page, pour la raison suivante : Cette page fournit du texte d’interface pour le logiciel sur ce wiki et est protégée pour éviter les abus. Pour ajouter ou modifier des traductions sur tous les wikis, veuillez utiliser translatewiki.net, le projet de régionalisation de MediaWiki.

J'ai ensuite essayé de créer moi-même une page similaire, par exemple MediaWiki:Guidedtour-tour-basic navigation-2.js, mais encore une fois je semble être bloqué:

Il n'y a pour l'instant aucun texte sur cette page. Vous pouvez faire une recherche sur ce titre dans les autres pages, ou rechercher dans les journaux associés, mais vous n'avez pas la permission de créer cette page.

J'imagine que je dois probablement effectuer une autre étape au préalable. J'avoue toutefois être un peu perdu présentement.

J'essayais de créer un tour pour pratiquer quelques techniques d'édition. Pour se faire, le Guided Tour doit détecter lorsque l'utilisateur passe en mode Visual Editor afin de continuer le tour. Cela est normalement fait en utilisant la méthode 'transition'. L'extension Guided Tour a d'ailleurs déjà des fonctions qui regardent si l'utilisateur est en mode édition, que ce soit avec le wikitext ou l'éditeur visuel. Ces fonctions sont gt.isEditing, gt.isEditingWithWikitext et gt.isEditingWithVisualEditor (gt.isEditing étant l'amalgamme des deux précédentes). Or, pour une raison que j'ignore, la fonction isEditingWithVisualEditor ne semble pas fonctionner correctement. Le code source de ces fonctions est ici. https://doc.wikimedia.org/GuidedTour/master/js/source/ext.guidedTour.lib.main.html#mw-guidedTour-method-isEditing

J'ai d'ailleur également essayer de tester le guided Tour fait spécialement pour le Visual Editor ci-dessous, mais ce dernier ne semble pas fonctionner non plus. Je suspecte que ce guided Tour ne fonctionne pas car celui-ci ne détecte pas non plus le passage en mode édition. https://phabricator.wikimedia.org/diffusion/EGTO/browse/master/modules/tours/firsteditve.js

J'imagine qu'il existe probablement une autre manière simple de déterminer si une page est en train d'utiliser le Visual Editor, mais je suis peu familier avec la manière dont les variables et données sont enregistrés dans une page et qu'elles peuvent être récupérées (j'ai tenté d'ouvrir l'outil développeur de Chrome avec F12, mais c'est assez confus).

Sinon, ce pourrait-il que le Visual Editor ait été installé d'une manière différente pour Wikimedica, ce qui crée ce bogue?

Je vais regarder ça, cependant l'éditeur visuel n'a pas été installé d'une manière différente sur Wikimedica. Il est possible que ce soit un bogue de leur côté, mais ça pourra être contourné sans trop de problèmes je pense. En ce moment je suis en train de migrer MediaWiki, alors je vais attendre que ce soit fait avant d'investiguer (au cas où le code ait changé).

Entre-temps, peut-être pouvons nous prioriser la création des tours qui ne dépendent pas de l'éditeur visuel?

J'ai fait un peu de déboggage sur le code et je l'ai converti pour l'utilisation de l'éditeur visuel. Tout semble bien fonctionner.

On aura éventuellement besoin d'un tour sur l'édition en wikicode, mais c'est loin d'être prioritaire vu que c'est une fonction avancée.