Aller au contenu principal
  • Accueil
  • Parcours de formation
    • Les bases pour constuire son wiki en 6 modules
    • Piocher dans les 17 modules
  • Webinaires de démo
  • L'équipe
  • Inscription



Rechercher
  • Se connecter

    Se connecter

    Mot de passe perdu ?

    S'inscrire
  • Aide
  • Espace formateurices
  • Session 2021
    • Parcours 1 Découvrir
    • Parcours 2 Approfondir
    • Parcours 3 Se perfectionner
    • TOUS LES CONTENUS
    • Agnès
    • Bernard
    • Christine DH
    • Claude
    • Equipe Concertina
    • Fabrice
    • Jeanne
    • Laure
    • Magalie
    • Marie D.
    • Marie S.
    • Mélanie
    • Sarah
    • Stéphanie
  • Gestion du site
  • Tableau de bord
  • Base de données
logogarecentraleavecroute.jpg

Construire la plateforme d'un projet collectif

avec YesWiki

Formation professionnelle à distance

  • Formulaires
  • Rechercher
  • Saisir
  • Listes
  • Importer
  • Exporter

Fiches-ressources sur Bazar (approfondissement)

Auteur·ice·s Louise Didier Sylvain Boyer
Durée estimée de l'activité en minutes 60
Licence CC-by-SA
Contenu
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.
  • Présentation dans le constructeur graphique {{end elem="col"}} {{col size="5"}} Ca fait quoi ? {{end elem="col"}} {{col size="4"}} Où chercher dans [[https://yeswiki.net/?ChampsPossibles 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 !
Nous explorerons pendant le webinaire comment faire pareil ;-)
  • Formulaire sur plusieurs onglets : https://tourainebio.org/?PageAjoutProducteur
  • Questions conditionnelles : https://tourainebio.org/?PageAjoutProducteur#menu4 (répondez oui à certaines questions de ce 4e onglet pour voir apparaitre de nouvelles questions)
    • Ou ici si vous cochez "autre" : https://alterenergies.org/?PageFormulaire

Pour vous permettre de réagir, s'identifier
Gratitude
1
J'aime
1
J'ai appris quelque chose
1
J'ai pas compris
0
Je ne suis pas d'accord
0
Ca me perturbe
0
Voir la fiche

Webinaire du mardi 23 février

Auteur·ice·s Laurent Marseault Louise Didier
Durée estimée de l'activité en minutes 120
Licence CC-by-SA
Contenu De 10h à 12h
Le lien pour la visio : https://zoom.us/j/8616584484
Le lien pour la prise de notes : https://pad.coop.tools/p/webinaire31

Intervenant.e.s : Laurent Marseault et Louise Didier

Vous avez aimé Anacoluthe, vous avez kiffé Bachibouzouk, ne parlons pas de Cercopithèque...
Et maintenant, voici Doryphore

Objectif : pas beaucoup de nouvelles fonctionnalitées mais tout sur l'ergonomique + plus joli globalement, plus centré sur l'usager.e, plus convivial (au sens d'Ivan Illich).

Invisible pour l'usager.e : Refactorisation du coeur > ça devient plus facile pour les développeur.euse.s de rajouter des fonctionnalités





Parmi les nouveautés :

Le thème Margot

du nom de la graphiste qui l'a travaillé
des éléments de css simplifiés avec des couleurs primaires, secondaires, etc / une PageCss dans laquelle les gens vont pouvoir sélectionner les couleurs principales (parmi des pré-proposées ou en code hexa), secondaires, tertiaires, etc + la police.
  • https://ferme.yeswiki.net/WikiDeBase/?LookWiki
  • Cela permet d'imaginer une PagesCss pré-configurée pour disposer de compositions de couleurs qui fonctionnent. https://ferme.yeswiki.net/WikiDeBase/?PageCSS



> nous verrons ça en détail dans le module 3.3 (webinaire du 9 mars avec Mélanie Michel)

La documentation autoportée

du texte "caché" explicatif dans les pages spéciales (exemple : dans le footer ou le header on a des explications de leur fonctionnement - comment mettre un logo, des bandeaux, etc...)
  • https://ferme.yeswiki.net/WikiDeBase/?PageHeader/edit



L'aide-mémoire

Le point d'interrogation (en haut à droite quand on est en mode édition) a été mis à jour et repensé pour que toute les questions que l'on se pose quand on commence yeswiki y trouvent des réponses, et nous renvoie vers la documentation ou démo plus complète des différentes actions.
  • https://ferme.yeswiki.net/WikiDeBase/?ReglesDeFormatage


Composants et le petit crayon


Merci à Sebastian Castro !
Des interfaces graphiques nous aident à construire le code, et même avoir un apperçu en direct de ce que je construis.
Quand je suis en mode édition, j'ai un nouveau bouton "Composants".
Pour modifier le code, j'y place mon curseur et j'ai un petit crayon à gauche pour revenir à l'interface graphique.
Souvent ces fonctionnalités existaient déjà dans Cercopithèque mais il fallait trouver le code dans la documentation et la personnaliser "à la main".
Des débutant.e.s vont plus loin dans l'esthétique et l'ergonomie qu'avant.

  • Boutons



  • Afficher les données d'un formulaire > bazar. Il me propose mes formulaires pour voir lequel je veux afficher et il me proposer différents modes d'affichage, et enfin je peux personnaliser cet affichage.

  • Section


  • Syndication / Flux RSS
usage de veille
Exemples
  • les actus du Monde qui s'affichent sur mon wiki
  • appel à projet de telles et telles institutions
  • riposte creative Bretagne > gare d'ailguillage Climat : https://ripostecreativebretagne.xyz/?GareClimat
format flux RSS encore d'actualité ? d'autres formats sont apparus mais RSS était novice beaucoup de sites en génèrent. tendance à imaginer qu'on est le centre du monde : "pas la peine de faire des flux puisqu'il vaut mieux que les gens viennent chez moi". fondement du web questionné.
ça peut aider au lien entre notre wiki et notre vitrine wordpress ?
oui mais on peut aussi utiliser json (plus moderne).
embed de widgets (codes iframe) plus faciles techniquement mais le contenu n'est pas duppliqué (pas trouvable dans le moteur de recherche), il est juste affiché.



Dans les composants, vous trouverez aussi :
  • Sommaire > ici dans la documentation de YesWiki (action tocjs)
  • Etiquette (action label)
  • Encadré (action panel)
  • Onglets > ici dans la documentation de YesWiki (action nav)
  • Vidéo intégrée > ici dans la documentation de YesWiki (action video)

Lien vers une autre vidéo de démonstration des composants

Le bazar

générateur de base de données

wysiwyg : « what you see is what you get », signifiant littéralement en français « ce que vous voyez est ce que vous obtenez » = interface graphique. Avant on travaillait le formulaire avec le code avec des ***, maintenant on est aidé.e.s par le constructeur graphique.

En préparation : des formulaires et des listes à télécharger pour ne pas partir de zéro.
> une idée croissante : se piquer des idées entre wikis

Sémantique : certains champs respectent des standards
> nous verrons ça en détail dans le module 3.2 (webinaire du 2 mars, avec Sylvain Boyer)

Un onglet "exemple"
  • qui rerend les fonctionnalités bazar. Des pages par defaut e démo bazar exemple présentes dans le menu du haut lors de l'installation d'un wiki (un agenda, un annuaire, un blog, ...)

Un sous menu de tout ce qu'il est possible de faire en terme de mise en page et de sous-menu



De nouvelles bibliothèques

Elles aident à l'ergonomie de manière simple

Mermaid
une synthaxe qui permet de faire des représentations graphiques de contenus (camemberts, timeline, etc...) avec un éditeur wysiwyg en ligne qui permet de générer le code à coller dans son wiki
  • https://yeswiki.net/?MerMaid

MArkdown
permet à YesWiki d'interpréter aussi des pages écrites en langage markdown
  • https://yeswiki.net/?DocMarkdown

Izmir
permet d'insérer des images de manière beaucoup plus classe (en ajoutant des choses à l'action attach), à partir d'un site d'exemples à copier coller. accessible dans les paramètres avancés quand j'édite le code d'une image jointe
  • https://yeswiki.net/?IzMir

Animation
permet de faire des effets graphiques sur des images, des sections
  • https://yeswiki.net/?AniMation

effets bling-bling : "ça commence à ressembler à un vrai site internet" !



Gestion admin du wiki :


Roue crantée au haut à droite > gestion du site
  • Repensé totalement en mode ergonomique

Permet le traitement de masse des droits / des utilisateurs
  • texte plus explicite que le code d'avant (ex : on lit "Tout le monde" plutôt que ) Nouvelle gestion des utilisateurs et des groupes : possibilité de supprimer des utilisateurs / des groupes. Avant on devait gérer sur phpmyadmin (base ""MySQL""). > nous verrons ça en détail dans le module 3.4 (webinaire du 16 mars, avec Romain Lalande ou Gatien Bataille) Mise à jour : plus simple sans faire de FTP
  • Possibilité de gérer le wakka config depuis l'admin pour sélectionner le thème de base, etc... -> l'idée est qu'il n'y ait plus a avoir accès au ftp pour agir sur le fichier de config ""<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://video.coop.tools/videos/embed/d651a38a-41d2-4cc7-beff-c712fc176961" frameborder="0" allowfullscreen></iframe>"" ===De nouvelles extensions : === Extension LMS
  • Publication = générateur d'Ebook (pdf)
  • Webhook LDAP / SSO Un nouveau moteur de recherche ====Et autres petits trucs==== affichage des pdf sections avec droits (chapitrage dans une page, avec personnalisation des droits d'accès) activity pub rentre les outils interopérables = contenus qui se baladent de logiciel en logiciel exemple : publication dans Mastodon (équivalent libre de Twitter) qui parle de mon wiki > mise à jour aux 2 endroits web sémantique*
formulaires bazar interopérables entre eux, adéquation de nommage entre 2 logiciels différents > flux de données entre des logiciels
Exemple entre wiki et gogocarto



Qu'est-ce que ça vous évoque ? Quelles réactions ?


Découverte de YesWiki en 2011 ou 2012 : ça change !
Ca facilite, ça aide à la vulgarisation de l'outil
pour l'instant la documentation de doryphore n'est pas faite. elle sera de 2 natures :
  • bouts de code pour les utilisateur.trice.s avancé.e.s
  • formulations d'usages pour les béotien.ne.s

Hyper-enthousiaste ! Extension LMS rassurante pour passer à Qualiopi.
Et quand on crée un wiki dans une ferme ?
  • yeswiki.net en doryphore : https://ferme.yeswiki.net/?CreerSonWiki
  • colibris en cercopithèque



Bravo à l'équipe ! Surtout pour tout ce qui touche à Bazar.
Interet aussi pour la documentation auto-portée
Remarque générale : j'ai privilégié les wikis de travail (plutot que les wikis vitrine) > créer des pages spéciales pour écrire à plusieurs sans voir de code ?
exemple du wiki de l'université de la vigne et du vin : http://universitevignevin.fr/?PagePrincipale . page d'accueil incompréhensible en mode édition parce que la mise en page est avancée, mais ce n'est qu'un include de plein de pages plus simples (voir la documentation de l'action Include), donc des béotien.ne.s peuvent modifier des petits bouts sans se confronter à la complexité
> concevoir son wiki en pensant qui va devoir modifier quoi et à quel stade d'appropriation en sont ces gens
en face de chaque code compliqué il y a un petit crayon pour être guidé.e
3 manières d'amener à contribuer : passer la page wiki en mode édition, mais aussi formulaire bazar, et intégration d'autres outils (iframe)
exemple : https://ardear-occitanie.xyz/?PagePrincipale page d'accueil sexy et bling-bling que peu auront à modifier

hésitation dans mon groupe entre YesWiki et le drive (avec son google doc modifiable en direct). YesWiki freine avec le fichier à télécharger et recharger.
Est-ce que Doryphore apporte un argument dans ce domaine ?
aucun changement MAIS
mon wiki peut renvoyer vers un GoogleDoc
le wiki est une interface, un sommaire, une gare centrale
on peut aussi utiliser bazar pour rencenser les documents, et profiter des nombreux formats possibles (lien google doc ou lien pad ou pdg à télécharger ...)

Ca facilite l'autonomie : comme ça doit évoluer avec le projet, donc on a la main pour penser l'accès aux infos
C'est notre ligne de conduite depuis le début de YesWiki, mais on va encore plus loin : ne pas créer de dépendances envers les technicien.ne.s



Teasing Ectoplasme : encore plus faciliter la duplication ou l'inspiration d'un wiki
repérer un projet/wiki structuré comme je le souhaite pour le mien
migrer de la forme mais aussi du fond (exemple contenus d'Interpole : https://interpole.xyz/?PagePrincipale)
on fera quand même attention au projet/wiki frankenstein qui nous empecherait d'interroger notre fonctionnement



coding party 2 fois par an
une association YesWiki pour recevoir les dons (par exemple 10% des recettes de cete formation)et payer ces coding party et les développeur.euse.s
bientôt une coding party avec des paysans


Pour vous permettre de réagir, s'identifier
Gratitude
1
J'aime
0
J'ai appris quelque chose
0
J'ai pas compris
0
Je ne suis pas d'accord
0
Ca me perturbe
0
Voir la fiche
CSV JSON Widget


Sauf mention contraire, les contenus de ce site sont en licence CC-by-SA, autrices : Louise DIDIER et Magalie DREANO

Contact : formationyeswiki@quincaillere.org - 06 59 99 61 78
Page LinkedIn des formations à YesWiki