Avant un long discours, quelques exemples interactifs : un tracé de graphe,
un tableau de variations, un programme en syntaxe Python.
def second_deg(a,b,c): # local d d=b*b-4*a*c if d<0: return "pas de solution" return [(-b-sqrt(d))/(2*a),(-b+sqrt(d))/(2*a)]
onload
Résumé: Il existe de plus en plus de documents mathématiques sur le web, la plupart sont des documents PDF inertes, ce qui ne favorise pas une lecture active. On présente ici deux méthodes pour permettre au lecteur de modifier des calculs, des programmes, afficher un graphe et tester tout cela depuis son navigateur. La première méthode consiste à ajouter des liens vers une feuille de calcul de Xcas pour Firefox et est très simple à mettre en oeuvre pour l’auteur. La deuxième donne beaucoup plus de contrôle à l’auteur, elle nécessite de savoir taper en LATEX. Plusieurs technologies sont utilisées : LATEX, hevea[3] (compilateur vers HTML5) ou [1], itex2mml[2] (traducteur de formules vers MathML), le moteur de calcul formel Giac[4] et le compilateur emscripten[5] (C vers javascript).
Table des matières
- 1 Introduction
- 2 Xcas pour Firefox
- 3 Documents interactifs calcul formel et/ou algorithmique avec LATEX
- 4 Développements futurs
Index
1 Introduction
LATEX est devenu depuis plus de deux décennies le standard de l’édition mathématique professionnelle papier. Par contre, on trouve un peu de tout pour les maths sur le web :
- dans le monde de la recherche ce sont les documents PDF issus de LATEX qui dominent, la qualité typographique est excellente, mais ces documents ne sont pas interactifs et moins intégrés au navigateur que des documents HTML. Des compilateurs de LATEXvers HTML existent, mais ils offrent en général un rendu nettement moins joli que PDF car ils ne proposent pas par défaut une traduction en MathML.
- dans le monde de l’enseignement, les auteurs ne connaissent pas forcément LATEX les documents sont de moins bonne qualité typographique (en PDF ou en HTML mais rarement avec du MathML), ils ne sont en général pas interactifs, ou alors ils nécessitent l’utilisation de logiciels propriétaires.
Il y a une raison au mauvais rendu mathématique de nombreuses pages HTML : il existe bien un standard pour un rendu mathématique de qualité, c’est MathML, mais son support a été abandonné par Chrome et il n’a jamais été implémenté par Internet Explorer. Seuls Firefox et les navigateurs utilisant le même webkit supportent un rendu natif de MathML, sur les autres navigateurs il faut passer par une bibliothèque en javascript comme mathjax, ce qui ralentit considérablement l’affichage dès que le document atteint quelques dizaines de pages. Mais comme Firefox s’installe sur tout type d’appareil, cela ne me semble pas une raison valide pour s’interdire d’utiliser MathML. Ainsi Xcas pour Firefox utilise MathML, et nous utilisons le programme hevea qui permet en association avec itex2mml de traduire du LATEX vers du HTML5+MathML.
Pour rendre une page interactive, la solution traditionnelle consiste à faire dialoguer le navigateur avec un serveur sur lequel peut tourner un logiciel de calcul ou de programmation. Ceci peut malheureusement nécessiter des ressources importantes coté serveur, et cela nécessite à tout moment un accès réseau. La solution que nous proposons ici repose sur des calculs faits entièrement en local par le navigateur. Le logiciel de calcul et programmation doit donc être écrit en javascript, le langage des navigateurs, ce qui est réalisé ici en compilant avec emscripten le code C++ du moteur de calcul formel Giac (celui du logiciel Xcas et de Geogebra) vers javascript. Ceci a été fait à l’origine pour répondre à la demande de Geogebra, cela sert maintenant à l’interface web de Xcas (Xcas pour Firefox) et également comme moteur de calcul et interpréteur de pages interactives crées à partir de LATEXḊepuis quelques semaines, il est possible d’utiliser une syntaxe compatible avec le langage Python de base, ce qui devrait intéresser les enseignants de lycée pour l’algorithmique et pas uniquement pour le calcul formel.
Dans la section 2, nous expliquons comment
un auteur peut publier une feuille de calcul ou un
programme, ceci ne nécessite
aucune connaissance de LATEXLa section 3
explique comment créer un document LATEX avec des champs de saisie
qui seront exécutés par le moteur de calcul, elle nécessite
de connaitre un peu LATEX (des environements d’édition comme
texmaker
permettent de s’initier à LATEX en une heure
environ).
2 Xcas pour Firefox
Xcas pour Firefox est une interface de Xcas en cours de développement, utilisable depuis un navigateur compatible avec Firefox, donc depuis des matériels très divers: PC bien sur, mais aussi tablettes, voire smartphones (mais la taille d’écran d’un smartphone standard y rend l’usage un peu difficile). Il est conseillé d’utiliser Firefox, car les calculs sont plus rapides avec ce navigateur, grâce à la technologie asmjs qui permet au navigateur de traduire en code natif certaines portions du code javascript généré par le compilateur emscripten, le gain en vitesse est souvent supérieur à un facteur 5, tout cela sans aucune intervention de l’utilisateur.
Comme dans Xcas, on tape des lignes de commandes (au sens large, une commande
peut être un programme ou une commande graphique),
qui une fois exécutées
apparaissent dans un historique, on peut alors les modifier. Il n’y a pas
de menus, mais des boutons pour faire apparaitre des assistants, dans
deux catégories math
et prog
.
On peut sauvegarder une feuille de calcul par l’intermédiaire des cookies du navigateur et les retrouver plus tard. On peut également partager une feuille de calcul par email en cliquant sur le lien email, le destinataire clique sur le lien dans le mail reçu et retrouve alors la feuille de calcul. On peut ainsi imaginer envoyer un début de programme ou une liste partielle de commandes de calcul formel envoyé par un enseignant à ses élèves, et réciproquement un élève peut renvoyer une feuille de calcul complétée pour évaluation. L’enseignant peut aussi utiliser le bouton Clone pour créer un lien ouvrant la feuille de calcul, lien qu’il peut insérer dans une de ses pages personnelles.
À noter : le menu math permet de créer un curseur
, ce qui
permet d’animer un graphique ou observer la dépendance d’un
résultat en fonction d’un paramètre.
3 Documents interactifs calcul formel et/ou algorithmique avec LATEX
3.1 Le point de vue du lecteur
Le lecteur ouvre le document HTML depuis son navigateur comme
n’importe quel lien. Il dispose d’un tableau de bord en bas
du document et d’une petite calculatrice, exactement comme sur la version
HTML de cet article.
Le tableau de bord permet d’accéder par un lien à la table
des matières du document, à l’index. Il peut cloner une commande
ou un programme qu’il vient d’exécuter dans Xcas pour Firefox, effacer
l’hisorique de calcul, augmenter ou diminuer l’historique de calculs. Au milieu
du tableu de bord se trouve la ligne de commande de la calculatrice, le
bouton permettant d’exécuter le calcul, Le bouton Restart
permet
de réinitialiser la session de calcul, le bouton Exec. tout
exécute tous les calculs de la feuille, ce qui peut être long.
Pour plus d’exemples, vous pouvez consulter le manuel algorithmique lycée de Xcas, mon cours de 2ième année de licence Courbes paramétrées et équations différentielles pour la physique, ou le manuel Algorithmes de Xcas
3.2 Consignes au rédacteur
3.3 Installation
Je conseille de travailler sous Linux, si vous travaillez sur Mac ou Windows, il est aujourd’hui facile d’installer un Linux dans une machine virtuelle avec Virtualbox. Il faut disposer d’une distribution latex, installer la dernière version d’hevea, installer hevea2mml et quelques fichiers supplémentaires, ce qui se fait depuis un Terminal par les commandes suivantes :
#! /bin/bash wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.tex wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/giacfr.tex wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.js wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/hevea.sty wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/mathjax.sty wget http://hevea.inria.fr/distri/hevea-2.31.tar.gz tar xvfz hevea-2.31.tar.gz cd hevea-2.31 make sudo make install cd .. wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/heveatomml.tgz tar xvfz heveatomml.tgz cd heveatomml/src make sudo make install cd ../..
3.4 Rédiger un document interactif
Ajoutez dans l’en-tête du document LATEX
(avant \begin{document}
) :
\input{giacfr.tex} \giacmathjax
Ajoutez juste après \begin{document}
l’une des commandes :
\begin{giacjs}
\begin{giacjshere}
En fin de document, juste avant \end{document}
, ajoutez
\end{giacjs}
ou \end{giacjshere}
.
Avant toute \section
, insérez les commandes
\tableofcontents
\printindex
pour que les boutons Table
et Index
du tableau de bord
de la page HTML correspondent bien à la table des matières et à
l’index.
Le reste du fichier est du LATEX standard, mais il faut prendre quelques précautions :
- Les références à des équations numérotées doivent être placées entre des parenthèses précédées par des backslash, par exemple \begin{equation} \label{eq_test} \frac{2}{x^2-1}=\frac{1}{x-1}-\frac{1}{x+1} \end{equation} D'apr\`es l'\'equation (\(eq_test\)) ... D’après equation (1) ...
\mathbb{}
doit être explicite, une commande comme\R
où\R
est défini par\newcommand{\R}{\mathbb{R}}
ne fonctionnera pas.
Vous disposez de plusieurs commandes LATEX pour générer des lignes de commandes interactives ou des programmes.
-
\giacinputmath{commandline}
génère uneligne de commande
en ligne que l’utilisateur peut modifier et exécuter, l’affichage de la réponse se fait en MathML (ou SVG pour les graphes 2-d).
Exemple :\giacinputmath{factor(x^10-1)}
Attention, si votre commande contient<
ou>
, vous devez les remplacer par<
ou>
, autrement ils seront interprétés comme des délimiteurs HTML. Vous pouvez aussi utiliser les environnementsgiacprog
etgiaconload
expliqués ci-dessous.
Si la sortie est un graphe 2-d, ne sautez pas de ligne avec\\
après la commande, sinon la compilation en PDF provoquera des erreurs. \giaccmdmath{command}{arguments}
va affichercommand
dans un bouton après une ligne de commande contenantarguments
, le lecteur pourra modifier les arguments mais pas la commande:
\giaccmdmath{factor}{x^4-1}
- Ces commandes peuvnet prendre un argument de style HTML style optionnel, par exemple
\giacinputmath[style="width:200px;"]{factor(x^10-1)}
\giaccmdmath[style="font-size:x-large"]{factor}{x^4-1}
- Il y a des commandes similaires pour une sortie hors-ligne
\giacinputbigmath{}
ou\giaccmdbigmath{}{}
:
Par exemple\giacinputbigmath{factor(x^25-1)}
Exemple avec un argument de style optionnel
\giacinputbigmath[style="width:600px;height:20px;"]{factor(x^25-1)}
\giaccmdbigmath{factor}{x^25-1}
\giaccmdbigmath[style="width:600px;height:20px;"]{factor}{x^25-1}
- Des commandes similaires avec une sortie texte (ou graphique)
\giacinput
and\giacinputbig
et\giaccmd
, exemple:
\giacinput{factor(x^4-1)}
:
\giaccmd{print}{"Hello world"}
:
Avec argument de style optionnel
\giacinput[style="font-size:x-large"]{plot(1/x)}
\giaccmd[style="font-size:x-large"]{factor}{x^4-1}
- L’environement
giacprog
sert pour des programmes ou des commandes sur plusieurs lignes
\begin{giacprog}...\end{giacprog}
Dans cet environement, on peut utiliser<
et>
. Le programme sera interprété lorsque l’utilisateur pressera le boutonok
. Ensuite, on peut modifier le programme et l’interpréter à nouveau.
Attention: Il ne faut pas utilisergiacprog
dans un autre environement (comme itemize ou enumerate).
Si on veut que le programme soit interprété au chargement de la pgae HTML, il faut remplacergiacprog
pargiaconload
:
\begin{giaconload}...\end{giaconload}
- La commande
\giacslider{idname}{min}{max}{step}{valeur}{commande}
permet d’ajouter un curseur. Lorsque le lecteur modifie le curseur, la nouvellevaleur
est stockée dansidname
etcommande
(qui dépend en principe deidname
) est exécutée. Exemple:
\giacslider{a}{-5}{5}{0.1}{0.5}{plot(sin(a*x))}
Not evaled - La commande
\giachidden
se comporte comme\giaccmd
mais le style HTML5 par défaut est “hidden” jusqu’à ce que le bouton soit pressé. - La commande
\giaclink
ajoute un lien (dans la version HTML5, si on compile vers PDF/DVI rien n’est affiché). Ce lien ouvre un nouvel onglet. On peut indiquer en argument optionnel le texte du lien (par défaut c’est Tester en ligne). Notez quehevea.sty
propose des commandes similaires (\ahref
,\footahref
,\ahrefurl
) avec un affichage en PDF/DVI.
Exemple avec un lien vers Xcas pour Firefox contenant quelques calculs
\giaclink{http://www-fourier.ujf-grenoble.fr/\%7eparisse/xcasfr.html#+factor(x^4-1)&+a:=idn(3)&}
Tester en ligne
Vous pouvez vous inspirer des textes sources de documents HTML5 interactifs, par exemple ce source ou le cours sur les courbes et équations différentielles.
3.5 Compilation
Pour créer un fichier HTML5+MathML, tapez la commande
hevea2mml nom_fichier.tex
cela devrait générer nom_fichier.html
que vous pouvez tester
en tapant la commande firefox nom_fichier.html &
.
3.6 Publication
Si le test est concluant, il vous suffit de recopier le fichier HTML
sur votre espace web personnel. Si
vous avez utilisé \begin{giacjshere}
, vous
devrez aussi mettre dans le même répertoire le fichier giac.js
.
4 Développements futurs
Quelqu’un connaissant Javascript et LATEX peut sans doute exploiter bien mieux les possibilités d’interaction, par exemple permettre la création de questionnaires avec auto-correction ou correction automatique.
On peut surement créer d’autres commandes et environnements, améliorer la calculatrice, etc.
Références
- [1]
- Yannick Chevallier. Hevea: LaTeX to HTML5 compiler, fork for MathJax support. https://github.com/YannickChevalier/hevea-mathjax, 2017.
- [2]
- Jacques Distler. LaTeX to MathML converter. golem.ph.utexas.edu/ distler/blog/itex2MML.html, 2016.
- [3]
- Luc Maranget. Hevea: LaTeX to HTML5 compiler (unstable version). http://hevea.inria.fr/distri/unstable/, 2017.
- [4]
- Bernard Parisse and Renée De Graeve. Giac/Xcas Computer Algebra System. www-fourier.ujf-grenoble.fr/ parisse/giac.html, 2017.
- [5]
- Alon Zakai. Emscripten: A C/C++ to Javascript compiler. kripken.github.io/emscripten-site/, 2017.