Tutoriel
Création de contenu pour le nouveau site du Club
Préambule
Ceci est un tutoriel à suivre pour te permettre de créer du contenu (articles, évènements, pages, menus, …) sur le nouveau site internet du Club.
NB : ce tuto est uniquement dédié aux personnes disposant des rôles nécessaires (cf. chapitre sur les Catégories et Rôles).
Ce document est organisé comme suit : Chapitre 1 : Organisation générale du site
Chapitre 2 : Présentation des Catégories et Rôles
Chapitre 3 : Logique d’imbrication des ressources du site
Chapitre 4 : Comment modifier le Thème et la page d’Accueil du site Chapitre 5 : Comment modifier les informations sur l’Association
Chapitre 6 : Comment modifier le contenu du site, avec les principales sous-parties suivantes : 6.1 : gérer les menus
6.2 : gérer les pages
6.3 : ajouter/modifier des actualités et Evènements 6.4 : gérer les albums photos
6.5 : gérer les documents
Chapitre 7 : FAQ (Foire Aux Questions
Ce document est destiné à évoluer pour être le plus utile possible. Si tu remarques un oubli, une erreur ou une amélioration, n’hésites pas à le remonter !
1. Organisation générale du site
Le site se trouve à l’adresse suivante : https://www.cyclofonsorbais.fr
NB : Il peut arriver que sur certaines pages, tu remarques que l’adresse change en
https://www.pepsup.com/community-manager/… C’est parce que tu te trouves sur les pages d’administration du site.
On peut synthétiser l’organisation du site selon le schéma suivant :
Tutoriel
Création de contenu pour le nouveau site du Club
Site Internet / Pages publiques
Description : pages accessibles par tout le monde.
Commentaire : Ex. de copie d’écran :
Site Internet / Pages publiques
Description : l’ensemble des pages accessibles uniquement par les adhérents du club après leur authentification Commentaire : Voir le tuto dédié à « comment créer son compte » pour activer son compte et s’authentifier Ex. de copie d’écran :
Tutoriel
Création de contenu pour le nouveau site du Club
Tableau de bord Adhérent
Description : pages spécifique à chaque adhérent leur permettant de gérer leurs informations (paiements, informations personnelles, changement de mot de passe, …
Commentaire : Pages uniquement accessibles aux adhérents (cf. tuto spécifique) Ex. de copie d’écran :
Espace Administration
Description : pages d’administration permettant de modifier le site Commentaire : Pages uniquement accessibles aux personnes :
- Adhérentes
- Ayant au moins un des droits définis au chapitre 2 Ex. de copies d’écran :
Tutoriel
Création de contenu pour le nouveau site du Club
2. Présentation des attributs Catégories et Rôles
Les différentes pages et parties du site peuvent être limitées en accès selon un ensemble d’attributs liés aux utilisateurs.
Le fournisseur de plate-forme PEP’sUP a défini 2 types d’attribut qui peuvent être liés à un utilisateur, comme le montre la copie d’écran suivante :
Dans le cas du CycloClub Fonsorbais, nous n’utilisons pas la totalité des valeurs possibles pour chaque attribut. Ce choix peut être amener à évoluer :
Catégorie Description Commentaire
Adhérent Toute personne ayant payé son adhésion au club Cette valeur permet de limiter la
Tutoriel
Création de contenu pour le nouveau site du Club
visibilité des pages du site Internet aux seuls membre du Club.
Membre du
Bureau Comme son nom l’indique…
Les autres catégories ne sont pas utilisées
Rôle Description Commentaire
Community Manager
Super Administrateur de tous les services de l’application (englobe tous les autres rôles)
Droit octroyé à peu de personnes du Bureau Contenu Rôle de gestionnaire des données publiées sur le site Internet Dans la version actuelle de
l’application, pas de rôle fin (pour limiter la capacité à un type de données par ex.) Rôle donné uniquement aux membres du Bureau Contacts (lecture
seule)
Rôle permettant de consulter les données des adhérents Rôle donné uniquement aux membres du Bureau Communication Permet d’envoyer mails et SMS au nom du Club Rôle octroyé au Secrétaire du
Club Les autres rôles ne sont pas utilisées
NB : seules les personnes disposant du rôle Community Manager peuvent modifier les valeurs des attributs catégories ou Rôles pour un utilisateur géré par l’application.
Exemple d’utilisation de ses attributs :
- page publique : aucun attribut nécessaire - pages dans le menu « espace adhérents » :
o catégorie = « adhérent »
- page « espace adhérents »/ »guide de configuration du site » : o catégorie = « adhérent »
o rôles = « Community Manager » ou « Contenu »
3. Logique d’imbrication des ressources du site
Le site Internet utilise plusieurs ressources pour afficher des informations. Le schéma ci-dessous montre leurs liaisons :
Tutoriel
Création de contenu pour le nouveau site du Club
Tableau de description des ressources :
Ressource Description Commentaire
photo Tout fichier photo copié sur le site pour créer un album photos ou pour agrémenter une page, article, événement, …
Une photo est forcément intégrée dans un une ressource « Album photos »
fichier Tout fichier autre qu’une photo copié sur le site Un fichier est forcément défini dans une ressource « Document »
Album photos Ensemble de photos.
Peut constituer soit une réserve de photos pour agrémenter un article, évènement, soit pour un album pour être visualiser tel quel sur le site
Par défaut, les albums sont affichés dans le menu « Informations » du site.
Actualité Ressource importante qui permet de présenter une
information sur le site Par défaut, une actualité est affichée sur la page d’accueil et dans le menu
« informations ».
Une actualité peut également être accessible depuis une autre page du site.
Evènement Ressource importante qui permet de présenter une activité planifiée du Club
Par défaut, un événement est affiché sur la page d’accueil et dans le menu
« informations » du site.
Un événement peut également être accessible depuis une autre page du site.
Page Ressource affichée sur le site. Présente :
- soit des données et images directement - soit des liens externes (vers des sites autres
que celui du club)
- soit des liens internes (vers d’autres pages, des articles, évènements, …)
Menu Permet d’organiser les pages sur le site Page d’accueil Page spécifique d’arrivée sur le site
Les chapitres suivants explicitent comment modifier chacune de ces ressources.
4. Gestion du thème et de la page d’accueil du site
Fonctions accessibles depuis le menu ci-dessous :
chapitre à compléter
Tutoriel
Création de contenu pour le nouveau site du Club
5. Gestion des informations sur l’Association
Fonctions accessibles depuis le menu ci-dessous :
chapitre à compléter
6. Gestion du contenu du site
Fonctions accessibles depuis le menu ci-dessous :
6.1 Gérer les menus
chapitre à compléter
6.2 Gérer les pages
chapitre à compléter
6.3 Gérer les actualités et évènements
Créer/modifier une actualité
On accède au menu de gestion des actualités en cliquant sur le bouton « Actualités » dans la barre de menus à gauche.
Tutoriel
Création de contenu pour le nouveau site du Club
Exemple d’écran :
Informations liées à une actualité :
Date de publication : par défaut la date de création de l’actualité, mais la date peut être modifiée si l’information est plus ancienne ou à afficher dans le futur (cf. plus bas).
NB : important car les actualités sont affichées dans la page d’accueil et le menu Informations dans l’ordre chronologique.
Titre de l’actualité : titre affiché dans les pages pour cette actualité.
Image : optionnel. Image d’accompagnement de l’actualité (cf. plus bas). Sera affichée à gauche du texte :
Etat : « publié » ou « brouillon ». Seules les actualités publiées sont visibles Actions :
Tutoriel
Création de contenu pour le nouveau site du Club
Ouvre une nouvelle page pour visualiser le rendu de l’actualité
Ouvre une fenêtre pour éditer l’actualité Cf. plus bas
Supprime l’actualité L’actualité n’est plus affichée dans les
différentes pages du site NB : si une page référence
spécifiquement cette actualité, le lien ne sera plus valable mais ne sera pas supprimé
Cliquons le bouton de modification de l’actualité exemple montrée page précédente :
Extrait : pas utilisé
Etat : Publié ou Brouillon (valeur par défaut)
Date de publication : par défaut, la date du jour de publication de l’actualité. Peut être positionnée dans le passé (affichage ordre chronologique) ou dans le futur (la page sera affichée à partir de la date configurée, très pratique pour préparer des informations en avance).
NB : la modification de la date n’est pas très simple, il faut se positionner exactement sur la partie de la date à modifier pour la changer, les flèches du clavier ne fonctionnent pas.
Visibilité : cf. chapitre 3 : - par défaut « public »
- en cliquant sur privé, on peut sélectionner la catégorie ou le(s) rôle(s) nécessaires à l’utilisateur pour visualiser l’actualité. Pour l’instant, nous utilisons les configurations suivantes :
Tutoriel
Création de contenu pour le nouveau site du Club
o catégorie = « adhérent » è visible pour tous les membres du club
o catégorie = « membres du bureau » è visibilité limitée aux membres du Bureau Page de couverture : optionnel (par défaut, l’actualité a comme image le logo du club). Pour ajouter une image :
- cliquer sur le bouton « sélectionner une image » - choisir une image stockée sur votre ordinateur
- veiller à choisir une image pas trop grosse (pour le temps d’affichage) et de bon type (les info sont affichées sur la page).
Article : corps du texte de l’actualité.
Le module de rédaction est de type « WYSIWYG » (What You See Is What You Get - ce que vous soyez est ce que vous obtenez). Détaillons un peu plus les principaux boutons de rédaction (en pointant sans cliquer sur un bouton, une petite aide en bulle s’affiche) :
: options de copier/coller
: ajout d’un lien : sélectionner dans la page un mot ou une image, puis cliquer sur ce bouton.
La fenêtre suivante apparaît :
Onglet information sur le lien
Display text : le mot/groupe de mots sélectionné Type de lien : laisser « URL »
Protocole : laisser « http »
URL : coller ici l’adresse de la page destination du lien
Onglet cible
Cible : définit la manière dont la page cible va s’afficher. Par défaut, elle s’affiche en
remplacement de la page actuelle. A modifier Choisir dans le menu déroulant « nouvelle fenêtre »
La page cible va s’afficher dans un nouvel onglet du navigateur, ce qui est plus pratique et propre pour les utilisateurs.
Tutoriel
Création de contenu pour le nouveau site du Club
: ajout d’une image de la bibliothèque : en ayant positionné le curseur à l’endroit du texte où faire apparaître la photo :
2 manières d’ajouter une image dans un article :
- copier coller une image d’une autre page via la fonction du navigateur ;
- ajouter une image depuis un album photo. Pour cela, en cliquant sur le bouton, apparaît la fenêtre suivante :
Onglet information sur l’image
URL : copier l’adresse de l’image (pas utilisé) Cliquer sur le bouton « parcourir le serveur » Une fenêtre de sélection d’une image dans les albums photo apparaît. Choisir la photo Texte alternatif : pas utilisé
Largeur/Hauteur : permet de redimensionner la photo.
PS : laisser l’icône du cadenas fermé (conserve le ratio largeur/hauteur pour ne pas déformer l’image)
Alignement : permet de définir si la photo sera alignée à gauche, au centre ou à droite de la page.
Onglet Lien
utilisé dans le cas où l’image est elle-même un lien (sinon inutile)
Cible : définit la manière dont l’image va s’afficher. Par défaut, elle s’affiche en
remplacement de la page actuelle. A modifier Choisir dans le menu déroulant « nouvelle fenêtre »
La page cible va s’afficher dans un nouvel onglet du navigateur, ce qui est plus pratique et propre pour les utilisateurs.
: formats d’écriture (principaux boutons à utiliser, liste non exhaustive) : - classique d’un outil de rédaction (gras, italique, barré)
- liste à points ou numérotée
- alignement du texte (gauche, droit, centré, justifié)
- taille : on utilise principalement la taille 16 ou 18 pour les titres Pour sauvegarder l’actualité :
Tutoriel
Création de contenu pour le nouveau site du Club
Annuler : revient à la liste des actualités sans sauvegarde Enregistrer : sauvegarde l’article mais reste sur la page
Enregistrer et retour aux actualités : sauvegarde l’article et retourne à la page listant les actualités.
Une nouvelle ligne apparaît référençant la nouvelle actualité
PS : selon la date configurée, il se peut que l’actualité ne se trouve pas dans la page affichée.
Les boutons permettent de naviguer dans la liste des actualités.
Créer/modifier un évènement
On accède au menu de gestion des évènements en cliquant sur le bouton « Evènements» dans la barre de menus à gauche.
Exemple d’écran :
Date de publication : par défaut la date de création de l’article, mais la date peut être modifiée si l’évènement est plus ancien ou doit se dérouler dans le futur (cf. plus bas).
NB : important car les évènements sont affichés dans la page d’accueil et le menu Informations dans l’ordre chronologique.
Date de l’événement : par défaut la date de création de l’article, mais la date peut être modifiée pour définir sa date d’arrivée (cf. plus bas).
Tutoriel
Création de contenu pour le nouveau site du Club
NB : important car les évènements sont affichés dans la page d’accueil et le menu Informations dans l’ordre chronologique.
Titre de l’événement : titre affiché dans les pages pour cet évènement.
Image : optionnel. Image d’accompagnement de l’évènement (cf. plus bas). Sera affichée à gauche du texte :
Etat : « publié » ou « brouillon ». Seules les évènements publiés sont visibles
Statistique : selon les caractéristiques de l’événement (par ex. le nombre de places disponibles), donne des informations durant la phase d’inscription (fonction non utilisée pour l’instant)
Actions:
Ouvre une nouvelle page pour visualiser le rendu de l’évènement
Ouvre une fenêtre pour éditer l’évènement Cf. plus bas
Duplique l’évènement Cette fonction n’existe pas pour les
actualités, dommage…
Supprime l’évènement L’évènement n’est plus affiché dans les
différentes pages du site NB : si une page référence
spécifiquement cet évènement, le lien ne sera plus valable mais ne sera pas supprimé
Cliquons le bouton de modification de l’évènement exemple montré page plus haut :
Tutoriel
Création de contenu pour le nouveau site du Club
Dates de début et de fin de l’évènement : à positionner Etat : Publié ou Brouillon (valeur par défaut)
Date de publication : par défaut, la date du jour de publication de l’évènement. Peut être
positionnée dans le passé (affichage ordre chronologique) ou dans le futur (la page sera affichée à partir de la date configurée).
NB : la modification de la date n’est pas très simple, il faut se positionner exactement sur la partie de la date à modifier pour la changer, les flèches du clavier ne fonctionnent pas.
Visibilité : cf. chapitre 3 : - par défaut « public »
- en cliquant sur privé, on peut sélectionner la catégorie ou le(s) rôle(s) nécessaires à l’utilisateur pour visualiser l’actualité. Pour l’instant, nous utilisons les configurations suivantes :
o catégorie = « adhérent » è visible pour tous les membres du club
o catégorie = « membres du bureau » è visibilité limitée aux membres du Bureau Page de couverture : optionnel (par défaut, l’actualité a comme image le logo du club). Pour ajouter une image :
- cliquer sur le bouton « sélectionner une image » - choisir une image stockée sur votre ordinateur
- veiller à choisir une image pas trop grosse (pour le temps d’affichage) et de bon type (les info sont affichées sur la page).
Tutoriel
Création de contenu pour le nouveau site du Club
Article : corps du texte de l’actualité.
Cf. plus haut, il s’agit du même module de rédaction que pour des actualités.
NB : les autres onglets ne sont
pour l’instant pas utilisés.
Pour sauvegarder un événement :
Annuler : revient à la liste des évènements sans sauvegarde Enregistrer : sauvegarde l’article mais reste sur la page
Enregistrer et retour aux évènements: sauvegarde l’article et retourne à la page listant les évènements. Une nouvelle ligne apparaît référençant le nouvel événement.
PS : selon la date configurée, il se peut que l’évènement ne se trouve pas dans la page affichée.
Les boutons permettent de naviguer dans la liste des évènements.
6.4 Gérer les albums photos
chapitre à compléter
6.5 Gérer les documents
chapitre à compléter
7. F.A.Q
chapitre à compléter
