Site à réaliser : [Joomla] Mon Blog

Site de démarrage : Joomla [repli]

A. Préparation de l'intégration des contenus

Installation (chargement et activation) d'un nouveau template

[But] Changer l'apparence du Blog. On installera le template ET Motor (édité par Engine Templates), lequel viendra se substituer au template utilisé par défaut (Protostar).

Remarque. — ET Motor est gratuit. Il en existe une version payante qui permet d'aller plus loin dans sa personnalisation (charte graphique, animations, typographie, etc.).

# Début de Procédure

# Coût : nc micro-tâches

# CMS Joomla

CHEMIN À PRENDRE : Extensions > Gérer > Installation

Écran « Extensions : Installation » :

[onglet Transférer un Paquet (par défaut)] cliquer sur le bouton Rechercher le Fichier

En dehors du back-office de Joomla :

1. Sélectionner le template auparavant téléchargé sur poste local
2. Cliquer sur le bouton de chargement (Ouvrir, sous Windows) dans l'environnement Joomla

Réponse à attendre du back-office : « Template : installation effectuée » (mais ici : « Plug-in : installation effectuée », car le template est fourni avec l'extension dont il a besoin pour fonctionner).

Pas de test à réaliser : on peut juste supposer que le template a été chargé.

CHEMIN À PRENDRE : Extensions > Templates > Templates

Écran « Templates : Templates (Site) » :

Vérifier que le template a bien été chargé (il doit apparaître dans la liste)

Pas de test à réaliser : le template n'est pas encore actif.

CHEMIN À PRENDRE : Extensions > Templates > Styles

Écran « Templates : Styles (Site) » :

VALIDER le choix du template ET Motor en cliquant sur l'étoile qui lui est adjointe (colonne Défaut).

Fin de Procédure #

Réponse du back-office : « Style défini par défaut ».

Test à réaliser côté front-office : on observera le changement de template en rafraîchissant la page (touche F5 du clavier).

Reconfiguration de l'éditeur de texte

[But] Débloquer l'usage de l'élément iframe, et des balises associées, dans le code HTML des contenus, de façon à pouvoir intégrer des vidéos (YouTube). Il faudra reconfigurer l'éditeur de texte TinyMCE.

# Début de Procédure

# Coût : nc

# CMS Joomla

CHEMIN À PRENDRE : Extensions > Plug-ins

Écran intermédiaire « Plug-ins » :

Cliquer sur la référence de l'éditeur à considérer (TinyMCE) (que l'on retrouvera facilement en utilisant le moteur de recherche)

Écran « Plug-ins : Éditeur - TinyMCE » :

1. [Onglet Plug-in (par défaut)] Se reporter à la section Sets du Panneau TinyMCE…
2. Activer l'onglet Set 0 (qui est celui de l'administrateur notamment)
3. Champ Éléments Prohibés : retirer « iframe » de la liste (l'usage des éléments « script » et « applet » demeurant prohibé, pour des raisons de sécurité)

VALIDER la nouvelle configuration en cliquant sur le bouton Enregistrer & Fermer.

Fin de Procédure #

Réponse du back-office : « Plug-in enregistré ».

Pas de test à réaliser : il se fera ultérieurement, lors de l'intégration des contenus.

B. Intégration des contenus

Étape 1 : Mettre à jour le titre du Blog et saisir son slogan

[But] Définir l'identité du Blog : son titre et son slogan. On remplacera le titre utilisé par défaut « My Joomla » par « Mon Blog ». Et on utilisera comme slogan « Le slogan de mon Blog ».

# Début de Procédure

# Coût : nc micro-tâches

# CMS Joomla

CHEMIN À PRENDRE : Extensions > Templates > Styles

Écran intermédiaire « Templates : Styles » :

Cliquer sur la référence du template à considérer (etmotor [ET Motor])

Écran « Templates : Modifier le Style » :

1. [Onglet Basic (par défaut)] Se reporter à la section Logo
2. Boutons radio Logo Type : choisir l'option Text
3. Champ Text : remplacer le titre initial du site (My Joomla) par le nouveau (Mon Blog)
4. Champ Logo Slogan : renseigner « Le slogan de mon Blog »

VALIDER la nouvelle configuration en cliquant sur le bouton Enregistrer & Fermer.

Fin de Procédure #

Réponse du back-office : « Style enregistré ».

Test à réaliser : après rafraîchissement de la page (touche F5), on observera l'apparition du nouveau titre et du nouveau slogan.

Étape 2 : Créer un dossier — une catégorie — pour les billets

[But] Ouvrir un espace qui servira à classer les billets. Il faudra créer la catégorie « Billets de mon Blog ». C'est cette catégorie qui servira de support à l'affichage des billets (la liste des billets), dans une page qui sera la page d'accueil de notre Blog.

# Début de Procédure

# Coût : nc

# CMS Joomla

CHEMIN À PRENDRE : Contenu > Catégories > Ajouter une Catégorie

Écran « Articles : Nouvelle Catégorie » :

[Onglet Catégorie (par défaut)] Champ Titre : renseigner « Billets de mon Blog »

VALIDER la création de la catégorie en cliquant sur le bouton Enregistrer & Fermer.

Fin de Procédure #

Réponse du back-office : « Catégorie enregistrée ».

Pas de test à réaliser : la catégorie est vide (elle ne contient aucun article).

Étape 3 : Créer les billets, en tant qu'articles

[But] Alimenter le Blog. Les billets devront être créées en tant qu'articles, de la catégorie « Billets de mon Blog »: avec une accroche (photo + texte), qui servira à introduire leurs contenus respectifs ; et quelques mots-clés (trois par billet), qui eux serviront à optimiser leur référencement.

Commentaire. — L'outil donne la possibilité de définir l'accroche soit en tant qu'extrait (technique ici retenue) soit en tant que résumé. La différence entre les deux tient au fait que les résumés, affichés dans la page qui sert à introduire les articles (dans notre cas, la page d'accueil), ne sont pas réaffichés dans les articles présentés individuellement.

Intégrer le texte (accroche + détail du contenu)

<h2>En-tête de section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum. Donec condimentum sapien at felis convallis commodo. Vestibulum ex erat, porta non malesuada sit amet, aliquet sit amet neque. Suspendisse in urna eget leo sagittis fringilla. Sed nec aliquam nisi. Nulla pharetra massa neque, congue dictum nisi faucibus elementum. Nam vitae nunc at elit volutpat faucibus. Nullam finibus, lacus id ornare placerat, est turpis fringilla magna, ac suscipit est elit vitae mi. Aenean sapien turpis, egestas ac elit convallis, consectetur commodo diam. Pellentesque sit amet mattis justo. Cras vitae consequat sem.</p>

# Début de Procédure (1er article)

# Coût : nc micro-tâches

# CMS Joomla

CHEMIN À PRENDRE : Contenu > Articles > Ajouter un Article

Écran « Articles : Ajouter » :

1. Champ Titre : renseigner « Billet I »
2. [Onglet Contenu (par défaut)] Liste déroulante Catégorie (colonne de droite) : sélectionner la catégorie « Billets de mon Blog »
3. Cliquer sur le bouton Basculer vers l'Éditeur, qui se trouve sous l'éditeur de texte (pour accéder à l'éditeur de code)
4. Copier-coller une première fois le contenu de la section ci-dessus, pour l'accroche de l'article, puis répéter le copier-coller deux-trois fois, avec l'en-tête en plus (pour le détail du contenu)
5. Cliquer à nouveau sur le bouton Basculer vers l'Éditeur (pour retrouver l'éditeur de texte Wysiwyg)
6. Après avoir positionné le curseur à la fin de la première section, cliquer sur l'icône « Lire la suite »

VALIDER la création de l'article en cliquant sur le bouton Enregistrer.

Fin de Procédure #

Réponse du back-office : « Article enregistré ».

Pas de test à réaliser : il s'agit seulement de sauvegarder le travail réalisé. (L'article ne pourra être affiché que lorsqu'on aura intégré la page d'accueil. Page d'accueil dans laquelle on trouvera son accroche, suivie du lien « Lire la suite » pour l'ouvrir.)

Ajouter les photos (et non la photo)

[But] Différencier les photos à afficher dans l'accroche de l'article et dans l'article lui-même (lorsqu'il est affiché entièrement) : il y aura donc, dans chaque article, deux photos à intégrer.

Remarque. — On peut utiliser une seule photo (voir infra).

# Début de Procédure (1er article, avec photos)

# Coût : nc micro-tâches

# CMS Joomla

Sur même écran :

1. Activer l'onglet Images et Liens
2. Étiquette Image d'Intro : cliquer sur le bouton Sélectionner

Détour par lightbox Changer d'Image :

Après avoir scrollé tout en bas, cliquer sur le bouton Parcourir

En dehors du back-office de Joomla :

1. Sélectionner la photo (préalablement) enregistrée sur poste local
2. Cliquer sur le bouton de transmission de la photo (Ouvrir, sous Windows) (on verra apparaître le nom du fichier)

Retour sur lightbox Changer d'Image :

1. Cliquer sur le bouton Démarrer l'Envoi (pour charger la photo dans l'environnement Joomla)
2. Sélectionner la photo
3. Cliquer sur le bouton Insérer (tout en haut)

Retour sur onglet Images et Liens :

1. Champ Alt Texte : renseigner « texte-alternatif-photo-intro-billet-I » (information non affichée mais importante pour le référencement)
2. Champ Légende : renseigner « légende-photo-intro-billet-I » (information affichée sous la photo, elle aussi importante pour le référencement)

Même onglet :

[+] Répéter l'exercice avec la photo de l'article complet (en partant cette fois du clic sur le bouton qui servira à sélectionner l'Image de l'Article Complet)

VALIDER l'ajout des deux photos en cliquant sur le bouton Enregistrer.

Fin de Procédure #

Réponse du back-office : la même que précédemment (Article enregistré).

Pas de test à réaliser : il s'agit là encore de sauvegarder le travail réalisé.

Ajouter les mots-clés

# Début de Procédure (1er article, avec mots-clés)

# Coût : nc micro-tâches

# CMS Joomla

Sur même écran :

1. Réactiver l'onglet Contenu
2. Champ Tags (colonne de droite) : renseigner « mot-clé I.1 » puis valider avec la touche d'entrée
3. Même champ : répéter l'opération avec « mot-clé I.2 » et « mot-clé I.3 »

VALIDER l'ajout des mots-clés en cliquant maintenant sur le bouton Enregistrer & Fermer.

Fin de Procédure #

Réponse du back-office : la même que précédemment (Article enregistré).

Pas de test à réaliser : l'article ne pourra être affiché (nous l'avons déjà dit) que lorsqu'on aura intégré la page d'accueil. (Les mots-clés apparaîtront dans l'accroche, en page d'accueil, et dans l'article lui-même, au pied du contenu.)

Cas des deux autres articles : Billet II/Billet III. Pas de changement, on suivra la même procédure (à ceci près qu'il ne sera pas nécessaire de repasser par le menu pour accéder à l'écran de création d'article).

Les mots-clés à ajouter seront les suivants : « mot-clé II.1, mot-clé II.2, mot-clé II.3 » pour le deuxième article ; et « mot-clé III.1, mot-clé III.2, mot-clé III.3 », pour le troisième.

Concernant le contenu, pas de changement : on fera un copier-coller du contenu du premier article.

# Coût de Procédure : nc micro-tâches (CMS Joomla) #

Étape 4 : Créer la page de présentation de l'auteur (article)

[But] Légitimer les contenus du Blog. On créera la page de présentation de l'auteur en tant qu'article, en y intégrant une photo d'en-tête.

Remarque. — Par défaut, Joomla range les articles dans la catégorie « Uncategorized (Non catégorisés) ». C'est pour éviter que notre article (celui qui est ici considéré) ne vienne se mélanger avec les autres articles (les billets Blog) que ces derniers ont été rangés dans une catégorie à part, la catégorie « Billets de mon Blog ».

# Début de Procédure (4e article, contenu textuel + photo)

# Coût : nc micro-tâches

# CMS Joomla

# Différence avec articles précédents intégrés en tant que billets : 1^o l'article n'a pas besoin d'être assigné à une catégorie particulière (l'outil le rangera dans la catégorie « Uncategorized (Non catégorisés) », voir supra) ; 2^o il n'y a ni séparateur à insérer ni de mots-clés à ajouter ; 3^o la technique utilisé pour intégrer la photo répond au besoin de la positionner exactement là on on le souhaite (avec les billets, les photos ont été intégrées en tant qu'élément de structure, à un endroit fixe).

CHEMIN À PRENDRE : Contenu > Articles > Ajouter un Article

Écran « Articles : Ajouter » :

1. Champ Titre : renseigner « Présentation de l'Auteur »
2. [Onglet Contenu (par défaut)] Copier-coller deux-trois fois la section de contenu déjà utilisée avec les autres articles (voir supra)

Sur même écran :

1. [Éditeur de texte] Insérer une ligne (au tout début de l'article) et y maintenir le curseur (c'est ici que l'on souhaite afficher la photo)
2. Se reporter à la barre d'outil de l'éditeur
3. Cliquer sur l'icône Image

Détour par lightbox Image :

[+] Répéter l'exercice de chargement de photo (voir supra)

Lightbox Image (suite) :

1. Sélectionner la photo (nécessaire, sinon les informations qui suivent ne seront pas prises en compte lors de l'insertion)
2. Champ Description de l'Image : renseigner « texte-alternatif-photo-auteur » (information non affichée mais importante pour le référencement)
3. Champ Légende : renseigner « légende-photo-auteur » (information affichée sous la photo, elle aussi importante pour le référencement)
4. Cliquer sur le bouton Insérer (tout en haut)

Retour sur écran « Articles : Ajouter » :

VALIDER la création de l'article en cliquant sur le bouton Enregistrer.

Fin de Procédure #

Réponse du back-office : la même que précédemment (Article enregistré).

Pas de test à réaliser : l'article ne pourra être affiché que lorsqu'on aura intégré le lien (dans le menu).

Étape 5 : Reconfigurer le lien de page d'accueil

[But] Tout d'abord, traduire le libellé du lien. On remplacera « Home » par « Accueil ». (Il s'agit là d'une convention. Ce lien est souvent représenté par une maison.)

[But] Ensuite, substituer à la page initialement visée par le lien, dont le contenu est vierge, celle qui affichera, comme nous le souhaitons, la liste des billets. Il suffira de faire pointer le lien vers la catégorie « Billets de mon Blog » : la configuration de base du lien sera telle que la page affichera, automatiquement, la liste des articles de la catégorie.

Remarque. — Par défaut, le lien de page d'accueil vise les « articles mis en vedette ». Cette option ne pouvait être retenue, car l'objectif était bien d'afficher tous les articles (intégrés en tant que billets), et pas seulement une sélection d'articles. C'est le principe même du Blog.

# Début de Procédure (1e lien du menu)

# Coût : 9 micro-tâches

# CMS Joomla

CHEMIN À PRENDRE : Menus > Tous les liens de menu

Écran intermédiaire « Menus : Liens de Menu » :

Cliquer sur la référence du lien à considérer (Home)

Écran « Menus : Modifier un Lien de Menu » :

1. Champ Titre de Menu : remplacer le libellé initial (Home) par le nouveau (Accueil)
2. [Onglet Détails (par défaut)] Étiquette Type de Lien de Menu : cliquer sur le bouton Sélection

Détour par lightbox Type de Lien de Menu :

1. Ouvrir le panneau déroulant Articles
2. Sélectionner l'option « Blog d'une catégorie (affiche l'introduction ou les articles complets d'une catégorie en une ou plusieurs colonnes) »

Retour sur onglet Détails :

Étiquette Sélection de Catégorie : cliquer sur le bouton Sélection (le second)

Détour par lightbox Sélectionner ou Changer de Catégorie :

Cliquer sur la référence de la catégorie à considérer (Billets de mon Blog)

Retour sur écran « Menus : Modifier un Lien de Menu » :

VALIDER la nouvelle configuration du lien en cliquant sur le bouton Enregistrer & Fermer.

Fin de Procédure #

Réponse du back-office : « Lien de menu enregistré ».

Test à réaliser : après rafraîchissement de la page du Blog, on observera d'abord le changement de libellé (Accueil).

Test à réaliser : on vérifiera ensuite que le lien affiche bien les articles de la catégorie « Billets de mon Blog », autrement dit la liste des billets.

Test à réaliser : on vérifiera enfin que la page d'accueil affiche bien, elle aussi, la liste des billets, en cliquant cette fois sur le titre du Blog.

Étape 6 : Ajouter le lien sur la page de présentation de l'auteur

[But] Donner accès à la page. On ajoutera, dans le menu, le lien sur la page « Présentation de l'Auteur », créée précédemment en tant qu'article.

# Début de Procédure (2e lien du menu)

# Coût : 9 micro-tâches

# CMS Joomla

# Différence avec lien précédent : 1^o il faut indiquer à quel menu on souhaite rattacher le lien (en effet, il ne s'agit pas de reconfigurer un lien de menu déjà existant, il s'agit d'en ajouter un nouveau, non assigné a priori) ; 2^o le lien vise un contenu qui est un article (et pas une catégorie).

CHEMIN À PRENDRE : Menus > Tous les liens de menu

Écran intermédiaire « Menus : Tous les Liens de Menu » :

Cliquer sur le bouton Nouveau

Écran « Menus : Ajouter un Lien de Menu » :

1. Champ Titre de Menu : renseigner « Présentation de l'Auteur »
2. [Onglet Détails (par défaut)] Liste déroulante Menu (colonne de droite) : sélectionner le menu « Main Menu »
3. Étiquette Type de Lien de Menu : cliquer sur le bouton Sélection

Détour par lightbox Type de Lien de Menu :

1. Ouvrir le panneau déroulant Articles
2. Sélectionner l'option « Article (affiche un article unique) »

Retour sur onglet Détails :

Étiquette Sélectionner un Article : cliquer sur le bouton Sélection (le second)

Détour par lightbox Sélectionner ou Changer cet Article :

Cliquer sur la référence de l'article à considérer (Présentation de l'Auteur)

Retour sur écran « Menus : Ajouter un Lien de Menu » :

VALIDER l'ajout du lien en cliquant sur le bouton Enregistrer & Fermer.

Fin de Procédure #

Réponse du back-office : la même que précédemment (Lien de menu enregistré).

Test à réaliser : après rafraîchissement de la page du Blog, on verra apparaître, dans le menu, le lien « Présentation de l'Auteur » ; vérifier que celui-ci donne bien accès à la page du même nom (créée en tant qu'article).

Annexe

Pour intégrer une vidéo de YouTube

Préalable : soit rouvrir l'un des articles précédemment créés (en passant par l'écran de gestion des articles : Contenu > Articles) soit créer un nouvel article (que l'on rangera dans la catégorie « Billets de mon Blog », pour le voir apparaître en page d'accueil).

# Début de Procédure

# Coût : nc micro-tâches

# CMS Joomla

# Différence par rapport aux photos : la vidéo n'aura pas à être chargée sur le serveur du Blog (ordinateur sur lequel sont enregistrés les contenus du Blog, avec les programmes de Joomla), ce sont les serveurs de YouTube qui hébergeront (et fourniront) les données de la vidéo.

Écran « Articles : Modifier [ou Ajouter] » :

1. [Éditeur de texte] Amener le curseur là où l'on souhaite voir apparaître la vidéo
2. Se reporter à la barre d'outil de l'éditeur
3. Cliquer sur l'icône « Insérer/modifier un média »

Détour par lightbox Insérer/modifier un Média :

1. Activer l'onglet Intégrer
2. [Éditeur de code] Copier-coller le code ci-dessous (fourni par YouTube)
3. Cliquer sur OK

<iframe width="560" height="315" src="https://www.youtube.com/embed/lwv6mfEC6nc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Réponse du back-office (dans l'écran « Articles : Modifier [ou Ajouter] ») : affichage de la vidéo (si le code ajouté est correct).

VALIDER l'intégration de la vidéo en cliquant sur le bouton Enregistrer.

Fin de Procédure #

Réponse du back-office : « Article enregistré ».

Test à réaliser : afficher le nouvel article (ou rafraîchir le contenu de l'article modifié) et vérifier que la vidéo fonctionne fonctionne bien en cliquant sur le bouton de lecture.