{"id":687,"date":"2026-04-30T07:41:26","date_gmt":"2026-04-30T07:41:26","guid":{"rendered":"https:\/\/pion.irem.univ-mrs.fr\/?p=687"},"modified":"2026-04-30T07:41:28","modified_gmt":"2026-04-30T07:41:28","slug":"le-theme-pion-pour-wims","status":"publish","type":"post","link":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/2026\/04\/30\/le-theme-pion-pour-wims\/","title":{"rendered":"Le th\u00e8me \u00ab\u00a0Pion\u00a0\u00bb pour Wims"},"content":{"rendered":"\n\n\n

Dans le groupe PION, nous sommes convaincus que WIMS est une plateforme d\u2019exerciseur tr\u00e8s efficace pour faire progresser les \u00e9l\u00e8ves sur les automatismes.
Cette plateforme, largement \u00e9prouv\u00e9e, est extr\u00eamement riche en exercices, et tr\u00e8s finement param\u00e9trable. Nous en promouvons des usages robustes et efficaces, \u00e0 travers les DM WIMS<\/a>, les \u00ab\u00a0courses<\/a>\u00a0\u00bb ou les cahiers de vacances<\/a>, qui offrent des r\u00e9sultats av\u00e9r\u00e9s et appr\u00e9ci\u00e9s par les enseignants comme par les \u00e9l\u00e8ves et leurs familles.<\/p>\n\n\n\n

Pour essayer de favoriser l\u2019adoption de cette plateforme, nous avons au fil des ann\u00e9es am\u00e9lior\u00e9 la mise en \u0153uvre didactique gr\u00e2ce \u00e0 de nombreux retours d\u2019exp\u00e9rience\u00a0: Magist\u00e8re Compagnon Wims<\/a>, formations d\u00e9di\u00e9es, cr\u00e9ation simplifi\u00e9e de classes, etc.
Mais un des freins majeur \u00e0 son adoption reste sa conception graphique. Nous d\u00e9taillons pourquoi dans cet article qui pr\u00e9sente la cr\u00e9ation d\u2019un \u00ab\u00a0th\u00e8me\u00a0\u00bb Pion, ses avanc\u00e9es et ses limites.
Ce travail a \u00e9t\u00e9 commenc\u00e9 en juin 2024, il y a environ 2 ans. Il n’est pas termin\u00e9 car certaines fonctionnalit\u00e9s pr\u00e9vues ne sont pas encore d\u00e9velopp\u00e9es. De plus, pour que ce th\u00e8me soit publiable, il faudrait selon nous reprendre le travail de programmation en se basant sur le th\u00e8me \u00ab\u00a0Standard\u00a0\u00bb de fa\u00e7on a cr\u00e9er du code plus propre et abouti.<\/p>\n\n\n\n

Objectifs : pourquoi un nouveau th\u00e8me ?<\/h2>\n\n\n\n

Dans Wims, lorsqu’on cr\u00e9e une classe (ou un ensemble de plusieurs classes : groupement ou \u00e9tablissement), ou encore lorsqu’on g\u00e8re un serveur, on peut personnaliser l’apparence des interfaces. Cela se fait en premier lieu par le choix d’un th\u00e8me.
Les th\u00e8mes \u00ab\u00a0modernes\u00a0\u00bb distribu\u00e9s sur tous les serveurs Wims sont les th\u00e8mes Nika\u00efa et Standard. Le groupe Euler-Wims de l’acad\u00e9mie de Versaille a cr\u00e9\u00e9 son propre th\u00e8me. Au groupe Pion, nous avons d\u00e9cid\u00e9 de cr\u00e9er nous aussi un th\u00e8me<\/a>. Ce projet r\u00e9pond \u00e0 plusieurs objectifs : <\/p>\n\n\n\n

Privil\u00e9gier \u00ab l\u2019exp\u00e9rience utilisateur \u00bb<\/h3>\n\n\n\n

Les usages \u00e9voluent, et la mani\u00e8re de pr\u00e9senter l\u2019information avec. WIMS a \u00e9t\u00e9 con\u00e7u \u00e0 une \u00e9poque o\u00f9 le web \u00e9tait essentiellement textuel et consult\u00e9 sur \u00e9cran fixe. Aujourd’hui, les \u00e9l\u00e8ves et \u00e9tudiants interagissent quotidiennement avec des interfaces soign\u00e9es, responsives et intuitives. Afin de maximiser l\u2019engagement, il est important d\u2019offrir une interface intuitive, c\u2019est-\u00e0-dire qui r\u00e9pond aux codes et aux usages actuels.<\/p>\n\n\n\n

Usage mobile<\/h3>\n\n\n\n

WIMS a \u00e9t\u00e9 pens\u00e9 pour s\u2019afficher sur des \u00e9crans d\u2019ordinateurs. Les th\u00e8mes actuels ne s\u2019adaptent pas bien au format vertical et \u00e0 l\u2019absence de souris.<\/p>\n\n\n\n

Dette technique<\/h3>\n\n\n\n

Le th\u00e8me de WIMS le plus abouti est aujourd\u2019hui celui du groupe Euler : nous nous sommes bas\u00e9s sur ce th\u00e8me bien construit. Il est essentiellement constitu\u00e9 de feuilles styles CSS, mais il accumule des couches successives, parfois redondantes ou conflictuelles, voire aujourd\u2019hui obsol\u00e8tes : JQuery <\/em>cod\u00e9 \u00ab en dur \u00bb dans WIMS, framework foundation<\/em> incorpor\u00e9 dans Nikaia.
Nous souhaitons utiliser de bonnes pratiques dans le code produit, afin de contribuer \u00e0 la \u00ab maintenabilit\u00e9 \u00bb du projet, mais pour le moment nous avons plut\u00f4t contribu\u00e9 \u00e0 alourdir cette dette technique.<\/p>\n\n\n\n

Aper\u00e7u g\u00e9n\u00e9ral.<\/h2>\n\n\n\n

Voici \u00e0 quoi ressemble notre th\u00e8me de fa\u00e7on g\u00e9n\u00e9rale : on retrouve quelque chose d’assez proche du th\u00e8me Euler-Wims ou Nika\u00efa,<\/p>\n\n\n\n

\"\"
Accueil g\u00e9n\u00e9ral du serveur (sur ordinateur)<\/figcaption><\/figure>\n\n\n\n
\"\"
Accueil g\u00e9n\u00e9ral dans une classe virtuelle c\u00f4t\u00e9 prof (ordinateur)<\/figcaption><\/figure>\n\n\n\n
\"\"
Accueil g\u00e9n\u00e9ral dans une classe virtuelle c\u00f4t\u00e9 \u00e9l\u00e8ve (ordinateur)<\/figcaption><\/figure>\n\n\n\n

Am\u00e9liorer l’ergonomie pour les enseignants (simplifier, rationaliser)<\/h2>\n\n\n\n

Notre premier but \u00e9tait de proposer une interface simplifi\u00e9e pour les enseignants. Notre exp\u00e9rience de formation d’enseignants nous montre en effet que les difficult\u00e9s de prise en main (r\u00e9elles ou suppos\u00e9es) sont un obstacle important \u00e0 l’utilisation par les professeurs. Nous avons donc cr\u00e9\u00e9 un menu simplifi\u00e9, o\u00f9 seules les ic\u00f4nes qui nous paraissent les plus utiles sont visibles. Il est accessible via un \u00ab menu hamburger \u00bb (caract\u00e8re \u2630), conform\u00e9ment aux codes actuels. Il montre les fonctions les plus utiles quand on g\u00e8re la classe virtuelle avec les \u00e9l\u00e8ves.<\/p>\n\n\n\n

\"\"
Menu simplifi\u00e9 de la page d’accueil c\u00f4t\u00e9 prof (ordinateur)<\/figcaption><\/figure>\n\n\n\n
\"\"
Menu complet, montrant toutes les fonctionnalit\u00e9s de la page d’accueil c\u00f4t\u00e9 prof (ordinateur)<\/figcaption><\/figure>\n\n\n\n

Le menu de pied de page (existant \u00e9galement en version simplifi\u00e9e ou compl\u00e8te) montre les fonctionnalit\u00e9s qui sont plus techniques et concernent plut\u00f4t la configuration. Nous avons \u00e9galement supprim\u00e9 certains doublons dans les menus.<\/p>\n\n\n\n

\"\"
Menu simplifi\u00e9 de pied de page d’accueil c\u00f4t\u00e9 prof (ordinateur)<\/figcaption><\/figure>\n\n\n\n
\"\"
Menu complet de pied de page d’accueil c\u00f4t\u00e9 prof (ordinateur)<\/figcaption><\/figure>\n\n\n\n

Am\u00e9liorer l’ergonomie pour les \u00e9l\u00e8ves (simplifier, utiliser de petits \u00e9crans)<\/h2>\n\n\n\n

C\u00f4t\u00e9 \u00e9l\u00e8ve, notre soucis principal a \u00e9t\u00e9 de cr\u00e9er un th\u00e8me le mieux adapt\u00e9 possible aux petits \u00e9crans, car beaucoup d’\u00e9l\u00e8ves travaillent sur Wims \u00e0 partir de leur smartphone ou d’une tablette. C’est pourquoi nous avons opt\u00e9 pour le menu \u00ab\u00a0sandwich\u00a0\u00bb qui s’adapte facilement \u00e0 toutes les tailles d’\u00e9cran.<\/p>\n\n\n\n

\"\"
La page d’accueil d’un \u00e9l\u00e8ve (sur smartphone)<\/figcaption><\/figure>\n\n\n\n

L\u00e0 aussi, nous avons simplifi\u00e9 les menus : le bouton \u00ab\u00a0Mes notes\u00a0\u00bb est mis en \u00e9vidence au centre de la page, le menu de gauche ne contient presque rien et les fonctionnalit\u00e9s non essentielles sont renvoy\u00e9es dans le menu de pied de page.<\/p>\n\n\n\n

\"\"
Menu de gauche d\u00e9ploy\u00e9 \u00e0 la page d’accueil c\u00f4t\u00e9 \u00e9l\u00e8ve (smartphone)<\/figcaption><\/figure>\n\n\n\n
\"\"
Menu de pied de page de l’accueil \u00e9l\u00e8ve (smartphone)<\/figcaption><\/figure>\n\n\n\n

Nous avons r\u00e9duit au maximum le texte \u00e9crit en haut de la page, car le travail \u00e0 faire n\u2019\u00e9tait parfois visible qu\u2019apr\u00e8s avoir fait d\u00e9fil\u00e9 plusieurs \u00e9crans.<\/p>\n\n\n\n

Nous avons opt\u00e9 pour une barre de titre \u00ab\u00a0r\u00e9manente\u00a0\u00bb, comme dans les applications modernes\u00a0: cette barre reste affich\u00e9e m\u00eame si l\u2019\u00e9l\u00e8ve d\u00e9file l\u2019\u00e9cran vers le bas. Il peut donc \u00e0 tout moment voir\u00a0:
– \u00e0 gauche\u00a0: le bouton \u2630
– \u00e0 droite\u00a0: son nom et le bouton pour se d\u00e9connecter ou un bouton \u00ab\u00a0Retour \u00e0 la liste des exercices\u00a0\u00bb
– au centre\u00a0: le chronom\u00e8tre le cas \u00e9ch\u00e9ant, avec un petit peu de javascript (le chronom\u00e8tre reste affich\u00e9 en bas de la page, mais il n\u2019est parfois pas visible quand l\u2019\u00e9cran est charg\u00e9).<\/p>\n\n\n\n

Modernisation du design<\/h2>\n\n\n\n

Un soucis particulier a \u00e9t\u00e9 apport\u00e9 au travail sur les CSS qui permettent de g\u00e9rer et de moderniser l’apparence des vues. Cela passe par\u00a0:
– des boutons \u00ab\u00a0plats\u00a0\u00bb, des onglets plus modernes, une police plus claire
– des zones enti\u00e8res (comme les DM WIMS) sont pr\u00e9sent\u00e9es sous forme de \u00ab\u00a0cartes\u00a0\u00bb ombr\u00e9es, et sont d\u00e9sormais cliquables (et plus seulement les titres)\u00a0gr\u00e2ce \u00e0 un petit ajout de javascript. En effet, ce qui \u00e9tait logique sur ordinateur (les \u00e9l\u00e9ments cliquables sont uniquement ceux qui font changer d\u2019aspect le curseur de souris) ne l\u2019est plus forc\u00e9ment sur smartphone.<\/p>\n\n\n\n

\"\"
Accueil g\u00e9n\u00e9ral dans un \u00e9tablissement (smartphone)<\/figcaption><\/figure>\n\n\n\n

Nous avons cherch\u00e9 \u00e0 simplifier au maximum la page de connexion, pour qu’elle soit simple m\u00eame sur petits \u00e9crans.<\/p>\n\n\n\n

\"\"
Page de connexion (smartphone)<\/figcaption><\/figure>\n\n\n\n

Des fonctionnalit\u00e9s ont \u00e9t\u00e9 mises en valeur, comme le lien de d\u00e9connexion c\u00f4t\u00e9 \u00e9l\u00e8ve :<\/p>\n\n\n\n

\"\"
Le lien de d\u00e9connexion<\/figcaption><\/figure>\n\n\n\n

Ou encore le lien d’\u00e0 propos, quand un enseignant (connect\u00e9 ou non) consulte un module ou un exercice : un simple clic sur l’ic\u00f4ne de partage copie l’adresse de l’exercice ou du module dans le presse papier, pour pouvoir ensuite partager ce lien \u00e0 l’ext\u00e9rieur de Wims.<\/p>\n\n\n\n

\"\"
Copie automatique du lien du module ou de l’exercice<\/figcaption><\/figure>\n\n\n\n

Adaptation \u00e0 notre utilisation de Wims<\/h2>\n\n\n\n

Au groupe Pion, nous utilisons beaucoup la modalit\u00e9 \u00ab\u00a0DMWims\u00a0\u00bb<\/a>. C’est un ensemble de deux examens Wims, qui se font donc en temps limit\u00e9. Certains aspects de notre th\u00e8me refl\u00e8tent cette utilisation et la favorisent. <\/p>\n\n\n\n

\"\"
Un DMWims c\u00f4t\u00e9 \u00e9l\u00e8ve (ordinateur)<\/figcaption><\/figure>\n\n\n\n
\"\"
La page de pr\u00e9sentation d’un examen Wims : le chronom\u00e8tre et le lien pour terminer la session sont mis en valeur.<\/figcaption><\/figure>\n\n\n\n
\"\"
La m\u00eame page de pr\u00e9sentation, menu de gauche ouvert : ce menu regroupe les liens moins utiles, \u00e0 ce stade.<\/figcaption><\/figure>\n\n\n\n
\"\"
Un exercice dans un DMWims (ordinateur) : le chronom\u00e8tre et le lien de retour \u00e0 la liste d’exercices sont bien visibles.<\/figcaption><\/figure>\n\n\n\n
\"\"
Un autre exercice dans un DMWims (smartphone) : le lien vers le retour \u00e0 la liste des exercices est bien visible, m\u00eame sur petit \u00e9cran.<\/figcaption><\/figure>\n\n\n\n

Nous donnons relativement peu de feuilles de travail \u00e0 nos \u00e9l\u00e8ves, mais quand nous le faisons, c’est souvent sous la modalit\u00e9 \u00ab\u00a0course\u00a0\u00bb<\/a> qui utilise une page de pr\u00e9sentation et o\u00f9 nous ne voulons pas qu’un \u00e9l\u00e8ve puisse acc\u00e9der \u00e0 tous les exercices tout de suite.<\/p>\n\n\n\n

\"\"
Une feuille de travail c\u00f4t\u00e9 \u00e9l\u00e8ve avec page de pr\u00e9sentation (ordinateur)<\/figcaption><\/figure>\n\n\n\n
\"\"
Un exercice d’une feuille de travail, c\u00f4t\u00e9 \u00e9l\u00e8ve (ordinateur) : le focus est automatiquement mis sur le champ de r\u00e9ponse quand on passe \u00e0 l’\u00e9tape suivante, pour pouvoir valider en utilisant la touche entr\u00e9e du clavier (plus besoin d\u2019aller-retour clavier-souris).<\/figcaption><\/figure>\n\n\n\n
\"\"
Un exercice d’une feuille de travail c\u00f4t\u00e9 \u00e9l\u00e8ve (smartphone) : le chronom\u00e8tre est bien visible<\/figcaption><\/figure>\n\n\n\n
\"\"
Le m\u00eame exercice (smartphone) : la barre de titre reste toujours visible, m\u00eame si on fait d\u00e9filer la page. Les liens \u00ab\u00a0exercice suivant\u00a0\u00bb et \u00ab\u00a0exercice pr\u00e9c\u00e9dent\u00a0\u00bb ont \u00e9t\u00e9 supprim\u00e9s, au profit d’un lien \u00ab\u00a0retour \u00e0 la feuille de travail\u00a0\u00bb.<\/figcaption><\/figure>\n\n\n\n

Le projet n’est pas termin\u00e9 : limites du th\u00e8me Pion et perspectives d\u2019\u00e9volution<\/h2>\n\n\n\n

Nous avons encore une longue \u00ab\u00a0todo list\u00a0\u00bb : comme par exemple cr\u00e9er certains liens qui permettent de gagner quelques clics et qui manquent \u00e0 certains endroits ; ou encore la possibilit\u00e9 pour chaque enseignant de personnaliser les menus visibles par d\u00e9faut sur sa page d’accueil, car tout le monde n’a pas les m\u00eame habitudes que nous\u2026<\/p>\n\n\n\n

Enfin, c’est un soucis important, nous avons conscience que nos ajouts dans le code ne sont pas toujours tr\u00e8s bien faits et viennent se surajouter \u00e0 au moins trois reprises du code, par des \u00e9quipes diff\u00e9rentes au fil des ann\u00e9es. Une cons\u00e9quence est que le poids des fichiers de CSS est tr\u00e8s important et que le code devient labyrinthique par endroit, ce qui ne facilite pas sa maintenance. Nous aimerions donc recr\u00e9er notre th\u00e8me de fa\u00e7on mieux maitris\u00e9e. En repartant du th\u00e8me standard par exemple, il serait envisageable :
– de supprimer la plupart des d\u00e9pendances obsol\u00e8tes, afin de r\u00e9duire la dette technique
– de n\u2019utiliser que des technologies actuelles mais p\u00e9rennes, afin de favoriser la maintenabilit\u00e9 du code
– de nous focaliser sur d\u2019autres am\u00e9liorations : meilleure coh\u00e9rence globale de l\u2019interface, ludification de l\u2019exp\u00e9rience (avec un syst\u00e8me de points permettant de personnaliser un avatar ou son interface), retours plus visuels etc.<\/p>\n\n\n\n

Nous sommes \u00e0 la recherche d’un financement pour mener \u00e0 bien ce travail car il se compte en semaines voire en mois \u00e0 plein temps.<\/p>\n","protected":false},"excerpt":{"rendered":"

Dans le groupe PION, nous sommes convaincus que WIMS est une plateforme d\u2019exerciseur tr\u00e8s efficace pour faire progresser les \u00e9l\u00e8ves sur les automatismes. Cette plateforme, largement \u00e9prouv\u00e9e, est extr\u00eamement riche en exercices, et tr\u00e8s finement param\u00e9trable. Nous en promouvons des usages robustes et efficaces, \u00e0 travers les DM WIMS, les \u00ab\u00a0courses\u00a0\u00bb ou les cahiers de… Lire la suite »Le th\u00e8me \u00ab\u00a0Pion\u00a0\u00bb pour Wims<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":""},"categories":[22,4,14,5],"tags":[25,11],"ppma_author":[26,27],"authors":[{"term_id":26,"user_id":2,"is_guest":0,"slug":"paul-byache","display_name":"Paul Byache","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/04438ce5223bf5053995d9836966dbe8?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""},{"term_id":27,"user_id":13,"is_guest":0,"slug":"sebastien","display_name":"sebastien correard","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/eb6450946361f8e7088ad523d2a68679?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/posts\/687"}],"collection":[{"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/comments?post=687"}],"version-history":[{"count":28,"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/posts\/687\/revisions"}],"predecessor-version":[{"id":801,"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/posts\/687\/revisions\/801"}],"wp:attachment":[{"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/media?parent=687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/categories?post=687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/tags?post=687"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/pion.irem.univ-mrs.fr\/index.php\/wp-json\/wp\/v2\/ppma_author?post=687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}