Et pour la modération ?

Modérer les contenus de votre wiki

Vous souhaitez ouvrir votre wiki à la contribution (bravo!), tout en gardant en regard sur ce qui sera publié : ce tuto est fait pour vous.

Attention : Risque d'usine à gaz !

La question de la modération arrive souvent comme un réflexe, une habitude de vouloir contrôler. Elle est parfois une bonne idée mais il faut avoir conscience qu'elle va alourdir l'administration et l'animation de votre wiki. C'est clairement une tâche en plus : êtes vous sûr·es de pouvoir l'assumer dans la durée ? que le jeu en vaut la chandelle ?
Quel est le plus grand risque sur un wiki collaboratif ? Que personne n'y contribue ! Soit parce que le wiki est peu connu ou accessible, soit parce que les gens n'osent pas. Donc avoir besoin de modération est une question qui peut se poser dans un second temps, quand le succès est au RDV ;-)
Cette question s'articule avec celle de gestion de spams qui est traitée par ici.

Il y a 2 manières différentes d'aborder la modération :

• a posteriori (vous verrez qu'elle a notre préférence ;-) )
• a priori

Modération a posteriori

Plus sympa pour les contributeurs et plus légère pour les modérateurs, nous recommandons la modération a posteriori. Ça signifie que le contributeur va jusqu’au bout de sa publication, mais un modérateur est informé de cette publication pour venir la relire, vérifier. En cas de problème (publication inadaptée, incomplète …), le modérateur peut donc rapidement rectifier (corriger ou supprimer).

Comment faire ?

Il y a 2 manières de faire pour "abonner" un modérateur aux nouveautés du wiki :

Avec {{mailperiod }}

• Préparez une page dédiée aux modérateurs, accessible depuis un endroit un peu caché (peut-être la roue crantée)
• Y mettre le code du formulaire à surveiller avec le code {{mailperiod }}, ça va afficher une ligne comme ceci

L'avantage de cette méthode c'est que les nouveaux modérateurs seront autonomes pour venir s'abonner ici.

Avec un champ mail caché

• dans le formulaire de vos ressources vous ajoutez un champ mail
  • qui ne sera visible des admins
  • avec l'adresse saisie en valeur par défaut
  • et répondre "oui" à "envoyer le contenu de la fiche à cet email"

Ca donne ça (cliquer pour voir l'image en grand) :

Modération a priori

Un modération a priori opère un contrôle plus stricte, amont d’une publication.
Plusieurs inconvénients :

• • le contributeur ne voit pas sa publication s’ajouter en direct
  • ◦ c’est moins fort en termes de valorisation
  • ◦ il peut croire à une erreur et refaire la publication, vous vous retrouvez alors avec des doublons et un contributeur agacé
• • c’est plus exigeant pour la modérateur qui doit valider chaque ressource pour la rendre publique

Comment faire ?

• • Créer une liste avec les options oui et non
• • Ajouter à votre formulaire ressource une question de type Liste déroulante
  • ◦ appeler la liste oui/non
  • ◦ mettre non en valeur par défaut
  • ◦ ne rendre la question visible et modifiable que des admins (ou d’un groupe modérateur si vous en avez configuré un)

Ca donne ça (cliquer pour voir l'image en grand):

• • Puis dans l’affichage de vos ressources, utilisez le query=oui pour n’afficher que les ressources qui ont été validées ( > Voir la doc sur query)
• • Il est recommandé de prévoir un espace pour les modérateurs configuré à l’inverse : toutes les ressources qui n’ont PAS été validé, donc avec le query=non

Gestion des données personnelles (RGPD)

Réglementation Générale sur la Protection des Données personnelles RGPD

Votre wiki gère des données nominatives ? Quelques questions à se poser

Des données sensibles ont-elles été collectées ?

quels sont les droits d'accès appliqués ?

quels sont les droits d'écriture ?

une page "Mes contenus" est-elle accesible ?

êtes vous amenés à transmettre les données à une autre structure ?

Les rituels pour animer votre wiki

Des rituels par publics

L'équipe de pilotage

Dans le contenu sur les tâches, vous avez lu plusieurs fois ce "rituel de remise à plat" : qu'est-ce qu'on entend par là ?

• une réunion d'une fréquence à déterminée : peut-être tous les 6 mois les 2 premières années puis tous les ans ensuite, à vous de voir
• y participent les personnes qui ont rôle dans l'animation et administration du wiki : invitez le plus largement possible, les personnes qui y voient un interet devraient être les bienvenues
• retours sur le wiki :
  • ce dont les présent·es peuvent témoigner
  • ce qui a été entendu d'autres utilisateurs
  • les propositions d'évolutions que ça évoque
• retours sur les rôles :
  • expression des joies et difficultés rencontrées par celles et ceux qui occupaient les rôles
  • propositions d'évolution des rôles et tâches
  • éventuellement repartir les rôles
• prises de décisions sur les prochains petits pas :
  • modifications du wiki, par qui et avant quelle date
  • autres décisions liées aux rôles et tâches
  • prochain RDV
• un compte-rendu de cette réunion permettra de garder trace pour le rituel suivant, voire d'exposer sur le wiki l'historique de la plateforme

Les objectifs de ce temps sont multiples :

• faire vivre le wiki, l'améliorer
• remobiliser l'équipe, prendre soi des personnes impliquées. C'est pourquoi vous devrez veiller à mentionner les points négatifs ET les points positifs (même ce qui parait anodin ou normal)
• pouvoir témoigner de la vie de ce type de plateforme, inspirer d'autres collectifs

Les contributeurs

• par quel moyen vous vous adressez à eux ?
• à quelle fréquence ?
• avec quelles questions ?
• des distinctions sont-elles à faire selon des typologies de contributeurs ?

Un public plus large

La communauté des plateformes ressources

Et pourquoi échanger aussi avec celles et ceux qui animent aussi une plateforme ressources (avec YesWiki ou pas) ? Ce pourrait être un rituel de plus, une réunion annuelle pour s'inspirer, se soutenir, se connaitre ;-)

> Voir des ressources sur les rituels dans la vie d'un collectif

• Ritualiser pour se sentir en vie
• Construire, simplement, des rituels de groupe

Les tâches pour animer votre wiki

Les tâches critiques : indispensables au fonctionnement du wiki

• renouveller/payer le nom de domaine et l'hébergement
• faire les mises à jour de votre wiki : roue crantée > gestion du site > MAJ/Extensions
• vérifier que les rôles clés sont bien attribués : changement de poste, arrêt temporaire ... peuvent laisser un poste vacant

Les tâches qui concernent le fond, les contenus

• vérifier les contenus mis en ligne et appliquer les process de modération choisis collectivement
• retirer les contenus inapropriés
• compléter ou demander la complétion des contributions incomplètes
• avoir une vue d'ensemble des contributions : en recevez-vous la quantité souhaitée ? Si ce n'est pas le cas, voir avec les personnes en charge de la communication. De quel(s) public(s) viennent-elles ?

Les tâches relationnelles

• communication au lancement pour faire connaitre
• communication au long cours : rappeler la plateforme à chaque fois que c'est pertinent et aider les collègues à le faire (partenaires, réseaux sociaux, événements ...)
• répondre aux sollicitations, questions, demandes de contributeurs ou visiteurs

• soin aux personnes et au collectif : écoute et entraide
• outillage du collectif : veiller à répondre aux besoins du collectif (mails, tchat, stockage des décisions et compte-rendu)

Des tâches par familles de fonctionnalités

L'ergonomie : les pages, les menus, la navigation

• entendre les retours des utilisateurs sur d'éventuelles difficultés : trouvent-ils facilement les informations ? l'esthétique a-t-elle été commentée ?
• mettre en application les modifications décidées dans un rituel de remise à plat
• supprimer les pages créées par des spammeurs (nous verrons dans le module 5 comment limiter ce problème)

Les formulaires et bases de données

• entendre les retours des utilisateurs sur d'éventuelles difficultés
  • à la saisie de données
  • à la recherche de données : les critères de tri sont-ils toujours pertinents ?
• vérifier voire compléter les fiches : retoucher des bugs d'affichages d'une image, corriger une faute de frappe ...
• si vous avez une bonne vue d'ensemble des fiches disponibles, vous pouvez faire des liens entre des fiches : du type "si vous voulez aller plus loin, consultez (lien vers une autre fiche complémentaire)"
• faire des observations en vue des rituels collectifs, par exemple : les contributions vont-elles majoritairement vers la forme de lien web, de pièce jointe ou de texte long ?
• mettre en application les modifications décidées dans un rituel de remise à plat

Les droits d'accès

• entendre les retours des utilisateurs sur d'éventuelles difficultés
• suivre la création des comptes, des groupes, dans la ligne des décisions collectives
• suivre les droits des pages dans la ligne des décisions collectives
• identifier des améliorations des droits d'accès à proposer à un rituel de remise à plat
• supprimer les comptes créés par des spammeurs (nous verrons dans le module 5 comment limiter ce problème)

Se tenir au courant de la vie de YesWiki

• lire la newsletter pour être au courant des nouvelles fonctionnalités (nous verrons plus précisement dans le module 6 comment garder le lien après la formation et notamment poser vos questions)

Une tâche trop souvent délaissée : penser la fin du projet

Et si Guid'asso venait à s'arreter : que deviendrait ce site ressource ? Ce n'est pas catastrophiste que d'envisager cette option. Sur des micros choix techniques ou stratégiques, avoir cette idée en tête peut permettre de sauver la plateforme si le cas se présentait.
> Voir les ressources sur la compostabilité des projets

Les rôles pour animer votre wiki

Les rôles dans la théorie

Rôles de réflexion

CONCEPTEUR : Créatif, imaginatif, peu orthodoxe et surtout anticonformiste, le Concepteur propose de nouvelles idées et des solutions créatives. Il résout les problèmes complexes.
Trop absorbé pour se soucier de communiquer efficacement, il a tendance à négliger les détails pratiques. (peut être peu orthodoxe ou distrait).
PRISEUR : Modéré, stratégique, le Priseur fait preuve de discernement et envisage toutes les options. Il étudie avec précision et de manière objective la réalisation possible des idées et leur intérêt.
Perçu comme un individu manquant de dynamisme, il a tendance à être trop rationnel et parfois trop critique. (se montre parfois trop critique et lent à agir).
EXPERT : Déterminé, autonome, concentré vers un seul objectif, l'Expert possède une source de connaissances et de compétences techniques peu communes et utiles à l'équipe.
Il possède un camp de compétence généralement étroit. Il se focalise sur les aspects techniques et a tendance à négliger la « vision globale ». (a une tendance à ne s'occuper que de son propre domaine)

Rôles d'action

ORGANISATEUR : Discipliné, fiable, ordonné, méthodique et efficace, l'Organisateur transforme les idées en actions concrètes et pratiques, que les membres de l'équipe pourront réaliser.
Peu conciliant et peu flexible, il a des difficultés à s'ouvrir aux idées nouvelles. (peut résister au changement et s'accrocher à son planning)
PROPULSEUR : Dynamique et fonceur, le Propulseur travaille bien sous pression et aime les défis. Il a le courage et la capacité de surmonter les obstacles. Il pousse les autres à l'action et aide l'équipe à se recentrer sur son travail.
Il peut provoquer les autres et être parfois blessant, mais sans intention malveillante. (risque de devenir agressif dans son désir d'obtenir des résultats)
PERFECTIONNEUR : Consciencieux, à la recherche des erreurs et des omissions, le Perfectionneur a le souci de la perfection. Il s'assure que le travail est bien fini et fait en sorte que le programme et les délais soient respectés.
Enclin à s'inquiéter pour chaque détail, il a des difficultés à déléguer. Il est parfois perçu comme une personne qui coupe les cheveux en quatre.

Rôles de relation

COORDINATEUR : Mature, confiant, attentif aux autres et diplomate, le Coordinateur clarifie les objectifs et fait progresser les prises de décision. Il s'assure que les efforts et les qualités de coéquipiers sont employés au mieux.
Il peut parfois être perçu comme manipulateur. Il a tendance à déléguer le travail qu'il n'aime pas faire.
PROMOTEUR : Extraverti, enthousiaste et communicatif, le Promoteur explore les opportunités et développe les contacts, à l'intérieur comme à l'extérieur de l'équipe et de l'entreprise. Il tire profit des idées, des informations et des développements du monde extérieur.
Trop optimiste, il manque parfois de réalisme et a tendance à se désintéresser des projets lorsque son enthousiasme initial est passé. (risque de négliger le suivi)
SOUTIEN : Sociable, coopératif, posé sensible et conciliant, le Soutien est attentif aux autres et à leurs besoins. Plein de tact, à l'écoute, il évite les frictions et recherche le consensus. Il bâtit le relationnel de l'équipe.
Indécis dans les situations cruciales, il est facilement influençable. Il est souvent mal à l'aise en cas de crise ou de conflit. (peut se montrer indécis quand il faut prendre des décisions impopulaires)

Quelques règles du jeu avec ces rôles

• c'est dans la diversité des approches qu'une équipe puisera sa force > il faut un peu de tous ces rôles
• chacun·e d'entre nous va souvent avoir
  • 2 ou 3 rôles préférés
  • 2 ou 3 rôles possibles
  • 2 ou 3 rôles à éviter
• nous n'adopterons pas forcément les mêmes rôles dans nos différentes équipes : équilibre naturelle avec les autres membres, contexte plus ou moins profesionnelle ou institutionnelle, période de vie, niveau d'énergie ...

Les rôles dans la pratique

Rôles de réflexion

Nous sommes plutôt ici dans les situations de débats ou de problèmes.
CONCEPTEUR : face aux questions ou problèmes qui pourront se poser sur ce wiki (débats sur ses fonctionnalités ou des choix techniques, enjeux relationnels ...), le concepteur aura plein d'idées !
PRISEUR : face aux questions ou problèmes qui pourront se poser sur ce wiki (débats sur ses fonctionnalités ou des choix techniques, enjeux relationnels ...), le priseur étudiera patiemment toutes les options possibles.
EXPERT : face aux questions ou problèmes qui pourront se poser sur ce wiki (débats sur ses fonctionnalités ou des choix techniques, enjeux relationnels ...), l'expert posera un regard technique pointu grpace à ses compétences précises. Pour ce qui est des questions techniques, nous pourrions imaginer une spécialisation de certain·es d'entre vous sur certains sujets (formulaires, droits, ergonomie ...) et aussi un niveau à partir du quel l'expertise est cherchée dans la communauté YesWiki (appel à Louise ou forum).

Rôles d'action

Nous plongeons ici dans des temps de mises en oeuvre.
ORGANISATEUR : découper et répartir les tâches
PROPULSEUR : embarquer et encourager l'équipe. ce peut être le propulseur qui est garant de l'organisation des rituels (trouver la date, envoyer les invitations, penser un déroulé ...)
PERFECTIONNEUR : Fignoler, relire, vérifier et valider

Rôles de relation

Et enfin, avec le relationnel nous prenons soin du groupe et des individus.
COORDINATEUR : avec une vue d'ensemble du projet et des personnes, il récapitule, vérifie la cohérence.
PROMOTEUR : il valorise ce nouveau wiki auprès du public mais aussi auprès des collègues. Sans forcément maitriser tous les détails, il sait en parler pour donner envie de le consulter voire d'y contribuer.
SOUTIEN : il veille au bon relationnel dans l'équipe. Oreille attentive il peut alerter sur d'évetuels malentendus ou mal-être, et proposer un cadre sécurisant.

Les enjeux du graphisme et de l'ergonomie

Retour à lʼaccueil de la documentation

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’attirance émotionnelle qui pose un décor le plus proche possible des valeurs et des besoins du collectif; les couleurs, les images mais aussi choisir des mots qui seront familiers aux utilisateurs
- La facilité de navigation : trouver la bonne information en 3 clics, en plus du menu on peut avoir des boutons, des images cliquables, des liens qui permettent d'avoir un parcours fluide et personnalisé;
- La simplicité : éviter les informations inutiles, ne surchargez pas les pages.

Attirance émotionnelle ou Comment adopter le bon look ?

Personnaliser les couleurs

Pour vous permettre de poser un décor, YesWiki vous permet de personnaliser les couleurs : menus, titres, liens, boutons peuvent adopter la couleur de votre choix.
Avec un wiki récent (en version Doryphore et avec le thème Margot) , vous pouvez accéder aux options de couleurs via l'onglet Look de la page "Gestion du site", puis bouton "Personnaliser le thème de ce wiki" - voir l'animation ci-contre.

Si vous n'avez pas de charte graphique, je vous conseille de définir avec votre groupe si un élément visuel peut vous caractériser (une plaquette, une photo, un objet totem, ...). Il existe des outils pour extraire une couleur d'une image, cela peut être un bon point de départ. Si ce n'est pas le cas, cherchez une palette de couleur tendance - ne choisissez pas 3 couleurs au hasard !

Choisir une palette de couleur

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.

Astuce 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 privée (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 aller plus loin

Test accessibilité des couleurs
Pour aller plus loin : personnalisation plus fine via PageCss

Personnaliser les polices des titres et du texte

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.
Google font propose 900 polices libres, rangées par Google selon les plus utilisées. Vous pouvez les utiliser gratuitement. L'avantage est qu'elles sont optimisées pour tous les navigateurs.

Recommandations

• polices manuscrite (handwriting) : coté humain et artisanal, mais à garder pour quelques phrases à mettre en valeur ou des titres, difficulté de lisibilité
• polices à empattement (avec serif) : effet imprimerie, crédibilité à utiliser plutot pour les supports papiers
• polices sans empattement (sans serif) : plus épurées, elles offrent un meilleur confort de lecture à l'écran

Parmi les web font les plus populaires : Arial, Montserrat, Lato, Roboto.

Exemples de combinaison de police

Utilisation de la police Montserrat
Titre en lettres capitales pour plus d'impact

Police des titres : Raleway
Police du texte : Roboto

A l'heure actuelle, sauvegarder la configuration et l'appliquer à vos pages ne suffit pas et une intervention supplémentaire de votre part sera nécessaire pour pouvoir réellement utiliser les polices choisies.

Comment intégrer une police dans Yeswiki

Pour aller plus loin

10 combinaisons de police

Ajouter des repères visuels : icone 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.

L'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...

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 ?

Quelques ressources libres 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

  """"
  

• emojipicker sans code, juste à copier-coller
• 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
• 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.
• Creative commons search
• 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".

Pour aller plus loin

Style et dimension du bandeau header
Intérêt du texte alternatif
Enlever l'arrière plan d'une image
GIMP logiciel libre de retouche d'image

CC-by-SA Mélanie Michel et Louise Didier Chapitre suivant : Faciliter la navigation

Etre autonome avec YesWiki

Autonomie

• [ ] ils ont discuté usages et savent ce qu'ils veulent faire avec le wiki
• [ ] ils ont compris que l'outil miracle n'existe PAS (celui qui fait tout tout seul)
• [ ] ils ont compris qu'un wiki, ça s'anime
• [ ] ils ont lu la doc yeswiki et utilisent le forum
• [ ] ils se sont abonnés au coucou (facultatif mais mieux)
• [ ] ils ont rédigé leur propre documentation, avec leurs mots
• [ ] ils ont placé du code caché dans les pages avec de la documentation sur mesure
• [ ] leur wiki est resté un outil collaboratif ouvert qui dépasse le simple site vitrine
• [ ] ils font les mises à jour régulièrement
• [ ] ils ont considéré le formateur comme un formateur et non comme un prestataire
• [ ] ils ont la volonté de devenir autonomes et savent pourquoi
• [ ] ils n'ont pas tous voulu devenir champions du wiki mais ont désigné clairement une ou deux personnes référentes

Votre wiki pour explorer tout au long de la formation

Et concrètement ? L'exemple de la roue crantée

Voici à quoi ressemblait cette roue en 2017 (version cercopithèque)

Voilà à quoi elle ressemble aujourd'hui (version 4.5 - doryphore 2025)

Dans cette histoire on retrouve

Les enjeux actuels de YesWiki

• je peux changer d'outil > portabilité, je suis pas enformé·e par la technilogie choisie
• mettre en réseau. ex : transiscope

Dupliquer une page vers un autre YesWiki

Les étapes :

• Aller sur la page à dupliquer
• Cliquez tout en bas sur "Dupliquer" puis sur "dans un autre YesWiki".

• Indiquer l'URL du wiki de destination et valider
• Indiquer l'identifiant et le mot de passe du compte administateur du wiki destinataire et valider
• Indiquer le nom de la page qui va se crée (l'encadré devient rouge si le nom de page est déjà utilisé) et valider
• Valider

Dupliquer une page dans un même wiki

• Cliquez tout en bas sur "Dupliquer" puis sur "dans ce YesWiki".

• Pour nommer la nouvelle page, le wiki propose d'ajouter "copie" au nom initial. Il est tout à fait possible de renommer cette nouvelle page à votre guise.
• Dans le cas où au moins une image ou un fichier serait présent sur la page à dupliquer, le wiki en précise le nom et indique qu'il ne sera pas dupliqué avec. Il vous faudra le faire manuellement.
• Pour valider, cliquer sur "dupliquer et afficher".

Personnalisation avancées CSS

/* :root { */

/* couleur des titres */
/* --title-h1-color:var(--neutral-color); */
/* --title-h2-color:var(--primary-color); */
/* --title-h3-color:var(--secondary-color-1); */
/* --title-h4-color:var(--secondary-color-2); */

/*}*/

:root { 
--title-h4-color:var(--neutral-color);
}

Modifier le favicon

Exemples de mise en forme

Exemples de mise en forme pour une page d'accueil

Site vitrine

Copier le modèle Page exemple site vitrine

Quelques exemples inspirants:
https://tiers-lieux.fr
https://classe-dehors.org/

Intranet

Copier le modèle Page exemple intranet

Quelques exemples inspirants:
Ressourc'eure - gare centrale
Gare centrale évènement co-construire
Projet Transiscope

Evènement

Copier le modèle Page exemple evenement

Quelques exemples inspirants:
https://rnhp2024.fr
https://co-construire.be
https://www.forum-ess.fr
https://nuitdeschercheurs-france.eu

Mode multilangue

Traduire le contenu de vos pages

Votre projet est international, vos utilisateurs ne maitrisent pas tous le francais ? Avec YesWiki vous avez la possibilité de gérer la traduction des contenus.

Dans chacune de vos pages

Il existe un composant lang YesWiki permettant de proposer une version de votre page dans une autre langue .
Sur une même page vous pouvez avoir

• un texte en francais, il sera précédé par {{lang="fr"}}
• un texte en anglais, il sera précédé par {{lang="en"}}
• un texte en espagnol, il sera précédé par {{lang="es"}}

Exemple

{{lang="fr"}}
=====Bienvenue=====

{{lang="en"}}
=====Welcome=====

{{lang="es"}}
=====Bienvenido=====

Dans la barre de menu

Pour permettre aux utilisateurs de choisir leur langue, vous devez ajouter dans votre barre de menu le composant translation, il permettra d'ajouter des drapeaux pour identifier les langues de votre choix.
Lorsqu'un utilisateur clique sur un drapeau anglais alors les contenus précédés de lang="en" seront affichés

Exemple :

Ajouter les drapeaux pour choisir la langue

- {{translation destination="fr"}}
 - {{translation destination="en"}}  
 - {{translation destination="es"}}

Choisir la langue pour les intitulés de l'interface YesWiki

A la création du wiki, la langue choisie est le français, mais ce paramètre peut être modifié via le fichier de configuration. On y accède via : Roue Crantée / Gestion du site / Onglet Fichier de conf

Dans l'accordéon "Paramètres Principaux", le paramètre Langue par défaut - default_language permet de modifier la langue pour les menus et paramètres en mode édition et les pages comme la page de configuration.
valeurs possibles

• fr pour francais
• en pour anglais
• es pour espagnol
• pt pour portuguais
• ca pour catalan
• nl pour néerlandais
• auto pour la langue du navigateur

Les traductions de l'interface YesWiki sont encore incomplètes mais toute contribution pour faire évoluer le projet est la bienvenue ! L'outil Weblate a récemment été mis en place pour gérer les traductions : https://hosted.weblate.org/projects/yeswiki/#languages
CC-by-SA Mélanie Michel

Et si je dois modifier mon formulaire alors que des fiches ont déjà été saisies ?

Permettre la saisie des fiches

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. Une visualisation du formulaire s'affiche en partie dans la boîte dialogue.

5 – Optionnel –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.

7 – Enregistrer votre page.

Et voilà !
CC-by-SA YesWiki

Composants de mise en forme

Les composants de mise en forme

Les wikis 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 quelle personne 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.

Les composants se trouvent dans la barre d'édition d'une page :


En cliquant sur Mise en forme, voici les options :

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 peuvent être considérés comme une sorte de menu.
Il y a 2 manières de faire :

• Onglets avec des parties de la page (recommandé si les contenus sont relativement simples ou courts)
• Onglets avec des pages différentes (recommandé si le contenu est riche ou si les pages sont déja créées)
  • Attention dans ce cas : vous devrez recopier le code des onglets sur toutes les pages concernées ;-)

Paramètres

Les onglets peuvent être affichés de différentes manières :

• en horizontal, c'est-à-dire au dessus de votre contenu (vous avez alors le choix entre souligné, sobre et justifié)
• 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 erreurs fréquentes : Les textes se chevauchent en version mobile

Si votre page contient des sections, évitez d'utiliser le paramètre "height", il vaut mieux laisser le comportement par défaut qui permet à la section de s'adapter au contenu - ainsi si la largeur de l'écran varie, la hauteur du contenu va s'allonger...
Cette erreur courante peut être très facilement corrigé en supprimant le paramètre "height" de votre code correspondant à la section.

Sur cet exemple, plusieurs sections permettent de structurer la page :

• une section avec une image de fond
• une section avec un motif diagonale (paramètre texture)
• une section avec un fond uni de couleur bleu

Les colonnes

Les colonnes

Structurer le contenu

Le composant colonne vous permet d'insérer le code wiki pour 2, 3, 4, 6 ou 12 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

Vous choisissez le nombre de colonnes :2, 3, 4, 6 ou 12.
Le code sera créé pour des colonnes de taille égale : si vous créez 2 colonnes le code indiquera size=6 pour chacune.
Mais vous pouvez adapter. Par exemple pour 2 colonnes : 1/3 (size 4) + 2/3 (size 8)

{{grid }}
{{col size="4"}}
{{section bgcolor="#d0e0e3" class="text-left" height="300" }}
=====size 4===== {{end elem="section"}}
{{end elem="col"}}
{{col size="8"}}
{{section bgcolor="#d0e0e3" class="text-left" height="300" }}
=====size 8===== {{end elem="section"}}
{{end elem="col"}}
{{end elem="grid"}}

Editeur de page

Éléments de base sur les pages

Mettre en forme le texte

En mode édition, YesWiki vous offre une barre dʼédition comportant une série de boutons qui vous permettent dʼeffectuer la plupart des opérations de mise en forme.

Les principales astuces de mise en page

Lorsqu'on utilise la barre dʼédition de YesWiki, on constate que cela se traduit par lʼapparition de « codes » dans la page. Rassurez-vous ces codes ne sont visibles quʼau cours de lʼédition et se traduiront, lorsque vous enregistrez la page, par la mise en forme ou le comportement voulu. Voici quelques uns de ce code.

Accentuation

**Gras**

//Italique//

__Souligné__

@@Barré@@

Titres

======Titre 1======
=====Titre 2=====
====Titre 3====
===Titre 4===
==Titre 5==

Insérer un filet horizontal

----

Ce qui donne :

---

Listes

 - Liste à puces niveau 1
 - Puce niveau 1
  - Puce niveau 2
  - Puce niveau 2
 - Puce niveau 1

• Liste à puces niveau 1
• Puce niveau 1
  • Puce niveau 2
  • Puce niveau 2
• Puce niveau 1

Remarque : en mode édition, si vous ne voyez plus la coloration syntaxique après une liste à puces, il suffit de sauter une ligne, juste après la liste, pour la retrouver… (mais, même sans la coloration, tout le reste fonctionne).

 1) Liste énumérée
 1) Liste énumérée
 1) Liste énumérée

1. Liste énumérée
2. Liste énumérée
3. Liste énumérée

Tableaux

[|
| **Nom** | **prénom** | **Couleurs préférées** |
|Lagaffe |Gaston |jaune |
|Lapalice |Jean |vert |
|texte calé à gauche | texte calé à droite| texte centré |
|]

Nom	prénom	Couleurs préférées
Lagaffe	Gaston	jaune
Lapalice	Jean	vert
texte calé à gauche	texte calé à droite	texte centré

Écrire en html

Si vous souhaitez introduire du HTML dans la page wiki, 
il faut l'entourer de ""  "" 
pour qu'il soit traité correctement.

Ce qui se passe vraiment, si cela vous intéresse

En réalité, une page internet est constituée de code HTML.
Et cʼest ce HTML que sait afficher votre navigateur internet (Firefox, Chrome, Safari ou autre).

Mais le HTML est verbeux et complexe. YesWiki met donc à votre disposition un code plus simple (celui qui est en partie décrit dans cette page). Et lors de l'affichage de la page, YesWiki traduit son code en HTML que le navigateur affiche alors.

Dans le cas où vous insérez du code HTML dans votre code YesWiki, les doubles guillemets ("") indiquent à YesWiki de ne pas traduire le code en question.

Placer du code en commentaire sur la page

En utilisant le code ci-dessous, on peut mettre du texte qui n’apparaît pas sur la page…

{# du texte que je ne souhaite pas afficher #}

Cela permet de laisser des explications par exemple ou même d'écrire du texte en préparation d'une publication future.

A toi de jouer !

Dans une page "bac à sable" de ton wiki, écris un paragraphe avec :

• un titre
• du texte en gras
• une liste à puces

Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum

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 fichier 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 clique 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 de carte mentale (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

(elle est faite à partir de la version précédente mais le principe est le même)

A toi de jouer !

Dans une page "bac à sable" de ton wiki :

• intègre une image en choissant la taille moyenne et le posionnement à gauche
• reviens modifier la configuration de l'image pour qu'elle soit de taille large, positionnée au centre, et qu'en cliquant sur l'image on arrive sur https://yeswiki.net/
• intègre un document PDF
  • une fois sous forme de lien
  • une fois affiché directement dans la page

Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum

Insérer une vidéo

Pour intégrer une vidéo il est nécessaire qu'elle soit préalablement en ligne sur une plateforme spécialisée : YouTube, Viméo, PeerTube, etc.

Vous pouvez alors utiliser l'action {{video}} disponible dans les composants.

Par défaut, ce composant vous propose deux paramètres.

• Serveur de la vidéo – Vous pouvez choisir le serveur sur lequel se trouve la vidéo parmi PeerTube, Vimeo et Youtube.
• Identifiant de la vidéo – Il ne sʼagit pas de lʼURL complète de la vidéo. Le plus souvent, c'est la série de chiffres et lettres placée en fin d'URL. Par exemple, dans https://www.youtube.com/watch?v=TNPnia5UCKk, lʼidentifiant de la vidéo est TNPnia5UCKk.

En cochant la case « paramètres avancés », vous pouvez faire afficher plus de paramètres.

• Instance du serveur PeerTube – Ce paramètre nʼest présent que si vous avez choisi PeerTube en tant que serveur de la vidéo.
• Ratio de la vidéo – Vous pouvez préciser le ratio qui vous convient pour afficher la vidéo.
• Largeur maximale – Par défaut, la vidéo sera affichée sur toute la largeur disponible. Si vous le souhaitez, ce paramètre vous permet de préciser la largeur maximale sur laquelle la vidéo sera affichée. Attention, cette largeur doit être saisie en nombre de pixels (par exemple : 500). Vous ne pouvez utiliser de pourcentage pour exprimer cette largeur maximale.
• Hauteur maximale – Par défaut, la hauteur dʼaffichage de la vidéo sera calculée automatiquement en fonction de la largeur disponible (de manière à conserver les proportions, ou ratio, initiales de la vidéo). Ce paramètre vous permet, si vous le souhaitez, de fixer la hauteur maximale dʼaffichage de la vidéo. Attention, cette hauteur doit être saisie en nombre de pixels (par exemple : 500). Vous ne pouvez utiliser de pourcentage pour exprimer cette hauteur maximale.
• Position de la vidéo – Ce paramètre ne prend effet que si vous avez précisé une largeur maximale inférieure à la largeur dʼaffichage disponible. Si vous spécifiez que la position de la vidéo doit être à droite, et qu'il reste de la place à gauche de celle-ci, alors YesWiki commencera à afficher le texte suivant la vidéo à gauche de celle-ci. Et réciproquement pour un choix dʼaffichage de la vidéo à gauche, le texte viendra à droite, sʼil reste de la place.

Une autre méthode consiste à intégrer la vidéo en utilisant un iframe. Cependant l'action {{video}} vous permet un affichage responsive (c'est à dire qui sʼadapte à la taille de la fenêtre).

A toi de jouer !

Dans une page "bac à sable" de ton wiki :

• Insère la vidéo https://videos.yeswiki.net/w/qaiq6teGqAk6tDtwVaVsry (en plus cette vidéo peut t'intéresser ;-)

Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum

Faire un lien ou un bouton

Dans les pages d'un wiki on a souvent besoin de faire des liens vers d'autres pages ou d'autres sites. Encore une fois, c'est assez simple.

Les trois méthodes pour créer un lien

Cas d'un lien allant vers une page du wiki
Si vous souhaitez que votre lien aille vers une page de votre wiki, il suffit de saisir le nom wiki de cette page (par ex. : « PagePrincipale »). Pour YesWiki, ce nom représente une URL.

Saisir l'adresse de la cible du lien

Si vous saisissez l'adresse d'une page (par exemple : « https://yeswiki.net »), YesWiki, comprenant qu'il s'agit d'une adresse, générera un lien cliquable dont le texte sera l'URL elle-même (ou le nom de la page de wiki le cas échéant).

Utilisation du bouton « lien »

Dans la page en mode édition, cliquez 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 ;-)

Fenêtre modale : une fenêtre modale est une fenêtre qui vient s'afficher devant la page que vous êtes en train de visualiser (comme une « pop-up ») et que vous devez fermer avant de pouvoir retourner à la visualisation de votre page. Elle est, soit visible, soit fermée, contrairement à d'autres fenêtres qui peuvent être ouvertes et cachées derrière autre chose.

Vous avez envie de voir le code généré ?

Voici ce que ça donne quand on regarde le code :
[Aller à la page d'accueil](PagePrincipale) > Aller à la page d'accueil
[Aller sur le site de yeswiki](https://yeswiki.net/?PagePrincipale) > Aller sur le site de yeswiki
{{button class="btn-primary" link="mailto:louise@quincaillere.org" nobtn="1" text="Envoyer un mail à Louise" }} > Envoyer un mail à Louise

Remarque importante — Dans le cas où vous choisiriez que le lien s'ouvre dans un nouvel onglet ou dans une fenêtre modale, YesWiki utilisera un bouton pour créer le lien (même si il l'affiche sous la forme d'un lien).

Utilisation du composant « bouton »

Voir la documentation du bouton Si, pour créer un lien, on utilise le composant « bouton » même dans le cas d'un lien s'affichant dans l'onglet courant, on se laisse la possibilité de faire évoluer plus facilement le comportement de ce lien.
Comment faire ?
1. Dans la fenêtre de paramétrage du bouton, vous saisissez :

• le texte du lien dans « Texte du bouton »,
• l'adresse de la page de destination du lien dans « Lien web ou nom d'une page de ce wiki ».

2. Puis, cliquez sur « Paramètres avancés ».
3. Choisissez les modalités d'affichage de la destination :

• si vous voulez que la destination s'affiche dans une fenêtre modale, sélectionnez l'option qui vous convient dans « Ouvrir le contenu du lien dans une popup » ;
• si vous voulez que la destination s'affiche dans un nouvel onglet ou une nouvelle fenêtre, sélectionnez « Oui » dans « Ouvrir dans une nouvelle fenêtre » ;
• si vous voulez que la destination s'affiche l'onglet courant, ne faîtes rien de tout cela.

4. Cochez la case « Afficher sous forme de lien »
Les avantages à utiliser un bouton pour créer un lien.

• Vous pouvez ajouter une icône à votre lien.
• Vous pouvez ajouter un texte qui s'affiche au survol du lien.
• Vous pouvez faire en sorte que le lien n'apparaisse pas aux utilisateurs qui n'ont pas accès à la page de destination.
• Vous pouvez modifier tous ces paramètres très simplement aussi souvent que vous voulez.

A toi de jouer !

Dans une page "bac à sable" de ton wiki, fais :

• un lien vers la page d'accueil de ton wiki avec pour texte affiché "Revenir à l'accueil"
• un lien vers le site https://yeswiki.net avec pour texte affiché "clique ici pour accéder au site de yeswiki"
• un bouton qui indique "Forum yeswiki", qui envoie sur https://forum.yeswiki.net/ et avec un pictogramme de votre choix
• exercice toi à faire des liens nécessaires pour ton projet, en réfléchissant au type d'ouverture
  • dans l'onglet courant
  • dans un nouvel onglet
  • dans une fenetre modale

Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum

Intégrer des éléments d'autres sites (widgets)

Avec YesWiki on peut facilement intégrer à son wiki 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 wiki. Voici comment faire.

Incorporer un « widget »

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 à un de ces trois pictogrammes :

Le code « iframe » que vous allez trouver ressemblera à ça :

Vous allez sélectionner et copier ce code pour pouvoir le coller dans votre wiki.

2. Coller ce code dans votre 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 (on parle d'attributs) 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
L'attribut 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 le code de l'« iframe », vous pouvez préciser frameborder="1" (avec cadre noir) ou frameborder="0" (sans cadre noir)

A toi de jouer !

Dans une page "bac à sable" de ton wiki :

• intègre un outil que tu utilises déjà : un pad, un GoogleDoc ...

Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum

CC-by-SA Frédérique Dumont, Louise Didier et Sylvain Boyer