Guide Sytlistique:Redaction

De OSCAR Guide De Saisie
Aller à la navigation Aller à la recherche

Cette page détaille la méthode stylistique générale utilisée dans les pages physiques du wiki, il est basé sur la page User:Oscarwiki. Guide Sytlistique:WikiAdmin

Il existe également un guide pour la gestion du wiki, qui inclut des détails pour modifier les éléments structurels plus larges (le menu latérale gauche), et certaines tâches moins courantes (renommer les pages), qui sont généralement hors de portée de ce guide.


Lien vers les page utile :

Les pages Web utilisent une méthode spéciale de codage (appelée balisage) pour indiquer à un navigateur Web comment afficher le texte et les images, c'est ce qu'on appelle html.

Le logiciel Wiki utilise un type spécial de système simplifié pour codifier les mêmes informations, il est connu sous le nom de démarquage. Il est beaucoup plus facile à lire que le HTML typique.

Par exemple si vous ouvrez cette section masquée vous verrez le html d'une partie de la page de bienvenue de ce wiki

<code>
<div id="mw-content-text" lang="fr" dir="ltr" class="mw-content-ltr"><div class="mw-parser-output"><p><strong>
Bienvenue sur les pages d'aide à l'utilisation de l'application web [<a rel="nofollow" class="external text" href="https://bamara.bndmr.fr">BaMaRa</a>]
et sur les pages WIKI d'OSCAR.
</strong>
</p>
<h3><span class="mw-headline" id="Utilisation_du_guide_de_saisie_en_ligne">Utilisation du guide de saisie en ligne</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/mediawiki/index.php?title=Bienvenue&action=edit&section=1" title="Modifier la section : Utilisation du guide de saisie en ligne">modifier</a><span class="mw-editsection-bracket">]</span></span></h3>
<p>Le menu déroulant se trouve sur la gauche de votre écran. 
</p><p>Si vous avez besoin d’une information précise, le champs "recherche" est placé en haut à droite. <br />
</p>
<div class="thumb tright"><div class="thumbinner" style="width:798px;"><a href="/mediawiki/index.php?title=Fichier:WikiWelcome.png" class="image"><img alt="" src="/mediawiki/images/5/5f/WikiWelcome.png" decoding="async" width="796" height="326" class="thumbimage" data-file-width="796" data-file-height="326" /></a>  <div class="thumbcaption">Page bienvenu du wiki Oscar</div></div></div><p> Il vous permet d’accéder directement à l’information que vous souhaitez atteindre.
</p><p>La rubrique <i>Aide et Contact</i> se trouve en bas à gauche. 
</p>
<dl><dt><a class="mw-selflink selflink">Guide de Saisie</a></dt>
<dd></dd>
<dd>Il existe plusieurs guides relatifs aux logiciels DPI spécifiques et à leur utilisation de BaMaRa.Vous pouvez les trouver sur la <a href="/mediawiki/index.php?title=Autres_guides" title="Autres guides"><b>page des autres guides</b></a>, ainsi que les coordonnées des éditeurs des logiciels qui nous ont accordés les autorisations de diffusion des manuels d'utilisation spécifiques pour l'utilisation de BaMaRa.</dd>
<dd>Si vous souhaitez créer ou modifier des pages de ce wiki, un <a href="/mediawiki/index.php?title=Guide_Stylistique" title="Guide Stylistique"><b>guide de style</b></a> de sous-section est disponible pour vous guider.</dd></dl>
<dl><dt><a href="/mediawiki/index.php?title=R%C3%A9f%C3%A9rences_et_liens" title="Références et liens">Références et liens</a></dt>
<dd>Définition de la terminologie utilisée dans le guide</dd></dl>
<dl><dt><a href="/mediawiki/index.php?title=Contact" title="Contact">Aide et Contact</a></dt>
<dd>Pour vous aider</dd></dl>
<dl><dt><a href="/mediawiki/index.php?title=Naviguer_sur_ce_wiki" title="Naviguer sur ce wiki">Naviguer sur ce wiki</a></dt>
<dd>Information sur la navigation du wiki</dd></dl>
<dl><dt><a href="/mediawiki/index.php?title=Formations" title="Formations">Formations</a></dt>
<dd>Coordonnées pour l'organisation de sessions de formation</dd></dl>
<p>À la toute fin d'une section, vous trouvez une barre de navigation.
</p><p>Pour naviguer dans chacune des sections, il vous suffit de dérouler et de cliquer sur le mot <i>Afficher</i>.
</p>
<table class="wikitable" style="width : 100%">
<tbody><tr>
<td style="text-align:left"><a href="/mediawiki/index.php?title=Sp%C3%A9cial:Toutes_les_pages" title="Spécial:Toutes les pages"> Index des pages </a>
</td>
<td style="text-align:right;"><a href="/mediawiki/index.php?title=Se_connecter" title="Se connecter">Se connecter</a>
</td></tr></tbody></table>

</code>

Cela semble nettement désagréable et est souvent appelé une soupe de tag

Comparez cela à la démarque de wikimedia, où il est en fait possible de lire le contenu

<code>
===Utilisation du guide de saisie en ligne===

Le menu déroulant se trouve sur la gauche de votre écran. 

Si vous avez besoin d’une information précise, le champs "recherche" est placé en haut à droite. <br>

[[Fichier:WikiWelcome.png|cadre|Page bienvenu du wiki Oscar|460px]] Il vous permet d’accéder directement à l’information que vous souhaitez atteindre.

La rubrique ''Aide et Contact'' se trouve en bas à gauche. 
;[[Bienvenue|Guide de Saisie]] : 
:Il existe plusieurs guides relatifs aux logiciels DPI spécifiques et à leur utilisation de BaMaRa.Vous pouvez les trouver sur la [[Autres guides|'''page des autres guides''']], ainsi que les coordonnées des éditeurs des logiciels qui nous ont accordés les autorisations de diffusion des manuels d'utilisation spécifiques pour l'utilisation de BaMaRa. 
:Si vous souhaitez créer ou modifier des pages de ce wiki, un [[:Guide_Stylistique|'''guide de style''']] de sous-section est disponible pour vous guider. 

;[[Références et liens]] : Définition de la terminologie utilisée dans le guide

;[[Contact|Aide et Contact]] : Pour vous aider

;[[Naviguer sur ce wiki]] : Information sur la navigation du wiki

;[[Formations]] : Coordonnées pour l'organisation de sessions de formation

À la toute fin d'une section, vous trouvez une barre de navigation.

Pour naviguer dans chacune des sections, il vous suffit de dérouler et de cliquer sur le mot ''Afficher''.
</code>

Dans ce guide rapide, je présente la démarque la plus courante qui a été utilisée dans la création du wiki. Toutefois, il convient de noter que je

Ces pages d'aide wikimedia contiennent beaucoup plus de détails, et j'ai lié des sous-sections spécifiques, mais il y a toujours plus ! Enfin il est aussi possible d'utiliser du html brut, mais il faut faire attention car parfois cela casse la présentation d'une page. Si vous vous sentez particulièrement aventureux, n'hésitez pas à visiter la référence html de Mozilla pour en savoir plus sur le balisage html

Les exemples de code et de balisage ici sont faits pour être copiés / coller directe dedans vos nouvelles pages a fur au mesure que vous en avez besoin, cependant il faut veiller à ne pas modifier le mauvais contenu (croyez-moi, c'est facile à faire !).

Pour rendre cela plus facile là où il y a des espaces pour inclure vos propres modifications, ils sont entourés de [[ crochets doubles]] le texte entre les crochets et les crochets eux-mêmes doit être modifié, sauf indication contraire.

Astuce
  • pensez à prévisualiser vos pages régulièrement, pour éviter les erreurs de présentation.
  • Commencez avec une petite version de vos besoins, puis développez.
Vous pouvez toujours utiliser l'onglet discussion de ce page d'ici (ou la page que vous éditez) pour tester vos nouveaux contenus.
  • utilisez abondamment les en-têtes et les sous-titres , car le logiciel wiki placera de petits liens "modificateurs" à côté d'eux, les petites sections sont plus faciles à modifier !


Rubriques / pages à ajouter / Liste des chose a faire (ToDo list)

S'il y a des pages qui doivent être ajoutées à ce wiki, veuillez placer une note dans cette section de la page de discussion de l'administrateur

Si vous souhaitez que des modifications soient apportées à une page existante, veuillez en faire une note dans la section de discussion de cette page, n'hésitez pas à m'envoyer également un e-mail

Extraits de code

Table des Matières

Faites bon usage des titres et sous-titres dans vos pages (vous devriez le faire, car cela facilite l'édition ~ chaque titre aura une étiquette "modifier" à côté). Le logiciel mediawiki inclura automatiquement une table des matières avant votre premier titre. Cependant, vous ne le voulez peut-être pas ici, vous pouvez donc indiquer à mediawiki où le placer en utilisant ce qui suit :

__TOC__

Vous pouvez également décider de masquer le contenu, ce qui peut être fait avec

__NOTOC__


De plus détails peuvent être trouvés sur la page principale de la table des matières de mediawiki


Sections pliantes

<div class="toccolours mw-collapsible mw-collapsed" style="width:90%; overflow:auto;">

[[ces texte est toujours visible ]]

<div style="font-weight:bold;line-height:1.6;">title</div>

<div class="mw-collapsible-content">

le texte caché va ici (ou une transclusion)

</div></div>

Un exemple suit....

ces texte est toujours visible. Avec une note en haut à droite pour ouvrir « afficher »

une titre sont optionelle

Tu peut mis text avant ou aprés le titre


Remarquez comment, une fois ouvert, le coin droit indique maintenant de fermer « masquer » la section.

Note : le partie
 mw-collapsed
sont optionelle, si elle sont presente, le contenu sont « masquer » par défaut

le texte caché va ici (ou une transclusion)



le NavMenu

cela devrait être placé au bas de chaque page.

{{NavMenu|previousPage=page précédente|nextPage=page suivante}}

éditez la page précédente et la page suivante et non les marqueurs previousPage ou nextPage, ce sont les noms des variables.
Vous trouverez ci-dessous un exemple, suivi de la façon dont il apparaîtrait au bas de la page :

{{NavMenu|previousPage=Données principales|nextPage=Créer une nouvelle pochette }}

Ce qui précède se trouve en bas de la page Relier les membres de la famille, et se présente comme suit

revenir à: Données principales Index des pages aller à : Créer une nouvelle pochette 

Le template peut être modifié (si besoin) depuis sa page : Modèle:NavMenu

Inclure une page dans une autre

Depuis le page d'aide du wikimedia

L’inclusion est aussi dénommée transclusion et désigne, de manière générale, la reproduction du contenu d’un document dans un autre document à l’aide d’une référence vers le premier document.

Cela permet de maintenir des détails cohérents dans différentes sections car nous n'avons besoin de les modifier qu'à un seul endroit. Ce changement se répercutera ensuite sur toutes les pages où il a été "transclus".

__exemple__

En plaçant le code « {{en}} » dans cette page on inclut le modèle Modèle:en et l'obtient ceci : « Modèle:En ».

Un exemple est la page de discussion qui correspond à cette page. Il est directement lié à la page de discussion de l'utilisateur du Wiki des Oscars, voir : talk:Guide Sytlistique:Redaction

Pour plus de détails, veuillez consulter la page d'aide de wikipedia]

Les Tableaux

Un tableau, tel que celui ci-dessous, peut être créé assez facilement.

1er Cell, align a la gauche Text centré Texte align au droit
Bread Pie 500.00
Butter aligné au gauche Ice cream valeur numeric alignée a droit 1.00


Voici le code qui a créé le tableau ci-dessus. Ce sont les choses auxquelles vous devez faire attention :


{| class="wikitable" style="width : 100%"
| style="text-align:left;"| 1er Cell, align a la gauche
| style="text-align:center;"| Text centré
| style="text-align:right;" |  Texte align au droit
|-

|| Bread || Pie || 500.00
|-

| style="text-align:left;"| Butter
| style="text-align:center;" |Ice cream
| style="text-align:right;" | 1.00
|}
explication.
  • Les éléments à l'intérieur des caractères { et } font tous partie du tableau.
    • : indique à quoi ressemblera le tableau, dans ce cas en créant une boîte et en rendant le fond gris.
  • le premier | indique les détails qui contrôlent l'apparence d'un tableau (taille forme et forme
  • la paire de || indique le début d'une ligne dans le tableau
  • Vous pouvez contrôler le style d'une cellule en y plaçant des détails de style (au-dessus, le style="text-align:left;"
    • vous placez ensuite le contenu de la cellule après le second |
  • vous terminez une ligne en plaçant |- sur une ligne séparée
  • les sauts de ligne sont ignorés (je les utilise pour voir plus facilement où commence une nouvelle ligne)

La page d'aide de wikimedia contient plus de détails si vous avez besoin de quelque chose de plus compliqué !

les images

lors de la préparation d'une image à utiliser dans ce wiki, assurez-vous des éléments suivants.

taille de l'image
la largeur doit être d'environ 850px pour un affichage correct dans la page.
type d'image
vous pouvez utiliser la plupart des types d'image (png, jpeg, jpg .. etc ..) cependant actuellement le wiki ne gère pas les images SVG, le téléchargement du fichier provoquera une erreur.

Le flux de texte autour des images peut être pénible ! Si vous voulez que votre texte apparaisse après votre image vous avez 2 solutions

  1. utilisez
     <div style="clear: both"></div> 
    immédiatement après votre image, seule sur sa propre ligne. Continuez ensuite avec le texte de votre article
  2. enveloppez la partie avec l'image dans
     <div style="overflow: hidden"> [code pour le fichier inséré ici] </div> 


Faire texte et ton image avec une tableau (pour mieux formater une ligne), eg
 {|
| Ensuite cliquer sur 
| [[Fichier:Refresh.png|20 px|]]
| pour rafraichir jusqu’à avoir le bouton « télécharger »
|}

Va apparaitre somme le suivante ...

Ensuite cliquer sur Refresh.png pour rafraichir jusqu’à avoir le bouton « télécharger »

Using an image in your page :

linking to images has the following structure :

 [[Fichier:MenuPrincipale.png|sizeOptions|cadre|location|néant|alt=image caption|Image Title]]

which will appear as  :


image caption
Image Title

here are the details and options :

Fichier
points to the name of the file (they should be stored in images sub folder if you ftp them to the server, it is easier to 'upload' them
sizeOptions
to control the physical size of the image, ways to do this are :
    :
  • width only {width}px : I mostly use width, the browser will normaly scale the image, I find that 759px is about right for a readability of the text at the same time.
  • height only x{height}px : note the presence of the x.
  • width and height {width)x{height}px (that is an x character, not a multiplication * sign!
cadre
will place a 'box' or 'frame' around the image other option is 'non-cadre' (frameless), I generally use a frame. other options include :
  • vignette : or thumbnail
  • frameless : self explanatary I hope.
location
how the image is placed in the page, options are :
  • centre and droit'.
  • this will also alter how the text will wrap around the image.
néant
if present will cause the text to not appear next to the image. If the image is thin this makes the page look nicer. Otherwise you can flow the image to the left and then put the description next to it.
alt
is the caption / description for the image (it is optional, but I include one anyhow ~ good for screen readers).
Title
is followed after the caption

Mise en page

Titres du Section et Sous Section

Les en-têtes sont créés en insérant des

== signes égaux ==

autour du texte qui sera votre en-tête. Celles-ci sont automatiquement transformées en ancres de page, et apparaîtront dans la table des matières, dont un plus grand nombre de = modifiera le type de titre (en langage html H1, H2, H3...etc).

Commencez tous les titres d'une page à partir de H2 (c'est-à-dire == titre == , car le titre de la page principale est de type H1, et cela confondra le wiki !

Les titres de section sont utiles car les sous-sections peuvent être modifiées indépendamment du reste d'une page. Veuillez les utiliser à haute fréquence !


Citations

Pour citer un livre ou une page Web, utilisez le

<blockquote>Texte à citer</blockquote>

suivant

Le texte cité ressemblera à ceci

Liens

Les liens entre page et vers le site externs peuvent être de différents types :

  • Interne : pour créer un lien vers une autre page envelopper le texte entre crochets [[en carrés doublée]]
    • lien vers la sous-section de la page en cours : [[#NomAncre texte]] les titres et sous-titres sont automatiquement considérés comme ancres
    • lien vers la sous-section sur une autre page : [[NomDuPage#NomAncre|pageName#anchor name]]
  • Les liens externes sont tout aussi simples
    • vous pouvez utiliser le lien brut et il sera reconnu comme par magie https://www.filiere-oscar.fr/ vous devez utiliser le 'https' pour que cela fonctionne
    • ou vous pouvez le rendre joli et modifier le texte affiché [https://www.filiere-oscar.fr/ | Site Web du filière OSCAR]. Site Web du filière OSCAR
NOTE : en quoi ce qui précède est différent du lien interne, il ne nécessite que crochets [carrés] simples , et nous pouvons laisser un simple espace entre le lien et le texte affiché (c'est parce que le wiki reconnaît automatiquement tout ce qui commence par http:// ou https:// comme étant un lien, et les liens ne peuvent pas contenir d'espaces
pour modifier le texte du lien, séparez les informations du lien du texte affiché à l'aide du |, en donnant un lien sous la forme :[[NomLienActuel | Texte affiché ]]


Texte en surbrillance

Souvent, avec des guillemets, j'aime m'assurer qu'il y a un fond gris dans la boîte englobante, vous pouvez obtenir cet effet en enveloppant toute la section dans un div, par exemple :

<div class="toccolours"><blockquote>   Text to be quoted   </blockquote></div>

qui ressemblera à ce qui suit, notez que j'utilise toujours le <blockquote> dans l'exemple ci-dessous :

Text to be quoted

sans <blockquote> bloc, le texte ne sera pas indenté comme ceci

Text content here

Texte Coloré

Vous ressentirez peut-être le besoin d'utiliser de la couleur pour mettre en valeur votre texte. C'est souvent le cas des liens, qui changent de couleur selon qu'ils ont été visités, sont en italique ou en gras. Vous observerez que le texte visité n'est pas très clair, je le force donc souvent à être de couleur bleue.

Vous trouverez ci-dessous les codes dont j'ai généralement besoin :

Les couleur preferé...
Blue
 <span style="color:blue"> texte en blue </span> 
Votre texte apparaîtra comme Texte en blue
Red
 <span style="color:red"> texte en rouge</span> 
Votre texte apparaîtra comme Texte en rouge qui doivent être utilisés avec parcimonie, et uniquement pour mettre en évidence les éléments qui sont d'une grande importance
Green
 <span style="color:green"> texte en green</span> 
Votre texte apparaîtra comme Texte en green
Yellow peut être difficile à lire ...
Mais en utilisant la même principe, nous pouvons mettre en évidence
<span style="background:yellow"> l'arrière-plan du texte en jaune </span>
Votre texte apparaîtra comme l'arrière-plan du texte en jaune


Pour plus de détails, veuillez suivre ce lien vers la page d'aide de Mediawiki pour la couleur du texte (malheureusement uniquement disponible en anglais !)