Mathématice, intégration des Tice dans l'enseignement des mathématiques  
Sommaire > N° 1 - Septembre 2006 > Articles publiés en avance > Activités pédagogiques Python ou Blockly avec (...)

Activités pédagogiques Python ou Blockly avec SofusPy
Moteur de recherche

A) Introduction

SofusPy est une application en ligne permettant de créer et d’exécuter des programmes visuels ou des programmes Python. Cette passerelle entre la programmation par blocs (au collège) et Python (au lycée) propose notamment :

  • de nombreux blocs adaptés à l’enseignement des mathématiques
  • un utilitaire permettant de passer de Scratch à Python (voir article)
  • une tortue (utilisable en programmation visuelle ou en Python)

Depuis sa version initiale en 2017 (voir article), SofusPy a connu plusieurs évolutions importantes qui seront résumées dans cet article. Elles peuvent être testées à partir de ma page web consacrée à Blockly (voir lien).

Deux versions y sont proposées :

  • la première (illustrée ci-dessus) permet de voir simultanément l’éditeur visuel (partie gauche de l’écran) et l’éditeur textuel (partie droite), avec une barre de séparation mobile pour ajuster leur largeur en fonction des besoins
  • la seconde, adoptée dans mes articles antérieurs parce que je n’arrivais pas à rendre mobile cette barre de séparation, permet de voir soit l’éditeur visuel soit l’éditeur textuel, le basculement de l’un à l’autre se faisant à l’aide de boutons (« Editeur Python » et « retour à Blockly »)

Les fonctionnalités de ces deux versions sont similaires, y compris pour la plupart des nouveautés présentées dans cet article : création et transformation de variables (section B), configuration R (section C), activités disponibles (section D) et « création et diffusion d’activités » (section F). Toutefois, des différences significatives entre ces deux versions apparaissent quand on cherche à combiner programmation par blocs et programmation textuelle (section E).

B) Création et transformation de variables

Grâce à un changement de version de Blockly, il y a désormais dans le menu Variables un bouton « Créer une variable » qui rend plus naturelle cette tâche.

Ce bouton fait aussi apparaître dans le menu « Variables » un bloc permettant de transformer des variables, avec diverses options  [1] : augmenter, diminuer, multiplier, diviser, augmenter d’un pourcentage… Pour y parvenir, une adaptation du Blockly de base a été réalisée car la seule transformation proposée était « augmenter ».

C) Trois configurations : standard, calcul formel ... et R !

Deux configurations (calcul symbolique et R) ont été ajoutées à la version initiale de SofusPy. Elles sont accessibles grâce à une liste déroulante :

Configuration standard

La configuration standard, proposée par défaut, était la seule disponible dans la version 2017 de SofusPy. Les deux environnements (visuel et textuel) y ont un moteur d’exécution spécifique :

  • un programme visuel est traduit en Javascript pour être exécuté par le navigateur (le code Javascript n’est pas fourni à l’utilisateur)
  • un programme Python est exécuté par l’interpréteur Skulpt, un interpréteur Python écrit en Javascript

Configuration calcul formel

Cette configuration permet de faire du calcul symbolique, que ce soit en mode visuel ou en mode Python (voir article) :

Pour pouvoir être exécuté, un programme par blocs est traduit en Python. Comme l’interpréteur de SofusPy ne gère pas le module de calcul formel de Python (SymPy), le code engendré est alors envoyé à un serveur externe (SymPy Live). Voici ce qu’on obtient ici :

On peut noter, pour cet exemple inspiré par le sujet 2017 de Pondichery au brevet des collèges, qu’il est très facile de passer de la version numérique à la version formelle : il suffit de remplacer le 7 de la section B par un bloc « x » (disponible dans le menu « calcul formel »). La programmation visuelle formelle ne nécessite donc pas d’apprentissage particulier de la part des élèves, ce qui est un atout.

Configuration ... R !

Considérons ce programme par blocs où on répète le lancer de 3 dés et où on étudie graphiquement la répartition de leur somme :

Comme il comporte un bloc pour construire un graphique, il ne peut être exécuté par SofusPy ni directement (avec l’interpréteur Javascript) ni indirectement (en exécutant sa traduction Python) :

  1. import random
  2. from matplotlib import pyplot
  3. import numpy
  4. def math_bar(maListe,titre) :
  5. bar_uniq = numpy.unique(maListe, return_counts=True)
  6. bar_val = bar_uniq[0].tolist()
  7. bar_count = bar_uniq[1].tolist()
  8. pyplot.bar(range(len(bar_val)), bar_count, tick_label = bar_val, color=['blue','red'])
  9. pyplot.title(titre)
  10. pyplot.show()
  11. n = 10000
  12. lancers = []
  13. for count in range(int(n)):
  14. lancers.append(random.randint(1, 6) + random.randint(1, 6) + random.randint(1, 6))
  15. math_bar(lancers,'somme de 3 des')

Télécharger

Certes, c’est déjà appréciable de pouvoir récupérer ce code Python (bouton Traduire ou Editeur) pour le transférer et l’exécuter dans un environnement externe, mais une exécution directe du programme par blocs apporterait un plus non négligeable : c’est ce que permet la configuration R. Un code R, non fourni à l’utilisateur, est alors engendré à partir des blocs, puis envoyé à un serveur R (OpenCPU) qui l’exécute. Pour cet exemple, à moins que le hasard ne soit facétieux, on pourra vérifier ainsi le paradoxe du duc de Toscane : il y aura un peu plus de 10 que de 9 sur le diagramme en barres.

Même s’il n’est pas fourni à l’utilisateur, ce code R intermédiaire peut néanmoins être récupéré dans l’éditeur textuel. Le voici à titre indicatif :

D) Activités disponibles

Introduction

Dans les versions précédentes de SofusPy, il y avait quelques exemples de démonstration, mais pas d’activités disponibles. Cette lacune a été comblée, grâce au changement de version de Blockly (déjà mentionné en section B) qui permet ici d’intégrer des boutons dans le menu :

Quatre activités sont disponibles dans la configuration de base de SofusPy. Leurs thèmes (pourcentages, sommes, produits et dés) reflètent des problématiques que je n’ai pas cherché à relier précisément aux programmes officiels. Elles sont à adapter aux objectifs pédagogiques d’une classe donnée et aux connaissances (mathématiques et algorithmiques) des élèves.

Des activités plus ciblées, adaptées à un niveau scolaire, sont en cours de réalisation. L’annexe 2 explique comment accéder à ces niveaux qui s(er)ont numérotés à partir de 1. Le niveau 1 propose un menu très élagué et, je l’espère, des activités accessibles au cycle 3 (que je connais très mal). On y trouve par exemple :

  • un exercice lié au calcul mental et à la multiplication
  • un exercice où il faut dessiner des lettres avec la tortue, le dessin à réaliser étant construit en direct lorsqu’on sélectionne une question.

Pourcentages et sommes : deux activités pour débuter

Le niveau d’une question peut être très dépendant du support logiciel : par exemple, pour savoir comment évolue un prix après 4 augmentations de 5 %, c’est évidemment bien plus facile en programmation par blocs avec SofusPy (où on dispose non seulement d’un bloc « répéter n fois », comme avec Scratch, mais aussi d’un bloc « augmenter d’un pourcentage ») qu’avec un langage textuel. Dans l’activité « pourcentages », il y a aussi 2 questions traitant le problème inverse : déterminer le taux qui, appliqué 4 fois, donne une augmentation globale de 20 %. Dans l’activité, je fournis quasiment les réponses car des programmes visuels presque complets accompagnent les questions : l’objectif prioritaire est ici de faire comprendre des techniques algorithmiques usuelles (par exemple une dichotomie) en les appliquant à une problématique grand public. Mais ce sont aussi des exercices qui, sans toutes ces indications, ont leur place dans mon module d’algorithmique en IUT.

Pour illustrer l’activité « sommation », j’avais un vaste choix de situations mathématiques. J’ai opté pour une approche provenant d’une activité posée au collège avec Scratch [2] : déterminer expérimentalement pour quelles valeurs de n la somme de n entiers consécutifs est divisible par n. Dans l’activité Scratch originelle, cette question était précédée de 2 autres bien plus triviales : faire la somme de 3 entiers consécutifs (sans boucle donc), puis déterminer si elle est divisible par 3. Dans l’activité que je propose, je fournis au départ un programme Blockly calculant la somme des n premiers entiers, qu’il faut généraliser à n entiers consécutifs quelconques. Ensuite, le programme est à réécrire en introduisant une fonction sommant n entiers consécutifs.

Lancers de dés : une activité avec des listes

Pour compléter le tour d’horizon des possibilités offertes par SofusPy, il me fallait une activité avec des listes : c’est le rôle de l’activité « dés ». Elle démarre par une question où l’on compte le nombre de 6 dans une simulation, sans listes pour mettre en avant la technique de comptage. Ensuite, dans le question 2, je fais quelques rappels sur les listes. Dans la question 3, je fournis un programme visuel reprenant la question 1 avec une fonction comptant le nombre de répétitions d’une valeur donnée dans une liste. SofusPy permet d’en obtenir la traduction suivante en Python :

  1. import random
  2.  
  3. # calcule le nombre de fois une valeur est presente dans la liste lancers
  4. def nombreDe(lancers, valeur):
  5. total = 0
  6. for k in range(0,len(lancers)):
  7. if lancers[k] == valeur:
  8. total = total + 1
  9. return total
  10.  
  11. n = 1000
  12. lancers = []
  13. for count in range(int(n)):
  14. lancers.append(random.randint(1, 6))
  15. print(nombreDe(lancers, 6))

Télécharger

Le gros du travail à effectuer arrive dans la suite de la question, où deux modifications du programme principal sont demandées : calculer le nombre d’apparitions des autres faces du dé, puis passer à deux dés. Il serait aussi possible de bifurquer vers le paradoxe du duc de Toscane, ce que je n’ai pas fait dans l’activité, pour aboutir à une solution voisine de celle-ci :

  1. n = 10000
  2. lancers = []
  3. for count in range(n):
  4. lancers.append(random.randint(1, 6) + random.randint(1, 6) + random.randint(1, 6))
  5. print(nombreDe(lancers, 9))
  6. print(nombreDe(lancers, 10))

Télécharger

Cette question illustre évidemment que l’usage de sous-programmes permet de simplifier la résolution de « problèmes complexes ». Mais elle va aussi au-delà : elle montre qu’un sous-programme « bien choisi » (ici la fonction nombreDe) peut être utilisé pour résoudre non seulement un problème initial, mais aussi d’autres problèmes connexes.

E) Comment combiner efficacement programmation visuelle et Python ?

Point de vue du programmeur Python

Deux des activités disponibles (produits et dés) sont rédigées dans l’optique d’apprendre à coder en Python : les programmes visuels fournis, souvent incomplets, servent d’intermédiaires à la production de codes Python. Les élèves ont alors le choix entre deux options :

  • obtenir la traduction en Python (bouton Traduire ou Editeur) du programme visuel incomplet, puis compléter le code Python
  • compléter le programme visuel, puis obtenir la traduction en Python du programme visuel complété

C’est une approche qui facilite la découverte de la programmation Python, mais peu adaptée à moyen terme si l’activité à traiter n’a pas été intégrée dans le menu de SofusPy : en effet la seconde option (tout coder par blocs avant de demander la traduction) est généralement trop chronophage tandis que la première option (coder seulement quelques blocs avant la traduction) laisse le gros du codage Python à la charge des élèves.

Et puis, commencer par écrire des blocs n’est pas nécessairement la démarche la plus pratique. Par exemple, pour résoudre une équation du second degré en Python, c’est plus simple de coder directement des instructions telles que celles-ci :

  1. a = 1
  2. b = 2
  3. c = 3
  4. delta = b*b – 4*a*c

Télécharger

Un recours à la programmation par blocs peut s’avérer utile dans un second temps pour gérer l’instruction conditionnelle :

Le bouton « Traduire » ne doit pas être utilisé ici : en effet, il effacerait le code Python initial. C’est pourquoi un bouton « Insérer blocs » a été ajouté (uniquement dans la version de SofusPy où on voit simultanément les deux éditeurs).

Point de vue du programmeur Blockly

SofusPy propose une fonctionnalité équivalente aux programmeurs Blockly, qui peuvent créer des blocs à partir d’instructions textuelles. En voici une illustration simple :

La priorité des opérateurs n’étant pas prise en compte par le mécanisme de transformation en blocs, le parenthésage est nécessaire dans la formule calculant delta.

F) Création et diffusion d’activités

Introduction

Comme je l’ai signalé dans la section D, les thèmes des activités disponibles (pourcentages, sommes, produits et dés) reflètent des problématiques que je n’ai pas cherché à relier précisément aux programmes officiels. Pour y remédier, j’ai mis au point un dispositif permettant aux enseignants de créer leurs propres activités et de les diffuser. Pour l’illustrer, je vous invite à télécharger ce fichier qui va être étudié dans la suite de cette section.

Zip - 2.4 ko
une activité à télécharger

Utilisation de l’exemple

Le bouton « Ouvrir » de l’éditeur Blockly permet d’intégrer l’exemple dans SofusPy : il suffit de sélectionner le fichier zip dans la boîte de dialogue apparaissant alors. Cela crée dans le menu de Blockly un sous-menu intitulé « Exercice », composé de trois boutons :

  • question 1 : ce bouton fait apparaître un énoncé, ainsi qu’un programme Blockly à compléter.
  • question 2 : ce bouton fait apparaître un énoncé, mais pas de programme Blockly puisqu’on repart du programme Blockly obtenu à l’issue de la question 1.
  • question 3 : ce bouton fait apparaître un énoncé, ainsi qu’un programme Python à tester.

Analyse de l’exemple

En dézippant le fichier de l’exemple pour en examiner le contenu, on voit qu’il consiste en un dossier nommé « xml » contenant deux fichiers :

  • un fichier nommé « activites.xml » décrivant la structure du menu Blockly, en particulier les boutons associés aux questions de l’activité
  • un fichier nommé « q1.xml » correspondant au programme Blockly téléchargé quand on clique sur le bouton « question 1 »

Le contenu du fichier « q1.xml » a peu d’importance : il suffit de savoir que je l’ai créé avec le bouton « Sauver » de l’éditeur Blockly de SofusPy. Par contre, si un lecteur veut développer ses propres activités, il est nécessaire que je lui explique en quoi consiste le fichier « activites.xml », qui peut être ouvert et modifié avec un simple éditeur de texte. Voici la partie de son code décrivant l’activité :

Comme il y a trois boutons, il y a trois balises <button> possédant deux attributs :

  • « text » précise la légende du bouton
  • « callbackKey » attribue un identifiant au bouton, qui est ensuite utilisé par SofusPy pour lui associer une action

Pour chaque bouton, il y a une (parfois deux) section CDATA :

  • la première correspond à l’énoncé de la question
  • la seconde, facultative, correspond à un éventuel code téléchargé dans l’éditeur textuel : ici, seule la question 3 en a une

L’identifiant d’un bouton détermine aussi, s’il y a un programme Blockly à télécharger, le nom du fichier correspondant :

  • comme l’identifiant du bouton « question 1 » est q1, il y a un fichier « q1.xml » dans le dossier « xml ».
  • comme il n’y a pas de fichier « q2.xml » et « q3.xml », aucun programme Blockly n’est téléchargé quand on clique sur les boutons « question 2 » ou « question 3 ».

Adaptation de l’exemple

Pour créer une nouvelle activité, mieux vaut limite les risques d’erreur de syntaxe (en particulier pour les sections CDATA) en adaptant le code de l’exemple fourni. S’il y a plus de trois questions, il faudra faire des copier-coller du code d’un des boutons (<button ...> ... </button>), sans oublier d’en changer l’identifiant (attribut « callbackKey ») et la légende (attribut « text »).

Pour développer une activité plus élaborée avec plusieurs exercices (voir copie d’écran ci-dessus), le plus simple est encore de procéder par copier-coller avec le code du premier exercice (<category ...> ... </category>). Ensuite, il faut veiller à changer l’identifiant des questions et même, ce qui peut paraître illogique, la légende des boutons : en effet, si par exemple la légende de la question 1 de l’exercice 2 (ici « ex 2 : question 1 ») était la même que celle de la question 1 de l’exercice 1, les boutons correspondants déclencheraient la même action ! En contre-partie, cette « contrainte illogique » évite aux enseignants développant une activité d’avoir à coder en Javascript les actions associées aux boutons [3]. Je ne détaillerai pas le code Xml de cet exemple, qui est disponible dans le fichier « activites.xml » de ce fichier zippé.

Zip - 3.2 ko
une activité avec deux exercices

Utilitaire pour tester une activité

Pour tester une activité lorsqu’on la met au point, une succession de zippages de dossiers et d’ouvertures de fichiers zippés (bouton « Ouvrir » de SofusPy) peut vite devenir fastidieuse. C’est pourquoi je propose un utilitaire :

Zip - 5.9 ko
utilitaire

On y retrouve les fichiers de l’exemple 2 (« activites.xml », « ex1_q1.xml » et « ex2_q1.xml »), ainsi qu’un fichier html (« sofuspy.html ») à visualiser avec un navigateur. Comme ce fichier tient compte du fichier de configuration « activite.xml », il suffit d’actualiser le navigateur (touche F5 en général) après chaque modification de l’activité pour la tester.

Pour diffuser l’activité, il n’est pas nécessaire d’exclure « sofuspy.html » quand on zippe le dossier. Une alternative est de recopier le dossier sur un serveur, sans changer le nom du fichier « sofuspy.html » svp.

G) Conclusion

SofusPy est un logiciel adapté à l’enseignement du codage en mathématiques, que ce soit au collège (programmation visuelle) ou au lycée (programmation Python).

Au collège, compte-tenu du quasi monopole institutionnel de Scratch, il risque de ne pouvoir y jouer qu’un rôle secondaire : même si le programme officiel stipule qu’au cycle 4 « les élèves s’initient à la programmation sans viser la connaissance experte d’un langage ou d’un logiciel particulier », on peut en douter quand on ne voit que du Scratch dans les sujets du brevet des collèges. J’espère néanmoins que SofusPy sera utilisé au moins ponctuellement dans des situations où il est plus pertinent que Scratch, par exemple les transformations de variables et le calcul symbolique. Or, ce sont des ingrédients qu’on retrouve dans un type d’exercice fréquent au brevet : les programmes de calcul…

Au lycée, tout logiciel a sa chance … à condition bien sûr de permettre l’exécution de programmes Python ! Et SofusPy a un atout supplémentaire de taille, en particulier en seconde : c’est une passerelle entre la programmation visuelle (enseignée au collège) et la programmation textuelle en Python. Par ailleurs, de nombreux blocs mathématiques facilitent l’écriture de programmes très divers : tortue, calcul symbolique, simulations et graphiques statistiques…

Un autre atout important de SofusPy est de faciliter la création et la diffusion d’activités pédagogiques. Aucune compétence en programmation Javascript n’est requise : il suffit d’être capable de modifier un fichier Xml (voir annexe 3) de configuration, de zipper un dossier, voire de le transférer sur un serveur.

Annexe 1 : SofusPy comme composant de PluriAlgo

Introduction

SofusPy peut être utilisé soit séparément, soit comme composant du logiciel PluriAlgo, un logiciel initialement conçu pour faciliter la programmation dans une dizaine de langages textuels (voir article). En 2017, j’y ai intégré la programmation visuelle, ce qui a occasionné une sérieuse refonte du logiciel (voir article). Compte-tenu de l’importance prise par Python, j’ai ajouté en bas de l’onglet d’accueil un bouton (nommé « Python ») qui configure les onglets d’édition de PluriAlgo dans cette optique :

  • l’onglet « Editeur 1 » propose alors un éditeur et un interpréteur Python, avec des exemples à télécharger et des boutons facilitant le codage (entrées-sorties, sommation...).
  • l’onglet « Blockly (Editeur 2) » intègre SofusPy dans PluriAlgo

Comment utiliser au mieux ces deux éditeurs en fonction des objectifs pédagogiques ? Pour y répondre, deux points de vue seront examinés : celui d’un programmeur Blockly, puis celui d’un programmeur Python. Dans les deux approches, il faut commencer par cliquer sur le bouton « Python » de l’onglet d’accueil pour traiter les exemples présentés dans la suite de cette annexe.

Point de vue du programmeur Blockly

Pour commencer, il faut sélectionner l’onglet « Blockly (Editeur 2) ». Ensuite, on peut par exemple renseigner le formulaire de l’onglet « Principal » afin qu’il produise des blocs facilitant la programmation du calcul du pgcd :

Les informations fournies sont ici les entrées (a et b), le résultat (div). Et comme on a en plus sélectionné l’option de calcul « fonctions », le bouton « Nouveau » engendre non seulement les blocs d’entrées-sorties (« demander » et « afficher »), mais aussi les blocs relatifs à la fonction pgcd.

De façon analogue, on peut créer des programmes Blockly à partir du formulaire de l’onglet « Boucles » :

L’exemple de droite illustre la technique de sommation (calcul de la somme des inverses des n premiers entiers). L’exemple de gauche illustre la technique de comptage, et est à compléter afin de calculer le nombre de 6 dans une simulation de 1000 jets d’un dé.

Point de vue du programmeur Python

Si on reprend les exemples précédents en choisissant l’onglet « Editeur 1 » (au lieu de l’onglet « Blockly (Editeur 2) », on obtient des codes Python. Mais je vais choisir ici un autre exemple, afin d’illustrer une autre option de l’onglet « Principal » :

Elle permet ici de créer une procédure paramétrée pour résoudre une équation du second degré. Pour la compléter, on peut s’appuyer sur SofusPy dans l’onglet « Blockly (Editeur 2) », par exemple en y créant les deux blocs suivants :

Un clic sur le bouton « Editeur (Python/R) » fait basculer SofusPy en mode Python et fournit la traduction Python des blocs. Il ne reste plus qu’à transférer (par un copier-coller) le code ainsi obtenu dans l’éditeur « Editeur 1 » et à compléter la procédure « second_degre ».

Annexe 2 : paramétrage de l’URL de SofusPy

Le paramètre « auto »

J’ai eu des demandes d’enseignants qui aimeraient que le code Python soit automatiquement affiché à chaque modification du programme visuel. Or, cela rendrait caduque un exemple de la section E, où on commence par coder en Python (jusqu’au calcul de delta), puis où on crée des blocs pour l’instruction conditionnelle avant d’insérer leur traduction dans le code Python initial. C’est pourquoi je propose à ces enseignants de compléter l’URL de SofusPy dans la barre d’adresse du navigateur avec un paramétrage (.../index.html ?auto=1) leur offrant la fonctionnalité qu’ils souhaitent, sans que le comportement standard de SofusPy ne soit altéré par conséquent.

Et, comme cela relève de la même technique de programmation Javascript, j’ai ajouté une seconde option (.../index.html ?auto=2) qui exécute en plus le programme visuel à chaque modification d’un bloc. Dans le N°52 (voir article), Yves Martin a énuméré divers avantages de cette approche en temps réel pour les tortues de DGPad. Je la rends donc accessible pour la tortue de SofusPy, s’il y a des amateurs...

Pour éviter des situations de blocage, SofusPy vérifie qu’il n’y a pas d’instruction de saisie avant de lancer l’exécution automatique. Mais il reste à la charge de l’utilisateur d’éviter un trop grand nombre d’itérations dans un bloc « répéter n fois » ou un bloc « Pour ». Le bloc « Tantque » est encore plus risqué : en effet, quand on lui ajoute un test, celui-ci est traduit en 0=0 dans un premier temps, ce qui empêche de le compléter ensuite puisqu’une boucle infinie est lancée. Donc, autant se passer de ce bloc en général pas indispensable pour manipuler une tortue, même s’il existe des parades : l’une d’elles consiste à ajouter temporairement une instruction de saisie pour bloquer l’exécution automatique, ce qui permet de compléter le test du Tantque et d’ajouter dans le corps du Tantque (au moins) une instruction impactant l’évaluation du test.

Le paramètre « niveau »

Le paramètre « niveau » (.../index.html ?niveau=1,2...) permet d’adapter les menus de SofusPy au public concerné : par exemple, le niveau 1 supprime le menu « Autres » (listes notamment), supprime le menu « Sous-programmes », allège le menu « Boucles » (en ne gardant que la boucle « répéter n fois »), allège le menu « Nombres »... Les exemples de démonstration et les exercices sont également adaptés au niveau.

Comme tout ceci se met progressivement en place, je ne parlerai pas des autres niveaux : si en les testant vous voyez apparaître le menu standard, cela signifie qu’ils n’existent pas encore ! Et pour le(s) niveau(x) disponible(s), il est probable que leur liste d’activités soit provisoire car en chantier...

Annexe 3 : Xml pour débutants

Ne pas connaître Xml n’est pas handicapant pour créer ses propres activités : c’est en effet une notation intuitive pour structurer un document. Là où il devient nécessaire d’être informaticien, c’est seulement pour exploiter ensuite le contenant d’un fichier Xml, ce que je fais en Javascript pour programmer SofusPy.

Exemples de documents Xml

Pour convaincre le lecteur novice en Xml que c’est vraiment intuitif, je l’invite à utiliser cet éditeur Xml en ligne :

Xml est un langage de balises (<Company>, <Employee>, <Address>...) permettant de structurer un document sous forme arborescente, ce que montre très bien la copie d’écran (en partie droite). Dans l’éditeur textuel (partie gauche), on voit que les balises sont fermées (</Company>, </Employee>, </Address>...) en ordre inverse de leur ouverture.

Ajouter une information (par exemple un employé) dans le document n’exige guère de compétences, surtout si on procède par copier-coller (d’une portion <Employee> … </Employee>) avant d’en modifier le contenu. En cas d’erreur de syntaxe, rare par copier-coller, un numéro de ligne d’erreur apparaîtra à la place de l’arborescence.

Pour réaliser les fichiers de configuration de la section F, j’ai utilisé un éditeur de texte libre (Notepad++). L’éditeur en ligne, grâce à son visualiseur d’arborescence, peut le compléter avantageusement. Voici ce qu’on obtient pour le premier exemple développé en section F :

Les balises utilisées sont ici <category> et <button>. Des informations les décrivant, appelées attributs, leur ont ajoutées. Elles sont visualisées en vert.

Pour associer des énoncés aux boutons, j’utilise des sections « CDATA » dont la notation, je dois en convenir, n’est guère intuitive : donc, je recommande encore plus que pour les balises l’usage du copier-coller ! Les sections « CDATA » (abréviation de « character data ») sont un artifice permettant d’introduire des textes dans lesquels on peut mettre des accents, des caractères spéciaux comme « < » et « > » (interdits autrement car ils sont utilisés pour délimiter les balises)...


notes

[1Dans la version précédente de SofusPy, ces options (augmenter, diminuer...) existaient sous une autre forme : il fallait sélectionner un bloc spécifique (augmenter, diminuer...) dans un sous-menu du menu « Math ». La nouvelle organisation les rend plus directement accessibles, à un endroit stratégique (menu Variables), et améliore l’ergonomie en évitant une prolifération de blocs.

[2Cette activité Scratch, réalisée par Emmanuel Malgras, est publiée sur le site pédagogique de l’académie de Nantes (voir lien).

[3Dans la programmation de SofusPy, je ne dispose que de la légende d’un bouton lorsqu’il est cliqué. La contrainte d’unicité des légendes me permet de retrouver son identifiant à partir du code Xml, et donc de lui associer une action de façon automatique.

Réagir à cet article
Vous souhaitez compléter cet article pour un numéro futur, réagir à son contenu, demander des précisions à l'auteur ou au comité de rédaction...
À lire aussi ici
MathémaTICE est un projet
en collaboration avec
Suivre la vie du site Flux RSS 2.0  |  Espace de rédaction  |  Nous contacter  |  Site réalisé avec: SPIP  |  N° ISSN 2109-9197