Et si je dois modifier mon formulaire alors que des fiches ont déjà été saisies ?
Index
Et si je dois modifier mon formulaire alors que des fiches ont déjà été saisies ?
Entre ce qu'on a conçu, même à plusieurs, et ce que la vie nous impose parfois, il y a une marge. Donc, il va peut-être vous arriver de devoir modifier un formulaire alors que des fiches ont déjà été saisies pour ce formulaire.
Sans entrer dans les considérations techniques, voici quelques indications.
Si on modifie le nom du formulaire :
cela ne change rien dans le fonctionnement du formulaire ni pour ses fiches.
Si on ajoute un champ :
ce champ sera proposé à la saisie pour toutes les fiches à partir de ce moment là,
ce champ sera vide pour toutes les fiches saisies auparavant, il faudra donc les modifier une par une pour compléter ce nouveau champ.
Si on supprime un champ :
lorsqu'on ouvrira une fiche de ce formulaire, ce champ n'apparaîtra plus.
Si on modifie l'identifiant unique d'un champ :
ce champ est « cassé » pour toutes les fiches. Ne faîtes pas cela !
Si on modifie le libellé d'un champ :
ce champ sera, à partir de ce moment là, affiché avec le nouveau libellé.
Si on rend un champ obligatoire :
ce champ sera obligatoire à partir de ce moment là,
si vous essayez de modifier une fiche précédemment saisie dans laquelle ce champ serait resté vide, vous ne pourrez valider la fiche qu'après avoir complété ce champ.
Si on supprime le caractère obligatoire d'un champ :
ce champ ne sera plus obligatoire à partir de ce moment là,
Si on modifie le texte d'aide d'un champ :
le nouveau texte d'aide apparaîtra, à partir de ce moment là, pour ce champ.
Vous avez décidé d'utiliser un ou des formulaires pour faciliter la contribution.
Quelques éclaircissements s'imposent sur la notion de formulaire.
Un formulaire va vous permettre deux choses :
faciliter la saisie en offrant un cadre structuré de collecte d'informations,
visualiser tout ou partie des informations saisies sous une forme qui vous semble pertinente (une carte, un trombinoscope, une liste, etc.).
Prenons un exemple
1 – Supposons que je souhaite organiser un goûter et que j'utilise pour ce faire un formulaire dans lequel je demande :
le prénom de chaque personne,
si elle apporte une boisson ou un gâteau (soyons fous !),
une description plus détaillée de ce qu'elle apporte.
2 – Afin de permettre la saisie, je vais mettre à disposition une page sur laquelle je vais afficher le formulaire vide afin que chaque personne puisse y répondre.
Marguerite, Théo, Barnabé et Manon se rendent sur cette page et remplissent le formulaire. Lorsque chacune de ces personnes se rend sur cette page elle remplit sa fiche qui répond à ce formulaire.
3 – Pour que tout le monde puisse voir ce que chacun·e va apporter, je vais également mettre à disposition une page sur laquelle je vais afficher toutes les fiches de réponses au formulaire sous forme de liste (par exemple).
Je verrai sur cette page les fiches de Marguerite, Théo, Barnabé et Manon.
Un peu de vocabulaire
Nous appellerons formulaire le jeu de questions posées. Dans notre exemple, ce sont :
prénom,
le type de ce que la personne apporte,
des précisions sur ce que la personne apporte.
On désignera par fiche une réponse individuelle à un formulaire. Dans notre exemple, il y a quatre fiches qui répondent à ce formulaire.
Les trois phases
Du point de vue de l'utilisateur, seules existent :
la page sur laquelle il ou elle pourra saisir sa fiche,
et la page d'affichage sur laquelle on peut consulter les réponses au formulaire.
Mais pour vous qui allez fabriquer le formulaire, les choses sont légèrement différentes.
Vous allez devoir, avant même de fabriquer les pages de saisie des fiches et d'affichage des réponses, concevoir ce formulaire.
Nous avons donc trois phases :
concevoir le formulaire,
mettre à disposition une page pour la saisie des fiches,
mettre en œuvre une page d'affichage des résultats du formulaire.
Vous
L'utilisateurice
Concevoir
Permettre la saisie
Saisir sa fiche
Afficher les résultats
Consulter les résultats
1 – Concevoir le formulaire
Concevoir le formulaire revient à choisir et agencer les différentes questions que vous allez poser.
Si vous partez de zéro, cela peut être une excellente occasion de mettre en œuvre de la coopération en co-élaborant votre formulaire.
On se place, lors de cette étape, à un niveau générique (le formulaire). On ne sait pas si Marguerite va répondre. En revanche, on sait qu'on veut collecter (et donc demander) le prénom de chacune des personnes qui répond au formulaire.
Cette phase de conception va avoir un impact sur le comportement du formulaire lors de la saisie des différentes fiches, mais également sur ce qu'il est possible de faire en termes d'affichage du formulaire.
Lors de la conception vous travaillerez dans la page Base de données de votre wiki accessible via le menu roue crantée en haut à droite du wiki.
2 – Permettre la saisie des fiches
Pour construire la page de saisie des fiches vous travaillerez dans une page que vous aurez choisie à cet effet.
3 – Afficher les résultats du formulaire
De même pour l'affichage des résultats du formulaire que vous mettrez en œuvre dans une page de votre choix.
Lecture sur les enjeux de la coopération à distance : préjugés et controverses
Index
Lecture sur les enjeux de la coopération à distance : préjugés et controverses
Introduction
La gare centrale, que vous allez découvrir au fil de ces modules, est un choix pour outiller la coopération à distance. Elle fait le pari de profiter des possibilités des outils numériques pour faciliter la convivialité et la coopération. La question du numérique comme facilitateurice de la coopération est riche de controverses, d'a-prioris et d'expériences de vies marquantes, positivement comme négativement. Ces outils sont des pharmakons : à la fois remèdes, poisons et boucs émissaires.
Nous allons donc parcourir certains des à-priori les plus entendus sur ce sujet pour chercher à rentrer dans la complexité de ceux-ci. La réponse juste à la question « faut-il utiliser des outils numériques pour faciliter la convivialité et la coopération dans un collectif ? » n'est ni absolument « oui » ni totalement « non ». Selon nous, la réussite de l'intégration d'outils numériques dépend d'un grand nombre de paramètres que nous allons détailler, et d'une culture mixte « numérique et coopération » que nous allons cultiver ensemble.
Les premiers pas du travail à distance s'articulent souvent autour du duo d'outils : mails + visio.
Ensuite le collectif a deux options :
poursuivre avec ces deux seuls outils et laisser peser sur chaque individu la charge d'organiser son travail avec le groupe. Par exemple, chaque membre va se demander quoi faire des documents mis en pièces jointes des mails reçus : les enregistrer ? Puis le refaire si une nouvelle version arrive ? Selon quelle logique de classement ? Ce qui peut amener charge mentale, lassitude et infobésité.
réfléchir collectivement et de façon approfondie aux outils numériques de coopération. Discuter ensemble des outils utiles revient à prendre du recul sur notre manière de fonctionner : une bonne occasion de parler des règles du jeu et ainsi mieux vivre l'implication.
Si le fameux "mail+visio" a ses limites c'est qu'il mélange plusieurs usages qui devraient être distincts :
créativité : créer des contenus, échanger des idées
décision : trancher clairement entre plusieurs choix
apprentissage : assimiler des contenus déjà existants
communication : échanger des savoirs-contenus et documents
stockage et archivage : retrouver un contenu, une information
convivialité : discuter (parfois de tout et de rien)
Formuler et distinguer ces usages permet d'y voir plus clair. De même, on peut se demander ce que l'on veut faire en synchrone (pas forcément en visio !) et en asynchrone (pas forcément par mail !).
Quand le collectif est au clair sur ses besoins, ses usages et leurs modalités, la collaboration à distance peut être source de plaisir et d'efficacité. Il est possible de construire une suite d'outils aussi simples que le duo "mail+visios" et qui permette à chacun.e de trouver son rythme et sa place juste. La gare centrale que nous allons découvrir tout au long de cette formation en est l'un des blocs majeurs.
On va perdre en convivialité et je préfère manger des croissants avec les gens
La question de la convivialité est au cœur des processus collectifs. Dans le monde associatif, c'est même souvent cette quête de convivialité, associée à la quête d'utilité, qui motive l'action collective.
En 1973, Ivan Illich a popularisé et défini plus finement la convivialité et son interaction avec les outils. Cette convivialité embarque les notions d'autonomie, d'interdépendance et de lien collectif aux outils. C'est une extrapolation politique de la définition de convivialité plus joviale de Brillat-Savarin en 1830. Ce dernier la définissait comme "le plaisir de vivre ensemble, de chercher des équilibres nécessaires à établir une bonne communication, un échange sincèrement amical autour d'une table".
Dans le monde contemporain, le fait qu'un outil numérique devienne un frein à la convivialité est une manifestation concrète de ce qu'Illich appelait la "contreproductivité de l'outil" : à un certain moment du développement industriel d'une société, les institutions et outils mis en place par cette dernière deviennent inefficaces et apportent plus de freins que de facilités à la satisfaction d'un besoin. C'est le cas quand :
l'école uniformise, discrimine et exclut au lieu de former,
la voiture immobilise au lieu de transporter,
la médecine rend malade au lieu de soigner,
l'énergie met en danger au lieu de contribuer au confort.
Le juste usage des outils numériques pour faciliter la convivialité est au cœur des réflexions de multiples collectifs du milieu "libre" et du monde de l'éducation populaire au numérique.
Voilà quelques questions que nous pouvons nous poser, pour vérifier si nos outils ont un effet salutaire sur la convivialité d'un groupe et l'autonomie de ses membres :
Nos outils numériques et nos pratiques à distance permettent-elles de faire à distance ce qui aurait pris du temps en présentiel, in fine au détriment de moments conviviaux ?
Nos outils numériques permettent-ils de cultiver l'interconnaissance et l'autonomie de chacun.e, lorsque la réunion physique est impossible ?
Nos outils numériques rendent-ils possibles l'expression orale ou la participation de celleux plus introverti.e.s pendant les temps en présence ?
Nos outils numériques permettent-ils à des publics concernés par nos actions mais éloignés physiquement de se joindre aux démarches ?
Comme dans beaucoup de sujets complexes, les effets bénéfiques de ces outils n'annulent pas les effets néfastes qu'ils peuvent avoir par ailleurs. Cependant, un groupe qui a conscience à la fois des effets néfastes et des effets bénéfiques des outils numériques sur la convivialité au sein du groupe a davantage de leviers à mobiliser pour aller vers la situation idéale et prévenir les dommages.
La Gare Centrale, pensée comme la porte d'entrée vers l'ensemble des outils d'un collectif, peut servir de "détecteur" de la convivialité de nos outils et usages : néanmoins, si accéder à un outil est difficile, si l'explication de son usage à toustes n'est pas rendue accessible et aisée ou encore si la gare centrale devient difficile à trier à cause du "trop-plein", alors il est temps de se reposer les questions de la contre-productivité de nos outils.
Multiplier les outils c'est trop compliqué et on va perdre nos collègues allergiques au numérique
L'illectronisme et la surcharge informationnelle sont de vrais sujets de société à ne pas prendre à la légère. Les quelques études récentes sur le sujet permettent de sortir des à-priori que nous nous en faisons : non, ce ne sont pas "les vieux qui ne sont pas à l'aise avec internet" ! Il existe de fortes inégalités d'agilité et de culture numérique en fonction des revenus, des environnements socioculturels, des modes de vie...
Les troubles occasionnés par l'excès d'usage de ces outils numériques, comme l'addiction au smartphone et aux réseaux sociaux (la nomophobie) et les troubles du déficit de l'attention peuvent survenir à tous les âges. Ils sont simplement davantage surveillés et donc diagnostiqués chez certains publics (les enfants, les personnes atteintes d'un trouble du spectre autistique, ...).
Alors évidemment, les outils numériques sont parfois envisagés avec méfiance et difficiles à accepter dans un quotidien déjà très "numérisé". Fondamentalement, ce n'est pas le nombre d'outils qui est en cause, mais l'inadéquation entre les usages et les outils et donc le trop plein d'outils non-conviviaux dans nos quotidiens. Quand un usager ne comprend pas pourquoi un outil existe, et qu'il ne permet pas un quotidien plus doux, alors il est perçu comme en trop.
Il est possible d'instaurer quelques rituels collectifs pour dépasser l'idéal de l'engagement naturel et de l'inclusivité inconditionnelle tout en prenant soin de la surcharge mentale et des disparités d'agilité. Même si nos outils numériques sont conviviaux et utilisés consciemment, il est en effet nécessaire, comme pour tout autre outil technique, d'en passer par des phases d'apprentissage, de partage d'expériences et d'adaptation de l'outil à l'usage. Plus ces processus sont anticipés et facilités, plus l'usage des outils numériques sera aisé, et le collectif soigneux à l'égard des personnes moins agiles.
Pour arriver à cela, il peut par exemple être pertinent de :
intégrer les usagers principaux à la démarche d'outillage dès son début : la vérification des usages et des besoins
mettre en place formellement des démarches d'entraide dans l'apprentissage des outils : une bonne excuse aussi pour créer de l'interconnaissance et de l'échange convivial
privilégier des temps synchrones et en présence pour présenter et apprendre un nouvel outil
créer des rituels de discussion à fréquence fixe autour des usages et des outils
Les deux extrêmes du curseur sont (en les poussant vraiment à l'extrême) :
L'accessibilité naturelle : les outils sont tous sélectionnés pour être utilisables sans explication par les personnes moins agiles du groupe.
L'efficacité à court-terme : les outils sont sélectionnés par les plus agiles et seuls celleux qui sont capables de les utiliser peuvent rejoindre la démarche et coopérer.
Notre future gare centrale est un moyen de positionner le curseur au juste milieu, et d'aider à appuyer ces démarches d'inclusivité et de clarification des usages.
Ça va encore renforcer le pouvoir des mêmes personnes !
Bien sûr que c'est aussi une question de pouvoir ! La notion de "pouvoir d'agir" revient sur le devant de la scène des dernières années, et à juste titre. Plus notre société est "outillée", plus le pouvoir glisse vers celleux qui contrôlent et produisent les outils. Dans le monde contemporain, une grande partie du pouvoir de faire est confiée aux géants du web : si google ferme son moteur de recherche et ses mails, plus de "pouvoir de" communiquer, s'informer, produire-partager de la connaissance, etc.
Dans le champ de l'éducation populaire, trois concepts de pouvoir co-existent :
le pouvoir "sur" : capacité de décider, d’exercer une action sur d’autres, en particulier quand cette action se fait au détriment de leur intérêt. Et c’est le plus souvent ainsi qu’est comprise la notion de pouvoir dans le sens commun.
le pouvoir "de" est une forme de pouvoir génératif, il désigne la capacité de promouvoir des changements, de faire. Le pouvoir est compris ici comme une énergie, une compétence.
le pouvoir "avec", c'est la possibilité de faire avec, de construire avec, de s’inscrire dans une démarche collective de prise en main de son avenir et de transformation sociale, le pouvoir se construisant précisément dans cet "avec", dans la relation.
Une démarche d'outillage numérique au sein d'une organisation peut catalyser ces dynamiques, pour accentuer le pouvoir "sur" ou au contraire aller vers davantage de pouvoir "de et avec" :
renforcer les décideurs habituels dans leur "pouvoir sur" leurs collègues, pour mettre en place des outils numériques de reporting, monitoring, surveillance, mesure.
faciliter les échanges et la coopération autonome, et le pouvoir "de" de chacun.e, via des outils numériques de communication de surveillance, des outils facilitateurs de la collaboration autour des travaux quotidiens.
Ces démarches sont généralement incompatibles entre elles, voire antinomiques. Par exemple, mettre des outils de reporting pour améliorer le contrôle et l'efficience mesurée d'un processus va nuire à l'autonomie et à la liberté de réorganisation naturelle du processus par celleux qui le vivent au quotidien.
Une suite d'outils numériques peut être pensée pour donner davantage de pouvoir à ceux qui font au quotidien, voire intégrer ceux "sur" lesquels on agissait pour agir "avec" eux.
Ça va nous coûter super cher ou bien Google va nous piquer nos données
De nos jours, ce sont rarement les organisations "métier" en elles-mêmes qui développent et entretiennent les outils numériques nécessaires à leurs opérations. Dans la grande majorité des cas, elles louent-achètent les licences nécessaires pour utiliser des logiciels développés par des organisations spécialisées dans l'informatique. Alors, de nombreuses questions émergent : le coût de ces outils, la propriété et la sûreté des données qui y sont liées, la nature du code et du prestataire, ...
Les différentes natures de code et les modèles économiques ?
Le code d'un logiciel est une suite d'instructions que les machines exécutent pour faire "tourner" un programme. Ce code est écrit par les équipes de développement des organisations "éditeurs de logiciel".
Un critère qui permet de différencier un logiciel-programme d'un autre est la licence sous laquelle il est distribué : qui a le droit de le lire, de le décoder, de le dupliquer et de le modifier. Dès les débuts du codage informatique sont nées les deux grandes catégories de logiciels :
Les logiciels open-source. L'éditeur d'un logiciel sous licence de type Open-source met à disposition de chacun.e le code informatique d'origine du programme. Donc d'autres organisations peuvent y apporter des améliorations, ou bien en auditer la qualité et la sécurité. C'est comme ça que ce code évolue, par les réactions qu'il inspire.
Les logiciels propriétaires. L'éditeur d'un logiciel sous licence propriétaire veut empêcher cette modification-copie-inspiration en protégeant juridiquement son code d'une licence de propriété intellectuelle classique, et faire son possible pour ne pas diffuser le code d'origine. Ce code n'évolue qu'à partir des décisions prises par les équipes de l'organisation "propriétaire" du code.
Il faut distinguer la nature du code et le modèle économique : on ne peut pas dire "open-source=gratuit" et "propriétaire=payant". De nombreux modèles économiques hybrides ont vu le jour au fil des années et sont maintenant courants : publicité, revente de données, freemium, communautaire-entreprise, abonnement, aide à l'installation et à la mise en oeuvre, SAAS, ...
Le succès d'Internet et les systèmes d'exploitation modernes (macOS, Windows, Linux) repose sur des échanges très faciles entre des machines matériellement très différentes. Cela s'appuie sur des langages et des codes "universels" communs à tous, et qui sont massivement issus des communautés open-source. Le web et les écosystèmes se sont ensuite privatisés et centralisés, pour faire des économies d'échelle et générer davantage d'argent.
Par exemple, pour consulter un mail, je vais :
utiliser windows, logiciel propriétaire et qui pour autant fait appel à beaucoup de logiciels et bouts de fonctionnalités open-source
passer par internet dont les protocoles de communication sont eux aussi sous licence ouverte
l'ouvrir avec un logiciel open-source comme thunderbird, ou aller sur Gmail, qui repose lui aussi à la fois sur du code propriétaire de google et de l'open-source.
Les enjeux liés aux données
Une partie des enjeux de coûts et de risques des données sont donc liés à cette complexité de l'écosystème numérique. Il existe donc trois risques principaux pour une organisation et ses outils numériques :
Le risque individuel du vol/mésusage de données privées : une autre organisation accède aux données et s'en sert de façon abusive soit par l'accès physique ou numérique aux données contenues dans le serveur, soit en "piratant" un utilisateur normal du logiciel.
Le risque collectif de la panne et/ou du vol massif de données : une faille logicielle permet à une organisation mal-intentionnée de récupérer une quantité massive de données et abuse de cette menace (diffuser, supprimer) pour en tirer avantage.
Le risque sociétal : des organisations massives publiques ou privées collectent des métadonnées concernant nos usages numériques et nos habitudes pros et persos. Cela provoque des mutations économiques et politiques menaçant nos libertés individuelles et notre épanouissement collectif. Nous y reviendrons plus bas.
Face à ces risques, rien ne peut garantir que ces événements n'arriveront jamais, nous avons seulement des leviers pour minimiser ces risques.
Par exemple, pour réduire le risque massif de vol de données, nous pouvons rapatrier les données contenues dans un serveur "cloud" dans une machine physiquement au bureau, mais peut-être allons nous augmenter le risque de panne ou de perte accidentelle des données.
Par rapport aux données personnelles, et à leur mésusage, deux questions interconnectées se posent :
Comment estimez-vous la valeur intellectuelle de vos productions ? Si vous êtes prêts à les partager à échelle humaine et sous licence libre, alors pensez à les protéger par une licence avant qu'elles ne soient récupérées et utilisées de façon marchande par une autre organisation moins scrupuleuse
Comment évaluez-vous à l'inverse l'importance de chaque donnée ? Qu'est-ce qui mérite vraiment d'être protégé ? Les données concernant les individus = certainement ! Les données de post-it ou de compte-rendus d'une réunion sans enjeu politique = peut-être moins ?
La gare centrale joue un rôle important dans la maîtrise de ces risques, elle facilite l'accès aux outils et données dont il a besoin pour agir. Alors la gare centrale est en même temps un outil qui peut rendre accessible à tord des données privées, et en même temps le meilleur moyen de vérifier et maîtriser les chemins d'accès à ces données.
Les systèmes numériques sont bien moins dématérialisés qu'il n'y parait. Derrière l'affichage d'une page sur mon écran, il y a en effet du code à "interpréter" par une machine alimentée en électricité, des infrastructures réseau pour faire circuler l'information, et des personnes pour prendre soin de tout ça. Quelles que soient la licence du logiciel et l’éthique de l'organisation qui l'administre, ce n'est pas possible de faire "sans" tout ce matériel. Pour autant, des ajustements peuvent se faire à différents niveaux de cette chaîne, pour aller vers davantage de sobriété : quelle électricité, quel matériel pour les serveurs, quelles fonctionnalités et donc quelle intensité d'usage, quel degré de maintenance et quelle tolérance aux pannes et interruptions de service, ... ?
L'Internet de masse étant en très grande partie possédé et administré par des organisations à but lucratif massives et sur-puissantes, les enjeux de sobriété sont loin d'être la priorité. La priorité est donnée à la "nouveauté" des fonctionnalités, à l'efficacité par la multiplication des redondances, à la collecte de métadonnées et à la vitesse absolue du réseau. C'est cet objectif de générer toujours plus de revenus et les moyens qui y sont associés qui conduisent au développement technologique continu dans les réseaux (fibre, 5g, starlink) et dans les matériels (smartphones à renouvellement accéléré, objets connectés, ...). Ce développement continu entraîne une consommation énergétique et de ressources fossiles finies exponentielle. Cela rend aussi techniquement impossible de recycler ces matériels, devenus trop miniaturisés. Les progrès techniques marginaux dans l'efficacité énergétique des matériels sont de très loin effacés par l'accroissement du nombre d'objets connectés et du flux de données.
Cette croissance des consommations liées au "numérique" ne provient d'ailleurs que très peu de l'accroissement démographique. Elle provient plutôt de la miniaturisation excessive, de la multiplication du nombre d'objets numériques par personne dans les pays du Nord.
Face à cette situation, l'alternative n'est pas nécessairement l'arrêt net de tout usage des technologies numériques, mais plutôt un recours plus modéré à ces outils : des matériels récupérés et conçus pour durer et être réutilisés-recyclés, des réseaux à plus petite échelle et plus faible débit, des redondances mesurées, des usages réfléchis. C'est par exemple la proposition qui est faite par le collectif CHATONS : des hébergements locaux pour des outils numériques conviviaux, administrés par celleux qui les utilisent, sur des matériels sobres et utilisés durant bien plus longtemps. Nos organisations ont un grand pouvoir dans la construction durable de ces systèmes numériques durables et éthiques : ces systèmes se montent à échelle humaine donc quelques dizaines/centaines d'usagers soutenant supplémentaires peuvent réellement contribuer à pérenniser des logiciels et des infrastructures utiles à tous. Le système du numérique commercial centralisé se nourrit et tire son modèle économique d'une grande quantité de données et d'usagers homogènes. Alors que les systèmes numériques éthiques sont friands d'usagers singuliers attentifs et contributifs.
une Page Menu Haut : on peut y ajouter des liens vers les pages du wiki (menu et sous-menu)
une Page Rapide Haut : il s'agit des pages d'administration du wiki, la roue crantée en haut à droite
une Page Header : c'est une partie utile pour écrire le titre donné au wiki, ajouter une description, un logo...
une Page Footer : autrement dit un pied de page, où se trouvent diverses informations au sujet due wiki
Il y a deux manières d'accéder à une page menu pour la modifier :
Par la roue crantée
Dans la page Gestion du site, on retrouve les liens vers toutes les pages citées ci-dessus.
Par l'url
Pour les menus par défaut ces url sont :
https://www.urldusite.ext/PageTitre
https://www.urldusite.ext/PageMenuHaut
https://www.urldusite.ext/PageRapideHaut
https://www.urldusite.ext/PageHeader
https://www.urldusite.ext/PageFooter
Zoom sur le menu du haut
Pour créer ou modifier un menu...
... il faut savoir créer des liens (voir lecture 1 !)...
Les titres de menu coorrespondent à des liens menant à des pages, qu'elles soient déjà créées ou non.
Ici la page "Démo" n'existe pas : il y a un petit crayon à côté de son nom dans la page (en bas) et dans le menu (en haut). On peut créer la page en cliquant sur son nom, dans la page ou dans le menu.
...et des listes à puces (idem !)
Une page menu est organisée comme une liste de puces. Un niveau de menu correspond au retrait de la puce, soit un ou plusieurs espaces placés en début de ligne :
un seul espace avant le tiret créera un titre de premier niveau (toujours apparent dans le menu). Ici la page "Démo".
deux espaces avant le tiret créera un titre de deuxième niveau (apparent après avoir cliqué sur le titre de premier niveau). Ici les pages Test1 et Test2.
N'hésitez pas à vous inspirer du code du menu déjà en place. Un wiki récemment installé a quelques éléments de menu justement pour vous montrer comment ça marche ;-)
Visite guidée de la roue crantée
Cliquer sur la roue crantée en haut à droite me donne accès à un certain nombre d'espaces dédiés à l'administration du wiki :
La roue crantée peut être personnalisée sur PageRapideHaut.
Se connecter
Ce bouton sert à s'identifier ou à se créer un compte ("s'inscrire") :
Nous explorerons les détails de cette fonctionnalités dans le "Module 2.2 : Penser les accès pour ouvrir et fermer à la juste mesure".
Aide, démo, actu
Vous avez là une intégration des pages d'aide du site yeswiki.net
Présentation YesWiki
Cette page vous décrit YesWiki et sa communauté.
Gestion du site
Cette page gestion du site est très importante. Elle donne accès à de nombreuses fonctionnalités d'administration :
Accueil de gestion du site
Vous avez là un récap des menus et pages spéciales du wiki.
Droits d'accès
C'est ici que vous pouvez indiquer qui a le droit de faire quoi sur quelle page.
Il faut être identifié comme administrateur pour visionner et modifier les informations de cet espace.
Nous explorerons les détails de cette fonctionnalités dans le "Module 2.2 : Penser les accès pour ouvrir et fermer à la juste mesure".
Look
C'est par là que vous personnalisez le squelette et l'esthétique de votre wiki.
Il faut être identifié comme administrateur pour visionner et modifier les informations de cet espace.
Nous explorerons les détails de cette fonctionnalités dans le "Module 2.1 : Penser l'ergonomie pour optimiser les chemins d'accès / de lecture".
Utilisateurs et groupes
Ici vous visualisez les comptes utilisateurs créés et vous pouvez les organiser en "groupes".
Il faut être identifié comme administrateur pour visionner et modifier les informations de cet espace.
Nous explorerons les détails de cette fonctionnalités dans le "Module 2.2 : Penser les accès pour ouvrir et fermer à la juste mesure".
Mots clés
Si vous avez utilisé des mots clés pour qualifier vos pages wiki vous en trouvez un récap ici.
Il faut être identifié comme administrateur pour visionner et modifier les informations de cet espace.
Fichier de conf
Certains éléments de configuration peuvent être personnalisés ici : accès par défaut, sécurité, indexation ...
Il faut être identifié comme administrateur pour visionner et modifier les informations de cet espace.
Nous les explorerons au fil des modules.
Mises à jour / extensions
Vous pouvez voir ici la version du wiki et s'il s'agit de la toute dernière.
Si vous êtes identifié comme administrateur vous pouvez faire les mises à jour.
Tableau de bord
Dans le tablau de bord vous pouvez voir :
les derniers comptes utilisateurs créés
les dernières pages modifiées
la liste exhaustive des pages du wiki
C'est le tableau de bord configuré par défaut mais vous pouvez le personnaliser.
Base de données
C'est ici que l'on configure Bazar : Bazar est une extension importante de Yeswiki qui lui ajoute des fonctionnalités de création et de gestion de bases de données (formulaires).
Nous verrons ça en détails dans les modules "1.3 Faciliter les contributions" et "2.3 Gérer finement les données".
Il faut être identifié comme administrateur pour créer ou modifier un formulaire Bazar.
Pour modifier une page, vous allez passer "en mode édition". Pour cela 3 manières (choisissez votre préférée !) :
double-clic au centre de la page
bouton "éditer la page" tout en bas de la page
rajouter /edit à la fin de l'url
Mettre en forme le texte
En mode édition, le langage YesWiki nécessite de connaître quelques petites astuces pour mettre en forme le texte d'une page. En voici quelques unes de base.
A noter : La plupart est accessible directement dans la barre d'édition !
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)
si vous déposez du html dans la page wiki,
il faut l'entourer de '' ''
pour qu'il soit interprété
Placer du code en commentaire sur la page
""""
Insérer un document ou une image
En plus du texte, on peut vouloir ajouter des images, des documents à télécharger, voire des vidéos ou des fichiers audio. Avec YesWiki ceci est très facile ! Voici comment faire.
Bouton "fichier"
Dans la page en mode édition, cliquer sur le bouton "Fichier" permet de choisir un fichier qui se trouve sur votre ordinateur.
En fonction du type de fichier à insérer, YesWiki propose des interfaces différentes, mais le principe reste le même.
pour un fichiers image (svg, png, gif, jpg, bmp...)
Le bouton ouvre sur une fenêtre qui permet de choisir l'alignement de l'image, sa taille à l'affichage ainsi que le texte qui s'affichera au survol (texte de la vignette).
En cliquant sur "Paramètres avancés", on peut ajouter un lien associé (en vert ci-dessous), des effets graphiques, modifier le texte alternatif et empêcher l'affichage de l'image lorsqu'on clic dessus (en jaune).
On peut modifier l'image après l'avoir enregistrée. Pour cela il faut re-éditer la page, trouver le bout de code entre {{ }} qui concerne ce fichier et cliquer n'importe où dessus : un bouton crayon apparaît, il suffit de cliquer dessus pour afficher la fenêtre permettant de faire toutes les modifications que vous souhaitez.
pour un fichier texte (.doc, .pdf, .xls, .odt, .txt...)
Ici le bouton ouvre une fenêtre qui permet de modifier le texte du lien et d'afficher le fichier sous forme de lien ou directement inclus dans la page.
Comme pour les images, on peut
- cliquer sur Paramètres avancés pour ajouter un lien associé, des effets graphiques et que modifier le texte alternatif.
- et modifier le fichier après l'avoir enregistré en cliquant sur bout de code entre {{ }}.
pour un fichier audio (mp3) et vidéo (flv)
Le principe est toujours le même. Ces fichiers seront interprétés sous forme de lecteur audio. Mais souvent ce sont des fichiers lourds qu'on a tendance à stocker sur des plateformes spécialisées (vimeo, youtube, peertube ...) pour ensuite les intégrer au wiki en iframe.
pour un fichier freeplane ou freemind (.mm)
Le principe est toujours le même. Ces fichiers seront affichés sous forme de carte heuristique cliquable.
Vous avez envie de code ?
Pas de souci, vous avez ci-dessus les bouts de codes générés par les boutons, ils peuvent être créés directement sur votre page en mode édition, et modifiés comme vous le souhaitez. Pour plus d'infos, aller sur la page {{attach}} de la documentation YesWiki.
Une vidéo pour vous aider
Voir la vidéo (elle est faite à partir de la version précédente mais le principe est le même)
Faire un lien
Dans les pages d'une gare centrale on a souvent besoin de faire des liens vers d'autres pages ou d'autres sites. Encore une fois, c'est asser simple.
Dans la page en mode édition, cliquer sur le bouton "Lien".
Vous serez alors guidé.e dans vos choix avec cette fenêtre :
Faites vos choix et cliquez sur "Insérer" : la ligne de code s'inscrit toute seule ;-)
Vous avez envie de code ?
Voici ce que ça donne quand on regarde le code :
Intégrer des éléments d'autres sites (widgets)
Avec YesWiki on ne réinvente pas le fil à couper le beurre et on peut facilement copier sur son voisin et récupérer des pages intéressantes ! On peut aussi tout simplement avoir besoin d'utiliser différents outils de travail coopératif et vouloir les centraliser dans notre gare centrale. Voici comment faire :
Un peu de vocabulaire
Un widget est un petit module qui permet à une page d'embarquer (encapsuler, intégrer... "embed" en anglais) et de re-publier dynamiquement des contenus et fonctions issus de services proposés par d'autres sites internet.
Quelques étapes très simples
1. Trouver le code iframe permettant l'intégration
Un site propose souvent d'afficher ses contenus ailleurs que "chez lui", en fournissant un morceau de code html (appelé iframe), qui se trouve dans les options "Partager" > "Intégrer" ou encore "iframe".
Ca peut ressembler à ça :
Le code iframe que vous allez trouver ressemblera à ça :
Vous allez sélectionner et copier ce code pour aller le coller dans votre wiki.
2. Coller ce code dans ma page wiki
Une fois le code collé dans la page il faut penser à ajouter avant et après deux guillemets.
""coller ici le code HTML fourni par le site tiers""
3. Sauver et profiter !
Vous enregistrez ces modifications et vous pouvez profiter des fonctionnalités de cet autre site dans votre wiki : lire la vidéo, écrire dans le pad, lire un contenu ...
Bricoler le code
Changer la taille de la fenêtre
Le code iframe fourni peut être personnalisé, notamment pour les dimensions de la fenêtre intégrée.
Dans le bout de code à copier-coller, les paramètres width (largeur) et height (hauteur) permettent de spécifier la taille de ce cadre et ils sont renseignés en pixels. Vous pouvez modifier ces chifres pour ajuster la taille de la fenêtre.
Largeur
Le paramètre width= est indispensable. Il peut indiquer un nombre pixels ou un pourcentage de la taille de l'écran.
Pour que la fenêtre prenne toute la largeur et s'adapte à l'écran vous pouvez indiquer width=100%
Hauteur
L'insertion iframe peut configurer sa longueur automatiquement via la class class="auto-resize"
Ajouter ou enlever un cadre noir
La fenetre intégrée peut être encadrée ou non.
Dans la "class" vous pouvez préciser frameborder="yes" (avec cadre noir) ou frameborder="no" (sans cadre noir)
Créer une nouvelle page
Bien entendu, on ne peut pas se contenter d'une seule page dans sa gare centrale !
Vous pouvez initier une nouvelle page où que vous soyez dans votre wiki : dans une page classique ou dans le menu.
Il y a pour celà 2 étapes :
ouvrir le fenêtre permettant de faire un lien (voir plus haut)
saisir le "Nom de la page YesWiki"
Nommer ma nouvelle page
La seule règle pour nommer votre page est indiquée : "sans espace ni caractère spéciaux".
Donc vous pouvez choisir de l'appeler nomdemapage ou comptesrendusdereunions
Ce sera plus lisible si vous alternez avec des majuscules NomDeMaPage (c'est la méthode traditionnelle dans YesWiki, ce que vous nous appelions les ChatMot).
Et c'est encore mieux (notamment pour les moteurs de recherches) si vous optez pour les tirets : nom-de-ma-page
Ca donne ça :
Quand je cliquer sur "insérer", ça génère cette ligne de code :
Il ne vous reste plus qu'à sauver.
Quand le lien vient d'être créé mais que la nouvelle page est vide, un petit crayon apparait devant le lien. Il disparaitra quand vous aurez saisi du contenu dans la nouvelle page.
Astuces
une fois ma nouvelle page créée je peux enlever le lien qui y mène sans que la page disparaisse pour autant. Je peux retrouver mes pages dans la roue crantée en haut à droite > Tableau de bord. Une bonne manière de cacher des pages ;-)
une tout autre manière de créer une nouvelle page est de modifier l'URL : la dernière partie de l'adresse correspond au nom de la page
YesWiki va interpréter tout ChatMot comme une nouvelle page. Si on veut écrire un ChatMot sans créer de nouvelle page (par exemple pour écrire YesWiki sans créer de lien), on l'encadre de double guillemets:
Lectures Bazar : Concevoir son formulaire (étape 1)
Index
Lectures Bazar : Concevoir son formulaire (étape 1)
Les questions à se poser lors de la conception d'un formulaire Bazar
Lorsqu'on conçoit un formulaire, on se pose la question "qu'est-ce que je cherche à savoir ?", autrement dit, « quelles sont les questions auxquelles on souhaite que les utilisateurs répondent ? ».
Cohérence des objectifs
En tant que concepteur, la première question que l'on doit se poser dans ce type de démarche est la suivante : « quel est l'objectif de ce formulaire ? »
Cette question en amène quelques autres sur lesquelles il pourrait être constructif de se pencher.
Cet objectif, que j'imagine, a-t-il été validé par le groupe auquel le formulaire est destiné ?
Quel est mon objectif ?
Les réponses à ces différentes questions sont-elles cohérentes ?
Éviter de vouloir la perfection
Au risque d'enfoncer quelques portes ouvertes et en supposant que le perfection existe…
1 – Le formulaire parfait à vos yeux ne le sera pas nécessairement aux yeux des autres.
2 – Le formulaire parfait, aujourd'hui, ne le sera pas nécessairement demain (et oui, le monde change).
Au delà de ces considérations, voici deux aspects de la conception de formulaire pour lesquels il n'y a pas de bonne réponse absolue.
Le nombre de questions – Vaut-il mieux prévoir un fomulaire le plus complet possible afin d'éviter de solliciter trop souvent la participation ? A contrario, un individu normalement constitué ne risque-t-il pas de se décourager à la vue d'un questionnaire qu'il juge trop long ? Une réponse juste à ces interrogations se trouve peut-être dans les deux considérations suivantes.
Quels sont, pour le groupe, les objectifs de votre formulaire ? Vous y tenez-vous ?
Un individu est beaucoup plus enclin à produire un effort qu'il a décidé. Autrement dit, si vous avez conçu, de manière réellement coopérative, un formulaire, chacune des personnes partie prenante à cette conception sera plus volontiers volontaire pour le remplir.
Les informations obligatoires – Quand on y réfléchit bien, si on pose la question, c'est qu'on veut connaître la réponse. Une conséquence de cela est la tendance à rendre obligatoires beaucoup de questions de notre formulaire.
L'expérience montre que les formulaires comportant trop de questions obligatoires sont peu remplis. Les principales raisons en sont le découragement, d'une part, et, d'autre part, l'impossibilité, parfois, de remplir le formulaire en une fois, du fait de la nature de certaines questions.
Une bonne pratique consiste à se focaliser, pour les questions obligatoires, sur celles pour lesquelles l'absence de réponse priverait la fiche de tout son sens.
On évitera également de rendre obligatoire toute question dont la réponse peut demander une implication trop forte sauf si bien sûr c'est là l'objet du formulaire. Pour illustrer, demander aux gens ce qu'ils vont apporter est acceptable pour l'organisation du goûter de la semaine prochaine, mais risque de décourager quand il s'agit de l'encas de toutes les réunions du CA de l'an prochain (on y est pas encore et ça fait beaucoup).
Testez, corrigez, recommencez (itérations) – La conception du formulaire (1re phase) va avoir un impact sur son comportement aussi bien lors de la saisie des différentes fiches (2e phase) que lors de l'affichage de ses résultats (3e phase). Vous allez donc probablement découvrir des choses en cour de route et devoir adapter votre formulaire (1re phase).
Ce n'est pas grave !
Il sera donc judicieux de procéder à quelques tests de votre page de saisie et de votre page d'affichage des résultats avant de diffuser massivement les liens vers ces pages. Voire de le faire tester à des collègues qui apporteront leur regard neuf.
Prendre le contrôle sur son collectif
Enfermez vous tout seul chez vous.
Concevez le formulaire parfait.
Imposez à tous les autres de le remplir.
Obligez les à être heureux en consultant les résultats.
Si vous pensez ne pas être capable de réaliser au moins une des étapes ci-dessus, alors vous êtes face à une excellente occasion de mettre en œuvre de la coopération en co-élaborant votre formulaire.
La technique
Accéder à Bazar
Accéder à Bazar
Bazar est la partie base de données de YesWiki. On s'y rend de la manière suivante.
Menu roue crantée en haut à droite du wiki.
Entrée « Base de données ».
Notez qu'il faut être connecté avec un compte administrateur du wiki pour pouvoir utiliser certaines fonctionnalités Bazar.
L'écran qui se présente ressemble à ceci (image de droite).
Les différents onglets en haut de cette page permettent d'accéder aux différentes fonctions de Bazar.
« Formulaires » vous permet de gérer vos formulaires.
« Rechercher » vous permet de rechercher parmi les fiches déjà présentes dans vos formulaires.
Vous pouvez également trier vos fiches pour n'afficher que celles appartenant à un formulaire donné.
« Saisir » vous permet de saisir des fiches dans un de vos formulaires.
« Listes » vous permet de créer les listes (et leurs contenus) que vous utiliserez ensuite dans vos formulaires.
« Importer » vous permet d'importer des données en nombre (en provenance d'un tableur par exemple) directement dans un de vos formulaire.
« Exporter » vous permet d'exporter les données d'un de vos formulaire pour un usage externe (dans un tableur par exemple).
Gestion des formulaires Bazar
Gestion des formulaires Bazar
Pour gérer les formulaires, il faut se rendre sur l'onglet « Formulaires » de la partie base de données de YesWiki.
Menu roue crantée en haut à droite du wiki.
Entrée « Base de données ».
Onglet « Formulaires ».
Cet onglet se présente sous la forme d'un tableau dans lequel chaque formulaire présent sur le wiki occupe une ligne.
Pour chaque ligne, et donc chaque formulaire, on a donc les informations suivantes (les nombres en rouge sur la capture d'écran correspondent aux numéros dans la liste ci-après).
1 – Le nom du formulaire. C'est le nom sous lequel ce formulaire apparaîtra pour vous.
Parfois ce nom est suivi de quelques mots de description (dans l'exemple ci-contre c'est le cas des formulaires Convive et Ressources) 2 – Ce petit bouton en forme de loupe vous permet d'accéder à la recherche parmi les fiches de ce formulaire. Le comportement est alors similaire à celui qu'on aurait avec l'onglet « Rechercher » en haut de page. 3 – Ce petit bouton en forme de « + » vous permet d'accéder à la saisie de fiches pour ce formulaire. Le comportement est alors similaire à celui qu'on aurait avec l'onglet « Saisir » en haut de page. Tapis de décoration pour chambre d'enfants 4 – Chacune des icônes ou libellés dans ce groupe permet de déclencher l'export, la diffusion ou la publication selon le format indiqué. 5 – Il s'agit de l'identifiant (ou nom) du formulaire pour YesWiki. Vous n'aurez a priori pas à utiliser ce nom. 6 – Ce petit bouton permet de dupliquer un formulaire afin de s'en inspirer pour en construire un autre en partie similaire sans avoir à tout refaire. 7 – Ce petit bouton en forme de crayon permet d'accéder à la modification du formulaire. 8 – Cette petite gomme permet de supprimer toutes les fiches du formulaire. Attention, il n'y a pas de moyen de récupérer des fiches supprimées. 9 – Cette petite poubelle permet de supprimer le formulaire. Attention, il n'y a pas de moyen de récupérer un formulaire supprimé. 10 – Ce bouton permet de créer un nouveau formulaire. 11 – Vous pouvez, si vous avez repéré sur un autre YesWiki un formulaire qui vous conviendrait, utiliser ce champ pour saisir l'adresse du wiki en question. Vous serez ensuite guidés pour récupérer le ou les formulaires qui vous intéressent sur ce wiki.
Pour modifier un formulaire ou utilisera donc le petit bouton en forme de crayon (cf. 7 précédent).
Et, pour créer un nouveau formulaire, on utilisera le bouton « Saisir un nouveau formulaire ».
Les deux boutons envoient sur un écran similaire, vide dans le cas de la création et présentant les questions du formulaire dans le cas d'une modification.
Création d'un formulaire
Modification d'un formulaire
Nom du formulaire
Dans la première zone en haut de l'écran, on saisit (création), ou on trouve (modification), le nom du formulaire.
Ce nom peut être composé de plusieurs mots, comportant éventuellement des caractères accentués.
Il est possible de modifier ce nom par la suite.
Description du fomulaire
Cette zone permet de saisir des explications pour comprendre l'objectif du formulaire depuis l'écran de gestion des formulaires (cf. 1 précédent).
Ajout, suppression et réorganisation des champs du formulaire
Remarque concernant le vocabulaire – Nous appellerons « champ » la mise en œuvre technique d'une question.
Depuis la version Doryphore de YesWiki, la gestion des champs du formulaire se fait au moyen d'un constructeur graphique. Celui-ci permet d'ajouter, modifier, supprimer ou réorganiser des champs dans le formulaire.
Ce constructeur graphique se présente en deux parties. Les numéros sur l'image renvoient aux explications ci-dessous. Dans la partie gauche de l'écran, sont montrés les champs (ou questions) déjà présents avec :
leur libellé (1),
une représentation de leur aspect dans le formulaire final (2),
un petit astérique rouge si le champ est obligatoire (3).
Lorsqu'on déplace le pointeur de la souris au dessus de la zone correspondant au champ, celui-ci devient une poignée (4) qui permet de déplacer le champ pour le positionner à un en autre endroit dans le formulaire.
Apparaissent également au survol de la souris,
un bouton de suppression du champ (5),
un bouton de modification du champ (6),
un bouton de duplication du champ (7).
Dans la partie de droite se trouvent les différents types de champs possibles (8).
En saisissant, dans la partie droite, l'icône d'un type de champs et en la glissant dans la partie gauche, on va ajouter un champ de ce type au formulaire.
Une zone noire apparaît alors à l'endroit où le champ sera inséré. Dans l'exemple montré, cette zone est placée en dessous du champ prééxistant.
En relachant le bouton de la souris, le champ se crée.
Modification d'un champ de formulaire
En cliquant sur le petit crayon correspondant à un champ, on peut modifier ses différents paramètres.
Enregistrer
Lorsque vous avez fini de modifier votre formulaire, vous devez valider au moyen du bouton du même nom en bas de page.
Types de champs des formulaires Bazar
Types de champs Bazar
Bazar propose de nombreux types de champs. Voici ceux auxquels vous aurez le plus souvent recours.
✨ Quand on connait déjà toutes les réponses possibles à une question
Lorsqu'on peut énumérer toutes les réponses possibles à une question
Il arrive fréquemment qu'on puisse énumérer (lister) toutes les réponses possibles à une question de notre formulaire, pour exemples : (oui, non) ou encore (sympathisant, adhérent, etc.).
À quoi cela peut-il servir ?
Dans Bazar, cette énumération des réponses possibles se matérialise sous la forme d'une liste ou d'un formulaire dont les différentes fiches constitueront les réponses possibles.
Lors de la phase 1 de conception du formulaire, ces énumérations (listes ou formulaires liés) vont permettre de poser les questions sous forme de :
Lors de la phase 3 d'affichage des résultats du formulaire, le recours à des énumérations permet de proposer des facettes afin que l'utilisateur puisse filtrer parmi les fiches remplies.
Utiliser une liste
Les listes dans Bazar
Bazar permet de définir des listes que vous allez pouvoir utiliser ensuite dans des formulaires.
Gestion des listes
Pour gérer les listes, il faut se rendre sur l'onglet « Listes » de la partie base de données de YesWiki.
Menu roue crantée en haut à droite du wiki.
Entrée « Base de données ».
Onglet « Listes ».
Cet onglet se présente de la manière suivante (les nombres en rouge sur la capture d'écran correspondent aux numéros dans la liste ci-après).
1 – Le nom de la liste. C'est le nom sous lequel cette liste apparaîtra pour vous. 2 – Un aperçu de la liste. En cliquant sur la petite flêche descendante à droite, on peut faire apparaître l'ensemble des valeurs possibles. 3 – Le nom de la liste, vu du côté de YesWiki cette fois. Vous n'aurez a priori pas à utiliser ce nom. 4 – Ce petit bouton en forme de crayon permet d'accéder à la modification de la liste. 5 – Cette petite poubelle permet de supprimer la liste. Attention, il n'y a pas de moyen de récupérer une liste supprimée. 6 – Ce bouton permet de créer une nouvelle liste. 7 – Vous pouvez, si vous avez repéré sur un autre YesWiki une liste qui vous conviendrait, utiliser ce champ pour saisir l'adresse du wiki en question. Vous serez ensuite guidés pour récupérer la ou les listes qui vous intéressent sur ce wiki.
Création ou modification d'une liste
Pour modifier une liste ou utilisera donc le petit bouton en forme de crayon (cf. 4 précédent). Et, pour créer une nouvelle liste, on utilisera le bouton « Saisir une nouvelle liste ».
Les deux boutons envoient sur un écran similaire, vide dans le cas de la céation et chargé du contenu de la liste dans le cas d'une modification.
Création d'une liste
Modification d'une liste
Nom de la liste
Dans la première zone en haut de l'écran, on saisit (création), ou on trouve (modification), le nom de la liste (cf. 1 de la section précédente).
Ce nom peut être composé de plusieurs mots, comportant éventuellement des caractères accentués.
Il est possible de modifier ce nom par la suite.
Saisie ou modification d'une valeur de la liste
Chacune des valeurs de la liste sera saisie dans une ligne de ce type.
On y trouve deux valeurs à saisir et deux boutons.
Le libellé ou texte – C'est le texte ou la valeur qui va s'afficher. Cela peut être un ou plusieurs mots ou des nombres.
La clef ou identifiant unique – C'est le nom que YesWiki va utiliser pour cette valeur.
Nous recommandons de n'utiliser pour cette clef que des suites de caractères sans accents et sans espaces.
Même si vous n'en verrez rien, c'est cette clef que YesWiki va stocker dans les fiches de formulaire pour lesquelles les utilisateurs ont choisi cette valeur de liste.
Le bouton de suppression – Ce bouton permet de retirer cette valeur de la liste. Attention :
une valeur supprimée ne peut pas être restaurée (pas d'annulation de la suppression). Si après avoir supprimé une valeur vous vous rendez compte qu'il s'agissait d'une erreur, vous devrez saisir à nouveau cette valeur.
Quand vous supprimez une valeur d'une liste, cela ne change rien dans les différentes fiches de formulaires. Autrement dit, supposons que vous ayez une liste (oui, non), et que vous ayez un formulaire d'inscription dans lequel vous demandez au personnes si elles sont adhérentes au moyen de cette liste (oui, non). Si vous supprimer la valeur « oui » de la liste, toutes les fiches pour lesquelles les personnes ont répondu « oui » à la question « Avez-vous adhéré ? » vont conserver cette information.
La poignée de déplacement – Cette poignée permet de changer l'ordre des valeurs dans la liste. Vous pouvez ainsi ajouter des valeurs selon vos besoins, puis réordonner la liste pour qu'elle se présente comme vous le souhaitez (par exemple, dans l'ordre alphabétique).
Ajouter une nouvelle valeur à la liste
Si vous souhaitez ajouter une valeur à votre liste et qu'aucune ligne de saisie n'est vide, vous pouvez en ajouter une au moyen de ce bouton.
Enregistrer
Lorsque vous avez fini d'ajouter des valeurs à votre liste, vous pouvez cliquer sur ce bouton afin de sauvegarder votre liste.
✨ Utiliser un autre formulaire en tant que liste
Utiliser un formulaire en tant que liste
Bazar permet d'utiliser, dans un formulaire, un autre formulaire comme s'il s'agissait d'une liste. Les réponses à cet autre formulaire constituent alors les différentes valeurs de cette liste.
Premier exemple
Vous avez un formulaire « projet » présentant des projets et un autre formulaire, « commentaire », permettant d'ajouter des commentaires sur ces projets.
Vous souhaitez, au sein du formulaire « commentaire », permettre à l'utilisateur de choisir dans une liste déroulante dynamique la fiche « projet » qu'il souhaite commenter.
Second exemple
Vous avez un formulaire « recette » qui regroupe différents plats (un par fiche).
Et, dans un autre formulaire (« menu » par exemple), vous souhaitez permettre à l'utilisateur de choisir dans une liste déroulante dynamique un plat parmi vos recettes.
Comment faire ?
Bazar va permettre de lier un formulaire à un autre. Dans notre premier exemple, des fiches du formulaire « commentaire » vont être liées à des fiches du formulaire « projet ».
Pour cela on utilise un des champs :
pour le paramètre « Origine des données », choisir « Un formulaire Bazar ».
puis, pour le paramètre « Choix de la liste/du formulaire », indiquer le formulaire à partir duquel vous souhaitez que les utilisateurs choisissent.
Montrer les fiches liées
En reprenant notre premier exemple, on peut, lorsqu'on affiche une fiche « projet », montrer toutes les fiches « commentaire » s'y rapportant.
Pour cela on utilisera, dans le formulaire « projet », un champ du type « Liste des fiches liées » dont le paramètre « Id du formulaire lié » contiendra l'identifiant Bazar du formulaire « commentaire » (point 5 sur cette page).
En premier lieu ce type de champs nécessite de pouvoir énumérer les différentes valeurs possibles Pour savoir comment faire.
Un champ de ce type permet de proposer à l'utilisateur une liste fermée de choix. Les choix possibles seront présentés sous forme d'une liste déroulante.
En outre, l'utisation de ce type de champ permet d'avoir recours à des facettes pour filtrer parmi les fiches remplies.
Comme tous les champs celui-ci comporte des paramètres génériques et des paramètres spécifiques.
Paramètres génériques
Certains paramètres sont génériques à tous ou pratiquement tous les types de champs. Ils sont repris ici.
Obligatoire
Ce paramètre permet d'indiquer si répondre à cette question sera obligatoire. Le champ est obligatoire lorsque la case est cochée.
Identifiant unique
Ce paramètre permet de définir le nom du champ pour YesWiki.
Ce nom sera utilisé par YesWiki pour identifier le champ et doit donc impérativement être unique. Si un autre champ avait le même identifiant dans votre formulaire, vous observeriez des dysfonctionnements.
Vous n'avez à intervenir sur ce paramètre que dans les rares cas où la documentation le spécifie.
Intitulé
Il s'agit du texte de votre question. YesWiki préremplit ce paramètre avec le type de champ, charge à vous de remplacer cela par un libellé pertinent.
Texte d'aide
Ce paramètre vous permet de saisir un texte d'aide afin d'aiguiller l'utilisateur si vous pensez qu'il peut en avoir besoin pour cette question.
✨ Peut être lu par
Par défaut, chaque champ peut être lu par toute personne ayant le droit de visualiser une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
✨ Peut être saisi par
Par défaut, chaque champ peut être saisi par toute personne ayant le droit de saisir une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
Paramètres spécifiques au type de champs « sélectionner »
Origine des données
Dans ce paramètre, pour permettre à l'utilisateur de choisir parmi les valeur d'une liste, sélectionnez « une liste ».
Si, au contraire, vous souhaitez permettre à l'utilisateur de choisir parmi des fiches d'un autre formulaire, sélectionnez « Un formulaire Bazar ».
Choix de la liste/du formulaire
Avec ce paramètre vous choisissez la liste (ou le formulaire) à partir de laquelle vous souhaitez que les utilisateurs choisissent.
Valeur par défaut
Ce paramètre vous permet de proposer une valeur par défaut. Si vous n'en précisez pas, c'est le mot « choisir » qui s'affichera jusqu'à ce qu'un choix soit effectué. Attention, pour préciser la valeur par défaut, il faut indiquer sa clef dans la liste (et non pas sa valeur).
Groupe de cases à cocher
Champ de type « groupe de cases à cocher »
En premier lieu ce type de champs nécessite de pouvoir énumérer les différentes valeurs possibles Pour savoir comment faire.
Un champ de ce type permet de proposer à l'utilisateur une liste fermée de choix. Les choix possibles seront présentés sous forme d'un groupe de cases à cocher.
En outre, l'utisation de ce type de champ permet d'avoir recours à des facettes pour filtrer parmi les fiches remplies.
Comme tous les champs celui-ci comporte des paramètres génériques et des paramètres spécifiques.
Paramètres génériques
Certains paramètres sont génériques à tous ou pratiquement tous les types de champs. Ils sont repris ici.
Obligatoire
Ce paramètre permet d'indiquer si répondre à cette question sera obligatoire. Le champ est obligatoire lorsque la case est cochée.
Identifiant unique
Ce paramètre permet de définir le nom du champ pour YesWiki.
Ce nom sera utilisé par YesWiki pour identifier le champ et doit donc impérativement être unique. Si un autre champ avait le même identifiant dans votre formulaire, vous observeriez des dysfonctionnements.
Vous n'avez à intervenir sur ce paramètre que dans les rares cas où la documentation le spécifie.
Intitulé
Il s'agit du texte de votre question. YesWiki préremplit ce paramètre avec le type de champ, charge à vous de remplacer cela par un libellé pertinent.
Texte d'aide
Ce paramètre vous permet de saisir un texte d'aide afin d'aiguiller l'utilisateur si vous pensez qu'il peut en avoir besoin pour cette question.
✨ Peut être lu par
Par défaut, chaque champ peut être lu par toute personne ayant le droit de visualiser une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
✨ Peut être saisi par
Par défaut, chaque champ peut être saisi par toute personne ayant le droit de saisir une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
Paramètres spécifiques au type de champs « groupe de cases à cocher »
Origine des données
Dans ce paramètre, pour permettre à l'utilisateur de choisir parmi les valeur d'une liste, sélectionnez « une liste ».
Si, au contraire, vous souhaitez permettre à l'utilisateur de choisir parmi des fiches d'un autre formulaire, sélectionnez « Un formulaire Bazar ».
Choix de la liste/du formulaire
Avec ce paramètre vous choisissez la liste (ou le formulaire) à partir de laquelle vous souhaitez que les utilisateurs choisissent.
Valeur par défaut
Ce paramètre vous permet de proposer une valeur par défaut. Si vous n'en précisez pas, c'est le mot « choisir » qui s'affichera jusqu'à ce qu'un choix soit effectué. Attention, pour préciser la valeur par défaut, il faut indiquer sa clef dans la liste (et non pas sa valeur).
Groupe de boutons radio
Champ de type « groupe de boutons radio »
En premier lieu ce type de champs nécessite de pouvoir énumérer les différentes valeurs possibles Pour savoir comment faire.
Un champ de ce type permet de proposer à l'utilisateur une liste fermée de choix. Les choix possibles seront présentés sous forme d'un groupe de boutons radio.
En outre, l'utisation de ce type de champ permet d'avoir recours à des facettes pour filtrer parmi les fiches remplies.
Comme tous les champs celui-ci comporte des paramètres génériques et des paramètres spécifiques.
Paramètres génériques
Certains paramètres sont génériques à tous ou pratiquement tous les types de champs. Ils sont repris ici.
Obligatoire
Ce paramètre permet d'indiquer si répondre à cette question sera obligatoire. Le champ est obligatoire lorsque la case est cochée.
Identifiant unique
Ce paramètre permet de définir le nom du champ pour YesWiki.
Ce nom sera utilisé par YesWiki pour identifier le champ et doit donc impérativement être unique. Si un autre champ avait le même identifiant dans votre formulaire, vous observeriez des dysfonctionnements.
Vous n'avez à intervenir sur ce paramètre que dans les rares cas où la documentation le spécifie.
Intitulé
Il s'agit du texte de votre question. YesWiki préremplit ce paramètre avec le type de champ, charge à vous de remplacer cela par un libellé pertinent.
Texte d'aide
Ce paramètre vous permet de saisir un texte d'aide afin d'aiguiller l'utilisateur si vous pensez qu'il peut en avoir besoin pour cette question.
✨ Peut être lu par
Par défaut, chaque champ peut être lu par toute personne ayant le droit de visualiser une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
✨ Peut être saisi par
Par défaut, chaque champ peut être saisi par toute personne ayant le droit de saisir une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
Paramètres spécifiques au type de champs « groupe de boutons radio »
Origine des données
Dans ce paramètre, pour permettre à l'utilisateur de choisir parmi les valeur d'une liste, sélectionnez « une liste ».
Si, au contraire, vous souhaitez permettre à l'utilisateur de choisir parmi des fiches d'un autre formulaire, sélectionnez « Un formulaire Bazar ».
Choix de la liste/du formulaire
Avec ce paramètre vous choisissez la liste (ou le formulaire) à partir de laquelle vous souhaitez que les utilisateurs choisissent.
Valeur par défaut
Ce paramètre vous permet de proposer une valeur par défaut. Si vous n'en précisez pas, c'est le mot « choisir » qui s'affichera jusqu'à ce qu'un choix soit effectué. Attention, pour préciser la valeur par défaut, il faut indiquer sa clef dans la liste (et non pas sa valeur).
Ce champ n'est pas un vrai champ.
Il s'agit, de fait, d'un outil qui permet de transformer une adresse saisie par un humain en un jeu de coordonnées (longitude et latitude).
Son comportement est donc un peu différent de ce qu'on trouve dans les autres champs.
Notamment, pour trouver les coordonnées d'une adresse, il faut à YesWiki des informations sur celle-ci. Votre formulaire doit donc obligatoirement contenir au moins un des champs suivants (une bonne pratique étant d'en avoir plusieurs, voire tous).
un champ dont l'identifiant unique est « bf_adresse ». S'il n'existe pas, il est d'ailleurs inséré automatiquement lors de la création du champ « géolocalisation de l'adresse » ;
un champ dont l'identifiant unique est « bf_ville » ;
un champ dont l'identifiant unique est « bf_pays ».
Il est indispensable d'avoir un champ de ce type dans votre formulaire si vous souhaitez afficher vos résultats sous forme de carte.
Paramètres du type de champs « géolocalisation de l'adresse »
Obligatoire
Ce paramètre permet d'indiquer si répondre à cette question sera obligatoire. Le champ est obligatoire lorsque la case est cochée.
Nom du champ latitude
Avec ce champ, YesWiki va convertir l'adresse postale en coordonnées. Ce paramètre indique à YesWiki dans quel nom interne il doit donner à la valeur de latitude. Sauf besoin précis, conservez la valeur par défaut qui est « bf_latitude ».
Nom du champ longitude
Avec ce champ, YesWiki va convertir l'adresse postale en coordonnées. Ce paramètre indique à YesWiki dans quel nom interne il doit donner à la valeur de longitude. Sauf besoin précis, conservez la valeur par défaut qui est « bf_longitude ».
✨ Configuration des droits d'accès aux fiches du formulaire
Champ de type « configuration des droits d'accès »
()Clique sur l'image pour la voir en grand)
Ce champ n'est pas un vrai champ.
Il s'agit, dans les faits, d'un outil qui permet de définir les droits d'accès qui seront affectés à chacune des fiches du formulaire. Vous pouvez donc ainsi préciser quelles catégories d'utilisateurs peuvent lire, saisir ou modifier ou encore commenter des fiches de votre formulaire.
Attention
Cette configuration des droits d'accès ne s'applique qu'aux fiches saisies après son paramétrage. Autrement dit, si vous ajoutez ce « champ » à votre formulaire, ou si vous le modifiez, seules les fiches saisies ou modifiées après cet ajout, ou cette modfication, auront les droits que vous avez définis.
Paramètres du type de champs « configuration des droits d'accès »
Peut voir la fiche
Par défaut, les fiches d'un formulaire peuvent être lues par toute personne. Ce « champ » permet de modifier ce comportement pour les fiches du formulaire en question. On peut ainsi masquer ces fiches à certains utilisateurs.
Voir les différentes valeurs possibles.
Peut éditer la fiche
Par défaut, les fiches d'un formulaire peuvent être modifiées par toute personne. Ce « champ » permet de modifier ce comportement pour les fiches du formulaire en question. On peut ainsi protéger ces fiches de façon à ce que seuls certains utilisateurs puissent les modifier.
Voir les différentes valeurs possibles.
Peut commenter la fiche
Par défaut, les fiches d'un formulaire peuvent être commentées par toute personne disposant de cette autorisation sur le wiki. Ce « champ » permet de modifier ce comportement pour les fiches du formulaire en question. On peut ainsi restreindre les commentaires sur ces fiches à certains utilisateurs.
Voir les différentes valeurs possibles.
✨ Construire le titre des fiches d'un formulaire à partir d'autres champs
Champ de type « titre automatique »
Pour qu'un formulaire Bazar fonctionne, il doit contenir un champ titre.
Plus exactement, il doit contenir un champ de type « texte court » dont l'identifiant unique soit « bf_titre ».
Cependant, il n'est pas toujours pertinent de nommer les fiches d'un formulaire à partir du contenu d'un seul champ.
Le champ de type « titre automatique » permet de fabriquer un titre à partir de plusieurs champs. Ce titre sera rempli automatiquement lors de l'enregistrement de chaque fiche.
Comment faire
Laissez le paramètre « Intitulé » tel quel.
Tout se fait avec le paramètre « Valeur ».
Dans « Valeur », pour faire référence à un autre champ, vous devez encadrer son identifiant unique entre des doubles paires d'accolades (ex. : « {{bf_prenom}} », notez bien qu'il y a deux accolades ouvrantes avant l'identifiant unique du champ, et deux accolades fermantes après).
Dans « Valeur », vous pouvez également ajouter du texte, avant, après ou entre les différents champs référencés.
Supprimez le champ titre du formulaire (celui dont l'identifiant unique est « bf_titre »).
Exemples
Il y a très souvent plusieurs manières de faire la même chose. Ces exemples n'ont pour objectif que de faire comprendre le fonctionnement du champ.
Prenons le cas d'un formulaire dans lequel on demande prénom et nom. On peut utiliser le champ titre avec pour libellé « Prénon Nom ». C'est simple, mais outre le fait que cela ne garantit pas que tout le monde saisira son prénom, ou son nom, ou les saisira dans cet ordre, cela ne permet pas de trier les fiches par nom de famille.
Dans ce cas là, on peut :
demander le prénom dans un champ texte court obligatoire dont l'identifiant serait par exemple « bf_text » ;
demander le nom dans un champ texte court obligatoire dont l'identifiant serait par exemple « bf_text1 » ;
ajouter un champ de type « titre automatique » ;
dans le paramètre valeur de ce champ, saisir « {{bf_text}} {{bf_text1}} ».
Dans le cas d'un formulaire d'organisation de goûters, on pourrait souhaiter construire le titre à partir du prénom et de la date du goûter. On pourrait alors avoir un titre tel que : « Théo vient le 14/02/2022 ».
Dans ce cas là, on peut :
demander le prénom dans un champ texte court obligatoire dont l'identifiant serait par exemple « bf_text » ;
demander la date dans un champ date obligatoire dont l'identifiant serait par exemple « bf_date » ;
ajouter un champ de type « titre automatique » ;
dans le paramètre valeur de ce champ, saisir « {{bf_text}} vient le {{bf_date}} ».
Recommandations importantes
Assurez vous que les champs que vous allez utiliser pour construire votre titre sont bien obligatoires.
Il n'y a pas d'aide, ni de contrôle lors de la saisie du paramètre « valeur » du titre automatique. En conséquence, il vous appartient de saisir l'identifiant unique des champs correctement (accolades et identifiant unique correctement écrit).
Supprimez le champ titre du formulaire (celui dont l'identifiant unique est « bf_titre »).
Cela ne fonctionne pas avec tous les types de champs (par exemple, le contenu d'un champ zone de texte ou case à cocher peut difficilement être utilisé pour contruire un titre). Donc, faites des essais avant de demander à tout le monde de saisir.
Paramètres du type de champs « titre automatique »
Intitulé
Laissez ce paramètre en l'état.
Valeur
C'est dans ce paramètre que vous indiquez comment construire le titre.
La référence à un autre champ se fait en écrivant son identifiant unique entre doubles accolades (ex. : « {{bf_text}} ») :
deux accolades ouvrantes (« {{ »),
puis l'identifiant unique du champ,
puis deux accolades fermantes(« }} »).
Vous pouvez ajouter du texte entre les identifiants uniques des champs (espaces, tirets, etc.).
✨ Liste fiches liées
Champ de type « liste des fiches liées »
Ce type de champs permet dans le cas où on un autre formulaire est lié à celui-ci, d'afficher les fiches ainsi liées.
Ce champ a donc un comportement un peu spécial, puisque son effet n'est visible que dans la phase 3 d'affichage des résultats du formulaire. Un certain nombre de ses paramètres ne visent d'ailleurs qu'à définir le comportement dans cette phase d'affichage des résultats.
Comme tous les champs celui-ci comporte des paramètres génériques et des paramètres spécifiques.
Paramètres génériques
Ce type de champ ne reprend que peu des paramètres génériques.
Peut être lu par
Par défaut, chaque champ peut être lu par toute personne ayant le droit de visualiser une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
Peut être saisi par
Par défaut, chaque champ peut être saisi par toute personne ayant le droit de saisir une fiche du formulaire. Ce paramètre permet de modifier ce comportement pour le champ en question. On peut ainsi masquer un champ à certains utilisateurs.
Voir la liste des différentes valeurs possibles.
Paramètres spécifiques au type de champs « liste des fiches liées »
Id du formulaire lié
Ce paramètre, obligatoire, permet d'identifier le formulaire lié.
Le formulaire lié est celui dans lequel vous avez posé une question (sous forme de liste déroulante, de cases à cocher ou de boutons radio) faisant référence au formulaire courant.
On doit saisir ici l'identifiant Bazar du formulaire lié (point 5 sur cette page).
Query
Ce paramètre fait partie de ceux qui définissent le comportement dans la phase d'affichage des résultats. Ceci explique certaines similitudes. Cependant, ce qui se fait au moyen d'une interface graphique en phase 3 se fait ici avec du pseudo code.
Ce paramètre permet de n'afficher qu'une partie des fiches liées.
Vous trouverez plus d'information sur sa syntaxe ici.
Par défaut, si vous ne saisissez rien, toutes les fiches liées s'afficheront. C'est en général ce qu'on souhaite.
Params de l'action
Ce paramètre fait partie de ceux qui définissent le comportement dans la phase d'affichage des résultats. Ceci explique certaines similitudes. Cependant, ce qui se fait au moyen d'une interface graphique en phase 3 se fait ici avec du pseudo code.
Vous pouvez utiliser ce paramètres pour préciser comment afficher les résultats.
Le plus fréquemment, on veut changer l'ordre d'affichage des fiches liées.
On va, par exemple, les afficher non pas triées par titre, ce qui est le comportement par défaut, mais par ordre antechronologique (si elles comportent un champ date).
Dans cet exemple, on saisira dans ce paramètre : « champ=bf_date ordre=desc ».
« bf_date » est l'identifiant unique du champ date dans le formulaire lié.
« champ=bf_date » indique que l'on triera les fiches liées en utilisant ce champ date.
Et « ordre=desc » indique que le tri sera descendant, c'est à dire des dates les plus récentes aux dates les plus anciennes.
On notera que les deux paramètres sont séparés par un espace.
Vous trouverez plus d'information sur cette syntaxe et les différentes possiblités ici.
Par défaut, si vous ne saisissez rien, les fiches liées s'afficheront triées par ordre alphabétique croissant de leur titre.
Nombre de fiches à afficher
Ce paramètre fait partie de ceux qui définissent le comportement dans la phase d'affichage des résultats. Ceci explique certaines similitudes. Cependant, ce qui se fait au moyen d'une interface graphique en phase 3 se fait ici avec du pseudo code.
Si vous le désirez, vous pouvez préciser ici le nombre de fiches liées à afficher.
Par défaut, si vous ne saisissez rien, toutes les fiches liées s'afficheront. C'est en général ce qu'on souhaite.
Template de restitution
Ce paramètre fait partie de ceux qui définissent le comportement dans la phase d'affichage des résultats. Ceci explique certaines similitudes. Cependant, ce qui se fait au moyen d'une interface graphique en phase 3 se fait ici avec du pseudo code.
De même que dans la phase 3 on choisit la manière d'afficher les fiches, on peut déterminer ici comment montrer les fiches liées. Cependant, il n'y a pas de jolie boîte de dialogue dans laquelle choisir son template d'affichage. Il faut connaître son nom et le saisir.
Par défaut, si vous ne saisissez rien, les fiches liées s'afficheront sous forme de liste en accordéon. C'est en général ce qu'on souhaite.
Type de fiche liée (ou label du champ)
Vous devez préciser ici le type de champ utilisé dans le formulaire lié pour effectuer cette liaison.
« liste » pour une liste déroulante.
« checkbox » pour un groupe de cases à cocher.
« radio » pour un groupe de boutons radio.
✨ Ajouter des onglets dans son formulaire
Ajouter des onglets à son formulaire
Lorsqu'un formulaire comporte beaucoup de questions ou encore qu'on souhaite séparer les questions les unes des autres pour plus de clarté, on peut, avec Bazar, ajouter des onglets à son formulaire (voir l'exemple ci-contre).
Bazar met deux types de champs à disposition pour cela.
Le type de champs « navigation par onglets »
Le type de champs « passage à l'onglet suivant »
Le champ de type « navigation par onglets » permet de :
déclarer qu'on va utiliser des onglets dans ce formulaire (il n'en faut donc qu'un dans le formulaire),
préciser le nom desdits onglets.
Le champ de type « passage à l'onglet suivant » permet, quant à lui, de :
marquer la fin de chaque onglet (il en faut donc un à la fin de chaque onglet),
préciser le comportement de chaque onglet lors de la saisie et lors de l'affichage.
Champ de type « navigation par onglets »
(Clique sur l'image pour la voir en grand)
Ce champ n'est pas un vrai champ.
Il s'agit, dans les faits, d'un outil qui permet d'ajouter des onglets dans votre formulaire. Ces onglets peuvent être affichés lors de la saisie ou lors de l'affichage d'une fiche du formulaire.
Lorsque vous incorporez un tel champ dans votre formulaire, Bazar ajoute également automatiquement trois champs de type « passage à l'onglet suivant ». Vous pouvez, bien sûr, en ajouter d'autres ou en supprimer selon votre besoin. Il est cependant, très important que le nombre d'onglets soit cohérent avec la valeur des paramètres « Pour le formulaire » et « Pour la fiche » du champ « navigation par onglets ».
Paramètres du type de champs « navigation par onglets »
Pour le formulaire
Ce paramètre définit les onglets affichés lors de la saisie de la fiche.
Si vous ne saisissez rien, il n'y aura pas d'onglets lors de la saisie de la fiche.
Vous devez saisir les noms des différents onglets, dans l'ordre, et en les séparant par des virgules (« , »). Par exemple : « Présentation,Adresse,Produits,Vente ».
Pour la fiche
Ce paramètre définit les onglets affichés lors de l'affichage de la fiche.
Si vous ne saisissez rien, il n'y aura pas d'onglets lors de l'affichage de la fiche.
Vous devez saisir les noms des différents onglets, dans l'ordre, et en les séparant par des virgules (« , »). Par exemple : « Présentation,Adresse,Produits,Vente ».
Déplacer le bouton valider
Ce paramètre permet de déplacer le bouton de validation.
Couleur des boutons
Ce paramètre permet de choisir la couleur des boutons placés à la fin des onglets.
Par défaut, ils seront dans la couleur primaire du wiki. Vous avez le choix parmi la palette de couleurs du wiki.
Taille des boutons
Ce paramètre permet de réduire la taille des boutons des onglets.
Champ de type « passage à l'onglet suivant »
(Clique sur l'image pour la voir en grand)
Ce champ n'est pas un vrai champ.
Il s'agit, dans les faits, d'un outil qui permet délimiter un onglet en en marquant la fin tout en précisant quand cet onglet doit être affiché (saisie, affichage).
Lorsque vous incorporez un tel champ dans votre formulaire, Bazar comprend qu'il doit terminer, à l'emplacement du champ, l'onglet en cours.
Paramètres du type de champs « passage à l'onglet suivant »
Pour le formulaire
Ce paramètre définit si l'onglet est affiché lors de la saisie de la fiche.
Par défaut, l'onglet est affiché lors de la saisie de la fiche.
Attention à être cohérent avec ce que vous avez saisi pour le paramètre « Pour le formulaire » du champ de type « navigation par onglets ».
Pour la fiche
Ce paramètre définit si l'onglet est affiché lors de l'affichage de la fiche.
Par défaut, l'onglet n'apparaît pas lors de l'affichage de la fiche.
Attention à être cohérent avec ce que vous avez saisi pour le paramètre « Pour la fiche » du champ de type « navigation par onglets ».
✨ Le code derrière
Le code derrière les champs Bazar
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 :
à 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.*
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.
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 ;
Il arrive que dans un formulaire on souhaite afficher certaines questions en fonction de la réponse apportée à une des questions précédentes.
Cʼest ce qui se passe notamment lorsque lʼutilisateur répond « autre » à une liste déroulante ou à des cases à cocher, et quʼon lui propose alors un champ texte pour préciser (ce champ texte nʼapparaissant que dans ce cas). La question conditionnelle fait donc suite à une question de type Liste (Sélectionner), Checkbox (cases à cocher) ou Radio (Boutons radio).
Illustrations
https://boyer.earth/yeswiki/?SaisieParticipant (répondez « oui » à lʼune ou lʼautre des deux questions de la section intitulée « Votre projet support » pour voir apparaître de nouvelles questions).
Lorsque vous insérez un « Affichage conditionnel » dans votre formulaire, Bazar y crée deux champs.
Le premier, intitulé « Condition »,
Le second intitulé « Fin de condition ».
Ce que vous devez faire :
placer, entre le champ « Condition » et le champ « Fin de condition », le ou les champs que vous souhaitez faire apparaître de manière conditionnelle ;
préciser dans le champ « Condition », la condition d'apparition de ce ou ces champs ;
laisser le champ « Fin de condition » en lʼétat.
Remarque 1 — Un couple de champs « Affichage conditionnel » (« Condition » et « Fin de condition ») définit une seule condition (même si elle peut complexe). Si vous souhaitez obtenir différents comportements en fonction de différentes conditions, il vous faudra insérer et définir autant dʼaffichages conditionnels que de conditions à remplir. Remarque 2 — Il peut arriver, dans certains contextes (formulaire long ou comportant de nombreux champs de type « Custom HTML »), que le champ « Fin de condition » apparaisse sous le nom de « Custom HTML ». Si cʼest le cas, vérifiez juste que son contenu est bien le suivant.
</div><!-- Fin de condition--> » dans « Contenu lors de la saisie
Champ de type « condition »
(Clique sur l'image pour la voir en plus grand)
Ce champ n'est pas un vrai champ.
Il s'agit, dans les faits, d'un outil qui permet d'exprimer la condition qui sera nécessaire pour montrer tout ce qui se trouve entre « Condition » et « Fin de condition ».
Paramètres du type de champs « condition »
Pour que cela fonctionne (et ait du sens), la condition doit faire référence à une ou plusieurs valeurs dʼun ou plusieurs champs de type énumération : Liste (Sélectionner), Checkbox (cases à cocher) ou Radio (Boutons radio).
Condition
Ce paramètre définit la condition à respecter pour afficher les champs qui suivent (jusquʼà « Fin de condition »).
Les règles de syntaxe de ce paramètre sont expliquées dans lʼencadré qui se trouve au dessus.
Voici quelques exemples pour illustrer cette syntaxe. Rappel sur lʼidentifiant unique
On suppose quʼon dispose de :
un champ de type « Sélectionner » (ou radio ou checkbox) dont l'identifiant unique est bf_trucmuche
une liste listeConfiture sur laquelle s'appuie ce champ (les valeurs étant : {1, figues}, {2, gingembre-tomates vertes}, … ,{5, autre}).
Pour afficher si…
valeur du paramètre
on a répondu « autre »
bf_Confiture==5
on nʼa pas répondu « figues »
bf_Confiture!=1
on nʼa répondu ni « figues », ni « autre »
bf_Confiture!=1 and bf_Confiture!=5
on nʼa pas répondu du tout
bf_Confiture is empty
on a répondu « figues » ou « gingembre-tomates vertes » (pareil quʼen dessous)
bf_Confiture==1 or bf_Confiture==2
on a répondu « figues » ou « gingembre-tomates vertes » (pareil quʼau dessus)
bf_Confiture in [1,2]
dans le cas dʼune checkbox, on a répondu « figues » et « gingembre-tomates vertes »
bf_Confiture==[1,2]
dans le cas dʼune checkbox, moins de trois cases ont été cochées
bf_Confiture|length < 3
dans le cas dʼune checkbox, au moins deux cases ont été cochées mais pas la case « autre »
Lectures Bazar : Permettre l'affichage des résultats (étape 3)
Index
Lectures Bazar : Permettre l'affichage des résultats (étape 3)
Bazar – Afficher les résultats
Vous avez créé votre formulaire, permis la saisie des fiches. Nous allons maintenant afficher les résultats.
Remarques préliminaires
Pas de fiches, pas d'affichage
Bazar offre plusieurs manières de présenter les résultats. Mais, dans la plupart des cas, s'il n'y a pas de résultats (pas de fiches), vous ne verrez rien. Donc pour s'assurer que tout fonctionne comme vous le souhaitez, il est toujours préférable de saisir quelques fiches.
Cartographie
Pour afficher les résultats sous la forme d'une carte, il est impératif que vous ayez un champ de type « géolocalisation de l'adresse ». Les coordonnées géographiques sont en effet indispensables.
Calendrier et agenda
De même pas de calendrier ni d'agenda sans champ de type date.
Image
Quant à tous les affichages qui nécessitent une image…
Facettes
Vous ne pourrez mettre en œuvre des facettes dans votre affichage que si votre formulaire utilise au moins une liste (champs de type « sélectionner », « groupe de cases à cocher » ou « groupe de boutons radio »).
Comment faire
1 –Vous pouvez afficher les résultats sur toute page où cela vous semble cohérent. Donc, vous vous rendez sur la page et à l'endroit où vous voulez que vos résultats soient affichés.
2 – Cliquez sur le bouton « Composants », puis sur « Afficher les données d'un formulaire ».
3 – Dans la boîte de dialogue qui s'ouvre, cliquez sur la zone intitulée « Choisissez un formulaire ».
4 – Choix du formulaire – Dans la liste de formulaires qui s'affiche, choisissez celui dont vous souhaitez afficher les résultats. 5 – Choix du type d'affichage – Puis, cliquez sur la zone intitulée « Sous quelle forme voulez-vous afficher les données ? ». 6 – Dans la liste qui s'affiche, choisissez le type d'affichage que vous souhaitez (cf. « Remarques préliminaires »).
Une visualisation des résultats du formulaire s'affiche en partie dans la boîte de dialogue. En dessous de cette vue, se trouve une section dans laquelle vous trouverez toutes sortes de merveilles. Nous allons en développer deux.
Ajout d'une facette (optionnel) 7 – Cliquez sur le bouton « Ajouter une facette », vous ferez apparaître deux zones de saisie. Cliquez sur la flèche verticale qui se trouve à gauche de ces zones de saisie.
8 – Choisissez le champ sur lequel vous voulez que la facette fonctionne.
9 – La prévisualisation de l'affichage se modifie en conséquence dans la boîte de dialogue.
Modifier l'ordre d'affichage des fiches (optionnel) 10 – Par défaut, Bazar montre les fiches dans l'ordre alphabétique croissant de leur titre. Vous pouvez modifier ce comportement.
Dans la colonne la plus à droite de cette section, cliquez sur le champ « Champ pour le tri ».
11 – Choisissez le champ sur lequel vous voulez trier l'affichage de vos fiches.
12 – En dessous de ce champ, cliquez sur le champ « Ordre de classement ».
13 – Choisissez l'ordre de tri que vous souhaitez (croissant ou décroissant).
14 – Insertion dans la page – Cliquez sur le bouton insérer dans la page. Cela donne quelque chose comme ceci.
Lectures Bazar : Permettre la saisie des fiches (étape 2)
Index
Lectures Bazar : Permettre la saisie des fiches (étape 2)
Bazar – Permettre la saisie des fiches
Vous avez à présent créé votre formulaire. Il vous faut à présent en permettre la saisie aux utilisateurs.
Voici une méthode pas à pas :
1 – Créer une page qui sera uniquement destinée à la saisie des fiches de ce formulaire. Par exemple, pour permettre la saisie des fiches de mon formulaire d'organisation de gouter, je vais créer une page « SaisieConvive ».
2 – Cliquez sur le bouton « Composants », puis sur « Afficher un formulaire de création de fiche ».
3 – Dans la boîte de dialogue qui s'ouvre, cliquez sur la zone intitulée « Choisissez un formulaire ».
4 – Dans la liste de formulaires qui s'affiche, choisir celui pour lequel vous souhaitez créer une page de saisie.
5 – Optionnel – Une visualisation du formulaire s'affiche en partie dans la boîte dialogue. en dessous de cette vue, se trouve une section « paramètres ».
Changer la page vers laquelle l'utilisateur est rédirigé après la validation de sa fiche
Si vous cochez « paramètres avancés », vous ferez apparaître une zone vous permettant d'indiquer dans quelle page vous souhaitez que l'utilisateur se retrouve après avoir validé la saisie de sa fiche.
Le comportement par défaut est que l'utilisateur reste sur la page où il était (dans notre exemple « SaisieConvive »).
6 – Cliquez sur le bouton insérer dans la page. Cela donne ceci.
M2.1-a Lectures : Les enjeux du graphisme et de l'ergonomie
Index
M2.1-a Lectures : Les enjeux du graphisme et de l'ergonomie
Vous avez structuré votre gare centrale, 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 reconnaisse l'identité du groupe et trouve ses marques rapidement. Il s'agit d'imaginer les utilisateurs qui visitent notre site et de leur porter une attention particulière.
Retenons trois composantes:
- L’apparence : poser 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.
Une bonne ergonomie permet de guider les visiteurs
Préalable : répondre aux besoins du collectif
Portraits d'utilisateurs
Animation du collectif
Lorsqu'on parle d'ergonomie, 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...
Futur membre
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
Observateur
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
Membre de la communauté
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
Moteur de la communauté
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
Règles d'écriture
La chose la plus importante sur votre site est son contenu. Les textes doivent être rédigés avec soin et être correctement calibrés afin de rester digestes.
Comment une page web est-elle parcourue ?
A l’ecran on lit 25% moins vite que sur papier, seuls 20% des internautes lisent mot à mot
Le sens de lecture n’est pas figé à l’inverse de celui d’une phrase
Si la page contient beaucoup de texte, le parcours visuel pour l'internaute est le plus souvent en forme de F. Le lecteur ne lit que les 1ers mots, le 1er tiers de la phrase doit contenir les informations principales. Les titres sont 5 fois plus lus que le reste.
Si la page est composée d'éléments plus variées, images, textes, pictos : le schéma de lecture sera en forme de Z : avec des points d'attention forts en haut à droite puis en bas à droite (à la fin du Z)
La ligne de flottaison est une barrière pour le contenu, cela signifie que les principales informations devront trouver une place dans la partie haute du site, ce qui s'affiche avant d'avoir commencé à scroller.
Quelques points de repères pour vous aider à préparer vos contenus
Titre
Entre 5 et 15 mots : l'idéal est 12 mots qui permet 70% de mémorisation.
Au delà de 15 mots on ne mémorisera pas plus de 50% du message : plus vous serez concis, plus le message sera clair !
Introduction
Entre 50 et 100 mots
Elle doit contenir :
une phrase d'accroche
définir le sujet et son contexte
répondre aux principales interrogations : Qui, Quoi, Quand, Comment, Pourquoi ?
Les paragraphes
un titre explicite
puis 100 à 150 mots pour donner des informations précises sur un aspect du projet
Des textes écrits sur une trop grande largeur sont plus fatiguants à lire. La meilleure lisibilité est obtenue pour une largeur de ligne entre 50 et 75 caractères.
La structure de votre page contribuera à améliorer le confort de lecture en intégrant des colonnes, des illustrations, des espaces vides.
Look - Personnaliser le thème: couleurs, police, squelette
Pour accéder aux options graphiques : rendez-vous sur la page LookWiki via "Gestion du site", puis bouton "Personnaliser le thème de ce wiki".
Au préalable :
- ces opérations sont réservées à l'administrateur du site, pensez à vous connecter
- si vous souhaitez modifier la police : installer l'extension Fontautoinstall
L'architecture du site ou squelette
Sur la page LookWiki vous avez la possibilité de choisir le squelette parmi la liste suivante :
- 1col.tpl.html (le standard : barre de menu en haut puis contenu de page en pleine largeur puis footer)
- 1 col.vertical-menu.tpl.html : déplace le menu principal vers une colonne gauche
- 2cols-left.tpl.html permet d'ajouter une colonne à gauche avec des informations qui pourront être communes à plusieurs pages (par exemple : un sous menu ou des coordonnées , ...)
- 2cols-right.tpl.html permet d'ajouter une colonne à droite avec des informations qui pourront être communes à plusieurs pages (par exemple : la liste des prochains évènements, les dernières actus, ...)
- full-page exploite l'écran en pleine largeur (utile quand on intègre un autre service comme un pad en iframe)
La configuration graphique
Le bouton Créer une nouvelle configuration graphique permet d'accéder au choix de couleurs et polices. Cette configuration graphique, aussi appelée preset, pourra être appliquée à l'ensemble du site ou à une page individuellement.
Personnaliser les couleurs
En créant "une nouvelle configuration graphique", vous avez la possibilité de définir :
une couleur primaire : c'est votre couleur dominante, elle sera utilisée par défaut pour la barre de menu ainsi que pour les titres et les liens. N'utilisez la couleur dominante de votre palette que sur les éléments essentiel de votre site ( appel à l'action, bouton, liens ...)
2 couleurs secondaires peu visibles par defaut mais vous pourrez facilement les utiliser dans vos éléments de mise en forme. La couleur secondaire 2 est utilisée pour l'encadré "texte mis en valeur".
la couleur de votre texte et celle du fond - si vous les modifiez, veillez à bien respecter le contraste pour assurer la lisibilité des contenus.
Comment choisir mes couleurs ?
Si vous voulez une proposition rapide en mode je jette les dés
Si vous n'avez pas de charte graphique, randoma11y peut vous aider à déterminer 2 couleurs bien contrastées qui auront le meilleur effet en utilisant des sections avec un fond de couleur !
Si vous avez déjà un logo ou une couleur précise en tête Exemple de palette généré sur coolors.co
Vous n'avez pas de charte graphique et vous avez l'impression que les couleurs que vous choisissez sont mal assorties ? Voici un outil en ligne pour vous permettre de trouver facilement des couleurs assorties :
Plusieurs manières de générer une palette :
générer la palette à partir d'une image (votre logo ou une photo dont les tons vous plaisent) palette
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)
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 grâce au cadenas puis continuer à explorer
Une police donne du caractère à votre contenu - il fait partie des éléments de style. La police des titres devra accrocher l'oeil (par sa taille, sa couleur, et par la forme des lettres), la police du corps de texte doit avant tout permettre de faciliter la lecture.
Recommandations
- Pour les textes optez pour une police sans empattement (sans serif) : plus épurées, elles offrent un meilleur confort de lecture à l'écran.
Parmi les web font les plus populaires : Arial, Open Sans, Montserrat, Lato, Roboto.
- Pour les titres il est tout à fait possible de rester sur le même police que les textes.
Si vous souhaitez combiner avec une autre police, vous pouvez également explorer :
les polices à empattement (avec serif) : effet imprimerie, crédibilité à utiliser plutot pour les supports papiers (Times New Roman et Garamond sont des caractères issus du monde de l'imprimerie, s'ils ont traversé les époques et sont appréciés pour leur lisibilité) - leur utilisation pour les titres peut être envisagée pour donner un caractère historique (Voir le site du journal Le Monde par exemple)
les polices manuscrite (handwriting) : coté humain et artisanal, mais à garder pour quelques phrases à mettre en valeur ou des titres, difficulté de lisibilité
Appliquer le style à tout le site ou à certaines pages
Une fois votre configuration graphique sauvegardée vous pouvez :
l'appliquer à tout le site - ce sera votre thème par défaut, toutes les pages auront le même look
l'appliquer à un groupe de page via Gestion du site /Look : vous avez la possibilité de sélectionner quelques pages puis d'appliquer un style différent pour ces pages
l'appliquer à une page en particulier
Cas d'usage
Il arrive parfois d'avoir envie de différencier 2 parties du site, par exemple si une partie est publique et l'autre partie est réservée à des groupes de travail (en mode intranet). Il est possible de définir 2 jeux de couleurs (2 configurations graphiques) et de les appliquer à chaque page : lorsque vous éditez une page de votre wiki, vous trouverez un bouton "theme" en bas de page qui vous permettra d'appliquer spécifiquement à cette page le jeu de couleur souhaité.
Pour allez plus loin : initiation css
Le CSS est le langage qui permet de définir avec précision le style de chaque élément de votre wiki. Vous avez la possibilité d'écrire vos propres règles sur une page spéciale : PageCSS, accessible depuis Gestion du site /look.
Cette page contient le code permettant de modifier les couleurs de certains éléments de base.
Les bases du code css
Attention lorsque vous modifiez PageCSS, vous touchez directement à du code, chaque caractère a son importance ! Un caractère manquant peut empêcher la bonne interprétation du reste du code et causer des problèmes d'affichage.
- Les caractères /* et */ signalent que l'information est en commentaire, ce qui est au milieu ne sera pas traité. A l'inverse pour activer une personnalisation, supprimez les / en début et / en fin de ligne
- les variables de couleurs sont déclarées dans une partie qui commence par :root{ et se termine par }, si vous personnalisez alors enlevez également /* */ sur la ligne :root{ et la ligne } de fin
- chaque intruction CSS doit terminer par un point virgule ;
- les noms de variables commencent toujours par --
Modifier les couleurs des titres
Les couleurs de vos titres dépendent directement de votre palette de couleur :
titre 1 : couleur primaire
titre 1
titre 2 : couleur primaire
titre 2
titre 3: couleur secondaire 1
titre 3
titre 4 : couleur secondaire 2
titre 4
Voici le code à placer dans PageCss, à noter que les variables var(--primary-color) peuvent être modifiées par des couleurs au format hexadecimal "#3cab3b"
De la même manière,ce code doit être placé entre :root{ et }
/* couleur de la barre de menu */
--navbar-bg-color: var(--neutral-light-color);
--navbar-text-color: var(--primary-color);
--navbar-link-color: var(--primary-color);
--navbar-link-bg-color: transparent;
--navbar-link-hover-color: var(--secondary-color-1);
--navbar-link-bg-hover-color: transparent;
--navbar-shadow: 0px 0px 20px #0000000f;
Bonus - 9 sites pour trouver de belles illustrations gratuites
Quelques ressources pour trouvez des illustrations :
la bibliothèque FontAwesome est intégrée à Yeswiki - vous pouvez ajouter les icones dans vos textes ou vos titres en copiant le code html
""<i class="fa fa-puzzle-piece"></i>""
nounproject beaucoup d'icones disponibles avec la possibilité de choisir la couleur, et la couleur de fond. Téléchargez l'icone en format png et insérez dans le wiki comme une image - L'utilisation de ce site nécessite de créer un compte;
undraw : des illustrations entièrement libres de droit avec la possibilité de les décliner selon votre couleur principale
https://www.manypixels.co/gallery - illustrations utilisables gratuitement (y compris usage commercial)sans créditer - téléchargeables en png ou en svg - possibilité de changer les couleurs
https://blush.design/ : une banque d'illustrations avec des styles dessinés, on peut créer des avatar en choisissant la position, le style vestimentaire des personnages, après pour personnaliser les couleurs il faut prendre un abonnement
Freepik grosse banque d'images avec des images gratuites (mais nécessite de citer la source) et des images payantes. Freepik permet de trouver aussi bien des photos que des illustrations type dessin ou aquarelle qui peuvent être intéressantes pour apporter douceur et convivialité à votre site.
Unsplash - superbes photos gratuites (nécessite de citer la source). Les mots clés dans la barre de recherche doivent être de préférence en anglais pour de meilleurs résultats. Essayez par exemple de faire une recherche par couleur avec le mot clé "Abstract"
Important
Pensez à redimensionner vos images avant de les intégrer pour ne pas alourdir inutilement la page et ralentir le site. En effet, il n'est pas rare d'avoir des photos de 5000px de large alors qu'en pleine largeur 1920px seront suffisant et sur une colonne avec un texte à coté prévoir 600px de large. (Dans l'explorateur de fichiers, la dimension est affichée lorsqu'on survole le nom d'un fichier image) Comment redimensionner une image ?
Les gares centrales sont très souvent denses en informations : non seulement elles sont la mémoire du collectif dans le temps mais en plus elles doivent répondre aux questions d'une multitude d'acteurs du collectif. C'est pourquoi il est nécessaire de faciliter le parcours utilisateur. N'importe quel utilisateur doit pouvoir trouver l'information utile en 3 clics. Il est donc primordial d'anticiper les besoins des utilisateurs et d'organiser votre wiki de manière à suggérer où aller pour accomplir une action comme "s'inscrire" "en savoir plus" "afficher la carte". Votre boite à outils se compose de la barre de menu, mais aussi des liens, des boutons, des images cliquables...
Vous trouverez ici un aperçu des composants de mise en forme utilisables dans Yeswiki.
Menu principal
La navigation intuitive est la clé si vous voulez vous assurer que les gens peuvent trouver ce qu’ils cherchent. Passer d’un point A à un point B devrait être aussi simple que possible.
Vous pouvez éditer votre menu principal (appelé menu haut dans Yeswiki) via le menu gestion du site.
Ne pas exéder 7 items différents dans votre menu principal.
Si votre menu est trop chargé, il est possible de créer un menu-déroulant en décalant d'un espace le lien des sous menus
Georges A. Miller, un psychologue cognitif de l’Université de Princeton a développé une théorie dans les années 50 :
✓ Selon cette théorie, les gens sont seulement capables de conserver en mémoire environ 7 unités de nouvelles informations « plus ou moins 2 », donc de 5 à 9 informations en mémoire à court terme.
✓ Actuellement ces estimations sont revues à la baisse.
Icones et images
Icones et images
Les illustrations ont plusieurs vocations :
elles permettent de structurer le texte - un bloc de texte en pleine largeur sera fatiguant pour l'oeil et aura moins de chance d'être lu. Une image d'illustration permet de réduire la largeur de la colonne;
elles viennent capter l'attention - l'image illustre le paragraphe, elle attire l'oeil pour que l'utilisateur porte son attention au texte
elles représentent l'élément principal du style qui se dégage de votre site - et par extension l'image de marque de votre structure.
Télécharger le fichier photo_coeur_600px.jpgL'ajout d'une image dans Yeswiki permet de choisir l'alignement (gauche, droite, centre) ainsi que la dimension de l'image, le texte de remplacement (utile notamment pour les malvoyants : pour indiquer le contenu des images, l'attribut Alt leur est lu, au même titre que le reste de votre texte.).
Dans un 2eme temps vous pouvez modifier le composant "attach" et bénéficier de nouvelles options : essayez notamment les effets izmir dans les paramètres avancés, il permet d'afficher le texte "Description" sur la totalité de la hauteur de l'image lorsque l'utilisateur survole l'image...
Boutons
Bouton
Un bouton est un élément visuel coloré qui permet de mettre en valeur un lien. Il se détache du contenu par son fond coloré et l'interactivité est mise en valeur par un léger changement de couleur lorsque l'utilisateur le survole avec la souris.
La dernière version de Yeswiki ("Doryphore") présente une nouveauté dans l'interface d'édition qui facilite grandement l'utilisation des éléments de mise en forme : les composants.
Une interface permet maintenant d'insérer facilement des boutons (et autres éléments de mise en forme que nous verrons plus loin).
Si vous souhaitez modifier un paramètre de votre bouton pour utiliser une autre couleur par exemple, il est possible d'éditer le composant en cliquant sur la ligne dans l'éditeur, un crayon apparait à gauche, il permet de réafficher les paramètres du bouton. (voir demo ci-dessous)
Pour aller plus loin dans la mise en forme, vous pouvez cocher la case paramètres avancés
Paramètres avancés disponibles pour les boutons
Ouvrir dans une pop-up - permet à l'utilisateur de rester sur la même page
ouvrir dans un nouvel onglet - à n'utiliser que si le lien renvoie vers un autre site, sinon la convention est de garder le même onglet pour les liens internes
taille du bouton : petit moyen grand
position du bouton : à droite ou sur toute la largeur (j'utilise l'option "sur toute la largeur" en particulier dans les colonnes, cela permet d'avoir des boutons de la meme taille meme si le texte est de taille différente)
afficher sous forme de lien - et utiliser quand même les options telles que icone ou ouverture pop up
masquer le bouton si l'utilisateur n'a pas accès à la page cible (par exemple le bouton renvoie vers une page réservé aux admins, on peut masquer le bouton aux autres utilisateurs)
00:00 / 00:00
Les étiquettes
Nouveauté
Les étiquettes sont disponibles dans les composants de mise en forme. C'est une petite indication qui attire l'oeil. Elle s'adapte bien à un texte court pour donner un qualificatif à une rubrique.
Paramètre disponible
couleur
Les 3 couleurs que vous avez choisi dans votre configuration graphique sont disponible pour les étiquettes (primaire, secondaire 1 et secondaire 2).
4 couleurs supplémentaires porteuse de sens, comme leur nom l'indique :
info, la couleur de l'étiquette info est une déclinaison plus claire de votre couleur primaire, elle offre un balisage visible mais se fond dans le contenu
success, un vert synonyme d'un événenement positif ou d' "objectif validé"
warning, pour un point de vigilance - une échéance proche
danger, pour un point de désaccord ou un point urgent
Les onglets
Les onglets permettent de lier un groupe de pages. Il peut être considéré comme un sous-menu. Mais à l'inverse du menu déroulant sur lequel il faut revenir cliquer pour voir les options, le sous-menu en onglets reste visible pour l'utilisateur, il constitue un bon point de repère.
Paramètres
Les onglets peuvent être affichés en vertical - c'est à dire à gauche de votre contenu....
Les encadrés
Mon texte accordeon
Ce type d'encadrés ou d'accordéon permet d'afficher / masquer un texte. Il est disponible sous le nom "Encadré" dans les composants. L'action qui en découle s'appelle panel et se décline sous différentes formes : dépliée ou pas et dans les différentes couleurs de base de votre thème : Primary Secondary-1 ...
Cette mise en forme s'adapte particulièrement bien pour les FAQ (Foire aux questions)
Paramètres
Type :
- simple encadré
- accordeon ouvert
- accordéon fermé Couleur : comme pour les étiquettes un jeu de couleurs correspondant à votre configuration graphique est disponible. Essayer d'adopter une couleur pour un type d'information.
Les sections
Les sections (ou bandeau)
La section permet de définir un style pour un des blocs de votre page : un simple fond de couleur ou un bandeau avec une image de fond
Un fond de couleur avec votre couleur primaire mettra en avant votre texte.
Un fond en pleine largeur avec une image crée une séparation fluide entre 2 parties qui traitent de sujets différents (une image en pleine largeur doit avoir une dimension de 1920px de large - sa hauteur dépendra de la taille du texte contenu dans la section, si l'image est juste décorative vous devrez spécifier une hauteur à la section )
Paramètres
texture : permet de choisir si un utilise une couleur unie ou des motifs en fond de section
forme : la section peut aussi prendre une forme de blob un arrondi asymétrique
tonalité : permet de jouer sur les contraste entre le texte et le fond pour assurer une bonne lisibilité
afficher sur toute la largeur - permet de couvrir toute la largeur de l'écran (supprime les marges)
les options animation pour mettre en mouvement une partie du contenu
Nouveauté une option pour masquer/afficher une section aux utilisateurs non connectés
L'option "Ne pas mettre de conteneur" est parfois utile si vous combinez plusieurs types de composants (section et colonnes par exemple) et que votre texte déborde
Les colonnes
Les colonnes
Structurer le contenu
Le composant colonne vous permet d'insérer le code wiki correspondant à 4 colonnes. L'écran étant divisable en 12 colonnes, à vous de le moduler la taille et le nombre de colonne pour obtenir la structure souhaitée.
Paramètres
Aucun paramètre proposés à ce jour.
Le nombre de colonnes et leur taille sont à adapter directement dans le code qui est proposé de base pour 4 colonnes.
Ci-dessous un exemple pour 2 colonnes 1/3 (size 4) + 2/3 (size 8)
Yeswiki a beau être très ouvert lors de son installation (ce qui oblige à se poser quelques questions que nous aborderons lors du webinaire), 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 de tout ou partie du wiki à 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)
de garder certaines parties de votre wiki cachée (mais pas réellement fermées en accès)
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.
=> plus d'infos sur https://yeswiki.net/?DocumentationIdentification
Une fois connecté, vous ne possédez pas encore beaucoup de droits (sauf si l'administrateur du wiki vous en a attribués) à 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
Ah oui j'oubliais, j'ai compilé des trucs et astuces très pratique sur cette page, vous allez aimer !
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éé
M2.2-b Lectures : Gérer les droits d'accès en masse
Index
M2.2-b Lectures : Gérer les droits d'accès en masse
Gestion des droits par utilisateur
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.
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
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)
en mode avancé
via les champs classiques (ceux qu'on retrouve quand on édite les droits d'une page seule)
Pour s'approprier ces aspects techniques, rien de mieux que de faire vous-mêmes ;-)
Voici une PageBacASable pour faire vos essais. Nous vous invitons à jouer à :
modifier la page : ajouter du texte, le mettre en forme, ajouter des fichiers (image et texte), faire des liens web
Mise en pratique : tester Bazar avec les formulaires pré-installés
Index
Mise en pratique : tester Bazar avec les formulaires pré-installés
A l'installation du Wiki, il comprend déjà quelques formulaires pour montrer et s'inspirer.
Dans votre page créée pour vous exercer au module précédent, vous allez jouer avec 2 fonctionnalités du bouton "Composants" :
"Afficher un formulaire de création de fiche" (étape 2 décrite en intro)
"Afficher les données d'un formulaire" (étape 3 décrite en intro)
Nous verrons dans les lectures suivantes comment personnaliser ces formulaires ou en créer de nouveau.
Concrètement :
Dans ta page, affiche les données du formulaire "Annuaire"
passe en mode édition
bouton Composants
"Afficher les données d'un formulaire"
Dans cette même-page, ajoute un bouton ou un lien vers une nouvelle page qui donnera accès au formulaire (pour ajouter des fiches Annuaire)
Dans cette nouvelle page, affiche le formulaire Annuaire
Format : Visio de 2h le vendredi 13 janvier 2023 de 13h30 à 15h30 sur https://visio.animacoop.net/b/rom-ket-nme-bwy Animation : Magalie, Louise Présent.es : Karine, Serge, Yannick, Cédric, Marie-Laure, Claire, Damien, Reynald, Sandrine
Objectif : prioriser les fonctionnalités de la gare centrale Ordre du jour :
synthèse et priorisation des besoins recueillis (sondage + visio du 28/11)
les différents rôles autour de la gare centrale
Déroulé
Accueil avec un brise-glace : "Qu'est-ce qu'on vous souhaite pour 2023 ? qu'est-ce que vous souhaitez à l'OF ?"
Rappel de la démarche avec visite guidée de la gare centrale d'aujourd'hui et objectifs de cette visio
Chantier "analyse des besoins et leur priorisation"
Visio de 2h le mardi 31 janvier 2023 de 10h à 12h
sur https://visio.animacoop.net/b/rom-ket-nme-bwy
Présent.es : Damien, Sandrine, Cédric S'ortie, Héloïse, Marie-Laure, Karine C-F, Valeria, Yannick, Louise, Magalie
Excusé.es : Charlotte, Blandine, Claire
Ordre du jour / CR:
