% Merci a Yannick Chevallier pour la version mathjax-enabled
\documentclass{article}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{amsmath,amsfonts,amssymb}
\usepackage[francais]{babel}
\usepackage{times}
\usepackage{xspace}
\usepackage{makeidx}
\usepackage{ifpdf}
\ifpdf
 \usepackage[colorlinks,pdftex]{hyperref}
\else
 \usepackage[ps2pdf,breaklinks=true,colorlinks=true,linkcolor=red,citecolor=green]{hyperref}
\fi
\newcommand{\bs}{\symbol{92}}
\newtheorem{thm}{Th\'eor\`eme}
\newtheorem{prop}[thm]{Proposition}
\newtheorem{defn}[thm]{D\'efinition}
\makeindex
\bibliographystyle{plain}

% \renewcommand{\cuttingunit}{subsection} (add HEVEA after % for hacha)
\input{giacfr.tex}
\ifhevea
\(
\newcommand{\R}{{\mathbb{R}}}
\newcommand{\C}{{\mathbb{C}}}
\newcommand{\Z}{{\mathbb{Z}}}
\newcommand{\N}{{\mathbb{N}}}
\newcommand{\Q}{{\mathbb{Q}}}
\newcommand{\tr}{\mbox{tr\,}}
\)
\else
\newcommand{\R}{{\mathbb{R}}}
\newcommand{\C}{{\mathbb{C}}}
\newcommand{\Z}{{\mathbb{Z}}}
\newcommand{\N}{{\mathbb{N}}}
\newcommand{\Q}{{\mathbb{Q}}}
\newcommand{\tr}{\mbox{tr\,}}
\fi
%HEVEA\htmlfoot{Retour \`a la page principale de \ahref{http://www-fourier.ujf-grenoble.fr/\~parisse/giac_fr.html}{Giac/Xcas}.}
\giacmathjax
%HEVEA\renewcommand{\footertext}{}

\begin{document}
\title{Calcul formel et algorithmique interactifs}
\author{Bernard.Parisse@univ-grenoble-alpes.fr}
\date{2017}

\begin{giacjshere}

\maketitle

Avant un long discours, quelques exemples interactifs~: un trac\'e de graphe,
un tableau de variations, un programme en syntaxe Python.
\giaccmd{plot}{x^2+x-3}
\giaccmdmath{tabvar}{x^2+x-3}
\begin{giaconload}
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)]
\end{giaconload}
\giacinputmath{second_deg(1,1,1); second_deg(1,1,-1)}

\begin{abstract}
Il existe de plus en plus de documents math\'ematiques sur le web,
la plupart sont des documents PDF inertes, ce qui ne favorise
pas une lecture active. On pr\'esente
ici deux m\'ethodes pour permettre au lecteur
de modifier des calculs, des programmes, afficher un graphe 
et tester tout cela depuis son navigateur. 
La premi\`ere m\'ethode consiste \`a ajouter des liens vers
une feuille de calcul de Xcas pour Firefox et
est tr\`es simple \`a mettre en oeuvre pour l'auteur. 
La deuxi\`eme donne beaucoup plus de contr\^ole \`a
l'auteur, elle n\'ecessite de savoir
taper en \LaTeX. Plusieurs technologies sont utilis\'ees~:
\LaTeX, hevea\cite{hevea} (compilateur vers HTML5) ou \cite{heveamathjax}, 
itex2mml\cite{itex2mml}
(traducteur de formules vers MathML), le moteur de calcul formel 
Giac\cite{giac}
et le compilateur emscripten\cite{emscripten} (C vers javascript).
\end{abstract}

\tableofcontents

\printindex

\section{Introduction}
\LaTeX\ est devenu depuis plus de deux d\'ecennies
le standard de l'\'edition math\'ematique professionnelle papier.
Par contre, on trouve un peu de tout pour les maths sur le web~:
\begin{itemize}
\item dans
le monde de la recherche ce sont les documents PDF issus de \LaTeX\
qui dominent, la qualit\'e typographique est excellente, mais ces
documents ne sont pas interactifs et moins int\'egr\'es au navigateur
que des documents HTML. Des compilateurs de \LaTeX 
vers HTML existent, mais ils offrent en g\'en\'eral un rendu
nettement moins joli que PDF car ils ne proposent 
pas par d\'efaut une traduction en MathML.
\item dans le monde de l'enseignement, les auteurs
ne connaissent pas forc\'ement \LaTeX\, 
les documents sont de moins bonne qualit\'e
typographique (en PDF ou en HTML mais rarement avec du MathML),
ils ne sont en g\'en\'eral pas interactifs, ou alors ils n\'ecessitent
l'utilisation de logiciels propri\'etaires.
\end{itemize}
Il y a une raison au mauvais rendu math\'ematique de nombreuses 
pages HTML~:  il existe bien un standard
pour un rendu math\'ematique de qualit\'e, c'est MathML,
mais son support a \'et\'e abandonn\'e par Chrome et 
il n'a jamais \'et\'e impl\'ement\'e par Internet Explorer. 
Seuls Firefox et les navigateurs utilisant le m\^eme webkit
supportent un rendu natif de MathML, sur les autres navigateurs il faut
passer par une biblioth\`eque en javascript comme mathjax, ce qui
ralentit consid\'erablement l'affichage d\`es 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 \`a faire dialoguer le navigateur avec un serveur
sur lequel peut tourner un logiciel de calcul ou de programmation.
Ceci peut malheureusement n\'ecessiter des ressources importantes
cot\'e serveur, et cela n\'ecessite \`a tout moment un acc\`es r\'eseau.
La solution que nous proposons ici repose sur des calculs faits
enti\`erement en local par le navigateur. Le logiciel de calcul et
programmation doit donc \^etre \'ecrit en javascript, le langage
des navigateurs, ce qui est r\'ealis\'e 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 \'et\'e fait \`a l'origine pour r\'epondre \`a la demande
de Geogebra, cela sert maintenant \`a l'interface web de Xcas
(Xcas pour Firefox) et \'egalement
comme moteur de calcul et interpr\'eteur de pages interactives
cr\'ees \`a partir de \LaTeX\.
Depuis quelques semaines, il est possible d'utiliser
une syntaxe compatible avec le langage Python de base, ce qui
devrait int\'eresser les enseignants de lyc\'ee pour l'algorithmique
et pas uniquement pour le calcul formel.

Dans la section \ref{sec:xcasfirefox}, nous expliquons comment
un auteur peut publier une feuille de calcul ou un
programme, ceci ne n\'ecessite
aucune connaissance de \LaTeX\. La section \ref{sec:xcaslatex}
explique comment cr\'eer un document \LaTeX\ avec des champs de saisie
qui seront ex\'ecut\'es par le moteur de calcul, elle n\'ecessite
 de connaitre un peu \LaTeX\ (des environements d'\'edition comme
\verb|texmaker| permettent de s'initier \`a \LaTeX\ en une heure
environ).

\section{Xcas pour Firefox} \label{sec:xcasfirefox}
\footahref{https://www-fourier.ujf-grenoble.fr/\home{parisse}/xcasfr.html}{Xcas pour Firefox} est
une interface de Xcas en cours de d\'eveloppement,
utilisable depuis un navigateur compatible
avec Firefox, donc depuis des mat\'eriels tr\`es divers: PC bien sur,
mais aussi tablettes, voire smartphones (mais la taille d'\'ecran
d'un smartphone standard y rend l'usage un peu difficile). 
Il est conseill\'e d'utiliser Firefox, car les calculs
sont plus rapides avec ce navigateur, gr\^ace \`a la technologie asmjs
qui permet au navigateur de traduire en code natif certaines portions du code
javascript g\'en\'er\'e par le compilateur emscripten, le gain en vitesse
est souvent sup\'erieur \`a 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 \^etre un programme ou une commande graphique), 
qui une fois ex\'ecut\'ees
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\'egories \verb|math| et \verb|prog|.

On peut sauvegarder une feuille de calcul par l'interm\'ediaire des cookies
du navigateur et les retrouver plus tard. On peut \'egalement partager
une feuille de calcul par email en cliquant sur le lien email, le
destinataire clique sur le lien dans le mail re\c{c}u et retrouve
alors la feuille de calcul. On peut ainsi imaginer envoyer un d\'ebut
de programme ou une liste partielle de commandes de calcul formel
envoy\'e par un enseignant \`a ses \'el\`eves, et r\'eciproquement
un \'el\`eve peut renvoyer une feuille de calcul compl\'et\'ee pour
\'evaluation. L'enseignant peut aussi utiliser le bouton Clone pour
cr\'eer un lien ouvrant la feuille de calcul, 
lien qu'il peut ins\'erer dans une de ses pages personnelles.

\`A noter~: le menu math permet de cr\'eer un \verb|curseur|, ce qui
permet d'animer un graphique ou observer la d\'ependance d'un
r\'esultat en fonction d'un param\`etre.

\section{Documents interactifs calcul formel et/ou algorithmique avec \LaTeX\ }
\label{sec:xcaslatex}

\subsection{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\'eder par un lien \`a la table
des mati\`eres du document, \`a l'index. Il peut cloner une commande
ou un programme qu'il vient d'ex\'ecuter 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\'ecuter le calcul, Le bouton \verb|Restart| permet
de r\'einitialiser la session de calcul, le bouton \verb|Exec. tout|
ex\'ecute tous les calculs de la feuille, ce qui peut \^etre long.

Pour plus d'exemples, vous pouvez consulter le manuel
\footahref{https://www-fourier.ujf-grenoble.fr/\home{parisse}/algoseconde.html}{algorithmique lyc\'ee de Xcas}, mon cours de 2i\`eme ann\'ee de licence
\footahref{https://www-fourier.ujf-grenoble.fr/\home{parisse}/mat249/mat237.html}{Courbes param\'etr\'ees et \'equations diff\'erentielles pour
la physique}, ou le manuel \footahref{https://www-fourier.ujf-grenoble.fr/\home{parisse}/giac/doc/fr/algo.html}{Algorithmes de Xcas}

\subsection{Consignes au r\'edacteur}
\subsection{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\`ere version d'hevea, installer hevea2mml et 
quelques fichiers suppl\'ementaires, ce qui se fait depuis un Terminal
par les commandes suivantes~:
\begin{verbatim}
#! /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 ../..
\end{verbatim}

\subsection{R\'ediger un document interactif}
Ajoutez dans l'en-t\^ete du document \LaTeX\ 
(avant \verb|\begin{document}|)~:
\begin{verbatim}
\input{giacfr.tex}
\giacmathjax
\end{verbatim}
Ajoutez juste apr\`es \verb|\begin{document}| l'une des commandes~:\\
\verb|\begin{giacjs}|\\
\verb|\begin{giacjshere}|\\
En fin de document, juste avant \verb|\end{document}|, ajoutez
\verb|\end{giacjs}| ou \verb|\end{giacjshere}|.

Avant toute \verb|\section|, ins\'erez les commandes\\
\verb|\tableofcontents|\\
\verb|\printindex|\\
pour que les boutons \verb|Table| et \verb|Index| du tableau de bord
de la page HTML correspondent bien \`a la table des mati\`eres et \`a
l'index.

Le reste du fichier est du \LaTeX\ standard, mais il faut prendre quelques
pr\'ecautions~:
\begin{itemize}
\item Les r\'ef\'erences \`a des \'equations num\'erot\'ees doivent
\^etre plac\'ees entre des parenth\`eses pr\'ec\'ed\'ees par
des backslash, par exemple
\ifhevea
\begin{rawhtml}
\begin{verbatim}
\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 (\(\ref{eq_test}\)) ...
\end{verbatim}
\end{rawhtml}
\else
\begin{verbatim}
\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 (\(\ref{eq:test}\)) ...
\end{verbatim}
\fi
\begin{equation} \label{eq:test}
 \frac{2}{x^2-1}=\frac{1}{x-1}-\frac{1}{x+1} 
\end{equation}
D'apr\`es equation (\(\ref{eq:test}\)) ...
\item \verb|\mathbb{}| doit \^etre explicite, une commande comme
\verb|\R| o\`u \verb|\R| est d\'efini par
\verb|\newcommand{\R}{\mathbb{R}}| ne fonctionnera pas.
\end{itemize}
Vous disposez de plusieurs commandes \LaTeX\ pour g\'en\'erer
des lignes de commandes interactives ou des programmes.
\begin{itemize}
\item 
\verb|\giacinputmath{commandline}|\index{giacinputmath} 
g\'en\`ere une 
\verb|ligne de commande| en ligne
que l'utilisateur peut modifier et ex\'ecuter, l'affichage de la r\'eponse
se fait en MathML (ou SVG pour les graphes 2-d).\\
Exemple~: \verb|\giacinputmath{factor(x^10-1)}|\\
\giacinputmath{factor(x^10-1)}\\
{\bf Attention}, si votre commande contient \verb|<| ou \verb|>|, vous
devez les remplacer par \verb|&lt;| ou \verb|&gt;|, 
autrement ils seront interpr\'et\'es comme des d\'elimiteurs HTML.
Vous pouvez aussi utiliser les environnements
\verb|giacprog| et \verb|giaconload| expliqu\'es ci-dessous.\\
Si la sortie est un graphe 2-d, ne sautez pas de ligne avec
\verb|\\| apr\`es la commande, sinon la compilation en
PDF provoquera des erreurs.
\item
\verb|\giaccmdmath{command}{arguments}|\index{giaccmdmath} 
va afficher \verb|command| dans un bouton apr\`es une
ligne de commande contenant \verb|arguments|, 
le lecteur pourra modifier les arguments mais pas la commande:\\
\verb|\giaccmdmath{factor}{x^4-1}|\index{giaccmdmath}\\
\giaccmdmath{factor}{x^4-1}\\
\item 
Ces commandes peuvnet prendre un argument de style HTML style optionnel, par exemple\\
\verb|\giacinputmath[style="width:200px;"]{factor(x^10-1)}|\\
\giacinputmath[style="width:200px;"]{factor(x^10-1)}\\
\verb|\giaccmdmath[style="font-size:x-large"]{factor}{x^4-1}|\\
\giaccmdmath[style="font-size:x-large"]{factor}{x^4-1}\\
\item
Il y a des commandes similaires pour une sortie hors-ligne
\verb|\giacinputbigmath{}|\index{giacinputbigmath} 
ou \verb|\giaccmdbigmath{}{}|\index{giaccmdbigmath}:\\
Par exemple \verb|\giacinputbigmath{factor(x^25-1)}|\\
\giacinputbigmath{factor(x^25-1)}\\
Exemple avec un argument de style optionnel\\
\verb|\giacinputbigmath[style="width:600px;height:20px;"]{factor(x^25-1)}|\\
\giacinputbigmath[style="width:600px;height:20px;"]{factor(x^25-1)}\\
\verb|\giaccmdbigmath{factor}{x^25-1}|\index{giaccmdbigmath}\\
\giaccmdbigmath{factor}{x^25-1}\\
\verb|\giaccmdbigmath[style="width:600px;height:20px;"]{factor}{x^25-1}|\\
\giaccmdbigmath[style="width:600px;height:20px;"]{factor}{x^25-1}
\item Des commandes similaires avec une sortie texte (ou graphique)
\verb|\giacinput|\index{giacinput} and \verb|\giacinputbig|\index{giacinputbig} et
\verb|\giaccmd|\index{giaccmd}, 
exemple:\\
\verb|\giacinput{factor(x^4-1)}|\index{giacinput}~:\\
\giacinput{factor(x^4-1)}\\
\verb|\giaccmd{print}{"Hello world"}|\index{giaccmd}~:\\
\giaccmd{print}{"Hello world"}\\
Avec argument de style optionnel\\
\verb|\giacinput[style="font-size:x-large"]{plot(1/x)}|\\
\giacinput[style="font-size:x-large"]{plot(1/x)}
\verb|\giaccmd[style="font-size:x-large"]{factor}{x^4-1}|\\
\giaccmd[style="font-size:x-large"]{factor}{x^4-1}\\

\item
L'environement \verb|giacprog|\index{giacprog} sert pour des programmes
ou des commandes sur plusieurs lignes\\
\verb|\begin{giacprog}...\end{giacprog}|\\
Dans cet environement, on peut utiliser \verb|<| et \verb|>|. 
Le programme sera interpr\'et\'e lorsque l'utilisateur pressera
le bouton \verb|ok|. Ensuite, on peut modifier le programme et 
l'interpr\'eter \`a nouveau.\\
{\bf Attention}: 
Il ne faut pas utiliser \verb|giacprog| 
dans un autre environement (comme itemize ou
enumerate).\\
Si on veut que le programme soit interpr\'et\'e au chargement
de la pgae HTML, il faut remplacer
\verb|giacprog| par \verb|giaconload|\index{giaconload}:\\
\verb|\begin{giaconload}...\end{giaconload}|
\item
La commande \verb|\giacslider{idname}{min}{max}{step}{valeur}{commande}| 
permet d'ajouter un curseur.
Lorsque le lecteur modifie le curseur, la nouvelle
\verb|valeur| est stock\'ee dans \verb|idname| et \verb|commande| 
(qui d\'epend en principe de \verb|idname|)
est ex\'ecut\'ee. Exemple:\\ 
\verb|\giacslider{a}{-5}{5}{0.1}{0.5}{plot(sin(a*x))}|\index{giacslider}\\
\giacslider{a}{-5}{5}{0.1}{0.5}{plot(sin(a*x))}

\item
La commande \verb|\giachidden|\index{giachidden} se comporte comme
\verb|\giaccmd| mais le style HTML5 par d\'efaut est ``hidden''
jusqu'\`a ce que le bouton soit press\'e.

\item
La commande \verb|\giaclink|\index{giaclink} ajoute
un lien (dans la version HTML5, si on compile vers PDF/DVI rien
n'est affich\'e). Ce lien ouvre un nouvel onglet.
On peut indiquer en argument optionnel le texte du lien (par
d\'efaut c'est Tester en ligne).
Notez que \verb|hevea.sty| propose des commandes similaires
(\verb|\ahref|, \verb|\footahref|, \verb|\ahrefurl|) 
avec un affichage en PDF/DVI.\\
Exemple avec un lien vers Xcas pour Firefox contenant quelques calculs\\
\verb|\giaclink{http://www-fourier.ujf-grenoble.fr/\%7eparisse/xcasfr.html#+factor(x^4-1)&+a:=idn(3)&}|\\
\giaclink{http://www-fourier.ujf-grenoble.fr/\%7eparisse/xcasfr.html#+factor(x^4-1)&+a:=idn(3)&}
\end{itemize}

Vous pouvez vous inspirer des textes sources de documents HTML5 interactifs,
par exemple
\footahref{https://www-fourier.ujf-grenoble.fr/\home{parisse}/giac/tice.tex}{ce source} ou
\footahref{https://www-fourier.ujf-grenoble.fr/\home{parisse}/mat249/mat237.tex}{le cours sur les courbes et \'equations diff\'erentielles}.


\subsection{Compilation}
Pour cr\'eer un fichier HTML5+MathML, tapez la commande\\
\verb|hevea2mml nom_fichier.tex|\\
cela devrait g\'en\'erer \verb|nom_fichier.html| que vous pouvez tester
en tapant la commande \verb|firefox nom_fichier.html &|.

\subsection{Publication}
Si le test est concluant, il vous suffit de recopier le fichier HTML 
sur votre espace web personnel. Si
vous avez utilis\'e \verb|\begin{giacjshere}|, vous
devrez aussi mettre dans le m\^eme r\'epertoire le fichier \verb|giac.js|.

\section{D\'eveloppements futurs}
Quelqu'un connaissant Javascript et \LaTeX\ peut sans doute exploiter
bien mieux les possibilit\'es d'interaction, par exemple
permettre la cr\'eation de questionnaires avec auto-correction
ou correction automatique.

On peut surement cr\'eer d'autres commandes et environnements,
am\'eliorer la calculatrice, etc.

\bibliography{latex.bib}

\end{giacjshere}
\end{document}


%%% Local Variables: 
%%% mode: latex
%%% TeX-master: t
%%% End: 
