--> Tutoriel pour Mathpad Présentation Mathpad Doc est une application permettant de créer des pages web à vocation scientifique. Elle est distribuée sous licence GNU GPL et a été pensée de telle sorte qu'il n'est pas nécessaire d'avoir des connaissances en programmation web pour réussir à des créer des pages.
Le principe est de saisir le contenu dans la partie gauche de la page et le résultat s'affiche dans la partie droite de manière automatique dès que l'on tape sur le clavier. Certaines actions importeront du code dans la partie gauche, et pour voir le résultat il faudra alors soit recommencer à saisir du contenu soit utiliser le raccourci Ctrl+Espace. Formules mathématiques Pour saisir des formules mathématiques, il suffit de les écrires entre deux symboles $ comme en LaTeX. La librairie Javascript utilisée pour affichées ces formules est KaTeX et a été préférée à MathJax de par sa rapidité. $$\int_0^{\sqrt{3}}\dfrac{x}{\sqrt{(1+x^2)^3}}\text{d}x=\dfrac{1}{2}.$$ Exemple de formule affichée par la librairie KaTeX Les onglets du menu Fichier Les options sont ici classiques : nouveau, sauver, ouvrir.
Les fichiers sont enregistrés au format html et la sauvegarde se fait selon la méthode du navigateur web utilisé. Le fichier sauvé se retrouve généralement dans le répertoire « Téléchargement » du PC et des parenthèses (1) ou (2) etc. peuvent être ajoutées à la fin du nom du fichier, au fur et à mesure des sauvegardes. Texte Cet onglet regroupe plusieurs raccourcis concernant l'affichage du texte.

, et permettent d'écrire le texte à la couleur choisie.
Pour écrire du texte en rouge il suffit de l'écrire entre les balises <rouge> et </rouge> qui apparaissent lorsqu'on clique sur l'icone correspondante.
, et permettent respectivement d'écrire en gras, italique ou au centre.
permet d'ajouter un retour à la ligne.
permet d'encadrer du texte en rouge.
permet d'ajouter un espace horizitale au sein d'un texte. En modifiant la valeur 1 qui est inscrite entre les deux balises on change le nombre d'espaces voulus. Par exemple <esp>5</esp> affichera 5 espaces horizontaux.
permet d'afficher les symboles correspondant.
permet lorsqu'on affiche le fichier html et qu'on souhaite l'imprimer dans un fichier au format pdf d'effectuer un saut de page.
permet de centrer certains éléments de la page, lorsque ne donne pas le rendu souhaité.
Ce raccourci est surtout utile pour centrer un bloc important de formules mathématiques, notamment ceux obtenu dans l'onglet « Maths », sous-onglet « ar.html ».

Structures

« Cadre » permet d'afficher une zone de texte avec un fond coloré.
« Titre » permet d'afficher une zone de texte centrée avec un fond coloré et une police de caractère plus importante.
« Exemple », « Exercice », « Propriété » et « Définition », affiche des cadres numérotés correspondants aux différentes parties souhaitée.
« Remarque » permet de numéroter des remarques au sein du texte.
« Paragraphe » et « Subparagraphe » permettent d'avoir des paragraphes et sous-paragraphes qui se numérotent automatiquement.
« Slide » permet d'obtenir des pages à la façon d'une présentation où s'enchaîne les slides. Pour passer d'un slide à l'autre, il suffit de cliquer dans le coin supérieur gauche ou droite pour avancer ou reculer dans la présentation.
« Pause » permet de créer des trous dans le texte, trous qui se compléteront au fur et à mesure en cliquant dans le coin inférieur gauche ou droite de la page pour afficher ou retirer le contenu.
Ce raccourcis permet donc de faire des cours à trous.
« Menu 1-2-3 » et « Menu a-b-c » permet d'afficher des menus numérotés soit à l'aide de chiffres, soit à l'aide de lettres. Chacune des entrées de ce menu devant être saisie à l'intérieur du code obtenu en cliquant sur « Item de Menu ».
« Légende » permet d'écrire un texte en gris, italique et centré.
« Zone grise » permet d'écrire un texte avec un fond coloré en gris.
« ROC » permet d'afficher un logo ROC.
« Correction » affiche une zone de correction qui ne s'affiche que si on clique dessus.

Code

« Tableur » affiche un tableur interactif dans la page.
Pour que des cellules ou formules soient préremplies il suffit de décommenter le code qui est apparu.
Pour plus d'information, consulter la page https://github.com/marzsocks/ipgrid.
« Algo » permet d'afficher une zone de code exécutable, où le résultat s'affiche juste au-dessous.
Le langage utilisé est dérivé de Javascript et peut se tester ici.
La hauteur ou la largeur de la zone de code peut être ajustée en saisissant des paramètres de la sorte (l'unité étant le pixel) :
<algo hauteur="200" largeur="400">
</algo>
« Algo Graph » permet d'afficher une zone de code exécutable, où le résultat qui fournit un graphique s'affiche juste au-dessous.
Le langage utilisé est dérivé de Javascript et peut se tester ici.
On peut créer des graphiques autant en 2d qu'en 3d et les mots clés du langage sont expliqués dans le lien précédent.
La hauteur ou la largeur de la zone de code peut être ajustée en saisissant des paramètres de la sorte (l'unité étant le pixel) :
<algoGraphe hauteur="200" largeur="400">
</algoGraphe>
Pour que seul le graphique soit visible, et non le code, on ajoute le suffixe Inv dans les balises comme suit :
<algoGrapheInv>
</algoGrapheInv>
« Zone code html » permet d'afficher un éditeur de code html où le résultat de la page crée est affichée juste au-dessous.
Le code saisi entre les balises <css> et </css> permet de compléter la partie style du code et entre <page> et </page> la partie body.
« Zone code Python » permet d'afficher un code python exécutable dans la page.
Un souci cependant avec les divisions. L'opérateur de division classique / lorsqu'il est utilisé avec des entiers retourne le reste dans la division euclidienne et non pas le résultat de la division décimale. Une façon de résoudre ce problème est de définir les variables en ajoutant .0 à la fin.
Par exemple, pour que 3/2 donne 1.5 il faut saisir 3.0/2.
La hauteur ou la largeur de la zone de code peut être ajustée en saisissant des paramètres de la sorte (l'unité étant le pixel) :
<python hauteur="200" largeur="400">
</python>
Pour changer le thème sombre de la zone code en thème clair, on ajoute le paramètre suivant : <python theme="neat">
</python>
« Code Python » permet d'afficher du code Python avec coloration syntaxique mais sans qu'il soit exécutable.
La hauteur ou la largeur de la zone de code peut être ajustée en saisissant des paramètres de la sorte (l'unité étant le pixel) :
<python hauteur="200" largeur="400">
</python>
Pour changer le thème sombre de la zone code en thème clair, on ajoute le paramètre suivant : <python theme="neat">
</python>
« Entêtes Pygame » permet d'afficher le code de la partie head de la page web qu'il faut insérer (et/ou modifier) pour pouvoir exécuter du code Pygame dans une zone de code Python.
Pour plus d'information on pourra suivre le tutoriel ici

Maths Tous les raccourcis, sauf « ar.html », de cet onglet permette d'afficher des formules LaTeX.
« ar.html » crée un tableau html permettant de fluidifier l'affichage des gros blocs d'équations ou autre de LaTeX. Outils

▦ permet d'ouvrir un créateur de tableau. Le code généré est à copier et à coller dans la page.
↗↘ fournit un ensemble d'exemples de codes (à copier/coller) de tableaux de signes et de variations.
« SVG » fournit un ensembles d'exemples de codes (à copier/coller) de figures obtenues avec le langage SVG.
« JSX Graph » fournit un ensembles d'exemples de codes (à copier/coller) de figures obtenues avec la librairie JSXGraph.
« PST -> JSX » est un utilitaire qui transforme du code PSTricks obtenu à partir du logiciel Geogebra pour le convertir en code JSXGraph.
« ✐ » permet de créer un dessin et ensuite de l'insérer au sein de la page à l'aide du bouton « Coller ».
« ✐ -> JSX » permet de créer une figure dans un repère du plan et la convertir en code JSX que l'on insère dans la page à l'aide du bouton « Coller ».
« Insérer une image » permet de sélectionner une image locale et de l'afficher dans la page.