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.
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)
Faire un lien
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.
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)
CC-by-SA Frédérique Dumont, Louise Didier et Sylvain Boyer
Boutons
Bouton
Un bouton est un élément visuel coloré qui permet de mettre en valeur un lien. Il se détache du contenu par son fond coloré et l'interactivité est mise en valeur par un léger changement de couleur lorsque l'utilisateur le survole avec la souris.
Paramètres avancés disponibles pour les boutons
Ouvrir dans une pop-up - permet à l'utilisateur de rester sur la même page
ouvrir dans un nouvel onglet - à n'utiliser que si le lien renvoie vers un autre site, sinon la convention est de garder le même onglet pour les liens internes
taille du bouton : petit moyen grand
position du bouton : à droite ou sur toute la largeur (j'utilise l'option "sur toute la largeur" en particulier dans les colonnes, cela permet d'avoir des boutons de la meme taille meme si le texte est de taille différente)
afficher sous forme de lien - et utiliser quand même les options telles que icone ou ouverture pop up
masquer le bouton si l'utilisateur n'a pas accès à la page cible (par exemple le bouton renvoie vers une page réservé aux admins, on peut masquer le bouton aux autres utilisateurs)
La dernière version de Yeswiki (« Doryphore ») présente une nouveauté dans l'interface d'édition qui facilite grandement l'utilisation des éléments de mise en forme : les composants.
Une interface permet maintenant d'insérer facilement des boutons (et autres éléments de mise en forme, les explications ci-dessous s'appliquant de la même manière).
Si vous souhaitez modifier un paramètre de votre bouton pour utiliser une autre couleur par exemple, il est possible d'éditer le composant en cliquant sur la ligne dans l'éditeur, un crayon apparait à gauche, il permet de réafficher les paramètres du bouton. (voir demo ci-dessous)
Pour aller plus loin dans la mise en forme, vous pouvez cocher la case paramètres avancés
00:00 / 00:00
Composants de mise en forme du texte
La dernière version de Yeswiki (« Doryphore ») présente une nouveauté dans l'interface d'édition qui facilite grandement l'utilisation des éléments de mise en forme : les composants.
Une interface permet maintenant d'insérer facilement des boutons (et autres éléments de mise en forme, les explications ci-dessous s'appliquant de la même manière).
Si vous souhaitez modifier un paramètre de votre bouton pour utiliser une autre couleur par exemple, il est possible d'éditer le composant en cliquant sur la ligne dans l'éditeur, un crayon apparait à gauche, il permet de réafficher les paramètres du bouton. (voir demo ci-dessous)
Pour aller plus loin dans la mise en forme, vous pouvez cocher la case paramètres avancés
00:00 / 00:00
Étiquettes
Les étiquettes
Nouveauté
Les étiquettes sont disponibles dans les composants. C'est une petite indication qui attire l'oeil. Elle s'adapte bien à un texte court pour donner un qualificatif à une rubrique.
Paramètre disponible
couleur
Les 3 couleurs que vous avez choisi dans votre configuration graphique sont disponible pour les étiquettes (primaire, secondaire 1 et secondaire 2).
4 couleurs supplémentaires porteuse de sens, comme leur nom l'indique :
info, la couleur de l'étiquette info est une déclinaison plus claire de votre couleur primaire, elle offre un balisage visible mais se fond dans le contenu
success, un vert synonyme d'un événenement positif ou d' "objectif validé"
warning, pour un point de vigilance - une échéance proche
danger, pour un point de désaccord ou un point urgent
Encadrés
Encadré
Mon texte accordeon
Ce type d'encadrés ou d'accordéon permet d'afficher / masquer un texte. Il est disponible sous le nom "Encadré" dans les composants. L'action qui en découle s'appelle panel et se décline sous différentes formes : dépliée ou pas et dans les différentes couleurs de base de votre thème : Primary Secondary-1 ...
Cette mise en forme s'adapte particulièrement bien pour les FAQ (Foire aux questions)
Paramètres
Type :
- simple encadré
- accordeon ouvert
- accordéon fermé Couleur : comme pour les étiquettes un jeu de couleurs correspondant à votre configuration graphique est disponible. Essayer d'adopter une couleur pour un type d'information.
La section permet de définir un style pour un des blocs de votre page : un simple fond de couleur ou un bandeau avec une image de fond Doc Background
Un fond de couleur avec votre couleur primaire mettra en avant votre texte.
Un fond en pleine largeur avec une image crée une séparation fluide entre 2 parties qui traitent de sujets différents.
Paramètres
texture : permet de choisir si un utilise une couleur unie ou des motifs en fond de section
forme : la section peut aussi prendre une forme de blob (!) à tester
tonalité : permet de jouer sur les contraste entre le texte et le fond pour assurer une bonne lisibilité
afficher sur toute la largeur - permet de couvrir toute la largeur de l'écran (supprime les marges)
les options animation pour mettre en mouvement une partie du contenu
Nouveauté une option pour masquer/afficher une section aux utilisateurs non connectés
L'option "Ne pas mettre de conteneur" est parfois utile si vous combinez plusieurs types de composants (section et colonnes par exemple) et que votre texte déborde
Colonnes
Les colonnes
Structurer le contenu
Le composant colonne vous permet d'insérer le code wiki correspondant à 4 colonnes. L'écran étant divisable en 12 colonnes, à vous de le moduler la taille et le nombre de colonne pour obtenir la structure souhaitée.
Paramètres
Aucun paramètre proposés à ce jour.
Le nombre de colonnes et leur taille sont à adapter directement dans le code qui est proposé de base pour 4 colonnes.
Ci-dessous un exemple pour 2 colonnes 1/3 (size 4) + 2/3 (size 8)
Les onglets permettent de lier un groupe de pages. Il peut être considéré comme un sous-menu. Mais à l'inverse du menu déroulant sur lequel il faut revenir cliquer pour voir les options, le sous-menu en onglets reste visible pour l'utilisateur, il constitue un bon point de repère.
Paramètres
Les onglets peuvent être affichés en vertical - c'est à dire à gauche de votre contenu....
