Développement d’un dispositif pour publier les productions STIC III et STIC IV en Semantic MediaWiki

(1)

1

Développement d’un dispositif pour publier les productions STIC III et STIC IV en Semantic MediaWiki

MÉMOIRE RÉALISÉ EN VUE DE L'OBTENTION DE LA MAITRISE UNIVERSITAIRE EN SCIENCES ET TECHNOLOGIES DE L'APPRENTISSAGE ET DE LA FORMATION

PAR Leyla Ahmadova

DIRECTEUR DE MÉMOIRE

Daniel Schneider, TECFA, Université de Genève

JURY

Julien Da Costa, TECFA, Université de Genève Lydie Boufflers, TECFA, Université de Genève

GENÈVE, JANVIER 2020

UNIVERSITÉ DE GENÈVE

FACULTÉ DE PSYCHOLOGIE ET DES SCIENCES DE L’ÉDUCATION

(2)

2

RÉSUMÉ

Ce mémoire porte sur le développement d'un dispositif sur MediaWiki qui aide à publier de façon structurée les productions finales élaborées par les étudiants pour les cours STIC III et STIC IV. Les extensions de MediaWIki - Semantic MediaWiki et Page Forms ont été utilisées pour le développement. Le dispositif permet d’ajouter, modifier, rechercher et consulter les productions finales et avoir une base de données de tous les projets de STIC III / IV.

(3)

3

Déclaration sur l’honneur

Je déclare que les conditions de réalisation de ce travail de mémoire respectent la charte d’éthique et de déontologie de l’Université de Genève. Je suis bien l’auteure de ce texte et atteste que toute affirmation qu’il contient et qui n’est pas le fruit de ma réflexion personnelle est attribuée à sa source ; tout passage recopié d’une autre source est en outre placé entre

guillemets.

Genève, le 23 janvier 2020

Leyla Ahmadova

Signature :

(4)

4

Table des matières

1 Introduction ... 7

2 Cadre conceptuel ... 7

2.1 Apprentissage par projet ... 8

2.2 Apprentissage par projet & TIC ... 8

2.3 Partage & Contribution ... 9

2.4 Portails sur EduTechWiki ... 9

2.4.1 Portal: Data mining and learning analytics tools ... 10

2.4.2 Portal: citizen science ... 10

2.5 Formulaires ... 10

2.5.1 Créateur de formulaires HTML en ligne ... 11

2.5.1 Les plugins pour créer les formulaires sur WordPress... 11

2.6 Sites web de partage des objets numériques ... 13

3 Méthodologie ... 14

3.1 Cahier des charges ... 14

3.2 Méthode de développement ... 14

3.3 Méthode d'évaluation ... 15

3.3.1 Public cible et participants ... 15

3.3.2 Déroulement du test ... 15

4 Développement ... 16

4.1 Technologie ... 16

4.1.1 MediaWiki ... 17

4.1.2 Semantic MediaWiki ... 17

4.1.3 Page Forms ... 17

4.1.4 HTML ... 18

4.1.5 CSS ... 18

4.2 Semantic Media Wiki + Page Forms ... 18

4.2.1 Propriétés sémantiques (attributs) ... 18

4.2.2. Modèles ... 19

4.2.3. Formulaires ... 20

4.3 Développement du dispositif ... 21

4.3.1 Conception du prototype ... 21

4.3.2 Définition des propriétés sémantiques ... 22

(5)

5

4.3.3 Création de modèle ... 26

4.3.4 Création de formulaire ... 29

4.3.5 Création de catégorie ... 32

4.3.6 Création du portail ... 33

4.3.7 Rechercher un projet ... 33

4.3.8 Consulter tous les projets ... 35

4.3. 9 Design du dispositif ... 36

4.3.10 Dispositif final ... 37

5 Résultats ... 38

5.1 Synthèse des résultats ... 38

5.1.1 Tâche 0 ... 38

5.1.2 Tâche 1 ... 38

5.1.3 Tâche 2 ... 39

5.1.4 Tâche 3 ... 39

5.1.5 Tâche 4 ... 39

5.2 Modifications et résolutions des problèmes survenus ... 39

5.3 Résultats de l'évaluation post-test ... 43

6 Limites et discussions ... 44

7 Conclusion ... 45

8 Bibliographie ... 47

9 Annexes ... 50

Annexe 1 : Observation des productions finales de l’année 2015 ... 50

Annexe 5 : Statistique sur les domaines utilisés dans les productions ... 54

(6)

6

Table des figures

Figure 1. Prototype du modèle ... 22

Figure 2. Définir une propriété ... 23

Figure 3. Propriétés sémantiques définîtes ... 23

Figure 4. Créer un modèle ... 27

Figure 5. Modèle : Portail STIC projet info ... 27

Figure 6. Modèle : Portail STIC projet description ... 28

Figure 7. Créer un formulaire ... 29

Figure 8. Formulaire du projet ... 32

Figure 9. Créer une catégorie ... 32

Figure 10. Logo du portail STIC ... 33

Figure 11. Modèle : Portail STIC projet info query ... 34

Figure 12. Formulaire : Portail STIC projet info query ... 34

Figure 13. Exécuter la requête : Portail STIC projet info query ... 35

Figure 14. Liste des projets STIC Portail ... 36

Figure 15. Le dispositif - Portail Projets STIC ... 37

Figure 16. Liste des projets par ordre alphabétique ... 42

Figure 17. Catégorie: Portail STIC outils ... 42

(7)

7

1 Introduction

Dans le cadre du master MALTT, les deux cours libres sont proposés en alternance chaque année.

Il s’agit du cours STIC III et STIC IV - Sciences et Technologies de l’Information et de la Communication. STIC III a lieu aux semestres d'automne des années paires et STIC IV aux semestres d'automne des années impaires. Ces cours sont ouverts aux étudiant-e-s de la première et de la deuxième année (STIC:STIC III — EduTech Wiki, s. d.). Les thèmes des cours peuvent changer chaque année, mais en règle générale, ces cours comprennent des activités CFAO - Conception et fabrication assistée par ordinateur, aussi connue comme design et fabrication numérique. L’objectif général de ces cours et d’utiliser le design et la fabrication pour créer des outils didactiques et mettre en œuvre des scénarios pédagogiques (CFAO — EduTech Wiki, s. d.). Les cours STIC III/IV, surtout, visent la création d’outils pédagogiques, mais d’autres thèmes ont aussi été abordés, comme la physicalisation de données ou encore la communication avec des "wearables".

Ces cours utilisent la méthode pédagogique qui est enseignement ou apprentissage par projet.

Pendant les dernières quatre années les étudiants ont élaboré plus de 60 outils pédagogiques.

La question est « Comment mieux gérer et stocker les productions finales élaborées dans le cadre des cours STIC III et STIC IV» ? L’enseignant de ces cours, Daniel K. Schneider, nous a suggéré de créer le dispositif pour publier ces productions finales de manière structurée ce qui permet d’avoir une base de données de ces outils pédagogiques avec l’option de la recherche.

2 Cadre conceptuel

Les cours STIC III / IV portent sur la conception et la fabrication assistées par ordinateur dans l'enseignement. Lors des cours STIC III/IV les outils de fabrications numériques tels que la machine à broder, la découpeuse laser, l’imprimante 3D et d’autres sont présentés aux étudiants.

Les activités où les étudiants se familiarisent avec la technologie numérique sont appelées les activités d’éveil. À leur tour, les étudiants doivent créer un petit objet sur un thème commun en utilisant ces outils de fabrication. Ensuite, les étudiants se lancent dans un grand projet en choisissant la technologie pour fabriquer son propre outil didactique.

De cette façon, les cours STIC III/IV utilisent la méthode pédagogique project-based learning. En français, ce terme s’est traduit comme l’apprentissage par projet, pédagogie par projet ou pédagogie de projet.

(8)

8

2.1 Apprentissage par projet

L’Apprentissage par projet se réfère à une approche de pédagogie active socio-constructiviste qui permet à l’apprenant de développer des compétences et des connaissances en réalisation d'un projet concret (Moursund, 1999). Le projet peut être individuel ou collectif.

Historiquement, l’idée de l’apprentissage par projet (project-based learning) remonte au William Heard Kilpatrick qui a proposé les bases théoriques dans un article intitulé The Project Method, publié en 1918. Dans cet article, Kilpatrick préconisait un enseignement centré sur les buts et besoins des apprenants plutôt que sur le contenu des connaissances. Ensuite, John Dewey a établi les bases empiriques de pédagogie de projet et il considérait que l’action était la meilleure manière d’apprendre et que la pensée doit être au service de la résolution des problèmes de la vie (Apprentissage par projets—Wiki-TEDia, s. d.).

2.2 Apprentissage par projet & TIC

Les cours STIC III et STIC IV appartiennent au domaine des technologies de l’information et de la communication. L’usage de méthode apprentissage par projet dans le domaine de TIC, aussi que de nombreux exemples sont décrits par David Moursund dans son livre Project-Based Learning Using Information Technology.

Selon Moursund, l’apprenant n’a pas besoin d’apprendre beaucoup ou savoir beaucoup sur un outil informatique avant de commencer à l’utiliser dans un projet. C’est avec un minimum de connaissances sur un outil, un étudiant peut commencer à l'utiliser pour réaliser son projet. Le projet sert alors de la motivation et fournit un contexte authentique pour en savoir plus à propos de l'outil. L'apprentissage de l'outil et son utilisation, pour réaliser un projet sont parfaitement intégrés(Moursund, 1999).

L’apprentissage par projet se concentre sur un problème à résoudre ou une tâche à accomplir.

L'idée la plus importante pour résoudre des problèmes et accomplir des tâches est que vous vous basez sur votre propre travail précédant et sur le travail précédant des autres. Quand face à un problème ou une tâche difficile, vous utilisez les connaissances, les compétences et les aides d’autres personnes ont développé, ainsi que vos propres connaissances, compétences et travail (Moursund, 1999).

(9)

9 Si l’usage des connaissances, les compétences et les aides des autres personnes nous servent à résoudre une tâche difficile, dans ce sens les autres personnes peuvent se servir de nos connaissances, les compétences et les aides pour résoudre leurs problèmes et tâches difficiles.

De cette façon, l’idée de partage et de contribution vient à l’esprit.

2.3 Partage & Contribution

Dans littérature, nous trouvons les termes contributing student et contribution-oriented pedagogy, c’est-à-dire l’étudiant qui contribue et la pédagogie orientée vers la contribution.

Collis & Moonen décrit le terme contribution-oriented pedagogy comme l’approche dans lequel les apprenants trouvent, créent, soumettent et / ou partagent des ressources en utilisant un environnement de support de cours basé sur le Web et il est identifié comme un modèle particulièrement précieux pour les formes d'apprentissage à distance et sur ordinateur. (Collis &

Moonen, 2009)

Dans ce sens, les cours STIC III/IV soutiennent l’idée de partage et la contribution. Selon les consignes des cours, les étudiants sont invités à contribuer à la rédaction des articles sur wiki - EduTechWiki et ils doivent documenter le projet réalisé sur la même plateforme. De cette façon, les productions finales des cours STIC III/IV deviennent les ressources publiques qui sont partagées et valorisées en dehors des cours. Les fabrications numériques des étudiants sont publiées dans un Pedia-livre qui est distribué pendant les événements d’outreach, les foires internationales du livre, les festivals scientifiques et ces livres sont utilisés dans le monde entier par quelque mille utilisateurs. D’autre part, les projets des cours STIC III/IV sont publiés sur EduTechWiki qui compte environ 1,5 million d’utilisateurs par an. Donc, le travail de l'apprenant ne reste pas à l'état d'exercice dans le cadre d'un apprentissage, mais devient une véritable activité de production de connaissances, valorisée en dehors des cours (Schneider et al, 2019).

De l’expérience personnelle, la réception d’un livre imprimé dans lequel figurent le nom et le projet personnel réalisé ajoute le sentiment de valeur et la motivation à l’étudiant.

2.4 Portails sur EduTechWiki

EduTechWiki est un wiki hébergé à TECFA à l’Université de Genève qui traite les sujets des technologies éducatives. Il existe deux versions du wiki : la version anglaise et la version française.

La version anglaise compte aujourd’hui 1865 articles qui peuvent être utiles aux enseignants, aux concepteurs pédagogiques, aux chercheurs et aux consultants en e-learning (EduTech Wiki, s. d.).

(10)

10 Dû au fait que notre dispositif présentera un portail, nous nous intéressons aux technologies similaires, les portails déjà existants. Dans notre contexte, nous parlons du portail web. Un portail web est un site web qui offre une porte d'entrée commune à un large éventail de ressources et de services accessibles sur Internet et centrés sur un domaine d'intérêt ou une communauté particulière (Allard, 2014). Un portail sur wiki est une page principale, une page d’accueil qui permet de structurer d’autres pages et articles autour d'un thème donné. Par exemple, Wikipedia utilise les portails ¹.

La version anglaise du EduTechWiki nous présente deux portails :

 Portal: Data mining and learning analytics tools

 Portal: citizen science

2.4.1 Portal: Data mining and learning analytics tools

Portail Data mining and learning analytics tools ² permet d’ajouter, consulter et rechercher les outils d’analyse de contenu de données, les outils d’exploration de données et les outils d'analyse de l'apprentissage.

2.4.2 Portal: citizen science

Portail Citizen science³ - est une recherche scientifique avec la participation d'amateurs. Les participants peuvent fournir des ressources, classer des données, analyser des données ou parfois participer plus activement à la recherche. Les participants peuvent ajouter de nouveaux projets scientifiques, infrastructures et logiciels sur le sujet de citizen science ou ils peuvent contribuer aux entrées existantes.

2.5 Formulaires

Les formulaires nous entourèrent partout. Depuis l’apparition du Web 2.0 qui facilite l’interaction entre utilisateurs, le formulaire web est devenu un instrument principal qui sert d’interagir avec le web. Aujourd’hui nous utilisons plusieurs types de formulaires sur différents sites Web, de la simple recherche qui nous permet de saisir des mots-clés afin de trouver ce que

1 https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Liste_des_portails

2 http://edutechwiki.unige.ch/en/Portal:_Data_mining_and_learning_analytics_tools

3 https://edutechwiki.unige.ch/en/Portal:_citizen_science

(11)

11 nous cherchons ou des formulaires qui nous permettent de nous inscrire aux réseaux sociaux. Un formulaire web est utilisé pour obtenir des données de l'utilisateur conformément aux exigences.

En d’autres mots, le formulaire permet à l'utilisateur d'envoyer des données au site web et ces données sont envoyées à des serveurs web. Nous pouvons créer un formulaire simple avec le langage HTML et les tags <form> </form>. La tendance d’aujourd’hui est l’utilisation de services visuels WYSIWYG qui permettent de créer les formulaires sans aucun besoin d’apprendre le langage HTML. WYSIWYG – est l’abréviation de l’expression - What you see is what you get.

Regardons quelques services que propose la création des formulaires HTML en ligne sans savoir la programmation.

2.5.1 Créateur de formulaires HTML en ligne

JotForm⁴ – est gratuit et contient de nombreuses fonctionnalités telles que des modèles et des thèmes et la prise en charge des paiements en ligne, des widgets et des applications tierces. Il prend également en charge l'analyse des formulaires et la collaboration avec les autres membres.

Il permet de publier et partager les formulaires et de recevoir des e-mails chaque fois qu’un utilisateur remplit un formulaire.

Cognito Forms⁵ – dispose une interface intuitive avec des fonctionnalités super robustes. Vous pouvez créer des formulaires, les intégrer à votre site Web. Parmi les nombreuses fonctionnalités est l’intégration avec Stripe ou PayPal pour accepter les paiements via cartes de crédit et les signatures électroniques.

Type Form⁶ – a une interface unique et permet de créer des enquêtes et des formulaires qui fonctionnent sur tous les appareils.

2.5.1 Les plugins pour créer les formulaires sur WordPress

WordPress ⁷est un logiciel libre utilisé pour créer des sites, blogs ou applications. Aujourd’hui de plus en plus les sites web ou les blogs utilisent le logiciel WordPress. En utilisant les extensions (plugins) de WordPress nous pouvons ajouter les fonctionnalités à notre site. Il existe

4 https://www.jotform.com

5 https://www.cognitoforms.com

6 https://www.typeform.com

7 https://fr.wordpress.org

(12)

12 nombreuses extensions qui permettent de créer les formulaires sur WordPress. Regardons quelques-uns.

Contact Form 7⁸ – est l’un des plus anciens plugins pour créer des formulaires sur WordPress. Il s'agit d'un plugin entièrement gratuit qui compte plus de 5 millions d'installations actives. Ce plugin ne dispose pas de générateur de forme visuelle, pour l’utiliser, il faut connaître le HTML.

Il permet de créer des formulaires de contact simples et d’ajouter des champs de formulaire tels que des zones de texte, des boutons radio, des cases à cocher, des menus déroulants, des dates, etc.

WPForms⁹ – est un générateur de formulaire drag&drop. La version gratuite WPForms Lite possède les fonctionnalités de base du formulaire de contact, y compris les champs de formulaire de base, captcha pour la protection contre le spam, les notifications par e-mail et une page de remerciement pour la confirmation du formulaire. La version payante permet d'étendre la fonctionnalité et permet de créer des formulaires multipages, des formulaires d'abonnement par e-mail, des formulaires de paiement, des formulaires de commande, etc. WPForms pro est également livré avec d'autres champs et fonctionnalités des formulaires puissants comme la logique conditionnelle intelligente, le téléchargement de fichiers, la géolocalisation, la fonctionnalité de signature, l'abandon de formulaire, la connexion et l'enregistrement de l'utilisateur pour WordPress, et plus de 150 formulaires personnalisés. WPForms est utilisé par plus de 3 millions de sites Web.

Formidable Forms¹⁰ – est un plugin le plus avancé du marché. Il est plutôt conçu pour les développeurs ou les utilisateurs avancés qui cherchent à créer rapidement des solutions complexes. L’extension propose l’interface drag&drop pour créer des formulaires avancés tels que des questionnaires, des sondages, des formulaires de paiement, des formulaires d'inscription, des formulaires de profil. La fonction Formidable Views permet de formater, filtrer et afficher les données soumises par les utilisateurs sur le front-end du site Web. Le plugin permet de créer des répertoires, des listes de sites d'emploi, des calendriers d'événements, des systèmes de gestion, des systèmes de notation. Formidable s'intègre à toutes les plateformes de marketing par e-mail et de paiements populaires. L’intégration avec WooCommerce est

8 https://wordpress.org/plugins/contact-form-7

9 https://wpforms.com

10 https://formidableforms.com

(13)

13 présente. La version gratuite est très limitée, c’est seulement la version payante propose toutes les fonctionnalités mentionnées.

2.6 Sites web de partage des objets numériques

Dans cette partie, nous aimerons présenter quelques sites web qui permettent de créer, d’importer et partager les objets numériques.

Thingiverse¹¹ est une communauté de conception qui permet de créer et partager des objets imprimables en 3D. C’est un site web dédié au partage des fichiers de fabrication numérique créés par les utilisateurs. C’est une plate-forme ouverte, tous les designs sont encouragés à être licenciés sous une licence Creative Commons, ce qui signifie que n'importe qui peut utiliser ou modifier n'importe quel design. Le Thingiverse possède une application (customiser) qui permet d’apprendre à créer le design 3D. L’inscription sur le site est simple et gratuite. Il est possible de l’importer un objet en remplissant le formulaire. Les imprimantes 3D, les découpeuses laser, les fraiseuses et de nombreuses autres technologies peuvent être utilisées pour créer des fichiers partagés avec les utilisateurs sur Thingiverse.

Tinkercad¹² est une application gratuite et facile à utiliser pour la conception 3D, l'électronique et le codage. Il est utilisé par les enseignants, les enfants, les amateurs et les concepteurs pour imaginer, concevoir et fabriquer n'importe quoi. L’inscription sur le site est simple et gratuite et l’application de tinkercad permet de fabriquer les designs souhaités et les partager avec la communauté Tinkercad. Les designs sont sous une licence Creative Commons. Les formes peuvent être importées en formats : STL, OBJ et SVG. Tinkercad exporte des modèles au format STL ou OBJ, prêts pour l'impression 3D. Tinkercad offre également la possibilité de concevoir des structures à l'aide de briques Lego.

YouMagine¹³ - est une communauté en ligne qui permet de partager, remixer et créer des objets imprimés en 3D. Les designs sont sous la licence Creative Commons. Le site web compte plus de 15 000 modèles à imprimer en 3D.

11 https://www.thingiverse.com

12 https://www.tinkercad.com

13 https://www.youmagine.com

(14)

14

3 Méthodologie

3.1 Cahier des charges

L’objectif de ce mémoire était de créer un dispositif sur MediaWiki pour publier les productions finales des cours STIC III et STIC IV. Il a été convenu avec Daniel Schneider, le commanditaire de ce travail, que le dispositif devait avoir des modèles pour créer les productions et avoir une page portail qui permet d’ajouter, consulter et chercher les productions. En d'autres termes, il a été convenu de développer un formulaire qui permet d’ajouter l’information sur les productions de façon structurée et avoir une sorte de base de données de tous les projets STIC III et STIC IV avec la possibilité de la recherche, la modification et la consultation.

3.2 Méthode de développement

Le développement de dispositif s’est fait en plusieurs étapes. La première étape est l’étape d’information et de prise en main. Dans l'étape d'information, le but était double. D'une part, il fallait commencer à s'informer sur Semantic MediaWiki, comprendre la notion de modèle (template) de MediaWiki et comprendre les fonctionnalités de l’extension Page Forms. D’une autre part, il fallait s’informer sur toutes les productions STIC III/IV des années 2015-2018 pour déterminer quels éléments sont pertinents pour la création de modèle et de formulaire. Pour la phase de prise en main, le MediaWiki avec l’extension Page Forms était installé sur localhost de l’ordinateur portable afin de se familiariser avec le système de modèles et comprendre la technologie de l’extension Page Forms. Cette étape a été importante, car elle a permis de comprendre la structure et les fonctionnalités de l’extension, ainsi que la structure des pages des modèles du MediaWiki.

Une fois que les phases d'information et de prise en main ont été terminées, l'étape de développement a pu commencer. Le développement de dispositif s’est fait par processus itératif, les fonctionnalités ont été ajoutées les unes après les autres.

Durant le processus de développement il y a eu des phases de feedback et des modifications.

L’avancement du dispositif et les problèmes récurrents ont été présentés au directeur du mémoire. Le directeur de mémoire a donné son avis et proposé des solutions pour résoudre les problèmes. Les modifications du dispositif ont été faites sur l’avis et les propositions des améliorations du directeur de mémoire.

(15)

15 Les tests utilisateurs ont permis de relever certains bugs et problèmes du dispositif. Les modifications post-test ont été faites afin de résoudre ces problèmes, enlever les bugs du système et améliorer la facilité d’utilisation du dispositif.

3.3 Méthode d'évaluation

Pour évaluer le dispositif, quatre tests utilisateurs ont été réalisés. Ces tests ont eu plusieurs buts.

Le premier but était de voir si utilisateurs étaient capables d’utiliser le dispositif et notamment le formulaire proposé. Le deuxième but était de voir les difficultés d’utilisation, les bugs de système pour pouvoir les corriger et le dernier but était de voir comment les utilisateurs jugent ce dispositif de point de vue de l’utilisabilité et l’utilité.

Pour tester l’utilisabilité et l’utilité du dispositif, quatre tâches ont été créées. Ces tâches couvrent toutes les fonctionnalités du dispositif. Avant de commencer la première tâche, l’utilisateur a été invité à lire sa production finale STIC III / IV pour se souvenir de son projet.

Ensuite, il gardait cette page ouverte afin de faire un copier-coller de l’information nécessaire dans le dispositif.

3.3.1 Public cible et participants

Le public cible de ces tests utilisateurs était les étudiants de Master MALLT (Master in Learning and Teaching Technologies) qui ont suivi les cours STIC III ou STIC IV. Ces personnes avaient déjà utilisé un wiki et avaient un certain niveau de l’expérience avec cet outil. Les tests utilisateurs ont été passés sur un homme de volée Utopia (2014/2015), un homme de volée Volt (2015/2016), une femme de volée Volt (2015/2016) et une femme de volée Wall-E (2016/2017).

3.3.2 Déroulement du test

Les tests utilisateurs ont été menés individuellement et ont duré environ quarante minutes.

Chaque test utilisateur a commencé par une petite introduction brève de ce travail de mémoire.

Il a été expliqué au testeur que le but de ce travail était de développer un dispositif sur MediaWiki qui ressemble les productions finales des cours STIC III et STIC IV. Il a été expliqué que leur présence était nécessaire afin de tester le dispositif et voir leurs interactions. L'objectif final de ce test utilisateur est de prendre en compte ces tests afin de modifier le dispositif et de

(16)

16 l'améliorer en fonction des problèmes survenus. Afin de comprendre le raisonnement des testeurs lors des interactions avec le dispositif, il a été demandé de verbaliser pendant qu'ils exécutent les tâches.

Afin de commencer le test, l’utilisateur a été prié ouvrir et lire sa production finale élaborée pour le STIC III ou STIC IV sur edutechwiki.unige.ch. Les liens vers les projets ont été fournis aux testeurs. Après avoir lu sa production finale, le testeur a pu commencer le test utilisateurs. A l’aide du lien fournit l’utilisateur peut ouvrir le dispositif - portail projets STIC où il exécute les quatre tâches demandées. Pendant la réalisation de ces quatre tâches, les testeurs ont eu le droit de garder la page ouverte de son projet et copier l’information concernant le projet. À chaque tâche, une carte au testeur a été donnée dans laquelle était écrite la tâche qu'il devait réaliser. Il a été demandé de lire la tâche à haute voix et de poser des questions s'ils ne comprenaient pas la tâche. Chaque réalisation de tâche a été chronométrée après que le testeur ait affirmé avoir compris la tâche.

Après avoir complété les quatre tâches, l'utilisateur a dû remplir un questionnaire post-test. Le questionnaire post-test utilisé pour ce travail est le questionnaire TAM (Technology Acceptance Model), qui mesure l'utilité perçue par les utilisateurs en plus de la facilité d'utilisation perçue.

Le questionnaire est composé de 12 questions. Chaque question doit être répondue sur une échelle de 1 à 7. Sur cette échelle, le 1 signifie "Pas du tout d'accord" et le 7 signifie "Tout à fait d'accord" (Davis, 1989). Après avoir rempli ce questionnaire, le testeur a eu l’occasion de donner son feedback concernant le dispositif.

4 Développement

4.1 Technologie

Le dispositif créé dans le cadre de ce travail a été développé sur le wiki - EdutechWiki qui traite les sujets des technologies éducatives. EdutechWiki est un wiki hébergé à TECFA, à l’université de Genève qui fonctionne sur le logiciel MediaWiki (EduTech Wiki, s. d.).

Les technologies suivantes ont été utilisées pour créer le dispositif :

 Le logiciel MediaWiki

 L’extension Semantic MediaWiki

(17)

17

 L’extension Page Forms

 Le langage de balisage HTML

 Le langage du style CSS

4.1.1 MediaWiki

Le MediaWiki est un logiciel open-source libre qui permet la lecture et l’écriture, en autres termes la création et la modification collaborative de contenu. A l’origine, le MediaWiki a été conçu pour le Wikipedia. Mais aujourd’hui le MediaWiki est devenu le logiciel de wiki le plus populaire dans le monde et est utilisé sur des dizaines de milliers de sites web (Koren, 2012).

4.1.2 Semantic MediaWiki

Le Semantic MediaWiki est une extension très importante du logiciel MediaWiki. Elle définit un framework afin de stocker des informations qui peuvent ensuite être interrogées. L’extension Semantic MediaWiki peut transformer un wiki dans une base de données collaborative puissante avec historique de modification plus large en comparaison avec une base de données standard (Koren, 2012). Les wikis traditionnels contiennent du texte qui ne peut être ni compris, ni évalué par les ordinateurs. Semantic MediaWiki permet d’ajouter des annotations sémantiques aux pages d’un wiki qui sont compris par les ordinateurs. Ces annotations sémantiques permettent de rechercher, organiser, baliser, naviguer, évaluer et partager le contenu d'un wiki et fonctionner comme une base de données collaborative.

Semantic MediaWiki, qui a été diffusé pour la première fois en 2005, évolue aujourd'hui grâce à plus de dix développeurs et est utilisé actuellement activement dans des centaines de sites, dans beaucoup de langues, tout autour du monde, notamment dans des compagnies incluses dans Fortune 500, des projets biomédicaux, des agences gouvernementales et des répertoires de consommateurs (Présentation de Semantic MediaWiki—Semantic-mediawiki.org, s. d.).

4.1.3 Page Forms

Le Page Forms est une extension du MediaWiki, appelé "Semantic Forms" jusqu'en novembre 2016. Cette extension de MediaWiki permet à l'utilisateur d'ajouter, d'éditer et de consulter des données à l'aide de formulaires (Extension:Page Forms/fr—MediaWiki, s. d.). Les utilisateurs du wiki peuvent eux-mêmes créer et éditer les formulaires sans savoir la programmation.

(18)

18 L’extension Page Forms peut être utilisée elle-même ou ensemble avec d’autres extensions, par exemple Cargo ou Semantic MediaWiki.

4.1.4 HTML

Le HTML est un langage de balisage utilisé pour la création des pages web. L’utilisation des balises (tags) du langage HTML est permise dans le wiki. Dans le développement du dispositif nous avons beaucoup utilisé la balise <div> afin de pouvoir ajouter un code de style sur les éléments souhaités.

4.1.5 CSS

Le langage CSS, Cascading Style Sheets (feuilles de styles en cascade), sert à mettre en forme des documents web, type page HTML. Dans notre dispositif, le CSS a été utilisé pour styler les formulaires, la page du portail, la page de modèle du dispositif.

4.2 Semantic Media Wiki + Page Forms

L’utilisation de l’extension Page Forms avec l’extension Semantic MediaWiki permet non seulement de créer et éditer les formulaires, mais en même temps d’ajouter l’information sémantique dans une page en utilisant le formulaire, ce qui permet ensuite de stocker et interroger les données. Les utilisateurs peuvent tout simplement remplir les champs du formulaire sans utiliser de la syntaxe particulière de Semantic MediaWiki et l’enregistrement du formulaire génère une jolie page structurée.

Pour créer une page avec les extensions Page Forms et Semantic MediaWiki, les trois éléments sont nécessaires :

 Propriétés sémantiques (attributs)

 Un modèle (template)

 Un formulaire

4.2.1 Propriétés sémantiques (attributs)

Le Semantic MediaWiki représente les données par une structure en triplet ou en trois parties – un sujet, un prédicat et un objet. Ce concept vient du web sémantique. Le sujet est une page du MediaWiki. Le prédicat est le nom d’une propriété ou d’un attribut, en anglais property.

(19)

19 L’attribut (propriété) décrit le contenu d’une page et est composé d’un nom et d’une valeur. La valeur de l’attribut représente un objet.

 Sujet – Page du wiki

 Prédicat – Nom de l’attribut (propriété)

 Objet – Valeur de l’attribut (propriété)

Les attributs possèdent les types suivants : page, texte, code, URL, nombre, date, température, numéro de téléphone, booléen, etc. Le type de l’attribut est très important parce qu’il définit comment les informations vont être affichées.

4.2.2. Modèles

Les modèles sont des pages de wiki standard dont le contenu est conçu pour être transclus (inclus) à l'intérieur d'autres pages. L’utilisation de modèle permet de structurer l’information.

Les « modèles » fournissent donc une structure aux pages aussi qu’un joli standard d’affichage (Koren, 2012). Ils sont appelés dans des pages du MediaWiki avec le code :{{nom_modèle}}.

Un seul modèle peut être utilisé ou appelé sur les plusieurs pages. Les modèles sont stockés dans l’espace de MediaWiki – Modèles.

Les modèles avec les annotations sémantiques deviennent une technologie très puissante qui permet de sauvegarder et interroger les données sans aucun effort de la part de l’utilisateur. Il faut ajouter, que le modèle qui contient le tag de catégorie – ajoute chaque page créée avec ce modèle dans cette catégorie (Koren, 2012).

Regardons la syntaxe d’un modèle avec les propriétés sémantiques dans l’exemple suivant :

Ceci est le modèle « nom_modèle». Il devrait être appelé selon le format suivant :

<pre>

{{nom_modèle

|champ1=

|champ2=

}}

</pre>

Modifiez la page pour voir le texte du modèle.

</noinclude>

{| class="wikitable"

(20)

20

! Champ1_label

| [[Attributs1::{{{champ1|}}}]]

|-

! Champ2_label

| [[Attribut2::{{{champ2|}}}]]

|}

</includeonly>

[[Category:nom_category]]

Le texte entre les balises <noinclude></noinclude> n’est pas transclus dans une autre page, mais apparaît uniquement sur la page elle-même. C'est utile pour la documentation du modèle.

Le texte entre les balises <includeonly></includeonly> est uniquement utilisé lorsque la page est transclue depuis une autre page, et n'apparaît pas sur la page elle-même.

La fonction #arraymap permet d’ajouter plusieurs valeurs dans un seul champ.

! Champ_label

| {{#arraymap:{{{champ|}}}|,|x|[[Attribut::x]]}}

4.2.3. Formulaires

Lors de création d’un formulaire, l’extension Page Forms appelle le nom de modèle existant qui contient les différents champs. La structure du formulaire est la suivante :

Un formulaire peut contenir plusieurs modèles.

{{{for template|template_1}}}

{{{end template}}}

{{{for template|template_2}}}

{{{end template}}}

Les modèles structurent l’affichage des données entrées dans le formulaire et indiquent leur ordre d’apparition avec les attributs. L’utilisateur entre du texte dans les champs du formulaire

{{{for template|Nom du modèle}}}

! Nom du champ1:

| {{{field|Nom du champ1}}}

|-

! Nom du champ2:

| {{{field|nom du champ2}}}

(21)

21 et il enregistre son travail. Au moment de l’enregistrement, la page est générée. La structure de cette page correspond au modèle appelé dont les attributs prennent la valeur que l’utilisateur a entrée dans les champs. Les formulaires peuvent également être utilisés pour modifier les données dans une page existante. L’onglet Modifier avec formulaire peut être activé pour afficher sur n'importe quelle page.

Chaque champ du formulaire est composé de nom et de paramètre.

! Nom du champ:

| {{{field|nom du champ paramètre1|paramètre2}}}

Les paramètres proposés par l’extension sont nombreux. Regardons quelques-uns : {{{field|type|input type=radiobutton|mandatory|}}}

Ce champ a le type d’entrée des données – butons de radio. Ce champ est obligatoire.

{{{field|Image|uploadable||file|values from namespace=File}}}

Ce champ permet d’importer un fichier d’image et chercher les images déjà existantes dans l’espace File (Fichier).

Les formulaires sémantiques prennent également en charge l'auto-complétion des champs, afin que les utilisateurs puissent facilement voir les valeurs entrées précédemment pour un champ donné. Cela contribue à éviter les problèmes de nommage ambigu et les erreurs de l'orthographe. Les formulaires existants sont stockés dans l’espace de MediaWiki – Formulaires (Forms).

4.3 Développement du dispositif

4.3.1 Conception du prototype

Nous avons commencé notre développement par la création du prototype du page qui ressemble les points des projets finals de STIC III et STIC IV. Afin de concevoir ce prototype du modèle qui décrit bien les productions finales, les projets des années 2015-2018 ont été observés. En observant les productions finales déjà existantes, nous avons aperçu que dans le cadre des cours STIC III/IV les étudiants MALTT ont développé des outils pédagogiques et les objets didactiques en utilisant les technologies suivantes : découpe laser, broderie machine et l’impression 3D.

(22)

22 Cette information nous permet de définir une catégorie – technologie utilisée. Nous avons observé chaque projet et nous avons pu récupérer les points communs. Il faut souligner que au moment d’observation des projets de l’année 2018, pas tous les productions finales ont été encore rendues. La statistique et les tableaux de ces points communs sont en annexe. Ensuite, le prototype sur le logiciel Axure a été créé.

En observant chaque projet nous avons pu élaborer le prototype du modèle suivant : Auteur-e-s – Utilisateur du Wiki

Année de fabrication – 2015, 2016, 2017, 2018, 2019, 2020

Technologie utilisée – Broderie machine, Découpe laser, Impression3D, Autre Type – Jeu, Activité, Atelier, Kits constructif, Physicalisation de données, Autre

Domaine d’enseignement – Anatomie & Santé, Art, Astronomie, Biologie, Chimie, Collaboration & Sociabilisation, Géographie, Géométrie, Histoire, Informatique, Ingénierie, Langue étrangère, Langue française, Logopédie, Marketing & Vente, Mathématique, Music, Physique, Psychologie, Sport, Autre

Niveau d’enseignement – Ecole enfantine, Ecole primaire (cycle élémentaire), Ecole primaire (cycle moyen), Ecole secondaire I (cycle d’orientation), Ecole secondaire II (Collège), Université/ HES/ EPS, Enseignement spécialisé, Enseignement facultatif

Public cible – Enfants, Adolescents, Etudiants, Adultes, Experts / Spécialistes

Public cible (Age) – 2 -3 ans, 4-5 ans, 6-7 ans, 8-9 ans, 10-11 ans, 12-13 ans, 14-15 ans, 16-17 ans, 18-19 ans

Image – Importer une photo du projet

Fichier source – Importer un fichier du projet Mots clés – les mots clés

Description (Objectif pédagogique) – Texte Fabrication (Réalisation technique) – Texte Spécifications techniques – Texte

Utilisation (scénario pédagogique, règles du jeu) – Texte FIGURE 1.PROTOTYPE DU MODÈLE

4.3.2 Définition des propriétés sémantiques

La première étape de développement du dispositif est la définition des propriétés sémantiques dans le Semantic MediaWiki. Nous définirons les propriétés à l’aide de Pages spéciales – Formulaires sémantiques – Définir une propriété.

(23)

23 FIGURE 2.DÉFINIR UNE PROPRIÉTÉ

Selon notre modèle de base, nous avons défini les propriétés sémantiques suivantes : Est auteur de projet STIC du type Page

Est année de fabrication du type Texte Est technologie utilisée du type Texte Est type du type Texte

Est domaine d’enseignement du type Texte Est niveau d’enseignement du type Texte Est public cible du type Texte

Est public cible (âge) du type Texte Est image de projet STIC du type Page

Est fichier source de projet STIC du type Page Sont mots clés du type Texte

FIGURE 3.PROPRIÉTÉS SÉMANTIQUES DÉFINÎTES

La propriété sémantique Est fichier source de projet STIC du type Page a été ajoutée après un feedback du directeur de ce travail Mr. Schneider. Et c’est la raison pour laquelle elle ne figure pas dans notre modèle initial.

Toutes les propriétés sémantiques sont stockées dans l’espace – Pages spéciales – MediaWIki sémantique – Propriétés. Le parcours de la liste de propriétés nous permet de trouver les attributs utilisés dans notre dispositif et en cliquant sur chaque propriété nous pouvons entrer les valeurs des attributs souhaitées.

Les attributs suivants ne prennent pas les valeurs prédéfinies :

 Est auteur de projet STIC du type Page

 Est image de projet STIC du type Page

 Est fichier source de projet STIC du type Page

 Sont mots clés du type Texte

(24)

24 Après avoir défini les propriétés sémantiques (attributs), nous avons indiqué les valeurs autorisées pour chaque attribut qui prend des valeurs :

Attribut: Est année de fabrication Cette propriété est de type Texte.

Les valeurs autorisées pour cette propriété sont :

 2015

 2016

 2017

 2018

 2019

 2020

Les valeurs de l’attribut Est année de fabrication indiquent l’année de fabrication d’une production finale. Les valeurs peuvent être ajoutées au fur et aux mesures.

Les valeurs de l’attribut Est technologie utilisée correspondent aux technologies utilisées pour les productions finales des cours STIC III/ IV. En ce moment, ces trois technologies sont utilisées.

Attribut: Est type

Cette propriété est de type Texte.

 Jeu

 Activité

 Atelier

 Kits constructif

 Physicalisation de données

Les valeurs de l’attribut Est type décrit le type ou la nature des productions finales.

Attribut: Est domaine d’enseignement Cette propriété est de type Texte.

 Anatomie & Santé

 Mathématique

Attribut: Est technologie utilisée Cette propriété est de type Texte.

 Broderie machine

 Découpe laser

 Impression3D

 Autre

(25)

25

 Langue française

 Art

 Biologie

 Informatique

 Langue étrangère

 Music

 Chimie

 Ingénierie

 Logopédie

 Histoire

 Géométrie

 Physique

 Psychologie

 Géographie

 Sport

 Astronomie

 Collaboration & Sociabilisation

 Marketing & Vente

 Autre

Les valeurs de l’attribut Est domaine d’enseignement contiennent les domaines ou les disciplines enseignées.

Attribut: Est niveau d’enseignement Cette propriété est de type Texte.

 Ecole enfantine

 Ecole primaire (élémentaire)

 Ecole primaire (moyen)

 Ecole secondaire I (cycle d’orientation)

 Ecole secondaire II (Collège)

 Université/ HES/ EPS

 Enseignement spécialisé

 Enseignement facultatif

 Autre

Les valeurs de l’attribut Est niveau d’enseignement proposent à choix les niveaux de scolarisation selon le système scolaire Genevois.

Attribut: Est public cible

Cette propriété est de type Texte.

 Enfants

(26)

26

 Adolescents

 Etudiants

 Adultes

 Experts / Spécialistes

Les valeurs de l’attribut Est public cible réfèrent au public cible à qui la production est destinée.

Attribut: Est public cible (âge) Cette propriété est de type Texte.

 2-3 ans

 4-5 ans

 6-7 ans

 8-9 ans

 10-11 ans

 12-13 ans

 14-15 ans

 16-17 ans

 18-19 ans

Les valeurs de l’attribut Est public cible (âge) aident à spécifier l’âge du public cible.

Attribut:Est lien vers le cours STIC Cette propriété est de type URL.

 https://edutechwiki.unige.ch/fr/STIC:STIC_IV_(2015)

 https://edutechwiki.unige.ch/fr/STIC:STIC_III_(2016)

 https://edutechwiki.unige.ch/fr/STIC:STIC_IV_(2017)

 https://edutechwiki.unige.ch/fr/STIC:STIC_III_(2018)

 http://edutechwiki.unige.ch/fr/STIC:STIC_IV_(2019)

Les valeurs de l’attribut Est lien vers le cours STIC contiennent le lien qui pointe vers les cours STIC III et STIC IV.

4.3.3 Création de modèle

La définition des propriétés sémantiques nous a permis de créer des modèles. Les modèles ont été créés à l’aide l’espace - Pages spéciales - Formulaires sémantiques - Créer un modèle.

(27)

27 FIGURE 4.CRÉER UN MODÈLE

Nous avons créé deux modèles en format Tableau. La création des modèles est une étape importante qui permet ensuite de créer les formulaires à la base de ces modèles.

FIGURE 5.MODÈLE :PORTAIL STIC PROJET INFO

Le modèle Portail STIC projet info contient les propriétés sémantiques et la structure du modèle est la suivante :

Modèle: Portail STIC projet info

Ceci est le modèle « Portail STIC projet info ». Il devrait être appelé selon le format suivant : {{Portail STIC projet info

|Auteur-e-s=

|Année de fabrication=

|Technologie utilisée=

|Type=

|Domaine d’enseignement=

|Niveau d’enseignement=

(28)

28

|Public cible=

|Public cible (Age)=

|Mots clés=

|Lien vers le cours STIC=

|Fichier source=

|Image=

}}

Les champs - Auteur-e-s, Technologie utilisée, Type, Domaine d’enseignement, Niveau d’enseignement, Public cible, Public cible (Age), Mots clés, Fichier source peuvent prendre plusieurs valeurs d’un attribut à la fois.

{{#arraymap:{{{auteur|}}}|,|x|[[Est auteur de projet STIC::Utilisateur:x]]}}

{{#arraymap:{{{Technologie utilisée|}}}|,|x|[[Est technologie utilisée::x]]}}

{{#arraymap:{{{Type|}}}|,|x|[[Est type::x]]}}

{{#arraymap:{{{Domaine d’enseignement|}}}|,|x|[[Est domaine d’enseignement::x]]}}

{{#arraymap:{{{Niveau d’enseignement|}}}|,|x|[[Est niveau d’enseignement::x]]}}

{{#arraymap:{{{Public cible|}}}|,|x|[[Est public cible::x]]}}

{{#arraymap:{{{Public cible (Age)|}}}|,|x|[[Est public cible (age)::x]]}}

{{#arraymap:{{{Mots clés|}}}|,|x|[[Sont mots clés::x]]}}

{{#arraymap:{{{Fichier source|}}}|,|x|[[Est fichier source de projet STIC::Fichier:x]]}}

Les champs - Année de fabrication, Lien vers le cours STIC – prennent une seule valeur d’un attribut.

[[Est année de fabrication::{{{Année de fabrication|}}}]]

[[Est lien vers le cours STIC::{{{Lien vers le cours STIC}}}]]

FIGURE 6.MODÈLE :PORTAIL STIC PROJET DESCRIPTION

(29)

29 Le deuxième modèle Portail STIC projet description ne contient pas les annotations sémantiques et possède la structure suivante :

Les champs du modèle Portail STIC projet description sans propriétés sémantiques : {{{Description (Objectif pédagogique)|}}}

{{{Fabrication (Réalisation technique)|}}}

{{{Spécifications techniques|}}}

{{{Utilisation (scénario pédagogique, règles du jeu)|}}}

Dans chaque modèle nous avons ajouté la fonction {{#default_form:Portail STIC formulaire}} afin d’activer l’onglet- Modifier avec le formulaire.

4.3.4 Création de formulaire

La création de modèles décrits dans la section précédente permet de procéder à la création du formulaire. Les formulaires sont créés à l’aide de l’espace - Pages spéciales - Formulaires sémantiques- Créer un formulaire.

FIGURE 7.CRÉER UN FORMULAIRE

Modèle: Portail STIC projet description

Ceci est le modèle « Portail STIC projet description ». Il devrait être appelé selon le format suivant :

{{Portail STIC projet description

|Description (Objectif pédagogique)=

|Fabrication (Réalisation technique)=

|Spécifications techniques=

|Utilisation (scénario pédagogique, règles du jeu)=

}}

(30)

30 Afin de créer un formulaire, il faut appeler le modèle. Nous avons appelé les deux modèles créés - Portail STIC projet info et Portail STIC projet description. Le nom du formulaire est de Portail STIC formulaire. Ensuite, nous avons ajouté les paramétrés pour les champs de formulaires.

Pour le premier modèle – Portail STIC projet info nous avons spécifié les paramètres des champs suivants :

 Le champ - Auteur-e-s – peut contenir les valeurs de l’espace Utilisateur.

{{{field|auteur|values from namespace=Utilisateur|property=Est auteur de projet STIC}}

L’espace Utilisateur (User) contient toutes les pages utilisateurs. Une page utilisateur est une page wiki qui appartient à l’utilisateur possédant un compte sur le wiki. L’utilisateur est libre écrire dans cette page tout ce qu’il veut y mettre et d’autres utilisateurs du wiki peuvent accéder au contenu de cette page.

 Le champ – Année de fabrication – permet d’avoir un bouton radio comme un type d’entrée des données. Le type d’entrée le bouton radio correspond au tag de HTML

<radiobutton> et permet aux utilisateurs de voir les valeurs et choisir une seule.

{{{field|Année de fabrication|input type=radiobutton|class=annee|property=Est année de fabrication|default=2019}}}

 Les champs - Technologie utilisée, Type, Domaine d’enseignement, Niveau d’enseignement, Public cible– doivent être remplis par l’utilisateur obligatoirement. Ces champs possèdent en plus le paramètre du class CSS qui permet d’ajouter le code du style aux champs.

{{{field|Technologie utilisée|mandatory|class=technologie|property=Est technologie {{{field|Type|mandatory|class=type|property=Est type}}}

{{{field|Domaine d’enseignement|mandatory|class=domaine_enseignement|hide select all|property=Est domaine d’enseignement}}}

{{{field|Niveau d’enseignement|mandatory|class=niveau_enseignement|property=Est niveau d’enseignement }}}

{{{field|Public cible |mandatory| class=public_cible|property=Est public cible }}}

(31)

31 Les valeurs de ces champs sont entrées à l’aide de checkboxes. Le type d’entrée checkbox permet aux utilisateurs de choisir plusieurs valeurs à la fois.

 Le champ - les Mots Clés - a le type d’entrée tokens. Le type tokens met chaque valeur entrée en block ce qui facilite la recherche de l’information.

{{{field|Mots clés|property=Sont mots clés|input type=tokens}}}

 Les paramètres des champs – Image et Fichier source – permettent d’importer un fichier ou/ et chercher le fichier dans l’espace de MediaWIki – File.

{{{field|Image|uploadable||file|values from namespace=File|property=Est image de projet {{{field|Fichier source|class=fichier_portail_stic|uploadable|file|values from

namespace=File|property=Est fichier source de projet STIC}}}

 Les paramètres indiqués dans les champs du deuxième formulaire permettent de contenir un texte et l’éditer avec le wikieditor.

{{{for template|Portail STIC projet description}}}

{{{field|Description (Objectif pédagogique)|input

type=textarea|editor=wikieditor|rows=10|cols=120}}}</div>

{{{field|Fabrication (Réalisation technique)|input

type=textarea|editor=wikieditor|rows=10|cols=120}}}</div>

{{{field|Spécifications techniques|input

type=textarea|editor=wikieditor|rows=10|cols=120}}}

{{{field|Utilisation (scénario pédagogique, règles du

jeu)|inputtype=textarea|editor=wikieditor|rows=10|cols=120}}}

Avec l’ajout du style CSS le formulaire a pris l’apparence suivante :

(32)

32 FIGURE 8.FORMULAIRE DU PROJET

4.3.5 Création de catégorie

Une catégorie a été créée à l’aide de l’espace Pages spéciales - Formulaires sémantiques- Créer une catégorie.

FIGURE 9.CRÉER UNE CATÉGORIE

(33)

33 La catégorie Portail STIC a été créée. L’ajout du tag [[Catégorie:Portail STIC]] permet de rassembler toutes les pages du dispositif.

4.3.6 Création du portail

Afin de créer la page principale du dispositif, c’est-à-dire - le portail, une page wiki avec le nom Portail Projets STIC a été créé. Premièrement, nous avons ajouté le titre du portail. Ensuite, nous avons utilisé la fonction #forminput qui permet à l’utilisateur d’entrer le nom du projet souhaité, d’accéder au formulaire et de créer une page avec ce formulaire. Si le nom de la page existe déjà, l’utilisateur voit le formulaire rempli où il peut faire des modifications.

Le logo que nous avons créé sert à naviguer entre les pages du dispositif. Cette fonction est réalisée grâce aux liens hypertextes dans MediaWiki.

[[Fichier:STIC portaillogo.png|left|60px|link=Portail Projets STIC]]

FIGURE 10.LOGO DU PORTAIL STIC

Sur la page du portail deux boutons – Rechercher un projet et Consulter tous les projets ont été créés. Le bouton Rechercher un projet permet d’appeler la fonction de la recherche. Le bouton Consulter tous les projets mène vers la page avec la liste de tous les projets.

4.3.7 Rechercher un projet

Pour que la fonction de la recherche marche, il faut créer une requête. La logique de la création d’une requête est simple. Nous créons un formulaire de requête en utilisant l’extension Page Forms. D’abord, il faut créer un modèle avec les champs souhaités en utilisant la fonction #ask.

Le code de notre modèle pour la requête est suivant : {{#ask:[[Category:Portail STIC]]

{{#if:{{{Auteur|}}}|[[Est auteur de projet STIC::{{{Auteur|}}}]]}}

{{#if:{{{Année de fabrication|}}}|[[Est année de fabrication::{{{Année de fabrication|}}}]]}}

(34)

34 {{#if:{{{Technologie utilisée|}}}|[[Est technologie utilisée::{{{Technologie utilisée|}}}]]}}

{{#if:{{{Type|}}}|[[Est type::{{{Type|}}}]]}}

{{#if:{{{Domaine d’enseignement|}}}|[[Est domaine d’enseignement::{{{Domaine d’enseignement|}}}]]}}

{{#if:{{{Niveau d’enseignement|}}}|[[Est niveau d’enseignement ::{{{Niveau d’enseignement|}}}]]}}

{{#if:{{{Public cible|}}}|[[Est public cible::{{{Public cible|}}}]]}}

{{#if:{{{Public cible (Age)|}}}|[[Est public cible (age)::{{{Public cible (Age)|}}}]]}}

{{#if:{{{Mots clés|}}}|[[Sont mots clés ::{{{Mots clés|}}}]]}}

Nous avons créé un modèle de requête - Modèle:Portail STIC projet info query.

FIGURE 11.MODÈLE :PORTAIL STIC PROJET INFO QUERY

Le formulaire avec le nom - Portail STIC projet info query a été créé.

FIGURE 12.FORMULAIRE :PORTAIL STIC PROJET INFO QUERY

Pour que la recherche se lance lorsque l’utilisateur clique sur le bouton Rechercher un projet le code suivant a été ajouté sur ce bouton du portail :

[[Special:RunQuery/ portail_STIC_projet_info_query|RECHERCHER UN PROJET]]

L’utilisation de la fonction {{{info|query form at top}}} permet de garder le formulaire de requête en haut de page.

(35)

35 FIGURE 13.EXÉCUTER LA REQUÊTE :PORTAIL STIC PROJET INFO QUERY

4.3.8 Consulter tous les projets

Afin de pouvoir consulter toutes les productions finales, une page avec le nom Liste de Projets STIC Portail a été créée. Sur cette page nous utilisons la fonction #ask. Dans le code ci-dessous, cette fonction permet d’appeler la catégorie Portail STIC et d’afficher le tableau avec les résultats.

{{#ask:[[Category:Portail STIC]]

|mainlabel=PROJET

|?Est auteur de projet STIC=AUTEUR

|?Est année de fabrication=ANNEE

|?Est technologie utilisée= TECHNOLOGIE

|?Est type= TYPE

|?Est domaine d’enseignement=DOMAINE

|?Est niveau d’enseignement=NIVEAU

|?Est public cible=PUBLIC CIBLE

|?Est public cible (age)= PUBLIC CIBLE (AGE)

|?Sont mots clés=MOTS CLES }}

Pour que l’utilisateur puisse consulter la liste des projets en cliquant sur le bouton Consulter tous les projets, le code suivant a été ajouté sur ce bouton du portail qui renvoyer vers la page du wiki.

[[Liste de Projets STIC Portail|CONSULTER TOUS LES PROJETS]]

(36)

36 FIGURE 14.LISTE DES PROJETS STICPORTAIL

4.3. 9 Design du dispositif

Comme nous avons précisé plus haut, nous avons utilisé quelque code du style CSS afin de rendre notre dispositif plus joli. Nous avons utilisé les couleurs - #26bec9, #1d98a1. Le code du style suivant a été ajouté sur EduTechWiki :

.annee.radioButtonItem { width: 10%;

display: block;

float:left;

}

.technologie.checkboxLabel { width: 25%;

display: block;

float:left;

}

.type.checkboxLabel { width: 25%;

display: block;

float:left;

}

.domaine_enseignement.checkboxLabel { width: 25%;

display: block;

float:left;

}

.niveau_enseignement.checkboxLabel { width: 33.3%;

display: block;

(37)

37 float:left;

}

.public_cible.checkboxLabel { width: 20%;

display: block;

float:left;

}

.public_age.checkboxLabel { width: 20%;

display: block;

float:left;

}

4.3.10 Dispositif final

Le lien vers le dispositif - https://edutechwiki.unige.ch/fr/Portail_Projets_STIC

FIGURE 15.LE DISPOSITIF -PORTAIL PROJETS STIC

(38)

38

5 Résultats

5.1 Synthèse des résultats

Les tâches proposées aux testeurs ont été réussies. Il y avait quelques difficultés pour remplir certains champs dans le formulaire. Mais ces difficultés sont liées plutôt à la maitrise de MediaWiki. Les testeurs ont été les anciens étudiants du MALTT qui n’utilisent pas la technologie MediaWiki dans leur vie quotidienne.

Tâche Temps moyen passé Réussite globale

Tâche 0 8m15 -

Tâche 1 14m25 Réussi

Tâche 2 1m15 Bien réussi

5.1.1 Tâche 0

La tâche 0 a pris en moyenne 8 minutes 15 secondes. Pour cette tâche, les testeurs devaient lire la page avec leur production finale élaborée pour les cours STIC III ou STIC IV. Les liens vers les projets ont été fournis. Le temps de réalisation de cette tâche dépendait beaucoup de longueur du projet et de la vitesse de lecture.

5.1.2 Tâche 1

Ouvrez le Portail Projet STIC. Ajoutez votre projet dans le portail. Entrez le nom de votre projet dans le champ approprié et remplissez le formulaire demandé.

La tâche 1 a pris en moyenne 14 minutes 25 secondes pour être réalisée. Les testeurs ont dû revenir vers la page de leur production finale, chercher les informations nécessaires et les entrer dans le formulaire.

Les difficultés de cette tâche étaient dans le fait que la production finale sur la page de rendu n’était pas structurée de la même manière que dans le formulaire. Il a fallu vraiment chercher l’information et le projet n’était pas frais dans la tête parce qu’il a été élaboré il y a trois ou quatre ans. Les testeurs ont eu le problème avec l’importation du fichier de source. Les fichiers sources des projets ne se trouvent pas sur EduTechWiki, il a fallu trouver le fichier sur le serveur et

(39)

39 ensuite, importer les fichiers dans le champ du formulaire. Les testeurs n’avaient pas d’accès au serveur Tecfa.

5.1.3 Tâche 2

Trouvez votre projet en utilisant la fonction de recherche. Trouvez votre projet un utilisant au moins quatre critères de recherche. Les résultats s’affichent en bas de page. L’icône (STIC Projet) sert à revenir vers le Portail.

La tâche 2 a pris en moyenne 1 minute 15 secondes pour être réalisée. Cette tâche a été réussie sans aucune difficulté. Les testeurs ont cliqué sur le bouton Rechercher un projet et ils n’avaient pas de difficulté à utiliser le formulaire de recherche.

5.1.4 Tâche 3

Consultez tous les projets existants. Triez-les par l’année de fabrication, la technologie utilisée et par type. L’icône (STIC Projet) sert à revenir vers le Portail.

La tâche 3 a pris en moyenne 55 secondes pour être réalisée. Cette tâche a été très bien réussie.

Les utilisateurs ont cliqué sur le bouton Consulter tous les projets et ont pu accéder à la liste de tous les projets.

5.1.5 Tâche 4

Faites des modifications dans votre projet.

La tâche 4 a pris en moyenne 2m 25 secondes pour être réalisée. Cette tâche a été bien réussie.

Deux testeurs ont écrit le nom de leur projet dans le champ du portail et cliqué sur le bouton Créer ou Modifier. De cette façon, ils ont pu accéder au formulaire pour modifier leur projet.

Les deux autres testeurs ont cliqué sur le bouton Consulter tous les projets, en trouvant leurs projets, ils ont cliqué sur l’onglet Modifier avec formulaire. Le temps d’exécution de cette tâche dépendait beaucoup de quantité des modifications que voulaient faire les utilisateurs.

5.2 Modifications et résolutions des problèmes survenus

Le premier test utilisateur a relevé un bug dans le système qui ne permettait pas de choisir le lien vers les cours. La révision du code du modèle et la suppression de la fonction #arraymap pour le champ Lien vers le cours STIC ont permis de résoudre ce problème. C’était un problème de codage.