Outils JavaScript pour les Maths

[projetmbc]

Dernière mise à jour : Mercredi 26 Juin 2014

Bonjour,
ce post liste quelques outils JavaScript Open Source et gratuit pouvant être utiles aux webmasters matheux. Ne se trouvent ici que des solutions fonctionnant a priori sur la majorité des navigateurs.

Formules mathématiques

• MathJax, qui a été présenté dans ce forum par francky, permet en utilisant la syntaxe LaTeX d'obtenir des formules avec un bon rendu : des exemples ici.
• MathQuill, qui a été cité dans ce post par pit2k6, permet de taper en mode WYSIWYG des formules mathématiques.
• LissaJS est un parseur de formules utilisant une syntaxe proche de celle d'une calculatrice. On peut avoir un arbre représentant la formule pour un usage côté programmeur, ansi que le code $\LaTeX$ d'une formule pour un affichage via MathJax par exemple.
  
  Il y avait aussi JavaScript Expression Evaluator mais ce projet semble ne plus évoluer...

Graphiques

• JSXGraph permet de créer très facilement des graphiques 2D et des dessins géométriques 2D : des exemples ici dont celui-ci et celui-là qui sont instructifs. On peut, mais cela demande un peu de travail, tracer des arbres de probabilité. Ce projet est conduit par une équipe de l'université de Bayreuth, université qui propose aussi GeoNext. On peut utiliser ce script conjointement à un applet Java.
  
  • On peut utiliser ce javascript avec MathJax : voir ici.
  • Les fichiers GeoGebra ou GeoNext sont importables dans un graphique de type JSXGraph : voir ceci.
  • Pour ceux qui connaissent jQuery, il y a un exemple intéressant ici.

Calcul formel

• Du Xcas en Javascript ? Et bien oui c'est possible. SmartCAS est un exemple de mise en oeuvre de ce script

Utilitaires pédagogiques

• Côté algorithmique, il y a cet éditeur de code JavaScript en ligne. La page HTML contient tout le code JavaScript utilisé en coulisse. Remarque : sur cette page, vous trouverez un outil très complet pour tester des codes JavaScript, mais n'est pas en lien direct avec ce que l'on peut attendre pour le Lycée.
• Grâce au parseur de formules JavaScript Expression Evaluator, voir ci-dessus, on peut proposer des exercices où on attend que l'élève tape une formule.
• MathQuill renvoie quant à lui un code LaTeX de ce qui a été tapé de façon relativement naturelle : voir cette page de démonstration. Ceci peut permettre par exemple de proposer un outil de prise en main des formules LaTeX par des débutants.

N'hésitez pas à nourrir ce post en évitant toute référence au JavaScript Super Troll même si ce programme est assez efficace.

[Francky]

Même si c'est moi qui ait relayé l'info sur l'arrivée de MathJax (que tu as l'air d'apprécié),
je confesse que je ne connais rien de rien en HTML, mais que ça pourrait me brancher, grâce à MathJax.

J'ai différentes questions/remarques de débutant total, j'espère que ça va pas pourrir ton fil, au contraire.

1) Le rendu des fontes maths (dans le premier exemple) est matriciel chez moi, est-ce bientôt en vectoriel ?

2) J'ai noté une amélioration récente pour le symbole des radicaux (avant, le v était pendu haut et court )

3) J'imagine qu'il doit y avoir une évolution importante encore à attendre. Des idées d'exemples ?

----

4) En admettant que je souhaite apprendre ce truc (j'ai déjà cherché des tutos, mais c'est tellement vaste que j'ai rien trouvé, ou rien compris en fait !!!)
que conseiller à un gars comme moi ?
Pré-requis : Initié à LaTeX, Python (juste les bases, mais bien initié à l'algo), zéro en html.
Objectif : faire directement du html5 avec les bidules javascript (je dis bidule, car c'est pas clair pour moi)
On commence par quoi ?

[projetmbc]

Bonjour.

Même si c'est moi qui ait relayé l'info sur l'arrivée de MathJax (que tu as l'air d'apprécié)

J'ai écrit le 1er post vite fait hier soir. Je vais indiquer ma source, cela fait partie de mes habitudes. Au passage, je t'ai cité dans mon document sur les lettres et les sciences.

je confesse que je ne connais rien de rien en HTML, mais que ça pourrait me brancher, grâce à MathJax.

Avant l'existence de bibliothèques telles que celles citées ci-dessus et aussi telles que jQuery, je ne m'intéressais pas trop au JavaScript car suivant le navigateur utilisé il y avait toujours des soucis. Maintenant c'est plus simple car ces soucis sont laissés à la charge de la bibliothèque.

Un avantage non négligeable du JS par rapport au PhP est la possibilité de proposer un site utilisable localement sans connexion internet. Ceci permet alors d'imaginer des applications multi-plateforme de type logiciel sans pour autant être un programmeur averti.

J'ai différentes questions/remarques de débutant total, j'espère que ça va pas pourrir ton fil, au contraire.

Va juste falloir que je te donne mes honoraires. ;-)

Le rendu des fontes maths (dans le premier exemple) est matriciel chez moi, est-ce bientôt en vectoriel ?

Je n'y avais pas fait gaffe. En plus, je me suis trompé de page, je vais rectifier ceci.

Il est possible, via JS, de modifier la taille de la fonte. Ceci étant, je reste très satisfait du rendu. Sinon pour du vectoriel pur, dans un document HTML acceptant du SVG devrait faire l'affaire grâce à MathML mais je n'avoue ne pas avoir encore essayé.

Sinon il y a des choses comme ASCIIMathML que je n'ai pas mis car si mes souvenirs sont bons il rentre en conflit avec les applets Java s'il y en a dans la page HTML. Il y a aussi M2W.

J'imagine qu'il doit y avoir une évolution importante encore à attendre. Des idées d'exemples ?

Je leur ai proposé la possibilité après avoir sélectionné du texte HTML contenant plusieurs formules de pouvoir obtenir un copier du type LaTeX. Pour le moment chaque formule doit être copiée une à une... Un peu pénible.

Par contre, il ne faudrait pas avoir des évolutions "stupides" de mon point de vue du type tableau de valeurs, de signe ou de variations. Ce serait un non sens car le HTML propose des tableaux donc autant les utiliser.

En admettant que je souhaite apprendre ce truc (j'ai déjà cherché des tutos, mais c'est tellement vaste que j'ai rien trouvé, ou rien compris en fait !!!) que conseiller à un gars comme moi ?
Pré-requis : Initié à LaTeX, Python (juste les bases, mais bien initié à l'algo), zéro en html.

De quel truc parles-tu ? Pour MathJax, c'est on ne peut plus simple à utiliser :

Code : Tout sélectionner

<html>
        <head>
                <script type="text/javascript" src="http://www.mathjax.org/mathjax/MathJax.js"></script>
        </head>
        <body>
                <div>
                        Un exemple \(a \ne 0\), ou un autre \(\frac{4}{7}\).
                </div>
        </body>
</html>

Après si tu veux ajouter des commandes, il faudra faire quelque chose comme suit, cette méthode simple est mauvaise si JS n'est pas activé (en fait, on peut faire autrement) :

Code : Tout sélectionner

<html>
        <head>
                <script type="text/javascript" src="http://www.mathjax.org/mathjax/MathJax.js"></script>
        </head>
        <body>
\( \newcommand{\field}[1]{\mathbb{#1}} \)
\( \newcommand{\N}{\field{N}} \)
                <div>
                        Nous avons : \(a \in \N \).
                </div>
        </body>
</html>

Objectif : faire directement du html5 avec les bidules javascript (je dis bidule, car c'est pas clair pour moi)
On commence par quoi ?

Des exemples de ce que permet HTML5 : l'idée est de pouvoir interagir avec les applications ou le bureau de l'utilisateur de façon sécurisée. Donc partout où JS est lent ou mauvais, on pourra déléguer des tâches non dangereuses aux applications de l'utilisateur.

J'ai essayé de faire court... :-)

[Francky]

Je connais RIEN au html, donc j'ai rien compris. On commence par quoi ?
Je n'ai pas trouvé de bon tuto html (directement en 5 ?????)

[projetmbc]

Le HTML5 reste du HTML si on se contente de la mise en forme. Pour ce qui est propre au HTML5, il n'y en a pas besoin pour ce qui est proposé ci-dessus.

Tu peux commencer par lire ceci. Tu peux aussi utiliser KompoZer, et voir ensuite le code HTML qui est produit, c'est un moyen rapide d'apprendre.

Mieux encore, ce serait d'aller sur un forum comme celui-là.

[projetmbc]

Après si tu veux ajouter des commandes, il faudra faire quelque chose comme suit, cette méthode simple est mauvaise si JS n'est pas activé (en fait, on peut faire autrement) :

Code : Tout sélectionner

<html>
        <head>
                <script type="text/javascript" src="http://www.mathjax.org/mathjax/MathJax.js"></script>
        </head>
        <body>
\( \newcommand{\field}[1]{\mathbb{#1}} \)
\( \newcommand{\N}{\field{N}} \)
                <div>
                        Nous avons : \(a \in \N \).
                </div>
        </body>
</html>

Pour info, pour faire plus propre, il faut faire ceci :

Code : Tout sélectionner

<html>
        <head>
                <script type="text/javascript" src="http://www.mathjax.org/mathjax/MathJax.js"></script>
                <script>
MathJax.Hub.Config({
  TeX: {
    Macros: {
      N: '{\\mathbb N}',
    }
  }
});
                </script>
        </head>
        <body>
                <div>
                        Nous avons : \(a \in \N \).
                </div>
        </body>
</html>

[Arnaud]

J'ai testé rapidement mathjax, bien que je n'en ait pas l'utilité.
Ce test s'est directement stoppé avec le problème des fonts sous firefox en local malgré la dernière version ( je ne mets ni la faute à mathjax, ni à firefox ).
Le résultat est alors pas très beau, autant utiliser du mathml.

Francky, tu n'es pas forcément obligé d'apprendre le html, tu peux aussi utiliser un cms comme joomla, spip ou typo3 par exemple pour publier.
Avec le succès récent de mathjax, nul doute que des plugins verront rapidement le jour.

[projetmbc]

Bonsoir.

J'ai testé rapidement mathjax, bien que je n'en ait pas l'utilité.
Ce test s'est directement stoppé avec le problème des fonts sous firefox en local malgré la dernière version ( je ne mets ni la faute à mathjax, ni à firefox ).
Le résultat est alors pas très beau, autant utiliser du mathml.

Tu es sous quel OS. J'ai testé avec Firefox sous Ubuntu, Mac et Windows 7 sans souci. Sinon il est vrai que les problèmes des navigateurs, c'est la plaie du JavaScript. Ne pas oublier que MathJax reste un projet jeune.

Pour ce qui est du MathML, c'est assez moche, non ?

...tu peux aussi utiliser un cms comme joomla, spip ou typo3 par exemple pour publier.
Avec le succès récent de mathjax, nul doute que des plugins verront rapidement le jour.

Effectivement c'est plus simple. Voir ceci pour les plug-ins qui existent actuellement.

[Arnaud]

Iceweasel sous debian sid.
Sous chrome ça passe.

Pour ce qui est du MathML, c'est assez moche, non ?

Oui, c'est pour cela que j'utilise directement latex.

Je reste cependant optimiste pour mathjax, faut attendre de voir les évolutions.

[Arnaud]

Effectivement c'est plus simple. Voir ceci pour les plug-ins qui existent actuellement.

J'avais déjà vu, mais ce n'est pas directement ce que j'appelle des plugins, c'est juste une description de l'implémentation de mathjax.
Par exemple dans joomla, ce serait pratique de pouvoir mettre directement une formule via :

Code : Tout sélectionner

$formule$

plutôt que de devoir l'insérer directement dans le code html.

Ce n'est pas compliqué à faire, mais cela me parait nécessaire pour les débutants ( et il y en a beaucoup ... )

[projetmbc]

Ok, je n'avais pas pensé à cela.

Ceci étant, quelqu'un qui tape du LaTeX ne devrait pas non plus être dérouté pour taper du HTML (bien entendu cela se complique un petit peu s'il faut utiliser des feuilles CSS).

[projetmbc]

Bonjour,
je viens de tester, avec la version Beta de FireFox sous Mac, la 3D via OpenGL. Le rendu de l'exemple du billard est bluffant ! Ceci est du HTML5 en ce sens que le navigateur utilise OpenGL présent sur l'ordinateur où la page est ouverte.

Ceci reste pour le moment "expérimental" donc je mets juste l'info pour les curieux. Dès que cela sera utilisable sur les principaux navigateurs, je mettrais un exemple mathématique ici.

Cela est de bonne augure pour afficher et créer des objets 3D dans une page Web. Affaire à suivre...

[Yacine]

jsMath est aussi une excellente alternative. Facile à implémenter.
J'ai fait un tutoriel de prise en main pour ceux que ça intéresse.
http://blog.kerkouche.net/article9/late ... vec-jsmath

[projetmbc]

Merci pour ce lien même si j'ai une grosse préférence pour MathJax que je trouve plus abouti.

Dans le post initial, j'ai ajouté Xcas en Javascript. A tester !

[pit2k6]

Dans le post initial, j'ai ajouté Xcas en Javascript. A tester !

Bonjour,
Je développe actuellement une interface HTML5/javascript alliant giac/xcas pour la partie calcul formel et mathquill pour la saisie et l'affichage des expressions.
Pour les intéressés, vous trouverez une première version à l'adresse http://www.calcenstock.fr/smartcas.html
Mon but est d'avoir une interface agréable et intuitive utilisable sur support mobile notamment.

Cordialement,
N. PUJOL

[projetmbc]

Bonjour.

Intéressant tout ceci.

[guiguiche]

C'est plutôt pas mal.

[projetmbc]

Une petite mise à jour a été faite.

[pit2k6]

Bonjour,
Juste pour signaler que mon projet SmartCAS se poursuit avec pas mal d'ajouts.
Il est aussi maintenant possible d'enregistrer sa session en cours pour pouvoir la reprendre ultérieurement.

N'hésitez toujours pas à me remonter vos remarques, notamment s'il y en a qui teste SmartCAS sur Ipad.

Voilà, je continue à bosser !
N. PUJOL

[projetmbc]

Petite mis à jour pour ajouter LissaJS un parseur de formules produisant un arbre représentant la formule pour un usage côté programmeur, mais aussi un code $\LaTeX$ d'une formule pour un affichage.