Fiches-ressources sur Bazar (approfondissement)
Index
Fiches-ressources sur Bazar (approfondissement)
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.
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 :
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.
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 :
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.
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]]*
Une question à laquelle on répond en tapant un texte long (plusieurs lignes)
"Texte long"
(textelong)
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
Exemple : champ hidden bf_pays=france ce qui permet que toutes les adresses saisies soient cherchées en france
"Champ caché"
(champs_cache)
Une question à laquelle on répond en sélectionnant une réponse parmi plusieurs pré-écrites
"Liste déroulante"
(liste)
Une question à laquelle on répond en cochant une ou plusieurs réponses parmi plusieurs pré-écrites
"Checkbox / cases à cocher"
(checkbox)
Une question à laquelle on répond en cochant une seule réponse parmi plusieurs pré-écrites et visibles
"Radio"
(radio)
Une question à laquelle on répond en saisissant une date (voire une heure)
"Date et heure"
(listedatedeb)
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)
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)
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)
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)
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)
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.
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)
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
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)
Quelques exemples d'utilisation avancée de Bazar
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
Webinaire du mardi 23 février
Index
Webinaire du mardi 23 février
De 10h à 12hLe 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...)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.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
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
ç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éeswysiwyg : « 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 simpleMermaid
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
MArkdown
permet à YesWiki d'interpréter aussi des pages écrites en langage markdown
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
Animation
permet de faire des effets graphiques sur des images, des sections
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 '''' ===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*
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