Un total de 25 pages ont été trouvées avec le mot clé Gatien Bataille.

Agencer le menu

Votre menu est une liste à puces ;-)

  • Chaque puce crée un onglet
  • Lorsque vous créez une sous-puce
    • chaque sous-puce devient une page du menu déroulant
    • la puce "mère" n'est plus clicable car elle provoque "juste" l'ouverture de la liste

Pour créer des pages dans ce menu, il faut donc éditer la PageMenuHaut de votre wiki en double cliquant sur le menu.
Utilisez ensuite le symbole lien pour créer les pages nécessaires ou afficher les pages existantes.

Le réagencement des puces et sous-puces modifient le rendu de votre menu

Le module bazar de yeswiki

Bazar est une extension importante de Yeswiki qui lui ajoute des fonctionnalités de création et de gestion de bases de données.

Elle vous permet :
  • de créer des base de données avec des champs au format divers (texte, texte long, date, lieu, liste déroulante, liste à cocher, fichier à télécharger, image, url, email....)
  • d'ajouter des données dans vos bases de données (vous et tous ceux à qui vous le permettez)
  • de montrer le contenu (tout ou une partie seulement) de vos bases de données sous différents rendus et ce simplement (calendrier, annuaire, listes, cartes...) !
    • ... (vous avez la main pour créer votre propre vue si vous êtes un peu débrouillard)
  • de permettre à vos visiteurs de chercher dans vos bases de données via des modules simples

Par défaut, quand on installe un nouveau wiki, une page "gestion des bases de données" est créée. Elle est accessible via la roue crantée en haut à droite du menu.

Pour pouvoir créer et modifier, il faut être connecté en tant qu'administrateur.
La consultation et la recherche sont ouvertes à tous (par défaut mais paramétrable si besoin)
Pour installer bazar sur votre wiki, il suffit d'insérer sur n'importe quelle page
{{bazar}}


Que trouve-ton dans la page bazar ?

"Rechercher" vous permet de rechercher parmi les fiches déjà présentes dans vos bases de données.
Vous pouvez aussi trier vos fiches pour n'afficher que celles appartenant à une base de données choisie via la liste déroulante de droite

"Saisir" vous permet de saisir des données dans une de vos base de données. Il suffit de cliquer sur l'icône + correspondant à la ligne de la base de donnée que vous souhaitez compléter

"Formulaire" vous permet de gérer vos bases de données

"Liste" vous permet de créer les listes (et leurs contenus) que vous utiliserez ensuite dans vos formulaires de saisie de données.

"Importer" vous permet d'importer des données en nombre (en provenance d'un tableur par exemple) directement dans une de vos bases de données

"Exporter" vous permet d'exporter les données d'une de vos bases de données pour un usage externe (dans un tableur par exemple)

Bazar : une base de données coopératives



Un autre bon exemple de base de données coopérative : OpenStreetMap, la carte ouverte et collaborative du Monde. Elle est améliorée chaque jour par plus d’un million de contributeurs.
(En savoir plus sur OpenStreetMap)

supprimer une page, gérer les accès aux pages

Yeswiki a beau être très ouvert lors de son installation, il n'en offre pas moins une gestion fine des droits de lecture et d'écriture de son contenu.
Cette gestion permettra :
  • de limiter l'accès du yeswiki à certaines personnes ou catégories de personnes (groupes)
  • de protéger certaines parties (bandeau, menu, footer...) de votre wiki contre les modifications involontaires (ou intempestives)

Retenons toutefois quà côté de cette gestion technique des droits d'accès, il est possible de mettre en place certaines stratégies (trucs et astuces) pour limiter l'accès à son wiki (ou partie de son wiki) sans devoir passer par cette gestion technique (parfois lourde). Gardons aussi à l'esprit que l'humain a naturellement tendance à surestimer les risques (plutôt bien quand il était cueilleur-chasseur mais moins nécessaire aujourd'hui). Ce comportement hérité nous pousse parfois à "surprotéger" des zones sans réels risques. Un biais cognitif a reconvoquer de temps à autre quand on gère un wiki ,-) Pour les amateurs, une petite lecture sur ce biais est disponible ici

Un préalable pour jouer dans les droits d'accès : exister sur le wiki

En effet seules les personnes ayant un compte sur le wiki peuvent modifier les droits d'accès aux pages et encore avec certaines limites. La seule personne ayant tous les droits est celle qui a créé le wiki (le super admin). Cette personne peut évidemment partager ses droits avec d'autres utilisateurs du wiki (voir plus bas)

Il est donc nécessaire de pouvoir se créer un compte sur le wiki ou de se connecter à celui-ci. Cela s'opère via la roue crantée du wiki / se connecter (ou s'inscrire). En cas de perte du mot de passe, le lien "mot de passe perdu" pourra vous le renvoyer sur le mail indiqué lors de l'inscription.

Une fois connecté, vous ne possédez pas encore beaucoup de droits (sauf si l'administrateur du wiki vous en a attribué) à savoir :
  • créer des pages (vu précédemment)
  • vous attribuer la propriété d'une page
  • attribuer des droits d'accès en lecture et écriture sur les pages dont vous êtes propriétaire
  • supprimer les pages dont vous êtes propriétaire

Devenir propriétaire d'une page

  • On devient automatiquement propriétaire des nouvelles pages que l'on crée lorsque l'on est connecté sur le wiki (cela se vérifie en bas de page avec la mention propriétaire = vous)
  • Pour devenir propriétaire d'une page sans propriétaire, il suffit de cliquer sur Appropriation (en bas de page) : se faisant vous recevez des droits de gestion sur cette page (même si ça ne se voit pas comme ça)
  • On ne peut devenir propriétaire d'une page qui a déjà un propriétaire, mais le propriétaire lui même peut décider de vous nommer nouveau propriétaire de cette page. Si vous avez reçu des droits d'admin sur le wiki, vous pourrez devenir propriétaire de n'importe quelle page sans l'accord du propriétaire !

Supprimer une page dont vous êtes propriétaire

Lorsque vous êtes propriétaire d'une page, un bouton supprimer apparait en bas de page. Il vous permettra de supprimer définitivement la page et son historique (attention c'est sans retour d'où le message de confirmation !).
Si vous avez reçu des droits d'admin sur le wiki, vous pourrez modifier toutes les pages, y compris celles dont vous n'êtes pas propriétaire.

Modifier les droits d'une page dont vous êtes propriétaire

En bas de page, vous allez trouver un bouton permissions. En cliquant sur celui-ci, une fenêtre popup va vous permettre de gérer les droits en lecture et écriture.
Voici les possibilités qui vous sont offertes
image EditerPermissions.png (14.2kB)

Cette gestion page par page et user par user est vite "pesante
Pour dépasser cette lourdeur,
  • un module de gestion des droits des utilisateurs par groupe a été créé
  • un module de gestion du droit d'accés aux pages en masse a été créé

Gestion des droits par utilisateurs

La gestion utilisateur par utilisateur est trés fine MAIS présente quelques inconvénients :
  • lorsque vous avez limité l'accès de plusieurs pages à un utilisateur et qu'un nouvel utilisateur doit recevoir les mêmes accès, vous voilà bon à repasser sur chaque page pour y ajouter son nom ;-(
  • idem dans l'autre sens, si un utilisateur doit "perdre" ses accès

Pour s'affranchir de ces limites, la notion de groupe a été introduite.
Un groupe reprend un ou plusieurs utilisateurs wiki. Il se nomme @nomdugroupe.
Un seul groupe existe par défaut sur le wiki @admins et contient par défaut un seul utilisateur à savoir celui qui a créé le wiki.
Ce groupe @admins a TOUS les droits sur TOUTES les pages du wiki.
C'est un groupe "sensible" donc car les utilisateurs qui s'y trouvent ont des pouvoirs importants sur le wiki et notamment des pouvoirs de suppression (de pages, de formulaires bazar, de listes...) avec des effets potentiellement complexes à "rattraper". Il faut donc être vigilant avec les utilisateurs que l'on va placer dans ce groupe.

Il est possible de créer autant d'autres groupes que souhaité.
Ces autres groupes n'ont aucun privilège sur le wiki. Ils sont simplement un regroupement d'utilisateurs. Ce regroupement, ce groupe (@poule, @coq, @...) pourra être utilisé dans la gestion des droits des pages du wiki comme on le ferait pour un utilisateur (on mettra le nom du groupe plutôt que le nom de l'utilisateur).
Ce faisant, si un utilisateur (membre du groupe @coq) quitte le projet et ne doit plus pouvoir modifier les pages auquels il avait accés en écriture, il ne faut pas repasser sur chaque page concernée mais il suffira de l'enlever du groupe @coq ;-)

Pour gérer les groupes (et les utilisateurs inclus) cela se passe sur la page "utilisateurs et groupes" accessible via la roue crantée / gestion du site (attention, il faut faire partie des administrateurs du wiki pour pouvoir modifier, créer, supprimer des groupes)

Voici à quoi ressemble la page
  • pour voir le contenu des groupes : je choisis dans la liste et fait "voir/éditer"
  • pour créer un nouveau groupe : j'indique son nom et fait "définir"
  • pour supprimer un groupe (attention) : je choisis et fait "supprimer"
Pour info : en bas de cette page, vous découvrez et gérer (si vous êtes dans le groupe @admins) les utilisateurs connus du wiki.
image EditerPermissions.png (14.2kB)


Pour ajouter ou retirer un utilisateur d'un groupe
lorsque j'ai cliqué sur voir/éditer le groupe concerné, il me suffit dans la case qui apparaît d'indiquer (ou de retirer) le nomwiki de l'utilisateur sur une ligne (sans virgule) et d'enregistrer
image EditerPermissions.png (14.2kB)

Gestion des droits des pages en masse

La gestion page par page c'est sympa mais quand on a 150 pages dans son wiki... ça peut vite devenir très long. Heureusement il existe une page permettant de gérer les changements des droits d'accès de plusieurs pages (toutes les pages) en même temps.

Cette page se nomme "Droits d'accès aux pages" et est accessible via la roue crantée / gestion du site. (attention, il faut faire partie des administrateurs du wiki pour avoir accès à cette page)

Sur cette page, vous pourrez aussi voir les droits qui sont attribués à chacune des pages du wiki et pourrez cocher les pages qui doivent être modifiées et attribuer en bas les nouveaux droits en utilisant

en mode simple

via les listes déroulantes proposées (droit de lecture, droit d'écriture)
image EditerPermissions.png (14.2kB)

en mode avancé

via les champs classiques (ceux qu'on retrouve quand on édite les droits d'une page seule)
image EditerPermissions.png (14.2kB)

Gestion des droits des pages "à venir"

Cette gestion permet de gérer l'existant mais comment gérer ce qui va s'ajouter au wiki ?
  • soit en le faisant chemin faisant via les méthodes présentées ci-dessus
    • méthode la plus courante
  • soit en attribuant des droits par défaut à toutes les nouvelles pages créées
    • mais il faut un accès FTP pour modifier le wakka config sur le serveur
    • Pour ce faire modifier ces 3 lignes en remplaçant les * par la syntaxe voulue
'default_write_acl' => '*',
'default_read_acl' => '*',
'default_comment_acl' => '@admins',


Comprendre les pages de gestion

Pour gérer votre wiki, (oui il faudra le gérer !), un esnemble de pages est à votre disposition.
Ces pages sont accessibles via la roue crantée / gestion du site
Pour pouvoir y intervenir, il faudra le plus souvent être connecté et membre du groupe admin du wiki. Certaines opérations y sont en effet sensibles.

  • La page gestion du site
    • vous permettra de modifier les pages du squelette de votre wiki ainsi que lapage d'aide accessible dès que vous êtes en mode édition via le ?
  • la page droits d'accès aux pages vous permet de gérer "en masse" qui peut avoir accès à quoi dans le wiki
  • la page thèmes graphiques vous permet de changer le look de votre wiki (ou de seulement quelques pages de votre wiki)
  • la page utilisateurs et groupes va vous permettre d'affiner les rôles dans votre wiki et de gérer plus finement les accès aux pages. Vous pourrez aussi y voir les utilisateurs existants et les gérer
  • la page mise à jour vous permettra de mettre à jour votre wiki facilement

Créer des colonnes

Pour faciliter la structuration du contenu des pages, on peur créer des colonnes.

Le principe à comprendre et que chaque page est "découpée" en 12 parties égales que l'on peut utiliser pour créer les colonnes.
Ainsi on pourra faire 2 colonnes de 6 parties qui couperont donc la page en2 colonnes égales.
Mais on peut donc aussi faire trois colonnes de 4 parties (3*4 = 12) ou une grande colonne de 6 et 2 colonnes de 3 (6+2*3=12) ...

La syntaxe pour créer les colonnes est celle-ci et s'adapte selon les besoins
{{grid}}
{{col size="6"}}
===Titre de la colonne 1===
Texte colonne 1
{{end elem="col"}}
{{col size="6"}}
===Titre de la colonne 2===
Texte colonne 2
{{end elem="col"}}
{{end elem="grid"}}

En tout cas elle débute toujours par {{grid}} et se termine par {{end elem="grid"}}
Entre ces grid, on crée la colonnes avec {{col size="6"}} que l'on ferme par {{end elem="col"}}

colonnes.png (2.9kB)

Créer une nouvelle page / un lien

Créer une page dans yeswiki est très facile ! (il suffit d'écrire un mot contenant deux majuscules
Chaque page d'un wiki porte un nom contenant au moins deux majuscules non consécutives, autrement dit un mot à deux bosses ou ChatMot.
Ce nom doit être
  • tout attaché,
  • sans accent et
  • sans caractère spéciaux.

Vous pouvez aussi créer une page TRES simplement en cliquant sur l'icône lien 🔗 de la barre de menu (en mode édition) et en répondant aux questions posées.
image page_wiki_le_concept.jpg (97.0kB)

Le corollaire est que parfois il est possible de se perdre entre :
  • le nom de cette page (souvent appelé nomwiki de la page)
  • son contenu (le texte, images...)
  • les liens pointant vers cette page

Pour bien comprendre :
image page_wiki_le_concept.jpg (97.0kB)

Créer un formulaire

Pour créer un formulaire dans Yeswiki, il faudra vous rendre dans la roue crantée / base de donnée.
Avant de vous lancer, pensez bien à ce que vous souhaitez récolter et surtout pourquoi vous souhaitez ces infos. Faites aussi attention au RGPD.

Que se passe-t-il lorsque j'utilise le constructeur graphique de formulaire bazar ?

Lorsqu’on crée ou modifie un formulaire bazar, deux méthodes nous sont offertes. La méthode par défaut dans doryphore est le constructeur graphique.

image dcfhabjikckbbnbi.png (9.7kB)
Celui-ci permet de construire son formulaire de manière relativement intuitive sans avoir recours à du code puisque son rôle est justement d’écrire le code pour vous.

Il est cependant parfois utile de comprendre ce qui se passe derrière. Nous allons donc l’illustrer avec deux exemples, le cas d’un champ texte, et celui d’un groupe de cases à cocher.

Tout d’abord, quelques petites règles simples :
  • à chaque champ placé dans le constructeur graphique, correspond une ligne dans l’onglet « code » ;
  • l’ordre est le même dans les deux onglets (les champs dans le constructeur graphique sont dans le même ordre que les lignes correspondantes dans l’onglet « code » ;
  • chaque ligne de code est composée de plusieurs paramètres et ces différents paramètres sont séparés par des groupes de trois astérisques (***) ;
  • le premier de ces paramètres indique toujours le type de champ.

Voyons maintenant ce qui se passe dans le cas d’un champ texte.

L’image ci-dessous montre la façon dont ce qui est rempli dans le constructeur graphique pour un champ texte se retrouve dans la ligne correspondante du code.

image alpdkgehbbnibiem.png (0.3MB)


Si on regarde la ligne de code (on se rappelle que les différents paramètres sont délimités par ***) on constate, par exemple, que :
  • le 1er paramètre contient bien le type de champ,
  • dans le 2e on retrouve le nom du champ,
  • le libellé du champ est dans le 3e paramètre,
  • les 4e et 5e paramètres contiennent les nombres de caractères affichés et maximum respectivement,
  • le 9e paramètre indique que le champ est obligatoire (« 1 »),
  • le 11e paramètre contient le texte d’aide,
  • le 12e paramètre indique que le champ peut être lu par tout le monde (« * »).

Tous ces détails et bien d’autres encore se trouvent sur la page https://yeswiki.net/?ChampsPossibles

Regardons à présent les différences dans le cas d’un champ de type groupe de cases à cocher.

L’image ci-dessous montre la façon dont ce qui est rempli dans le constructeur graphique pour un groupe de cases à cocher se retrouve dans la ligne correspondante du code.

image oeimcnmcfckahabb.png (0.1MB)

Le comportement est identique à celui que l’on a vu pour un champ de type texte à la différence de :
  • le 1er champ dans le constructeur graphique (intitulé «nom») est vide et n’a pas de correspondance dans la ligne de code ;
  • le 2e paramètre de la ligne de code contient le nom de la liste utilisée pour ce groupe de cases à cocher ;

La page de référence pour retrouver le rôle de chacun des paramètres des codes de champ bazar est : https://yeswiki.net/?ChampsPossibles
Présentation dans le constructeur graphique
Ca fait quoi ?
Où chercher dans yeswiki.net/?ChampsPossibles
et (type de champ) dans l'onglet « code »

image 1textecourt.png (3.7kB)
Une question à laquelle on répond en tapant un texte court (une ligne)
"Texte court"
(texte)

image 2zonedetexte.png (4.6kB)
Une question à laquelle on répond en tapant un texte long (plusieurs lignes)
"Texte long"
(textelong)

image 3image.png (3.0kB)
Une question à laquelle on répond en téléchargeant une image
"Image jointe"
(image)

image 4uploadfichier.png (5.3kB)
Une question à laquelle on répond en téléchargeant un fichier
"Upload de fichier"
(fichier)

image 5email.png (2.4kB)
Une question à laquelle on répond en tapant une adresse mail
"Adresse mail"
(champs_mail)

image 6motscls.png (4.4kB)
Une question à laquelle on répond en tapant un ou plusieurs mots-clés
"Mots-clés / tags"
(tags)

image 8champdetypehidden.png (7.2kB)
Une indication invisible qui permet d'entrer des variables sans que le contributeur ne le fasse.
Exemple : champ hidden bf_pays=france ce qui permet que toutes les adresses saisies soient cherchées en france
"Champ caché"
(champs_cache)

image 9Selectionner.png (4.7kB)
Une question à laquelle on répond en sélectionnant une réponse parmi plusieurs pré-écrites
"Liste déroulante"
(liste)

image 91groupedecasesacocher.png (7.8kB)
Une question à laquelle on répond en cochant une ou plusieurs réponses parmi plusieurs pré-écrites
"Checkbox / cases à cocher"
(checkbox)

image 92groupedeboutonsradio.png (7.4kB)
Une question à laquelle on répond en cochant une seule réponse parmi plusieurs pré-écrites et visibles
"Radio"
(radio)

image 93champdate.png (4.9kB)
Une question à laquelle on répond en saisissant une date (voire une heure)
"Date et heure"
(listedatedeb)

image 94geolocalisation.png (7.9kB)
Une carte avec un bouton invitant à positionner le point à partir d'une adresse et/ou ville et/ou pays saisi(s) par ailleurs
"Cartographie permettant de positionner automatiquement l'adresse "
(carte_google)

image 95inscriptionlistediffusion.png (6.8kB)
Une case à cocher pour accepter l'inscription d'une adresse mail saisie par ailleurs à une mailing-liste
"Proposer l'inscription à une liste de discussion / diffusion"
(inscriptionliste)

image 96customhtml.png (4.8kB)
Du texte (titre ou pas) visible dans le formulaire et/ou les fiches
"Mettre un titre ou du texte au sein d'un formulaire"
(labelhtml)

image 97crerunutilisateur.png (8.9kB)
Demande la saisie d'un mot de passe et crée un compte utilisateur, à partir d'un nom et d'une adresse mail saisis par ailleurs
"Créer un utilisateur wiki dès la création d'une fiche"
(utilisateur_wikini)


image 98configdroitsdacces.png (8.0kB)
Configure les droits d'accès des fiches
"Gérer les droits dès la création de la fiche"
(acls)


image 99configtheme.png (7.6kB)
Configure le thème graphique des fiches
"Associer un thème dès la création de la fiche"
(metadatas)

image 911bookmarklet.png (4.4kB)
Permet de générer un bouton à glisser dans la barre de menu de son navigateur pour saisir directement cette fiche bazar depuis celui-ci sans avoir à aller sur le wiki.
"Bookmarklet"
(bookmarklet)

image 912listedesfichesliees.png (5.5kB)
Génère une liste de toutes les fiches bazar qui pointent vers cette fiche.
Exemple : on a des fiches produit et des fiches producteurs, on peut ici pointer tous les producteurs qui vendent ce produit. Dans ce cas, il faut que les checkbox ou listes pointent vers un autre formulaire bazar et non vers des listes.
"Afficher les fiches qui pointent vers une fiche"
(listefichesliees)

image 913titreautomatique.png (5.6kB)
Genère un titre de fiche à partir de réponses saisies par ailleurs
Exemple : on a un bf_nom, bf_prenom et bf_structure, avec titre automatique, on peut faire un bf_titre qui soit la concaténation de tous ces éléments
encadré « pour aller plus loin » dans « Titre : texte court qui donnera le nom à la fiche »
(titre)

image 914custom.png (3.9kB)
Un code sur mesure pour les développeurs
Nulle part, c'est nouveau !

Enrichir avec une image / un son / une vidéo

Insérer une image

Une fois en mode édition,
  • placez votre curseur où vous souhaitez voir apparaître l'image
  • cliquez sur joindre/insérer un fichier
  • trouvez une image sur votre ordinateur et suivez les indications (centrer à droite, gauche... associé un lien...mettre un bord blanc... )
  • regardez la syntaxe générée par wiki et essayez de la déchiffrer (mais on peut vivre sans la comprendre ;-)
  • faites sauver et voyez ce qui l'en est !
  • C'est pas super, envie d'essayer autre chose ?
    • pour supprimer la photo : vous effacez la ligne dans le code {{attach...}}
    • pour modifier son rendu sans changer la photo : en mode édition, vous cliquez sur la ligne concernée {{attach...}} et sur le petit crayon qui apparait

Attention
internet c'est déjà pas mal gourmand en énergie, inutile d'aller mettre sur votre wiki des images "trop volumineuses". Il existe des services pour redimensionner ses images.

Insérer un son

Une fois en mode édition,
  • placez votre curseur où vous souhaitez voir apparaître le lecteur de votre son MP3
  • cliquez sur joindre/insérer un fichier
  • trouvez un son (MP3) sur votre ordinateur et suivez les indications
  • faites sauver et voyez ce qui l'en est !
  • C'est pas super, envie d'essayer autre chose ?
    • pour supprimer le son : vous effacez la ligne dans le code {{attach...}}
    • pour modifier le son : en mode édition, vous cliquez sur la ligne concernée {{attach...}} et sur le petit crayon qui apparait

Insérer une vidéo

Vous avez une vidéo MP4 sur votre ordinateur

Une fois en mode édition,
  • placez votre curseur où vous souhaitez voir apparaître la vidéo
  • cliquez sur joindre/insérer un fichier
  • trouvez la vidéo en mp4 sur votre ordinateur et suivez les indications
  • faites sauver et voyez ce qui l'en est !
  • C'est pas super, envie d'essayer autre chose ?
    • pour supprimer : vous effacez la ligne dans le code {{attach...}}
    • pour modifier : en mode édition, vous cliquez sur la ligne concernée {{attach...}} et sur le petit crayon qui apparait

Votre vidéo est sur une plateforme

Une fois en mode édition,
  • placez votre curseur où vous souhaitez voir apparaître la vidéo
  • cliquez sur composant / vidéo intégrée
  • et suivez les instructions

Insérer des boutons, des aplats...

Avec l'apparition des composants dans la barre d'édition des pages du wiki, de nombreuses possibilités de mise en page ont été simplifiées.
Il suffit la plupart du temps de répondre aux questions posées pour insérer :
  • boutons (clicables ou non et de couleurs au choix)
  • aplat de couleur (pour faire une bande de couleur qui traverse la page de gauche à droite et sur laquelle on peut écrire du texte / idem avec une image)
  • étiquettes (petit mot coloré pour attirer l'attention)
  • encadré (ouvert, fermé)
  • des onglets (au sein de la page)
  • des vidéos
  • des formulaires (voir le parcours avancé)
  • ...

Quelques exemples ci-dessous


Etiquettes

Label-default label-primary label-secondary-1 label-secondary-2 label-success label-info label-warning label-danger

Encadrés (ouverts, fermés)

Contenu panel-default

Titre primary

Contenu panel-primary
Contenu panel-success

Boutons

btn-primary btn-secondary-1 btn-secondary-2

Des onglets


Insérer un pad (co écriture)

Le pad est un outil de coécriture génial et trés simple. On y accède par une url.
Pour faciliter son accès, et éviter ainsi de devoir retenir son url souvent compliquée, on peut l'intégrer, l'encapsuler dans le wiki.

La procédure est la suivante :
  • créez le pad sur un serveur de pad comme www.framapad.org par exemple
  • une fois créé, cliquez sur l'icone partager en haut à droite du pad
  • récupérez le code iframe
  • revenir sur son wiki et déposer ce code iframe à l'endroit où l'on souhaite voir apparaître le pad.
  • attention n'oubliez pas d'entourer ce code iframe par deux doubles guillemets devant et derrière.

Mettre à jour son wiki (régulièrement!)

Comme tout outil, un wiki doit être entretenu.
Et la première chose à faire est de le maintenir à jour.
Des bugs sont régulièrement repérés et corrigés.
Mettre à jour votre wiki permet de bénéficier d'une protection optimale et des dernières avancées.

Pour ce faire, vous devez être connecté et membre du groupe admin
Dans la roue crantée / gestion du site / mise à jour, vous trouverez
  • la version de votre Wiki (par ex doryphore 2021-03-18-4)
  • la version disponible sur le dépot : doryphore 2021-03-18-4

Si une version plus récente existe, vous êtes invité à la mettre à jour en cliquant.

Pensez aussi à mettre à jour les thèmes ou tools(extensions) lorsqu'un message vous y invite.

Modifier le code couleur du wiki

Vous avez structuré votre Yeswiki, les premières fonctionnalités sont là mais il manque encore un petit quelque chose ? Naturellement on a envie que le yeswiki soit joli et fonctionnel. L'objectif de ce module est de vous donner quelques clés pour faire en sorte que votre collectif se sente bien dans le wiki. Il s'agit d'imaginer les utilisateurs qui visitent notre site et de leur porter une attention particulière.
Culture générale
Retenons trois composantes:
- L’attirance émotionnelle qui pose un décor le plus proche possible des valeurs et des besoins du collectif; les couleurs, les images mais aussi choisir des mots qui seront familiers aux utilisateurs
- La facilité de navigation : trouver la bonne information en 3 clics, en plus du menu on peut avoir des boutons, des images cliquables, des liens qui permettent d'avoir un parcours fluide et personnalisé;
- La simplicité : éviter les informations inutiles, ne surchargez pas les pages.

Animation du collectif

Ergonomie oui mais pour qui ?

Il ne s'agit pas seulement d'être joli et bien assorti, l'enjeu est de guider des utilisateurs au sein de votre projet.
A quels besoins répond le site ?
Besoin d'appartenance à un groupe
Besoin d'infos pointues
Plaisir de la découverte
Faire ensemble

Prenez le temps de dresser le portrait de vos utilisateurs
A quelle situation est confronté l'utilisateur ? De quoi a t il besoin pour avancer ?
Notez pour chacun ce qui peut le rassurer, le motiver mais aussi ce qui peut le perturber, le rebuter...



Upload file visiteur.png

Nouvel arrivant

> cherche à mieux connaitre le projet et la communauté
> cherche des infos utiles pour lui / sur sa problématique du moment
> souhaite savoir comment participer éventuellement - conditions d'utilisation du site
Upload file team.png

Observateur inactif

> recoit les infos
> observe les contributions des autres
> fait le pont avec d'autres projets dans lesquels il est plus actif
> repère les tâches ou les étapes dans lesquelles s'impliquer plus tard


Upload file selecting_team.png

Les réactifs

> connait bien le projet global
> répond aux invitations des proactifs
> en recherche d'informations précises (fonction gare centrale)
> contribue quand on le lui rappelle, sur les sujets qui le touchent directement



Upload file pro-actif.png

Les proactifs

> met en place les outils et pense les interactions entre membres
> contribue régulièrement
> anime la communauté, rythme le projet
> veille sur les usages des membres et fait évoluer les outils

Technique

Personnaliser les couleurs

Avez vous déjà une palette de couleurs ?
Si ce n'est pas encore le cas, voici un outil en ligne pour vous permettre de trouver facilement des couleurs assorties : https://coolors.co/palettes
Plusieurs manières de générer une palette :
  • explorer les couleurs à la mode avec l'option "Explore"
  • générer votre palette au hasard en appuyant sur la barre d'espace jusqu'à tomber sur une couleur qui vous parle, vous pourrez alors la bloquer grace au cadenas puis continuer à explorer
  • générer la palette à partir d'une image (votre logo ou une photo dont les tons vous plaisent) Upload file coolors.png
  • générer la palette à partir de votre couleur principale (pour indiquer votre couleur, il faut cliquer sur le code hexa cela vous permet de passer en édition et coller votre code couleur)

N'utilisez la couleur dominante de votre palette que sur les éléments essentiel de votre site ( appel à l'action, bouton, liens ...) Cette couleur dominante peut-être la même que celle de votre logo.

Pour en savoir plus sur la signification des couleurs : lecture complémentaire sur les codes couleurs La couleur prune choisie par Louise est "classique, invitant à l’harmonie, au calme, sans être morose".


Intégrez ces couleurs dans votre wiki
Le jeu de couleurs peut être personnalisé en copiant quelques lignes de codes.
Créez une page intitulée : PageCss Voici les lignes de codes qui vous permettront de définir vos couleurs principales :
:root {
   --primary-color: #71334f;     /* **couleur de la barre de menu, des titres et des liens** */
   --secondary-color-1: #a0294d; /* **couleur utilisée pour les cadres des facettes** */
   --secondary-color-2:#cf4a67;  /* **couleur utilisée pour l'encadre du texte mis en valeur** */
   --neutral-color:#a499ab;      /* **couleur des textes** */
   --neutral-soft-color:#a499ab; /* **couleur du menu de la barre d'edition** */
   --neutral-light-color:#fff;   /* **couleur de fond de votre wiki** */

   --success-color: #f8e156;     /* ** couleur utilisée pour les messages positifs par defaut vert ** */
   --danger-color: #e46d36;      /* ** couleur utilisée pour les messages d'erreur par defaut rouge ** */
   --warning-color: #f8e156;     /* ** couleur utilisée pour les messages d'alerte par defaut orange ** */

  --main-text-color:#2b3441;                              /* **couleur des textes** */
  --main-text-fontsize: 17px;                             /* **taille du texte** */
  --main-text-fontfamily:'Noto Sans Regular', sans-serif; /* **police** */
  --main-bg-color:var(--neutral-light-color);             /* **couleur de fond de votre wiki** */
  --main-container-bg-color:var(--neutral-light-color);   /* **couleur de fond de la partie centrale votre wiki** */
  
  --link-color: var(--primary-color); /* ** couleur des liens** */
--link-hover-color: var(--primary-color); /* ** couleur des liens au survol ** */
--navbar-bg-color: var(--primary-color); /* ** couleur de la barre de menu ** */
--navbar-text-color: var(--neutral-light-color);
--navbar-link-color: var(--neutral-light-color);
--navbar-link-bg-color: transparent;
--navbar-link-hover-color: rgba(255,255,255,0.85);
--navbar-link-bg-hover-color: transparent;
--navbar-border: none;
--navbar-border-radius: 0;
--navbar-shadow: none;
--header-bg-color: var(--neutral-light-color);
--header-text-color: var(--neutral-color);
--header-title-color: var(--primary-color);
--footer-bg-color: transparent;      /* **couleur de fond du pied de page ** */
--footer-text-color: var(--main-text-color);
--footer-title-color: var(--main-text-color);
--footer-border-top: 3px solid var(--neutral-soft-color);
--btn-border: none;
--btn-border-radius: .5em;
--checkbox-color: var(--primary-color);
}

Vous pourrez alors jouer facilement en choississant dans vos composants (sections, boutons, encadrés) des couleurs issues de votre palette (primary, secondary-color-1, secondary-color-2).

Personnaliser la police

Le choix d'une police différente demande un peu plus de technique.

Google font propose 900 polices libres : vous pouvez les utiliser gratuitement. L'avantage est qu'elles sont optimisées pour tous les navigateurs.
Tuto ajouter une police dans la PageCss de mon yeswiki grâce au code fourni par google fonts.
Si vous ne souhaitez pas utiliser le service de Google, vous pouvez également héberger vous-même les polices
Sur https://google-webfonts-helper.herokuapp.com/fonts vous disposez d’un service qui vous permet de choisir les polices que vous souhaitez utiliser, puis il fournit les fichiers et CSS nécessaires pour le faire.

Documentation Yeswiki : https://yeswiki.net/?ChangerPolices


Hiérarchisation
Pour une meilleure lisibilité de votre site, n'utilisez qu'une ou deux typographies maximum.
Lors du choix de votre typographie, vérifiez que celle-ci a différentes graisses (light, meduim, bold,...) et quelle est utilisable en glyphes (accents, ponctuations).
Pour bien hiérarchiser l'information et ne pas perdre vos utilisateurs, utilisez toujours la même typo pour les titres, sous-titres et textes. Définissez des styles et tenez-vous en sur tout votre site.



Ressources

Illustrez vos pages

Upload file artist.png Quelques ressources pour trouvez des illustrations :
  • Font Awesome est une bibliothèque d'icone intégrée à la version Doryphore, on les retrouve dans les boutons mais on peut aussi les utiliser dans le texte en copiant le code HTML
  • undraw : des illustrations entièrement libres de droit avec la possibilité de les décliner selon votre couleur principale
  • nounproject beaucoup d'icones disponibles avec la possibilité de choisir la couleur, et la couleur de fond. (nécessite de créer un compte)
  • Freepik grosse banque d'images avec des images gratuites (mais nécessite une attibution) et des images payantes
  • Creative commons search

  • Unspalsh Banque d'image entièrement gratuite avec attribution
Photos de haute qualité, vous devrez les optimiser pour les intégrer à votre site.


la communauté Yeswiki

La petite histoire du thème graphique Margot

  • un thème co-construit pendant un sprint
  • Margot Hincker est une graphiste qui a été invitée au sprint de Vedène en 2019. Les utilisateurs lui ont présenté les usages principaux puis avec son oeil extérieur elle a proposé des maquettes pour un "wiki de base", c'est à dire un wiki vide tel qu'il est lors d'une intallation neuve, puis pour les principaux templates bazar : agenda, accordeon, et les présentations de facettes.
  • Son intervention a été co-financée par la communauté Yeswiki d'un commun accord. C'était juste avant la création de l'association Yeswiki.
  • l'intégration du thème a été entamée pendant le sprint puis approfondie par Sebastian Castro (contributeur de la communauté découvrez son portrait en vidéo) au fur et à mesure des développement Doryphore pendant l'année 2020.

Modifier le look du bandeau

Sur chaque page de votre wiki se trouve un bandeau avec parfois une image, parfois juste un aplat coloré et le plus souvent le titre de votre site web.

Tout ceci est évidemment modifiable !
TOUTEFOIS, le bandeau est une page spéciale de votre wiki. Découvrons-le.

Pour modifier ce bandeau, il suffit de double-cliquer sur lui.

  • Bien que cela semble logique, on n'ajoute PAS une image dans le bandeau via le "classique" insérer/joindre un fichier mais en ajoutant file="nom.jpeg" (voir la syntaxe ci-dessous). En effet le bandeau a une forme et une fonction spéciale dans le wiki ce qui oblige a utiliser une syntaxe particulière (voir ci-dessous)

{{section file="bandeau.jpeg" height="250" bgcolor="var(--neutral-color);" class="cover white text-right"}}
======Parcours d'apprentissage Yeswiki======


{{end elem="section"}}
""<!-------------------------------------------------------------------------------------------------------
INFO CACHÉE pour vous aider
Pour modifier l'image du bandeau, remplacez file="bandeau.jpg" par file="bandeau1.jpg" sauver, puis charger la nouvelle image
cette image devra avoir comme taille 1920 X 300, 90 dpi de résolution)

Texte noir : enlever le white dans class="white ..."
Texte centré ou à gauche : remplacer text-right par text-center ou text-left
Aplat d'une autre couleur : supprimer file="bandeau.jpeg" 
et remplacer dans bgcolor="var(--secondary-color-1)" (--secondary-color-1) par un code couleur.
=> mauve : #990066 / vert : #99cc33 / rouge : #cc3333 / orange : #ff9900 / bleu : #006699 Voir les codes hexa des couleurs : http://fr.wikipedia.org/wiki/Liste_de_couleurs 
 ----------------------------------------------------------------------------------------------------->""

Vous pouvez jouer sur la hauteur de ce bandeau de 2 façons :
  • soit en modifiant height="250" (250 étant la hauteur en pixels) par height="200" ou ...
  • soit en supprimant le height="250" et en jouant avec des "à la ligne" entre le {{section..}} et le {{end elem="section"}} (plus il y a de à la ligne, plus le bandeau est "haut")

Modifier le look du pied de page

Le pied de page de votre wiki est aussi une page spéciale. Elle apparaît sous chaque page car elle fait partie du squelette.
Vous pouvez aussi la modifier selon vos besoins.
En général on y retrouve :
  • les coordonnées
  • un formulaire de contact
  • les logos
  • les sponsors
  • les conditions d'usages...
  • ...

Pour la modifier, ici aussi il faudra double cliquer sur ce pied de page (nommé PageFooter)

Si vous souhaitez y intégrer un formulaire de contact, placez ce bout de code dans la page
{{contact mail="votremail"}}

Passer en mode édition / sauver

Un wiki est organisé autour de pages de contenus et de zones de menus de navigation (horizontal et/ou vertical...).
Il y a trois manières pour éditer et modifier une page. Les trois ayant le même résultat, utilisez celle qui vous convient.

Vous savez que vous êtes en mode édition quand la barre d'édition suivante apparaît
image BarreEdition.png (7.4kB)
Lien vers: DocumentationEdition

Double-clic

image ImpEcran.png (76.1kB)
Le double clic est une spécificité de Yeswiki : pour modifier le contenu d'une page il vous suffit de double-cliquer sur le contenu à modifier. Vous atteignez ainsi le mode édition de la page.

Le double-clic ne fonctionne pas ? Cette page a été protégée en écriture.

"Éditer la page"

image EditerPage.png (7.0kB)
En bas d'une page wiki, vous trouvez un lien "Éditer la page" avec une icône crayon. Ce lien vous mène lui aussi au mode édition de la page.

Le lien "éditer la page" n'existe pas ? Cette page a été protégée en écriture.

Ajouter "/edit" à l'url

image ImgUrl1.png (2.2kB)
Dans la barre du navigateur se trouve l'adresse URL de la page sur laquelle vous vous trouver. Si vous ajouter "/edit" à la fin de celle-ci (puis en validant avec la touche [ENTREE]) vous atteignez le mode édition.

Le mode édition n'apparaît pas après l'ajout de "/edit" ? Cette page a été protégée en écriture. .

"/edit" est ce qu'on appelle un handler.
Découvrir d'autres handlers par ici

Une fois vos modifications effectuées, vous enregistrez en cliquant sur le bouton "Sauver" en bas de page.
image sauverbis.png (2.9kB)

Permettre la saisie dans un formulaire

Pour ce faire, il faut sur la page qui doit afficher le formulaire, utiliser la syntaxe suivante :

Syntaxe minimale : {{bazar voirmenu="0" vue="saisir" id=" "}}

Cette syntaxe peut-être générée automatiquement via le bouton composant "afficher un formulaire de création de fiches"

Dans les paramètres avancés, vous pouvez activer une adresse de redirection : une page web (url complète) sur laquelle arrivera la personne lorsqu'elle aura valider sa fiche (très pratique pour renvoyer une page qui dit merci ou qui donne des infos commpémentaires)

Prérequis informatiques

Cette page fait le point sur des prérequis basiques mais néanmoins nécessaires ;-)

Important Tout ça est très clair pour toi, file de suite à la page suivante

C'est quoi une adresse url ?

Les adresses web sont l'une des trois inventions à la base du World Wide Web, et selon ses inventeurs, la plus fondamentale. Le grand public les connaît sous la forme de libellés d'une dizaine de caractères, commençant souvent par « www », et qui identifient une page web par exemple :
www.example.com

L'adresse techniquement correcte doit en fait commencer par un nom de protocole. Pour cet exemple, cela donne :
http://www.example.com

Barre d'adresse

Lorsqu'on navigue sur le Web, le navigateur web affiche dans la barre d'adresse, l'adresse de la ressource consultée. Si l'on veut consulter un document dont on connaît l'adresse web, on peut directement la taper dans cette barre. Source Wikipedia
Ce site possède l'url suivante qui apparaît dans la barre d'adresse. Cherche-le ?
image Capture_decran_20151119_a_140013.png (31.2kB)



Quand on te parlera de taper l'adresse url dans la barre d'adresse... MAINTENANT TU SAIS QUOI FAIRE ;-)

Sais-tu copier coller ?

Le copier-coller est une compétence essentielle pour tout bon utilisateur.
En effet, l'utilisateur passe son temps à copier des bouts de textes (de codes) qu'il trouve bien pour les coller sur sa page.
  • Pour copier, on sélectionne la partie à copier avec la souris puis on fait clic droit et on choisit copier
  • Pour coller, on place son curseur à l'endroit où l'on veut insérer ce qu'on a copié, ensuite on clic droit et on choisit coller

Ouvrir un lien dans un nouvel onglet

Quand on parcourt le web, il est utile de pouvoir ouvrir un lien (une URL) dans un nouvel onglet sinon le lien s'ouvre et écrase le site qu'on était en train de regarder.
Pour ouvrir un lien web dans un nouvel onglet, il faut faire un clic DROIT sur le lien et choisir "Ouvrir dans un nouvel onglet"
A tester de suite : https://fr.wikipedia.org/wiki/Clic_de_souris

Rendre visible les données récoltées via un formulaire

Il existe de nombreux rendus pour les données que vous avez récoltés avec votre formulaire.

Le plus simple pour afficher celles-ci sur la page adéquate sera :
  • de passer en mode édition
  • de cliquer sur composant / de choisir "afficher les données d'un formulaire"
  • de répondre aux questions posées

Revenir en arrière en cas de pépin

Un wiki, comme c'est très "ouvert", c'est chouette de pouvoir revenir sur la version précédente d'une page au cas où il y a eu erreur




Le bouton "Modifiée le..." est disponible en bas de page.
Si vous ne voyez pas ce bouton, c'est que les accès à la page ont été restreints.

Yeswiki conserve les versions antérieures pendant environ 365 jours.
Vous pouvez aussi comparer deux versions pour en connaître les différences et décider si oui on non vous souhaitez la réactiver.

Se connecter à son wiki

On peut très bien utiliser son wiki sans compte mais rapidement quelques limites surviennent, notamment en terme de gestion de droits, de protection, de création de formulaires...

Création d'un compte

  1. aller sur la page spéciale ParametresUtilisateur. Elle est généralement accessible via la "roue crantée" / "se connecter"
  2. cliquez sur le bouton s'inscrire en bas (assez discret)
  3. choisir un "nom d'utilisateur
  4. choisir un mot de passe et donner un mail
  5. cliquer sur "Nouveau compte"

S'identifer sur yeswiki

  1. aller sur la page spéciale ParametresUtilisateur, Elle est généralement accessible via la "roue crantée" / "se connecter"
  2. remplir le formulaire avec son nom YesWiki et son mot de passe
  3. cliquer sur "connexion"

Yeswiki : La roue crantée

Dans yeswiki, la roue crantée tient un rôle particulier.
En effet, elle offre des accès à plusieurs pages de gestion. En général on y trouve :
  • une page pour se connecter (voir plus loin)
  • une page d'aide (avec l'aide officielle de Yeswiki)
  • une page gestion du site offrant des outils de gestion du wiki (gestion des utilisateurs, des droits d'accès, du look, de mise à jour...) en général uniquement accessible aux administrateurs du wiki
  • un tableau de bord offrant une vue synthétique des dernières modifications effectuées sur le wiki
  • une page base de données reprenant le module de création de formulaires (voir plus loin) permettant de créer des cartes, annuaires, agenda... sur le wiki.

Le contenu de cette roue crantée est une page du squelette de votre wiki (vu plus haut) nommée PageRapideHaut. Elle est donc entièrement modifiable et adaptable à votre guise !

Yeswiki : une documentation

Dans Yeswiki, vous n'êtes pas seul.e.s ;-)

Il existe de la documentation (textes et vidéos) dans laquelle vous pouvez plonger.
Elle est disponible sur le site https://yeswiki.net/?DocumentatioN mais est aussi intégrée dans votre wiki au sein de la page Aide

Si vous ne trouvez pas votre réponse dans la documentation, un forum vous permet de faire appel à la communauté. Il est en général assez réactif. https://yeswiki.net/?ForumEntraide

Enfin, un pense-bête est intégré sur chaque page. Il est accessible via le ? qui apparaît lorsque vous passez en mode édition.
Ce pense-bête peut être intégralement adapté à vos besoins. Pour cefaire, rendez-vous dans la roue crantée / gestion du site / Éditer le mémo de formatage (bouton "?" dans la barre d'édition )

Yeswiki : un outil convivial

YesWiki est né de vos envies, de vos besoins, de vos idées, vos critiques et nous espérons qu'il grandira avec votre soutien.
Il est porté par une bande d'amis issus notamment de l'éducation populaire, et de l'éducation à l'environnement en France et en Belgique. Il a été principalement conçu pour aider les collectifs à "faire ensemble".

Wiki Wiki signifie rapide, en Hawaïen.
  • Tout le monde peut modifier la page.
  • En contre partie d'une grande facilité de modification, on gère aussi une capacité à revenir en arrière à n'importe quel moment : on garde l'historique des modifications.
> Par ces deux principes, les Wikis sont des dispositifs permettant la modification de pages Web de façon simple, rapide et interactive.

YesWiki fait partie de la famille des Wikis. Il a la particularité d'être très facile à installer, en français.
ça sert à faire facilement un espace internet potentiellement collaboratif
  • ça sert à avoir la main sur son site dont le contenu est modifiable d'un simple double-clic
  • ça sert à questionner la question du pouvoir
  • ça sert à monter des projets à plusieurs (et c'est peut-être mieux que de le faire avec les outils de google)
  • et ça sert à montrer que les projets à plusieurs sont réalisables et efficaces
  • ça sert à démystifier internet
  • ça sert à faire des bases de données encore mieux que Google formulaire
  • ça sert à repérer les personnes qui souhaitent vraiment coopérer, (les autres disent que n'importe qui va changer leur nom)
  • ça sert à repérer les informaticiens qui voient dans la coopération des failles de sécurité
  • ça sert à enlever le mot de passe pour pouvoir agir
  • ...
Le développement de Yeswiki vise à respecter les critères de l'outil convivial (notamment décrit par Ivan Illich) :
  • augmenter l'efficacité des collectifs, des gens qui veulent faire ensemble
  • augmenter l'autonomie des collectifs, des personnes en veillant à ne pas enfreindre "la capacité à", "le pouvoir de"
    • en mettant à disposition une documentation écrite par des gens comme vous ;-)
    • en rendant son code source ouvert et modifiable selon les besoins de chacun => https://github.com/YesWiki/yeswiki
  • donner envie d'être utiliser dans d'autres contextes, d'autres collectifs

Les spécificités de YesWiki

YesWiki a été conçu pour rester simple.
Il a été cependant pensé pour que des fonctionnalités cachées, installées par défaut, puissent être activées au fur et à mesure de l'émergence des besoins du groupe.
Pour cela on pourra facilement dans YesWiki
  • modifier une page par simple double-clic
  • modifier les menus
  • gérer des ergonomies différentes au sein d'un même wiki
  • changer l'apparence des pages (colonage, style graphique...)
  • élaborer une base de données coopérative puissante
  • avoir des rendus variés de cette base de donnée, sous forme
    • d'agenda
    • de carte
    • de listes
    • d'annuaire, trombinoscope
    • album photos
    • de flux d'information...

Yeswiki : un squelette

Un site Yeswiki est en fait composé d'un "squelette" => assemblage de plusieurs pages.
  • en haut à gauche : une page nommée PageTitre et qui renvoie à l'accueil (on peut y indiquer ce qu'on veut)
  • en haut à droite : une roue crantée dont le contenu peut-être modifié. La page qui reprend ce contenu s'appelle PageRapideHaut
  • entre les 2, un menu, lui aussi modifiable. La page s'appelle PageMenuHaut
  • Sous ce menu, une image avec un titre : PageHeader
  • en bas du wiki : le pied de page (ou de wiki) : PageFooter

  • Le principe veut que l'on double clique sur la zone que l'on souhaite modifier

image squelette_doryphore.png (0.4MB)

Filter :  Gatien Bataille  Mélanie Michel  Sylvain Boyer