Index
Lectures : les pages d'un YesWiki
Elements de base sur les pages
Pour modifier une page, vous allez passer "en mode édition". Pour cela 3 manières (choisissez votre préférée !) :- double-clic au centre de la page
- bouton "éditer la page" tout en bas de la page
- rajouter /edit à la fin de l'url
Mettre en forme le texte
En mode édition, le langage YesWiki nécessite de connaître quelques petites astuces pour mettre en forme le texte d'une page. En voici quelques unes de base.
A noter : La plupart est accessible directement dans la barre d'édition !
Remarque : en mode édition, il faut sauter une ligne après une liste à puce pour garder la coloration syntaxique... (mais pas pour les listes énumérées)
A noter : La plupart est accessible directement dans la barre d'édition !
Les principales astuces de mise en page
Accentuation
**Gras**
//Italique//
__Souligné__
@@Barré@@
Titres
======Titre 1======
=====Titre 2=====
====Titre 3====
===Titre 4===
==Titre 5==
Insérer une ligne
----
Listes
- Liste à puce niveau 1 - Puce niveau 1 - Puce niveau 2 - Puce niveau 2 - Puce niveau 1 1) Liste énumérée 1) Liste énumérée 1) Liste énumérée
Remarque : en mode édition, il faut sauter une ligne après une liste à puce pour garder la coloration syntaxique... (mais pas pour les listes énumérées)
Tableaux
[| | **Nom** | **prénom** | **Couleurs préférées** | | Lagaffe | Gaston | jaune | | Lapalice | Jean | vert | |]
Ecrire en html
si vous déposez du html dans la page wiki, il faut l'entourer de '' '' pour qu'il soit interprété
Placer du code en commentaire sur la page
""""
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.
En fonction du type de fichier à insérer, YesWiki propose des interfaces différentes, mais le principe reste le même.
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.
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 plus d'infos, aller sur la page {{attach}} de la documentation YesWiki.
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.
pour un fichiers image (svg, png, gif, jpg, bmp...)
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 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 asser simple.
Dans la page en mode édition, cliquer sur le bouton "Lien".
Vous serez alors guidé.e dans vos choix avec cette fenêtre :
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 ;-)
Vous avez envie de code ?
Voici ce que ça donne quand on regarde le code :Intégrer des éléments d'autres sites (widgets)
Avec YesWiki on ne réinvente pas le fil à couper le beurre et on peut facilement copier sur son voisin et récupérer 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 :
Ca peut ressembler à ça : Le code iframe que vous allez trouver ressemblera à ça :
Vous allez sélectionner et copier ce code pour aller le coller dans votre wiki.
Dans le bout de code à copier-coller, les paramètres 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
Le paramètre 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
Dans la "class" vous pouvez préciser frameborder="yes" (avec cadre noir) ou frameborder="no" (sans cadre noir)
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 à ça : Le code iframe que vous allez trouver ressemblera à ça :
Vous allez sélectionner et copier ce code pour aller le coller dans votre wiki.
2. Coller ce code dans ma 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 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
Le paramètre 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 la "class" vous pouvez préciser frameborder="yes" (avec cadre noir) ou frameborder="no" (sans cadre noir)
Créer une nouvelle page
Bien entendu, on ne peut pas se contenter d'une seule page dans sa gare centrale !
Vous pouvez initier une nouvelle page où que vous soyez dans votre wiki : dans une page classique ou dans le menu.
Il y a pour celà 2 étapes :
Donc vous pouvez choisir de l'appeler nomdemapage ou comptesrendusdereunions
Ce sera plus lisible si vous alternez avec des majuscules NomDeMaPage (c'est la méthode traditionnelle dans YesWiki, ce que vous nous appelions les ChatMot).
Et c'est encore mieux (notamment pour les moteurs de recherches) si vous optez pour les tirets : nom-de-ma-page
Ca donne ça :
Quand je cliquer 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 du contenu dans la nouvelle page.
Vous pouvez initier une nouvelle page où que vous soyez dans votre wiki : dans une page classique ou dans le menu.
Il y a pour celà 2 étapes :
- ouvrir le fenêtre permettant de faire un lien (voir plus haut)
- saisir le "Nom de la page YesWiki"
Nommer ma nouvelle page
La seule règle pour nommer votre page est indiquée : "sans espace ni caractère spéciaux".Donc vous pouvez choisir de l'appeler nomdemapage ou comptesrendusdereunions
Ce sera plus lisible si vous alternez avec des majuscules NomDeMaPage (c'est la méthode traditionnelle dans YesWiki, ce que vous nous appelions les ChatMot).
Et c'est encore mieux (notamment pour les moteurs de recherches) si vous optez pour les tirets : nom-de-ma-page
Ca donne ça :
Quand je cliquer 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 du contenu dans la nouvelle page.
Astuces
- une fois ma nouvelle page créée je peux enlever le lien qui y mène sans que la page disparaisse pour autant. Je peux retrouver mes pages dans la roue crantée en haut à droite > Tableau de bord. Une bonne manière de cacher des pages ;-)
- une tout autre manière de créer une nouvelle page est de modifier l'URL : la dernière partie de l'adresse 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 lien), on l'encadre de double guillemets: