PARTICIPER AU SITE DE LA CAGETTE


Il y a deux façons de participer au site :

  • Ajouter des informations sur les pages du site et faire vivre les actualités des Comités, des événements, des réunions....

  • Participer au developpement du site, créer de nouveaux modules, embellissement du site...

Participer au site ne demande pas de connaissances particulières en informatique !! C'est accessible à tout le monde !


Niveau 1 : Devenir Wikinaute.ette


Pour modifier des pages ou ajouter du contenu, il va falloir vous connecter avec un identifiant.

Envoyer un message à Adrien à l'aide du bouton ci-dessous afin qu'il vous ajoute à la liste des personnes pouvant modifier le site. ( réponse rapide !)

Envoyer un message à Adrien

Dès lors que vous êtes inscrit sur la liste des personnes pouvant modifier ( groupe membre ), vous pouvez vous connecter afin de pouvoir modifier le site.


A- Ma première connexion


Vous pouvez ouvrir une nouvelle page pour vous inscrir afin de pouvoir garder celle-la ouverte pendant l'inscription.

Tutoriel


1 - Cliquez sur la roue crantée en haut à droite

image roueJPG.png (53.2kB)

2 - Cliquez sur Se connecter

image connecter.png (50.7kB)

3 - Cliquez sur S'inscrire

image inscire.png (0.1MB)

4 - Compléter le formulaire comme expliqué ci-dessous
Votre identifiant se compose de votre prénom et votre nom de famille, sans accent, tout accroché avec une majuscule à chacun des deux.

image idnetifiant.png (0.2MB)

5 - Votre identifiant doit maintenant apparaitre lorsque vous cliquez sur la roue crantée.

image identifiant_nom.png (0.2MB)

6 - La prochaine fois que vous voulez vous connecter, cliquez sur Se connecter

image connecter.png (50.7kB)

Si vous avez des difficultés à vous inscrire ou autres, n'hésitez pas à envoyer un message à Adrien...

Envoyer un message à Adrien

B- Ajouter / Modifier des Fiches



Vous pouvez modifier les fiches qui composent le site :

  • Les fiches Événements

  • Les fiches Comités

  • Le fiches Actualités

  • Les fiches Participer (Wanted)

Menu de Mises à jour des fiches


Pour cela rien de plus simple :

1- Cliquez sur la roue crantée en haut à droite

2- Cliquez sur Mise à jour des fiches

3- Cliquez sur le bouton en fonction du type de fiche que vous voulez ajouter / modifier.
image miseajourdesfichemenu.png (0.1MB)



Modifier une fiche


1- Cliquez sur le bouton correspondant au type de la fiche que vous souhaitez modifier

image rechercheretmodifer.png (12.4kB)

2- Recherchez et cliquez sur la fiche que vous voulez modifier, vous pouvez utiliser la barre de recherche pour affiner les résultats proposés

image cliquezlaficheourechercher.png (31.9kB)


3- Lorsque vous cliquez sur la fiche, celle-ci se "développe" et vous trouverez un bouton modifier en bas de la fiche. Le bouton Supprimer apparait seulement si êtes propriétaire de la fiche.

image mdiffiche.png (91.3kB)

4- Vous pouvez alors modifier votre fiche à votre convenance et n'oubliez pas de valider lorsque vous avez terminé. Le bouton validé se trouve en bas du formulaire
image oubliezdevalider.png (4.3kB)

5- Lorsque vous naviguez sur le site, vous pouvez également modifier une fiche en cliquant sur le bouton "Éditer la page" en bas de la fiche
image editerlapage.png (80.9kB)


Niveau 2 : Personnaliser une page ou une fiche



A- Boite à outil Yeswiki : La Base !


Il existe un pense bête qui est matérialisé par un point d'interrogation dans le menu édition d'une page ainsi que dans les champs texte des fiches

il regroupe les principales fonctions faciles qu'on peut faire sur une page.

Le plus simple est de copier le code qui vous intéresse, de le coller dans votre page et de le modifier selon vos besoins

Je vous laisse découvrir...

image DevSite1_pointinterrogation_20190702172959_20190702153140.png (37.4kB)

Vous pouvez copier ces bouts de codes sur les pages du site mais également sur les fiches : événements, actualités, wanted, Comités...

Pour intégrer du code dans une fiche, il faut coller le code dans un champ texte du formulaire..
les champs textes d'une fiche fonctionne exactement pareil que le menu édition d'une page.


B- Personnaliser ma Fiche


L'espace texte d'une fiche peut servir à intégrer un petit bout de code : un iframe, un tableau, une action, un graph, un lien....


1 - Ajouter un tableau sur ma fiche


Lorsque vous modifiez votre fiche, vous pouvez ajouter des bouts de code dans les champs texte. Vous pouvez retrouver des exemples de codes à rajouter sur votre fiche dans la boite à outil Yeswiki matérialisé par un point d’interrogation ( Cf D- Boite à outil Yeswiki)

1- Lorsque vous êtes en train de modifier votre fiche, Cliquez sur le point d'interrogation marron ( Pense bête Yeswiki) qui se trouve en haut du champ texte
image Capture.jpg (8.6kB)

2- Copier le code correspondant au tableau comme l'exemple ci-dessous
image Capture2.jpg (13.3kB)

3- Colle le code du tableau dans le champ texte de votre fiche.
image espcaetcte.png (56.7kB)

4- Il faut maintenant remplacer les textes de l'exemple par les textes que vous souhaitez.

5- Si vous rajoutez des petites barres verticales, cela rajoutera des colonnes, le plus simple reste de copier-coller les barres autant de fois que nécessaire.

6- L'espacement entre le texte et les barres définira la position du texte dans la colonne : aligné à gauche / centré / aligné à droite


7- Exemple de rendu

16:00 Début des festivités
16:00 - 18:00 Foire aux comités partenaires producteurs
18:00 - 19:00 Théâtre Forum
19:30 Repas (payant)
21:15 Concert So Fresh
23:00 Cosmyte
00:30 Fin des festivités




2 - Ajouter un iframe dans ma fiche


Un iframe permet de faire apparaitre le contenu d'une autre page internet sur sa fiche. c'est comme un encadré dans lequel apparait une autre page internet. Cela permet de montrer tout de suite un élément sans avoir à passer par lien.



Lorsque vous modifiez votre fiche, vous pouvez ajouter des bouts de code dans les champs texte. Vous pouvez retrouver des exemples de codes à rajouter sur votre fiche dans la boite à outil Yeswiki matérialisé par un point d’interrogation ( Cf D- Boite à outil Yeswiki)

image espcaetcte.png (56.7kB)

Dans le cas d'un iframe, vous pouvez copier le code ci-dessous et le coller dans le champ texte de votre fiche

""<iframe width=100% height="500" src="LIEN DE LA PAGE A AFFICHER" frameborder="0" allowfullscreen></iframe>""


Puis l'adapter à vos besoins :

Width= % : Correspond à l'espace occupé par l'iframe sur la largeur de la page, 100 étant le maximum
height=" " : Correspond à l'espace occupé par l'iframe sur la hauteur de la page
frameborder=" " : afficher un cadre à l'iframe ou pas de cadre / 1=oui 0=non

Ne pas oubliez de mettre/laisser les 2 guillemets au début et à la fin

Exemple d'un iframe :







3 - Créer un lien vers une autre page


Créer un lien représenté par un mot ou un groupe de mot

  • Copiez (Ctrl+C) l'adresse de la page vers laquelle le lien doit rediriger
  • Sélectionnez les mots qui représenteront le lien ( 1 )
  • Cliquez sur Lien ( 2 )
  • Coller ( Ctrl+V) l'adresse de la page

image faire_un_lien.png (48.1kB)




Niveau 3 : Écrire du YesWiki


A- Les Couleurs


image palette_couleurajuster.png (6.4kB)


#59748C
Couleur Wiki: success


#F2DD9F
Couleur Wiki : warning

#D88F36
Couleur Wiki : alert

#A55F21
Couleur Wiki : primary

#592A0F
Couleur Wiki : info




B- Les Boutons



Simple


Il redirige vers une autre page


Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}



Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON

  • Il faut remplacer VOTRE LIEN par le lien URL vers lequel vous voulez rediriger
  • Il faut remplacer TEXTE AFFICHE SUR LE BOUTON par le Texte que vous souhaité afficher sur le bouton.... sans déconner... :-)



Nouvel Onglet


  • Il redirige vers une autre page mais dans un nouvel onglet
  • La page initial reste ouverte


Copier le code ci-dessous et coller le dans le menu edition de votre page :
""<a href="VOTRE LIEN" target="_blank" class="btn btn-warning">TEXTE AFFICHE SUR LE BOUTON</a>""



Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON


  • Il faut remplacer VOTRE LIEN par le lien URL vers lequel vous voulez rediriger
  • Il faut remplacer TEXTE AFFICHE SUR LE BOUTON par le Texte que vous souhaité afficher sur le bouton.... vous avez compris non ? :-)



Pop-up/Modal


Il ouvre une fenetre pop-up dans laquelle il fait apparaitre la page correspondant au lien que vous avez renseigné dans le code


Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning modalbox" link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}



Un exemple ci-dessous :
TEXTE AFFICHE SUR LE BOUTON



Bouton large


Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-lg" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON


Bouton Petit

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-sm" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON


Bouton XS

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-xs" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON


Bouton Block

Copier le code ci-dessous et coller le dans le menu edition de votre page :
{{button class="btn-warning btn-block" <a href link="VOTRE LIEN" text="TEXTE AFFICHE SUR LE BOUTON"}}


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON



C- Barres de navigation



Navs bar


Cela permet de créer un menu horizontal qui redirige vers d'autre pages. Pour le menu "Navs bar" apparaisse sur toutes les pages, il faut mettre le code sur toutes les pages concernées.

Le code se décompose en deux partie :
- nav link : Mettre les liens des différentes pages séparées par des virgules, Les liens apparaitront de gauche à droite sur la page
- Titles : Mettre, dans le même ordre que les liens les titres des barres de navigation. Il faut également les séparer par des virgule

Copier le code ci-dessous et coller le dans le menu edition de votre page, adaptez le code selon le nombre de barre de navigation que vous souhaitez :
{{nav links="Lien Barre Navigation 1, Lien Barre Navigation 2, Lien Barre Navigation 3, Lien Barre Navigation 4"  titles="Titre Barre Navigation 1, Titre Barre Navigation 2, Titre Barre Navigation 3, Titre Barre Navigation4" class="nav nav-pills nav-justified"}}


Un exemple ci-dessous :







Niveau 4 : Ecrire du HTML


Tout d'abord, il est important de rappeler qu'il existe deux types de contenu sur le site :

- Des pages Codée qui ont été crées de toute pièce, elles étaient vierge et on a écrit du code dedans pour faire apparaitre ce que l'on veut.

- Des pages Fiches qui ont été crées suite au remplissage de formulaires.

On peut donc utiliser du HTML de deux façons différentes sur le site :

  • Sur une page Codée : On edite la page et on peut ajouter des bouts de codes en HTML en prenant soin d'ajouter 2 guillemets au début et à la fin de chaque bout de code que l'on souhaite ajouter : code html

Exemple :
""<a href="https://lacagette-coop.fr/?ActualiteBlog" target="_blank">ton texte</a>""

Donne :
ton texte

  • Sur une page Fiche : Les bouts de code HTML doivent être ajouter au formulaire qui va créer la fiche. on ne peut pas ajouter du HTML à une fiche en l'éditant. Si vous editer la page, cela va vous proposer de modifier le remplissage du formulaire et non la strucutre de la page.


A- HTML dans des pages Codées


Rappel : sur une page Codée : Pour ajouter du code en HTML , il faut mettre 2 guillemets au début et à la fin de chaque bout de code que l'on souhaite ajouter : code html


Tout d'abord, il est important de rappeler qu'il existe deux types de contenu sur le site :

- Des pages Codée qui ont été crées de toute pièce, elles étaient vierge et on a écrit du code dedans pour faire apparaitre ce que l'on veut.

- Des pages Fiches qui ont été crées suite au remplissage de formulaires.

On peut donc utiliser du HTML de deux façons différentes sur le site :

  • Sur une page Codée : On edite la page et on peut ajouter des bouts de codes en HTML en prenant soin d'ajouter 2 guillemets au début et à la fin de chaque bout de code que l'on souhaite ajouter : code html

Exemple :
""<a href="https://lacagette-coop.fr/?ActualiteBlog" target="_blank">ton texte</a>""

Donne :
ton texte

  • Sur une page Fiche :

Pour modifier la structure ou la présentation de la page : Les bouts de code HTML doivent être ajouter au formulaire qui va créer la fiche. on ne peut pas modifier la présentation d'une Fiche avec du HTML en l'éditant.
Si vous editer la page, cela va vous proposer de modifier le remplissage du formulaire et non la structure de la page.

Par ailleurs, si vous souhaitez ajouter un élément à votre fiche nécessitant du HTML tels qu'un bouton, un iframe, un séparateur.... à une seule fiche en particulier (votre fiche de comité... ), vous pouvez utiliser les champs texte du formulaires pour intégrer votre HTML ( en mettant les 4 guillemets) Les champs texte réagissent exactement pareil qu'une page. vous pouvez donc coller les bouts de codes que vous souhaitez HTML ou YesWiki.e

image DevenirWikinette_espcaetcte_20190715205407_20190715190050.png (56.7kB)


Bouton Nouvel Onglet


  • Il redirige vers une autre page mais dans un nouvel onglet
  • La page initial reste ouverte


Copier le code ci-dessous et coller le dans le menu edition de votre page :
""<a href="VOTRE LIEN" target="_blank" class="btn btn-warning">TEXTE AFFICHE SUR LE BOUTON</a>""


Cela donne un bouton comme ça :
TEXTE AFFICHE SUR LE BOUTON


  • Il faut remplacer VOTRE LIEN par le lien URL vers lequel vous voulez rediriger
  • Il faut remplacer TEXTE AFFICHE SUR LE BOUTON par le Texte que vous souhaité afficher sur le bouton.... vous aviez compris non ? :-)


Séparateur de texte


Permet d'ordonner une page, de séparer du texte...

Vous pouvez adapter la barre selon vos envies en adaptant les paramètres ci-dessous :

- height: xx px : Modifie les pixels c'est à dire l'épaisseur de la barre
- color: Modifie la couleur de la barre - se référer aux couleurs définis plus haut dans la rubriques "Les Couleurs"
- width: modifie la longueur de la ligne : 100% = toute la largeur de la page

Copier le code ci-dessous et coller le dans le menu edition de votre page :
""<hr style="height: 2px; color: #A55F21; background-color: #A55F21; width: 50%; border: none;">""

Un exemple ci-dessous :



L'iframe

Voir sur cette même page : Niveau 2 : Personnaliser une page ou une fiche / 2 - Ajouter un iframe dans ma fiche


B- HTML dans des pages Fiches


Comme mentionné en intro, il y a deux façon d'intégrer du HTML à une page Fiche :

1- Mettre du HTML dans un champ texte lors du remplissage du formulaire vous permet d'intégrer des éléments à votre fiche tels que des boutons, iframe, carte, sondage.... mais vous ne pouvez pas agir sur la présentation de la fiche ni sur sa façon de se générer.

2- Mettre du HTML dans le formulaire afin d'automatiser des éléments. Les éléments intégrés se généreront à chaque fois que quelqu'un remplira un formulaire. Exemple : titre, présentation, outils....


C- HTML dans les formulaires


Tout d'abord, il faut posséder un compte admin
Cela se passe dans Base de données / Formulaires

ATTENTION A NE JAMAIS SUPPRIMER UN FORMULAIRE : CELA SUPPRIMERAI TOUTE LES FICHES CREES A PARTIR DE CE FORMULAIRE
FAIRE TRES ATTENTION !!

Cliquez sur le crayon pour editer un formulaire

Pour ajouter du html et que Yeswiki l'interprète comme tels il faut mettre la balise
labelhtml*** *** *** *** *** *** *** *** *** *** ***


Le label se découpe en 12 champs séparés par trois petites étoiles à chaque fois


Vous pouvez ajouter du HTML :

- En mode Saisie : C'est à dire que le HTML que vous ajouté apparaitra seulement lors du remplissage du formulaire
- En mode Vue : C'est à dire que le HTML que vous ajouté apparaitra seulement sur la fiche crée par la formuaire

Cela dépendra de la position à laquelle vous mettez votre html sur la balise

Mode saisie = 2ème champs
Mode vue = 4ème champs

labelhtml***HTML mode saisie*** ***HTML mode vue*** *** *** *** *** *** *** ***


Vous pouvez donc choisir de mettre du HTML en mode saisie ou en mode vue ou en mode saisie et vue

Exemple 1 : Je souhaite mettre un titre lorsqu'on rempli le formulaire

Code HTML : <h2>Titre de l'article</h2>
Qui donnera

Titre de l'article



J'édite mon formulaire et je mets la balise :
labelhtml***<h2>Titre de l'article</h2>*** *** *** *** *** *** *** *** *** ***

Le titre sera visible lorsqu'on remplira le formulaire mais pas sur la fiche finale


Exemple 2 : je souhaite que le titre apparaisse en mode saisie et en mode vue

Code HTML : <h2>Titre de l'article</h2>
Qui donnera

Titre de l'article



J'édite mon formulaire et je mets la balise :
labelhtml***<h2>Titre de l'article</h2>*** ***<h2>Titre de l'article</h2>*** *** *** *** *** *** *** ***

Le titre sera visible lorsqu'on remplira le formulaire et également surla fiche finale


Attention à ne pas laisser trainer des espaces entre le code HTML et les petites étoiles, YEswiki risque de ne pas interpréter le code.




D- Exemples de HTML


Les Titres


<h1>Très grand titre</h1>

Qui donnera

Très grand titre



<h2>Un peu moins grand titre</h2>

Qui donnera

Un peu moins grand titre



<h3>Un titre moyen</h3>

Qui donnera

Un titre moyen



<h4>Pas vraiment un titre...</h4>

Qui donnera

Pas vraiment un titre...



<h5>Du texte en mormal</h5>

Qui donnera
Du texte en mormal


Faire un espace


Pour faire un espace dans un formulaire, il faut mettre un bout de code, sauter une ligne ne sert à rien (à part y voir plus clair dans sa page de code)

Espace en mode vue
labelhtml*** *** ***<br />***


Espace en mode saisie
labelhtml***<br />*** *** ***


Espace en mode saisie et vue
labelhtml***<br />*** ***<br />***