Skip to main content

Historique: Guide d édition Wiki

Aperçu de cette version: 437

La documentation wiki du site est constituée de plus de 2200 pages (au 09 avril 2016), dont plus de 600 dédiées à des logiciels et plus de 450 dédiées à des matériels. Elle se construit depuis 2005 grâce aux 7196 utilisateurs les inscrits et connectés au site, dont bientôt toi nous l’espérons ! Chacun est libre de modifier les pages, que ce soit pour corriger une faute de frappe ou pour ré-écrire une page complète. Voici comment.



Éditer une page


Avant de lire cette page, prenons le temps de lire la courte page : La documentation Wiki.


Passer en mode édition


Pour éditer une page, il te faut être inscrit et connecté, puis passe en mode « édition » en cliquant sur l'icône « Éditer cette page »Éditer cette page en haut à droite d'une page wiki ou sur le bouton du même nom en bas de page.

 Astuce
Il est aussi possible d'éditer une section particulière d'une page. Pour cela, clique sur l'icône « Modifier cette section »Modifier cette section en face du titre du paragraphe visé.
Pour plus d'informations voir doc.tiki.org/Édition par section. Image



Syntaxe Wiki


Dans l'éditeur Wiki apparaît le « Code source » de la page, écrit en syntaxe Wiki qui est un langage de balisage léger. Image Elle décrit à la fois le contenu de la page ainsi que sa mise-en-page.

Voici quelques exemples de balises Wiki :

-
Code :
Copy to clipboard
Un texte sans mise en forme

Rendu :

Un texte sans mise en forme


-
Code :
Copy to clipboard
__Un texte en gras__

Rendu :

Un texte en gras


-
Code :
Copy to clipboard
===Un texte souligné===

Rendu :

Un texte souligné


-

Édition avec les balises


Les balises peuvent être écrites à la main (si tu les connais), ou peuvent être rajoutées grâce aux outils disponibles dans la barre d'outils en haut de l'éditeur. Voici à quoi ressemble la barre d'outil d'une page Wiki :

toolbar.PNG


Pour mettre en forme un bout de texte, il suffit généralement de le sélectionner, puis de cliquer sur l'icône correspondante à l'outil souhaité. Par exemple pour mettre en gras la ligne « Un texte en gras » de l'exemple précédent :

textegras.PNG

Nous n'allons pas détailler plus avant le fonctionnement de la barre d'édition car celle-ci s'explique d'elle-même. Passe ta souris au dessus des icônes pour voir apparaître un descriptif de chaque outil.

 astuce
Utilise la fonction « Aperçu » pour vérifier ta syntaxe Wiki avant d'enregistrer une page ! Tu peux aussi tester ta syntaxe dans le bac-à-sable Wiki.


 note
Pour supprimer une balise Wiki, il faut l'effacer à la main.


À noter que toutes les balises Wiki ne sont pas présentes dans la barre d'outil car celles-ci sont trop nombreuses. Certaines balises devront donc être écrites à la main, mais tu verras qu'avec un peu d'habitude ceci ne pose pas problème. En cas de doute, tu peux te référer au système d'aide intégré en cliquant sur l'icône associéeImage de la barre d'outils.

Un exemple est plus parlant qu'un long discours, voici donc sans plus attendre un exemple complet de page wiki regroupant certaines des balises les plus couramment utilisées :



Exemple page type


Code :

Copy to clipboard
Cette __page type__ est un exemple de page Wiki. {img src="img/linuxmao/logo_linuxmao.png"} {maketoc} !Informations Site web officiel~hs~: [http://linuxmao.org] Plateforme~hs~: ((GNU Linux)) !Description Cette __page type__ donne un aperçu de ''l'agencement'' et de la ''mise en page'' d'une page Wiki standard. Elle permet aussi de se familiariser avec la syntaxe Wiki. !Utilisation Cliques sur l'icône d'édition ===en haut à droite=== pour éditer une page Wiki. !-Installation Paragraphe rétractable. !Liens et commentaires ~tc~ insère ici liens vers des docs (internes ou externes), vers des tutos ou autres pages liées ~/tc~ *((Accueil)) *((Manuel du site))
Rendu :

pagetype.PNG



Explications :

Nous avons déjà vu certaines des balises utilisées dans cet exemple, et tu auras compris l'utilisation d'autres balises telle que le point d'exclamation pour le titre d'un paragraphe ou les doubles apostrophes pour mettre un texte en italique.

Mais nous voici aussi face à un autre type de balise spécial, celui {entre accolades}.
Ce type de balise est appelé « Plugiciel ».
Les plugiciels Wiki permettent d'étendre la syntaxe pour afficher des éléments spéciaux. Ces éléments peuvent être des images, différents type de boîtes, des listes automatiques etc.
Dans notre exemple, les plugiciels sont utilisés pour afficher une image et un sommaire (créé automatiquement).
Le fonctionnement des plugiciels est décrit plus bas.

Autre nouveauté, les liens hypertexte. Image Ceux-ci se trouvent sous la forme :
  • de liens Wiki, entourés de ((doubles parenthèses))
  • de liens externes, entourés de [crochets]
Plus d'explications sur les liens et la manière de les insérer un peu plus bas.

Autre nouveauté encore, la balise ~hs~. Celle-ci créé un espace insécable.

Enfin, tu auras remarqué sur l'image que la page possède un titre, et que celui-ci n'est pas écrit dans le code de le page !
Le titre (en réalité la description) peut-être différent du nom de la page (qui apparaît lui dans l'adresse URL de la page, ainsi généralement que dans la barre de fenêtre du navigateur.
Cette description est accessible et modifiable lors de l'édition de la page, dans l'onglet « Propriétés », au dessus de l'éditeur.
editpageproprietes.PNG


Syntaxe avancée

La liste des possibilités est énorme, réfère toi à la documentation officielle pour plus de détails :

Insérer un lien

Il existe deux grands types de liens hypertexte, associés à deux outils différents de la barre d'outils :

Les liens Wiki :
(également appelés "liens internes")

Ces liens pointent vers une autre page Wiki du site. Ils sont représentés entourés de ((doubles parenthèses)).

outillienwiki.PNG Pour insérer un lien Wiki, utilise l'outil « Lien Wiki »Image de la barre d'édition.
Cette outil affiche le mini-formulaire ci-contre :


outillienwikiselection.PNG Dans le champ « Link to this page », tape le nom de la page Wiki visée. Une fonction de Complètement automatique propose une liste de pages correspondantes, sélectionne la bonne à la souris.


Éventuellement, ajoute dans le champ « Show this text » le nom qui s'affichera pour le lien (si non renseigné, il s'agira du nom de la page).
Éventuellement encore, ajoute dans le champ « Anchor » le nom de la balise correspondant à un paragraphe précis de la page visée.
 astuce
Pour trouver le nom de la balise correspondant à un paragraphe précis, navigue sur la page visée et clique sur le nom du paragraphe dans le sommaire de la page.
Recopie ensuite ce qui suit le signe dièse (#) dans l'URL de la page

Quelques exemples de liens Wiki :

Code :

Rendu :
Copy to clipboard
((Ardour 3))

Ardour 3
Copy to clipboard
((Ardour 3|Ardour))

Ardour
Copy to clipboard
((Ardour 3|#Installation|Ardour 3, paragraphe Installation))

Ardour 3, paragraphe Installation
Copy to clipboard
((c|#Compresseur|Définition d'un compresseur))

Définition d'un compresseur
Les liens externes :
 note
Lorsque cela est possible, préfère l'utilisation de liens Wiki !

Pour insérer un lien hypertexte visant une page web externe au site, utilise l'outil « Lien externe »Image de la barre d'édition.
Les liens externes sont représentés entourés de [crochets].

Un formulaire similaire à celui des liens Wiki apparaît. Rempli dans le champ « link to this URL » l'adresse complète, et éventuellement ajoute dans le champ « Show this text » le nom qui s'affichera pour le lien (si non renseigné, il s'agira de l'URL complète).

Quelques exemples de liens externes :

Code :

Rendu :
Copy to clipboard
[http://ardour.org/]

http://ardour.org/
Copy to clipboard
[http://ardour.org/|Site officiel d'Ardour]

Site officiel d'Ardour
Une bonne pratique pour les liens externes est d'ajouter un drapeau indiquant s'il s'agit d'un lien menant vers une page en anglais ou en français. Pour ceci, vous pouvez utiliser les balises :
  • {fr} : Image
  • {en} : Image


Autres types de liens :

On notera particulièrement la possibilité de créer des liens permettant la navigation à l'intérieur même d'une page, sans avoir à recharger celle-ci. Ces liens pointent vers des balises de paragraphes (voir les liens Wiki) et doivent être écrits à la main.

Code :
Rendu :
Copy to clipboard
[#Ins_rer_une_image|__⇓__ Insérer une image]

Insérer une image
Pour plus de détails et de possibilités, voir doc.t.o/Liens

Les plugiciels

On peut séparer les plugiciels en deux catégories : Ceux pour lequels on précise un contenu et ceux dont le contenu est créé automatiquement.

Soit le plugiciel BOX. Ce plugiciel créé une boite et a donc besoin qu'on lui précise un contenu à afficher dedans.
On utilisera alors une syntaxe dite "en majuscule", avec deux balises délimitant le début et la fin du contenu.
Code :
Copy to clipboard
{BOX()}mon contenu{BOX}

Rendu :
mon contenu

Les deux balises sont le nom du plugiciel en Majuscules entourées d'accolades.
La balise de début contient une section de paramètre du plugiciel, entre les deux parenthèses. En effet il est possible de spécifier des paramètres variés en fonction du plugiciel.
Par exemple la documentation officielle nous apprend que le plugiciel BOX possède un paramètre width définissant la largeur de la boite.
Code :
Copy to clipboard
{BOX(width=50%)}mon contenu{BOX}

Rendu :
mon contenu

Si le paramètre contient des espaces, il faudra l'entourer de guillemets.
Code :
Copy to clipboard
{BOX(width=90% title="Mon titre")}mon contenu{BOX}

Rendu :
Mon titre
mon contenu


Le deuxième type de plugiciel, celui qui n'a pas besoin de contenu, s'écrit en Minuscules, et ne possède qu'une balise.
Code :
Copy to clipboard
{maketoc}

Rendu :

Avec des paramètres :
Code :
Copy to clipboard
{maketoc maxdepth=1}

Rendu :


Tu trouveras dans la suite de cette page des exemples de plugiciels couramment utilisés.
Pour une liste plus complète (mais parfois en anglais) et plus de détails sur les plugiciels, voir la documentation officielle :
doc.t.o/Plugiciels Wiki


Plugiciels communs

Plugiciels les plus couramment utilisés :

Code :


Rendu :
{CODE()}sudo apt-get install zynaddsubfx{CODE}
Plugiciel accessible via la barre d'édition (Image )
En savoir plus sur ce plugiciel...


Copy to clipboard
sudo apt-get install zynaddsubfx



{CODE(caption="Installer zynaddsubfx")}sudo apt-get install zynaddsubfx{CODE}
Plugiciel accessible via la barre d'édition (Image )
En savoir plus sur ce plugiciel...


Installer zynaddsubfx
Copy to clipboard
sudo apt-get install zynaddsubfx



Copy to clipboard
{QUOTE(replyto="Confucius")}Je ne cherche pas à connaître les réponses, je cherche à comprendre les questions.{QUOTE}
Plugiciel accessible via la barre d'édition (Image )
En savoir plus sur ce plugiciel...


Confucius écrit:
Je ne cherche pas à connaître les réponses, je cherche à comprendre les questions.



Copy to clipboard
{maketoc maxdepth=1}
En savoir plus sur ce plugiciel...


Copy to clipboard
{BOX()}boîte{BOX}
En savoir plus sur ce plugiciel...

boîte



Copy to clipboard
{img fileId=1322 thumb=popup width=100px title="Cliquer pour agrandir"}

Voir le paragraphe dédié : Insérer une image.
01_pingouin_micro.png



Plugiciels perso linuxmao

Plugiciels uniques au site linuxmao.org
Copy to clipboard
%clear%

force un retour à la ligne (après une image par exemple)
Copy to clipboard
[http://linuxmusicians.com/|linuxmusicians.com] {en}

linuxmusicians.com Image
Copy to clipboard
[http://kokopelli-semences.fr/|retrouver la vie, la vraie] {fr}

retrouver la vie, la vraie Image
Copy to clipboard
fin d'un paragraphe {retour}

fin d'un paragraphe
Copy to clipboard
{ATTENTION()}Documentation en cours d'écriture [forums|voir ce fil de forum lié]{ATTENTION}

 attention
Documentation en cours d'écriture
voir ce fil de forum lié

Copy to clipboard
{INFO()}Il va pleuvoir ce soir, penses à prendre ton parapluie~hs~!{INFO}

 info
Il va pleuvoir ce soir, penses à prendre ton parapluie !

Copy to clipboard
{ASTUCE(close=y)}On peut rajouter une croix pour fermer ces trois boîtes (:cool:){ASTUCE}

 astuce
On peut rajouter une croix pour fermer ces trois boîtes 😎


Copy to clipboard
{navigation dossier="Le home studio" niveaux=1}

le paramètre dossier= est le nom de la page souhaité.
(le paramètre optionnel niveaux défini le nombre de sous-niveaux de l'arborescence affiché)




Insérer une image

Pour insérer une image dans une page wiki ou un fil de forum, suis la procédure suivante :

0 / Donne à ton image un nom de fichier explicite, pour faciliter les recherches dans les galeries de fichiers sur le site.
Exemple : « Ardour3_réglages_MIDI.png ».

1 / Place le curseur à l'endroit où tu souhaites que ton image apparaisse, puis clique sur l'icône « Choisir ou télécharger une image »Image de la barre d'édition

uploadpic1.PNG 2 / Une fenêtre surgissante apparaît, dedans clique sur le bouton « Parcourir... » pour envoyer une image.

Note : Si l'image est destinée à être affichée dans un forum, clique d'abord sur le bouton « liste des galeries », navigue dans le répertoire « Images > Forum » puis clique sur « Envoyer un fichier' » Une fenêtre similaire apparaît alors.

Note 2 : Si l'image est déjà sur le site, clique à la place sur le bouton « Parcourir la galerie ». Sélectionne l'image et passe à l'étape 5.


uploadpic2.PNG 3 / Une fois l'image sélectionnée sur ton disque dur, son nom s'affiche à coté du bouton « Parcourir... ».
Clique alors sur « Télécharger le(s) fichier(s) »


uploadpic3.PNG 4 / Quelques secondes plus tard apparaît la fenêtre ci-contre. Clique sur le lien.


5 / La fenêtre surgissante se referme et te voici de retour dans l'éditeur. Un bout de code wiki est apparu, il ressemble à ceci :
Copy to clipboard
{img fileId=1583 thumb=popup title="Cliquer pour agrandir"}


Et voilà ! Enregistre la page (ou envoi ton message de forum) et l'image apparaît.
Si tu souhaites personnaliser la manière dont elle s'affiche, cliques sur la croix ci-dessous et continue à lire.

Paramètres du plugiciel img

[+]

Insérer des pastilles numérotées dans vos images


N'hésitez pas à adjoindre des pastilles numérotés à vos copies d'écran ou vos schémas via le script-fu présent dans la page http://www.gillesmaire.com/tiki-index.php?page=draw-numbers. En un clic souris vous choisissez le nombre de pastilles et leur couleur et vous n'avez plus qu'à les positionner dans l'image pour en faire une légende plus précise.


Pour encore plus d'infos, voir :

Insérer une vidéo

Des exemples d'insertion de vidéo : spectrum3d, miditouch, midiball, Yamaha Studio Manager et Praxis Live.

HTML

[+]

Daily Motion

[+]

Youtube

[+]

Créer une page

voir Créer une page.


[+]

Commentaires


Pages verrouillées


Certaines pages sont verrouillées à l'écriture comme par exemple :
  • la page d'accueil, ceci dû a du spam sur cette page.


Les commentaires de cette page sont inaccessibles pour une raison ou pour une autre. (05 octobre 2014 - olinuxx). Je les ai supprimé par la BDD mais l'accès a l'écriture d'un nouveau commentaire est toujours non-fonctionnel.
Voici les commentaires qui étaient présent (les 5 premiers de pianolivier, le dernier de olinuxx recopié d'une page de jams) :
Cette note concerne le style mao.css
Si pour une raison ou pour une autre (comme en page d'accueil par exemple) vous souhaitez qu'un lien qui ne s'affiche pas normalement en orange (couleur des liens internes) soit affiché en orange (par exemple un lien externe), appliquez la syntaxe suivante :
Copy to clipboard
{DIV(class=wikilink)}[http://www.mon_lien.org/]{DIV}

Exemple, le lien webchat linuxmao s'affichera ainsi :

oliv'


--
Et même :
Copy to clipboard
{DIV(class=wikilink type=span)}[http://www.mon_lien.org/]{DIV}


---

Les {SPLIT} pour créer des colonnes dans une page, c'est bien. Mais cela comporte aussi quelques limitations, en particulier en terme de largeur de fenêtre minimum lorsque les colonnes contiennent des éléments à largeur définie (comme une image par exemple).
Par exemple, un split de deux colonnes dont les deux colonnes contiennent des images de 400px de large fait que la largeur minimum de la page sera de 800px, ce qui peut être impraticable sur certains petits écrans (eeepc par exemple).
Alors certe, dès fois, on souhaite qu'il y ai deux colonnes l'une en face de l'autre dans tous les cas, mais dans certains autres cas, ceci peut être évité, comme par exemple dans la page ci-dessus ("code" à gauche et "rendu" à droite peuvent être avantageusement remplacé par "code" au dessus et "rendu" en dessous sur les petits écrans, en particulier pour la démo de page wiki type)
Dans ce cas, voici la syntaxe à utiliser :
Copy to clipboard
{DIV(float=left)}élément à gauche ou au dessus{DIV}{DIV(class=inlineblock)}élément à droite ou en dessous{DIV}

On peut aussi ajouter les paramètres suivants au plugiciel DIV :
  • class=mw50pc
    rendu : largeur minimum 50% de la fenêtre

  • class=mw75pc
    rendu : largeur minimum 75% de la fenêtre

  • class=mw400px
    rendu : largeur minimum 400px
oliv'



--
Utilisé sur la page d'accueil :
Copy to clipboard
{DIV(class=signature)}L'équipe linuxmao{DIV}

rendu :
L'équipe linuxmao


oliv'


--
nonte : évidemment, on peut faire la même chose sans class css spécifique, mais cela demande à être vaildé par un administrateur et le code est plus compliqué
Copy to clipboard
{TAG(tag=div style="text-align:right;margin-right:20px;")}L'équipe linuxmao{TAG}

rendu :
L'équipe linuxmao


oliv'



--



{FLASH(movie=http://www.dailymotion.com/swf/x1893g8,width=>480,height=>270,quality=>high)}{FLASH}



[+]

Historique

Information Version
Sun 10 Apr 2016 22:31 olinuxx 465
Afficher
Sun 10 Apr 2016 22:30 olinuxx 464
Afficher
Sun 10 Apr 2016 22:14 olinuxx revue de la page OK 463
Afficher
Sun 10 Apr 2016 22:10 olinuxx inutile 462
Afficher
Sun 10 Apr 2016 22:08 olinuxx formulation 461
Afficher
Sun 10 Apr 2016 22:06 olinuxx correction 460
Afficher
Sun 10 Apr 2016 22:06 olinuxx fautes orthographes + simplification + CODE 459
Afficher
Sun 10 Apr 2016 21:57 olinuxx correction d'un lien (pour de vrai ce coup ci peut être) 458
Afficher
Sun 10 Apr 2016 21:57 olinuxx correction d'un lien 457
Afficher
Sun 10 Apr 2016 21:55 olinuxx correction d'un lien 456
Afficher
Sun 10 Apr 2016 21:53 olinuxx mise en page + drapeaux FR 455
Afficher
Sun 10 Apr 2016 21:51 olinuxx mise en page + cohérence 454
Afficher
Sun 10 Apr 2016 21:39 olinuxx simplification du code 453
Afficher
Sun 10 Apr 2016 21:33 olinuxx mise en page 452
Afficher
Sun 10 Apr 2016 21:31 olinuxx mise en page 451
Afficher
Sun 10 Apr 2016 21:30 olinuxx 450
Afficher
Sun 10 Apr 2016 21:29 olinuxx mise en page 449
Afficher
Sun 10 Apr 2016 21:28 olinuxx mise à jour + corrections + mise en page 448
Afficher
Sun 10 Apr 2016 21:12 olinuxx mise à jour + corrections + mise en page 447
Afficher
Sun 10 Apr 2016 01:51 olinuxx 446
Afficher
Sun 10 Apr 2016 01:46 olinuxx mise en page 445
Afficher
Sun 10 Apr 2016 01:44 olinuxx rédaction + mise en page 444
Afficher
Sun 10 Apr 2016 00:48 olinuxx mise en page 443
Afficher
Sun 10 Apr 2016 00:33 olinuxx mise en page + drapeaux FR 442
Afficher
Sun 10 Apr 2016 00:30 olinuxx rédaction + mise en page 441
Afficher
Sun 10 Apr 2016 00:20 olinuxx mise en page 440
Afficher
Sun 10 Apr 2016 00:19 olinuxx rédaction 439
Afficher
Sun 10 Apr 2016 00:18 olinuxx rédaction 438
Afficher
Sun 10 Apr 2016 00:17 olinuxx rédaction 437
Afficher
Sun 10 Apr 2016 00:13 olinuxx 436
Afficher
Sun 10 Apr 2016 00:12 olinuxx mise en page 435
Afficher
Sun 10 Apr 2016 00:01 olinuxx rédaction 434
Afficher
Sat 09 Apr 2016 23:41 olinuxx amélioration 433
Afficher
Sat 09 Apr 2016 23:37 olinuxx mise à jour 432
Afficher
Sat 09 Apr 2016 23:02 olinuxx 431
Afficher
Sat 09 Apr 2016 22:59 olinuxx mise à jour du nombre de pages 430
Afficher
Sat 09 Apr 2016 22:45 olinuxx 429
Afficher
Sat 09 Apr 2016 00:53 olinuxx (pas de vidéo dans cette page) 428
Afficher
Sat 09 Apr 2016 00:37 olinuxx 427
Afficher
Thu 07 Apr 2016 03:53 olinuxx 426
Afficher
Thu 07 Apr 2016 01:46 olinuxx 425
Afficher
Thu 07 Apr 2016 01:38 olinuxx 424
Afficher
Sat 26 Mar 2016 19:37 olinuxx 423
Afficher
Sat 26 Dec 2015 18:36 gilles 422
Afficher
Sat 26 Dec 2015 18:34 gilles 421
Afficher
Sat 26 Dec 2015 18:31 gilles 420
Afficher
Thu 17 Dec 2015 20:23 olinuxx + lien vers la doc officielle 419
Afficher
Fri 06 Nov 2015 14:29 olinuxx Recherche et remplacement en masse 418
Afficher
Tue 20 Oct 2015 03:22 olinuxx corrections fautes + mise en page 417
Afficher
Sat 25 Jul 2015 15:06 olinuxx mise à jour 416
Afficher