Site à réaliser : [Drupal] Mon Blog

Site de démarrage : Drupal [repli]

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

Installation (chargement et activation) d'un nouveau thème

[But] Changer l'apparence du Blog. On installera le thème Showcase Lite (édité par More Than Themes), lequel viendra se substituer au thème utilisé par défaut (Bartik).

Remarque. — Showcase Lite est dans le top 10 des quelques 500 thèmes gratuits les plus utilisés, avec la version 8 de Drupal. 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 : 10 micro-tâches

# CMS Drupal

CHEMIN À PRENDRE : Gérer > Apparence

Écran Apparence :

Cliquer sur le bouton Installer un Nouveau Thème

Écran intermédiaire Installer un Nouveau Thème :

Champ Installer depuis une URL : coller https://ftp.drupal.org/files/projects/showcase_lite-8.x-1.1.tar.gz (adresse récupérée dans la documentation du thème, voir supra)

VALIDER le chargement du thème en cliquant sur le bouton Installer.

Réponse à attendre du back-office : « L'installation a été réalisée avec succès ».

Pas de test à réaliser à ce stade : le thème a seulement été chargé, il n'est pas encore actif.

Écran intermédiaire Gestionnaire de Mises à Jour :

1. Se reporter à la section Étapes Suivantes
2. Cliquer sur le lien Installer les Thèmes Ajoutés Récemment

Retour sur écran Apparence :

1. Se reporter à la section Thèmes Désinstallés (partie basse de l'écran)
2. Se reporter au panneau du thème Showcase Lite 8.x-1.1

VALIDER le choix du thème en cliquant sur Installer et Définir par Défaut.

Fin de Procédure #

Réponse du back-office : « Merci de prendre en compte que le thème d'administration est toujours le thème Seven […] Toutefois, toutes les sections de ce site non relatives à l'administration utilisent le thème par défaut Showcase Lite ».

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

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 Drupal » par « Mon Blog ». Et on utilisera comme slogan « Le slogan de mon Blog ».

# Début de Procédure

# Coût : 8 micro-tâches

# CMS Drupal

CHEMIN À PRENDRE : Gérer > Configuration

Écran intermédiaire Configuration :

1. Se reporter au panneau Système
2. Cliquer sur l'item Paramètres de Base du Site

Écran Paramètres de Base du Site :

1. Se reporter au panneau Détails du Site
2. Champ Nom du Site : remplacer le nom initial du site (My Blog) par le nouveau (Mon Blog)
3. Champ Slogan:  renseigner « Le slogan de mon Blog »

VALIDER la nouvelle configuration en cliquant sur le bouton Enregistrer la Configuration.

Fin de Procédure #

Réponse du back-office : « Les options de configuration ont été enregistrées ».

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

Étape 2 : Créer les billets, en tant qu'Articles

[But] Intégrer les billets du Blog. Ceux-ci devront être créés en tant que nœuds instances du type de contenu « Article » : 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

# CMS Drupal

CHEMIN À PRENDRE : Gérer > Contenu

Écran intermédiaire Contenu :

Cliquer sur le bouton Ajouter du Contenu

Écran intermédiaire Ajouter du Contenu :

Cliquer sur l'item Article

Écran Créer Article :

1. Champ Titre : renseigner « Billet I »
2. Se reporter à la barre d'outil de l'éditeur de texte
3. Cliquer sur l'icône Source (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. Saisir <!--break--> entre l'accroche et le détail du contenu
6. Cliquer à nouveau sur l'icône Source (pour retrouver l'éditeur de texte Wysiwyg)

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

Fin de Procédure #

Réponse du back-office : « Le contenu 'Billet I', de type 'Article', a été créé ».

Test à réaliser : c'est dans la page d'accueil (clic sur titre du Blog) qu'on verra apparaître l'Article, ou plus exactement, l'accroche de l'Article ; celle-ci sera suivie du traditionnel « En savoir plus » sur lequel on cliquera pour vérifier que l'Article a bien été intégré.

Ajouter la photo (au tout début de l'Article)

# Début de Procédure (1er Article, avec photo)

# Coût : nc

# CMS Drupal

Écran intermédiaire de présentation de l'Article :

Cliquer sur l'item Modifier (sous le titre)

Écran Modifier Article Billet I (titre initial, Créer Article) :

Étiquette Image (au-dessous de l'éditeur) : cliquer sur le bouton Parcourir

En dehors du back-office de Drupal :

1. Sélectionner la photo (préalablement) enregistrée sur poste local
2. Cliquer sur le bouton de chargement (Ouvrir, sous Windows) dans l'environnement Drupal

Retour sur écran Modifier Article Billet I :

Champ Texte Alternatif : renseigner « texte-alternatif-photo-billet-I » (information non affichée mais importante pour le référencement)

VALIDER l'ajout de la photo en cliquant sur le bouton Enregistrer.

Fin de Procédure #

Réponse du back-office : « Le contenu 'Billet I', de type 'Article', a été mis à jour ».

Test à réaliser : on verra apparaître la photo aussi bien en page d'accueil (après rafraîchissement) que dans l'Article (auquel on accèdera en cliquant sur le lien « En savoir plus »).

Ajouter les mots-clés

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

# Coût : nc

# CMS Drupal

Écran intermédiaire de présentation de l'Article avec photo :

Cliquer sur l'item Modifier

Écran Modifier Article Billet I :

Champ Étiquettes : renseigner « mot-clé I.1, mot-clé I.2, mot-clé I.3 » (espaces ajoutées après virgules non obligatoires)

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

Fin de Procédure #

Réponse du back-office : la même que précédemment (Le contenu 'Billet I', de type 'Article', a été mis à jour).

Test à réaliser : après rafraîchissement, on verra apparaître les mots-clés aussi bien en page d'accueil (en dessous de l'accroche) que dans l'Article (au pied du contenu).

Cas des deux autres Articles : Billet II/Billet III. Pas de changement, on suivra la même procédure (il faudra d'ailleurs repasser par le menu pour accéder à l'écran de création d'Article).

Les mots-clés à ajouter (en bloc) 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 Drupal) #

Étape 3 : Créer la page de présentation de l'auteur, en tant que Page de Base

[But] Légitimer les contenus du Blog. On créera la page de présentation de l'auteur en tant que Page de Base, et non comme Article (cela aurait pour effet de la mélanger avec les billets du Blog, ce qui n'aurait pas de sens).

Remarque I. — La Page affichera une photo qui ne sera pas intégrée en tant qu'élément de structure, comme dans le cas des Articles. Cette autre technique permet d'intégrer les photos là où on le souhaite, sans aucune contrainte, ni sur le nombre ni sur l'endroit.

Remarque II. — On créera, en même temps que la Page, le lien de menu qui permettra d'y accéder. (L'autre solution consisterait à créer le lien, après coup.)

# Début de Procédure (Page de Base, contenu textuel + photo)

# Coût : nc

# CMS Drupal

CHEMIN À PRENDRE : Gérer > Contenu

Écran intermédiaire Contenu :

Cliquer sur le bouton Ajouter du Contenu

Écran intermédiaire Ajouter du Contenu :

Cliquer sur l'item Page de Base

Écran Créer Page de Base :

1. Champ Titre : renseigner « Présentation de l'Auteur »
2. Se reporter à la barre d'outil de l'éditeur
3. Cliquer sur l'icône Source
4. Copier-coller le contenu déjà utilisé avec les Articles
5. Cliquer à nouveau sur l'icône Source (pour retrouver l'éditeur de texte)

Sur même écran :

1. Insérer une ligne (au tout début de la Page) 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 Insérer une Image :

Étiquette Image : cliquer sur le bouton Parcourir

En dehors du back-office de Drupal, comme précédemment :

1. Sélectionner la photo enregistrée sur poste local
2. Cliquer sur le bouton de chargement dans l'environnement Drupal

Retour sur lightbox Insérer une Image :

1. Champ Texte Alternatif : renseigner « texte-alternatif-photo-auteur » (information non affichée mais importante pour le référencement)
2. Cliquer sur le bouton Enregistrer

Retour sur écran Créer Page de Base :

1. Se reporter au panneau déroulant Paramètres du Menu (et l'ouvrir)
2. Cocher la case Fournir un Lien de Menu

VALIDER la création de la Page de Base en cliquant sur le bouton Enregistrer.

Fin de Procédure #

Réponse du back-office : « Le contenu 'Présentation de l'Auteur', de type 'Page de Base', a été créé ».

Test à réaliser : on verra apparaître, à côté du lien sur la page d'accueil, le lien « Présentation de l'Auteur » ; vérifier que celui-ci donne bien accès à la Page de Base que l'on vient de créer.

Étape 4 : Intégrer la nouvelle page d'accueil du Blog

Créer la page, en tant que vue

[But] Créer une page qui affichera la liste des billets juste créés, selon un format qui servira seulement à les introduire : avec un titre (celui des différents billets), une accroche (photo + texte), et un lien (pour accéder au détail des contenus). Il faudra créer cette page en tant que vue.

# Début de Procédure

# Coût : nc

# CMS Drupal

CHEMIN À PRENDRE : Gérer > Structure

Écran intermédiaire Structure :

Cliquer sur l'item Vues (tout en bas)

Écran intermédiaire Vues :

Cliquer sur le bouton Ajouter une Vue

Écran Ajouter une Vue :

1. Se reporter au panneau Visualiser les Informations Basiques
2. Champ Nom de la Vue : renseigner « Mon Blog »
3. Se reporter au panneau Paramètres de la Vue
4. Liste déroulante du type de contenu à considérer : sélectionner le type Article
5. Se reporter au panneau Paramètres de la Page
6. Cocher la case Créer une Page

VALIDER la création de la vue en cliquant sur le bouton Enregistrer et Modifier : on verra apparaître en bas de l'écran (dans le panneau Preview) la liste des Articles.

Fin de Procédure #

Réponse du back-office : « La vue Mon Blog a été enregistrée ».

Test à réaliser : après rafraîchissement, on verra apparaître le lien « Mon Blog » ; vérifier que celui-ci donne bien accès à la vue créée pour afficher les Articles (nos billets).

Activer la page, en tant que nouvelle page d'accueil

[But] Substituer à la page d'accueil initiale, notre propre page d'accueil. On l'activera en substituant au chemin de la vue utilisée par défaut (/node) le chemin de la vue que l'on vient de créer (/mon-blog).

Remarque. — La page d'accueil initiale affiche elle aussi les derniers Articles, mais selon un format quelque peu différent, et sur la base d'une vue « système » qu'il vaut mieux ne pas modifier.

# Début de Procédure

# Coût : 7 micro-tâches

# CMS Drupal

CHEMIN À PRENDRE : Gérer > Configuration

Écran intermédiaire Configuration :

1. Se reporter au panneau Système
2. Cliquer sur l'item Paramètres de Base du Site

Écran Paramètres de Base du Site :

1. Se reporter au panneau Page d'Accueil
2. Champ d'identification de la page à afficher : remplacer le chemin initial (/node) par le nouveau (/mon-blog)

VALIDER la mise à jour en cliquant sur le bouton Enregistrer la Configuration.

Fin de Procédure #

Réponse du back-office : « Les options de configuration ont été enregistrées ».

Test à réaliser : vérifier, en cliquant sur le titre du Blog, que c'est bien le contenu intégrant vue (Mon Blog) et articles associés (nos billets) qui est utilisé en page d'accueil.

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 : Gérer > Contenu) soit créer un nouvel Article. (Cela fonctionnera aussi bien avec les Pages de Base.)

# Début de Procédure

# Coût : nc micro-tâches

# CMS Drupal

# 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 Drupal), ce sont les serveurs de YouTube qui hébergeront (et fourniront) les données de la vidéo.

Écran Créer Article (ou Modifier Article [titre de l'Article]) :

1. Cliquer sur l'icône Source (pour accéder à l'éditeur de code)
2. Amener le curseur là où l'on souhaite voir apparaître la vidéo
3. Copier-coller le code fourni par YouTube (voir infra)
4. Cliquer à nouveau sur l'icône Source

<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 Créer [ou modifier] Article) : 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 : « Le contenu '[titre de l'Article]', de type 'Article', a été créé [ou mis à jour] ».

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