Ce document est un mode d’emploi technique expliquant comment déposer un texte pour Images des Mathématiques dans l’« espace privé » ou dans l’espace « simplifié » réservé aux billettistes.
La première chose à savoir est que le plus simple est souvent le mieux ! Si vous tapez un texte tout simplement, avec les accents, vous produirez quelque chose de proche du but recherché !
Bien entendu, il y a des subtilités qui permettent d’améliorer la présentation.
Sachez que la plupart des commandes LaTeX fonctionnent directement (mais sans préambule ni chargement de packages). Notez en passant que l’idéal dans Images des Maths est d’utiliser le moins possible de formules, si bien que LaTeX se réduit alors à peu de choses.
Sachez aussi que le commandes HTML fonctionnent sans problème, mais elles ne sont pas nécessaires.
Intertitres
Pour les articles, ou les billets longs, ou si le besoin s’en fait sentir, les intertitres sont du type :
Pour l’obtenir, il suffit d’encapsuler le titre de l’intertitre entre « triple »-accolade. Dans le « source », il suffit de taper : {{{Intertitres}}}. Il existe également un raccourci typographique, au dessus de la zone de rédaction.
Sous-titres
On peut faire des :
en encadrant le sous titre par <h4>sous-titre</h4>
Pour créer un nouveau paragraphe comme...
celui là, il suffit de « sauter » une ligne (double « retour chariot », comme en LaTeX, aller seulement à la ligne est sans effet sur le texte interprété ensuite par SPIP ; les mathématiciens se retrouvent ainsi en territoire familier.).
Texte en italique : il suffit d’encapsuler la cible entre « simple »-« accolade » {Texte en italique}
Texte en gras : il suffit d’encapsuler la cible entre « double »-« accolade » {{Texte en gras}}
Texte en italique et en gras : il suffit de panacher les deux précédents en mettant des espaces : {{ {Texte en italique et en gras} }}, ce qui laisse de nombreuses perspectives...
Remarque : Raccourci : on peut sélectionner la zone à mettre en italique (ou en gras), puis cliquer sur le i (ou le B) , juste au dessus de la zone de rédaction.
Trait de séparation horizontal : sur toute la largeur du texte, il suffit de placer quatre tirets, ainsi : ---- pour obtenir :
Enjoliver les théorèmes, propositions, définitions.... comme par exemple :
qui donne en spip :
<div class="thm">
<span class="titre">Définition~1 :</span>
Le {{nombre d'or}} est le nombre
$$
\varphi \, = \, \frac{\sqrt{5} + 1}{2} .
$$
</div> Notez que les <span class="titre"></span> délimitent la zone soulignée en rouge.
Encadrer des citations, des définitions...
Une comète pourrait nous donner un printemps perpétuel ; elle pourrait changer notre ellipse en un cercle parfait ; elle pourrait devenir pour nous une seconde Lune ; elle pourrait nous donner un anneau comme celui de Saturne.
Obtenu comme ceci :
<quote>Une comète pourrait nous donner un printemps perpétuel ; elle pourrait changer notre ellipse en un cercle parfait ; elle pourrait devenir pour nous une seconde Lune ; elle pourrait nous donner un anneau comme celui de Saturne.</quote>Insérer des listes ou des énumérations : Pour insérer des listes, on utilise la syntaxe :
- voici une liste avec
- trois items obtenus
- simplement grâce à des tirets et des retours chariotqui produit le résultat suivant :
Il est aussi possible de créer des listes imbriquées ; le code :
donne :
En ce qui concerne les énumérations, il suffit d’utiliser le # à la place de l’étoile :
pour obtenir :
Les liens hypertextes. On fabriquera facilement un lien hypertexte avec le code suivant :
pour obtenir : IdM est une initiative du CNRS.
Pour un lien sur un article du site, on utilisera le numéro de l’article (ou du billet) en question. (les billetistes, eux, n’ayant pas accès à ces numéros, mettront l’adresse http).
Tous les articles, dans l’espace de rédaction, ont un numéro en haut à gauche. La liste de tous les articles se trouve en cliquant sur l’icône en haut à droite de l’espace de rédaction. On fera de même pour faire un lien sur un auteur de IdM.
ce qui donne : voir le portrait de Pierre Fatou écrit par Michèle Audin
Notes de bas de page. Une note de bas de page est indiquée, dans SPIP, entre doubles crochets. Le code :
sera affiché sous la forme : « Une note [1] de bas de page. »
Remarque : Au dessus de la zone de rédaction, on trouve 2 raccourcis pour la note de bas de page, ainsi que pour le lien hypertexte.
Lexique
Certains mots ou sigles figurent dans le « lexique » (sur la page d’accueil).
Pour renvoyer sur le lexique, on utilisera le code suivant :
Le Prix Abel ne récompense pas un personnage, mais une œuvre.
LaTeX
Nous pouvons aussi ajouter des mathématiques en utilisant des commandes LaTeX basiques insérées entre « dollars » canoniques ( il ne faut pas utiliser les balises ) :
$$ e^{i\pi}=-1 $$ Remarquer qu’ici « double »-dollar a été utilisé pour encapsuler. Cela centre la formule. Alors que si l’on utilise « simple »-dollar, cela permet de faire des maths (un peu comme ça : $\mathbb{C}, x \not\in F $) dans le texte. Cela ressemble fort à notre utilisation classique de LaTeX. On peut aussi s’en servir pour « justifier » à gauche, comme ci-dessous :
$e^{i\pi}=-1 \;\;\; \mbox{ et } \;\;\; \displaystyle \int_{\mathbb{R} \times \mathcal{J}} \ln \left ( \frac{\sum_i^\infty A_i}{\prod_k^\star B_k}\right )$.
Nous pouvons également faire un renvoi sur une formule, comme ceci :
$$(\mathbb E (B_H (x)-B_H (y))^2)^{1/2} = \| x- y \|^{H}.\label{1}$$
Si $ H=1/2 $ l’équation $\ref{1}$ se simplifie, on parle alors de mouvement brownien standard.
Pour faire un renvoi sur un article en référence on mets une ancre ( [<-] ) sur la référence, qu’on pourra « appeler » dans le corps de l’article ( [->#] )
Par exemple :
La littérature traitant des pavages est considérable. Le traité de Grünbaum et Shephard [GrSh-87] est l’une des références obligées.
[GrSh-87] B. Grünbaum et G.C. Shephard, Tilings and patterns, Freeman and co, 1987
Attention, on doit considérer que l’on a pas à notre disposition des packages évolués style AMS. Cependant, même en se limitant aux LaTeX essentials, la latitude pour dactylographier des mathématiques est assez étendue. (Qu’il soit permis ici de rappeler que le site est dédié à un public aussi large que possible.)
(ceci ne concerne pas les billetistes)
Le chapeau correspond aux quelques phrases d’introduction, qui donnent envie au lecteur de poursuivre sa lecture. Il est une partie du texte mais présenté différemment.
Le descriptif rapide est ce qui est repris sur la page d’accueil. Il n’est pas une partie du texte final. C’est en quelque sorte une « accroche ». Il doit être court (20 à 30 mots)
Lorsqu’il n’y a pas de descriptif rapide, le logiciel considère que ce descriptif consiste en les 80 premiers mots du texte. Il est toujours préférable de préparer un descriptif, même s’il est presque identique au début du texte.
(ceci ne concerne pas les billetistes)
Pour déposer une image, la première chose à faire est de l’importer. Pour cela, dans l’espace privé, à gauche de la fenêtre, il faut choisir « Ajouter une image », puis « choisir le fichier » et naviguer dans votre disque pour choisir l’image que vous souhaitez. Ensuite, cliquer sur « Télécharger ». L’image apparaît alors dans un petit rectangle à gauche. Vous pouvez y ajouter un titre. Remarquez que l’image se voit aussi attribuer un numéro, qui vous sera indispensable pour l’inclure dans votre article. Si l’image porte par exemple le numéro 123, vous avez deux façons de l’insérer dans le corps du texte :
On peut de plus placer l’image en disant <img123|left>, <img123|right> ou <img123|center>. Il y a alors deux cas possibles :
Le cas du logo de l’article est différent. Il faut l’inclure APRÈS avoir sauvegardé le texte. Ne nous demandez pas pourquoi !
Les formats autorisés sont tous les plus courants : JPG, PNG, GIF, et aussi SVG. Mais il n’est pas possible de déposer un fichier EPS ou PDF (par manque de compatibilité avec le format HTML) ; pour des figures dans un format vectoriel, SVG est très adapté, nous vous le recommandons chaudement ! Un détail à connaître cependant, pour inclure une figure au format SVG, il faut impérativement utiliser <emb123>.
Veillez à ce qu’une image soit de taille raisonnable pour l’usage qui en est fait dans le site :
Le plus simple est de demander conseil au responsable de la rubrique. Évitez le GIF animé, qui n’est pas un format de vidéo !
Nous donnons ci-dessous le fichier source associé au billet d’Annick Lesne sur la Fête de la Science (lisible ici pour voir le résultat interprété par SPIP), qui est constitué intégralement de texte dans l’esprit originel du billet. On notera la conversion du « -- » en : « — ».
Le fichier source est téléchargeable ici :
Nous donnons ci-dessous le fichier source associé au billet de Xavier Caruso sur le nombre d’Erdös (lisible ici pour voir le résultat interprété par SPIP). On y trouve l’implémentation SPIP :
Le fichier source est téléchargeable ici :
Les sections qui suivent sont dédiées à des éléments plus riches que la mise en forme évoquée précédemment. Pour satisfaire la curiosité de ceux qui ont été conquis par SPIP.
Blocs dépliables (balises <bloc>)
Les blocs dépliables peuvent, par exemple, être utilisés pour matérialiser explicitement plusieurs niveaux de lecture (on peut penser faire déplier des éléments mathématiques plus techniques destinés aux lecteurs expérimentés)
qui est obtenu avec le code :
Des onglets (balises <onglets>)
Ceci est le texte du premier onglet.
Ceci est le texte du deuxième onglet.
Il est plus long que l’autre ! Et donc on a assez de texte pour voir ce qui se passe quand il y a un retour à la ligne dans un paragraphe. C’est une bonne idée de faire ce test, parce que l’indentation de paragraphe pourrait cacher un problème de padding ... Bon en fait ça a l’air de marcher assez bien.
Minus tibi accuratas a me epistulas mitti quereris. Quis enim accurate loquitur nisi qui uult putide loqui ? Qualis sermo meus esset si una desideremus aut ambularemus, inlaboratus et facilis, tales esse epistulas meas uolo, quae nihil habent accersitum nec fictum. Si fieri posset, quid sentiam ostendere quam loqui mallem. Etiam si disputarem, nec supploderem pedem nec manum iactarem nec attollerem uocem, sed ista oratoribus reliquissem, contentus sensus meos ad te pertulisse, quos nec exornassem nec abiecissem. Hoc unum plane tibi adprobare uellem, omnia me illa sentire quae dicerem, nec tantum sentire sed amare. Aliter homines amicam, aliter liberos osculantur ; tamen in hoc quoque amplexu tam sancto et moderato satis apparet adfectus. Non mehercules ieiuna esse et arida uolo quae de rebus tam magnis dicentur (neque enim philosophia ingenio renuntiat), multum tamen operae inpendi uerbis non oportet.
qui apparaît grâce à la syntaxe suivante :
<onglets>
Premier onglet
Ceci est le texte du premier onglet.
++++
Deuxième onglet
Ceci est le texte du deuxième onglet.
Il est plus long que l'autre ! ... problème de padding ...
++++
Troisième onglet
Minus tibi accuratas a me epistulas mitti quereris. ... multum tamen operae inpendi uerbis non oportet.
</onglets>ThickBox
On peut afficher une boîte transitoirement au centre de l’écran avec toutes sortes de contenu. Activable pour la balise <doc>, mais on peut aussi montrer des abstracts comme ça ... Voici deux exemples :
iFrame avec Google à l'interieur
<html>
<div id="contenu" style="display:none;">Comme le dit si bien Thalès : voici du texte caché.<br>
<br>
Subito nobis hodie Alexandrinae ... insigne (indicium) est. </div>
<p><a class="thickbox" href="http://www.google.com?TB_iframe=true&width=600&height=400">iFrame avec Google à l'interieur</a></p>
<p><a class="thickbox" href="#TB_inline?width=600&height=400&inlineId=contenu">Du contenu inline </a></p>
</html>[1] Voici un complément d’information.