Ce document présente un module de formation destiné aux débutants sur la création de sites web avec un accent particulier sur les systèmes de gestion de contenu (CMS) comme WordPress. Il aborde les types de sites, leur conception, les outils de fabrication, et propose un guide étape par étape pour créer un site vitrine. En outre, le module couvre des aspects tels que la sécurité, la personnalisation et les bonnes pratiques en matière de développement web.

1. LES CMS
Durée : 20 min
Niveau: Débutant

2. Ce module vous propose de découvrir ce qu’est un site web.
Nous verrons les différents types de site, ainsi que leurs
types de contenus.
Ensuite on parlera de conception de site, de la manière
d’aborder cette étape.
Enfin la dernière partie traitera de la fabrication d’un site et
des outils utilisables, notamment les CMS.

3. Les sites
Les sites:
- Différents types
- Différents contenus
- Différentes fonctionnalités

4. Un site
Définition
page
04

5. Un site
Définition
page
05
Forum
Jeux
Listes
Règlements
Cours
Applications

6. Un site
Définition
page
06
Forum
Une page
Jeux
Une page
Listes
Règlements
Cours
Applications
Sauvegarde

7. Un site
Définition
page
07
Forum
Une page
Jeux
Une page
Listes
Règlements
Cours
Applications
Sauvegarde

8. Un site
Définition
page
08
Forum
Une page
Jeux
Paramétrage
Une page
Listes
Règlements
Cours
innovations
Applications
Sauvegarde
Annuaire

9. Un site
Définition
page
09
Forum
Une page
Jeux
Paramétrage
Une page
Listes
Règlements
Cours
innovations
Applications
Sauvegarde
Annuaire

10. Un site
Définition
page
010
Site Web
Forum
Une page
Jeux
Paramétrage
Une page
Listes
Règlements
Cours
innovations
Applications
Sauvegarde
Annuaire

11. Un site
Définition
page
011
Site Web
Forum
Une page
Jeux
Paramétrage
Une page
Listes
Règlements
Cours
innovations
Applications
Sauvegarde
Annuaire
www.monsite.fr

12. Un site
Définition
page
012
Site Web
Forum
Une page
Jeux
Paramétrage
Une page
Listes
Règlements
Cours
innovations
Applications
Sauvegarde
Annuaire
www.monsite.fr
Ensemble de pages, de ressources entre elles par des hyperliens

13. Les sites
Différents types
page
013
Les sites vitrines, institutionnels, e-commerce

14. Les sites
Différents types
page
014
Les sites vitrines, institutionnels, e-commerce

15. Les sites
Différents types
page
015
Les sites vitrines, institutionnels, e-commerce

16. Les sites
Différents types
page
016
Les sites vitrines, institutionnels, e-commerce

17. Les sites
Différents types
page
017
Les blogs, les réseaux sociaux, les forums, les wikis

18. Les sites
Différents types
page
018
Les blogs, les réseaux sociaux, les forums, les wikis

19. Les sites
Différents types
page
019
Les blogs, les réseaux sociaux, les forums, les wikis

20. Les sites
Différents types
page
020
Les blogs, les réseaux sociaux, les forums, les wikis

21. Les sites
Différents types
page
021
Les applications : intranet, CRM, LMS, les comparateurs

22. Les sites
Différents types
page
022
Les applications : intranet, CRM, LMS, les comparateurs

23. Les sites
Différents types
page
023
Les applications : intranet, CRM, LMS, les comparateurs

24. Les sites
Différents types
page
024
Les applications : intranet, CRM, LMS, les comparateurs

25. Les sites
Différents types
page
025
Les moteurs de recherche, les annuaires, les portails

26. Les sites
Différents types
page
026
Les moteurs de recherche, les annuaires, les portails

27. Les sites
Différents types
page
027
Les moteurs de recherche, les annuaires, les portails

28. Les sites
Différents types
page
028
Les moteurs de recherche, les annuaires, les portails

29. Les sites
Différents types
page
029
Les sites vitrines, institutionnels, e-commerce
Les blogs, les réseaux sociaux, les forums, les wikis
Les applications : intranet, extranet, CRM, LMS, les comparateurs
Les moteurs de recherche, les annuaires, les portails

30. Les sites
Différents contenus
page
030

31. Les sites
Différents contenus
page
031
Des liens hypertextes

32. Les sites
Différents contenus
page
032
Des liens hypertextes Des textes

33. Les sites
Différents contenus
page
033
Des liens hypertextes Des textes
Des images

34. Les sites
Différents contenus
page
034
Des vidéos
Des liens hypertextes Des textes
Des images

35. Les sites
Différents contenus
page
035
Des vidéos
Des liens hypertextes Des textes
Des images
Des catalogues d’objets

36. Les sites
Différents contenus
page
036
Des vidéos
Des liens hypertextes Des textes
Des images
Des tableaux, des listes Des catalogues d’objets

37. Les sites
Différents contenus
page
037
Des vidéosDes documents
Des liens hypertextes Des textes
Des images
Des tableaux, des listes Des catalogues d’objets

38. Les sites
Différents contenus
page
038
Des sondages
Des vidéosDes documents
Des liens hypertextes Des textes
Des images
Des tableaux, des listes Des catalogues d’objets

39. Les sites
Différentes fonctionnalités
page
039

40. Les sites
Différentes fonctionnalités
page
040
01
Gérer du contenu éditorial
Textes, vidéos, images

41. Les sites
Différentes fonctionnalités
page
041
01
Gérer du contenu éditorial
Textes, vidéos, images
02
Boutique
Achat, commande de produits, inscription à
un évènement

42. Les sites
Différentes fonctionnalités
page
042
01
Gérer du contenu éditorial
Textes, vidéos, images
02
Boutique
Achat, commande de produits, inscription à
un évènement
03
Gestion de documents
Partage de documents, de classements de
fichiers, de dossiers

43. Les sites
Différentes fonctionnalités
page
043
01
Gérer du contenu éditorial
Textes, vidéos, images
04
Newsletters, chat, forum
Interactions avec les utilisateurs
02
Boutique
Achat, commande de produits, inscription à
un évènement
03
Gestion de documents
Partage de documents, de classements de
fichiers, de dossiers

44. Les sites
Différentes fonctionnalités
page
044
01
Gérer du contenu éditorial
Textes, vidéos, images
04
Newsletters, chat, forum
Interactions avec les utilisateurs
02
Boutique
Achat, commande de produits, inscription à
un évènement 05
Fonctionnalités diverses
Géolocalisation, multilangues, agenda,
réseaux sociaux, FAQ, etc.
03
Gestion de documents
Partage de documents, de classements de
fichiers, de dossiers

45. Les sites
Différentes fonctionnalités
page
045
01
Gérer du contenu éditorial
Textes, vidéos, images
04
Newsletters, chat, forum
Interactions avec les utilisateurs
02
Boutique
Achat, commande de produits, inscription à
un évènement 05
Fonctionnalités diverses
Géolocalisation, multilangues, agenda,
réseaux sociaux, FAQ, etc.
03
Gestion de documents
Partage de documents, de classements de
fichiers, de dossiers 06
Fonctionnalités métiers
Fonctionnalités liées au métier: gestions des
congés, de la paye, etc.

46. Conception
Conception d’un site:
- Arborescence
- Wireframe
- Maquette

47. Conception
Arborescence
page
047
Ce que propose
une arborescence

48. Conception
Arborescence
page
048
Les sujets du site / Fonctionnalités
L’arborescence présente les sujets traités par le site
Cela peut être également la liste des fonctionnalités
Les pages du site
Ils sont découpés en page
Le menu du site
Ils sont répartis sous forme de menu
Ce que propose
une arborescence

49. Conception
Arborescence
page
049
Les sujets du site / Fonctionnalités
- Menus du jour
- Les nouveautés, les informations
- Une possibilité de réservation
- Possibilité de contact
Imaginons le site
d’une boulangerie en ligne

50. Conception
Arborescence
page
050
Les pages du site
- Accueil
- Actualités
- Contact
- Réservation
- Présentation de la société
- Mentions légales
Imaginons le site
d’une boulangerie en ligne

51. Conception
Arborescence
page
051
Le menu du site
- Welcome
- Menu
- Réservations
- Contact
- Réseaux sociaux
- Mentions légales
Imaginons le site
d’une boulangerie en ligne

52. Conception
Arborescence
page
052
Page d’accueil
Welcome RéservationMenu Contact
Réseaux
sociaux
Société

53. Conception
Wireframe
page
053

54. Conception
Maquette
page
054

55. Fabrication
Les outils
- HTML / CSS
- Page statique / Dynamique
- Développement
- Content Management System
- Wordpress

56. HTML / CSS
Des lignes de codes
page
056

57. HTML / CSS
Des lignes de codes
page
057

58. Page statique vs Page dynamique
Exemple de wikipédia
page
058

59. Page statique vs Page dynamique
Exemple de wikipédia
page
059

60. Page statique vs Page dynamique
Exemple de wikipédia
page
060

61. Page statique vs Page dynamique
Exemple de wikipédia
page
061

62. Page statique vs Page dynamique
Exemple de wikipédia
page
062

63. Développement
Language PHP, ASP, Ruby, nodeJs
page
063
Apprendre plusieurs langages
Nécessite de l’expérience
Nécessite du temps
Etre développeur

64. CMS
Définition
page
064

65. CMS
Définition
page
065
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques

66. CMS
Définition
page
066
Création Articles
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques

67. CMS
Définition
page
067
Création Articles
Travail Collaboratif
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques

68. CMS
Définition
page
068
Création Articles
Travail Collaboratif
Workflow Validation
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques

69. CMS
Définition
page
069
Création Articles
Travail Collaboratif
Workflow Validation
Gestion Utilisateur
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques

70. CMS
Définition
page
070
Création Articles
Travail Collaboratif
Workflow Validation
Gestion Utilisateur
Ajout Fonctionnalités
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques

71. CMS
Définition
page
071
Création Articles
Travail Collaboratif
Workflow Validation
Gestion Utilisateur
Ajout Fonctionnalités
User Friendly
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques

72. CMS
Définition
page
072
Création Articles
Travail Collaboratif
Workflow Validation
Gestion Utilisateur
Ajout Fonctionnalités
User Friendly
Un CMS est un Système de Gestion de Contenu
Outil de création de sites dynamiques
Un CMS est accessible par différents publics

73. CMS
Plusieurs options
page
073
Les principaux du CMS du marché

74. CMS
Plusieurs options
page
074
Les principaux du CMS du marché

75. CMS
Plusieurs options
page
075
Les principaux du CMS du marché
Comparatif OVH – 2017
https://www.ovh.com/fr/hebergement-web/site/comparatif-cms/

76. CMS
Plusieurs options
page
076
Les principaux du CMS du marché

77. WordPress
CMS Leader
page
077

78. WordPress
CMS Leader
page
078
Les + de WordPress

79. WordPress
CMS Leader
page
079
Les + de WordPress
Gratuit et open source

80. WordPress
CMS Leader
page
080
Les + de WordPress
Gratuit et open source
User friendly

81. WordPress
CMS Leader
page
081
Les + de WordPress
Gratuit et open source
User friendly
Des fonctionnalités

82. WordPress
CMS Leader
page
082
Les + de WordPress
Gratuit et open source
User friendly
Des fonctionnalités
Une communauté active

83. WordPress
CMS Leader
page
083
Les + de WordPress
Gratuit et open source
User friendly
Des fonctionnalités
Une communauté active
SEO accessible

84. WORDPRESS
“hello world”
Niveau: Débutant

85. Ce module vous propose de créer votre premier “Hello Word”
sur le web grâce à Wordpress.
Nous verrons comment installer Wordpress, sur votre poste
de travail.
Ensuite on fera le tour de l’interface d’aministration pour
lister toutes les possibilités de base de Wordpress
Nous pourrons créer notre première page pour tester notre
site.

86. Installation
Premiers pas:
- Pré-requis
- Installation

87. Installation
Prérequis
page
04
Serveur Web - Apache
Langage de développement de type serveur : PHP
Base de données : MySQL

88. Installation
Installation
page
05
Version
Téléchargement
Configuration et installation

89. Interface
Tour d’horizon:
- Frontend / backend
- Accueil
- Pages
- Articles
- Médias
- Apparence
- Extensions
- Utilisateurs
- Outils
- Réglages

90. Installation
Frontend - Backend
page
07
Vue utilisateurs – vue administration
Login page d’accueil
Accueil du backend

91. Installation
Fonctions de base
page
08
Pages
Articles
Médias

92. Installation
Thème et fonctionnalités
page
09
Thème
Apparence
Extensions

93. Installation
Paramétrage
page
010
Utilisateurs
Outils
Réglages

94. Hello Word
Première page:
- Le module Page
- Création d’un menu
- Menu Article

95. Installation
Module Page
page
012
Interface
Ajouter une page
Publication

96. Installation
Gestion de menu
page
013
Interface
Sources du menu
Structure du menu

97. Installation
Création d’un article
page
014
Interface
Ajout d’un article
Catégorie et étiquette
Publication

98. WORDPRESS
“mon premier site”
Niveau: Débutant

99. Ce module vous propose de créer votre premier site sur le
web grâce à Wordpress.
Nous partirons sur un site vitrine et nous verrons chaque
étape du début à la fin.
Dans un premier temps nous ferons la conception en listant
les fonctionnalités et l’arborescence.
Ensuite nous pourrons attaquer la production du site.
Et dernière étape, nous verrons comment faire la mise en
ligne de notre site.

100. Conception
Démarrage:
- Sujet
- Fonctionnalités
- Arborescence
- Wireframe

101. Conception
Sujet
page
04
Sujet du site – demande du client
Une association littéraire veut
présenter son association
et ses diverses activités.
Elle propose des critiques de livres,
et l’inscription à la newsletter.

102. Conception
Fonctionnalités
page
05
Page décrivant l’association
Page présentant les activités
Un système d’ajout de critique
Une inscription à la newsletters

103. Conception
Fonctionnalités
page
06
Page décrivant l’association
Page présentant les activités
Un système d’ajout de critique
Une inscription à la newsletters
Les mentions légales
Une page contact
Site responsive
Des outils pour le référencement
Un système de gestion des users

104. Conception
Arborescence
page
07
Page d’accueil
Qui sommes nous
Activités
Critiques
Contact
News letter

105. Conception
Wireframe
page
08

106. Production
Production:
- Paramétrage de départ
- Choix du template
- Page d’accueil
- Page qui sommes-nous
- Page activités
- Page des critiques
- Page contact
- Page Newsletters
- Mentions légales
- Référencement
- Responsive

107. Production
Paramétrage de départ
page
010
Utilisateur
Site en construction
Menu en construction

108. Production
Choix du template
page
011
Ajout via le site
Ajout manuel
Page d’accueil

109. Production
Page d’accueil
page
012
Apparence
Customization
Page statique
Menu
Widget

110. Production
Page Qui sommes-nous ?
page
013
Page standard
Ajout des photos

111. Production
Page Activités
page
014
Page standard
Ajout des photos

112. Production
Page des critiques
page
015
Système des articles
Ajout d’un nouvel article
Création des catégories
Ajout dans le menu

113. Production
Page Contact
page
016
Recherche de plugin
Ajout d’un plugin
Paramétrage du plugin
Ajout d’un shortcode

114. Production
Page NewsLetters
page
017
Recherche de plugin
Ajout d’un plugin
Paramétrage du plugin

115. Production
Page Mentions légales
page
018
Recherche de plugin
Ajout d’un plugin
Paramétrage du plugin

116. Production
Référencement
page
019
Yoast
Google Analytics
URL des articles

117. Déploiement
Tour d’horizon:
- Sauvegarde & export
- Installation serveur

118. Production
Sauvegarde & export
page
021
Backup des données
Duplicator

119. Production
Installation serveur
page
022
Prérequis
Filezilla
Configuration de la base données
Installation du backup
Choix de l’url

120. WORDPRESS
“Bonnes pratiques”
Niveau: débutant

121. Ce module vous propose de créer d’aller plus loin dans la
configuration de Wordpress.
Nous créerons pour commencer un thème enfant pour avoir
pouvoir implémenter proprement de nouvelles
fonctionnalités.
Nous ferons un point sur la sécurité sur Wordpress.
Enfin on verra comment personnaliser l’interface pour les
différents utilisateurs.

122. Thème enfant
Démarrage:
- Structure des fichiers
- Création du thème enfant

123. Thème enfant
Structure des fichiers
page
04
Ouverture via FileZilla
Architecture de Wordpress
Création du répertoire du thème enfant

124. Thème enfant
Création du thème enfant
page
05
Créer une feuille de style
Importer le thème parent
Activer le thème enfant

125. Sécurité
Production:
- Utilisateurs
- Plugins et thèmes
- Paramétrage général
- Données sensibles
- Sauvegarde

126. Sécurité
Utilisateurs
page
07
Limiter le nombre de connexions
Déplacer la page de login
Captcha sur la page de login

127. Sécurité
Plugins et thèmes
page
08
Supprimer les plugins inactifs
Supprimer les thèmes inactifs
Faire les mises à jour

128. Sécurité
Paramétrage général
page
09
Autoriser les mises à jour mineures
Modifier le préfixe en BDD
Désactiver des fonctions non utilisées

129. Sécurité
Les données
page
010
Empêcher l’affichage des dossiers
Bannir les mauvaises adresses IP
Utiliser les bons droits sur les dossiers

130. Sécurité
Sauvegarde
page
011
Sauvegarde de la base quotidienne
Sauvegarde des fichiers hebdomadaires
Vérifier régulièrement son site

131. Personnalisation
Personnalisation:
- WP admin Ui

132. Personnalisation
WP Admin UI
page
013
Installation du plugin
Customisation de la page de Login
Modification de l’interface par user