Tutoriel pour la création de documents scientifiques à l'aide de sarmate.net
Création de votre premier document
Après vous être créé un compte et connecté, il vous suffit d'accéder à votre espace pour pouvoir créer un document.
Choisissez le type de document à créer, par exemple un fichier html comme dans la capture d'écran précédente, et donnez un nom à votre fichier, sans ajouter d'extension à la fin.
Cliquez alors sur Créer. Votre fichier apparaît dans la liste en dessous.
Choisissez le type de document à créer, par exemple un fichier html comme dans la capture d'écran précédente, et donnez un nom à votre fichier, sans ajouter d'extension à la fin.
Cliquez alors sur Créer. Votre fichier apparaît dans la liste en dessous.
Un premier exemple
Après avoir créé un premier document html, vous allez pouvoir écrire à l'intérieur en cliquant sur l'icone ⁝ et en choisissant l'option Modifier.
L'éditeur de document mathPad s'ouvre alors et on découvre dans la partie gauche le code de la page html. Dans la partie droite sera présenté l'affichage de cette page.
Même si vous ne connaissez rien à programmation web, nous allons pouvoir tout de même créer notre premier document. Tout va se passer à partir de la ligne 56 de la partie gauche de l'écran.
Cliquez donc sur la ligne 56 ou 57, puis dans le menu Structure cliquez sur Titre. Les balises <titre></titre> sont apparues dans le code. Il suffit d'écrire le titre que vous souhaitez entre elles.
Pour voir le résultat dans la partie droite, il vous suffit de cliquer sur ▶ tout à droite du menu ou alors d'appuyer simultanément sur les touches CTRL et ESPACE.
Il est alors possible d'ajouter des paragraphes, sous-paragraphes ou tout autre partie souhaitée, à partir du menu Structures et d'écrire entre les balises qui apparaissent. La numérotation des éléments est automatique
que ce soit pour les paragraphes ou pour les exemples, définitions etc.
Le menu Texte permet d'intervenir sur certaines caractéristiques du texte dans le document, toujours à l'aide d'un système de balises. Par exemple, le code <bleu>une partie écrite en bleu</bleu> nous fournit le résultat suivant :
Une autre instruction importante et celle présente dans le menu texte sous le symbole ↲ et qui permet d'effectuer un retour à la ligne. La balise qui apparaît est <br /> et peut être obtenue à l'aide
de l'appui simultané des touches CTRL et B.
Pour sauvegarder votre document sur votre espace personnel il vous suffit de cliquer dans le menu Fichier sur Sauver (cloud) ou d'appuyer simultanément sur CTRL+S.
En cliquant sur Sauver (PC) cela vous permet d'obtenir une version locale de votre fichier mais ce n'est pas obligatoire pour que celui-ci soit sauvegardé sur votre compte sarmate.net.
L'éditeur de document mathPad s'ouvre alors et on découvre dans la partie gauche le code de la page html. Dans la partie droite sera présenté l'affichage de cette page.
Même si vous ne connaissez rien à programmation web, nous allons pouvoir tout de même créer notre premier document. Tout va se passer à partir de la ligne 56 de la partie gauche de l'écran.
Cliquez donc sur la ligne 56 ou 57, puis dans le menu Structure cliquez sur Titre. Les balises <titre></titre> sont apparues dans le code. Il suffit d'écrire le titre que vous souhaitez entre elles.
Pour voir le résultat dans la partie droite, il vous suffit de cliquer sur ▶ tout à droite du menu ou alors d'appuyer simultanément sur les touches CTRL et ESPACE.
Il est alors possible d'ajouter des paragraphes, sous-paragraphes ou tout autre partie souhaitée, à partir du menu Structures et d'écrire entre les balises qui apparaissent. La numérotation des éléments est automatique
que ce soit pour les paragraphes ou pour les exemples, définitions etc.
Le menu Texte permet d'intervenir sur certaines caractéristiques du texte dans le document, toujours à l'aide d'un système de balises. Par exemple, le code <bleu>une partie écrite en bleu</bleu> nous fournit le résultat suivant :
Une autre instruction importante et celle présente dans le menu texte sous le symbole ↲ et qui permet d'effectuer un retour à la ligne. La balise qui apparaît est <br /> et peut être obtenue à l'aide
de l'appui simultané des touches CTRL et B.
Pour sauvegarder votre document sur votre espace personnel il vous suffit de cliquer dans le menu Fichier sur Sauver (cloud) ou d'appuyer simultanément sur CTRL+S.
En cliquant sur Sauver (PC) cela vous permet d'obtenir une version locale de votre fichier mais ce n'est pas obligatoire pour que celui-ci soit sauvegardé sur votre compte sarmate.net.
Afficher et partager le document
Pour afficher un document il suffit dans votre espace de cliquer sur le nom du fichier. Celui-ci s'ouvre alors dans un nouvel onglet. En copiant l'adresse de cette page vous pouvez partager votre document.
Les formules mathématiques
Pour afficher des formules mathématiques il suffit d'écrire une formule LaTeX entre deux symboles dollars.
Dans l'exemple suivant on peut voir la formule associée au code $\dfrac{x^2+1}{\sqrt{3}}$ :
On peut consulter le lien suivant pour des exemples de formules classiques.
Pour les formules nécessitant d'écrire les caractères \\, comme dans l'exemple
Écrire des formules mathématiques sur plusieurs lignes, comme dans une résolution d'équation par exemple, peut s'avérer vite complexe. Il existe plusieurs environnement LaTeX pour cela, mais ils n'offrent pas la souplesse de l'HTML pour par exemple un cours à trous ou y insérer du texte formaté ou autre.
Vous pouvez, pour palier ces difficultés, utiliser dans le menu Maths l'entrée arr.html qui permet de créer un tableau html dans les cases duquel on insère des formules.
Dans l'exemple suivant on peut voir la formule associée au code $\dfrac{x^2+1}{\sqrt{3}}$ :
On peut consulter le lien suivant pour des exemples de formules classiques.
Pour les formules nécessitant d'écrire les caractères \\, comme dans l'exemple
$
il est parfois nécessaire de tripler les backslashs de la sorte :
\left\{ \begin{array}{rcl}
x & = & 2t-1 \\
y & = & -t+3 \\
z & = & -3t
\end{array} \right.$
$
Car une fois le document sauvegardé, certains \ peuvent disparaître pour des raisons de sécurité, et lorsque le document est ouvert la formule peut être cassée.
\left\{ \begin{array}{rcl}
x & = & 2t-1 \\\
y & = & -t+3 \\\
z & = & -3t
\end{array} \right.$
Écrire des formules mathématiques sur plusieurs lignes, comme dans une résolution d'équation par exemple, peut s'avérer vite complexe. Il existe plusieurs environnement LaTeX pour cela, mais ils n'offrent pas la souplesse de l'HTML pour par exemple un cours à trous ou y insérer du texte formaté ou autre.
Vous pouvez, pour palier ces difficultés, utiliser dans le menu Maths l'entrée arr.html qui permet de créer un tableau html dans les cases duquel on insère des formules.
Les graphiques
Des graphiques scientifiques et interactifs peuvent être inclus dans vos documents. La librairie JSXGraph a été incorporée et soit des exemples déjà codés, soit un éditeur de graphiques, vous permettent de
créer les vôtres.
Dans l'éditeur de graphique, une fois votre figure complète, il vous suffit de cliquer sur Coller pour que le code JSXGraph soit généré à l'endroit où se situe le curseur.
Un autre outil permet de générer du code JSXGraph. Il s'ouvre également à partir du menu Outils à l'entrée PST -> JSX. Il permet de convertir du code PSTricks, donné par Geogebra lorsqu'on effectue un export,
en code JSXGraph.
Dans l'éditeur de graphique, une fois votre figure complète, il vous suffit de cliquer sur Coller pour que le code JSXGraph soit généré à l'endroit où se situe le curseur.
Un autre outil permet de générer du code JSXGraph. Il s'ouvre également à partir du menu Outils à l'entrée PST -> JSX. Il permet de convertir du code PSTricks, donné par Geogebra lorsqu'on effectue un export,
en code JSXGraph.
Les images
La méthode la plus directe pour insérer une image dans votre document est, dans le menu Outils de cliquer sur l'entrée Insérer une image. Il vous reste à choisir une image de votre choix sur votre ordinateur.
Un code, assez long, sera inséré au niveau du curseur, avec différentes propriétés de style :
Cette première méthode à l'avantage de la simplicité, mais lorsqu'on réouvre le document le code de l'image qui était caché entre les balises <script></script> est alors visible (il est tout de même réductible en cliquant
sur la flèche juste à coté). Deuxième inconvénient, si on insère un certain nombre d'images avec cette méthode l'édition du document connaîtra des latences.
Ainsi, on peut préférer la deuxième méthode qui consiste dans un premier temps, dans Votre espace, d'uploader une image présente sur votre ordinateur.
L'image apparaît alors dans votre espace.
Il faut ensuite cliquer sur l'image et copier l'url de la page qui s'ouvre.
On peut alors, dans le code de notre document, insérer l'instruction suivante :
Un code, assez long, sera inséré au niveau du curseur, avec différentes propriétés de style :
- comme la largeur en pixels, qui est automatiquement mise à 350 pixels mais qui est modifiable ;
- comme le fait que l'image est seule dans une ligne à part et centrée ;
- comme les marges hautes et basses.
Cette première méthode à l'avantage de la simplicité, mais lorsqu'on réouvre le document le code de l'image qui était caché entre les balises <script></script> est alors visible (il est tout de même réductible en cliquant
sur la flèche juste à coté). Deuxième inconvénient, si on insère un certain nombre d'images avec cette méthode l'édition du document connaîtra des latences.
Ainsi, on peut préférer la deuxième méthode qui consiste dans un premier temps, dans Votre espace, d'uploader une image présente sur votre ordinateur.
L'image apparaît alors dans votre espace.
Il faut ensuite cliquer sur l'image et copier l'url de la page qui s'ouvre.
On peut alors, dans le code de notre document, insérer l'instruction suivante :
<img src="url_de_notre_image" style="width: 350px; display: block; margin: auto;" />
Les zones de code
Vous pouvez inclure dans votre document des zones de code Python ou SarmateGraph à partir du menu Code.
Pour insérer un algorithme Python il suffit de cliquer sur Zone Python, et entre les balises <python></python> qui apparaissent il ne vous reste plus qu'à écrire votre programme.
Après sauvegarde du document, lorque vous ouvrez la page, vous pourrez voir que le code est modifiable et exécutable.
À noter que l'on peut modifier la hauteur et la largeur de la zone de code, en ajoutant les paramètres hauteur="" et/ou largeur="" dans la première balise <python>
Si on veut modifier la couleur de fond du code en blanc on peut ajouter le paramètre theme="default" dans la première balise <python>
Pour saisir une zone de code non exécutable, il vous suffit de cliquer sur Zone de Code, toujours dans le menu Code.
En cliquant sur Algo Graph une zone de code SarmateGraph apparaît. Ce langage dérive du Javascript et est adapté à la création de graphique 2d ou 3d en mathématiques.
On peut trouver un ensemble d'exemples sur cette page.
En cliquant sur Algo Graph les balises <algoGraphe> </algoGraphe> apparaissent et affichent dans la page le code puis l'image générée après avoir cliquer sur Éxécuter.
Si on veut juste que l'image crée apparaissent dans la page web et non son code, il faut remplacer les balises par <algoGrapheInv> </algoGrapheInv>.
À noter que l'on peut modifier la hauteur et la largeur de la zone de code, en ajoutant les paramètres hauteur="" et/ou largeur="" dans la première balise <algoGraph>
Pour insérer un algorithme Python il suffit de cliquer sur Zone Python, et entre les balises <python></python> qui apparaissent il ne vous reste plus qu'à écrire votre programme.
Après sauvegarde du document, lorque vous ouvrez la page, vous pourrez voir que le code est modifiable et exécutable.
À noter que l'on peut modifier la hauteur et la largeur de la zone de code, en ajoutant les paramètres hauteur="" et/ou largeur="" dans la première balise <python>
Si on veut modifier la couleur de fond du code en blanc on peut ajouter le paramètre theme="default" dans la première balise <python>
Pour saisir une zone de code non exécutable, il vous suffit de cliquer sur Zone de Code, toujours dans le menu Code.
En cliquant sur Algo Graph une zone de code SarmateGraph apparaît. Ce langage dérive du Javascript et est adapté à la création de graphique 2d ou 3d en mathématiques.
On peut trouver un ensemble d'exemples sur cette page.
En cliquant sur Algo Graph les balises <algoGraphe> </algoGraphe> apparaissent et affichent dans la page le code puis l'image générée après avoir cliquer sur Éxécuter.
Si on veut juste que l'image crée apparaissent dans la page web et non son code, il faut remplacer les balises par <algoGrapheInv> </algoGrapheInv>.
À noter que l'on peut modifier la hauteur et la largeur de la zone de code, en ajoutant les paramètres hauteur="" et/ou largeur="" dans la première balise <algoGraph>
Créer un document à trous
Pour faire un document à trous il nous faut utiliser les balises <pause> </pause> pour encadrer le texte que l'on veut voir disparaître dans un premier temps.
Le plus simple étant de taper son texte, puis sélectionner la partie que l'on souhaite cachée et dans le menu Structures cliquer sur Pause.
Une fois le document sauvegardé et affiché, on peut voir que la partie entre les balises <pause> </pause> est remplacée par un espace.
On peut compléter ce vide en cliquant en bas à droite de l'écran. Lorsqu'on se trouve sur la zone de clic le curseur de la souris se modifie et devient en forme de main avec l'index qui pointe.
On peut insérer autant que l'on veut de trous dans un document et ceux-ci se compléteront au fur et à mesure des clics. Si on veut revenir en arrière et remettre les vides en place, il suffit de cliquer dans le coin inférieur
gauche de la page.
On pourra tester la complétion des trous dans la page suivante.
Le plus simple étant de taper son texte, puis sélectionner la partie que l'on souhaite cachée et dans le menu Structures cliquer sur Pause.
Une fois le document sauvegardé et affiché, on peut voir que la partie entre les balises <pause> </pause> est remplacée par un espace.
On peut compléter ce vide en cliquant en bas à droite de l'écran. Lorsqu'on se trouve sur la zone de clic le curseur de la souris se modifie et devient en forme de main avec l'index qui pointe.
On peut insérer autant que l'on veut de trous dans un document et ceux-ci se compléteront au fur et à mesure des clics. Si on veut revenir en arrière et remettre les vides en place, il suffit de cliquer dans le coin inférieur
gauche de la page.
On pourra tester la complétion des trous dans la page suivante.
Les slides
Pour créer un document à l'aide de slides que l'on passe au fur et à mesure d'une présentation par exemple, il nous faut utiliser les balises <slide> </slide>.
Elles sont accessibles à partir du menu Structures
Chaque slide que vous créez doit avoir son contenu saisi entre des balises <slide> </slide>. Lorsqu'on affiche le document, pour passer d'un slide à l'autre on clique dans le coin supérieur droit ou dans le coin supérieur gauche de la fenêtre.
Elles sont accessibles à partir du menu Structures
Chaque slide que vous créez doit avoir son contenu saisi entre des balises <slide> </slide>. Lorsqu'on affiche le document, pour passer d'un slide à l'autre on clique dans le coin supérieur droit ou dans le coin supérieur gauche de la fenêtre.
Exporter en pdf
L'export en pdf de votre document ne se fait pas de façon automatique. Dans votre espace, il faut cliquer sur le document pour l'ouvrir, puis de l'imprimer en choisissant l'option « imprimer au format pdf » dans la liste des
imprimantes disponibles.
Dans les options d'impression il vous faudra choisir d'afficher les images d'arrière plan, et ensuite libre à vous d'en cocher ou décocher d'autres.
Le choix du zoom est important, et en regardant l'aperçu avant impression vous verrez peut-être des dépassement ou chevauchement d'éléments d'une page à l'autre. Pour forcer le passage à une nouvelle page vous pouvez ajouter l'instruction Saut de page dans le menu Texte
Dans les options d'impression il vous faudra choisir d'afficher les images d'arrière plan, et ensuite libre à vous d'en cocher ou décocher d'autres.
Le choix du zoom est important, et en regardant l'aperçu avant impression vous verrez peut-être des dépassement ou chevauchement d'éléments d'une page à l'autre. Pour forcer le passage à une nouvelle page vous pouvez ajouter l'instruction Saut de page dans le menu Texte