ProDon:Back-office 5.0.3 : Différence entre versions

De Logilys
Aller à : navigation, rechercher
 
(30 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 
{{Entete_TOC}}<br>   
 
{{Entete_TOC}}<br>   
  
−
<span style="color: rgb(255, 0, 0);">'''ATTENTION&nbsp;: Ce document est présentement en rédaction/révision, il est possible que certaines parties soient manquantes ou désuètes.'''</span>
 
  
−
<br><span style="color: rgb(255, 0, 0);">'''ATTENTION :'''</span> Cette fonctionnalité est disponible seulement à partir de la '''version 5.0.3''' de '''ProDon'''.  
+
 
 +
'''<u>ATTENTION</u>''' : Cette fonctionnalité est disponible seulement à partir de la '''version 5.0.3''' de '''ProDon'''.  
  
  
 
== Introduction  ==
 
== Introduction  ==
  
−
Le back-office est relié au module Dons en ligne. Il permet de gérer tous les éléments graphiques de votre page d'accueil et de vos formulaires. C'est à partir de cet endroit que vous pouvez modifier vos polices de caractères, vos couleurs ainsi que vos images apparaissant sur votre site Je Donne En Ligne.
+
Le back-office est relié au module Dons en ligne. Il permet de gérer tous les éléments graphiques de la page d'accueil et des formulaires. C'est à partir de cet endroit qu'il sera possible modifier les polices de caractères, les couleurs ainsi que les images apparaissant sur le JeDonneEnLigne de l'organisation.
  
  
Ligne 15 : Ligne 15 :
 
Un compte LogiZone est un profil qui une fois les accès attribués permettra d'accéder au back-office.       
 
Un compte LogiZone est un profil qui une fois les accès attribués permettra d'accéder au back-office.       
  
−
Pour faire la création d'un compte LogiZone, il faut accéder au back-office  
+
Pour faire la création d'un compte LogiZone, il faut accéder au back-office.
  
  
Ligne 25 : Ligne 25 :
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 001.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 001.png]]<br>
 
|}
 
|}
  
Ligne 36 : Ligne 36 :
  
 
|-
 
|-
−
| colspan="2" |[[Fichier:ProDon5 BackOffice_5.0.3 002.png]]<br>
+
| colspan="2" |[[Fichier:ProDon5 Fr BackOffice_5.0.3 002.png]]<br>
  
 
|}
 
|}
Ligne 43 : Ligne 43 :
 
{| class="wikitable"
 
{| class="wikitable"
  
−
|Une fois la fenêtre ouverte, sélectionner le bouton [[Fichier:Bouton_aller_sur_le_site_production.png]]et ensuite sélectionner « Back-office ».
+
|Une fois la fenêtre ouverte, sélectionner le bouton [[Fichier:Bouton_aller_sur_le_site_production.png]]et ensuite sélectionner « Afficher la page de configuration des thèmes ».
 
|-
 
|-
−
|[[Fichier:ProDon5 BackOffice_5.0.3 003.png]]
+
|[[Fichier:ProDon5 Fr BackOffice_5.0.3 003.png]]
 
|}
 
|}
  
Ligne 54 : Ligne 54 :
 
| colspan="2" |Rendu sur la page pour accéder au back-office, il faut faire la création de son compte LogiZone, si inexistant.
 
| colspan="2" |Rendu sur la page pour accéder au back-office, il faut faire la création de son compte LogiZone, si inexistant.
 
|-
 
|-
−
| colspan="2" |[[Fichier:ProDon5 BackOffice_5.0.3 004.png]]
+
| colspan="2" |[[Fichier:ProDon5 Fr BackOffice_5.0.3 004.png]]
 
|-
 
|-
 
| width="50%" |  
 
| width="50%" |  
Ligne 73 : Ligne 73 :
 
Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, il faut donner les accès à ce compte au back-office.   
 
Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, il faut donner les accès à ce compte au back-office.   
  
−
À partir de ProDon, donner accès au compte LogiZone qui pourra apporter des modifications au back-office.
+
À partir de ProDon, il faut donner accès au compte LogiZone qui pourra apporter des modifications au back-office.
  
 
Pour ce faire, il faut se rendre dans la «&nbsp;Gestion des formulaires Web&nbsp;».  
 
Pour ce faire, il faut se rendre dans la «&nbsp;Gestion des formulaires Web&nbsp;».  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
  
  
−
| colspan="2" |  
+
| colspan="2" | Cliquer sur le menu «&nbsp;Configuration&nbsp;», puis choisir <br>
−
Cliquer sur le menu «&nbsp;Configuration&nbsp;», puis choisir «&nbsp;[[Image:Bouton formulaire web.png]] Formulaires Web&nbsp;».  
+
«[[Image:Bouton formulaire web.png]] Formulaires Web&nbsp;».  
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 001.png]]
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 001.png]]
 
|}
 
|}
  
Ligne 96 : Ligne 96 :
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_5.0.3_002.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_5.0.3_002.png]]<br>
  
 
|-
 
|-
Ligne 104 : Ligne 104 :
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
Dans cette fenêtre, il faut aller sur l'onglet Accès JeDonneEnLigne et cliquer sur le [[Fichier:Bouton_%2B.png]] pour ajouter un utilisateur
+
Dans cette fenêtre, il faut aller sur l'onglet « Accès JeDonneEnLigne » et cliquer sur le [[Fichier:Bouton_%2B.png]] pour ajouter un utilisateur.
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 006.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 006.png]]<br>
 
|-
 
|-
 
| '''NOTE:''' À partir du bas de cette fenêtre, il est possible de créer une clé de cryptage. Il n'est pas nécessaire d'en avoir une.
 
| '''NOTE:''' À partir du bas de cette fenêtre, il est possible de créer une clé de cryptage. Il n'est pas nécessaire d'en avoir une.
Ligne 116 : Ligne 116 :
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
Ligne 122 : Ligne 122 :
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 007.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 007.png]]<br>
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''A'''</span>: Dans cette case, il faut entrer le courriel qui est utilisé dans la LogiZone.
 
|<span style="color: rgb(255, 0, 0);">'''A'''</span>: Dans cette case, il faut entrer le courriel qui est utilisé dans la LogiZone.
 
|<span style="color: rgb(255, 0, 0);">'''B'''</span>: Généralement, il faut inscrire le nom de la personne qui utilisera ce courriel pour accéder à la LogiZone.  
 
|<span style="color: rgb(255, 0, 0);">'''B'''</span>: Généralement, il faut inscrire le nom de la personne qui utilisera ce courriel pour accéder à la LogiZone.  
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''C'''</span>: La case à cocher « Back-office » sert à donner les accès à l'utilisateur pour utiliser le back-office.
+
|<span style="color: rgb(255, 0, 0);">'''C'''</span>: La case à cocher « Back-office » donne les accès à l'utilisateur pour utiliser le back-office.
−
|<span style="color: rgb(255, 0, 0);">'''D'''</span>: La case à cocher « Liste des dons en ligne » sert à donner les accès à l'utilisateur pour voir les formulaires.  
+
|<span style="color: rgb(255, 0, 0);">'''D'''</span>: La case à cocher « Liste des dons en ligne » donne les accès à l'utilisateur pour voir les formulaires.  
 
|-
 
|-
−
|<span style="color: rgb(255, 0, 0);">'''E'''</span>: Lorsqu'il y a une clé de cryptage, cette case donne l'accès à l'utilisateur de faire des intégrations sur demande.
+
|<span style="color: rgb(255, 0, 0);">'''E'''</span>: Lorsqu'il y a une clé de cryptage, cette case donne accès à l'utilisateur pour exécuter des intégrations sur demande.
−
|<span style="color: rgb(255, 0, 0);">'''F'''</span>: Il faut écrire le mot de passe de l'utilisateur dans cette case.  
+
|<span style="color: rgb(255, 0, 0);">'''F'''</span>: L'utilisateur devra écrire son mot de passe dans cette case.  
  
 
|}
 
|}
  
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
Le courriel affecté au compte LogiZone apparaitra ici.
+
Le courriel lié au compte LogiZone apparaitra ici.
  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 008.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 008.png]]<br>
 
|-
 
|-
 
|}
 
|}
Ligne 155 : Ligne 155 :
 
Normalement, l'utilisateur arrivera à cette fenêtre:
 
Normalement, l'utilisateur arrivera à cette fenêtre:
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 009.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 009.png]]<br>
 
|-
 
|-
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Il faut s'assurer d'être dans la bonne section.  
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Il faut s'assurer d'être dans la bonne section.  
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Il faut cliquer sur ce bouton pour créer un nouveau thème.
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Il faut cliquer sur ce bouton pour créer un nouveau thème.
 
|}
 
|}
−
=== L'onglet « Option » ===
+
=== L'onglet « Options » ===
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
Ligne 166 : Ligne 166 :
 
Alors, cette fenêtre s'ouvre:
 
Alors, cette fenêtre s'ouvre:
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 010.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 010.png]]<br>
 
|-
 
|-
−
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Cette section permet de choisir le type de thème qui sera créé. Les choix possibles sont: créer un thème pour la page d'accueil et les formulaires, pour la page d'accueil seulement ou pour les formulaires seulement.  
+
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Cette section permet de choisir le type de thème qui sera créé. Les choix possibles sont: créer un thème pour la page d'accueil et les formulaires, créer un thème pour la page d'accueil seulement ou créer un thème pour les formulaires seulement.  
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Cette section permet de définir le nom du thème.  
 
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Cette section permet de définir le nom du thème.  
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''C''':</span> Cette case à cocher permet d'appliquer ce thème par défaut.
 
| <span style="color: rgb(255, 0, 0);">'''C''':</span> Cette case à cocher permet d'appliquer ce thème par défaut.
−
| <span style="color: rgb(255, 0, 0);">'''D''':</span> Cette case à cocher permet d'afficher l'image d'en-tête seulement sur la première page du formulaire.  
+
| <span style="color: rgb(255, 0, 0);">'''D''':</span> Cette case à cocher permet d'afficher l'image d'entête seulement sur la première page du formulaire.  
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''E''':</span> Cette case à cocher permet d'afficher le titre seulement sur la première page du formulaire.  
 
| <span style="color: rgb(255, 0, 0);">'''E''':</span> Cette case à cocher permet d'afficher le titre seulement sur la première page du formulaire.  
 
| <span style="color: rgb(255, 0, 0);">'''F''':</span> Dans toutes les fenêtres, ce bouton retourne à la vue d'ensemble de tout ce qu'il y a dans cette section. Par exemple, lorsque l'utilisateur est dans les thèmes, ce bouton le ramène à la vue d'ensemble de tous les thèmes du back-office. Contrairement aux boutons du fureteur, il ne permet pas de revenir à la page précédente.  
 
| <span style="color: rgb(255, 0, 0);">'''F''':</span> Dans toutes les fenêtres, ce bouton retourne à la vue d'ensemble de tout ce qu'il y a dans cette section. Par exemple, lorsque l'utilisateur est dans les thèmes, ce bouton le ramène à la vue d'ensemble de tous les thèmes du back-office. Contrairement aux boutons du fureteur, il ne permet pas de revenir à la page précédente.  
 
|-
 
|-
−
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''G''':</span> Évidemment, ce bouton permet de sauvegarder les modifications. De plus, dès qu'un changement est détecté dans une section, lorsque l'utilisateur change de section, le back-office demande une sauvegarde.  
+
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''G''':</span> Ce bouton permet de sauvegarder les modifications. De plus, dès qu'un changement est détecté dans une section, lorsque l'utilisateur change de section, le back-office demande une sauvegarde.  
  
 
|}
 
|}
Ligne 187 : Ligne 187 :
 
L'onglet « Palette » permet de définir toutes les couleurs qui seront utilisées dans les autres onglets du back-office. Généralement, les utilisateurs y configurent les couleurs de leur organisation.  
 
L'onglet « Palette » permet de définir toutes les couleurs qui seront utilisées dans les autres onglets du back-office. Généralement, les utilisateurs y configurent les couleurs de leur organisation.  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 011.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 011.png]]<br>
 
|-
 
|-
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour la précision des couleurs, le système du back-office utilise la fonction rvba (rgba en anglais). Les nombres doivent être situés entre 0 et 255. Le premier nombre contrôle la quantité de rouge, le second la quantité de vert, le troisième la quantité de bleu et le dernier chiffre contrôle la transparence (alpha). Plus ce chiffre est près de 1,0, plus cette couleur sera opaque, plus il est près de 0,0, plus cette couleur sera transparente.  
 
| width="50%" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour la précision des couleurs, le système du back-office utilise la fonction rvba (rgba en anglais). Les nombres doivent être situés entre 0 et 255. Le premier nombre contrôle la quantité de rouge, le second la quantité de vert, le troisième la quantité de bleu et le dernier chiffre contrôle la transparence (alpha). Plus ce chiffre est près de 1,0, plus cette couleur sera opaque, plus il est près de 0,0, plus cette couleur sera transparente.  
−
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Si l'utilisateur ne détient pas les nombres pour ses couleurs, il est possible de choisir ses couleurs par cet outil.  
+
| <span style="color: rgb(255, 0, 0);">'''B''':</span> Si l'utilisateur ne détient pas les nombres pour ses couleurs, il est possible de choisir ses couleurs par cet outil. Cet outil s'ouvre en cliquant sur la barre.  
 
|}
 
|}
  
 
=== L'onglet « Polices » ===
 
=== L'onglet « Polices » ===
  
−
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
+
{| class="wikitable" width="20%" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
L'onglet « Polices » permet de définir la police standard et la couleur de la police qui seront utilisées dans les formulaires créés par le back-office. Généralement, les utilisateurs y configurent la police générale de leur organisation avec une couleur qui se lit bien à travers les couleurs de l'organisation.  
+
L'onglet « Polices » permet de définir la police standard et la couleur de la police qui seront utilisées dans les formulaires créés par le back-office. Généralement, les utilisateurs y configurent la police générale de leur organisation avec une couleur qui se lit bien à travers des couleurs de l'organisation.  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 012.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 012.png]]<br>
 
|-
 
|-
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour ouvrir le menu pour configurer la police, il faut cliquer sur la case de la ligne qu'il faut ajuster.  
 
| colspan="2" | <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour ouvrir le menu pour configurer la police, il faut cliquer sur la case de la ligne qu'il faut ajuster.  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 013.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 013.png]]<br>
 
|-
 
|-
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> L'option « Police » permet de choisir l'apparence du texte.
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> L'option « Police » permet de choisir l'apparence du texte.
Ligne 223 : Ligne 223 :
 
L'onglet « Page d'accueil » permet de configurer les couleurs et les polices utilisées dans la page d'accueil.
 
L'onglet « Page d'accueil » permet de configurer les couleurs et les polices utilisées dans la page d'accueil.
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 014.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 014.png]]<br>
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour choisir la couleur de fond de la page d'accueil, il faut passer par l'option « Palette ».
 
| <span style="color: rgb(255, 0, 0);">'''A''':</span> Pour choisir la couleur de fond de la page d'accueil, il faut passer par l'option « Palette ».
Ligne 236 : Ligne 236 :
 
|-
 
|-
 
|<span style="color: rgb(255, 0, 0);">'''G''':</span> L'option « Description sous le nom des formulaires » permet de déterminer la couleur, la taille et le style des descriptions sous le nom des formulaires.  
 
|<span style="color: rgb(255, 0, 0);">'''G''':</span> L'option « Description sous le nom des formulaires » permet de déterminer la couleur, la taille et le style des descriptions sous le nom des formulaires.  
−
|<span style="color: rgb(255, 0, 0);">'''H''':</span> L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.  
+
|<span style="color: rgb(255, 0, 0);">'''H''':</span> L'option « Contour des boites actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.  
 
|-
 
|-
 
| colspan="2" |<span style="color: rgb(255, 0, 0);">'''I''':</span> L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons de la page d'accueil.   
 
| colspan="2" |<span style="color: rgb(255, 0, 0);">'''I''':</span> L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons de la page d'accueil.   
Ligne 250 : Ligne 250 :
 
|-
 
|-
  
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 015.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 015.png]]<br>
  
 
|-
 
|-
Ligne 283 : Ligne 283 :
  
  
−
|<span style="color: rgb(255, 0, 0);">'''J''':</span> L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre de la page d'accueil.
+
|<span style="color: rgb(255, 0, 0);">'''J''':</span> L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre des formulaires.  
−
 
 
 
|-
 
|-
  
Ligne 290 : Ligne 289 :
  
  
−
|<span style="color: rgb(255, 0, 0);">'''L''':</span> L'option « Contour des boîtes actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.  
+
|<span style="color: rgb(255, 0, 0);">'''L''':</span> L'option « Contour des boites actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.  
  
 
|-
 
|-
Ligne 303 : Ligne 302 :
 
=== L'onglet « CSS » ===
 
=== L'onglet « CSS » ===
  
 +
Cet onglet a été retiré du mode création, mais il apparaitra quand le thème sera nommé.
 +
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
{| class="wikitable" width="200" cellspacing="1" cellpadding="1" border="1"
 
|-
 
|-
Ligne 310 : Ligne 311 :
 
|-
 
|-
  
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 016.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 016.png]]<br>
  
 
|-
 
|-
Ligne 318 : Ligne 319 :
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> Si jamais l'utilisateur est très à l'aise et qu'il connait la programmation en CSS, il est possible d'éliminer tous les onglets (Options, palette, polices, page d'accueil, formulaire) pour n'avoir que l'onglet CSS. Pour ce faire, simplement cliquer sur la case « Utiliser mon CSS ».  
 
| width="50%" |<span style="color: rgb(255, 0, 0);">'''B''':</span> Si jamais l'utilisateur est très à l'aise et qu'il connait la programmation en CSS, il est possible d'éliminer tous les onglets (Options, palette, polices, page d'accueil, formulaire) pour n'avoir que l'onglet CSS. Pour ce faire, simplement cliquer sur la case « Utiliser mon CSS ».  
  
−
'''ATTENTION:''' Lorsque cette case est cochée et décochée successivement et qu'aucune information n'a été sauvegardée encore, aucun changement ne sera sauvegardé et l'utilisateur sera retourné à la page pour ajouter des thèmes.
 
 
|}
 
|}
  
Ligne 325 : Ligne 325 :
 
Pour ajouter des fichiers, il faut cliquer sur la section « Mes fichiers » et cliquer sur ajouter.
 
Pour ajouter des fichiers, il faut cliquer sur la section « Mes fichiers » et cliquer sur ajouter.
  
−
[[Fichier:ProDon5_BackOffice_5.0.3_017.png]]
+
[[Fichier:ProDon5_Fr BackOffice_5.0.3_017.png]]
  
  
Ligne 331 : Ligne 331 :
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
Ensuite, cette fenêtre ouvrira:
+
Ensuite, cette fenêtre s'ouvrira:
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 018.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 018.png]]<br>
 
|-
 
|-
 
| colspan="2" | Il faudra alors aller trouver les images qui doivent être ajoutées.  
 
| colspan="2" | Il faudra alors aller trouver les images qui doivent être ajoutées.  
Ligne 341 : Ligne 341 :
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
Ensuite, cette fenêtre ouvrira:
+
Ensuite, cette fenêtre s'ouvrira:
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5 BackOffice_5.0.3 019.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5 Fr BackOffice_5.0.3 019.png]]<br>
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''A''':</span> Ici, l'utilisateur peut voir le fichier qui vient d'être ajouté.  
 
| <span style="color: rgb(255, 0, 0);">'''A''':</span> Ici, l'utilisateur peut voir le fichier qui vient d'être ajouté.  
Ligne 355 : Ligne 355 :
 
Pour créer un groupe d'images, il faut cliquer sur la section « Mes groupes d'images » et cliquer sur ajouter.  
 
Pour créer un groupe d'images, il faut cliquer sur la section « Mes groupes d'images » et cliquer sur ajouter.  
  
−
[[Fichier:ProDon5_BackOffice_5.0.3_020.png]]
+
[[Fichier:ProDon5_Fr BackOffice_5.0.3_020.png]]
  
  
Ligne 361 : Ligne 361 :
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
Ensuite, cette fenêtre ouvrira:
+
Ensuite, cette fenêtre s'ouvrira:
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_5.0.3_021.png]]<br>
+
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_5.0.3_021.png]]<br>
  
 
|-
 
|-
Ligne 376 : Ligne 376 :
 
| '''Note ''':  De plus, la grandeur minimale des images de réseaux sociaux est de 600 x 315 pixels. La taille recommandée est de 1200 x 630 pixels. Pour toute autre taille, il est recommandé de suivre le ratio 1.91:1.
 
| '''Note ''':  De plus, la grandeur minimale des images de réseaux sociaux est de 600 x 315 pixels. La taille recommandée est de 1200 x 630 pixels. Pour toute autre taille, il est recommandé de suivre le ratio 1.91:1.
 
|-
 
|-
−
| <span style="color: rgb(255, 0, 0);">'''F''':</span> Cette option permet de définir l'image d'en-tête lorsque les formulaires seront appelés par un ordinateur.
+
| <span style="color: rgb(255, 0, 0);">'''F''':</span> Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par un ordinateur.
 
| <span style="color: rgb(255, 0, 0);">'''G''':</span> Cette case permet de définir la dimension de l'image en pourcentage.  
 
| <span style="color: rgb(255, 0, 0);">'''G''':</span> Cette case permet de définir la dimension de l'image en pourcentage.  
 
|-
 
|-
 
| <span style="color: rgb(255, 0, 0);">'''H''':</span> Cette case permet de choisir si l'image est alignée à gauche, à droite ou au centre.  
 
| <span style="color: rgb(255, 0, 0);">'''H''':</span> Cette case permet de choisir si l'image est alignée à gauche, à droite ou au centre.  
  
−
| <span style="color: rgb(255, 0, 0);">'''I''':</span> Cette option permet de définir l'image d'en-tête lorsque les formulaires seront appelés par une tablette.
+
| <span style="color: rgb(255, 0, 0);">'''I''':</span> Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par une tablette.
 
|-
 
|-
−
| <span style="color: rgb(255, 0, 0);">'''J''':</span> Cette option permet de définir l'image d'en-tête lorsque les formulaires seront appelés par un cellulaire.
+
| <span style="color: rgb(255, 0, 0);">'''J''':</span> Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par un cellulaire.
  
−
| <span style="color: rgb(255, 0, 0);">'''K''':</span> Il est important de considérer cet avertissement. Il n'y a pas vraiment de limite concernant la hauteur, mais la largeur des images d'en-tête ne doit pas dépasser 960 pixels.
+
| <span style="color: rgb(255, 0, 0);">'''K''':</span> Il est important de considérer cet avertissement. Il n'y a pas vraiment de limite concernant la hauteur, mais la largeur des images d'entête ne doit pas dépasser 960 pixels.
 
|-
 
|-
 
| colspan="2" | '''NOTE:''' Pour les images de fond, la taille maximale suggérée pour les images de fonds est de 1920 x 1080 pixels. Si l'image est plus grande, il est possible que le fureteur ne charge pas l'image.
 
| colspan="2" | '''NOTE:''' Pour les images de fond, la taille maximale suggérée pour les images de fonds est de 1920 x 1080 pixels. Si l'image est plus grande, il est possible que le fureteur ne charge pas l'image.
Ligne 398 : Ligne 398 :
 
| colspan="2" | Alors, partout où cette section est apparue, il faut cliquer sur le bouton « Production ».  
 
| colspan="2" | Alors, partout où cette section est apparue, il faut cliquer sur le bouton « Production ».  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_5.0.3_022.png]]
+
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_5.0.3_022.png]]
 
|-
 
|-
 
| colspan="2" | Lorsque le bouton est rouge, le formulaire/le groupe d'images n'a jamais été mis en production.  
 
| colspan="2" | Lorsque le bouton est rouge, le formulaire/le groupe d'images n'a jamais été mis en production.  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_5.0.3_023.png]]
+
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_5.0.3_023.png]]
 
|-
 
|-
 
| colspan="2" | Lorsque le bouton est jaune, le formulaire/le groupe d'images a été modifié et les modifications ne sont pas encore appliquées, donc elles ne sont pas en production.  
 
| colspan="2" | Lorsque le bouton est jaune, le formulaire/le groupe d'images a été modifié et les modifications ne sont pas encore appliquées, donc elles ne sont pas en production.  
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_5.0.3_024.png]]
+
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_5.0.3_024.png]]
 
|-
 
|-
 
| colspan="2" | Quand le bouton est vert, le formulaire/le groupe d'images est en production et toutes les modifications sont en fonctions.
 
| colspan="2" | Quand le bouton est vert, le formulaire/le groupe d'images est en production et toutes les modifications sont en fonctions.
Ligne 417 : Ligne 417 :
 
|-
 
|-
 
| colspan="2" |  
 
| colspan="2" |  
−
Ensuite, cette fenêtre ouvrira:
+
Ensuite, il faut retourner à cette fenêtre:
 
|-
 
|-
−
| colspan="2" | [[Fichier:ProDon5_BackOffice_5.0.3_025.png]]
+
| colspan="2" | [[Fichier:ProDon5_Fr BackOffice_5.0.3_025.png]]
  
 
|-
 
|-

Version actuelle datée du 18 mai 2018 à 13:01

Back-office 5.0.3


ATTENTION : Cette fonctionnalité est disponible seulement à partir de la version 5.0.3 de ProDon.


Introduction

Le back-office est relié au module Dons en ligne. Il permet de gérer tous les éléments graphiques de la page d'accueil et des formulaires. C'est à partir de cet endroit qu'il sera possible modifier les polices de caractères, les couleurs ainsi que les images apparaissant sur le JeDonneEnLigne de l'organisation.


Création d'un compte LogiZone

Un compte LogiZone est un profil qui une fois les accès attribués permettra d'accéder au back-office.

Pour faire la création d'un compte LogiZone, il faut accéder au back-office.


Pour ce faire, il faut se rendre dans la « Gestion des formulaires Web ».

Cliquer sur le menu « Configuration », puis choisir « Bouton formulaire web.png Formulaires Web ».

ProDon5 Fr BackOffice 5.0.3 001.png


Après avoir cliqué sur « Bouton formulaire web.png Formulaires Web », la fenêtre suivante s'ouvre.

ProDon5 Fr BackOffice 5.0.3 002.png


Une fois la fenêtre ouverte, sélectionner le bouton Bouton aller sur le site production.pnget ensuite sélectionner « Afficher la page de configuration des thèmes ».
ProDon5 Fr BackOffice 5.0.3 003.png



Rendu sur la page pour accéder au back-office, il faut faire la création de son compte LogiZone, si inexistant.
ProDon5 Fr BackOffice 5.0.3 004.png

A : Permet d'entrer dans une LogiZone active en entrant le nom d'utilisateur ou l'adresse courriel.

B : Entrer le mot de passe de la LogiZone existante.
C : Utiliser le lien pour permettre d'attribuer un nouveau mot de passe à la LogiZone existante. D : Permet de créer un nouveau compte LogiZone.
E : Permet d'en savoir plus sur le compte LogiZone.

Accès au back-office

Pour être en mesure d'accéder au back-office, il faut au préalable avoir un compte LogiZone. Une fois le compte LogiZone créé, il faut donner les accès à ce compte au back-office.

À partir de ProDon, il faut donner accès au compte LogiZone qui pourra apporter des modifications au back-office.

Pour ce faire, il faut se rendre dans la « Gestion des formulaires Web ».

Cliquer sur le menu « Configuration », puis choisir

«Bouton formulaire web.png Formulaires Web ».

ProDon5 Fr BackOffice 5.0.3 001.png


Après avoir cliqué sur « Bouton formulaire web.png Formulaires Web », la fenêtre suivante s'ouvre.

ProDon5 Fr BackOffice 5.0.3 002.png

Alors, il faudra appuyer sur ce bouton Bouton configurer votre site Web.png.


Dans cette fenêtre, il faut aller sur l'onglet « Accès JeDonneEnLigne » et cliquer sur le Bouton +.png pour ajouter un utilisateur.

ProDon5 Fr BackOffice 5.0.3 006.png
NOTE: À partir du bas de cette fenêtre, il est possible de créer une clé de cryptage. Il n'est pas nécessaire d'en avoir une.


Ensuite, cette fenêtre s'ouvre:

ProDon5 Fr BackOffice 5.0.3 007.png
A: Dans cette case, il faut entrer le courriel qui est utilisé dans la LogiZone. B: Généralement, il faut inscrire le nom de la personne qui utilisera ce courriel pour accéder à la LogiZone.
C: La case à cocher « Back-office » donne les accès à l'utilisateur pour utiliser le back-office. D: La case à cocher « Liste des dons en ligne » donne les accès à l'utilisateur pour voir les formulaires.
E: Lorsqu'il y a une clé de cryptage, cette case donne accès à l'utilisateur pour exécuter des intégrations sur demande. F: L'utilisateur devra écrire son mot de passe dans cette case.


Le courriel lié au compte LogiZone apparaitra ici.

ProDon5 Fr BackOffice 5.0.3 008.png

Créer des thèmes dans le back-office

Ensuite, refaire les étapes de la création de LogiZone, mais au lieu d'en créer une nouvelle, il faut se connecter sur la session.

Normalement, l'utilisateur arrivera à cette fenêtre:

ProDon5 Fr BackOffice 5.0.3 009.png
A: Il faut s'assurer d'être dans la bonne section. B: Il faut cliquer sur ce bouton pour créer un nouveau thème.

L'onglet « Options »

Alors, cette fenêtre s'ouvre:

ProDon5 Fr BackOffice 5.0.3 010.png
A: Cette section permet de choisir le type de thème qui sera créé. Les choix possibles sont: créer un thème pour la page d'accueil et les formulaires, créer un thème pour la page d'accueil seulement ou créer un thème pour les formulaires seulement. B: Cette section permet de définir le nom du thème.
C: Cette case à cocher permet d'appliquer ce thème par défaut. D: Cette case à cocher permet d'afficher l'image d'entête seulement sur la première page du formulaire.
E: Cette case à cocher permet d'afficher le titre seulement sur la première page du formulaire. F: Dans toutes les fenêtres, ce bouton retourne à la vue d'ensemble de tout ce qu'il y a dans cette section. Par exemple, lorsque l'utilisateur est dans les thèmes, ce bouton le ramène à la vue d'ensemble de tous les thèmes du back-office. Contrairement aux boutons du fureteur, il ne permet pas de revenir à la page précédente.
G: Ce bouton permet de sauvegarder les modifications. De plus, dès qu'un changement est détecté dans une section, lorsque l'utilisateur change de section, le back-office demande une sauvegarde.

L'onglet « Palette »

L'onglet « Palette » permet de définir toutes les couleurs qui seront utilisées dans les autres onglets du back-office. Généralement, les utilisateurs y configurent les couleurs de leur organisation.

ProDon5 Fr BackOffice 5.0.3 011.png
A: Pour la précision des couleurs, le système du back-office utilise la fonction rvba (rgba en anglais). Les nombres doivent être situés entre 0 et 255. Le premier nombre contrôle la quantité de rouge, le second la quantité de vert, le troisième la quantité de bleu et le dernier chiffre contrôle la transparence (alpha). Plus ce chiffre est près de 1,0, plus cette couleur sera opaque, plus il est près de 0,0, plus cette couleur sera transparente. B: Si l'utilisateur ne détient pas les nombres pour ses couleurs, il est possible de choisir ses couleurs par cet outil. Cet outil s'ouvre en cliquant sur la barre.

L'onglet « Polices »

L'onglet « Polices » permet de définir la police standard et la couleur de la police qui seront utilisées dans les formulaires créés par le back-office. Généralement, les utilisateurs y configurent la police générale de leur organisation avec une couleur qui se lit bien à travers des couleurs de l'organisation.

ProDon5 Fr BackOffice 5.0.3 012.png
A: Pour ouvrir le menu pour configurer la police, il faut cliquer sur la case de la ligne qu'il faut ajuster.
ProDon5 Fr BackOffice 5.0.3 013.png
B: L'option « Police » permet de choisir l'apparence du texte. C: L'option « Couleur du texte » permet de choisir la couleur des écritures dans les formulaires et la page d'accueil.
D: L'option « Palette » permet de choisir la couleur du texte parmi les couleurs définies dans l'onglet précédent. Elle est utilisée dans plusieurs sections du Back-office. E: L'option « Style » permet d'afficher le texte en gras (B) ou en italique (I).
F: L'option « Taille » permet de déterminer la taille du texte. G: La section « Aperçu » donne la chance de prévisualiser tous les choix précédemment effectués.

L'onglet « Page d'accueil »

L'onglet « Page d'accueil » permet de configurer les couleurs et les polices utilisées dans la page d'accueil.

ProDon5 Fr BackOffice 5.0.3 014.png
A: Pour choisir la couleur de fond de la page d'accueil, il faut passer par l'option « Palette ». B: L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section.
C: L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard. D: L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. Lorsque cette option est activée, la section « Titre » est affichée.
E: L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre de la page d'accueil. F: L'option « Nom des formulaires » permet de déterminer la couleur, la taille et le style des noms des formulaires.
G: L'option « Description sous le nom des formulaires » permet de déterminer la couleur, la taille et le style des descriptions sous le nom des formulaires. H: L'option « Contour des boites actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.
I: L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons de la page d'accueil.

L'onglet « Formulaire »

L'onglet « Formulaire » permet de configurer les couleurs et les polices utilisées dans les formulaires.
ProDon5 Fr BackOffice 5.0.3 015.png
A: Pour choisir la couleur de fond des formulaires, il faut passer par l'option « Palette ». B: L'option « Entête des sections » permet de choisir la couleur, la taille, le style et la couleur de fond des entêtes de section.
C: L'option « Contenu des sections » permet de choisir la couleur de fond du contenu des sections. La police utilisée sera la police standard. D: L'option « Barre d'étape » permet de choisir la couleur, la taille, le style et la couleur de fond de la barre d'étape.
E: L'option « Barre d'étape (page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond de la page active de la barre d'étape.


F: La case à cocher « Afficher le rond dans la barre d'étape » permet d'afficher un cercle dans lequel il y aura les numéros d'étapes. Il faut que cette case soit cochée pour voir les options G et H .
G: L'option « Barre d'étape rond » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle dans la barre d'étape.


H: L'option « Barre d'étape rond(page courante) » permet de choisir la couleur, la taille, le style et la couleur de fond du cercle de la page active de la barre d'étape.
I: L'option « Afficher le titre? » permet de choisir si le titre est affiché ou non. Il faut que cette option soit activée pour que la section « Titre » soit affichée.


J: L'option « Titre » permet de choisir la couleur, la taille, le style et la couleur de fond du titre des formulaires.
K: L'option « Titre des participants » permet de déterminer la couleur, la taille et le style des titres des participants.


L: L'option « Contour des boites actives » permet de déterminer dans les couleurs de la palette la couleur du contour des boites actives. Une boite active est la boite actuellement sélectionnée.
M: L'option « Boutons » permet de configurer la couleur de fond et la couleur de texte ainsi que le style des boutons des formulaires. N: L'option « Bouton (confirmer) » permet de configurer la couleur de fond

et la couleur de texte ainsi que le style du bouton confirmer des formulaires.

L'onglet « CSS »

Cet onglet a été retiré du mode création, mais il apparaitra quand le thème sera nommé.

L'onglet « CSS » permet de configurer les couleurs et les polices utilisées dans les formulaires.
ProDon5 Fr BackOffice 5.0.3 016.png
A: CSS est pour « Cascading Style Sheet ». C'est un langage de programmation qui ne sert qu'à ajuster les éléments visuels. Il n'est pas recommandé de toucher à cette fenêtre. B: Si jamais l'utilisateur est très à l'aise et qu'il connait la programmation en CSS, il est possible d'éliminer tous les onglets (Options, palette, polices, page d'accueil, formulaire) pour n'avoir que l'onglet CSS. Pour ce faire, simplement cliquer sur la case « Utiliser mon CSS ».

Ajouter des fichiers dans le back-office

Pour ajouter des fichiers, il faut cliquer sur la section « Mes fichiers » et cliquer sur ajouter.

ProDon5 Fr BackOffice 5.0.3 017.png


Ensuite, cette fenêtre s'ouvrira:

ProDon5 Fr BackOffice 5.0.3 018.png
Il faudra alors aller trouver les images qui doivent être ajoutées.

Ensuite, cette fenêtre s'ouvrira:

ProDon5 Fr BackOffice 5.0.3 019.png
A: Ici, l'utilisateur peut voir le fichier qui vient d'être ajouté. B: L'utilisateur peut voir la quantité d'espace que prennent ses fichiers.
C: Pour retirer un fichier, il faut cliquer sur le bouton supprimer.

Créer un groupe d'images dans le back-office

Pour créer un groupe d'images, il faut cliquer sur la section « Mes groupes d'images » et cliquer sur ajouter.

ProDon5 Fr BackOffice 5.0.3 020.png


Ensuite, cette fenêtre s'ouvrira:

ProDon5 Fr BackOffice 5.0.3 021.png
A: C'est ici qu'il faut nommer le groupe d'images. B: Cette case à cocher permet d'utiliser ce groupe d'images par défaut.
C: Cette option permet de définir l'image de fond de la page d'accueil. D: Cette option permet de définir l'image de fond des formulaires.
E: Cette option permet de choisir l'image qui apparaitra sur les réseaux sociaux quand le formulaire ou la page d'accueil sera partagé. Note : De plus, la grandeur minimale des images de réseaux sociaux est de 600 x 315 pixels. La taille recommandée est de 1200 x 630 pixels. Pour toute autre taille, il est recommandé de suivre le ratio 1.91:1.
F: Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par un ordinateur. G: Cette case permet de définir la dimension de l'image en pourcentage.
H: Cette case permet de choisir si l'image est alignée à gauche, à droite ou au centre. I: Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par une tablette.
J: Cette option permet de définir l'image d'entête lorsque les formulaires seront appelés par un cellulaire. K: Il est important de considérer cet avertissement. Il n'y a pas vraiment de limite concernant la hauteur, mais la largeur des images d'entête ne doit pas dépasser 960 pixels.
NOTE: Pour les images de fond, la taille maximale suggérée pour les images de fonds est de 1920 x 1080 pixels. Si l'image est plus grande, il est possible que le fureteur ne charge pas l'image.

Envoyer les formulaires en production

Après avoir créé toutes les bases du back-office, il est temps d'envoyer le tout en production.

Alors, partout où cette section est apparue, il faut cliquer sur le bouton « Production ».
ProDon5 Fr BackOffice 5.0.3 022.png
Lorsque le bouton est rouge, le formulaire/le groupe d'images n'a jamais été mis en production.
ProDon5 Fr BackOffice 5.0.3 023.png
Lorsque le bouton est jaune, le formulaire/le groupe d'images a été modifié et les modifications ne sont pas encore appliquées, donc elles ne sont pas en production.
ProDon5 Fr BackOffice 5.0.3 024.png
Quand le bouton est vert, le formulaire/le groupe d'images est en production et toutes les modifications sont en fonctions.

Lier le back-office dans ProDon

Ensuite, il faut retourner à cette fenêtre:

ProDon5 Fr BackOffice 5.0.3 025.png
A: Dans cette case, l'utilisateur pourra sélectionner le thème qu'il vient de créer sur le back-office. B: Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en français.
C: Dans cette case, l'utilisateur pourra sélectionner le groupe d'images qu'il souhaite utiliser quand la page d'accueil et les formulaires sont en anglais. D: Il ne faut pas oublier d'ajuster les libellés en français et en anglais, car ce seront des éléments qui apparaitront en ligne.

Nom du document : ProDon:Back-office 5.0.3
Version : 5.0.3


Récupérée de « http://wikifr.logilys.com/index.php?title=ProDon:Back-office_5.0.3&oldid=18580 »