Mettre en œuvre et exploiter un CMS

Table des matières

Objectifs, contenu et validation du cours
Eléments théoriques
Validation du CIE
Objectif final
Budget (facture ou offre)
Info sur les documents administratifs
Valeur juridique de la facture
Etablir une offre
Les CMS et WordPress
Qu'est-ce qu'un CMS
Exemples de CMS
Avantage et inconvénients des CMS sur le code
Avantage et inconvénients des CMS hébergés
L'histoire de WordPress
Les bases de WordPress
Interface de WordPress natif
Menu Réglages
Ajouter un utilisateur
Les droits des utilisateurs par les rôles
Ajouter une extension
Gestion des thèmes / thème enfant
C'est quoi, un thème enfant ?
Création du théme enfant
Le fichier style.css du thème enfant
Le fichier functions.php du thème enfant
FAQ WordPress
Comment animer un lien vers un ancre (smooth effect) ?
Quelles sont les unités de taille variables ?

Les supports de cours

Objectifs, contenu et validation du cours

Eléments théoriques

  1. Contexte général des CMS et WordPress
  2. Différence entre un article et une page
  3. Créer une catégorie
  4. Gérer les médias
  5. Modifier une image dans WordPress
  6. Affichage d'une page ou d'une série d'articles
  7. Passer en revue les options dans l'onglet "Règlages"
  8. Installer et activer un thème, supprimer les autres
  9. Personnaliser le thème et l'identité du site
  10. Mises à jour des plugins
  11. Sauvegarder votre site avec UpdraftPlus, installation de UpdraftPlus
  12. Installer WPForms (ou similaire)
  13. Installer Elementor Header & Footer
  14. Créer les pieds de page et l'entête
  15. Le fonctionnement de l'éditeur Elementor
  16. Créer une page
  17. Eriger une page en  page d'accueil
  18. Créer un menu de navigation
  19. Les règlages par défaut du site
  20. Expliquer les rôles de WordPress
  21. Créer un formulaire
  22. Employer un code court
  23. Insérer du code HTML
  24. Créer un thème enfant
  25. Créer un nouveau compte d'utilisateur, gérer les accès

Validation du CIE

3 tests QCM : coefficient 1
1 dossier pour client : coefficient 1
1 site web : coefficient 2

Calcul pour tests : nb réponses justes / nb questions * 5 + 1

Critères pour votre site :

1. Adéquation objectif / traitement du thème /contenu global : coeff x2
2. Ergonomie/navigation/
3. Responsivité
4. Recherche graphique, Finesse de la finition
5. Qualité rédaction / images
6. Bilinguisme / formulaire
7. Originalité du projet : coeff 0.5

Objectif final

Produire un document sur votre projet :

  1. Périmètre du projet
  2. Public cible
  3. Objectif mesurable
  4. Présentation du contenu
  5. CI/Charte graphique
  6. Budget (offre ou facture)
  7. Vos retours sur le formation

Produire et publier un site web

  • Bilingue
  • Responsif
  • En accord avec la définition de votre projet

Présenter votre projet à la classe

  • Comme devant votre client
  • 10-15 minutes pour présenter votre travail
  • Exprimer vos difficultés et vos satisfactions lors de ce travail

Budget (facture ou offre)

Les diverses parties d'un projet web doivent être mentionnées :

  •  Tâches préparatoires
    • Inventaire ( images textes )
    • Production ( qui ? )
    • Définition et validation structure ( contenu, hiérarchisation )
    • Définition Layout et validation
  • Réalisation du site ( WP)
    • Tests ( images, liens, formulaires, conformité HTML )
    • Formation et validation du site
  • Tâches de post production  // récurrent
    • Suivi SEO, marketing ( réseaux sociaux )
    • Mise à jour du contenu
    • Mise à jour technique

Info sur les documents administratifs

Valeur juridique de la facture

La facture est un document comptable dont l’objectif principal est de donner une valeur juridique à la contre-prestation dont il est question. Elle protège aussi bien le prestataire que le client dans le cas d’un éventuel litige commercial.

Outre le fait qu’elle détermine donc avec précision la nature de la prestation de service ou de la vente de biens dont il est question (quantité, TVA, montant total…), la facture offre une trace écrite exigible sur une période de 10 ans dans la législation suisse.

Bon à savoir : Il est fait mention de cette obligation (pour le client davantage que pour le prestataire) dans l’article 958f du livre cinquième du Code civil suisse.

 

Voir un exemple de facture basique.

 

Etablir une offre

Avant de rédiger l’offre, il est conseillé d’échanger avec le client, de clarifier ses besoins et de discuter des conditions. L’entretien vous permet d’identifier les préoccupations et les intentions spécifiques des clients et de comprendre quel service ou quel produit correspond le mieux à leurs besoins. L’échange verbal permet généralement de clarifier, si ce n’est définitivement, du moins de délimiter les budgets et les délais.

Que doit-on évoquer dans une offres

Description des produits: les produits et les services doivent être désignés le plus précisément possible afin d’éviter tout malentendu.

 

Quantités et prix: prix unitaires et/ou taux horaires. Si les dépenses ou les coûts de production ne peuvent pas être déterminés à l’avance, indiquer les estimations en tant que telles et préciser leur fondement. Indiquer les éventuels rabais de manière transparente.

 

Délai de production: indiquer le plus précisément possible, si besoin, indiquer en périodes; si le projet est long, nommer les phases avec les délais et conditions de livraison présumés.

 

Validation/tests: indiquer les procédures de validation.
Frais et taxes: indiquer les frais supplémentaires pour les déplacements, l’hébergement ou les repas.

 

Référence aux conditions générales: les entreprises disposant de conditions générales de vente (CGV) doivent impérativement y faire référence dans l’offre ou les joindre à celle-ci.

 

Autres détails: Les informations importantes qui vont au-delà des points mentionnés ci-dessus, comme les indications sur les droits d’utilisation et les licences doivent être mentionnées.

 

Les points à éviter dans une offre

 

  • Les principales préoccupations des clients ne sont pas assez prises en compte.
  • Les avantages et les bénéfices pour le client ne sont pas indiqués
  • La différence entre l'offre sommaire et l'offre détaillée est négligée
  • L'offre n'est pas claire
  • Les échéances ne sont pas assez précises ou sont trop sommaires.
  • L'offre arrive après la date convenue.

Les CMS et WordPress

Qu'est-ce qu'un CMS

Un CMS, ou système de gestion de contenu (Content Management System en anglais), est un logiciel qui aide les utilisateurs à créer, gérer et modifier le contenu d'un site web sans avoir besoin de connaissances avancées en programmation.

Il permet de construire et de maintenir un site web de manière intuitive et, dans la mesure du possible, de manière très ergonomique.

Les CMS sont particulièrement utiles pour les personnes qui souhaitent publier des articles, gérer des médias comme des images et des vidéos, et organiser le contenu sans écrire de code.

Exemples de CMS

exemples de CMS  auto-hébergés (On premise)

  1. WordPress.org : C'est probablement le CMS open-source le plus connu et le plus utilisé au monde. Il nécessite une installation sur un serveur web propre ou loué. WordPress est très flexible, soutenu par une large communauté, et bénéficie d'un vaste éventail de thèmes et de plugins.
  2. Joomla : C'est un autre CMS open-source qui offre une bonne flexibilité et de nombreuses options de personnalisation. Il est souvent choisi pour des sites ayant des besoins complexes en matière de gestion de contenu.
  3. Drupal : Réputé pour sa robustesse et sa flexibilité, Drupal est souvent le CMS de choix pour des sites web complexes et des applications web exigeant une structure de contenu personnalisée et une scalabilité élevée.
  4. Magento (Adobe Commerce) : Très prisé dans le domaine du commerce électronique, Magento offre une plateforme puissante pour les entreprises qui ont besoin de solutions de e-commerce complètes et hautement personnalisables.
  5. TYPO3 : Bien établi en Europe, TYPO3 est adapté pour les entreprises de toutes tailles. Il est particulièrement fort pour gérer plusieurs sites web à partir d'une seule installation.

Exemples de CMS en cloud (hostés) :

  1. Wix : Très populaire pour sa facilité d'utilisation, Wix permet aux utilisateurs de créer des sites web via une interface glisser-déposer. Il offre aussi une large gamme de templates et d'options de personnalisation.
  2. Squarespace : Connu pour ses designs élégants et ses templates visuellement impressionnants, Squarespace est souvent le choix des créateurs, des photographes, et des petites entreprises qui veulent un site esthétique sans trop de complexité technique.
  3. Shopify : C'est un choix principal pour les boutiques en ligne. Shopify simplifie le processus de création et de gestion d'un commerce électronique, offrant des outils pour les transactions, la gestion des stocks, et le marketing.
  4. Weebly : Semblable à Wix, Weebly offre une plateforme de création de site facile à utiliser avec une fonctionnalité de glisser-déposer. Il est souvent utilisé par les petites entreprises et les éducateurs.
  5. WordPress.com : Distinct de WordPress.org, qui est un CMS open-source à installer sur son propre serveur, WordPress.com offre une solution hébergée où l'hébergement, la sécurité, et les mises à jour sont gérés par Automattic, la société derrière WordPress.

 

Il existe par ailleurs de nombreux CMS développés au seins des entreprises qui nécessitent un temps d'adaptation aux nouveaux venus.

Avantage et inconvénients des CMS sur le code

Avantages

  1. Facilité d'utilisation : Les CMS permettent aux utilisateurs sans compétences en codage de créer, gérer et modifier le contenu des sites web facilement grâce à des interfaces utilisateur graphiques.
  2. Gestion efficace du contenu : Ils offrent des outils pour organiser le contenu, gérer les médias, et même programmer des publications, ce qui est particulièrement utile pour les sites avec de grandes quantités de contenu.
  3. Extensibilité et personnalisation : Grâce aux thèmes et plugins, les utilisateurs peuvent étendre les fonctionnalités de leur site et le personnaliser sans avoir à écrire de code.
  4. Communauté et support : Les CMS populaires bénéficient souvent d'une grande communauté qui offre du support, des mises à jour régulières et des solutions à de nombreux problèmes courants.
  5. Sécurité : Ils sont régulièrement mis à jour pour corriger les failles de sécurité, et des extensions sont disponibles pour renforcer la sécurité.

Inconvénients

  1. Performance : Les CMS peuvent être plus lourds en termes de ressources serveur, surtout avec de nombreux plugins ou un grand volume de trafic, ce qui peut affecter la vitesse du site.
  2. Complexité : Bien que conçus pour être accessibles, les CMS peuvent devenir complexes à configurer ou à personnaliser de manière avancée, nécessitant parfois des compétences techniques spécifiques.
  3. Dépendance aux thèmes et plugins : La dépendance à des extensions tierces peut poser des problèmes de compatibilité, de sécurité, et de performances si ces extensions ne sont pas bien maintenues.
  4. Mises à jour fréquentes : Les mises à jour nécessaires pour la sécurité et les nouvelles fonctionnalités peuvent parfois entraîner des incompatibilités ou nécessiter des ajustements réguliers.

Avantage et inconvénients des CMS hébergés

Avantage des CMS On-Premise

  1. Contrôle complet : Les utilisateurs ont un contrôle total sur l'infrastructure et la plateforme, permettant une personnalisation plus poussée et une intégration plus fine avec d'autres systèmes internes.
  2. Sécurité : Les organisations peuvent appliquer leurs propres politiques de sécurité, ce qui est essentiel pour les industries réglementées ou pour ceux qui gèrent des informations très sensibles.
  3. Pas de dépendance aux fournisseurs : Éviter la dépendance à un fournisseur spécifique peut être crucial pour la stratégie à long terme et la continuité des affaires.
  4. Coûts à long terme : Bien que l'investissement initial soit plus élevé, à long terme, un CMS on-premise peut s'avérer moins coûteux, surtout si l'entreprise possède déjà l'infrastructure nécessaire.

Inconvénients des CMS On-Premise

  1. Coûts initiaux et de maintenance élevés : L'achat de licences, les serveurs, l'installation et la maintenance régulière nécessitent un investissement initial important et des coûts opérationnels continus.
  2. Besoin de compétences techniques : Les organisations doivent disposer d'une équipe IT compétente pour gérer l'installation, la configuration, la maintenance et les mises à jour du système.
  3. Responsabilité de la sécurité : Toute la responsabilité de sécuriser le système et de le maintenir à jour repose sur l'organisation, ce qui peut être un défi.

 

Avantages des CMS hébergés

  1. Facilité de mise en place et de maintenance : Le fournisseur s'occupe de l'hébergement, de la maintenance, des mises à jour de sécurité et des sauvegardes, réduisant le besoin de compétences techniques internes.
  2. Coûts prévisibles : Les CMS hébergés sont généralement facturés sur une base d'abonnement, ce qui rend les coûts prévisibles et souvent plus accessibles pour les petites entreprises.
  3. Évolutivité et performance : Les fournisseurs peuvent offrir une évolutivité facile et une performance optimisée en fonction de la demande, sans nécessiter d'intervention manuelle significative.

Inconvénients des CMS hébergés

  1. Moins de personnalisation : Il peut y avoir des limitations sur la personnalisation et l'intégration avec d'autres systèmes, surtout par rapport aux solutions on-premise.
  2. Dépendance au fournisseur : Les utilisateurs sont dépendants de la fiabilité et de la pérennité du fournisseur, ainsi que de sa capacité à maintenir le service opérationnel et sécurisé.
  3. Possibles problèmes de confidentialité des données : Les données sont stockées sur des serveurs externes, ce qui peut être un problème pour les organisations qui traitent des informations sensibles ou sont soumises à des réglementations strictes en matière de données.

L'histoire de WordPress

Origines et Création

  • 2003 : WordPress a été créé en Corse par le Matt Mullenweg et Mike Little comme un fork de b2/cafelog, un projet de logiciel de blog abandonné par son développeur principal, Michel Valdrighi. Mullenweg et Little voulaient créer une plateforme de blog facile à utiliser qui serait également extensible.

Expansion et Croissance

  • 2004-2005 : L'introduction de plugins avec la version 1.2 et de thèmes avec la version 1.5 a transformé WordPress d'un simple outil de blogging en une plateforme CMS plus robuste, permettant aux utilisateurs de personnaliser facilement leurs sites.
  • 2008 : L'introduction du Tableau de bord et d'un installateur de plugins dans la version 2.7 a rendu WordPress encore plus convivial et accessible pour les utilisateurs non techniques.

Maturité et Domination du Marché

  • 2010 : Automattic, la société fondée par Matt Mullenweg, a transféré la marque WordPress et les droits connexes à la Fondation WordPress pour garantir que le logiciel resterait gratuit et open-source.
  • 2013 et après : WordPress a commencé à dominer le marché des CMS, avec des versions majeures ajoutant des fonctionnalités telles que l'amélioration de l'éditeur de médias, l'intégration API REST, et des mises à jour en termes de personnalisation et de maintenance automatique.

Innovation Continue

  • 2018 : L'introduction de Gutenberg, un nouvel éditeur de blocs, dans WordPress 5.0, a marqué une étape importante. Cet éditeur permettait de créer des mises en page plus complexes avec une approche visuelle plus moderne.

Impact et Réputation

  • Aujourd'hui : WordPress est utilisé par plus de 40% des sites web sur Internet. Il est apprécié pour sa flexibilité, sa communauté de développeurs, sa grande bibliothèque de thèmes et de plugins, et sa capacité à s'adapter à divers besoins, allant des blogs personnels aux sites d'entreprise complexes.

Les bases de WordPress

Interface de WordPress natif

 

 

  1. le menu Principal. Sur l'image, il s'agit des éléments de base de WordPress. L'adjonction d'extensions ou de données personnalisées peut ajouter des entrées dans ce menu.
    Certaines entrées regroupent de nombreuses fonctions très utiles.
  2. Le logo de WordPress, qui vous ramènera toujours à cette page d'accueil.
  3. Boutons "Ajouter" pour commencer à saisir des informations sur votre site web.
  4. Options de l'affichage de l'écran courant.

Menu Réglages

 

 

 

 

 

Un des premiers menus à visiter est "Réglages". Dans Général, nous allons paramétrer, par exemple,  le format d'affichage des dates.

Dans Lecture, nous choisirons la page d'accueil pour notre site.

Dans Permaliens, nous choisirons le format des URL pour appeler chacun de nos pages. Important pour le référencement.

Ajouter un utilisateur

Le menu "Comptes" permet de gérer les utilisateurs de WordPress et d'ajouter un nouveau compte.
Un mot de passe solide (l'utilisateur pourra le changer par la suite) et surtout choisir le bon rôle pour l'utilisateur et ainsi définir ses droits.

Les droits des utilisateurs par les rôles

  • Super Admin– Accède aux réglages d’administration multisite, ainsi qu’à toutes les autres fonctionnalités. Voir l’article Créer un réseau multisite.
  • Administrateur/Administratrice(slug : ‘administrator) – Accède à toutes les fonctionnalités d’administration dans un site unique.
  • Éditeur/Éditrice(slug : ‘editor’) – Peut publier et gérer les publications, y compris les publications d’autres utilisateurs.
  • Auteur/Autrice(slug : ‘author)  – Peut publier et gérer ses propres messages.
  • Contributeur/Contributrice(slug : ‘contributor) – Peut écrire et gérer ses propres articles mais ne peut pas les publier.
  • Abonné/Abonnée (slug : ‘subscriber) – Ne peut gérer que son profil

Ajouter une extension

Gestion des thèmes / thème enfant

C'est quoi, un thème enfant ?

Un thème enfant est un thème basé sur votre thème parent. Il en reprend toutes les fonctionnalités sans jamais le modifier. Ainsi vous pouvez apporter des modifications à votre enfant et en cas de mise à jour du parent, vous ne les perdez pas!

 

Création du théme enfant

  • Se connecter en FTP à votre site
  • Aller dans le répertoire httpdocs / wp / wp-content / themes
  • Créer un répertoire portant le nom de votre thème enfant (exemple hello-elementor-enfant)

Créer les fichiers style.css et functions.php dans lesquels vous copiez le code ci-dessous.

Dans le fichier style.css, remplacer le texte qui suit les deux points par vos informations.

Le champ template doit impérativement être le nom du répertoire du thème parent.

 

Le fichier style.css du thème enfant

/*
Theme Name: Theme enfant
Description: Theme enfant de votre nom ou nom de site
Author: Votre nom
Author URI: URL de l'auteur
Template: nom du répertoire parent
Version: 0.1.0
*/

Le fichier functions.php du thème enfant

<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

FAQ WordPress

Comment animer un lien vers un ancre (smooth effect) ?

Il existe de nombreuses extensions pour animer les liens vers une ancre ou améliorer l'expérience de scroll avec la souris.

Nous vous proposons ici l'extension :  Page scroll to id

Le site du concepteur

Le tutoriel d'utilisation

 

Quelles sont les unités de taille variables ?

Au lieu d'exprimer la taille des polices en PX (pixles), il est possible de l'exprimer dans une unité qui fait varier la taille des caractères en fonction de l'environnement  dans la page.

vw: largeur du viewport
vh: hauteur du viewport

Exemple CSS :
html { font-size: 2vw; }

Topbee Sàrl
Rte de la Plantaz 8
1870 Monthey

info@topbee.ch
crossmenuchevron-down