Vous êtes sur la page 1sur 54

Fa c u lt é d e s S c ie n c e s ju r id iq u e s ,

Ec o n o m iq u e s e t S o c ia le s
- S o u is s i

SYSTEMES DE GESTION
DE CONTENU (CMS)
Lic e n c e P ARC.EXC.MADICE.S 5

HAMZA EL HAMDAOUI
Introduction aux CMS

Installation et Configuration
plan de cours

Création de Contenu

Personnalisation du Design

Sécurité et Optimisation

Projets et Évaluation Finale


LES LOGICIELS A INSTALLER

Camtasia Studio Any Desk


Introduction aux CMS

Définition 1
Un système de gestion de contenu, communément appelé CMS (Content
Management System), est une solution conçue pour la création dynamique et
la mise à jour régulière de sites web.

Définition 2
Les systèmes de gestion de contenu permettent aux administrateurs de sites
web de gérer le contenu de leurs sites sans nécessiter des compétences en
programmation HTML ou l'utilisation d'outils de développement.

Définition 3
Un système de gestion de contenu représente un outil qui simplifie la
publication d'informations sur Internet, sans nécessiter de compétences de
programmation. Il permet la création automatisée et la gestion de sites
d'actualité aussi bien que de boutiques en ligne, tout en offrant une facilité
d'utilisation pour les utilisateurs non techniques.
Il existe de nombreux types de systèmes de gestion de contenu (CMS) disponibles, chacun avec ses propres
caractéristiques :

CMS Open Source :

Les CMS Open Source sont des systèmes de gestion de contenu pour la création
et la gestion de sites web. Ils sont distribués sous une licence open source, ce qui
les rend gratuits et accessibles à tous. Les utilisateurs peuvent personnaliser leur
site web en utilisant des thèmes et des plugins, et bénéficier du support d'une
communauté active de développeurs et d'utilisateurs.

EXEMPLES :
CMS E-commerce :

Les CMS E-commerce sont des plateformes logicielles spécialement conçues


pour la création et la gestion de boutiques en ligne. Ils offrent une gamme
complète de fonctionnalités, notamment la gestion des produits, le panier
d'achat, les paiements en ligne, la gestion des commandes et la personnalisation
du design.

EXEMPLES :
CMS Basés sur le Cloud :

Les CMS basés sur le cloud, ou CMS en ligne, sont des plateformes de gestion de
contenu qui fonctionnent sur des serveurs distants et sont accessibles via
Internet. Ils sont fournis avec un service d'hébergement, offrent une facilité
d'utilisation universelle depuis n'importe quel navigateur web, et bénéficient de
mises à jour automatiques gérées par le fournisseur de services.

EXEMPLES :
les principaux composants d'un site web

Un site web est composé de plusieurs éléments essentiels qui travaillent ensemble pour fournir du contenu et une
expérience utilisateur cohérente.
Contenu HTML :
Le contenu de base de chaque page web est créé en utilisant le langage de balisage HTML (HyperText Markup Language).
Cela inclut le texte, les images, les liens et d'autres éléments visuels.

EXEMPLE :
<!DOCTYPE html>
<html>
<head>
<title>MADICE WEBSITE</title>
</head>
<body>

<h1>Licence parcours d'excellence MADICE</h1>


<p> Ce parcours d'excellence a pour objectif principal de permettre aux étudiants retenus et inscrits d'obtenir une licence en marketing
digitale et commerce électronique et de continuer leurs études supérieures en vue d'obtenir un master dans la même spécialité. </p>

</body>
</html>
les principaux composants d'un site web

CSS (Cascading Style Sheets) :


Les feuilles de style CSS sont utilisées pour contrôler la mise en page, la présentation et le style visuel du site. Elles
définissent les couleurs, les polices, les marges, les espacements, etc.

EXEMPLE :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>licence parcours d'excellence MADICE</h1>


<p>Ce parcours d'excellence a pour objectif principal de permettre aux étudiants retenus et inscrits d'obtenir une licence en marketing
digitale et commerce électronique et de continuer leurs études supérieures en vue d'obtenir un master dans la même spécialité. </p>

</body>
</html>
les principaux composants d'un site web

JavaScript :
Le JavaScript est un langage de programmation utilisé pour ajouter des fonctionnalités interactives à un site web. Cela
inclut les effets de survol, les animations…

EXEMPLE :

function afficherAlerte() {
alert('Ceci est une alerte JavaScript !');}
les principaux composants d'un site web

Images et Médias : Les images, les vidéos, les fichiers audio et d'autres médias sont intégrés dans les pages web pour
enrichir le contenu et l'expérience de l'utilisateur.

EXEMPLE :

<!DOCTYPE html>
<html>
<body>

<iframe width="560" height="315"


src="https://www.youtube.com/embed/U1pdpWs0KAo?si=BIhMwKvmH
61AAVPG" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</body>
</html>
les principaux composants d'un site web

Navigation :
Les menus de navigation, les liens internes et externes permettent aux utilisateurs de se déplacer facilement entre les
pages et les sections du site.

EXEMPLE :

<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
les principaux composants d'un site web

En-tête :
L'en-tête du site contient souvent le logo de l'entreprise, le nom du site, la navigation principale et d'autres informations
importantes.

EXEMPLE :

<header>
<h1>Mon Site Web</h1>
<img src="logo.png" alt="Logo du site">
</header>
les principaux composants d'un site web

Pied de page :
Le pied de page contient généralement des informations de contact, des liens vers les médias sociaux, des mentions
légales et d'autres éléments pertinents.

EXEMPLE :

<footer>
<p>Contactez-nous :
contact@monsite.com</p>
<a href="/mentions-
legales">Mentions Légales</a>
</footer>
les principaux composants d'un site web

Pages :
Un site web est généralement composé de plusieurs pages, chacune ayant son propre contenu et sa propre structure. Les
pages peuvent inclure la page d'accueil, les pages de produits ou de services, les pages de contact, les articles de blog, etc.

EXEMPLE :
les principaux composants d'un site web

Nom de Domaine :
Le nom de domaine est l'adresse web du site (par exemple, www.monsite.com). Il est associé à une adresse IP spécifique
du serveur web.

EXEMPLES :
les principaux composants d'un site web

Serveur Web :
Le site est hébergé sur un serveur web qui le rend accessible aux visiteurs via Internet. Des serveurs web populaires
incluent Apache, Nginx et Microsoft IIS.

Rôle :

Un serveur web est un logiciel ou un ordinateur qui traite les


demandes HTTP (Hypertext Transfer Protocol) des navigateurs
web et renvoie les fichiers du site web correspondants aux
utilisateurs. Il est responsable de la gestion des pages web, des
images, des fichiers CSS, des scripts, etc.
les principaux composants d'un site web

Hébergement Web :
Le site est généralement hébergé sur un service d'hébergement web qui stocke les fichiers du site et les rend disponibles
en ligne.

Rôle :

L'hébergement web, également appelé hébergement de site web, est le service qui

permet à un site web d'être accessible en ligne. Il consiste à stocker les fichiers du site

web sur des serveurs web connectés à Internet de manière à ce que les utilisateurs

puissent y accéder à tout moment.


les principaux composants d'un site web

Base de Données :
Certains sites web, en particulier les sites dynamiques, utilisent une base de données pour stocker et récupérer des
informations, telles que les utilisateurs enregistrés, les commentaires, les produits, etc.

EXEMPLE :
les principaux composants d'un site web

Sécurité :
Des mesures de sécurité sont mises en place pour protéger le site contre les menaces en ligne, telles que les attaques de
piratage et les logiciels malveillants.

EXEMPLES :
les principaux composants d'un site web

Optimisation pour les Moteurs de Recherche (SEO) :


Des techniques d'optimisation sont utilisées pour améliorer la visibilité du site dans les résultats des moteurs de
recherche.

Rôle :

Visibilité : Le SEO vise à Analyse : L'utilisation Optimisation : Il s'agit de Trafic Qualifié : En


améliorer la visibilité de d'outils d'analyse pour l'optimisation du contenu, améliorant la visibilité, le
votre site web dans les surveiller les performances de la structure du site, des SEO attire un trafic qualifié,
résultats des moteurs de et les résultats du SEO. balises, des liens internes, c'est-à-dire des visiteurs
recherche. etc., pour être bien compris potentiellement intéressés
par les moteurs de par votre contenu ou vos
recherche. produits/services.
les principaux composants d'un site web

Analytique Web :
Des outils d'analyse web sont utilisés pour suivre le trafic du site, les comportements des utilisateurs et d'autres
métriques.

EXEMPLES :
Je vous invite à télécharger
ces applications sur votre ordinateur

W ord Pres s XAMP P


Installation et Configuration
Installation et Configuration

XAMPP :

XAMPP est un ensemble de logiciels open source largement utilisé pour faciliter le développement et la
gestion de sites web locaux. L'acronyme XAMPP représente les composants principaux du logiciel :

x A M P P
Système d'exploitation Apache MySQL PHP Perl
(OS) Un serveur web open Un système de gestion Un langage de script côté Un langage de
Il est compatible avec de base de données serveur utilisé pour programmation
source très populaire
plusieurs systèmes relationnelle (SGBDR) développer des interprété, bien que dans
d'exploitation,
qui gère les requêtes open source. Il est utilisé applications web la plupart des cas, le "P"
notamment Windows, HTTP et sert les pour stocker et gérer les dynamiques. PHP est soit plus couramment
Linux, macOS et d'autres. fichiers web. données de votre site souvent utilisé avec des associé à PHP.
web. bases de données MySQL
pour créer des sites web
interactifs.
Installation de XAMPP

L'installation de XAMPP est généralement assez simple. Voici les étapes de base pour installer XAMPP sur un système
Windows. Les étapes peuvent varier légèrement selon votre système d'exploitation, mais le processus global est similaire.
Ét a p e 1 : Té lé c h a r g e m e n t d e XAMP P Ét a p e 2 : Dé s a c t iv e r le s p r o g r a m m e s Ét a p e 3 : Dé s a c t iv e r Us e r Ac c o u n t
a n t iv ir u s Co n t r o l

Pour une installation en toute fluidité, Le contrôle du compte utilisateur (UAC, User Account
Téléchargez la version de XAMPP compatible désactivez temporairement votre antivirus Control) peut entraver l'installation de XAMPP en
avec votre système d'exploitation (Windows, jusqu'à la fin du processus. raison de restrictions d'écriture sur le lecteur C.
Linux, macOS, etc.). Assurez-vous de
télécharger la dernière version stable.
Installation de XAMPP

Ét a p e 4 : Dé m a r r e r l' As s is t a n t d ' In s t a lla t io n Ét a p e 5 : Co n f ig u r e r le s Co m p o s a n t s Ét a p e 6 : Ch o ix d u d o s s ie r


Lo g ic ie ls d ’in s t a lla t io n

Après avoir désactivé les programmes de sécurité Lors de l'installation de XAMPP, personnalisez Vous pourrez sélectionner le répertoire
susceptibles de causer des problèmes lors de les composants selon vos besoins. Pour un d'installation de votre logiciel et de ses
l'installation de XAMPP, il est temps de passer à environnement de test, optez pour composants lors de la procédure. Par défaut, un
l'étape suivante. Cliquez sur 'Suivant' pour configurer l'installation complète en cliquant simplement dossier XAMPP sera créé à la racine de votre
les paramètres de votre installation. sur "Suivant". disque dur.
Installation de XAMPP

Ét a p e 7 : La d e r n iè r e é t a p e d ' in s t a lla t io n

Le programme d'installation est prêt à procéder à l'installation de


XAMPP. Cliquez sur "Suivant" et patientez pendant que le programme
d'installation décompresse et installe les composants que vous avez
sélectionnés. Cette opération peut prendre quelques minutes. Il est
possible que vous soyez invité à autoriser l'accès au pare-feu pour
certains composants, comme Apache, au cours de l'installation.
Configuration de XAMPP

Le tableau de bord de XAMPP offre une gestion


totale de tous les éléments installés de XAMPP.
Vous avez la possibilité d'utiliser cette interface
pour mettre en marche ou arrêter divers modules,
exécuter un shell Unix, explorer les fichiers dans
l'environnement Windows, et surveiller toutes les
opérations en cours en arrière-plan. Les
fonctionnalités offertes par cette interface sont les
suivantes :
Configuration de XAMPP

Config NetStat Shell

Vous permet de configurer Affiche les processus


Ouvre une cellule UNIX
XAMPP ainsi que des courants sur votre
composants ordinateur local

Terminer

Fermer le Contrôleur de
gestion XAMPP

Explorer Services Aide

Ouvre le dossier XAMPP Affiche les services propose des liens d’aide
dans Windows fonctionnant en arrière-plan par le biais du forum
utilisateur
Configuration de XAMPP

Dans le tableau de configuration de XAMPP,


sélectionnez l'option « START » sous l'onglet
"Actions" pour activer le module Apache et aussi
MySQL. Cette action informe XAMPP de lancer le
serveur de votre choix et configuration de votre
Base de donnée.
NB: Les modules qui ont été démarrés seront mis
en évidence en vert.
Appuyez sur le bouton "Admin"

associé à votre serveur Apache.

Cela vous conduira vers l'URL de

votre serveur, où vous serez

automatiquement dirigé vers le

tableau de bord de votre serveur.


Pourriez-vous m'expliquer le contenu de ce message d'erreur concernant l'accès à notre

phpMyAdmin et pourquoi nous n'avons pas pu y accéder ?


Cliquez sur le bouton "Admin" situé à

l'arrière de votre serveur MySQL pour

accéder à PhpMyAdmin. À partir de

là, vous pouvez gérer vos bases de

données et effectuer des tests sur

votre serveur XAMPP.


In s t a lle r W o r d P r e s s

Dès que le serveur est prêt, la prochaine étape consiste à procéder à l'installation de WordPress. Vous pouvez
télécharger la dernière version de WordPress, puis décompresser le fichier ZIP.

Accédez au dossier XAMPP sur votre lecteur C (C:\xampp) et repérez le dossier htdocs. Ensuite, transférez les fichiers
WordPress extraits dans ce répertoire. Il est conseillé de renommer ce nouveau dossier avec le nom de votre site Web
pour simplifier le développement Web sur le serveur XAMPP.

cliquer sur le
bouton Explorer
Cr é e r u n e Ba s e d e d o n n é e s

Pour créer une base de données, il faut lancer phpMyadmin en cliquant sur le bouton Admin.
Dans le menu horizontal , cliquez sur Bases de données
Cr é e r u n e Ba s e d e d o n n é e s

Choisissez le nom de votre base de données, puis sélectionner « utf8_bin » pour l’interclassement, puis cliquez sur Créer.
In s t a lla t io n d e W o r d P r e s s
e n lo c a l

Complétez l'installation de WordPress en local en

ouvrant votre navigateur et en vous rendant sur

http://localhost/nomdossier.

Assurez-vous de remplacer "nomdossier" par le nom

du dossier que vous avez sélectionné à la troisième

étape.
In s t a lla t io n d e W o r d P r e s s
e n lo c a l
In s t a lla t io n d e W o r d P r e s s
e n lo c a l

Pour construire le site en local, WordPress requiert un ensemble d'informations. Veuillez renseigner les données de la base

de données de la manière suivante :

•Nom de la base de données ‒ le nom de la base de données


que vous avez créée dans phpMyAdmin.

•Identifiant ‒ entrez « root » comme nom d’utilisateur par


défaut.

•Mot de passe ‒ laissez le champ du mot de passe de la base


de données MySQL vide.

•Hôte de la base de données ‒ conservez la valeur par défaut «


localhost ».

•Préfixe de table ‒ conservez le préfixe par défaut « wp_. »


In s t a lla t io n d e W o r d P r e s s
e n lo c a l

Une fois que vous avez terminé, appuyez sur "Soumettre" puis "Exécuter l'installation". Complétez les informations
supplémentaires requises, telles que le nom du site et les identifiants de connexion, puis cliquez sur le bouton "Installer
WordPress".
Co m m e n t Ac c é d e r
à Vo t r e S it e W e b

Pour vous connecter à votre site la prochaine fois, vous pouvez suivre ces
étapes :

1. Ouvrez votre navigateur web.

2. Dans la barre d'adresse, saisissez l'adresse suivante :


`localhost/nomdevotresite/wp-admin`, en remplaçant "nomdevotresite"
par le nom que vous avez choisi pour votre site.

3. Appuyez sur "Entrée" ou "Return" pour accéder à cette adresse.

4. Vous serez redirigé vers la page de connexion de WordPress.

5. Entrez votre identifiant (nom d'utilisateur) et votre mot de passe.

6. Cliquez sur le bouton "Se connecter" pour accéder à l'interface


d'administration de votre site WordPress.
Création de Contenu Dé fin it io n d e la c r é a t io n d e c o n t e n u

La création de contenu fait référence au processus de production d'informations, d'éléments visuels, de vidéos, de
textes, d'audio et d'autres médias, dans le but de fournir des informations, de divertir, d'instruire, de communiquer ou
de susciter un intérêt auprès d'un public spécifique.

Ce contenu peut prendre diverses formes, par exemples :

Articles de blog Vidéos Images Cours en ligne


Création de Contenu

L'objectif principal de la création de

contenu est de répondre aux besoins, aux La création de contenu joue un rôle

intérêts ou aux attentes d’un public essentiel dans le marketing, la communication,

spécifique, qu'il s'agisse de fournir des l'éducation, le divertissement et de nombreux

informations utiles, de divertir, d'éduquer, de autres domaines, en particulier dans le contexte

persuader ou de créer un lien avec les numérique d'aujourd'hui.

individus ciblés.
Stratégie digitale

Il est important de commencer par analyser la situation en utilisant par exemple la matrice SWOT
Stratégie digitale Exemple:

Forces (S) :
Contenu de qualité: Si le site web propose un contenu informatif, utile et de grande qualité, cela peut attirer un public
fidèle.

Bonne expérience utilisateur: Une interface conviviale, une navigation intuitive et une conception réactive peuvent
améliorer l'expérience des utilisateurs.

Visibilité sur les moteurs de recherche: Si le site est bien optimisé pour les moteurs de recherche (SEO), il peut apparaître
dans les résultats de recherche, augmentant ainsi la visibilité.

Réseau de médias sociaux: Une forte présence sur les médias sociaux peut être un atout pour diriger le trafic vers le site
web.

Monétisation potentielle: La possibilité de générer des revenus grâce à la publicité, les ventes en ligne, ou d'autres
méthodes.
Stratégie digitale Exemple:

Fa ib le s s e s (W ) :

Manque de notoriété : Si le site est nouveau ou peu connu, il peut être difficile d'attirer du trafic au début.

Concurrence intense : Dans des niches populaires, la concurrence peut être féroce, ce qui rend difficile la distinction du
site.

Maintenance technique : Les mises à jour régulières, la gestion de la sécurité et d'autres aspects techniques peuvent être
une charge pour l'équipe du site.

Contenu obsolète : Le maintien de contenu actuel et pertinent peut être un défi, en particulier pour les sites web à fort
volume de contenu.

Problèmes de financement : Si le site dépend de la publicité ou de la génération de revenus, une baisse du trafic ou de la
demande publicitaire peut entraîner des difficultés financières.
Stratégie digitale Exemple:

Op p o r t u n it é s (O) :

Élargissement du public : En ciblant de nouveaux segments de marché ou en créant du contenu diversifié, le site peut
élargir son public.

Partenariats potentiels : Collaborer avec d'autres sites ou entreprises peut ouvrir de nouvelles opportunités de promotion
et de monétisation.

Tendances du marché : Identifier et capitaliser sur les tendances actuelles du marché peut permettre de rester pertinent
et attractif pour les utilisateurs.

Événements saisonniers : Profiter d'événements saisonniers ou d'occasions spéciales pour promouvoir le site.

Innovation technologique : L'adoption de nouvelles technologies, telles que l'intelligence artificielle ou la réalité virtuelle,
peut améliorer l'attrait du site.
Stratégie digitale Exemple:

Me n a c e s (T) :

Évolution des algorithmes de recherche : Les modifications dans les algorithmes de moteurs de recherche peuvent
affecter le classement du site et la visibilité.

Cyberattaques : Les menaces de sécurité en ligne, telles que les attaques par déni de service (DDoS), peuvent
compromettre la disponibilité du site.

Évolution de la législation : Les changements dans la réglementation en matière de confidentialité des données, de droits
d'auteur ou de commerce électronique peuvent avoir un impact sur le fonctionnement du site.

Instabilité économique : Les fluctuations économiques peuvent réduire la demande publicitaire ou les dépenses des
consommateurs, affectant ainsi les revenus du site.

Mauvaise réputation en ligne : Les commentaires négatifs, les critiques ou les controverses en ligne peuvent nuire à la
réputation du site.
Stratégie digitale

On distinguera 4 objectifs principaux pour une stratégie digitale

Vous aimerez peut-être aussi