Seymour Papert est sud-africain. Né à Pretoria en 1928, il a grandi dans la brousse, ses parents ayant été scientifiques. Enfant, ses camarades de jeu les plus proches étaient des boshimans vivant à des centaines de kilomètres du camp de ses parents. Et, loin de tout commerce et de tout garage, à l’âge où on joue aux petits soldats, il apprenait à changer ou réparer une durite. Ce genre d’épisode a pu le guider vers les théories piagettiennes. Lui-même dit que l’apprentissage prématuré de la mécanique lui a donné le goût de la logique, et lorsqu’il est allé au lycée au Cap, ce fut pour lui la découverte de la vie citadine mais aussi de l’apartheid, qu’il trouvait illogique : « Vous dites qu’ils ont plein de maladies mais vous les employez comme nourrices ; vous dites qu’ils aiment vivre dans la saleté mais vous les engagez pour faire le ménage chez vous », a-t-il dit au proviseur le jour où il a été renvoyé du lycée pour avoir refusé d’appliquer l’apartheid. Socialiste, il est peu probable que Papert eût fait de longues études s’il était resté en Afrique du Sud. Il a étudié à Cambridge puis à Genève où il a rencontré Jean Piaget. Auprès de Piaget, il a appris la théorie constructiviste qui l’a fortement influencé après son retour au MIT. C’est avec Marvin Minsky qu’il a élaboré la théorie des micromondes et le langage Logo. En 2006, à Hanoï, il est gravement blessé dans un accident de la route. Depuis cette date, il utilise des micromondes pour se rééduquer. Il ne sort jamais de chez lui.

Alan Kay est un des étudiants de Papert, auprès de qui il a été vite sensibilisé à l’importance que l’ordinateur peut avoir pour la construction du savoir, en particulier par les micromondes. Il s’est d’ailleurs inspiré de Logo pour créer le langage Smalltalk. C’est lui qui, au Xerox Parc au début des années 1970, a inventé un micromonde fait de fenêtres avec des icônes cliquables dedans... Il a également inventé le concept d’ordinateur portable. Ancien guitariste de jazz et ami personnel de Quincy Jones, il possède un orgue chez lui, dont il joue régulièrement. Son travail sur les fenêtres l’a amené à être employé par Atari puis par Apple, mais en 1982, il est consultant pour Walt Disney lors du tournage de Tron. Là, il rencontre l’actrice Cindy Morgan qui est maintenant Madame Kay. Il a également travaillé pour Walt Disney. Ensuite, il est revenu à Smalltalk avec Squeak qui a servi de plateforme de développement pour Scratch, puis a lancé le projet OLPC. Il dit souvent que « le meilleur moyen de connaître le futur, c’est de l’inventer ». Et c’est ce qu’il fait...

Il devient donc intéressant pour un enseignant de construire un micromonde adapté à l’exercice qu’il veut faire, et cela est plutôt difficile à faire avec Blockly (alors qu’avec Scratch c’est impossible à faire). Pour cela, certaines techniques décrites ci-après ne sont pas destinées à tous les enseignants, mais plutôt à ceux qui serviront de « ressources TICE » avec l’enthousiaste complicité de leurs IPR, et les micromondes construits par ces ressources pourraient être des documents de stage voire des fichiers associés au manuel numérique des éditeurs intéressés par Blockly.

Pour se faire une idée de ce qui est possible dans la diversité des micromondes, le concours Castor applique ce principe : Un micromonde par exercice, même si plusieurs de ces micromondes parlent de castors...

La construction des micromondes de Blockly se fait par copier-coller de morceaux de textes écrits dans des langues exotiques comme JavaScript, Xml, html. Ce copier-coller est réalisable avec un éditeur de texte (un logiciel spécialisé dans ce genre de manips). Il existe de nombreux éditeurs de texte, parmi les plus connus, il y a nano, Vim, Emacs, leafpad, Gedit, Wordpad, notePad++, Smulltron... Ici c’est Geany, logiciel libre multiplateforme, qui a été utilisé.

Tout d’abord, voici un exercice sur les fonctions affines, issu des « démos » de Blockly :

Le but de l’exercice est de programmer une fonction affine, ainsi que le précise l’énoncé :

« Un avion a deux sièges dans le poste de pilotage (pour le pilote et le copilote), et un certain nombre de rangées de sièges passager. Chaque rangée contient quatre sièges.

Construire une formule (ci-dessous) qui calcule le nombre total de sièges dans l’avion quand le nombre de rangées est modifié (ci-dessus). »

Ce micromonde vole donc haut... Il est formé de deux sortes d’objets :

• les instructions disponibles, dans la zone grise à gauche (constantes, opérations, et la variable « rangées ») ;
• une unique instruction qui fait partie du programme (à droite), et qui est une affectation de la variable « sièges » :

Pour programmer correctement la fonction affine, on a besoin de l’addition (à cause de l’ordonnée à l’origine) et de la multiplication (à cause du coefficient directeur) :

Mais chacune de ses opérations propose le choix entre deux modes d’affichage : En ligne (comme ci-dessus), ou « entrées externes ». Pour choisir, on clique droit sur l’opération et on coche l’option choisie dans le menu qui se déroule alors. Si on choisit systématiquement l’option « entrées externes », on voit l’expression algébrique sous forme d’un arbre syntaxique :

Pour implémenter un micromonde dans Blockly, il faut donc placer

• un certain nombre d’outils dans la boîte à outils, en gris, ce qui se fait dans la page de travail de Blockly (une « div » appelée « blocklyDiv » et contenant le plan de travail au format graphique svg) et plus précisément dans du xml appelé « toolbox » et rendu invisible pour qu’il n’encombre pas la page ;
• une ébauche de programme placée dans un autre fichier xml appelé « startBlocks », lui aussi invisible.
• et éventuellement, des éléments graphiques (le dessin de l’avion ci-dessus par exemple) ou tableaux (voir la bataille navale).

Le problème, c’est que xml est un peu complexe. Aussi a-t-on décidé de rendre invisibles les outils toolbox et startBlocks (pour ne pas traumatiser ceux qui vont regarder la page html). Du coup, c’est à Blockly de les afficher, mais pas sous forme xml, non, sous forme graphique. En plus, se pose la question de la manière dont on peut construire ces fichiers xml. Là, évidemment, on va utiliser ... Blockly lui-même !

Pour que les xml soient visibles, il faut mettre dans le JavaScript, ceci :

Cela crée une variable workspace obtenue en injectant dans Blockly, la boîte à outils toolbox en tant que boîte à outils, et la traduction de xml vers le workspace (« DOM to Workspace ») du programme startBlocks.

Cette fois-ci il y a plus à enlever : Outre les première et dernière ligne,superflues, il faut aussi enlever le premier bloc, de définition de la variable (3 lignes suivantes) et ne garder que les trois blocs d’augmentation de n :

Les trois blocs sont de type « math_change » et seule le « math_number » qui est dans leur « field » change de l’un à l’autre (en dehors de leurs coordonnées)

Le même jeu à deux sur ordinateur peut être développé dans un autre micromonde, par exemple avec Scratch, un robot à déplacer plutôt que des nombres à additionner. Mais si on essaye de « voir à l’intérieur », on se retrouve avec des menus aussi compexes que complets. Par exemple, des élèves qui programment en Scratch vont vite passer des heures à dessiner leurs propres lutins ou à programmer des boîtes à rythme plutôt que faire des maths. Et s’ils arrivent à s’aventurer assez loin pour voir des maths (« opérateurs »), ils risquent de demander ce que sont ces « ln » et « e^ » dans le menu des « racine » :

Didactiquement, cela peut être intéressant : L’élève qui explore un micromonde assez vaste va y passer du temps, mais va aussi avoir tendance à s’approprier les éléments de ce micromonde. L’expérience vaut peut-être la peine d’être tentée ; elle le sera sans doute à très grande échelle vu l’immense promotion de Scratch que fait le ministère dans la rédaction des programmes [3]. Il sera intéressant d’en ananlyser les retours.

Là encore, on va utiliser bloquement pour faire des blocs, parce que celui-ci est doté d’une catégorie « Fabrique » qui permet de fabriquer des blocs. Cette fabrique ressemble à ceci :

Le second bloc est une fonction, puisqu’elle « retourne » quelque chose. Le premier bloc, au contraire, est une instruction. La distinction n’est d’ailleurs pas importante, puisqu’on peut toujours modifier l’un des deux pour avoir l’autre. On choisit donc le premier, qui s’appelle pour l’instant « faire quelque chose », et qu’on va renommer plus1 (à l’aide du clavier) :

On voit que la variable nombre a été créée (mais non initialisée), c’est nécessaire pour qu’on puisse définir l’instruction plus1 qui va avoir pour effet de modifier nombre (en lui ajoutant 1), et ceci ne peut se faire que si nombre existe.

Note : Dans Blockly comme dans Scratch, toutes les variables sont globales.

Qu’on se le dise, qu’on aime ou pas, c’est comme ça. Cela empêche de faire de la programmation objet, mais c’est pratique pour le calcul parallèle. Ceci explique peut-être cela (la présence de calcul parallèle dans le programme).

C’est le moment de définir plus1, cela se fait en programmant, à l’intérieur du bloc en cours de définition, en Blockly ; ici, pas grand chose à faire, on ajoute 1 à la variable globale nombre :

Attention : Ce n’est pas l’augmentation de Sophus, mais celle des maths de Blockly (« incrémenter de 1 » dans la version classique) : On ne veut pas être obligé d’importer tout Sophus dans le micromonde, alors on reste sur les blocs classiques.

Une fois ce bloc défini, il est présent dans la boîte à outils, dans le menu Fabrique :

La suite est très rapide : On effectue un clic droit sur le bloc qu’on vient de définir, et on choisit l’option « dupliquer », ce qui nomme automatiquement « plus2 » le nouveau bloc, il suffit alors de modifier l’incrément au clavier, puis de dupliquer le nouveau bloc pour créer automatiquement « plus3 » :

La boîte à outils du micromonde désiré est déjà là, telle qu’on la veut, dans le menu « fabrique » :

L’étape suivante est d’exporter tout ça, et d’en extraire le fichier Xml pour le placer dans le fichier Blockly en cours de construction. Mais seuls les 3 outils ci-dessus doivent figurer dans la boîte à outils, le reste (définition des 3 blocs et création/affichage) devant être dans l’espace de travail. Et là on a un problème : Les définition des trois blocs encombrent l’espace de travail. Solution : Leur donner une abscisse plus grande (600 ici) et une ordonnée négative (-100). Blockly refuse de les cacher complètement (après tout c’est un logiciel libre, et ça ne se fait pas, de cacher quelque chose, dans un logiciel libre). Mais en haut à droite, l’encombrement est plus réduit.

Voici le résultat obtenu :

L’aspect d’une partie du jeu, en cours de jeu, est meilleur qu’avec la version précédente :

Mais il reste l’inconvénient des définitions de blocs, et on ne peut pas réellement élargir le micromonde puisque la définition des blocs ne se fait qu’avec ce que permet Blockly.

Pour faire encore mieux, on peut carrément créer des blocs personnels, que les créateurs de Blockly n’avaient pas imaginés (« plus1 », « plus2 » et « plus3 »). Dit comme ça, ça fait un peu peur, mais on va utiliser l’outil de création de blocs qui est lui-même, évidemment, programmé en Blockly !

L’outil est impressionnant (il est puissant aussi) :

On reconnaît l’interface de Blockly sur la gauche (mais les outils sont spéciaux, ils ne concernent plus la programmation mais la fabrication de blocs ; en fait on est là dans un micromonde de programmation de Blockly lui-même !). Au fur et à mesure que l’on modifie le bloc en cours de création, son aspect est mis à jour en temps réel, en haut à droite (pour l’instant il est tout noir et vide), et sa définition en JavaScript est mise à jour en bas à droite : Quand on aura fini il ne restera plus qu’à copier-coller le résultat dans la partie JavaScript du fichier html. En fait il y a aussi la génération de code, invisible sur la copie d’écran ci-dessus, dont on aura besoin aussi ; et celle-là, il faudra la programmer en JavaScript. Mais ce ne sera pas très difficile avec l’exemple choisi (une ligne de JavaScript).

La première chose à changer c’est le nom du bloc : On remplace « math_foo » par « plus1 », au clavier :

Là se pose un problème ... bloquant : Si on essaye d’insérer du texte (menu « field ») dans l’espace de la deuxième ligne, on ne peut pas, le bloc refuse tout ce qui n’est pas une entrée. Mais ici, on n’a pas besoin d’entrée, et on doit mettre le texte dans une entrée dont on ne veut pas. Pour cela, Blockly possède une entrée factice (« dummy input ») :

Dans cette entrée factice (et pas directement dans le bloc externe), on peut maintenant brancher du texte :

On voit qu’outre du texte, il y a plein d’autres choses qui peuvent être placées dans des blocs ; l’entrée angulaire par exemple sera utilisée plus bas, de façon assez surprenante (pour définir la couleur).

Une fois qu’on a mis du texte dans l’entrée factice, ce texte apparaît dans le bloc (toujours en noir, en haut à droite) :

Pour l’instant on ne peut pas encore faire grand-chose avec ce bloc, parce qu’il ne peut être assemblé avec d’autres blocs : Pour pouvoir l’assembler avec des blocs situés à sa gauche et sa droite, il faut ajouter une entrée à droite et le considérer lui, comme une entrée d’un autre bloc. Ce n’est pas ce qu’on veut faire ici, mais on voudrait pouvoir fabriquer un programme, donc créer des connections en haut et en bas. Inutile donc de toucher au menu des centrées mais celui des connections contient l’option « en haut et en bas » :

En choisissant cette option, on voit en haut à droite que le bloc a pris un aspect classique de bloc :

Le bloc est maintenant presque fini, il reste juste à lui donner une couleur ; ceci se fait en en choisissant une dans le menu des couleurs, en bas :

Au cas improbable où on ne trouverait pas son bonheur dans cette palette, chaque couleur est représentée par un angle allant de 0° (pour le rouge) à 360° (pour le rouge à nouveau) ; c’est la valeur angulaire de la teinte dans le modèle Teinte Saturation Valeur, teinte repérée par un angle dans le cercle chromatique. Ceci dit, la couleur bleue traditionnellement affectée aux maths dans Blockly, est disponible dans la palette ; en la branchant sur l’entrée « couleur », on obtient un joli bloc bleu :

Le bloc est maintenant terminé, et on n’a plus qu’à l’exporter. Pour cela, on se rappelle qu’il y a deux scripts en JavaScript, engendrés dans la partie droite de la fabrique ; le premier est la définition, en JavaScript, du bloc, et a pour effet d’injecter la définition du bloc dans Blockly. Voici le code obtenu :

Ce code doit être placé dans une balise « script » du fichier html, par exemple celle où se trouvent déjà les fonctions décrites plus haut (injecter les outils dans la boîte à outils, le programme « startBlocks » dans la page de travail et faire un peu de programmation évènementielle. Il reste une dernière étape pour que le bloc fonctionne : Dire quelle ligne de JavaScript doit être ajoutée au programme « compilé » lorsqu’on ajoute ce bloc dans le programme. Cela se fait au clavier, mais la ligne est juste « nombre += 1 » donc on écrit une fonction JavaScript qui renvoie cette chaîne de caractères (soit, un programme en JavaScript, qui écrit un programme en JavaScript) :

Avec un peu de copier-coller-modifier, on a vite fait d’avoir les autres blocs « plus2 » et « plus3 » ; voici le résultat obtenu, à consulter avec un éditeur de texte, ou tout simplement à tester :

En partant du fichier engendré ci-dessus, avec 3 blocs « plus1 », « plus2 » et « plus3 », on peut

• renommer ces blocs en « Aplus1 », « Aplus2 » et « Aplus3 », pour qu’ils soient utilisés par le joueur A ;
• les copier en « Bplus1 », « Bplus2 » et « Bplus3 » qui produisent le même JavaScript (par exemple « nombre += 2 ») mais qui n’ont pas la même couleur (teinte nulle pour qu’ils soient rouges).

Ainsi, le micromonde est plus adapté à un jeu où chaque joueur se rappelle à chaque instant si c’est son tour, et où le prof peut voir au premier coup d’œil le déroulement de la partie :

C’est, à peu de choses près, le résultat de ces modifications qui a été montré au début de cet article :

Pour rajouter des images, il suffit de glisser l’étoile (image exemple) de la fabrique à la suite du texte dans l’entrée factice. Une fois qu’on a créé un dossier « img » contenant une photo de 32 pixels sur 24, appelée « graine1.png », on peut modifier ainsi la définition du bloc :

On le voit, les « fields » s’enchaînent les uns derrière les autres, et on peut insérer des images entre des morceaux de texte. Même des images au format « gif animé » s’affichent correctement. Les blocs créés ainsi sont donc plus visuels et une partie de Nim faite avec le micromonde « en local » ci-après ressemble à ceci :

On constate que le bloc d’affichage a été modifié pour être positionné naturellement en fin de programme (on ne peut plus rien fixer après lui). Voici le dossier contenant le micromonde graphique :