Prérequis informatiques

C'est quoi une adresse url ?

www.example.com

http://www.example.com

Barre d'adresse

Sais-tu copier coller ?

• Pour copier, on sélectionne la partie à copier avec la souris puis on fait clic droit et on choisit copier
• Pour coller, on place son curseur à l'endroit où l'on veut insérer ce qu'on a copié, ensuite on clic droit et on choisit coller

Ouvrir un lien dans un nouvel onglet

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

• la version de votre Wiki (par ex doryphore 2021-03-18-4)
• la version disponible sur le dépot : doryphore 2021-03-18-4

Comprendre les pages de gestion

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

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

• de passer en mode édition
• de cliquer sur composant / de choisir "afficher les données d'un formulaire"
• de répondre aux questions posées

Permettre la saisie dans un formulaire

Créer un formulaire

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 1^er paramètre contient bien le type de champ,
• dans le 2^e on retrouve le nom du champ,
• le libellé du champ est dans le 3^e paramètre,
• les 4^e et 5^e paramètres contiennent les nombres de caractères affichés et maximum respectivement,
• le 9^e paramètre indique que le champ est obligatoire (« 1 »),
• le 11^e paramètre contient le texte d’aide,
• le 12^e paramètre indique que le champ peut être lu par tout le monde («  »). Tous ces détails et bien d’autres encore se trouvent sur la page https://yeswiki.net/?ChampsPossibles Regardons à présent les différences dans le cas d’un champ de type groupe de cases à cocher.
• Présentation dans le constructeur graphique {{end elem="col"}} {{col size="5"}} Ca fait quoi ? {{end elem="col"}} {{col size="4"}} Où chercher dans [[https://yeswiki.net/?ChampsPossibles yeswiki.net/?ChampsPossibles]]*

et (type de champ) dans l'onglet « code »

Une question à laquelle on répond en tapant un texte court (une ligne)

"Texte court"

(texte)

Une question à laquelle on répond en tapant un texte long (plusieurs lignes)

"Texte long"

(textelong)

Une question à laquelle on répond en téléchargeant une image

"Image jointe"

(image)

Une question à laquelle on répond en téléchargeant un fichier

"Upload de fichier"

(fichier)

Une question à laquelle on répond en tapant une adresse mail

"Adresse mail"

(champs_mail)

Une question à laquelle on répond en tapant un ou plusieurs mots-clés

"Mots-clés / tags"

(tags)

Une indication invisible qui permet d'entrer des variables sans que le contributeur ne le fasse.
Exemple : champ hidden bf_pays=france ce qui permet que toutes les adresses saisies soient cherchées en france

"Champ caché"

(champs_cache)

Une question à laquelle on répond en sélectionnant une réponse parmi plusieurs pré-écrites

"Liste déroulante"

(liste)

Une question à laquelle on répond en cochant une ou plusieurs réponses parmi plusieurs pré-écrites

"Checkbox / cases à cocher"

(checkbox)

Une question à laquelle on répond en cochant une seule réponse parmi plusieurs pré-écrites et visibles

"Radio"

(radio)

Une question à laquelle on répond en saisissant une date (voire une heure)

"Date et heure"

(listedatedeb)

Une carte avec un bouton invitant à positionner le point à partir d'une adresse et/ou ville et/ou pays saisi(s) par ailleurs

"Cartographie permettant de positionner automatiquement l'adresse "

(carte_google)

Une case à cocher pour accepter l'inscription d'une adresse mail saisie par ailleurs à une mailing-liste

"Proposer l'inscription à une liste de discussion / diffusion"

(inscriptionliste)

Du texte (titre ou pas) visible dans le formulaire et/ou les fiches

"Mettre un titre ou du texte au sein d'un formulaire"

(labelhtml)

Demande la saisie d'un mot de passe et crée un compte utilisateur, à partir d'un nom et d'une adresse mail saisis par ailleurs

"Créer un utilisateur wiki dès la création d'une fiche"

(utilisateur_wikini)

Configure les droits d'accès des fiches

"Gérer les droits dès la création de la fiche"

(acls)

Configure le thème graphique des fiches

"Associer un thème dès la création de la fiche"

(metadatas)

Permet de générer un bouton à glisser dans la barre de menu de son navigateur pour saisir directement cette fiche bazar depuis celui-ci sans avoir à aller sur le wiki.

"Bookmarklet"

(bookmarklet)

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

"Afficher les fiches qui pointent vers une fiche"

(listefichesliees)

Genère un titre de fiche à partir de réponses saisies par ailleurs
Exemple : on a un bf_nom, bf_prenom et bf_structure, avec titre automatique, on peut faire un bf_titre qui soit la concaténation de tous ces éléments

encadré « pour aller plus loin » dans « Titre : texte court qui donnera le nom à la fiche »

(titre)

Un code sur mesure pour les développeurs

Nulle part, c'est nouveau !

Comment supprimer une page

Le module bazar de yeswiki

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

{{bazar}}

Que trouve-ton dans la page bazar ?

Bazar : une base de données coopératives

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

• de limiter l'accès du yeswiki à certaines personnes ou catégories de personnes (groupes)
• de protéger certaines parties (bandeau, menu, footer...) de votre wiki contre les modifications involontaires (ou intempestives)

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

• 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

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

• un module de gestion des droits des utilisateurs par groupe a été créé
• un module de gestion du droit d'accés aux pages en masse a été créé

Gestion des droits par utilisateurs

• 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 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"

Gestion des droits des pages en masse

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)

Gestion des droits des pages "à venir"

• soit en le faisant chemin faisant via les méthodes présentées ci-dessus
  • méthode la plus courante
• soit en attribuant des droits par défaut à toutes les nouvelles pages créées
  • mais il faut un accès FTP pour modifier le wakka config sur le serveur
  • Pour ce faire modifier ces 3 lignes en remplaçant les par la syntaxe voulue %%'default_write_acl' => '',

• soit en attribuant des droits pas défaut à chaque nouvelle fiche bazar qui sera déposée
  • en allant voir la doc du champ acls de bazar => https://yeswiki.net/?ChampsPossibles

Se connecter à son wiki

Création d'un compte

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

S'identifer sur yeswiki

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

Modifier le code couleur du wiki

Ergonomie oui mais pour qui ?

Personnaliser les couleurs

• explorer les couleurs à la mode avec l'option "Explore"
• générer votre palette au hasard en appuyant sur la barre d'espace jusqu'à tomber sur une couleur qui vous parle, vous pourrez alors la bloquer grace au cadenas puis continuer à explorer
• générer la palette à partir d'une image (votre logo ou une photo dont les tons vous plaisent) Télécharger le fichier coolors.png
• générer la palette à partir de votre couleur principale (pour indiquer votre couleur, il faut cliquer sur le code hexa cela vous permet de passer en édition et coller votre code couleur)

:root {
   --primary-color: #71334f;     /* **couleur de la barre de menu, des titres et des liens** */
   --secondary-color-1: #a0294d; /* **couleur utilisée pour les cadres des facettes** */
   --secondary-color-2:#cf4a67;  /* **couleur utilisée pour l'encadre du texte mis en valeur** */
   --neutral-color:#a499ab;      /* **couleur des textes** */
   --neutral-soft-color:#a499ab; /* **couleur du menu de la barre d'edition** */
   --neutral-light-color:#fff;   /* **couleur de fond de votre wiki** */

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

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

Personnaliser la police

Illustrez vos pages

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

• Unspalsh Banque d'image entièrement gratuite avec attribution

La petite histoire du thème graphique Margot

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

Modifier le look du pied de page

• les coordonnées
• un formulaire de contact
• les logos
• les sponsors
• les conditions d'usages...
• ...

{{contact mail="votremail"}}

Modifier le look du bandeau

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

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


{{end elem="section"}}
""""

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

Insérer des boutons, des aplats...

• boutons (clicables ou non et de couleurs au choix)
• aplat de couleur (pour faire une bande de couleur qui traverse la page de gauche à droite et sur laquelle on peut écrire du texte / idem avec une image)
• étiquettes (petit mot coloré pour attirer l'attention)
• encadré (ouvert, fermé)
• des onglets (au sein de la page)
• des vidéos
• des formulaires (voir le parcours avancé)
• ...

Quelques exemples ci-dessous

Etiquettes

Encadrés (ouverts, fermés)

Boutons

Des onglets

Insérer un pad (co écriture)

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

Créer des colonnes

{{grid}}
{{col size="6"}}
===Titre de la colonne 1===
Texte colonne 1
{{end elem="col"}}
{{col size="6"}}
===Titre de la colonne 2===
Texte colonne 2
{{end elem="col"}}
{{end elem="grid"}}

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

Insérer une image

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

Insérer un son

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

Insérer une vidéo

Agencer le menu

Votre menu est une liste à puces ;-)

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

Créer une nouvelle page / un lien

• le nom de cette page (souvent appelé nomwiki de la page)
• son contenu (le texte, images...)
• les liens pointant vers cette page

Revenir en arrière en cas de pépin