« Guidelines:Règles d'édition » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(37 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 91 : Ligne 91 :
:{{printonly|ce contenu n'est visible que dans un pdf}}
:{{printonly|ce contenu n'est visible que dans un pdf}}


===Menu accordéon - Modèle <nowiki>{{toggle}}</nowiki>===
----
Vous pouvez utiliser le '''[[:Modèle:toggle]]''' pour créer un menu accordéon
:'''/!\''' les menus accordéon sur une même page ne peuvent avoir un titre et un contenu strictement identiques
====Syntaxe basique====
:<pre>{{toggle| title=TITLE | content=CONTENT}}</pre>
:{{toggle| title=TITLE 1 | content={{lorem|size=medium}}}}
:{{toggle| title=TITLE 2 | content={{lorem|size=medium}}}}


=== Boîte de contenu - Modèle <nowiki>{{box}}</nowiki>===
=== Boîte de contenu - Modèle <nowiki>{{box}}</nowiki>===
Ligne 102 : Ligne 111 :


====Options====
====Options====
:<pre>{{box|title=TITLE|content=CONTENT}}</pre>
:<pre>{{box&#10;|title=TITLE&#10;|content=CONTENT&#10;|color= red,green,blue&#10;|width= définie en %, rem, em, px, vmin, vmax, max-content&#10;}}</pre>
 
====Exemples====
:{{box|title=TITLE|content=CONTENT {{printonly|remarquez que les boites sont centrées et égales à leur contenu}}}}
:{{box|title=TITLE|content=CONTENT {{printonly|remarquez que les boites sont centrées et égales à leur contenu}}}}
:<pre>{{box|title=TITLE|content=CONTENT|color=blue|width=50%}}&#10;{{box|title=TITLE|content=CONTENT|width=300px}}</pre>
:<pre>{{box|title=TITLE|content=CONTENT|color=blue|width=50%}}</pre>
:{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}|color=blue|width=50%}}  
:{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}|color=blue|width=50%}}  
:{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}|width=300px}}
:<pre>{{box|title=TITLE|content=CONTENT|width=300px|color=red}}</pre>
:{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}|width=300px|color=red}}
:<pre>{{box|title=TITLE|content=|color=green|width=max-content}}</pre>
:{{box|title=TITLE|content=La boite se redimensionne à la taille de son contenu|color=green|width=max-content}}


=== Grille flexible - Modèle <nowiki>{{flexGrid}}</nowiki>===
=== Grille flexible - Modèle <nowiki>{{flexGrid}}</nowiki>===
Ligne 118 : Ligne 132 :
(redimensionner la fenêtre pour voir l'adaptation de l'affichage)
(redimensionner la fenêtre pour voir l'adaptation de l'affichage)
{{flexGrid|content=  
{{flexGrid|content=  
TEXTE A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed felis fermentum, vestibulum elit ut, fermentum enim. Cras molestie orci sed justo finibus, eu vulputate est pharetra. Donec condimentum eros facilisis turpis ullamcorper vestibulum.
TEXTE A {{lorem|size=short}}


TEXTE B Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed felis fermentum, vestibulum elit ut, fermentum enim. Cras molestie orci sed justo finibus, eu vulputate est pharetra. Donec condimentum eros facilisis turpis ullamcorper vestibulum.
TEXTE B {{lorem|size=short}}


TEXTE C Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed felis fermentum, vestibulum elit ut, fermentum enim. Cras molestie orci sed justo finibus, eu vulputate est pharetra. Donec condimentum eros facilisis turpis ullamcorper vestibulum.
TEXTE C {{lorem|size=short}}


TEXTE D Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed felis fermentum, vestibulum elit ut, fermentum enim. Cras molestie orci sed justo finibus, eu vulputate est pharetra. Donec condimentum eros facilisis turpis ullamcorper vestibulum.
TEXTE D {{lorem|size=short}}
}}
}}


Ligne 130 : Ligne 144 :
:<pre>{{flexGrid|content=&#10;{{box|title=TITLE|content=CONTENT|color=blue}}&#10;&#10;{{box|title=TITLE|content=CONTENT|color=green}}&#10;&#10;{{box|title=TITLE|content=CONTENT|color=red}}&#10;&#10;{{box|title=TITLE|content=CONTENT}}&#10;}}</pre>
:<pre>{{flexGrid|content=&#10;{{box|title=TITLE|content=CONTENT|color=blue}}&#10;&#10;{{box|title=TITLE|content=CONTENT|color=green}}&#10;&#10;{{box|title=TITLE|content=CONTENT|color=red}}&#10;&#10;{{box|title=TITLE|content=CONTENT}}&#10;}}</pre>
{{flexGrid|content=  
{{flexGrid|content=  
{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}|color=blue}}
{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}}}


{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}|color=green}}
{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}}}


{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}|color=red}}
{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}}}


{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}}}
{{box|title=TITLE|content=CONTENT{{printonly|remarquez que les boites sont centrées et égales à leur contenu}}}}
Ligne 160 : Ligne 174 :
{{sidebar
{{sidebar
|main=
|main=
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel velit ultricies magna vulputate pretium. Aenean egestas tortor vitae lectus pellentesque, at venenatis erat luctus. Donec mollis arcu sem, vel tincidunt orci ultrices malesuada. Suspendisse non tincidunt sem. Vestibulum ac sapien ante. Sed sit amet augue a dolor pretium auctor at et ipsum. Duis tempor metus arcu, sit amet iaculis urna mollis sed. Sed sit amet risus at lectus cursus accumsan lobortis molestie nisl. Aenean non semper sem. Morbi et nunc tincidunt, ornare mauris vitae, placerat nisi. Praesent lacinia accumsan eros eu finibus. Phasellus efficitur, justo pulvinar lacinia molestie, quam est eleifend libero, volutpat tempus turpis libero eu sem.<br>
{{lorem|size=long}}
Phasellus rutrum lacus urna, auctor rhoncus enim venenatis eget. Nulla tempor nunc ante, vel eleifend est varius a. Curabitur nec odio elit. Aliquam massa massa, lacinia sit amet justo a, elementum vehicula dolor. Aliquam porta velit orci, eu interdum erat aliquam id. Aenean scelerisque magna mi. Aenean congue sagittis varius.
|sidebar=
|sidebar=
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel velit ultricies magna vulputate pretium. Aenean egestas tortor vitae lectus pellentesque, at venenatis erat luctus. Donec mollis arcu sem, vel tincidunt orci ultrices malesuada. Suspendisse non tincidunt sem. Vestibulum ac sapien ante. Sed sit amet augue a dolor pretium auctor at et ipsum. Duis tempor metus arcu, sit amet iaculis urna mollis sed. Sed sit amet risus at lectus cursus accumsan lobortis molestie nisl. Aenean non semper sem.
{{lorem|size=short}}
}}
}}


====Option====
====Option====
:le paramètre "left" pour une sidebar à gauche (par défaut à droite).
:le paramètre "left" pour une sidebar à gauche (par défaut à droite).
:<pre>{{sidebar|left|main=|sidebar=TEXTES IMAGES TABLEAUX BOITES BOUTONS}}</pre>
:<pre>{{sidebar|left|main=TEXTES IMAGES TABLEAUX BOITES BOUTONS|sidebar=TEXTES IMAGES TABLEAUX BOITES BOUTONS}}</pre>


====Exemples====
====Exemples====
Ligne 175 : Ligne 188 :


{{sidebar|main=
{{sidebar|main=
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel velit ultricies magna vulputate pretium. Aenean egestas tortor vitae lectus pellentesque, at venenatis erat luctus. Donec mollis arcu sem, vel tincidunt orci ultrices malesuada. Suspendisse non tincidunt sem. Vestibulum ac sapien ante. Sed sit amet augue a dolor pretium auctor at et ipsum. Duis tempor metus arcu, sit amet iaculis urna mollis sed. Sed sit amet risus at lectus cursus accumsan lobortis molestie nisl. Aenean non semper sem. Morbi et nunc tincidunt, ornare mauris vitae, placerat nisi. Praesent lacinia accumsan eros eu finibus. Phasellus efficitur, justo pulvinar lacinia molestie, quam est eleifend libero, volutpat tempus turpis libero eu sem.<br>
{{lorem|size=long}}
Phasellus rutrum lacus urna, auctor rhoncus enim venenatis eget. Nulla tempor nunc ante, vel eleifend est varius a. Curabitur nec odio elit. Aliquam massa massa, lacinia sit amet justo a, elementum vehicula dolor. Aliquam porta velit orci, eu interdum erat aliquam id. Aenean scelerisque magna mi. Aenean congue sagittis varius.
|sidebar=
|sidebar=
{{box|content=
{{box|content=
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel velit ultricies magna vulputate pretium. Aenean egestas tortor vitae lectus pellentesque, at venenatis erat luctus. Donec mollis arcu sem, vel tincidunt orci ultrices malesuada. Suspendisse non tincidunt sem. Vestibulum ac sapien ante
{{lorem|size=short}}
{{button|size=full|color=blue|style=pen|link=[[:Modèle:sidebar]]}}
{{button|size=full|color=blue|style=pen|link=[[:Modèle:sidebar]]}}
}}}}
}}}}
Ligne 195 : Ligne 207 :
====Options:====
====Options:====


:<pre>{{button&#10;|style=pen,box,arrow,check,cross,heart,star,email&#10;|size=small, medium, large&#10;|color=red,green,blue,yellow&#10;|link=LINK&#10;}}</pre>
:<pre>{{button&#10;|style=pen,box,arrow,check,cross,heart,star,email&#10;|size=small, medium, large, full&#10;|color=red,green,blue,yellow&#10;|link=LINK&#10;}}</pre>


====Exemples:====
====Exemples:====
:<pre>{{button|color=green|size=small|link=[[Guidelines:Règles d'édition|Cette page]]}}&#10;{{button|color=green|size=medium|link=[http://# UNE PAGE EXTERNE]}}&#10;{{button|color=yellow|size=large|link=[[Guidelines:Règles d'édition|Bouton LARGE]]}}</pre>
:<pre>{{button|color=green|size=small|link=[[Guidelines:Règles d'édition|Cette page]]}}&#10;{{button|color=green|size=medium|link=[http://# UNE PAGE EXTERNE]}}&#10;{{button|color=yellow|size=large|link=[[Guidelines:Règles d'édition|Bouton LARGE]]}}</pre>
:Un bouton vert {{button|color=green|size=small|link=[[Guidelines:Règles d'édition|Cette page]]}}, un plus grand bouton bleu {{button|color=blue|size=medium|link=[http://# UNE PAGE EXTERNE]}} un bouton encore plus grand {{button|color=yellow|size=large|link=[[Guidelines:Règles d'édition|Bouton LARGE]]}}
:Un bouton vert {{button|color=green|size=small|link=[[Guidelines:Règles d'édition|Cette page]]}}, un plus grand bouton bleu {{button|color=blue|size=medium|link=[http://# Une page externe]}} un bouton encore plus grand {{button|color=red|size=large|link=[[Guidelines:Règles d'édition|bouton large]]}}


:<pre>{{button| color=green| style=pen| size=medium| link=[[link|INSCRIPTION]]}}&#10;{{button| color=blue| style=arrow| size=medium| link=[[link|GO]]}}&#10;{{button| style=box| color=blue| size=medium| link=[[link||PROGRAMME]]}}&#10;{{button| color=red| style=cross| size=medium| link=[[link|Mauvais exemple]]}}&#10;{{button| color=green| style=cross| size=medium| link=[[link|Bon exemple]]}}&#10;{{button| color=red| style=heart| size=medium| link=[[link|FOR THE LOVE]]}}&#10;{{button| color=blue| style=email| size=medium| link=[[link|PERSONNE DE CONTACT]]}}&#10;{{button| color=yellow| style=star| size=medium| link=[[link|BEST RESOURCE]]}}</pre>
:<pre>{{button| color=green| style=pen| size=medium| link=[[link|INSCRIPTION]]}}&#10;{{button| color=blue| style=arrow| size=medium| link=[[link|GO]]}}&#10;{{button| style=box| color=blue| size=medium| link=[[link||PROGRAMME]]}}&#10;{{button| color=red| style=cross| size=medium| link=[[link|Mauvais exemple]]}}&#10;{{button| color=green| style=cross| size=medium| link=[[link|Bon exemple]]}}&#10;{{button| color=red| style=heart| size=medium| link=[[link|FOR THE LOVE]]}}&#10;{{button| color=blue| style=email| size=medium| link=[[link|PERSONNE DE CONTACT]]}}&#10;{{button| color=yellow| style=star| size=medium| link=[[link|BEST RESOURCE]]}}</pre>


{{button|color=green|style=pen|size=medium|link=[[Guidelines:Règles d'édition|INSCRIPTION]]}} {{button|color=blue|style=arrow|size=medium|link=[[Guidelines:Règles d'édition|GO]]}} {{button|style=box|color=blue|size=medium|link=[[Guidelines:Règles d'édition|PROGRAMME]]}} {{button|color=red|style=cross|size=medium|link=[[Guidelines:Règles d'édition|Mauvais exemple]]}}  {{button|color=green|style=check|size=medium|link=[[Guidelines:Règles d'édition|Bon exemple]]}} {{button|color=red|style=heart|size=medium|link=[[Guidelines:Règles d'édition|FOR THE LOVE]]}} {{button|color=blue|style=email|size=medium|link=[[Guidelines:Règles d'édition|PERSONNE DE CONTACT]]}} {{button|color=yellow|style=star|size=medium|link=[[Guidelines:Règles d'édition|BEST RESOURCE]]}}
{{button|color=green|style=pen|size=medium|link=[[Guidelines:Règles d'édition|INSCRIPTION]]}} {{button|color=blue|style=arrow|size=medium|link=[[Guidelines:Règles d'édition|GO]]}} {{button|style=box|color=blue|size=medium|link=[[Guidelines:Règles d'édition|PROGRAMME]]}} {{button|color=red|style=cross|size=medium|link=[[Guidelines:Règles d'édition|MAUVAIS EXEMPLE]]}}  {{button|color=green|style=check|size=medium|link=[[Guidelines:Règles d'édition|BON EXEMPLE]]}} {{button|color=red|style=heart|size=medium|link=[[Guidelines:Règles d'édition|FOR THE LOVE]]}} {{button|color=blue|style=email|size=medium|link=[[Guidelines:Règles d'édition|PERSONNE DE CONTACT]]}} {{button|color=yellow|style=star|size=medium|link=[[Guidelines:Règles d'édition|BEST RESOURCE]]}}


:<pre>Size=full est un bouton large qui occupe toute la largeur disponible (full-size)&#10;Ci-dessous un exemple avec flexGrid</pre>
:<pre>Size=full est un bouton large qui occupe toute la largeur disponible (full-size)&#10;Ci-dessous un exemple avec flexGrid</pre>
{{flexGrid|content=
{{flexGrid|content=
{{button|color=green|style=pen|size=full|link=[[Guidelines:Règles d'édition|INSCRIPTION]]}}{{button|color=blue|style=arrow|size=full|link=[[Guidelines:Règles d'édition|GO]]}}{{button|style=box|color=blue|size=full|link=[[Guidelines:Règles d'édition|PROGRAMME]]}}{{button|color=red|style=cross|size=full|link=[[Guidelines:Règles d'édition|Mauvais exemple]]}}{{button|color=green|style=check|size=full|link=[[Guidelines:Règles d'édition|Bon exemple]]}}{{button|color=red|style=heart|size=full|link=[[Guidelines:Règles d'édition|FOR THE LOVE]]}}{{button|color=blue|style=email|size=full|link=[[Guidelines:Règles d'édition|PERSONNE DE CONTACT]]}}{{button|color=yellow|style=star|size=full|link=[[Guidelines:Règles d'édition|MEILLEUR RESSOURCE]]}}
{{button|color=green|style=pen|size=full|link=[[Guidelines:Règles d'édition|INSCRIPTION]]}}{{button|color=blue|style=arrow|size=full|link=[[Guidelines:Règles d'édition|GO]]}}{{button|style=box|color=blue|size=full|link=[[Guidelines:Règles d'édition|PROGRAMME]]}}{{button|color=red|style=cross|size=full|link=[[Guidelines:Règles d'édition|MAUVAIS EXEMPLE]]}}{{button|color=green|style=check|size=full|link=[[Guidelines:Règles d'édition|BON EXEMPLE]]}}{{button|color=red|style=heart|size=full|link=[[Guidelines:Règles d'édition|FOR THE LOVE]]}}{{button|color=blue|style=email|size=full|link=[[Guidelines:Règles d'édition|PERSONNE DE CONTACT]]}}{{button|color=yellow|style=star|size=full|link=[[Guidelines:Règles d'édition|MEILLEUR RESSOURCE]]}}
}}
}}


[[Catégorie: Certificat e-learning]]
[[Catégorie: Aides]]

Dernière version du 9 mai 2021 à 21:49

Voici quelques règles que vous devriez utiliser. Important: Voir aussi la version anglaise .

Respect du thème

  • Ce wiki accepte des entrées en rapport avec la technologie éducative et domaines associés (éducation, psychologie, informatique, ....)
  • Vous êtes libres de signer un article ou un chapitre, d'exprimer vos opinions et de "spéculer" (contrairement à Wikipedia).

Tout "spamming" est interdit et on se réserve le droit de tuer des logins, bloquer des domaines, engager des poursuite juridiques, etc.

Auteurs

  1. Chaque auteur doit remplir sa "home page" (cliquez sur votre nom d'utilisateur en haut à droite). Décrivez très brièvement qui vous êtes et votre affiliation (étudiant, enseignant, chercheur etc. à XXX)
  2. Vos opinions:
    • Si elles sont controversées, utilisez votre user ID Wiki
    • 3 ~~~ insèrent votre user ID et 4~~~~ insèrent le user ID+ Heure/Date
    • P.ex. DSchneider pense que ces règles d'édition sont cool
    • P.ex. Ces règles nécessitent des améliorations (11:21, 11 April 2006 (MEST) - DSchneider)

Nouveaux articles et noms des articles

  1. Avant de démarrer un nouvel article, rechercher dans le wiki pour contrôler qu'il n'existe pas déjà le même article.
  2. Si un contenu existe sous un autre nom :
    • Utiliser une redirection si et seulement si vous estimez que votre concept devrait avoir sa propre entrée.
    • Autrement utiliser les liens complexes comme [[lien | votre appellation]]
    • Voir aussi "pages de désambiguïsation" dessous, p.ex. un contenu peut être réparti dans plusieurs articles
  3. Nouveaux articles:
    • Jamais utiliser de majuscules sauf pour la première lettre de l'article (exception faite des noms propres). Bon: Technologie éducative - Mauvais: Technologie Educative
    • Utiliser le singulier (p.ex. théorie, pas théories)
    • Pas d'articles (mauvais: "Les théories xy...", bon: "théorie xy")
    • Si le terme est vraiment ambigu, utilisez la procédure de désambiguïsation
  4. Cas d'homonymie / homophonie
    • Il faut diviser un terme en plusieurs termes spécifiques (articles spécifiques) et les répertorier dans une page d'homonymie (voir ci-après)


Structure d'articles et Catégories

  1. Structure des articles:
    • Utiliser des titres, p.ex. == Niveau 1 == , === Niveau 2 ===, etc.
  2. Catégories:
    • Insérez au moins une catégorie à la fin de chaque article!, p.ex. [[Category:Théories d'apprentissage]]
    • Vous pouvez suggérer de nouvelles catégories si besoin est! Utiliser le pluriel et non le singulier (les catégories se créent automatiquement, nous déciderons ensemble si nous conservons la vôtre...)
  3. Liens: utilisez des liens complexes lorsque nécessaire, ne pas utiliser: "(voir ici)".
    • Mauvais "C'est une déclaration fréquente dans la théorie du behaviorisme" (voir Behaviorisme)."
    • Bon: "C'est une déclaration fréquente dans la théorie du behaviorisme".
  4. Un article = un sujet, p.ex. créez de nouvelles pages pour les nouveaux sujets qui sont pertinents pour d'autres articles.
    • Note: il y a un système pour composer des articles depuis plusieurs articles si besoin est.


Images

Documentez vos images SVP:

  • Pour insérer une image dans une page, utilisez [[Image:xxx.png]] ou mieux comme [[image: .png|frame|none| ]] template.
Par exemple [[image:input-process-output-paradigm.png|frame|none|Input-process-output paradigm]]
  • Rajoutez svp une description des images uploadées quand vous les copiez sur le serveur
  • Indiquez aussi la source et la date d'insertion (5 ~~~~~ le font automatiquement)

Modèles (Templates)

Un modèle est un code inséré entre {{...}} et peut ajouter des contenus et/ou transformer la présentation d'une page
Utiliser ces modèles permet d'indiquer au lecteur une information standardisé, de structurer du contenu ou formater le style
ces modèles améliorent l'accessibilité et la maintenance de contenu et permettent d'harmoniser le design d'Edutechwiki

Modèles de statut de page

Utilisez ces modèles pour indiquer le statut d'un article.
La liste des templates à utiliser est encore à définir (sur wikipédia il en existe des dizaines ...)
  1. Pages d'homonymie (désambiguïsation) (Modèle:homonymie):
    • Pages avec un titre ambigu, elles renvoient à d'autres pages spécialisées
    • Utiliser {{homonymie}} à la fin d'un article
  2. Sous construction (Modèle:En construction):
    • Utiliser {{En construction}} pour indiquer que vous êtes en train de travailler sur un article.
  3. Ebauche, (contenu planifié, Modèle:Ebauche)
    • Utiliser {{Ebauche}} pour "créer" juste un début et signaler que vous n'avez pas l'intention de travailler dessus dans la suite.
  4. Incomplete articles (Modèle:Incomplet)
    • Utilisez {{Incomplet}} pour indiquer que l'article n'est pas fini, c.a.d. que le plan et le contenu sont incomplets et en préparation, temporaires et sujets à caution
  5. Obsolète (Modèle:Obsolète)
    • Utilisez {{Obsolète}} pour signaler une page dont l'objet est jugé dépassé, n'existe plus ou est inaccessible.
    • Utiliser {{Obsolète|nouveau=url_redirection}} ou {{Obsolète|nouveau=nom_de_page}} pour ajouter une redirection vers une page plus actuelle

Gestion d'impression - Modèles {{noprint}} et {{printonly}}

Les articles peuvent être convertis avec l'option d'export "Télécharger comme PDF" ou "Créer un livre".

  • vous pouvez contrôler ce qui ne doit pas figurer dans un pdf avec le modèle Modèle:noprint
  • vous pouver spécifier un contenu alternatif pour l'impression avec le modèle Modèle:printonly

Modèle {{noprint}}

{{noprint|
ce contenu ne sera pas affiché dans un pdf
}}
Ce contenu ne sera pas affiché dans un pdf

Modèle {{printonly}}

{{{printonly|ce contenu sera visible uniquement à l'impression}}}

Texte ci-après uniquement dans un pdf:


Menu accordéon - Modèle {{toggle}}

Vous pouvez utiliser le Modèle:toggle pour créer un menu accordéon

/!\ les menus accordéon sur une même page ne peuvent avoir un titre et un contenu strictement identiques

Syntaxe basique

{{toggle| title=TITLE | content=CONTENT}}
TITLE 1
▼
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum odio eu, elementum maximus tortor. Aenean iaculis, erat a convallis interdum, magna eros faucibus erat, sed ultrices velit leo at tortor. Maecenas eu lectus id mi porttitor molestie sit amet vitae nibh. Etiam vitae magna quis orci facilisis finibus blandit sit amet lorem. Duis scelerisque eleifend nulla eget malesuada. Quisque mattis arcu vitae tortor commodo, sed pharetra sem gravida. Vivamus nec congue quam.
TITLE 2
▼
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum odio eu, elementum maximus tortor. Aenean iaculis, erat a convallis interdum, magna eros faucibus erat, sed ultrices velit leo at tortor. Maecenas eu lectus id mi porttitor molestie sit amet vitae nibh. Etiam vitae magna quis orci facilisis finibus blandit sit amet lorem. Duis scelerisque eleifend nulla eget malesuada. Quisque mattis arcu vitae tortor commodo, sed pharetra sem gravida. Vivamus nec congue quam.

Boîte de contenu - Modèle {{box}}

Vous pouvez utiliser le Modèle:box pour créer une boîte avec ou sans titre, avec une taille définie ou automatique et avec ou sans couleur.

note: au format .pdf les boîtes sont centrées en pleine page

Syntaxe basique

{{box|content=CONTENT}}
CONTENT

Options

{{box
|title=TITLE
|content=CONTENT
|color= red,green,blue
|width= définie en %, rem, em, px, vmin, vmax, max-content
}}

Exemples

TITLE
CONTENT 
{{box|title=TITLE|content=CONTENT|color=blue|width=50%}}
TITLE
CONTENT
{{box|title=TITLE|content=CONTENT|width=300px|color=red}}
TITLE
CONTENT
{{box|title=TITLE|content=|color=green|width=max-content}}
TITLE
La boite se redimensionne à la taille de son contenu

Grille flexible - Modèle {{flexGrid}}

Vous pouvez utiliser le Modèle:flexGrid pour créer une grille flexible de contenu (responsive size)

Syntaxe basique

{{flexGrid|content=
 Text A

 Text B

 Text C
}}

Exemples

(redimensionner la fenêtre pour voir l'adaptation de l'affichage)

TEXTE A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum.

TEXTE B Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum.

TEXTE C Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum.

TEXTE D Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum.

Vous pouvez utiliser {{flexGrid}} avec des images, tableaux, modèles boîtes, boutons etc. 

{{flexGrid|content=
{{box|title=TITLE|content=CONTENT|color=blue}}

{{box|title=TITLE|content=CONTENT|color=green}}

{{box|title=TITLE|content=CONTENT|color=red}}

{{box|title=TITLE|content=CONTENT}}
}}
TITLE
CONTENT
TITLE
CONTENT
TITLE
CONTENT
TITLE
CONTENT


{{flexGrid|content=
[[Fichier:Felis catus-cat on snow.jpg]]

[[Fichier:Felis catus-cat on snow.jpg]]

[[Fichier:Felis catus-cat on snow.jpg]]

[[Fichier:Felis catus-cat on snow.jpg]]
}}
Felis catus-cat on snow.jpg

Felis catus-cat on snow.jpg

Felis catus-cat on snow.jpg

Felis catus-cat on snow.jpg

Barre de contenu latérale - Modèle {{sidebar}}

Vous pouvez utiliser le Modèle:sidebar pour créer une barre latérale de contenu à gauche ou à a droite. Cette dernière se repositionnera dans le flux de page principale lors de l'affichage mobile ou fenêtre réduite.

Note: les barres latérales sont compatible avec l'impression au format .pdf

Syntaxe basique

{{sidebar
|main=
TEXTES IMAGES TABLEAUX BOITES BOUTONS
|sidebar=
TEXTES IMAGES TABLEAUX BOITES BOUTONS
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum odio eu, elementum maximus tortor. Aenean iaculis, erat a convallis interdum, magna eros faucibus erat, sed ultrices velit leo at tortor. Maecenas eu lectus id mi porttitor molestie sit amet vitae nibh. Etiam vitae magna quis orci facilisis finibus blandit sit amet lorem. Duis scelerisque eleifend nulla eget malesuada. Quisque mattis arcu vitae tortor commodo, sed pharetra sem gravida. Vivamus nec congue quam.
Aenean vehicula mi massa, sit amet ornare dui facilisis id. Aliquam enim orci, cursus vitae eros sit amet, vestibulum egestas neque. Praesent eget feugiat purus, et luctus magna. Donec condimentum metus leo, eget vulputate mauris consequat at. Aliquam consequat, lacus ultrices blandit tempor, dolor purus gravida dui, non imperdiet massa felis nec odio. Vestibulum sem neque, consequat nec ullamcorper a, tincidunt sed tellus. Sed sed scelerisque nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum.


Option

le paramètre "left" pour une sidebar à gauche (par défaut à droite).
{{sidebar|left|main=TEXTES IMAGES TABLEAUX BOITES BOUTONS|sidebar=TEXTES IMAGES TABLEAUX BOITES BOUTONS}}

Exemples

Le modèle sidebar peut être utilisé avec d'autres modèles tel que '''{{flexGrid}}''', '''{{box}}''' ou '''{{button}}''' 

{{sidebar
|main=
TEXTE
|sidebar=
TEXTE
{{box|content=}}
{{button|size=full|color=blue|style=pen|link=}
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum odio eu, elementum maximus tortor. Aenean iaculis, erat a convallis interdum, magna eros faucibus erat, sed ultrices velit leo at tortor. Maecenas eu lectus id mi porttitor molestie sit amet vitae nibh. Etiam vitae magna quis orci facilisis finibus blandit sit amet lorem. Duis scelerisque eleifend nulla eget malesuada. Quisque mattis arcu vitae tortor commodo, sed pharetra sem gravida. Vivamus nec congue quam.
Aenean vehicula mi massa, sit amet ornare dui facilisis id. Aliquam enim orci, cursus vitae eros sit amet, vestibulum egestas neque. Praesent eget feugiat purus, et luctus magna. Donec condimentum metus leo, eget vulputate mauris consequat at. Aliquam consequat, lacus ultrices blandit tempor, dolor purus gravida dui, non imperdiet massa felis nec odio. Vestibulum sem neque, consequat nec ullamcorper a, tincidunt sed tellus. Sed sed scelerisque nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia molestie augue vitae placerat. Morbi semper ipsum nec lorem mollis, vitae congue mi luctus. Ut a metus massa. Vivamus quis sodales ante. Curabitur posuere malesuada augue id suscipit. Curabitur mattis bibendum tincidunt. Nullam vel velit erat. Nunc quis dapibus nibh. Vivamus nulla massa, ultrices vestibulum. 🖊 Modèle:sidebar


Bouttons - Modèle {{button}}

Modèle:button pour insérer un bouton. Les boutons sont destinés à mettre en valeur certains éléments de navigation.

/!\ Attention : ne pas en abuser, les boutons ne doivent pas remplacer tous les types de liens d'une page au risque de nuire à la navigation de l'utilisateur
En version pdf les boutons sont remplacés par un texte bleu, souligné et cliquable

Syntaxe basique:

{{button|link= [[Guidelines:Règles d'édition|CETTE PAGE (redirection)]] }}
Un bouton simple: CETTE PAGE (redirection)

Options:

{{button
|style=pen,box,arrow,check,cross,heart,star,email
|size=small, medium, large, full
|color=red,green,blue,yellow
|link=LINK
}}

Exemples:

{{button|color=green|size=small|link=[[Guidelines:Règles d'édition|Cette page]]}}
{{button|color=green|size=medium|link=[http://# UNE PAGE EXTERNE]}}
{{button|color=yellow|size=large|link=[[Guidelines:Règles d'édition|Bouton LARGE]]}}
Un bouton vert Cette page, un plus grand bouton bleu Une page externe un bouton encore plus grand bouton large
{{button| color=green| style=pen| size=medium| link=[[link|INSCRIPTION]]}}
{{button| color=blue| style=arrow| size=medium| link=[[link|GO]]}}
{{button| style=box| color=blue| size=medium| link=[[link||PROGRAMME]]}}
{{button| color=red| style=cross| size=medium| link=[[link|Mauvais exemple]]}}
{{button| color=green| style=cross| size=medium| link=[[link|Bon exemple]]}}
{{button| color=red| style=heart| size=medium| link=[[link|FOR THE LOVE]]}}
{{button| color=blue| style=email| size=medium| link=[[link|PERSONNE DE CONTACT]]}}
{{button| color=yellow| style=star| size=medium| link=[[link|BEST RESOURCE]]}}

🖊 INSCRIPTION ➔ GO ◧ PROGRAMME ✘ MAUVAIS EXEMPLE ✔ BON EXEMPLE ❤ FOR THE LOVE ✉ PERSONNE DE CONTACT ★ BEST RESOURCE 

Size=full est un bouton large qui occupe toute la largeur disponible (full-size)
Ci-dessous un exemple avec flexGrid
🖊 INSCRIPTION➔ GO◧ PROGRAMME✘ MAUVAIS EXEMPLE✔ BON EXEMPLE❤ FOR THE LOVE✉ PERSONNE DE CONTACT★ MEILLEUR RESSOURCE
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Guidelines:Règles_d%27édition&oldid=151325 »