Formation contribution

On y va!

Contribuer sur le site Corporate SNCF Connect & Tech de façon éco-responsable

Contribution Drupal & éco-conception

Informations générales de contribution

La contribution sur le site se fait via un CMS (Content Management System) auquel vous devez avoir accès.Vous pouvez créer de nouvelles pages ou éditer des pages existantes.Vous devez porter une attention particulière aux ressources externes que vous ajoutez à vos pages (images, PDF).

Plan de contribution d'une page

Je crée / j'édite ma page

Je commence par créer ma page ou l'éditer selon mon besoin.

Je choisis mes blocs

Les blocs sont le cœur de la page, c'est ici que j'ajoute mon contenu.

Je prépare mes documents

Si j'ai des ressources externes, je les optimise avant de les ajouter.

Je publie ma page

Je vérifie ma page avant de la publier.

On y va!

Nous allons créer une page de type Presse en respectant le plan de contribution.

Contribuons une page ensemble

Les URLs du site

Url du site: Pour consulter le site :https://presse-corp.scts-com-dev.aws.vsct.fr/

Url du CMS: Pour modifier le site :https://presse-bo-corp.scts-com-dev.aws.vsct.fr/

Pour éditer ou créer une page : Je clique sur le lien "URL du CMS".

Je crée/édite ma page

Je me connecte à mon interface. Si je n'ai pas mes accès, je demande à mon formateur.En cas de perte de mon accès, je peux faire une demande de réinitialisation de mot de passe.

1 - Connection

Je crée/édite ma page

1) Je clique sur "Contenu" en haut de l'interface.

2 - Création de ma page

2) Je clique sur le bouton "Ajouter du contenu".

Je crée/édite ma page

3 - Type de la page

je vais choisir le type de la page que je souhaite creer.Dans notre exemple nous souhaitons creer une page presse je vais donc cliquer sur "Presse"

Je crée/édite ma page

4 - Contribution En-tête

Dans la partie En-tête, je dois renseigner pour la page :

1. Le type du communiqué
2. Le titre de la page

Dans la partie En-tête, je dois renseigner pour la section Hero :

1. Texte du Hero
2. Les labels
3. L'image

Voici la liste des champs à contribuer (en rouge, les champs obligatoires).

Je choisi mes composants

5 - Contribution Contenu

La partie Contenu concerne le cœur de la page. Les anciens articles de presse ont déjà été importés, mais les prochains devront être ajoutés ici.

La contribution des pages repose sur des blocs, qui sont des briques de l'application. Nous avons des blocs pour les paragraphes, les images, les témoignages, les documents externes, etc.

Je choisi mes composants

5 - Contribution Contenu

Certains blocs ne sont accessibles que dans des sections spécifiques, tandis que d'autres ne sont disponibles que dans un bloc nommé Grille, qui permet de structurer la page en plusieurs colonnes.

Certains blocs sont configurables, comme par exemple leur couleur. Ils disposent alors d’un bouton "Paramètres" en haut à droite du bloc concerné.

Retrouvez la liste complète des composants ici (Plus tard).

Pour continuer notre exemple, nous allons créer un composant Grille qui contiendra un texte et une image.

Créons un paragraphe et une image

Je choisi mes composants

5 - Contribution Contenu

Pour contribuer un bloc, je dois d'abord l'ajouter dans la zone Section en cliquant sur le bouton "+".

Les blocs de contenu ne peuvent être créés que s'il y a une section qui permet de découper la page en différentes parties.Je peux créer autant de sections que je le souhaite en cliquant sur le bouton Section.

Je choisi mes composants

5 - Contribution Contenu

Je souhaite afficher un titre et, en dessous, un texte à gauche et une image à droite du texte.Dans ma section, je vais ajouter un bloc Titre et remplir les champs obligatoires.

Pour pouvoir afficher un bloc de texte à gauche et une image à droite, j'ai besoin de créer une grille de deux colonnes dans laquelle je mettrai mon bloc de paragraphe et mon bloc image.Je vais donc créer dans ma section un bloc Grille d'éléments.Voyons en détail comment faire.

Je choisi mes composants

5 - Contribution Contenu

Je clique sur le bloc Grille d'éléments, ensuite je clique sur le bouton "Ajouter" du bloc.

La liste des blocs disponibles dans la grille apparaît. Je choisis Paragraphe et je remplis les champs obligatoires. Je fais de même pour le bloc Image.

La grille, par défaut, est sur une seule ligne. Chaque bloc apparaîtra alors les uns sous les autres. Pour qu'ils apparaissent l'un à côté de l'autre, je dois changer les paramètres de ma grille pour choisir deux colonnes par ligne.

Je clique sur le bouton "Paramètres" en haut à droite du composant.

Je choisis ce paramètre :

Je choisi mes composants

5 - Contribution Contenu

J'obtiens alors ce résultat.

Je crée/édite ma page

6 - Contribution remontée de contenu

Certaines pages du site sont des listes de tous les types de pages.Par exemple, il existe une page de liste de presse.

https://presse-corp.scts-com-dev.aws.vsct.fr/espace-presse/

Les blocs de ces pages ne sont pas contribuables et sont des remontées automatiques.Chaque page de presse existante et publiée apparaîtra ici.

Je crée/édite ma page

6 - Contribution remontée de contenu

La seule partie contribuable est la description courte.

Pour la contribuer, il faut, lors de la création de la page, remplir le champ "Description" de la partie Remontée de contenu.

Nous allons maintenant contribuer correctement un PDF pour répondre aux besoins d'éco-conception.

L'ajout d'un document PDF

Je prepare mes documents

7 - Preparation d'un document pdf

Un document téléchargeable doit respecter certains critères pour être optimisé.Voici les questions à se poser dans l'ordre :1) Mon document PDF est-il nécessaire ?2) Les images de mon PDF sont-elles nécessaires ?3) Les images nécessaires sont-elles optimisées ?4) Les polices de mon document sont-elles des polices système ?5) Ai-je supprimé les éventuelles annotations ?6) La taille de mon PDF a-t-elle été optimisée ?Parlons en détail de ces six critères.

Je prepare mes documents

7 - Preparation d'un document pdf - Mon document PDF est-il nécessaire ?

Pourquoi ?

Comment ?

l'impact ?

Le document PDF est peut-être inutile pour la compréhension de la page.

Le contenu peut être écrit en utilisant les blocs de contribution du site.

Ne pas mettre le PDF valide tous les prochains tests et éviter d'avoir une requête réseau en contribuant son contenu directement sur le site.

Je prepare mes documents

7 - Preparation d'un document pdf - Les images de mon PDF sont-elles nécessaires ?

Pourquoi ?

Comment ?

l'impact ?

Les images d'un document sont souvent inutiles à la compréhension de celui-ci et sont essentiellement décoratives.

Le document est édité et les images non informatives sont supprimées.

Les images alourdissent énormément les fichiers, ce qui demande plus de contribution au serveur et impacte donc davantage l'environnement.

Je prepare mes documents

7 - Preparation d'un document pdf - Les images nécessaires sont-elles optimisées ?

Pourquoi ?

Comment ?

l'impact ?

Les images des PDF sont souvent lourdes et peuvent être optimisées sans perte de qualité.

Il est possible d’utiliser des outils en ligne comme TinyPNG pour cela.

Des images plus légères demandent moins de ressources au serveur, souvent sans perte de qualité.

Je prepare mes documents

7 - Preparation d'un document pdf - Les polices de mon document sont-elles des polices système ?

Pourquoi ?

Comment ?

l'impact ?

Les polices système sont des polices déjà installées sur les ordinateurs et téléphones des utilisateurs.

Lors de la création du fichier, veillez à choisir une police système :Arial, Verdana, Times New Roman, Courier New, Georgia, Helvetica, Trebuchet MS.

L'utilisation d'une police système permet d'éviter le téléchargement de la police chez l'utilisateur. On évite ainsi une requête serveur qui peut être évitée, surtout si cette police n'est utilisée que pour ce fichier.

Je prepare mes documents

7 - Preparation d'un document pdf - Ai-je supprimé les éventuelles annotations ?

Pourquoi ?

Comment ?

l'impact ?

Les annotations dans les documents ne sont pas utiles pour le lecteur et sont donc inutiles une fois le fichier mis en ligne.

Pensez à supprimer les annotations dans les fichiers avant l'upload.

Cela permet une réduction du poids du fichier, un chargement plus rapide et une utilisation des ressources plus légère.

Je prepare mes documents

7 - Preparation d'un document pdf - La taille de mon PDF a-t-elle été optimisée ?

Pourquoi ?

Comment ?

l'impact ?

Les fichiers PDF contiennent souvent des informations cachées non essentielles pour la lecture du fichier.

Il est possible d’utiliser des outils en ligne comme ILovePDF qui vont se charger de réduire le poids des fichiers pour nous.

Cela entraîne une réduction massive du poids du fichier, un chargement plus rapide et une utilisation des ressources plus légère.Par exemple, en testant un de nos PDF avec un poids de base de 498 Ko, nous avons atteint un poids optimisé de 147 Ko, soit plus de 75 % de réduction.

Notre fichier est prêt à être uploadé sur le site.Nous allons éditer notre page pour ajouter un composant document.

Upload du document PDF

J'édite ma page

Je me connecte à mon CMS et je clique sur Contenu.

Je choisis mon "type de contenu" Presse et je clique sur Filtrer pour ne faire apparaître que ces pages.

J'édite ma page

Dans ma liste de pages, je choisis la page à éditer et je clique sur Modifier.

La contribution se passe comme pour la création d'une nouvelle page. La seule différence est que les blocs déjà créés sont présents et préremplis.

J'édite ma page

Dans la partie contenu

Je vais choisir la section dans laquelle je veux ajouter mon document optimisé. Je peux également créer une nouvelle section.

Je clique sur le bouton "+" et je vais choisir un bloc Document.

J'édite ma page

Je choisis le fichier que je veux uploader.

J'édite ma page

J'upload un nouveau fichier ou je choisis un fichier déjà existant.

J'édite ma page

Si j'ajoute un nouveau document, je peux le renommer ici.

Je peux cliquer ensuite sur le bouton "Enregistrer et sélectionner", puis sur "Insérer l'élément sélectionné".

J'édite ma page

Je peux ajouter une couleur à mon document en cliquant sur Paramètres en haut à droite du bloc.

Enfin, je n'oublie pas de sauvegarder ma page en haut à droite de l'interface.

Voilà le résultat sur le site

J'édite mon fichier

J'ai besoin d'éditer le nom de mon fichier déjà en ligne. Comment faire ?L'ensemble des médias du site est présent dans la partie Contenu → Médias.

Je peux retrouver mon fichier grâce au moteur de recherche et le modifier en cliquant sur le bouton Modifier présent à droite de la ligne de mon fichier.

Félicitations, il ne reste plus qu'à contribuer la page en cliquant sur le bouton "Publier" présent lorsque l'on modifie une page. N'oubliez pas d'enregistrer ensuite.

La page est prête à être publiée

Il faut éviter de contribuer des images autant que possible, car cela provoque des requêtes réseau supplémentaires.

Rappel éco-conception

Il faut optimiser au maximum les fichiers PDF et les regrouper dans un fichier ZIP si possible, quand il y en a plusieurs, pour n'avoir qu'une seule requête et une réduction du poids.

Merci pour votre attention !