MathemaTeX.net

[projetmbc]

Dernière mise à jour : Mercredi 17 Avril 2013
Bonjour,
j'ouvre ce post pour lister des outils en JavaScript pouvant être utiles aux Maths. 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 assez bon rendu : des exemples ici. On peut utiliser ce script conjointement à un applet Java.
  
  
• JavaScript Expression Evaluator est un parseur de formules utilisant une syntaxe proche de celle d'une calculatrice.
  Ce projet est en train de bien évoluer : un support pour une sortie LaTeX est prévue, sortie qui pourra être ensuite mise en forme par MathJax.

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.

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.

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/latex-au-sein-d-une-page-html-avec-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 !