====== AIDE WIKIPEDIA LARGIER ======

Ce manuel est conçu pour répondre à toutes les questions standards concernant l’utilisation du Wiki Largier. \\
Il contient des informations utiles aussi bien aux utilisateurs « standards » qu’aux "administrateurs".
\\ \\

===== I TUTORIEL =====


Ici vous êtes dans la partie tutoriel, ce tutoriel est destiné à vous aider à comprendre Wikipedia et à rédiger vos premiers articles.
\\ \\

==== I.1 BIEN DÉBUTER DANS WIKIPEDIA ====

**Prérequis avant la création d’un article :** \\
  *Connaître le fonctionnement d’un Wikipédia
  *S’enregistrer en tant qu’utilisateur sur le Wikipédia pour avoir toutes les cartes en main pour lire, modifier, publier, commenter et discuter sur un ou plusieurs thèmes.
  *Avoir un plan et des règles d’élaboration prédéfinies.
  *Choisir un thème ou un sujet.
  *Ne pas hésiter à s’inspirer d’autres articles avant de commencer la création.
  *Connaître les bases de la syntaxe Wikipédia.
  *Avoir des sources fiables et vérifiables, n’hésitez pas à donner vos sources (Ex : lien vers une documentation, lien internet, lien interne, nom du livre ou de l’auteur, etc).
\\
==== I.2 COMPRÉHENSION DE L'INTERFACE DE NOTRE WIKIPEDIA ====
\\
{{aide_wiki:img_tuto1.png?nolink|}}
\\ \\

==== I.3 BASE DE LA SYNTAXE WIKIPEDIA ====
\\

=== Interface de création d'un article (éditeur visuel) ===

{{aide_wiki:img_tuto2.png?nolink|}}

Cet éditeur visuel génère automatiquement les balises les plus utilisées dans Wikipedia.
Cependant, pour les autres balises il vous faudra les connaître et savoir les utiliser.
\\ \\

=== Approfondissement des fonctionnalités de notre wiki ===

=== Sauter une ligne ou former des paragraphes ===

  Pour former des paragraphes : sauter une ligne
  
  Si vous voulez simplement faire un retour à la ligne vous devrais utiliser \\
  Ne l'utiliser que quand c'est vraiment utile

=== Citation ===

<btn type="primary" size="sm" modal="modal-citation">Voir la démo</btn>
 
<modal id="modal-citation" title="Citation">
<blockquote>
Citation : \\
“La connaissance, c'est partager le savoir qui nous fait grandir.” \\
<cite>Olivier Lockert</cite> 
</blockquote>
</modal>

  <blockquote>
  Citation : \\
  “La connaissance, c'est partager le savoir qui nous fait grandir.” \\
  <cite>Olivier Lockert</cite> 
  </blockquote>
  
=== Couleur du texte ===
 
Exemple :
 
<color red>Le texte est en rouge</color> \\
<color red /yellow>**__//Ce texte est en rouge, surligné en jaune, en italique + gras (styles combiné)//__**</color>

  <color red>Le texte est en rouge</color> \\
  <color red /yellow>**__//Ce texte est en rouge, surligné en jaune, en italique + gras (styles combiné)//__**</color>

=== Indice ou exposant ===

Ceci est un nombre ayant un indice : 27<sub>4</sub> \\
Celui-ci a un exposant : 32<sup>7</sup>

  Ceci est un nombre ayant un indice : 27<sub>4</sub> \\
  Celui-ci a un exposant : 32<sup>7</sup>

=== Case à cocher ===

Exemple :

<todo>Ceci est une case à cocher, une fois cocher le texte sera barré</todo>

  <todo>Ceci est une case à cocher, une fois cocher le texte sera barré</todo>

=== Accordéon ===

<btn type="primary" size="sm" modal="modal-accordeon">Voir la démo</btn>
 
<modal id="modal-accordeon" title="Accordéon">
<accordion>
<panel type="success" title="Cliquez ici pour afficher ou cacher le contenu">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</panel>
</accordion>
</modal>

  <accordion>
  <panel type="success" title="Cliquez ici pour afficher ou cacher le contenu">
  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non   cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it   squid single-origin coffee nulla assumenda shoreditch et.
  </panel>
  </accordion>

=== Cadres Alerte ===

<btn type="primary" size="sm" modal="modal-cadres-alerte">Voir la démo</btn>
 
<modal id="modal-cadres-alerte" title="Cadres Alerte">
<alert type="success">Alerte Success</alert>
<alert type="info">Alerte Info</alert>
<alert type="warning">Alerte Attention</alert>
<alert type="danger">Alerte Danger</alert>
</modal>

  <alert type="success">Alerte Success</alert>
  <alert type="info">Alerte Info</alert>
  <alert type="warning">Alerte Attention</alert>
  <alert type="danger">Alerte Danger</alert>

=== Labels ===

<label type="default">Defaut</label>
<label type="primary" icon="glyphicon glyphicon-home">Primary</label>
<label type="success" icon="glyphicon glyphicon-signal">Success</label>
<label type="info" icon="true">Info</label>
<label type="warning">Warning</label>
<label type="danger" icon="glyphicon glyphicon-warning-sign">Danger</label>

  <label type="default">Defaut</label>
  <label type="primary" icon="glyphicon glyphicon-home">Primary</label>
  <label type="success" icon="glyphicon glyphicon-signal">Success</label>
  <label type="info" icon="true">Info</label>
  <label type="warning">Warning</label>
  <label type="danger" icon="glyphicon glyphicon-warning-sign">Danger</label>

L'attribut <color red>"icon"</color> est optionnel à vous de voir selon vos envies.

=== Boutons ===

Exemples :

<btn type="default">Default</btn>
<btn type="primary">Primary</btn>
<btn type="success">Success</btn>
<btn type="info">Info</btn>
<btn type="warning">Warning</btn>
<btn type="danger">Danger</btn>
<btn type="link">Lien</btn>

  <btn type="default">Default</btn>
  <btn type="primary">Primary</btn>
  <btn type="success">Success</btn>
  <btn type="info">Info</btn>
  <btn type="warning">Warning</btn>
  <btn type="danger">Danger</btn>
  <btn type="link">Lien</btn>
  
=== Lien avec un bouton + icône ===

<btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:|Accueil du Wiki]]</btn>

  <btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:|Accueil du Wiki]] \\</btn>
  
=== Taille des boutons === 

<btn type="primary" size="sm" modal="modal-taille-bouton">Voir la démo</btn>
 
<modal id="modal-taille-bouton" title="Taille des boutons">
<btn type="primary" size="lg">Large button</btn>
<btn type="default" size="lg">Large button</btn>
 
<btn type="primary">Default button</btn>
<btn type="default">Default button</btn>
 
<btn type="primary" size="sm">Small button</btn>
<btn type="default" size="sm">Small button</btn>
 
<btn type="primary" size="xs">Extra small button</btn>
<btn type="default" size="xs">Extra small button</btn>
</modal>

  <btn type="primary" size="lg">Large button</btn>
  <btn type="default" size="lg">Large button</btn>
  <btn type="primary">Default button</btn>
  <btn type="default">Default button</btn>
  <btn type="primary" size="sm">Small button</btn>
  <btn type="default" size="sm">Small button</btn>
  <btn type="primary" size="xs">Extra small button</btn>
  <btn type="default" size="xs">Extra small button</btn>

=== Bouton sur toute la largeur de la page ===

<btn type="primary" size="lg" block="true">Bouton (largeur = 100%)</btn>
<btn type="default" size="lg" block="true">Bouton (largeur = 100%)</btn>

  <btn type="primary" size="lg" block="true">Block level button</btn>
  <btn type="default" size="lg" block="true">Block level button</btn>
 
=== Bouton Activé / désactivé ===
  
<btn type="primary" >Actif</btn> <btn type="default">Actif</btn> \\ \\
<btn type="primary" disabled="true">Désactivé</btn> <btn type="default" disabled="true">Désactivé</btn>
  
  <btn type="primary" >Actif</btn> <btn type="default">Actif</btn> \\ \\
  <btn type="primary" disabled="true">Désactivé</btn> <btn type="default" disabled="true">Désactivé</btn>
  
=== Badges ===

Exemple :

Likes <badge>42</badge>

<btn type="primary">Messages <badge>4</badge></btn>

  Likes <badge>42</badge>
  <btn type="primary">Messages <badge>4</badge></btn>

=== Groupement de listes + badges (idées d'utilisation) ===

<list-group>
  * Nombre de pièces en stock <badge>14</badge>
  * Nombre de pièces utilisés <badge>2</badge>
  * Nombre de pièces cassées ou manquantes <badge>1</badge>
</list-group>

  <list-group>
  * Nombre de pièces en stock <badge>14</badge>
  * Nombre de pièces utilisés <badge>2</badge>
  * Nombre de pièces cassées ou manquantes <badge>1</badge>
  </list-group>

=== Callouts ===

Un callout sert à attirer l'attention de l'utilisateur.

<callout title="Callout par défaut">
C'est un callout par défaut.
</callout>
  
  <callout>
  === Callout par défaut ===
  C'est un callout par défaut.
  </callout>
   OU
  <callout title="Callout par défaut">
  C'est un callout par défaut.
  </callout>

<btn type="primary" size="sm" modal="modal-callouts">Voir la démo pour les autres options</btn>
 
<modal id="modal-callouts" title="Callouts">
<callout type="primary" title="Callout primary">
C'est un callout de type primary.
</callout>

<callout type="success" title="Callout success">
C'est un callout de type success.
</callout>

<callout type="info" title="Callout info">
C'est un callout de type info.
</callout>

<callout type="warning" title="Callout warning">
C'est un callout de type warning.
</callout>

<callout type="danger" title="Callout danger">
C'est un callout de type danger.
</callout>

  <callout type="primary, success, warning, danger" title="Callout danger">
  C'est un callout de type danger.
  </callout>

**Pour rajouter une icône aux callouts il suffit de rajouter le préfixe icon="true"**

Exemple :

<callout type="success" title="Callout success" icon="true">
C'est un callout de type success avec une icône.
</callout>

**D'autres type de callouts**

Exemple :

  *type="question"
  *type="tip"

<callout type="question" title="Callout question" icon="true">...</callout>
<callout type="tip" title="Callout tip" icon="true">...</callout>

**Callouts personnalisable**

Exemple :

<callout color="blue" icon="fa fa-user"> Ceci est un callout personnalisé (icône + couleur)</callout>
<callout type="success" icon="fa fa-plus">Ceci est un callout de type success avec une icône personnalisée</callout>

  <callout color="blue" icon="fa fa-user"> Ceci est un callout personnalisé (icône + couleur)</callout>
  <callout type="success" icon="fa fa-plus">Ceci est un callout de type success avec une icône personnalisée</callout>
</modal>
  
<color red>**Pour la liste des icônes disponible allez voir [[|Icône]]**</color>

=== Afficher ou cacher du texte avec un bouton ===

Exemple :

L'attribut //"collapse"// contient l'//"id"// de votre //block// à afficher, choisissez un type ou le bouton sera par défaut.

<btn collapse="block" type="success">Clique Moi</btn>
 
<collapse id="block" collapsed="true"><well>
Mettre le contenu à afficher dans ce block, lors du clique sur le bouton, le block sera soit affiché soit caché. \\
Cette fonction ressemble beaucoup à l'accordéon vu précédemment.
</well></collapse>

  <btn collapse="block" type="success">Clique Moi</btn>
  
  <collapse id="block" collapsed="true"><well>
  Mettre le contenu à afficher dans ce block, lors du clique sur le bouton, le block sera soit affiché soit caché. \\
  Cette fonction ressemble beaucoup à l'accordéon vu précédemment.
  </well></collapse>

=== Comment importer un fichier ou une image via l’éditeur visuel ===

Au préalable veuillez enregistrer votre image dans F:\COMMUN\Base Information\Informatique\Dev_Largier\Wiki et merci de créer votre catégorie ("dossier qui porte le nom de la catégorie de l'article //EX : Aide_Wiki//") si il n'existe pas déjà.
Ensuite, rendez-vous dans l'éditeur visuel et cliquer sur "importer une image ou un autre fichier" : \\ \\
{{:aide_wiki:img_tuto10.png?nolink&450|}} \\ \\
{{aide_wiki:img_tuto4.png?nolink|}}

Puis dans la nouvelle fenêtre "Sélection de fichiers" aller cherche votre image et importer la. \\ \\
{{aide_wiki:img_tuto5.png?nolink|}}

Pour finir cliquer sur l'image que vous avez importer puis personnalisé l'insertion de l'image dans votre article et cliquer sur "OK". \\ \\
{{aide_wiki:img_tuto6.png?nolink |}}
\\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\


=== Petite touche sur les images ===

Exemple :

<image shape="circle">
{{:commercial:logo_largier-technologie.jpg?nolink&100|}}
</image>
  <image shape="circle">
  {{:commercial:logo_largier-technologie.jpg?nolink&100|}}
  </image>

<image shape="thumbnail">
{{:commercial:logo_largier-technologie.jpg?nolink&100|}}
</image>
  <image shape="thumbnail">
  {{:commercial:logo_largier-technologie.jpg?nolink&100|}}
  </image>

=== Jumbotron (image de fond + couleur du texte) ===

<btn type="primary" size="sm" modal="modal-jumbotron">Voir la démo</btn>
 
<modal id="modal-jumbotron" title="Jumbotron (image de fond + couleur du texte)">
<jumbotron background=":aide_wiki:bg_jumbotron.jpg" color="#fff">
<fs x-large>Hello World !</fs> \\

----
 
Lorem ipsum dolor sit amet, \\
consectetur adipisici elit, \\
sed eiusmod tempor incidunt \\
ut labore et dolore magna aliqua. \\
Ut enim ad minim veniam, quis nostrud \\
exercitation ullamco laboris nisi ut aliquid \\
ex ea commodi consequat. Quis aute iure reprehenderit \\
in voluptate velit esse cillum dolore \\
eu fugiat nulla pariatur. \\
Excepteur sint obcaecat cupiditat non proident, \\
sunt in culpa qui officia deserunt mollit anim id est laborum. 
</jumbotron>
</modal>

  <jumbotron background=":aide_wiki:bg_jumbotron.jpg" color="#fff">
  <fs x-large>Hello World !</fs> \\
  ----  
  Lorem ipsum [...] anim id est laborum. 
  </jumbotron>

=== Carousel (galerie d'image) ===

<callout type="info" icon="true">
La taille minimum pour vos galeries d'images reste encore à définir, pour l'instant je l'ai fixé à 800 pixels en largeur. \\

Je vous conseils de prendre des images de taille identique ou presque. \\
Ex : 800x450, 800x500,  800x550, 800x600
</callout>

<btn type="primary" size="sm" modal="modal-carousel">Voir la démo</btn>
 
<modal id="modal-carousel" title="Carousel (galerie d'image)">
<carousel interval="6000">
{{:aide_wiki:carousel_1.jpg?nolink&800x500|}}
{{:aide_wiki:carousel_2.jpg?nolink&800x500|}}
{{:aide_wiki:carousel_3.jpeg?nolink&800x500|}}
</carousel>
</modal>

  <carousel interval="5000">
  {{:aide_wiki:carousel_1.jpg?nolink&800x500|}}
  {{:aide_wiki:carousel_2.jpg?nolink&800x500|}}
  {{:aide_wiki:carousel_3.jpeg?nolink&800x500|}}
  </carousel>
  
<color red>Interval :</color> C'est l'intervalle de temps en (ms) entre l'affichage de chaque image. \\
Si Interval = "false", le mode automatique est désactivé, changement d'image manuelle.

Vous pouvez aussi rajouter du texte sur vos diapositives.

<btn type="primary" size="sm" modal="modal-carousel-texte">Voir la démo</btn>
 
<modal id="modal-carousel-texte" title="Carousel (galerie d'image) + ajout texte">
<carousel interval="false">
<slide>
{{:aide_wiki:carousel_1.jpg?nolink&800x500|}}
<caption>
<fs medium>Première diapositive</fs> \\
Photographe à la montagne.
</caption>
</slide>
<slide>
{{:aide_wiki:carousel_2.jpg?nolink&800x500|}}
<caption>
<fs medium>Deuxième diapositive</fs> \\
Coccinelle qui se balade tranquillement...
</caption>
</slide>
<slide>
{{:aide_wiki:carousel_3.jpeg?nolink&800x500|}}
<caption>
<fs large>Troisième diapositive</fs> \\
Archive d'une course automobile.
</caption>
</slide>
</carousel>
</modal>

  <carousel>
  <slide>
  {{:aide_wiki:carousel_1.jpg?nolink&800x500|}}
  <caption>
  <fs large>Première diapositive</fs> \\
  Photographe à la montagne.
  </caption>
  </slide>
  <slide>
  {{:aide_wiki:carousel_2.jpg?nolink&800x500|}}
  <caption>
  <fs large>Deuxième diapositive</fs> \\
  Coccinelle qui se balade tranquillement...
  </caption>
  </slide>
  <slide>
  {{:aide_wiki:carousel_3.jpeg?nolink&800x500|}}
  <caption>
  <fs large>Troisième diapositive</fs> \\
  Archive d'une course automobile.
  </caption>
  </slide>
  </carousel>

=== Navigation et menus ===

Menu Tabs:

<btn type="primary" size="sm" modal="modal-nav-menu-tabs">Voir la démo</btn>
 
<modal id="modal-nav-menu-tabs" title="Navigation et menus">
<nav type="tabs">
  * [[:|Accueil]]
  * [[informatique:informatique|Informatique]]
  * [[piscine:referentiel_piscine|Référentiel piscine]]
  * Commercial
    * [[commercial:composants_de_presentation|Composants de présentation]]
    * [[commercial:acces_dematerialisation|Accès dématerialisation]]
</nav>
</modal>

  <nav type="tabs">
  * [[:|Accueil]]
  * [[informatique:informatique|Informatique]]
  * [[piscine:referentiel_piscine|Référentiel piscine]]
  * Commercial
    * [[commercial:composants_de_presentation|Composants de présentation]]
    * [[commercial:acces_dematerialisation|Accès dématerialisation]]
  </nav>

<callout type="tip" icon="true">
<html><nav type="tabs"></html> peut être remplacé par <html><tabs></html> \\
Le menu Tabs peut être centré grâce à l'attribut <html>justified = "true"</html> 
</callout>

Menu Pills :

<btn type="primary" size="sm" modal="modal-nav-menu-pills">Voir la démo</btn>
 
<modal id="modal-nav-menu-pills" title="Navigation et menus">
<nav type="pills">
  * [[:|Accueil]]
  * [[informatique:informatique|Informatique]]
  * [[piscine:referentiel_piscine|Référentiel piscine]]
  * Commercial
    * [[commercial:composants_de_presentation|Composants de présentation]]
    * [[commercial:acces_dematerialisation|Accès dématerialisation]]
</nav>
</modal>

  <nav type="pills">
  * [[:|Accueil]]
  * [[informatique:informatique|Informatique]]
  * [[piscine:referentiel_piscine|Référentiel piscine]]
  * Commercial
    * [[commercial:composants_de_presentation|Composants de présentation]]
    * [[commercial:acces_dematerialisation|Accès dématerialisation]]
  </nav>

<callout type="tip" icon="true">
<html><nav type="pills"></html> peut être remplacé par <html><pills></html> \\
Le menu Pills peut être centré grâce à l'attribut <html>justified = "true"</html> 
</callout>

Menu vertical :

<btn type="primary" size="sm" modal="modal-nav-menu-pills-stacked">Voir la démo</btn>
 
<modal id="modal-nav-menu-pills-stacked" title="Navigation et menus">
<nav type="pills" stacked="true">
  * [[:|Accueil]]
  * [[informatique:informatique|Informatique]]
  * [[piscine:referentiel_piscine|Référentiel piscine]]
  * Commercial
    * [[commercial:composants_de_presentation|Composants de présentation]]
    * [[commercial:acces_dematerialisation|Accès dématerialisation]]
</nav>
</modal>

  <nav type="pills" stacked="true">
  * [[:|Accueil]]
  * [[informatique:informatique|Informatique]]
  * [[piscine:referentiel_piscine|Référentiel piscine]]
  * Commercial
    * [[commercial:composants_de_presentation|Composants de présentation]]
    * [[commercial:acces_dematerialisation|Accès dématerialisation]]
  </nav>

=== Panels ou fenêtres ===

<btn type="primary" size="sm" modal="modal-panels">Voir la démo</btn>
 
<modal id="modal-panels" title="Panels ou fenêtres">
<panel type="default" title="Titre de la fenêtre" subtitle="Sous-titre de la fenêtre">
Le contenu de la fenêtre
</panel>

<panel type="primary" title="Titre de la fenêtre" subtitle="Sous-titre de la fenêtre">
Le contenu de la fenêtre
</panel>

<panel type="success" title="Titre de la fenêtre" subtitle="Sous-titre de la fenêtre">
Le contenu de la fenêtre
</panel>

<panel type="info" title="Titre de la fenêtre" subtitle="Sous-titre de la fenêtre">
Le contenu de la fenêtre
</panel>

<panel type="warning" title="Titre de la fenêtre" subtitle="Sous-titre de la fenêtre">
Le contenu de la fenêtre
</panel>

<panel type="danger" title="Titre de la fenêtre" subtitle="Sous-titre de la fenêtre">
Le contenu de la fenêtre
</panel>
</modal>

  <panel type="primary" title="Panel title">Panel content</panel>
  <panel type="success" title="Panel title">Panel content</panel>
  <panel type="info" title="Panel title">Panel content</panel>
  <panel type="warning" title="Panel title">Panel content</panel>
  <panel type="danger" title="Panel title">Panel content</panel>
  
=== Pop-up ===

Pop-up par défaut :

<popover title="Pop-up par défaut" content="Ceci est le contenu de la Pop-up, pour l'afficher ou la cacher, cliquez sur le bouton"><btn type="danger" size="sm">Clique ici pour ouvrir la Pop-up</btn></popover>

  <popover title="Pop-up" content="Ceci est le contenu de la Pop-up, pour l'afficher ou la cacher, cliquez sur le bouton"><btn type="danger" size="sm">Clique ici pour ouvrir la Pop-up</btn></popover></html>

Pop-up, ouverture sur 4 directions :

<popover title="Pop-up droite" placement="right" content="Affichage de la Pop-up à droite"><btn type="danger" size="sm">Ouvrir Pop-up à droite</btn></popover>
<popover title="Pop-up au-dessus" placement="top" content="Affichage de la Pop-up au dessus"><btn type="danger" size="sm">Ouvrir Pop-up au-dessus</btn></popover>
<popover title="Pop-up en-dessous" placement="bottom" content="Affichage de la Pop-up en-dessous"><btn type="danger" size="sm">Ouvrir Pop-up en-dessous</btn></popover>
<popover title="Pop-up à gauche" placement="left" content="Affichage de la Pop-up à gauche"><btn type="danger" size="sm">Ouvrir Pop-up à gauche</btn></popover>

<callout type="tip" icon="true">
Pour rajouter l'option du positionnement de la Pop-up, il vous suffit de rajouter l'attribut \\
<html>placement="left ou right ou top ou bottom"</html>
\\ \\
Exemple de code :

<html><popover title="Pop-up à droite" placement="right" content="Affichage de la Pop-up à droite"><btn type="danger" size="sm">Ouvrir Pop-up à droite</btn></popover></html>
</callout>

Disparition de la fenêtre si clique ailleurs :

<popover title="Pop-up fermeture sur perte focus" trigger="focus" content="Affichage de la Pop-up"><btn type="danger" size="lg">Fermeture Pop-up sur perte de focus</btn></popover>

<callout type="tip" icon="true">
Pour rajouter l'option de fermeture lors de la perte du focus (clique ailleurs sur la page). \\
Il vous suffit de rajouter l'attribut <html><trigger="focus"</html>
\\ \\
Exemple de code :

<html><popover title="Pop-up fermeture sur perte focus" trigger="focus" content="Affichage de la Pop-up"><btn type="danger" size="lg">Fermeture Pop-up sur perte de focus</btn></popover></html>
</callout>

=== ProgressBar ===

<btn type="primary" size="sm" modal="modal-progressbar">Voir la démo</btn>
 
<modal id="modal-progressbar" title="Panels ou fenêtres">

ProgressBar par défaut avec une valeur de 60% :

<progress>
<bar value="60"></bar>
</progress>

  <progress>
  <bar value="60"></bar>
  </progress>

ProgressBar avec pourcentage affiché :

<progress>
<bar value="60" showvalue="true"></bar>
</progress>

<callout type="tip" icon="true">
Rajout de l'affichage du poucentage sur le ProgressBar grâce à l'attribut <html>showvalue="true"</html>
\\ \\
Exemple de code :

  <progress>
  <bar value="60" showvalue="true"></bar>
  </progress>
</callout>

ProgressBar avec les différents types ("success", "info", "warning", "danger") :

<progress>
<bar value="40" type="success"></bar>
</progress>
 
<progress>
<bar value="20" type="info"></bar>
</progress>
 
<progress>
<bar value="60" type="warning"></bar>
</progress>
 
<progress>
<bar value="80" type="danger"></bar>
</progress>

  <progress><bar value="40" type="success"></bar></progress> 
  <progress><bar value="20" type="info"></bar></progress> 
  <progress><bar value="60" type="warning"></bar></progress> 
  <progress><bar value="80" type="danger"></bar></progress>

ProgressBar avec des Stripe :

<progress><bar value="50" striped="true"></bar></progress>

<callout type="tip" icon="true">
Pour rajouter les stripe il vous suffit de rajouter l'attribut <html>striped="true"</html>
\\ \\
Exemple de code :

<html><progress><bar value="50" striped="true"></bar></progress></html>
</callout>

ProgressBar avec stripe + animation :

<progress><bar value="50" striped="true" animate="true"></bar></progress>

<callout type="tip" icon="true">
Pour rajouter les stripe + animation il vous suffit de rajouter l'attribut <html>striped="true" animate="true"</html>
\\ \\
Exemple de code :

<html><progress><bar value="50" striped="true" animate="true"></bar></progress></html>
</callout>

ProgressBar multiple :

<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>

<callout type="tip" icon="true">
Pour rajouter l'option multi-progressBar il vous suffit de rajouter l'attribut <html>striped="true"</html>
\\ \\
Exemple de code :

<html><progress></html> \\
<html><bar value="35" type="success" striped="true"></bar></html> \\
<html><bar value="20" type="warning" striped="true"></bar></html> \\
<html><bar value="10" type="danger" striped="true"></bar></html> \\
<html></progress></html>
</callout>
</modal>

=== Alignement du texte ===

<TEXT align="left">Texte aligné à droite.</TEXT>
<TEXT align="center">Texte aligné au centre.</TEXT>
<TEXT align="right">Texte aligné à gauche.</TEXT>
<TEXT align="justify">Texte justifié.</TEXT>

<callout type="tip" icon="true">
La <color red>//**balise**//</color> <html><TEXT></TEXT></html> doit bien être en <color red>//**MAJUSCULE**//</color> car si non ce n'est pas la même fonctionnalité à qui on fait appel et l'alignement ne fonctionnera pas.
\\ \\
Exemple de code :

<html><TEXT align="left">Texte aligné à droite.</TEXT></html> \\
<html><TEXT align="center">Texte aligné au centre.</TEXT></html> \\
<html><TEXT align="right">Texte aligné à gauche.</TEXT></html> \\
<html><TEXT align="justify">Texte justifié.</TEXT></html> \\
</callout>

=== Thumbnails ===

Exemple :

<grid>
<col xs="12" sm="6" md="3" lg="3">
<thumbnail>
{{:aide_wiki:bg_jumbotron.jpg?nolink&250|}}
<caption>
<fs large>**DokuWiki**</fs> \\
 
//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax.//
</caption>
</thumbnail>
</col>
<col xs="12" sm="6" md="3" lg="3">
<thumbnail>
{{:aide_wiki:bg_jumbotron.jpg?nolink&250|}}
<caption>
<fs large>**DokuWiki**</fs> \\
 
//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax.//
</caption>
</thumbnail>
</col>
<col xs="12" sm="6" md="3" lg="3">
<thumbnail>
{{:aide_wiki:bg_jumbotron.jpg?nolink&250|}}
<caption>
<fs large>**DokuWiki**</fs> \\
 
//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax.//
</caption>
</thumbnail>
</col>
<col xs="12" sm="6" md="3" lg="3">
<thumbnail>
{{:aide_wiki:bg_jumbotron.jpg?nolink&250|}}
<caption>
<fs large>**DokuWiki**</fs> \\
 
//DokuWiki is a simple to use and highly versatile Open Source wiki software that doesn't require a database. It is loved by users for its clean and readable syntax.//
</caption>
</thumbnail>
</col>
</grid>

<btn collapse="explication-thumbnails" type="success">Cliquer pour plus de détails</btn>

<collapse id="explication-thumbnails" collapsed="true"><well>
<callout type="tip" icon="true">
Explication de la balise <html><col xs="xx" md="xx" lg="xx">...</col></html> et de ses attributs. \\
Cette balise délimite un bloc et ses attributs lui permettent de rendre le tout compatible avec toutes les résolutions d'écran avec un calcul simple. \\ \\

{{:aide_wiki:thumbnails_2.png?nolink|}}

Par défaut la largeur d'une page contient 12 colonnes. \\
{{:aide_wiki:thumbnails_1.png?nolink&|}}

Donc si par exemple nous voulons afficher 4 blocs qui seront alignés sur toute la largeur sur grand écran on va utiliser : \\ \\
<html><col lg="3">...</col></html>
\\ \\
<color blue>**Bloc 1**</color>, <color yellow>**Bloc 2**</color>, <color grey>**Bloc 3**</color>, <color green>**Bloc 4**</color> \\
Pourquoi ? Car la largeur totale = 12, donc on fais le calcul : 12/Nbr de blocs(ici 4) = 3

Si on laisse la balise <html><col lg="3">...</col></html> une fois la résolution de l'écran trop basse voici le résultat : \\
{{:aide_wiki:thumbnails_4.png?nolink|}}

Mais on peut faire mieux que ça, grâce à l'utilisation des autres attributs, si on veux obtenir quelque chose de propre et structuré on préfèrera aligner les blocs les uns en dessous des autres mais petit à petit ou on peut aussi forcer les blocs à rester sur la même ligne (ils vont juste se redimensionner, généralement utilisé pour 2 ou 3 blocs). \\

Pour obtenir ce résultat : \\

{{:aide_wiki:thumbnails_5.png?nolink|}}

Il va donc falloir combiner tous les attributs. \\
<html><col xs="12" sm="6" md="3" lg="3">...</col></html> ce bout de code donnera donc ce résultat pour 4 blocs //(voir ci-dessous)//. \\
Notez que je n'ai pas changé la valeur entre <html>lg</html> et <html>md</html> pour que les 4 blocs restent bien alignés sur une seule ligne pour un écran large ou moyen.

{{:aide_wiki:thumbnails_6.png?nolink|}}

Je vous donnes un morceau du code final pour 4 blocs : \\ \\
//(Le résultat sera la même que sur mon exemple).//

<html><grid></html> \\
<html><col xs="12" sm="6" md="3" lg="3"></html> \\
<html><thumbnail></html> \\
<html>[votre_image]</html> \\
<html><caption></html> \\
<html><fs large>[Votre_Titre]</fs></html> \\
<html>[Votre_Contenu...]</html> \\
<html></caption></html> \\
<html></thumbnail></html> \\
<html></col></html> \\
<html>[Vos_Autres_Blocs]</html> \\
<html></grid></html> \\
</callout>
</well>
</collapse>

\\ \\ \\
===== II CENTRE D'ENTRAINEMENT ET DE FORMATION =====

\\
Cette rubrique vous permettra de vous entrainer sur l'élaboration d'article dans le Wikipedia. \\
N'hésitez pas à vous en servir pour faire des essais, tests, ou toutes autres mise en page.

Sera visible dans le futur des articles de tests conçus par d'autres utilisateurs du Wiki (voir dans le menu de gauche sous Aide Wiki --> Test Nom d'utilisateur) \\
Un modèle commun pour l'apprentissage est disponible dans : [[modele_de_test|Modèle de TEST]]
\\ \\
==== II.1 PRÉMICES DE LA CRÉATION D'UN ARTICLE ====

__**Objectifs :**__ \\
L'objectif principal est de vous aider à créer votre premier article. \\

**Voici les étapes à suivre :**
  *Créé un nouvel article dans le ([[:sidebar|Menu du Wiki Largier]])
  *Ouvrir votre première page
  *Rédiger votre premier article en suivant un modèle


__1ère Étape :__ \\

Pour créer votre première article rendez-vous dans ([[:sidebar|Menu du Wiki Largier]]).
Puis dans ce menu sous (1.Modèle de TEST) créer votre propre nouvelle page \\

__Exemple :__
  [[Aide_Wiki:test kevin]]
  Aide_Wiki : Catégorie de l'article
  test kevin : Titre de l'article
\\

__2ème Étape :__ \\

Ouvrez l'article que vous venez de créer. \\
{{aide_wiki:img_tuto7.png?nolink|}}
\\ \\
Et commencer à élaborer votre premier article en cliquant sur "Créer cette page" et grâce au : [[modele_de_test|Modèle de TEST]] \\
{{aide_wiki:img_tuto8.png?nolink|}}
\\ \\

Je vous donne le début pour bien commencer votre article : \\ \\
{{aide_wiki:img_tuto9.png?nolink|}}

**__RAPPEL :__** \\
Soyez ordonné dans le plan de votre article, pour que la table des matières sois la plus organiser possible.
Pour cela voici un exemple d'organisation au sein même d'un article. \\
<color red /yellow>**/!\ __Les titres sont en majuscules jusqu'au titre de niveau 3, à partir du titre de niveau 4 passer en minuscules__**</color> \\ \\
{{:aide_wiki:img_plan_genie_climatique.jpg?nolink&650 |Mise en page dans le Wiki}} \\ \\
{{:aide_wiki:img_table_des_matieres_genie_clim.png?nolink&250|Aperçu de la table des matières}}

