Page web sur le théorème de Pythagore ( code source )
Interagissez avec les sept vidéos, les deux figures GeoGebra ou le site web.
p5Visuel, un environnement de
programmation visuelle pour le web
L'idée de p5Visuel m'est venue en constatant que plusieurs professeurs de mathématiques avaient tendance à utiliser Scratch avec leurs élèves, mais qu'un nombre grandissant de ceux-ci se heurtaient à certaines limitations de cet environnement: scène limitée à 480 x 360 pixels, difficulté d'utiliser des notations mathématiques, lourdeur du recours à des tableaux de données à plusieurs colonnes, etc.
J'ai alors résolu de créer un nouvel environnement de programmation visuelle visant, non pas une « représentation sur une scène », mais la création de pages web interactives. Dès le départ, j'ai décidé qu'il ne serait pas du tout nécessaire de connaître quoi que ce soit de la mécanique des pages web (HTML, CSS et JavaScript) pour programmer dans p5Visuel, mais que ceux et celles qui disposent de telles connaissances pourraient les utiliser pour aller plus loin.
À qui s'adresse p5Visuel? Pour dire vrai, je ne sais pas exactement. Il nécessite probablement un peu plus de maturité que ce qui est exigé des premiers utilisateurs de Scratch. Mais je crois qu'il peut s'utiliser à un niveau assez élémentaire. À vous de me le dire. Par contre, je suis convaincu que le plafond est moins bas qu'avec Scratch, pour qui veut allier programmation et mathématiques.
Mentionnons que p5Visuel s'utilise en ligne, mais qu'il existe aussi une version autonome que vous pouvez télécharger. Il est doté d'une documentation en ligne, comprenant notamment des vidéos de formation pour débutants, ainsi que des exemples de programmes et de problèmes à résoudre. Le lecteur intéressé pourra consulter le site web principal de p5Visuel.
Extrait de la vidéo Présentation de p5Visuel : Pourquoi p5Visuel ?
p5Visuel est un environnement de programmation visuelle : il permet de mettre au point des programmes en assemblant des blocs. Et quel est le résultat de l’exécution de tels programmes? Une page web interactive. Pour vous donner une idée de ce qu’on peut accomplir de cette manière, voici un exemple de page web créée avec p5Visuel : elle comporte des éléments textuels dotés de divers formats, des images (dont un GIF animé), des vidéos, des figures GeoGebra , et même un site web incrusté. On peut accéder à cette page web par un clic sur l’image ci-dessous. On peut aussi voir le programme l’ayant engendrée par un clic sur le texte « code source » de la légende.
Pour créer une telle page, p5Visuel comporte divers blocs permettant de créer ou d’importer les divers éléments constituant une page web.
On peut aussi incruster des pages web créées avec p5Visuel pour enrichir d’autres pages web, comme nous le montre l’exemple suivant.