Gérer un site avec JD Admin

V2 - 06/03/2017
Tous droits réservés - www.jdcarre.fr

Généralités

Le CMS JD Admin est dédié à la rédaction et à la gestion du contenu d'un site internet. Il ne comporte aucune fonction de webmastering, ce qui limite son champ d'action mais offre une simplicité d'usage et une intuitivité dans son apprentissage.

JD Admin gère 3 éléments éditoriaux : les textes, les images et les vidéos.

I. Arriver sur l'administration du site

Pour se connecter à l’administration du site :

  • http:⁄⁄www.URLduSite/admin
  • Identifiant : communiqué par JD²
  • Mot de passe : communiqué par JD²

S’ouvre alors cette page :

Depuis cette page, à partir du menu de gauche, il est possible de :

  • Voir, créer et modifier ses catégories
  • Voir et modifier ses articles déjà créés
  • Rédiger un article
  • Voir, créer et modifier ses galeries d’images
  • Voir et modifier ses images déjà chargées
  • Charger une image dans la banque de données du site
  • Voir, créer et modifier ses vidéothèques
  • Voir et modifier ses vidéos déjà chargées
  • Charger une vidéo dans la banque de données du site

L’espace « Identification » correspond aux informations relatives au détenteur du site. Il permet également de les éditer et les modifier. Il est important de maintenir l’adresse mail renseignée à jour. Les alertes mails de JD Admin (sauvegarde de la base de données, nouveaux commentaires, etc) sont envoyés à cette adresse.

L’espace « Paramètres » est un résumé statistique du contenu du site.

Le bouton « Créer une sauvegarde de la BDD », permet de sauvegarder la base de données du site à un instant T. Un mail contenant le fichier de sauvegarde (« .sql ») est envoyé, et une copie du fichier est stockée sur le serveur.

L’espace « Contact » permet de contacter les équipes de JD² pour la maintenance et la résolution des problèmes rencontrés.

La barre noire du haut (appelée barre de navigation) est constituée de raccourcis permettant de :

  • revenir à l’accueil de l’administration
  • aller sur le site
  • rédiger un article
  • accéder à la FAQ
  • accéder à la documentation de support

II. Rédiger un article

Dans JD Admin, les textes sont appelés « articles » et sont classés dans des « catégories ».

Un article est composé de :

  • Un titre
  • Une catégorie
  • Un chapô
  • Un corps d’article
  • Un sous-texte
  • Une vignette
  • Un document lié
  • Un lien vers ce document

La multiplicité des champs permet de créer des liens entre différents articles dans une ou plusieurs catégories.

Les champs « article » et « chapô » peuvent être mis en page à l'aide d'un éditeur html WYSIWYG.

Cliquer sur « Rédiger un article » dans le menu de gauche :

S’ouvre alors l’éditeur d’article :

Ecrire le titre dans le champ « Titre », puis choisir la « Catégorie ».

NB : Il est nécessaire d’avoir créé au moins une catégorie au préalable. Les catégories sont normalement créées lors de la création du site par les équipes de JD² (pour créer une catégorie, cf VI. Gérer les catégories ).

Si l’article est destiné à une publication immédiate, cliquer sur le bouton « Maintenant ». La date et l’heure se remplissent automatiquement.

Il est possible de programmer la publication d’un article pour une publication ultérieure :

  1. Cliquer sur le champ vide « Date de publication »
  2. S’ouvre un calendrier dans lequel il est possible de choisir la date. La date peut également être tapée dans le champ sous la forme JJ/MM/AAA
  3. Glisser les curseurs d’heure et de minute pour définir l’heure de publication. L’heure de publication souhaitée peut être tapée sous la forme HH :MM
  4. Cliquer sur le bouton « Valider »

A. Rédiger l'article

L’article s’écrit, ou se colle, dans le cadre « Article » :

NB : Il est préférable de copier et coller son article dans un bloc note (pour supprimer les balises méta-textuelles utilisées par Word) que directement par Word (ce que vous pouvez tout de même faire). Puis de copier le texte du bloc note et le coller dans l’éditeur.

La mise en page s’effectue grâce à cette interface :

(

Pour information, il s’agit d’un script externe : https://www.tinymce.com

Les boutons Gras, Italique, Souligné, Barré, Alignements des paragraphes et Taille de la police d’écriture sont classiques et communs à tout traitement de texte.

Pour que le texte renvoie vers un autre site internet ou un autre article, il faut créer un lien hypertexte.

  1. Sélectionner le texte (en général, on ne cible qu’un ou deux mots)
  2. Cliquer sur le symbole « Lien »
  3. Une fenêtre s’ouvre
  4. Remplir l’ « URL » de direction (ne pas oublier « http:⁄⁄ »)
  5. Le « Texte à afficher » est le texte précédemment sélectionné
  6. Remplir le Titre (par exemple, pour un lien vers http://www.jdcarre.fr, le titre pourrait être : « Le site de JD² » ou « se rendre sur le site de JD² »). Le « titre » apparaîtra sur le site sous la forme d’une Info-Bulle au passage de la souris sur le lien
  7. Pour les liens externes au site, mettre la cible en « Nouvelle fenêtre » (ou “blank”). Cela permet au lien en question de s’ouvrir dans un autre onglet, et donc de garder la page de départ ouverte. Pour les liens internes au site, mettre la cible en « n/a » (ou “ouvrir dans cette fenêtre”)
  8. Cliquer « Ok », la fenêtre se ferme. Le texte sélectionné est alors en bleu et souligné dans l’interface (sur le site, la couleur des liens correspondra à la charte graphique définie)

Le champ « Chapô » sert à mettre en exergue l’amorce de l’article pour le référencement et la structure du site. Il est important de le renseigner.

Le chapô correspond à l’introduction de votre article (environ 250 caractères).

NB : Le texte du « chapô » ne doit pas apparaître en doublon dans le champ « article ».

Pour le confort de la lecture, il est préférable de mettre une vignette à un article. La taille recommandée est spécifique à la charte graphique du site. Les formats recommandés : « jpg » ou « jpeg », « gif », « png ».

Cliquer sur « Ajouter une vignette »

S’ouvre une fenêtre permettant de sélectionner sur l’ordinateur le fichier image à charger. Cliquer « Choisir » dans cette fenêtre.

Le champ « Vignette » affiche le chemin d’accès au fichier :

La croix rouge permet de supprimer le fichier et d’en choisir un autre.

Le champ « Sous-texte » est un champ libre qui permet de rentrer une variable afin d’ajouter des fonctionnalités au site (exemple : lier des articles entre eux). L’utilisation de ce champ est spécifique à chaque site.

Le champ « Lier une galerie » sert à créer un diaporama qui apparaîtra dans l’article une fois celui-ci publié. Il est nécessaire d’avoir créé la galerie au préalable (cf VII. Gérer les galeries d'images).

Le champ « Joindre un document » permet de charger un fichier (type « PDF », « Word », etc) afin de le rendre accessible au téléchargement par l’internaute.

Le champ « Lien vers document » permet de personnaliser le lien de téléchargement du fichier joint. Exemple : « Télécharger au format PDF », « Télécharger mon CV », etc.

G. Créer l'article

Cliquer sur le bouton « Créer l’article » :

Une fois l’article créé, l’éditeur reste ouvert et la barre se transforme :

Si la publication immédiate a été choisie, l’article est alors publié.

Il est alors possible :

  • d’afficher un aperçu de l’article tel qu’il apparaîtra sur le site.
  • d’enregistrer les modifications faites dans l’éditeur sur l’article en cliquant sur « Modifier l’article »

III. Insérer une image dans le corps de l'article

Pour insérer une image dans le corps de l’article, il convient au préalable de la charger dans la galerie « Insertion image ». Il en est de même pour les vidéos avec la vidéothèque « Insertion vidéo ».

  1. Cliquer sur « Images disponibles » dans le menu de gauche
  2. S’ouvre une fenêtre listant les images chargées dans la catégorie « Insertion image ». Les images sont accompagnées d’une URL. En haut de la fenêtre, le bouton « Ajouter une image », permet d’ajouter une image à cette liste
  3. Cliquer sur le bouton « Ajouter une image »
  4. S’ouvre une fenêtre permettant de sélectionner sur l’ordinateur le fichier à charger. Cliquer « Choisir » dans cette fenêtre
  5. Le champ affiche le chemin d’accès au fichier :
  6. La croix rouge permet de supprimer le fichier et d’en choisir un autre
  7. Cliquer sur « Envoyer ». L’image et son URL sont ajoutées à la liste

B. Insérer une image dans le corps de l'article

  1. Dans le champ « Article », placer le curseur à l’emplacement souhaité pour l’image
  2. Cliquer sur « Images disponibles » dans la colonne de gauche
  3. S’ouvre la fenêtre listant les images chargées dans la catégorie « Insertion Image ». Les images sont accompagnées d’une URL
  4. Copier l’URL de l’image à insérer
  5. Dans l’éditeur, cliquer sur l’icône d’insertion d’image :
  6. S’ouvre une fenêtre :
  7. Coller l’URL de l’image sélectionnée dans le champ « Source » ou « URL de l’image ». Remplir le champ « Description de l’image ». Il apparaîtra sur le site sous la forme d’une Info-Bulle au passage de la souris sur l’image.
  8. Le champ « Class » permet d’aligner l’image au centre, à gauche ou à droite.
  9. Cliquer sur « Ok ». La fenêtre se ferme et l’image apparaît dans le champ « Article »

IV. Insérer une vidéo dans le corps de l'article

:!::!: ATTENTION : CETTE SECTION N'EST PAS À JOUR :!::!:

Une vidéo est composée d'un descriptif et d'une vidéothèque. La vidéothèque permet de trier les vidéos, le champ descriptif est utilisé pour présenter le contenu de la vidéo et sert dans le référencement.

Il est possible de charger une vidéo dans la base de données du site, de la même façon que pour une image (sectionner la vidéothèque « Insertion de vidéo » lors du chargement de la vidéo) (cf VII.B. Charger une image).

Il est pourtant préférable de choisir la solution de l’embed (lecteur exportable). L’embed va appeler la vidéo et le lecteur depuis une plateforme spécialisée en vidéo (Youtube, Viméo, Dailymotion).

Pour embeder une vidéo dans le corps de l’article :

  1. Dans le champ « Article », placer le curseur à l’emplacement souhaité pour la vidéo
  2. Cliquer sur l’icône d’insertion de vidéo :
  3. Une fenêtre s’ouvre :
  4. Aller directement dans « Insérer »
  5. Coller l’iframe de la vidéo, soit la partie qui commence par « <iframe » (qui aura été copiée depuis Youtube, Dailymotion ou Viméo dans la partie « Intégrer » desdits sites) entre les deux balises « <div> »
  6. Cliquer sur « Ok »
  7. Dans le corps de l’article, la vidéo va s’afficher ou afficher un rectangle gris

Le rectangle gris ne signifie pas que l’opération a échoué, mais que l’éditeur n’affiche pas le contenu. Lors de la publication de l’article, la vidéo sera correctement affichée à la place de ce rectangle gris.

Il est possible gérer l’alignement de la vidéo à gauche, à droite ou au centre, en la sélectionnant et utilisant les boutons d’alignement :

:!::!: ATTENTION : LA SECTION VIDÉO N'EST PAS À JOUR :!::!:

V. Modifier un article

Depuis la page d’accueil, cliquer sur « Tous mes articles ».

S’ouvre une page listant toutes les catégories du site.

Cliquer sur la catégorie dans laquelle se trouve l’article à modifier. S’ouvre alors une page listant tous les articles de la catégorie.

  • Le symbole « Loupe » permet d’afficher un aperçu de l’article.
  • Le symbole « Croix » permet de supprimer l’article.
  • Le symbole « Crayon » permet de modifier l’article.

Pour modifier un article, cliquer sur le symbole « Crayon ». S’ouvre alors l’éditeur d’article.

Tous les champs de l’éditeur sont modifiables. Une fois les modifications effectuées, cliquer sur « Modifier l’article » :

VI. Gérer les catégories

Une catégorie est composée d'un nom et d'un descriptif. Il convient de choisir le nom des catégories en pensant au référencement et en utilisant des mots clés. Le champ descriptif peut combler le manque de clarté du nom de la catégorie du fait de l'optimisation pour le référencement.

Il convient de créer une catégorie avant de rédiger les articles qu'elle doit contenir. Ces catégories sont utilisées sur le site pour trier l’affichage des articles.

Une catégorie peut regrouper des articles selon une thématique (exemple : science et technologie), selon un type (exemple : mes clients), selon une zone d'affichage (exemple : texte de la page d’accueil).

Depuis la page d’accueil, cliquer sur « Catégories » :

S’ouvre une page listant les catégories du site et permettant de créer une nouvelle catégorie :

Pour créer une catégorie, remplir les champs

  • Nom
  • Descriptif

Cliquer sur « Créer la catégorie ».

NB : Il est nécessaire de contacter les équipes de JD² lors de la création d’une catégorie, car il faut ensuite la rendre accessible aux internautes sur le site.

Cette page permet également de supprimer une catégorie existante via le symbole « Croix », ou d’en modifier le nom et le descriptif via le symbole « Crayon ».

Avant de supprimer une catégorie, il faut veiller à ce qu’il n’y ait plus d’articles dedans. Dans le cas contraire, les articles ne seraient plus accessibles depuis le site.

VII. Gérer les galeries d'images

Une galerie est composée d'un nom et d'un descriptif. Il convient de choisir le nom des galeries en pensant au référencement et en utilisant des mots clés. Le champ « descriptif » peut combler le manque de clarté du nom de la galerie du fait de l'optimisation pour le référencement.

Il convient de créer une galerie avant de charger les images qu'elle doit contenir. Ces galeries sont utilisées sur le site pour trier l’affichage des images.

Une galerie peut regrouper des images selon une thématique (exemple : science et technologie), selon un type (exemple : mes clients), selon une zone d'affichage (exemple : image de la page d’accueil).

La galerie « Insertion image » permet d'intégrer des images aux articles. En chargeant une image dans cette galerie, l'image et son url deviennent accessibles lors de la création d'un article (cf III.B. Insérer l'image dans le corps de l'article).

Depuis la page d’accueil, cliquer sur « Galerie ».

S’ouvre une page listant les galeries d’images du site et permettant de créer une nouvelle galerie.

Pour créer une galerie, remplir les champs :

  • Nom
  • Descriptif

Cliquer sur « Créer la galerie ».

Cette page permet également de supprimer une galerie existante via le symbole « Croix » (l’image n’est alors plus accessible), ou d’en modifier le nom et le descriptif via le symbole « Crayon ».

Une fois la galerie créée, il convient de la remplir en y chargeant des images.

  1. Cliquer sur « Charger une image » dans le menu de gauche
  2. Une nouvelle page s’ouvre
  3. Sélectionner une galerie
  4. Cliquer « Ajouter une image » et sélectionner sur l’ordinateur l’image à charger
  5. Une fois l’image sélectionnée, le champ « Ajouter une image » se transforme :

    En cas de mauvaise sélection, la croix rouge permet de retourner au sélectionneur.
  6. Remplir les champs « Titre » et « Descriptif ». Le « Titre » apparaitra sur le site sous la forme d’une Info-Bulle au passage de la souris sur l’image
  7. Cliquer « Créer l’image »

Un bandeau indique la réussite de l’opération. L’éditeur reste ouvert, permettant la modification des informations concernant l’image, voire de l’image elle-même.

NB : Pour que l’image soit disponible à l’insertion dans le corps d’un article, la mettre dans la galerie « Insertion image ».

VIII. Gérer les images

Depuis la page d’accueil, cliquer sur « Toutes mes images ».

S’ouvre une page listant toutes les galeries du site.

Cliquer sur la galerie dans laquelle se trouve l’image à gérer. S’ouvre alors une page listant toutes les images de la galerie.

  • Le symbole « Croix » permet de supprimer l’image.
  • Le symbole « Crayon » permet de modifier l’image.

Pour modifier une image, cliquer sur le symbole « Crayon ». S’ouvre alors l’éditeur d’image.

Tous les champs de l’éditeur sont modifiables.

NB : Si l’image est remplacée, l’url de l’image le sera aussi. Ceci est à prendre en compte. Si l’url de l’image est utilisée pour une insertion dans le corps d’un article, cette url ne sera plus valide. Il faudra alors modifier l’url de l’image dans l’article correspondant.

Une fois les modifications effectuées, cliquer sur « Modifier l’image » :

IX. Gérer les vidéos et vidéothèques

Une vidéothèque est composée d'un nom et d'un descriptif. Il convient de choisir le nom des vidéothèques en pensant au référencement et en utilisant des mots clés. Le champ « descriptif » peut combler le manque de clarté du nom de la vidéothèque du fait de l'optimisation pour le référencement.

Il convient de créer une vidéothèque avant de charger les vidéos qu'elle doit contenir. Ces vidéothèques sont utilisées sur le site pour trier l’affichage des vidéos.

Une vidéothèque peut regrouper des vidéos selon une thématique (exemple : science et technologie), selon un type (exemple : mes clients), selon une zone d'affichage (exemple : vidéo de la page d’accueil).

La vidéothèque « Insertion vidéo » permet d'intégrer des vidéos aux articles. En chargeant une vidéo dans cette vidéothèque, la vidéo et son url deviennent accessibles lors de la création d'un article.

La gestion des vidéos s’effectue de la même façon que la gestion des images (cf VIII. Gérer les images).

La gestion des vidéothèques s’effectue de la même façon que la gestion des galeries d’images (cf VII. Gérer les galeries d'images)

NB : Il est toutefois conseillé de ne pas abuser de ce module. Les vidéos pesant souvent lourd, cela charge le serveur, souvent inutilement.

Passer par un système embed (cf IV. Insérer une vidéo dans le corps de l'article) permet de se servir des serveurs gratuits des services Youtube, Dailymotion et Viméo.

De même, les lecteurs exportables mis à disposition par ces plateformes assurent la compatibilité avec tous les supports (ordinateurs, smartphones, tablettes) dont peuvent disposer les internautes.

X. Gérer les commentaires

JD Admin permet de gérer les commentaires postés sur les articles. Il est possible de modifier, supprimer ou rejeter un commentaire.

La modération des commentaires peut se faire a priori ou a posteriori, selon la configuration du site.

La gestion « a posteriori » signifie que les internautes peuvent laisser un commentaire et que celui-ci sera directement publié sur le site.

La gestion « a priori » signifie que les internautes peuvent laisser un commentaire mais que celui-ci sera publié sur le site qu’après validation.

Dans les deux cas, à chaque commentaire posté, une alerte mail est envoyée.

Pour accéder aux commentaires d’un article depuis la page d’accueil, cliquer sur « Tous mes articles ».

S’ouvre une page listant toutes les catégories du site.

Cliquer sur la catégorie « Tous les articles ». S’ouvre alors une page listant tous les articles du site.

Les articles comportant des commentaires affichent le symbole « Étiquette ».

Pour accéder aux commentaires d’un article, cliquer sur le symbole « Étiquette ». S’ouvre une page affichant les commentaires de cet article.

Dans une modération « a posteriori », tous les commentaires sont validés par défaut. Le symbole « Triangle jaune » permet de rejeter le commentaire. L’état du commentaire devient alors « Rejeté ». Le commentaire n’est plus affiché sur le site, mais n’est pas supprimé de la base de donné du site. Il sera possible de le valider de nouveau.

Dans une modération « a priori », tous les commentaires sont en attente par défaut. Le symbole « V vert» permet de valider le commentaire. L’état du commentaire devient alors « Validé ». Le commentaire s’affiche sur le site. Il sera possible de le modérer de nouveau.

Le symbole « Horloge » permet de mettre en attente de modération le commentaire. Les commentaires en attente de modération ne sont pas visibles sur le site. Ils sont indiqués et accessibles depuis la barre de navigation :

Le symbole « Crayon » permet de modifier le commentaire. Cliquer sur le « Crayon » ouvre l’éditeur de commentaire.

Il est possible de modifier le pseudonyme du commentateur, ainsi que le commentaire laissé. Une fois les modifications effectuées, cliquer « Modifier le commentaire ».

Le symbole « Croix » permet de supprimer le commentaire définitivement.

NB : Il est toujours mal vu de modifier ou supprimer un commentaire sans s’en justifier auprès des lecteurs et du commentateur.