En mode édition, YesWiki vous offre une barre dʼédition comportant une série de boutons qui vous permettent dʼeffectuer la plupart des opérations de mise en forme.
Les principales astuces de mise en page
Lorsqu'on utilise la bare dʼédition de YesWiki, on constate que cela se traduit par lʼapparition de « codes » dans la page. Rassurez-vous ces codes ne sont visibles quʼau cours de lʼédition et se traduiront, lorsque vous enregistrez la page, par la mise en forme ou le comportement voulu. Voici quelques uns de ce code.
Accentuation
**Gras** //Italique// __Souligné__ @@Barré@@
Titres
======Titre 1======
=====Titre 2=====
====Titre 3====
===Titre 4===
==Titre 5==
Insérer un filet horizontal
----
Ce qui donne :
Listes
- Liste à puces niveau 1
- Puce niveau 1
- Puce niveau 2
- Puce niveau 2
- Puce niveau 1
Liste à puces niveau 1
Puce niveau 1
Puce niveau 2
Puce niveau 2
Puce niveau 1
Remarque : en mode édition, si vous ne voyez plus la coloration syntaxique après une liste à puces, il suffit de sauter une ligne, juste après la liste, pour la retrouver… (mais, même sans la coloration, tout le reste fonctionne).
1) Liste énumérée
1) Liste énumérée
1) Liste énumérée
Si vous souhaitez introduire du HTML dans la page wiki,
il faut l'entourer de "" ""
pour qu'il soit traité correctement.
Ce qui se passe vraiment, si cela vous intéresse
En réalité, une page internet est constituée de code HTML.
Et cʼest ce HTML que sait afficher votre navigateur internet (Firefox, Chrome, Safari ou autre).
Mais le HTML est verbeux et complexe. YesWiki met donc à votre disposition un code plus simple (celui qui est en partie décrit dans cette page). Et lors de l'affichage de la page, YesWiki traduit son code en HTML que le navigateur affiche alors.
Dans le cas où vous insérez du code HTML dans votre code YesWiki, les doubles guillemets ("") indiquent à YesWiki de ne pas traduire le code en question.
Placer du code en commentaire sur la page
En utilisant le code ci-dessous, on peut mettre du texte qui n’apparaît pas sur la page…
{# du texte que je ne souhaite pas afficher #}
Cela permet de laisser des explications par exemple ou même d'écrire du texte en préparation d'une publication future.
A toi de jouer !
Dans une page "bac à sable" de ton wiki, écris un paragraphe avec :
un titre
du texte en gras
une liste à puces
Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum
Insérer un document ou une image
En plus du texte, on peut vouloir ajouter des images, des documents à télécharger, voire des vidéos ou des fichiers audio. Avec YesWiki ceci est très facile ! Voici comment faire.
Bouton « fichier »
Dans la page en mode édition, cliquer sur le bouton « Fichier » permet de choisir un fichier qui se trouve sur votre ordinateur.
En fonction du type de fichier à insérer, YesWiki propose des interfaces différentes, mais le principe reste le même.
Le bouton ouvre sur une fenêtre qui permet de choisir l'alignement de l'image, sa taille à l'affichage ainsi que le texte qui s'affichera au survol (texte de la vignette).
En cliquant sur « Paramètres avancés », on peut ajouter un lien associé (en vert ci-dessous), des effets graphiques, modifier le texte alternatif et empêcher l'affichage de l'image lorsqu'on clic dessus (en jaune).
On peut modifier l'image après l'avoir enregistrée. Pour cela il faut re-éditer la page, trouver le bout de code entre {{ }} qui concerne ce fichier et cliquer n'importe où dessus : un bouton crayon apparaît, il suffit de cliquer dessus pour afficher la fenêtre permettant de faire toutes les modifications que vous souhaitez.
Pour un fichier texte (.doc, .pdf, .xls, .odt, .txt…)
Ici le bouton ouvre une fenêtre qui permet de modifier le texte du lien et d'afficher le fichier sous forme de lien ou directement inclus dans la page.
Comme pour les images, on peut
- cliquer sur Paramètres avancés pour ajouter un lien associé, des effets graphiques et que modifier le texte alternatif.
- et modifier le fichier après l'avoir enregistré en cliquant sur bout de code entre {{ }}.
Pour un fichier audio (mp3) et vidéo (flv)
Le principe est toujours le même. Ces fichiers seront interprétés sous forme de lecteur audio. Mais souvent ce sont des fichiers lourds qu'on a tendance à stocker sur des plateformes spécialisées (vimeo, youtube, peertube ...) pour ensuite les intégrer au wiki en iframe.
Pour un fichier de carte mentale (freeplane ou freemind .mm)
Le principe est toujours le même. Ces fichiers seront affichés sous forme de carte heuristique cliquable.
Vous avez envie de code ?
Pas de souci, vous avez ci-dessus les bouts de codes générés par les boutons, ils peuvent être créés directement sur votre page en mode édition, et modifiés comme vous le souhaitez. Pour plus d'infos, aller sur la page {{attach}} de la documentation YesWiki.
Une vidéo pour vous aider
Voir la vidéo (elle est faite à partir de la version précédente mais le principe est le même)
A toi de jouer !
Dans une page "bac à sable" de ton wiki :
intègre une image en choissant la taille moyenne et le posionnement à gauche
reviens modifier la configuration de l'image pour qu'elle soit de taille large, positionnée au centre, et qu'en cliquant sur l'image on arrive sur https://yeswiki.net/
intègre un document PDF
une fois sous forme de lien
une fois affiché directement dans la page
Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum
Insérer une vidéo
Pour intégrer une vidéo il est nécessaire qu'elle soit préalablement en ligne sur une plateforme spécialisée : YouTube, Viméo, PeerTube, etc.
Vous pouvez alors utiliser l'action {{video}} disponible dans les composants.
Par défaut, ce composant vous propose deux paramètres.
Serveur de la vidéo – Vous pouvez choisir le serveur sur lequel se trouve la vidéo parmi PeerTube, Vimeo et Youtube.
Identifiant de la vidéo – Il ne sʼagit pas de lʼURL complète de la vidéo. Le plus souvent, c'est la série de chiffres et lettres placée en fin d'URL. Par exemple, dans https://www.youtube.com/watch?v=TNPnia5UCKk, lʼidentifiant de la vidéo est TNPnia5UCKk.
En cochant la case « paramètres avancés », vous pouvez faire afficher plus de paramètres.
Instance du serveur PeerTube – Ce paramètre nʼest présent que si vous avez choisi PeerTube en tant que serveur de la vidéo.
Ratio de la vidéo – Vous pouvez préciser le ratio qui vous convient pour afficher la vidéo.
Largeur maximale – Par défaut, la vidéo sera affichée sur toute la largeur disponible. Si vous le souhaitez, ce paramètre vous permet de préciser la largeur maximale sur laquelle la vidéo sera affichée. Attention, cette largeur doit être saisie en nombre de pixels (par exemple : 500). Vous ne pouvez utiliser de pourcentage pour exprimer cette largeur maximale.
Hauteur maximale – Par défaut, la hauteur dʼaffichage de la vidéo sera calculée automatiquement en fonction de la largeur disponible (de manière à conserver les proportions, ou ratio, initiales de la vidéo). Ce paramètre vous permet, si vous le souhaitez, de fixer la hauteur maximale dʼaffichage de la vidéo. Attention, cette hauteur doit être saisie en nombre de pixels (par exemple : 500). Vous ne pouvez utiliser de pourcentage pour exprimer cette hauteur maximale.
Position de la vidéo – Ce paramètre ne prend effet que si vous avez précisé une largeur maximale inférieure à la largeur dʼaffichage disponible. Si vous spécifiez que la position de la vidéo doit être à droite, et qu'il reste de la place à gauche de celle-ci, alors YesWiki commencera à afficher le texte suivant la vidéo à gauche de celle-ci. Et réciproquement pour un choix dʼaffichage de la vidéo à gauche, le texte viendra à droite, sʼil reste de la place.
Une autre méthode consiste à intégrer la vidéo en utilisant un iframe. Cependant l'action {{video}} vous permet un affichage responsive (c'est à dire qui sʼadapte à la taille de la fenêtre).
Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum
Faire un lien ou un bouton
Dans les pages d'une gare centrale on a souvent besoin de faire des liens vers d'autres pages ou d'autres sites. Encore une fois, c'est assez simple.
Les trois méthodes pour créer un lien
Cas d'un lien allant vers une page du wiki
Si vous souhaitez que votre lien aille vers une page de votre wiki, il suffit de saisir le nom wiki de cette page (par ex. : « PagePrincipale »). Pour YesWiki, ce nom représente une URL.
Saisir l'adresse de la cible du lien
Si vous saisissez l'adresse d'une page (par exemple : « https://yeswiki.net »), YesWiki, comprenant qu'il s'agit d'une adresse, générera un lien clicable dont le texte sera l'URL elle-même (ou le nom de la page de wiki le cas échéant).
Utilisation du bouton « lien »
Dans la page en mode édition, cliquer sur le bouton « lien ».
Vous serez alors guidé·e dans vos choix avec cette fenêtre :
Faites vos choix et cliquez sur « Insérer » : la ligne de code s'inscrit toute seule ;-)
Fenêtre modale : une fenêtre modale est une fenêtre qui vient s'afficher devant la page que vous êtes en train de visualiser (comme une « pop-up ») et que vous devez fermer avant de pouvoir retourner à la visualisation de votre page. Elle est, soit visible, soit fermée, contrairement à d'autres fenêtres qui peuvent être ouvertes et cachées derrière autre chose.
Vous avez envie de voir le code généré ?
Voici ce que ça donne quand on regarde le code :
Remarque importante — Dans le cas où vous choisiriez que le lien s'ouvre dans un nouvel onglet ou dans une fenêtre modale, YesWiki utilisera un bouton pour créer le lien (même si il l'affiche sous la forme d'un lien).
Utilisation du composant « bouton »
Voir la documentation du bouton
Si, pour créer un lien, on utilise le composant « bouton » même dans le cas d'un lien s'affichant dans l'onglet courant, on se laisse la possibilité de faire évoluer plus facilement le comportement de ce lien. Comment faire ? 1. Dans la fenêtre de paramétrage du bouton, vous saisissez :
le texte du lien dans « Texte du bouton »,
l'adresse de la page de destination du lien dans « Lien web ou nom d'une page de ce wiki ».
2. Puis, cliquez sur « Paramètres avancés ». 3. Choisissez les modalités d'affichage de la destination :
si vous voulez que la destination s'affiche dans une fenêtre modale, sélectionnez l'option qui vous convient dans « Ouvrir le contenu du lien dans une popup » ;
si vous voulez que la destination s'affiche dans un nouvel onglet ou une nouvelle fenêtre, sélectionnez « Oui » dans « Ouvrir dans une nouvelle fenêtre » ;
si vous voulez que la destination s'affiche l'onglet courant, ne faîtes rien de tout cela.
4. Cochez la case « Afficher sous forme de lien » Les avantages à utiliser un bouton pour créer un lien.
Vous pouvez ajouter une icône à votre lien.
Vous pouvez ajouter un texte qui s'affiche au survol du lien.
Vous pouvez faire en sorte que le lien n'apparaisse pas aux utilisateurs qui n'ont pas accès à la page de destination.
Vous pouvez modifier tous ces paramètres très simplement aussi souvent que vous voulez.
A toi de jouer !
Dans une page "bac à sable" de ton wiki, fais :
un lien vers la page d'accueil de ton wiki avec pour texte affiché "Revenir à l'accueil"
un lien vers le site https://yeswiki.net avec pour texte affiché "clique ici pour accéder au site de yeswiki"
un bouton qui indique "Forum yeswiki", qui envoie sur https://forum.yeswiki.net/ et avec un pictogramme de votre choix
exercice toi à faire des liens nécessaires pour ton projet, en réfléchissant au type d'ouverture
dans l'onglet courant
dans un nouvel onglet
dans une fenetre modale
Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum
Intégrer des éléments d'autres sites (widgets)
Avec YesWiki on peut facilement intégrer à son wiki des pages intéressantes.
On peut aussi tout simplement avoir besoin d'utiliser différents outils de travail coopératif et vouloir les centraliser dans notre gare centrale. Voici comment faire.
Incorporer un « widget »
Un peu de vocabulaire
Un « widget » est un petit module qui permet à une page d'embarquer (encapsuler, intégrer… « embed » en anglais) et de re-publier dynamiquement des contenus et fonctions issus de services proposés par d'autres sites internet.
Quelques étapes très simples
1. Trouver le code « iframe » permettant l'intégration
Un site propose souvent d'afficher ses contenus ailleurs que « chez lui », en fournissant un morceau de code HTML (appelé iframe), qui se trouve dans les options « Partager », « Intégrer » ou encore « Iframe ».
Ca peut ressembler à un de ces trois pictogrammes :
Le code « iframe » que vous allez trouver ressemblera à ça :
Vous allez sélectionner et copier ce code pour pouvoir le coller dans votre wiki.
2. Coller ce code dans votre page wiki
Une fois le code collé dans la page il faut penser à ajouter avant et après deux guillemets.
""coller ici le code HTML fourni par le site tiers""
3. Sauver et profiter !
Vous enregistrez ces modifications et vous pouvez profiter des fonctionnalités de cet autre site dans votre wiki : lire la vidéo, écrire dans le pad, lire un contenu…
Bricoler le code
Changer la taille de la fenêtre
Le code « iframe » fourni peut être personnalisé, notamment pour les dimensions de la fenêtre intégrée.
Dans le bout de code à copier-coller, les paramètres (on parle d'attributs) width (largeur) et height (hauteur) permettent de spécifier la taille de ce cadre et ils sont renseignés en pixels. Vous pouvez modifier ces chifres pour ajuster la taille de la fenêtre.
Largeur
L'attribut width= est indispensable. Il peut indiquer un nombre pixels ou un pourcentage de la taille de l'écran.
Pour que la fenêtre prenne toute la largeur et s'adapte à l'écran vous pouvez indiquer width=100%
Hauteur
L'insertion iframe peut configurer sa longueur automatiquement via la class class="auto-resize"
Ajouter ou enlever un cadre noir
La fenetre intégrée peut être encadrée ou non.
Dans le code de l'« iframe », vous pouvez préciser frameborder="1" (avec cadre noir) ou frameborder="0" (sans cadre noir)
lors de la création de ce lien, saisir le nom YesWiki de la page que l'on souhaite créer.
Nommer ma nouvelle page
La seule règle est que le nom de votre page ne comporte : « ni espace ni caractères spéciaux ».
Donc, vous pouvez choisir de l'appeler nomdemapage ou comptesrendusdereunions.
Toutefois, ce sera plus lisible si vous alternez avec des minuscules et majuscules : « NomDeMaPage ». C'est la méthode traditionnelle de nommage des pages dans YesWiki, nous parlions de « ChatMot »).
Et, c'est encore mieux (notamment pour les moteurs de recherches) si vous optez pour les tirets (« nom-de-ma-page ») ou les soulignés (« nom_de_ma_page »).
Ça donne ça :
Quand je clique sur « insérer », ça génère cette ligne de code :
Il ne vous reste plus qu'à sauver.
Quand le lien vient d'être créé mais que la nouvelle page est vide, un petit crayon apparait devant le lien. Il disparaitra quand vous aurez saisi, et enregistré, du contenu dans la nouvelle page.
Astuces
Une fois votre nouvelle page créée vous pouvez enlever le lien qui y mène sans que la page disparaisse pour autant. Vous pouvez retrouver vos pages au moyen du menu roue crantée en haut à droite, puis en sélectionnant « Tableau de bord ». Cela peut être une bonne manière de cacher des pages.
Une toute autre manière de créer une nouvelle page est d'aller, dans la barre d'adresse de votre navigateur, modifier l'URL. La dernière partie de l'adresse (après « /? ») correspond au nom de la page.
YesWiki va interpréter tout ChatMot comme une nouvelle page. Si on veut écrire un ChatMot sans créer de nouvelle page (par exemple pour écrire « YesWiki » sans créer de page ni de lien), on l'encadre de doubles guillemets :
A toi de jouer !
Dans une page "bac à sable" de ton wiki :
Crée une nouvelle page avec ton prénom
Finalise cette création de page en écrivant quelques lignes dans cette nouvelle page
Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum
CC-by-SA Frédérique Dumont, Louise Didier et Sylvain Boyer
