Qui sommes-nous ?

Mode d’emploi technique

Ce document est un mode d’emploi technique expliquant comment déposer un texte pour Images des Mathématiques dans l’« espace privé ».

Pour les auteurs d’articles et les billettistes

Accéder à l’espace de rédaction et choix de la rubrique

  • Vous accéderez à l’interface de rédaction (espace privé) après vous être identifié (tout en haut à droite), en cliquant sur l’icône « serrure » à droite de l’écran.
  • Sur l’espace de rédaction, sélectionner à droite, l’icône du milieu : « Ecrire un nouvel article ».
    PNG - 14.6 ko
    PNG - 6.8 ko

    Après avoir indiqué le titre, il faut choisir la rubrique de l’article en cliquant dans la loupe :

PNG - 27 ko

La rubrique Tribune des Mathématiciens est en 2ème position.
La plupart des rubriques concernant les auteurs sont en bas dans « Les différentes rubriques ».

PNG - 23.1 ko
PNG - 28.8 ko

Enregistrer le texte, le prévisualiser et le modifier

Une fois le texte déposé, vous cliquez sur « Enregistrer » en bas de la fenêtre. Le résultat vous permet d’avoir une vue d’ensemble du texte mais pas encore sous la forme finale. Le texte est alors enregistré et vous pouvez y revenir un autre jour si vous le souhaitez.
Il faut recalculer la page (pomme R ou la flèche ronde à coté de l’adresse http) pour que les formules mathématiques se transforment correctement. En cliquant sur « prévisualiser » (à gauche) on voit la forme définitive de l’article (celle que verra le lecteur). Pour revenir à la fenêtre de rédaction, il faut cliquer sur l’icône « livre » à droite qui vous ramène à votre espace de rédaction.

En pratique, vous disposez de quelques aides dans le menu en haut de la fenêtre. En sélectionnant une portion de texte et en cliquant ensuite sur i, sur B ou sur le petit icône représentant un inter-titre, vous avez l’effet souhaité. Même chose dans la partie droite du menu, pour certains symboles spéciaux.

Certains auteurs préfèrent préparer leur article complètement avant de le déposer et de régler les petits problèmes de typographie qui se présentent. D’autres préfèrent travailler directement en ligne et faire souvent le cycle « enregistrer-prévisualiser-modifier ». Affaire de goût... L’auteur de ces lignes ouvre deux fenêtres en même temps, l’une en « prévisualisation » et l’autre en « Modification » ce qui permet de modifier tout en ayant sous les yeux l’article « compilé ».

Chapeau et descriptif
Le chapeau correspond aux quelques phrases d’introduction, qui donnent envie au lecteur de poursuivre sa lecture. Il est en gras, au début de l’article.

Le descriptif rapide est ce qui est repris sur la page d’accueil. C’est en quelque sorte une « accroche » qui présente l’article. Il doit être court (1 à 2 phrases).

Lorsqu’il n’y a pas de descriptif rapide, le logiciel considère que ce descriptif consiste en les 20 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.

Mise en forme basique

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) en les mettant entre $. 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 :

Intertitre

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 :

Sous-Titres

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.).

Si on veut tout de même faire un retour à la ligne sans saut de ligne il faut rajouter <br> à la fin de la phrase.

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 :


Aller à la ligne

On peut parfois avoir besoin d’aller...
à la ligne.

Il faut alors utiliser la balise <br>, comme ceci :

On peut parfois avoir besoin d'aller... <br>à la ligne.

Enjoliver les théorèmes, propositions, définitions.... comme par exemple :

Définition 1 : Le nombre d’or est le nombre \[ \varphi \, = \, \frac{\sqrt{5} + 1}{2} . \]

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 chariot

qui produit le résultat suivant :

  • voici une liste avec
  • trois items obtenus
  • simplement grâce à des tirets et des retours chariot

Il est aussi possible de créer des listes imbriquées ; le code :

donne :

  • Ton cheval est :
    • alezan ;
    • bai ;
    • noir ;
  • mais mon lapin est :
    • blanc ;
      • angora ;
      • ou à poil ras.

En ce qui concerne les énumérations, il suffit d’utiliser le # à la place de l’étoile :

pour obtenir :

  1. premier
  2. deuxième
  3. troisième

Insérer un tableau

Exemple :

pour obtenir ce tableau :

titre colonne 1 titre colonne 2 titre colonne 3
item 1 ligne 2 item 2 ligne 2 item 3 ligne 2
item 1 ligne 3 item 2 ligne 3 item 3 ligne 3
item 1 ligne 4 item 2 ligne 4 item 3 ligne 4
item 1 ligne 5 item 2 ligne 5 item 3 ligne 5
item 1 ligne 6 item 2 ligne 6 item 3 ligne 6
item 1 ligne 7 item 2 ligne 7 item 3 ligne 7

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 :

\[\begin{equation}(\mathbb E (B_H (x)-B_H (y))^2)^{1/2} = \| x- y \|^{H}.\label{equation_1}\end{equation}\]

Si $ H=1/2 $ l’équation $\ref{equation_1}$ se simplifie, on parle alors de mouvement brownien standard.

Il est également possible de donner une couleur aux parties d’une équation, comme indiqué ici :

$55={\color{red}{55}}= {\color{blue}{50}} + {\color{yellow}{5}}$

Renvoi ou ancre

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.)

Par ailleurs, il faut donner, dans la mesure du possible, des références bibliographiques directement accessibles sur internet  :
la plupart des lecteurs d’IdM n’ont aucun accès aux bibliothèques
universitaires et les bibliographies académiques n’ont donc pas de sens, ni d’utilité pour eux.

Déposer des images

(ceci ne concerne pas les billettistes)

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 :

  • En utilisant <img123> ou <doc123> dans le corps du texte.
    La commande <doc123> permet d’afficher avec l’image, un titre ainsi qu’un descriptif ; le titre et le descriptif s’enregistrent dans le portfolio (bouton ajouter au portfolio sous l’image). Il est possible d’y mettre des formules mathématiques.

On peut de plus placer l’image en disant <img123|left>, <img123|right> ou <img123|center>. Il y a alors deux cas possibles :

    • Si l’image est dans le portfolio, alors apparaît dans l’article une vignette, et cliquer sur cette vignette ouvre un popup contenant l’image elle-même dans toute sa splendeur ;
    • Si l’image n’est pas dans le portfolio, alors elle apparaît simplement dans l’article, sans bouton ni fioriture. À réserver donc aux petites images.
  • En utilisant <fig123> : alors, l’image est disposée au centre de la colonne, ajustée au maximum à 90% de la largeur de la colonne, avec un titre et une légende, en particulier on est assuré qu’elle ne dépasse jamais de la fenêtre du navigateur. Mais ce n’est pas un bouton. À utiliser le plus souvent possible ... On peut aussi spécifier une largeur maximale différente en disant <fig123|width=40%> et un alignement en disant <fig123|align=left> (mais dans ce dernier cas la description de l’image reste centrée). Éviter dans la mesure du possible les largeurs absolues (en pixels ou en « em »), et leur préférer des pourcentages (par rapport à la largeur de la colonne).

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 :

  • Pour une image mise telle quelle, quelques centaines de pixels de large ;
  • Pour une image du portfolio ou utilisant <fig>, on peut mettre une image un peu plus grande, typiquement jusqu’à 2000 pixels de large, mais seulement si ce niveau de détail a un sens (par exemple s’il s’agit d’une page de manuscrit scannée, pour apprécier le grain du papier ; si c’est l’image d’une sphère, c’est inutile, et une image trop grosse risque de dégrader l’expérience de vos visiteurs en augmentant le temps de téléchargement de votre article ...)
  • Pour le logo (l’image qui apparaitra en une), il doit être au format 16/9ème et idéalement avec une résolution de 640x360 pixels pour apparaître le mieux possible. Avec une taille plus grande ou un rapport différent, l’image sera tronquée soit à la une, soit en vignette.

Déposer des vidéos ou du son

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 !

Utilisation d’œuvres provenant de internet (images, vidéos, sons)

Sur internet, le code de la propriété intellectuelle s’exerce aussi. Il faut donc veiller
à respecter les droits relatifs aux contenus utilisés, en identifiant les auteurs, les sources (sites ou œuvres dont sont extraites les images par exemple)
et les conditions d’utilisation de ces contenus.

Les onglets « conditions d’utilisation », « mentions légales » ou encore « crédits » de la plupart des sites internet, permettent de savoir qui est le propriétaire des œuvres du site, et si elles peuvent être réutilisées et de quelle(s) manière(s).

Certaines œuvres peuvent être libres de droits : elles sont par exemple « tombées dans le domaine public » et il n’est plus besoin de demander une autorisation d’exploitation quelconque, ou elles ont été créées sous des licences libres (Creative Commons, GNU-GPL, Art Libre …) qui garantissent la protection du droit d’auteur tout en permettant la libre circulation des idées et des œuvres. Pour d’autres contenus , il vous sera nécessaire de demander l’autorisation de l’auteur.

Il existe des sites proposant un grand nombre d’images dont une majorité sous licence libre comme Wikimedia Commons ou Flickr ... Nous vous suggérons de les explorer dans un premier temps.
Là encore, il faut vérifier que l’image qui vous intéresse est bien sous licence libre ou quelles en sont les conditions d’utilisation.

Quelle que soit la provenance des images (internet ou copies d’oeuvres papier ou autres), il vous faut par ailleurs référencer la source et l’auteur du contenu.

Quelques exemples

Fichier source type n° 1

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 : « — ».

Cliquer ici pour déplier un bloc contenant le code source de ce billet

Le fichier source est téléchargeable ici :

Texte - 1.9 ko
Fichier source n°1

Fichier source type n° 2

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 :

  • des notes de bas de pages ;
  • des hyperliens ;
  • d’une fenêtre surgissante affichant une page web (décrit dans la section « Thickbox » située plus bas dans cet article).

Cliquer ici pour déplier un bloc contenant le code source de ce billet

Le fichier source est téléchargeable ici :

Texte - 13.8 ko
Fichier source n°2

Pour aller plus loin

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)

Ceci est un bloc dépliable

Subito nobis hodie Alexandrinae naues apparuerunt, quae praemitti solent et nuntiare secuturae classis aduentum : tabellarias uocant. Gratus illarum Campaniae aspectus est : omnis in pilis Puteolorum turba consistit et ex ipso genere uelorum Alexandrinas quamuis in magna turba nauium intellegit ; solis enim licet siparum intendere, quod in alto omnes habent naues. Nulla enim res aeque adiuuat cursum quam summa pars ueli ; illinc maxime nauis urgetur. Itaque quotiens uentus increbruit maiorque est quam expedit, antemna summittitur : minus habet uirium flatus ex humili. Cum intrauere Capreas et promunturium ex quo alta procelloso speculatur uertice Pallas, ceterae uelo iubentur esse contentae : siparum Alexandrinarum insigne (indicium) est.

qui est obtenu avec le code :

Des onglets (balises <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 ! 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.

Troisième onglet

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

Du contenu inline

<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>

La tribune des mathématiciens

Suivre IDM