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
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 !
image editer_une_page_barre.png (15.9kB)

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

""""

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.
image inserer_image_bouton.png (15.8kB)
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).
image inserer_image_fenetre.png (72.3kB)

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).
image inserer_image_fenetre_parametres.png (56.0kB)

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.
image inserer_image_modifier.png (34.9kB)

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.
image inserer_fichier_fenetre2.png (0.2MB)

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)
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".
image bouton_lien.png (15.3kB)

Vous serez alors guidé.e dans vos choix avec cette fenêtre :
image ajouterunlien.png (60.1kB)
  • 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 :
image DocumentationCreerUnLien_creer_un_lien_ex_chamot1_20220123191525_20220123181537.png (21.1kB)
image DocumentationCreerUnLien_creer_un_lien_ex_url1_20220123191525_20220123181548.png (37.2kB)
image DocumentationCreerUnLien_creer_un_lien_ex_mail1_20220123191525_20220123181600.png (23.0kB)

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 :

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 :
image partager.png (0.9kB)
image partageryoutube.png (2.8kB)
image intgrer.png (2.9kB)
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)


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 :
  • 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 :
image page1.png (68.3kB)



Quand je cliquer sur "insérer", ça génère cette ligne de code :

image page2.png (7.4kB)


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.

image page3.png (6.0kB)

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
image Capture_dcran_du_20220128_152625.png (6.0kB)
  • 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:
image creer_nouvelle_page_chatmot_non_lien.png (20.8kB)