Dodi_Mbuta_Rapport D605 : Annuaire_anciens_miage_amiens_upjv

UFR des sciences
ANNUAIRE EN LIGNE POUR LES ANCIENS ETUDIANTS DIPLOMES
MIAGE DE L’UNIVERSITE DE PICARDIE JULES VERNE
Rapport technique sur le projet thématique réalisé
Code du module : D605
Intitulé du module : Etude de cas thématique
Nom de l’enseignant : Laurent Josse
Nom de l’apprenant : Mbuta Ikoko Dodi Alphonse

ii
Sommaire
Actuellement, pour de nombreuses organisations ou entreprises, un site et/ou une application web
passe pour un outil important les aidant à atteindre leurs partenaires d’affaires ou clients. Dans ce
cadre, certaines d’entre mettent alors sur pied des sites web dits informationnels ou institutionnels qui,
au besoin, intègrent des annuaires en ligne reprenant le profil académique et/ou professionnel de leur
personnel clé ou stratégique. C’est souvent le cas avec des entreprises de consulting ou des
organisations et institutions universitaires.
Dans le cadre de ce module de cours, le D605, s’intitulant « Projet thématique », il nous a été
demandé de construire un annuaire en ligne pour les anciens. Ce dernier devrait au fait reprendre des
informations sur chaque ancien étudiant diplômé MIAGE d’Amiens (Université de Picardie Jules
Verne), principalement sa formation académique (filière MIAGE suivie) et son profil professionnel,
en plus de leur permettre tous de rester digitalement en contact permanant entre eux et avec l’alma
mater. C’est aussi un annuaire en ligne qui se veut pour mission celle de pouvoir faciliter la carrière
et/ou l’insertion professionnelle des nouveaux diplômés MIAGE d’Amiens mais également, de
manière occasionnelle, la levée de fonds pour une recherche de qualité au sein du département
informatique ou de l’ensemble de l’UFR des sciences de l’Université de Picardie Jules Verne.
Supposé gérer des informations à caractère personnel ou privé de chaque ancien étudiant diplômé
MIAGE d’Amiens, l’annuaire en ligne à construire devrait en plus respecter les lois et règlements
européens applicables en la matière, tels que repris par la CNIL, la « Datainspektionen » et/ou le
bureau de la Commission européenne en charge du GDPR. En référence à la directive Web de l’UE de
2016 (cf. OJ L 327, 2016), il devrait également se conformer à la nouvelle loi en vigueur en Suède
depuis le 01 janvier 2019 qui réglemente l’accessibilité des sites Web dans le pays car c’est un
annuaire en ligne qui est aussi également sensé offrir un accès à un plus grand nombre d’utilisateurs
ou internautes-visiteurs.
Enfin, cet annuaire en ligne serait construit avec l’aide d’un système de gestion de contenu (CMS) et
des technologies ou langages liées au Web, à l’instar de HTML, CSS, JavaScript/Jquery, Bootstrap et
C# .NET.
Mots clés : Les domaines du développement des sites et/ou applications web (Web design), Outils
fondamentaux pour le développement des sites et/ou applications web, Système de gestion de contenu

iii
(CMS), GDPR, Directives ou accessibilité Web (WCAG) et Projet et processus de développement des
sites et/ou applications web CMS Episerver

iv
Table des matières
Sommaire........................................................................................................................................ii
Table des matières ........................................................................................................................iv
Liste des tableaux..........................................................................................................................vi
Liste des figures............................................................................................................................vii
INTRODUCTION .........................................................................................................................1
Contexte et description du projet................................................................................................. 1
Objectifs et finalité de notre projet.............................................................................................. 1
Canevas du rapport...................................................................................................................... 3
Chapitre 1 Concepts théoriques associés.....................................................................................5
1.1 Les domaines du développement des applications et/ou sites web, quid ?..................... 5
1.1.1 Rappel sur la définition du mot Web .......................................................................... 5
1.1.2 Les domaines du développement Web : le font-end et le back-end............................ 6
1.1.3 Les technologies clés pour le développement de sites et/ou applications web........... 8
1.1.4 La conception graphique et les critères d’accessibilité Web (WCAG) .................... 13
1.2 Les systèmes de gestion de contenu.............................................................................. 17
1.2.1 Définitions et fonctionnalités.................................................................................... 17
1.2.2 Types de CMS .......................................................................................................... 17
1.2.3 Architecture d’un système de gestion de contenu..................................................... 19
1.3 Un mot sur les projets informatiques ou TI dans leur ensemble................................... 20
1.3.1 Définitions et types de projets informatiques ........................................................... 20
1.3.2 Modes d’approvisionnement et éléments de pilotage opérationnel au sein d’un
projet informatique............................................................................................................... 21
1.3.3 Les processus et/ou procédés de développement pour les sites ou applications web22
Chapitre 2 Méthodes et outils utilisés ........................................................................................31
2.1 Présentation de l’annuaire en ligne à construire pour « les anciens étudiants diplômés
MIAGE d’Amiens » .................................................................................................................. 31
2.1.1 Rappel sur la définition d’un annuaire en ligne........................................................ 31
2.1.2 Description de l’annuaire en ligne des anciens étudiants diplômés MIAGE d’Amiens
32
2.1.3 Procédé, environnement intégré, langages et autres technologies associées adoptés
pour le développement de l’annuaire en ligne....................................................................... 33
2.1.4 Considérations fonctionnelles et techniques du WCMS choisi : le « EpiServer CMS
». 36

v
2.1.5 La documentation du projet ...................................................................................... 41
Chapitre 3 Résultats obtenus......................................................................................................43
3.1 Collecte et analyse de besoins exprimés par le client ................................................... 43
3.1.1 Raffinement de différents besoins exprimés............................................................. 43
3.1.2 La scénarisation et les users stories .......................................................................... 44
3.2 L’architecture et/ou la structure de l’information de l’annuaire en ligne (plan du site ou
site map) et le codage. ............................................................................................................... 47
3.2.1 L’architecture informationnelle ................................................................................ 47
3.2.2 Le codage.................................................................................................................. 49
3.2.3 Le contenu définitif de l’annuaire en ligne............................................................... 50
3.3 L’esthétique de différentes pages ou interfaces web créées.......................................... 53
3.3.1 La charte typographique et l’intégration du contenu définitif au niveau des pages ou
interfaces web construites ..................................................................................................... 54
3.3.2 Le responsive ............................................................................................................ 59
3.3.3 Tests d’utilisabilité et d’accessibilité sur les différentes pages ou interfaces web
créées pour l’annuaire en ligne.............................................................................................. 60
Chapitre 4 Discussions et critiques ............................................................................................66
4.1 Par rapport à la réalisation de notre projet dans son ensemble ..................................... 66
4.2 Par rapport au codage et aux différents tests réalisés.................................................... 67
4.3 Par rapport à la vérification et à la validation finale de différentes pages ou interfaces
web créées et de leur contenu.................................................................................................... 69
Conclusion ....................................................................................................................................71
Annexe A Plan de développement de l’annuaire ......................................................................73
Annexe B Code source de l’annuaire construit.........................................................................74
Bibliographie................................................................................................................................75

vi
Liste des tableaux
Tableau 1 – Différentes outils et technologies choisis ou adpotés pour notre projet. .................. 35
Tableau 2 – Première monture des users stories obtenues grâce à la scénarisation de différentes
exigences fonctionnelles et non fonctionnelles...................................................................... 46
Tableau 3 – Quelques critères WCAG 2.1 utilisés ........................................................................ 62
Tableau 4 – Propositions Nombre de violations WCAG 2.1 après les tests automatiques de
différentes pages ou interfaces web créées ........................................................................... 63
Tableau 5 – Propositions de correction sur les différentes violations trouvées (Ici, sur la page
d’accueil)............................................................................................................................... 65

vii
Liste des figures
Figure 1 - Différents navigateurs web modernes et leurs différentes versions stables (source :
Can I Use, https://caniuse.com/#search=css, 2019)............................................................... 6
Figure 2 - Une portion d’un exemple de code HTML. .................................................................... 9
Figure 3 - Une portion d’un exemple de code ou de fonction Javascript/Jquery utilisant aussi
AJAX (« doSearch »)............................................................................................................. 11
Figure 4 - Outil d’inspection de pages web (à droite de cette page web)..................................... 13
Figure 5 – Couleur bleu du logo de l’UPJV sous trois différentes notations ou écritures (RGB,
HEX et HSL).......................................................................................................................... 15
Figure 5 – Cercle chromatique de Johannes Itten (source : Chambeau Athony,
https://www.cours-de-peinture.net/technique-de-melange-en-peinture-acrylique/, 2019)... 15
Figure 7 – Le cycle de vie du logiciel et la place naturelle d’un procédéde développement logiciel
(source : Luc Lavoie, 2007, cité par Mbuta Ikoko, 2011)..................................................... 22
Figure 8 - Scrum framework et ses principales parties [Sutherland Jeff et Schwaber Ken (2017,
reprise par Mbuta Ikoko, 2018), source : https://www.scrum.org/resources/what-is-scrum).
............................................................................................................................................... 26
Figure 9 – The Five Planes (source: Garrett Jesse, 2011). .......................................................... 28
Figure 10 - Vue d’ensemble du système et du site Web ou solution personnalisé......................... 36
Figure 11 - L’architecture d’EpiServer (source ffh :
https://www.episerver.com/learn/tech/technical-resources/architecture/) ........................... 38
Figure 12 – Environnement de développement versus environnement de production pour
EpiServer CMS...................................................................................................................... 38
Figure 13 – Environnement de développement versus environnement de production pour
EpiServer CMS...................................................................................................................... 39
Figure 14 – Environnement de développement MS Visual Studio avec les options « Add »
possibles grâce à l’Episerver CMS Visual Studio Extension installé ................................... 40
Figure 15 – Exemple d’une user storie de notre projet transcrite sur TFS. ................................... 46
Figure 16 - Sitemap reprenant les pages de notre site ................................................................... 48
Figure 17 - Un des prototypes fabriqués à l’aide d’un papier fonctionnel (ici, c’est le prototype de
la page principale « Annuaire des anciens »)........................................................................ 48
Figure 18 – Ecran représentant le code et les différents objets et propriétés de notre annuaire
structurés en MVC sous le MS Visual Studio........................................................................ 49
Figure 19 - L’interface de rédaction et de personnalisation WYSIWYG du CMS EpiServer ...... 50
Figure 20 – Une partie de la page web principale « Blog » et son contenu définitif rédigé par le
web redacteur après codage.................................................................................................. 53

viii
Figure 21 – La page principale « accueil » de l’annuaire et l’en-tête (header), avec un logo et
une barre de navigation. ....................................................................................................... 54
Figure 22 – Une partie de la page d’accueil, avec des cartes avec images matricielles remplies
ayant plusieurs couleurs, et le pied de page de l’annuaire (footer), avec des liens jugés
essentiels et incountounables. ............................................................................................... 55
Figure 23 – Exemple d’un article ou post intégral du blog (ici, avec des liens icones sur les trois
réseautage sociaux phares, et pour l’impression, le mailing et le fil RSS)........................... 56
Figure 24 – Une partie de la sous page de la liste des anciens étudiants diplômés filtrée par
promotion 2017, grâce au choix de l’onglet qui se trouve dans la sous navigation à gauche.
............................................................................................................................................... 57
Figure 25 – Une partie de la page de présentation du profil complet d’un ancien étudiant
diplômé MIAGE d’Amiens..................................................................................................... 58
Figure 26 – La page Contact de l’annuaire en ligne construit. .................................................... 58
Figure 27 - Affichage responsive de la page principale « Annuaire des anciens » sous le format
Desktop (ici, avec le device HP Z Book 1200px). ................................................................. 59
Figure 28 - Affichage responsive de la page principale « Annuaire des anciens » sous les formats
Mobile/tablette (ici, avec le device iPad : 768 px x 1024 px) et Mobile/smartphone (ici, avec
le device iPhone X : 375 px x 812 px). .................................................................................. 60
Figure 29 – Violations WCAG 2.1 trouvées sur la page d’accueil de notre annuaire en ligne avec
Total validator....................................................................................................................... 63

1
INTRODUCTION
Contexte et description du projet
Pour de nombreuses organisations ou entreprises, leurs sites et/ou applications web passent aujourd’hui
pour des outils importants qui les aident à atteindre leurs différents clients ou partenaires d’affaires. Ils
arrivent aussi à aider les parties prenantes internes (acteurs dirigeants et employés) de ces organisations à
communiquer, échanger et/ou partager, mais aussi également à mettre à la disposition de leur public et de
leurs différents clients ou partenaires d’affaires des informations pertinentes, digestes, intéressantes et
mémorables concernant leurs différentes activités et services offerts. Certaines de ces organisations ou
entreprises ne s’arrêtent pas là mais vont un peu plus loin. Elles intègrent au sein de leurs sites web des
annuaires en ligne qui reprennent le profil académique et professionnel de leur personnel clé ou
stratégique. C’est souvent le cas avec des entreprises de consulting ou des organisations et institutions
universitaires.
Concernant les organisations et institutions universitaires, elles intègrent des annuaires en ligne au niveau
de leurs sites web pour pouvoir mettre en valeur le profil académique et professionnel de leur personnel
académique ou administratif clé, mais aussi parfois celui de leurs anciens étudiants notables afin de
pouvoir servir au final de reférence marketing communicative et attirante. Les différentes associations ou
réseaux d’almuni (anciens étudiants) de ces organisations et/ou institutions universitaires font aussi
presque pareil.
En France, plusieurs associations ou réseaux d’almuni existent au sein des organisations et/ou institutions
universitaires et, suivant leurs besoins de communication ou autre, possèdent donc des annuaires en ligne
qui reprennent respectivement le profil académique et professionnel de leurs membres qui ne sont d’autres
que des anciens étudiants diplômés, et cela, pour aussi leur permettre de rester digitalement en contact
entre eux et avec leur alma mater, parfois également pour créer des opportunités d’affaires entre eux. Il
s’agit en effet d’une simple donne communicationnelle qui n’est pas nouveau dans l’actuelle société de
l’information, appelée désormais la société de la connaissance ou du savoir.
Tous ces annuaires en ligne ont souvent pour principal but de créer alors une identité virtuelle et de
pouvoir augmenter la visibilité des organisations ou entreprises et de leurs activités respectives.
Pour ce faire, la communauté ou le réseau d’anciens étudiants diplômés MIAGE d’Amiens de l’Université
de Picardie Jules Verne ne compte pas rester à la traîne de cette donne communicationnelle vu le caractère
international et de haut-niveau de la formation suivie, la formation MIAGE. Elle compte donc aussi
construire ou mettre sur pied un annuaire en ligne même si elle fait déjà partie de la fédération nationale
des étudiants et diplômés de MIAGE, connue sous le nom de « MIAGE connection », et qui dispose d’un
annuaire global pour tous les anciens étudiants diplômés MIAGE de France.
Objectifs et finalité de notre projet
1° Objectif général
L’objectif général de notre projet thématique, dans le cadre du module de cours D605, est de pouvoir
construire un annuaire en ligne pour les anciens étudiants diplômés MIAGE1
d’Amiens, c.à.d. du
département informatique de l’Université de Picardie Jules Verne qui fait donc partie de l’UFR des
sciences de l’Université.
1
Le diplôme ou le master de méthodes informatiques appliquées à la gestion des entreprises (MIAGE) est un
diplôme universitaire français de niveau bac+5, alliant une double compétence en informatique et en gestion, déstiné
à former des cadres supérieurs d’entreprises experts en ingénierie et management des systèmes d’information. Les
formations MIAGE sont dispensées dans vingt universités francaises et a pour vocation de former des professionnels
de niveau cadre à l’ingénierie des systèmes d’information au sein des organisations.

2
C’est un annuaire en ligne qui devrait reprendre des informations sur la filière académique suivie et le
profil professionnel actuel de chaque ancien étudiant diplômé MIAGE d’Amiens, en plus de leur
permettre de rester digitalement en contact permanant entre eux et avec leur alma mater. C’est aussi un
annuaire en ligne qui se donne pour mission celle de pouvoir faciliter la carrière et/ou l’insertion
professionnelle des nouveaux diplômés MIAGE d’Amiens mais aussi également, de manière
occasionnelle, la levée de fonds pour une recherche de qualité au sein du département informatique ou de
l’ensemble de l’UFR des sciences de l’Université de Picardie Jules Verne.
2° Objectifs concrets et vérifiables
Le but principal de ce travail est de:
 construire un annuaire en ligne pour les anciens étudiants diplômés MIAGE d’Amiens, avec
l’aide d’un système de gestion de contenu (CMS) et des technologies ou langages web liés, à
l’instar de HTML, CSS, JavaScript/Jquery, Bootstrap, C# .NET, etc.
La solution à construire pourrait également être étendue par l’ajout ou la configuration des
modules, plugins, ou composants, etc.
 créer des interfaces utilisateurs web conviviales, c.à.d. simples d’utilisation par les différents
utilisateurs ou internautes-visiteurs (user-friendly suivant le propos de Nielsen Jakob, 1994) ;
 disposer des informations de bonne qualité, c.àd. qui sont pertinentes, digestes, intéressantes et
mémorables pour les utilisateurs ou internautes-visiteurs de l’annuaire en ligne ;
 appliquer une logique communicationnelle visuelle sur une base typographique acceptable ;
 etc.
En plus, le fait que la solution qui va être construite au cours de ce projet va technologiquement être assise
sur un système de gestion de contenu, les informations qui vont être rendues disponibles devraient alors
être protégées et gérées en faisant respecter les lois et règlements européens relatifs à la protection de
données à caractère personnel ou privé, telles que reprises par la CNIL, par la « Datainspektionen » et/ou
par le bureau de la Commission européenne en charge du GDPR. Sensée également offrir un accès à un
plus grand nombre d’utilisateurs ou internautes-visiteurs, l’annuaire en ligne qui va être construit devrait
également se conformer à la nouvelle loi en vigueur en Suède depuis le 01 janvier 2019 qui, en référence à
la directive Web de l’UE de 2016 (cf. OJ L 327, 2016), réglemente l’accessibilité des sites web (WCAG)
dans sa version 2.1.
3° Limites du projet
Le projet thématique TI (ou web) que nous allons réaliser ne va pas chercher à s’assurer de l’existence de
cette communauté ou réseau d’anciens étudiants diplômés MIAGE d’Amiens, moins non plus de chercher
à décrire de manière formelle l’organisation et le fonctionnement de cette dernière. A la place, il va plutôt
chercher de se focaliser sur le développement c.à.d. sur la construction d’une version beta de l’annuaire en
ligne démandée pour le compte de ladite communauté ou réseau, et cela, avec l’aide d’un système de
gestion de contenu puis à partir des sources d’informations qui vont être mises à notre disposition ou
simplement celles qui vont être trouvées sur Internet à propos.
Toutefois, nous faisons noter que le développement des sites et/ou applications web ne disposant presque
pas à ce jour d’un processus ou procédé ad hoc connu. Les développeurs web s’appuient ou continuent de
s’appuyer sur des procédés prédictifs et agiles connus du monde de Génie logiciel. D’autres préfèrent
plutôt travailler suivant une approche intégrant ou unifiant plusieurs de ces processus et/ou procédés
connus pour enfin arriver à construire, créer ou fabriquer un site et/ou une application web fiable,
fonctionnelle ou conviviale. Derrière cette logique de travail évoquée et pour ne pas inventer une nouvelle
roue, nous allons donc tenter aussi d’intégrer ou d’unifier au moins deux processus ou procédés de
développement logiciel connus et adaptés pour la construction, la création ou la fabrication de notre
annuaire en ligne. Au fait, ca devrait être un exercice qui va nous aider de cerner correctement, par la
théorie et par la pratique, la pertinence réelle de cette logique intégratrice de processus ou procédés de
développement logiciel dans le cas qui nous concerne, c.à.d. celui d’un projet de développement web qui

3
recommande aussi logiquement une forte interaction ou collaboration entre les différentes parties
prenantes impliquées.
Faisons également noter que nous n’allons pas publier et/ou héberger en ligne notre solution car c’est juste
un projet thématique. Néanmoins le code source et la possibilité de son exécutíon en local seront rendus
disponibles.
Canevas du rapport
Le rapport technique qui est présenté ici contient les différentes informations théoriques et pratiques qui
ont servies pour la construction, la création ou la fabrication de l’annuaire en ligne nous demandé. Il s’agit
d’un rapport technique écrit dans le cadre du module de cours D605, intitulé « projet thématique », et
comporte 4 chapitres en dehors de l’introduction et de la conclusion.
Ainsi, hormis ce point introductif, le chapitre 1, dans les limites évoquées de notre projet thématique, va se
focaliser sur une revue de la littérature synthèse liée au développement des sites et/ou applications web au
sein des organisations. Les deux domaines accompagnant actuellement le développement web vont donc
être présentés, mais aussi quelques outils et technologies clés qui y sont liés, suivi de la présentation de
systèmes de gestion de contenu. En rapport avec les systèmes de gestion de contenu, nous allons profiter
pour parler aussi de la protection de données à caractère personnel ou privé. Cette protection de données à
caractère personnel ou privé va être évoquée de manière globale dans un contexte de comment un site
et/ou une application web construit devrait respecter les lois et règlements européens liés, c.à.d. les lois et
règlements européens relatifs la protection de données à caractère personnel ou privé et qui sont issus ou
repris par la CNIL, la « Datainspektionen » ou le bureau de la Commission européenne en charge du
GDPR. En plus, une ligne va également être écrite par rapport à la directive Web de l’UE de 2016 (cf. OJ
L 327, 2016) ; une directive qui insiste sur l’accessibilité de sites et/ou applications web construits et
destinés à être accéssibles à un large public. C’est donc un chapitre qui va donner suffisamment aux
différents lecteurs de notre rapport des éléments de compréhension pour pouvoir interpréter par la suite
correctement son contenu et celui de l’annuaire en ligne construit. Il se termine, ce premier chapitre, par la
présentation condensée de quelques processus ou procédés de développement logiciel connus du Génie
logiciel et utilisés dans le cadre d’un projet TI web, à l’instar par exemple du procédé agile Scrum et du
cadre théorique et pratique de Garrett James qui sont basés sur les interactions et/ou sur les expériences
profondes et positives des utilisateurs (UCD).
Le chapitre 2 va décrire la méthodologie que nous avons adoptée pour construire, créer ou fabriquer
l’annuaire en ligne qui nous a été démandé, et cela, à travers la présentation d’un processus ou procédé de
développement logiciel théorique et pratique qui se veut intégré ou unifié. Les outils et les technologies
choisis et qui vont être utilisés pour cette activité vont aussi être présentés. Ainsi, comme dit Masamba
N’kazi (1998, cité par Mbuta Ikoko, 2011), notre méthodologie adoptée est stratégique mais aussi fonction
de la thématique étudiée, des ressources disponibles et de l’expérience antérieure ou actuelle dans le
domaine. En se servant également de notre expérience modeste en management des projets TI/SI et en
architecture et dévelopement des systèmes informatiques, les éléments du procédé agile Scrum et du cadre
de référence proposé par Garrett James vont alors être intégrés ensemble pour servir des grandes lignes de
notre méthodologie.
Quant au chapitre 3, il va plutôt présenter les résultats de la construction, création ou fabrication de
l’annuaire en ligne demandé, et cela, en fonction de la méthodologie adoptée et des outils et technologies
utilisés. Quelques pages et/ou interfaces web créées seront illustrées, accompagnées des quelques
commentaires synthèses. Au fait, il va être seulement question de clarifier ces résultats obtenus par rapport
à la collecte et analyse des besoins exprimés, aux différents modèles concues (exigences, extra-
fonctionnel, de conception, etc.), au codage, mais la structure, le contenu et la convivialité de l’annuaire
en ligne construit, créé ou fabriqué.
Le chapitre 4 va être un chapitre qui va globalement nous fournir quelques lignes de discussions et
critiques sur l’ensemble du projet TI web réalisé mais aussi sur l’annuaire construit, créé ou fabriqué. Les
violations trouvées sur les différentes pages ou interfaces web créées pour notre annuaire vont être

4
présentées comme un example de séries de tests réalisés pour pouvoir être en conformité avec les
directives web de l’UE ou les recommandations WCAG 2.1 destinées à être appliquées à tout site ou
application web destiné à un plus grand nombre d’utilisateurs possible.
Les dernières lignes de ce rapport vont concerner notre conclusion et une la proposition de quelques
tâches futures pour pouvoir améliorer davantage l’annuaire en ligne construit, créé ou fabriqué pour les
anciens étudiants diplômés MIAGE d’Amiens dans le cas où le projet devrait devenir effectif pour sa mise
en ligne.

5
Chapitre 1
Concepts théoriques associés
Ce chapitre présente quelques concepts théoriques associés et pertinents pour le développement d’une
application et/ou d’un site au sein des organisations.
1.1 Les domaines du développement des applications et/ou sites web, quid ?
1.1.1 Rappel sur la définition du mot Web
Le World Wide Web (WWW), aussi appelé « protocole ou service Web », est défini dans la littérature TI
comme étant un programme de balayage ou de recherche d’information (référence au navigateur Web ou
Web browser) qui contient « un ensemble de pages ou documents reliés entre eux par des liens et
accessibles par l’Internet » (Berners Lee RFC 1630-, 1994, cité par Comer Douglas, 2006 et relayé par
Mbuta Ikoko, 2007). Cet ensemble dispose des noms uniques qui sont identifiables sur les différentes
pages ou documents qui sont même couramment appelés « pages ou documents Web ».
En parlant du Web, nous devons aussi comprendre qu’il est un service2
ou un protocole Internet de base au
niveau de la couche application qui s’occupe de la navigation entre les pages Web, comme c’est fut le cas
avec le GOPHER. Il s’exécute sous le mode « hypertexte non crypté » (HTTP : HyperText Transfert
Protocol) ou « crypté » (HTTPS : HyperText Transfert Protocol Secure). Il existe aussi également d’autres
services ou protocoles Internet de base de niveau application qui sont associés au protocole HTTP pour
rendre encore plus fonctionnel le service ou protocole Web, c.à.d. le Web. Parmi ces services ou
protocoles, nous pouvons citer ici les services ou protocoles de transfert de fichiers (FTP/TFTP : File
Transfert Protocol/ Trivial File Transfert Protocol), de connexion et/ou gestion à distance des utilisateurs
et des bureaux (TELNET : Terminal Network, SSH : Secure Shell, NIS : Network Information Service,
rlogin, rsh, etc.), de configuration des annuaires distribués (DNS/DNSSEC : Domain Name
System/Domain Name System Security Extensions et DHCP), de sécurisation des échanges (SSL : Secure
Sockets Layer ou TLS : Transport Layer Security), d’accès aux fichiers distants ou d’hébergement de sites
Web (le Web hosting avec NFS : Network File System ou SMB : Server Message Block), de conception
des sites Web ou le Web design (HTML : HyperText Markup Language qui est basé sur le SGML :
Standard Generalized Markup Language et qui, selon Koch Daniel et al. (2000), constitue la clé d’une
page Web), de messagerie électronique (Web mail avec SMTP : Simple Mail Transfert Protocol, POP :
Post Office Protocol, IMAP : Internet Message Access Protocol et MIME : Multipurpose Internet Mail
eXtensions) et de forums, newsgroups ou dialogue en temps réel (NNTP : Network News Transfer
Protocol ou IRC : Internet Relay Chat).
En termes de la série de définitions fournie pour le mot Web, nous faisons également noter que la maîtrise
de tous les différents services ou protocoles Internet de base de niveau application cités ci-dessus constitue
une des premières étapes pour la compréhension correcte de l’univers Web ou de l’Internet dans son
ensemble, mais aussi phytyet articulièrement comme l’une des étapes importantes avant de pouvoir
2
En informatique, tout comme en télématique, un service désigne l’ensemble de programmes qui forme une
application œuvrant pour effectuer un traitement transactionnel ou différé sur des informations ou pour manipuler
des données qui partage un mode de communication donné. Dans la pratique, ce sont des éléments de structuration
des informations ou des données qui permettent de fournir ou de réaliser un service informatique. Ces éléments
forment à leur tour ce que l’on appelle « protocole », c.à.d. une sorte de format de données, de dialogue, de règles
et/ou de processus définis pour un échange, un partage ou une communication, etc. Le protocole ne représente donc
pas un programme informatique mais plutôt un cahier des charges pour un ensemble de programmes informatiques.
Actuellement, les différents services Internet sont fournis via des plateformes ou infrastructures technologiques
construites au sein des organisations et font donc partie dans leur ensemble des services dits « en réseau ».

6
réellement se lancer comme professionnel dans la création de Web services3
et/ou de sites web pour les
organisations.
1.1.2 Les domaines du développement Web : le font-end et le back-end
Le développement Web, connu aussi sous le label anglais de « Web design », consiste en un certain
nombre de composants qui interagissent pour coder de pages web ou en une technologie de codage de
pages web. Il a aujourd’hui pour principal objetif la conception de sites web pour des réseaux publics ou
privés dits ouverts, fermés et/ou virtuels (Internet, Extranet, Intranet ou VPN). C’est un domaine qui est
vaste et en rapide évolution et qui comporte à son sein des nombreuses techniques et branches de
l’informatique qui sont divisées en deux principaux sous-domaines : (1) le front-end et (2) le back-end.
 Le Front-end – c’est le sous-domaine qui s’occupe de l’exécution de code du coté client. Ici, le
code qui est écrit par un Web developer4
fournit une interface d’utilisation et permet à l’utilisateur
ou internaute-visiteur de communiquer avec le site web créé. Il s’agit donc d’un sous-domaine qui
inclut la conception de pages web, leur mise en page et les flux d’information liés. Le Web
developer devrait alors se pencher beaucoup plus sur le code HTML, les éléments graphiques et
les divers langages de script, tels que le CSS, le Javascript/Jquery et le Bootstrap, mais aussi sur le
fonctionnement de pages web à créer pour les différents navigateurs web utilisés par les
utilisateurs ou internautes-visiteurs (le cas des navigateurs Chrome, Opera, Internet Explorer,
Safari, Mozila, etc.).
Figure 1 - Différents navigateurs web modernes et leurs différentes versions stables (source : Can I Use,
https://caniuse.com/#search=css, 2019).
Les différents navigateurs web repris sur la figure ci-dessus, appelés voire des « navigateurs web
modernes », tentent donc aujourd’hui de faciliter un affichage convivial de contenus des
différentes pages web à créer, mais aussi l’inspection de différents codes HTML, CSS et/ou
JavaScript liés aux pages web créées.
En un mot, le Front-end est le sous-domaine du développement Web qui agit sous la forme d’une
couche logicielle entre un navigateur web et les différentes fonctions sous-jacentes du serveur,
c’est-à-dire avec la partie back-end.
 Le Back-end – c’est un sous-domaine qui est caractérisé par le fait que le code est exécuté du
côté serveur, contrairement au front-end. Ainsi, avant l’exécution du code frontal (HTML, CSS et
JS, etc.), le code, pour le côté serveur, est exécuté en premier. Le back-end représente aussi le
nom et l’endroit où les applications et les bibliothèques logicielles de conception et de
3
Un Web service est un cadre d’architecture (Architecture Framework) pour la conversation entre deux ordinatrice,
l’un client et l’autre serveur, communiquant ou partageant des informations sur le web et parlant dans un vocabulaire
commun avec un fort ensemble de protocoles. Pour Printz Jacques (2012, cité par Mbuta Ikoko, 2018), il est plutôt à
présenter comme étant une technologie C/S améliorée qui permet aux différentes applications informatiques actuelles
de pouvoir communiquer entre elles, et cela, même si elles sont implémentées sur des différentes plates-formes ou
avec des langages de programmation différents.
4
Selon l’encyclopédie en ligne Wikipédia, un web developper est un programmeur spécialisé dans le développement
d’applications World Wide Web ou exécutées sur un serveur HTTP, ou qui y est spécifiquement engagé. C’est donc
quelqu’un qui devrait avoir un petit bourdonnement des les deux domaines, même s’il ne souhaite se concentrer que
sur l’un ou l’autre domaine. Il peut travailler comme salarié ou comme freelance et se charge alors du développement
du produit souhaité en répondant clairement aux besoins exprimés par un client dans un cahier des charges.

7
personnalisation de sites web sont stockées. Plusieurs technologies et langages de programmation,
côté serveur, et SGBD relationnelles ou objets sont associés à ce sous-domaine. Donc, la partie
back-end d’un site Web est donc liée à un SGBD et, ensemble, ils diffusent et présentent le
contenu aux périphériques et aux utilisateurs finaux (partie front-end).
Dans la pratique, les deux principaux sous-domaines qui viennent d’être évoques sont souvent exploités
et/ou mis ensemble par les développeurs Web, et cela, sous la terminologie de « Full stack ». En effet, ils
sont exploités et/ou mis ensemble en vue de pouvoir créer, construire ou fabriquer aujourd’hui un site
Web dynamique et intégré répondant aux besoins de ses utilisateurs ou de l’organisation commanditaire
(le client).
Toutefois, pour une question d’élégance, profitons de ces lignes pour faire un petit rappel synthèse sur les
sites ou les pages web qui sont souvent créées par les développeurs web pour répondre aux besoins de
leurs utilisateurs. Au fait, ils sont généralement de deux types : les sites web statiques et les sites web
dynamiques. En plus, séparés par le passé, les deux types de sites web cohabitent aujourd’hui et sont
même intégrés en un seul, allant du site web statique au site web dynamique. Pour Mbuta Ikoko (2010), il
est même aujourd’hui devenu difficile d’imaginer, de construire ou de mettre sur pied un site web statique
et de l’héberger avec l’aide d’un serveur web ou un site d’hébergement disponible sur Internet (cf. notion
de Web hosting). Le mieux à faire c’est plutôt de l’améliorer par des fonctionnalités dynamiques qui sont
offertes actuellement par la majorité de langages de programmation ou de script, à l’instar de
JavaScript/Jquery, PHP, C# .Net et JAVA, mais aussi par des bases de données relationnelles ou objets et
leurs systèmes de gestion qui accompagnent ces différents langages (le cas par exemple de MS SQL
Server, PostgreSQL, MySQL, Oracle, DB2, SQLite, Mongo DB/NoSQL, etc.). Ensuite, l’héberger.
D’ailleurs, comme nous allons le voir au point 1.2, ce sont des systèmes de gestion de contenu qui
assurent actuellement en grande partie la création et la gestion de données ou contenus de différents sites
ou pages web créés.
Les sites web statiques sont faciles à concevoir ou à construire. Ils sont naturellement constitués des pages
web « dites statiques » et qui sont construites uniquement avec à l’aide des langages normalisés HTML et
CSS, mais aussi parfois avec du JavaScript/Jquery (lire Valade Janet, 2003 ; Nebra Mathieu, 2009 et
Rigaux Philippe, 2009, cités par Mbuta Ikoko, 2010). Ces pages Web statiques créées peuvent contenir
parfois des objets multimédias animés. Elles sont demandées par des internautes-visiteurs (utilisant des
clients ou machines clientes web) en indiquant leurs URL5
sur un navigateur web, et cela, dans le but
simplement de leur visualisation. Le protocole HTTP, qui joue ce rôle et qui est associé non seulement aux
pages web statiques mais aussi aux pages web dynamiques, aide ici tout client web à retourner des
témoins de connexion (cookies, une sorte de fichier texte que les clients web stockent) via le serveur web.
Quant aux sites web dynamiques, ils sont plus complexes et parfois difficiles à concevoir ou à construire,
même si certaines ressources utilisées sont liées directement aux multiples utilitaires et/ou plugins
disponibles sur le marché des TIC. A la différence des sites web statiques, les sites web dynamiques sont
très évolués et leurs différentes pages ou interfaces web créées sont dynamiques. Ils contiennent aussi des
objets multimédias animés (texte, son, image et vidéo) mais qui sont également dynamiques. Tout ceci
veut tout simplement dire que les différentes pages web dynamiques créées et leur contenu peuvent être
complétés ou modifiés de manière participative et collaborative par les internautes-visiteurs suivant leurs
besoins, sans parfois demander l’intervention d’un web developer. Elles sont donc actuellement présentes,
ces différentes pages web dynamiques, sur la majorité de sites web disponibles sur le réseau Internet et
que Agrebi Meriem et Chandon Jean-Louis (2009, cité par Mbuta Ikoko, 2018) classifient en sites web
informationnels, institutionnels, e-commerce, de marque, communautaires et de services.
5
Une URL (Uniform Resource Locator) « fait référence au sous-ensemble d’URI (Uniform Resource Identifier) qui,
en plus d’identifier une ressource, permet de localiser la ressource en décrivant son mécanisme d’accès principal (par
exemple, son emplacement de réseau) » (RFC 3986, cité par Mbuta Ikoko, 2010). Elle explique alors comment
accéder à cette ressource en fournissant une méthode ou un protocole explicite comme le HTTP ou FTP. En plus,
comme sous ensemble d’une URI, toutes les URL sont donc des URI, mais toutes les URI ne sont pas des URL.

8
En terme de communication web, nous disons aussi qu’un serveur web, dans le cas des sites web statiques,
est considéré comme un server ou un canal unidirectionnel (cf. le Web 1.0). Il a seulement la
responsabilité technique d’envoyer les différentes descriptions ou contenus de différentes pages web
statiques demandées par des clients web ou internautes-visiteurs. Dans un site web dynamique, qui
représente aujourd’hui l’incarnation du Web 2.0 ou d’une version supérieure (3.0 ou 4.0), la
communication du serveur web est bidirectionnelle ou multicanale qui est alors bénéfique pour toutes les
organisations et devrait également « être transparente et visible de manière globale et persistante dans le
temps » (MacAfee Andrew, 2009, cité par Mbuta Ikoko, 2010). Derrière cette communication
bidirectionnelle ou multicanale, il y a également aujourd’hui la possibilité de créer des espaces d’échanges
et de partages des informations ou des connaissances entre leurs différents internautes-visiteurs connectés
(lire Kaplan Andreas et Haenlein Michael, 2012). Il s’agit d’une possibilité qui a donc donné lieu à
l’intégration des autres services ou applications web complémentaires au niveau de ces sites web ; des
services ou applications tels que les blogues, les micro-blogues, les wikis, les réseautages sociaux en
ligne6
et les applications web composites (mashups). L’encyclopédie en ligne Wikipédia, les sites web
d’intermédiation commerciale ou de vente en ligne [Blocket.se, Amazon, Alibaba Group (alibaba,
aliexpress et taobao), Leboncoin, etc.], les plateformes de recherche d’informations (Google, Baidou,
Yahoo, Pages jaunes, etc.) et les médiaux sociaux ou professionnels (Facebook, Twitter, LinkedIn,
MySpace, YouTube, WhatsApp, Flickr, Meetup, Académia, etc, etc.) sont donc à compter parmi les sites
web dynamiques 2.0 ou de versions supérieures. C’est aussi le cas pour les forums ou blogues de
discussion spécialisés (Stack Overflow, Code Project, Answers.com, Developpez.com, CodePen, etc.) et
les sites de presse ou d’informations générales (SvT nyheter, Omni nyhetstjänst, France 24, Media Congo,
Actu30, etc.). Notons en plus que certains sites web dynamiques, 2.0 ou de versions supérieures citées ci-
dessus utilisent du flux RSS (Really Simple Syndication) pour la syndication de leur contenu.
1.1.3 Les technologies clés pour le développement de sites et/ou applications web.
Les langages HTML, CSS et JavaScript ont toujours été considérés comme des outils fondamentaux ou
clés pour le développement des sites web mais aussi pour la mise en page de différents pages web ou
interfaces web souvent créées pour pouvoir répondre aux divers besoins des internautes-visiteurs. Dans les
lignes qui suivent, nous faisons une présentation synthèse de ces trois langages de programmation web
évoqués et des outils servant comme éditeurs de codes liés.
a) Le HTML et les balises sémantiques
Le langage HTML, de l’anglais « Hypertext Markup Language », est un langage informatique de
marquage ou de balisage pour l’hypertexte. Il forme aujourd’hui la base de tout contenu Web et, à propos,
permet à n’importe quel navigateur web de lire le code écrit, mais aussi de le convertir en une vue
typographique pour permettre à un internaute-visiteur de lire ou de voir à son tour ledit contenu et
d’interagir avec. Toutefois, lors de l’écriture d’un code HTML par un développeur web, on utilise des
éléments HTML appelés « balises ». Ces dernières servent pour structurer, afficher ou présenter une
information, mais aussi pour pouvoir lier des pages web créées et constituant un site ou une application
web. Dans le cadre d’une structuration, les balises HTML indiquent l’endroit où les différents éléments
que contiennent une page ou interface web créée (textes, sons, images, vidéos, etc.) devraient être placés
(lire sur le site éducationnel en ligne W3schools : https://www.w3schools.com/tags/ref_byfunc.asp).
6
Notons ici de manière particulière que les réseautages sociaux en ligne (de l’anglais, Social Networking Sites ou
SNS) constituent une partie des médias sociaux (social media). Sur ce fait, pour Ellison Nicole et Thierry Annike
(2011), ils peuvent alors être définis « comme des plates-formes de communication en réseau au sein desquelles les
différents participants a) possèdent des profils associés à des identifiants uniques qui sont créés par la combinaison
de contenus fournis par les utilisateurs, des amis et des données système ; b) peuvent exposer publiquement des
relations susceptibles d’être visualisées et consultées par d’autres ; et c) peuvent accéder à des contenus incluant des
contenus générés par des utilisateurs ».

9
Figure 2 - Une portion d’un exemple de code HTML.
b) Les CSS et les classes sémantiques liées
Les feuilles de style en cascade, de l’anglais « Cascading Style Sheets » (CSS), représentent une sorte de
langage informatique qui fait que les pages web créées pour un site web avec du code HTML aient une
bonne allure sur n’importe quel navigateur Web. En d’autres mots, elles permettent de contrôler
l’apparence et d’ajouter facilement du style (polices, couleurs, espacement, etc.) à des pages web créées
avec du code HTML. Ici, le HTML est considéré comme étant le langage de balisage par excellence qui
contrôle la structure de sites web tandis que les CSS, un langage contrôlant la présentation de différentes
pages Web créées pour des sites web.
Le code CSS est généralement enregistré dans le même fichier HTML de la page web créée mais il peut
aussi se retrouver dans un fichier ou document séparé ayant pour l’extension « .css ». Le deuxième choix
est souvent celui qui est recommandé professionnellement car il constitue probablement le moyen le plus
efficace pour appliquer par exemple les différents styles définis de manière globale sur l’ensemble de
pages créées pour un site web construit.
Actuellement, plusieurs versions CSS sont actives et/ou en cours de développement mais la version CSS 3
est la version la plus pratique actuelle. Cette dernière paraît stable depuis un temps et poursuit voire son
développement continu en parallèle avec la version 2.1 et récemment avec aussi également la version 4
qui utilise sa couche comme base de développement.
En matière de syntaxe, notons que le code CSS ne s’écrit pas comme le code HTML, moins non plus
comme le code d’un langage de script, à l’instar de JavaScript, etc. Les CSS étant un langage dit « de
feuilles de style en cascade », la syntaxe de son code est alors différent des autres langages du web ; cela
signifie que le code CCS dispose de ses propres éléments et règles de mise en forme, et cela, dans le but
d’identifier d’abord en premier le contenu d’une page web créée en HTML et ensuite d’appliquer un style
spécifique (lire Powell Thomas, 20107
). L’identification du contenu d’une page web créée se fait sur des
balises HTML sémantiques mais aussi sur celles de présentation, ou encore avec l’aide des classes ou
autres attributs associés aux différentes balises en question.
Toutefois, parmi les éléments propres aux CSS, nous pouvons citer des sélecteurs (sélecteur d’éléments ou
de groupe d’éléments, sélecteur de classes, sélecteur d’ID, sélecteur de descendants, etc.), des options de
7
Le livre de Powell Thoams contient des bons exemples de HTML5 et de CSS 3, qui sont les versions utilisées dans
le cadre de notre cas thématique. Il peut être completé en consultant les autres exemples repris sur le site
éducationnel en ligne « W3schools : https://www.w3schools.com/ ».

10
formatage (margin, object-fit, padding, border, background, etc), des unités de mesure (pixels, em, VW) et
le bloc de déclaration (qui est toujours entre accolades et ayant au moins une instruction de formatage).
Ces différents éléments CSS permettent alors de faire des mises en pages sur des pages Web qui peuvent
être créées avec du HTML ou d’ajouter des backgrounds, des styles de textes, d’en-tête, de liens ou de
navigations personnalisés, des images et des layouts, etc.
Enfin, ne souhaitant pas s’éterniser sur d’autres éléments de considération avancée, nous concluons
globalement ce point en disant qu’avec les feuilles de styles en cascade (CSS), les balises sémantiques
particulièrement n’ont pas besoin de maintenance car elles fonctionnent généralement mieux. Elles sont
même devenues plus faciles à utiliser pour créer des sites web responsives8
et plus faciles aussi à
déboguer, puis lisibles et conviviales. Elles arrivent également à éliminer le risque de régression (lors de
leur mise à jour) et à fournir des points d’ancrage pour des tests fonctionnels automatisés, mais aussi
également des crochets pour le langage JavaScript. Les classes visuelles9
, qui sont utilisées dans certains
cas, ne valent presque plus la peine car les styles sur les différentes classes sémantiques utilisées est
facilement détectables et produisent même une petite empreinte HTML. D’ailleurs, Andrew Rachel (2007)
nous présente plus de 100 astuces et conseils pour obtenir la majorité de fonctionnalités CSS souhaitées
aujourd’hui dans une page web. Dans le lot de cette présentation, il ne faut pas également passer à côté de
la pratique de préprocesseurs, à l’instar de Less et de Saas, qui sont utilisés aujourd’hui par la grande
majorité de développeurs web pour générer dynamiquement du code CSS. Sans rompre avec le principe
présenté de la syntaxe CSS, ces balises vont donc toujours continuer à accompagner et à optimiser
davantage les différentes fonctions ou classes sémantiques et variables (ré) utilisées dans certains
contextes.
c) Le Javascript et/ou le Jquery
JavaScript, comme son nom l’indique, est aujourd’hui le langage de script par excellence. Interprété, il est
aussi adapté à la fois à la programmation orientée objet et à la programmation fonctionnelle. JavaScript est
principalement utilisé dans le développement de sites ou pages web pour pouvoir gérer les fonctions et/ou
comportements de différents éléments HTML qui y sont repris et que l’on souhaite rendre dynamique et
interactif sur un navigateur Web lorsqu’un internaute-utilisateur fait quelque chose. Il s’agit des
comportements qui sont visibles ou que l’on retrouve le plus souvent du côté client d’une application ou
site Web.
Créé en 1995 par Brendan Eich et standardisé en 1997 par Ecma International sous le nom
d’ECMAScript, JavaScript dispose à ce jour des frameworks et/ou bibliothèques logicielles qui sont très
stables et qui comprennent plusieurs éléments prédéfinis (c’est-à-dire des éléments de données avec des
propriétés ou méthodes particulières). Ces derniers permettent ainsi à JavaScript de lire des clics et des
mouvements de la souris sur un contenu précis d’une page ou navigateur Web ou de lire des défilements
ou des actions sur les touches du clavier, effectués alors par des internautes-visiteurs. Son code est écrit
directement sur la même page Web (fichier HTML), à l’intérieur de la balise <script>, ou dans autre un
fichier externe ayant pour extension « .js », et peut parfois contenir certains éléments HTML et CSS. Et,
comme c’est le cas pour les CSS, le JavaScript utilise aussi les balises, attributs ou classes HTML comme
8
La notion de responsive devrait être comprise ici comme étant un design réactif ou comme un des moyens utilisés
pour faire des mises en page Web adaptées à la taille du device utilisé par un internaute. Elle constitue aujourd’hui
une grande partie de la création de sites web compatibles avec des appareils mobiles. En plus, compte tenu de la
finalité d’une page web à créer, le responsive web design pousse ainsi aujourd’hui tout Web developer à chercher à
adapter son site web (statique ou dynamique) au contenu, à le concevoir sur la base des différents navigateurs web et
à développer une bibliothèque de motifs, mais aussi à rendre cette bibliothèque universellement utilisable et à garder
la performance à l’esprit. Pour y parvenir correctement, Marcotte Ethan (2010 et 2011), évoque l’usage de trois
technologies importantes qui sont : les Fluid grid, les Fluid images et les Media queries. Et, c’est le framework
Bootstrap qui renferme ces trois différentes technologies mais aussi d’autres, puis aide à la création d’un bon design
réactif. Il passe même aujourd’hui pour un des framework les plus populaires en rapport avec ce type de design.
9
L’on devrait noter également que les classes atomiques, comportementales et utilitaires sont toutes des formes de
classes dites non sémantiques comme les classes visuelles. Elles ne valent donc pas aussi ici.

11
des sélecteurs. Son code est interprété et aucune compilation n’est alors requise (parfois pas avant
l’exécution ou l’événement sur la page web concernée) mais il s’exécute en appelant des fonctionnalités
qui devraient faire réagir dynamiquement les différents balises ou attributs HTML contenus dans la page
Web concernée.
Parmi les frameworks et/ou bibliothèques logicielles Javascript les plus populaires aujourd’hui, nous
pouvons citer le Jquery, le Dojo toolkit, le React, l’AngularJS/Angular, l’Ember,js et le Vue.js. Ces
différentes bibliothèques les plus populaires, particulièrement le Jquery, facilitent la création de sites Web
dynamiques, mais aussi la recherche et la manipulation du contenu d’une page Web, et cela, avec l’aide
des différents balises ou attributs HTML qui sont couplés parfois à certains éléments CSS.
Avec JavaScript, il y a aussi la possibilité de créer et de gérer par exemple des animations pour du contenu
ou des éléments HTML sélectionnés, et cela, de différentes manières avec tous ces différents frameworks
et/ou bibliothèques logicielles Javascript les plus populaires cités. Concernant par exemple la bibliothèque
Jquery, Duckett Jone (2014) est encore allé plus loin. Pour lui, cette bibliothèque libre et la plus populaire
de JavaScript, créée en 2006 par Resig John, facilite le développement Web côté client en simplifiant
certains types de fonctions par une écriture du code plus facilement. Il permet notamment aux
développeurs Web d’utiliser AJAX (Asynchronous Javascript And XML) pour récupérer en temps réel
des données côté serveur ou de capturer des événements de gestion d’événements, mais aussi de modifier
tous les éléments DOM (Document Object Model) utilisés10
.
Figure 3 - Une portion d’un exemple de code ou de fonction Javascript/Jquery utilisant aussi AJAX (« doSearch »).
Pour conclure, nous retenons qu’en dehors des langages HTML et CSS, les sites ou applications web
dynamiques à créer aujourd’hui, et dont leurs pages responsives sont affichables sur n’importe quel
navigateur web moderne, utilisent aussi le langage Javascript et/ou Jquery. L’on doit également retenir
que d’autres langages web normalisés (de script ou de programmation objets) sont également utilisés. A
propos, Mbuta Ikoko (2007, 2010 et 2018) nous cite par exemple le Perl ou Python (avec le système CGI :
Common Gateway Interface), le PHP (Hypertext Preprocessor), le JSP (JavaServer Pages), le Type Script
et le C# .NET (issu d’Active Server Pages créé par Microsoft vers la fin des années 1990, ASP en sigle, et
qui continue encore à être utilisé pour développer des applications web sur la nouvelle plateforme
ASP.NET). Il y a aussi également l’existence des plusieurs normes ou spécifications qui concernent alors
10
Le DOM est défini comme étant une interface de programmation (API : Application Programming Interface) pour
les documents HTML et XML (W3C : https://www.w3.org/TR/WD-DOM/introduction.html). Il fournit une structure
logique du document orientée objet et chaque élément lié est transformé en un objet possédant ses propres méthodes,
propriétés et valeurs. Il crée donc une représentation arborescente structurée de ce document qui peut être manipulée.

12
tous ces différents langages utilisés pour créer des applications et/ou sites web, le cas par exemple des
normes ou spécifications de W3C évoqués antérieurement. Dans le lot, il y a aussi la norme ISO/CEI
23270 ou ECMAScript pour Javascript. Cette dernière norme est directement ou indirectement liée aux
frameworks ou bibliothèques logicielles dediées plus au développement web côté Front-End, à l’instar
d’Angular, de Node.JS, d’ASP, d’Ajax, de jQuery, de Bootstrap, et de Symphony, etc.
d) Environnement de développement intégré pour le développement web et d’autres outils
web servant pour l’inspection ou la validation des pages web mais aussi pour
l’application de styles.
Pour créer une page web avec du code HTML et/ou pour pouvoir appliquer un style CSS sur la page web
créée avec du code HTML, mais aussi la faire interagir au clic d’un internaute-visiteur par exemple grâce
aux scripts Javascript ou JQuery, il existe à ce jour des éditeurs de texte qui accompagnent nos
développeurs web. Certains de ces éditeurs de texte sont considérées comme de « classiques » (Bloc-
Notes, Notepad, Visual Web Developer Express, Visual Studio .Net, Visual Studio code, Medit, Vim,
Emacs, Eclipse, Coda, jEdit, PHPEdit, Sublime Text, Atom, PHPStorm, NetBeans, TextWrangler,
Smultron, WebStorm, etc.) et d’autres de « WYSIWYG : What You See Is What You Get , ce que vous
voyez est ce que vous obtenez » 11
(Macromedia DreamWeaver, Amaya, Adobe GoLive, MS FrontPage,
TinyMCE, etc.).
Les éditeurs WYSIWYG sont souvent des éditeurs sous une licence fermée. Leur grand avantage ce qu’ils
permettent « de rédiger le contenu d’un site web directement sans avoir à taper la moindre ligne de code
HTML, CSS ou Javascript, etc. Au fait, ils fonctionnent un peu comme un logiciel de traitement de texte »
(Nebra Mathieu, 2009, cité par Mbuta Ikoko, 2010). La plupart des éditeurs WYSIWYG sont aussi
intégrés ou font aujourd’hui partie intégrante des différents systèmes de gestion de contenu, SGC en sigle,
actuellement disponible sur le marché des TIC (lire davantage le point 1.2 ou 3.4). Quant aux éditeurs
classiques, la plupart sont plutôt intégrés aux différents systèmes d’exploitation des ordinateurs ou des
appareils mobiles. C’est le cas avec le Bloc-Notes, le Notepad, ou le TextWrangler, etc. Les autres par
contre sont sous licence ouverte, libre ou fermée, puis téléchargeable et installable par un Web developer
suivant ses besoins et ses préférences professionnels. Le NetBeans, l’Eclipse, le Sublime Text, l’Atom et
le MS Visual Studio font partie de ce lot.
D’ailleurs, le MS Visual Studio, qui est un IDE Microsoft sous licence libre et qui a un éditeur classique,
possède aussi un framework gratuit basé sur le .NET de Microsoft Inc. Il s’agit de l’ASP.NET. Ce dernier
étant le successeur d’ASP (Active Server Pages) depuis 2002, il continue son cours de développement par
la firme Microsoft Inc pour pouvoir permettre aux développeurs Web de développer davantage les
capacités de création d’applications et/ou sites web dynamiques plus efficaces côté serveur. Il prend aussi
également en charge un certain nombre des modèles de programmation ou d’architecture pour la création
d’applications et/ou sites web dynamiques, à l’instar de Web Forms, d’ASP.NET MVC – Model View
Controller – , d’ASP.NET Web Pages, etc. Ces différents modèles d’architecture fonctionnent grâce à un
filtre (moteur ou fichier dll) branché sur le service web IIS (Internet Information Services) via son
interface de programmation, ISAPI (Internet Server Application Programming Interface). ASP.NET
fournit également aujourd’hui plusieurs autres possibilités (le cas des abstractions précieuses et utiles,
telles que la liaison de données, la navigation, la gestion des états et la mise en cache des données) pour
pouvoir faire exécuter un code écrit de manière commode sur un serveur au lieu de le faire sur un
périphérique client. Le code à exécuter est écrit soit en C #, Visual Basic, JScript, ou TypeScript, etc.
A part le lot de différents modèles de programmation ou d’architecture ou conceptuelle évoqués ci-dessus
en rapport avec l’ASP.NET, nous avons aussi le modèle MVP (Model View Presenter) et le modèle
MVVM (Model View View Model) qui sont aussi utilisés sous l’IDE MS Visual Studio, mais plus pour
11
Dans le développement web, WYSIWYG signifie principalement que ce qui est modifié a la même apparence lors
de la publication que lors de la modification. C’est un principe dont l’origine remonte dans les domaines de la
sérigraphie et de l’impression offset.

13
des applications WPF (Windows Presentation Foundation) qui semblent désormais remplacer les
applications WinForms. Quant au modèle MVC, bien qu’il est un modèle qui date (introduit dans le
monde de développement logiciel par Trygve Reenskaug en 1979 comme une solution aux problèmes des
utilisateurs qui contrôlent de grandes quantités de données), il est depuis une décennie le modèle de
programmation ou d’architecture conceptuelle le plus populaire et couramment donc utilisé par la grande
majorité de développeurs web ou systèmes pour ainsi coder mais aussi pour pouvoir séparer la logique
d’entreprise, l’interface utilisateur et le contrôleur afin de traiter par la suite correctement les demandes.
C’est donc un modèle qui augmente la réutilisabilité et la maintenance des composants logiciels.
En plus, à part les éditeurs de texte, dont la plupart sont considérés comme des IDE pour des applications
web, il y existe aussi également des outils dits « d’inspection de pages web ». Ces derniers sont
aujourd’hui disponibles dans presque tous les navigateurs web modernes cités voire précédemment et
permettent aux développeurs web et aux internautes-visiteurs de voir comment le code HTML, CSS et/ou
JavaScript est structuré sur une page web créée (voir figure 4).
Figure 4 - Outil d’inspection de pages web (à droite de cette page web)
Ici, disons que le développeur web ou l’internaute-visiteur devrait tout juste marquer sur un texte, une
vidéo, un son ou une image (le cas pour la page web illustrée) se trouvant sur une page web affichée par
un navigateur pour voir alors par exemple les types de balises, les classes ou les attributs HTML et CSS
liés et/ou utilisés. Certains navigateurs web modernes, qui offrent cette inspection des pages web créées et
affichées, prennent directement en charge le code JavaScript. D’autres par contre non car exigeant d’abord
l’activation de la bibliothèque JavaScript (une chose que tout développeur web devrait avoir à l’esprit).
1.1.4 La conception graphique et les critères d’accessibilité Web (WCAG)
a) La conception graphique
Bohman Jan et Hallberg Åke (1988), qui se situent dans la période post-modernisme et dans celle de la
fusion des médias, définissent la conception graphique comme « une forme d’art fonctionnel qui a pour
tâche de transmettre un message de la manière la plus efficace possible ». En d’autres termes, la
conception graphique passe pour une sorte de langage créatif et esthétique qui est aujourd’hui utilisé par
plusieurs concepteurs dans plusieurs domaines de la société actuelle du savoir, dont les domaines du Web
et/ou de la communication visuelle, etc.

14
Toutefois, avec le développement rapide et continue observés aujourd’hui dans les deux domaines connus
du Web, c.à.d. le Back-end et le Front-end dont les manifestations de la matérialisation ont même
commencé depuis le début des années 2000 avec la fusion des médias, la conception graphique pour le
Web a donc fini aujourd’hui par trouver sa place. Elle tente alors désormais, sous la forme d’une
communication visuelle12
, de faciliter la compréhension par un utilisateur du message ou de l’information
qu’un site web construit veut ainsi transmettre, et cela, en concevant ou en créant des pages ou interfaces
web pour ce site de manière à ce que le message en question devienne plus clair d’un point de vue socio-
culturel, technologique, économique, juridique, écologique et/ou psychologique, etc. ; ce qui réduit même
le besoin d’écrire un long texte ou facilite même l’accès et la lecture aisée de pages web conçues ou
créées.
Pour Sundström Tommy (2005), un web développeur devrait plutôt savoir que pour accéder à la page
web, l’utilisateur passe par quatre portes : la porte qui devrait lui permettre d’aimer ce qu’il voit et celle
l’aidant à lire ce qui est écrit mais aussi la porte pour l’aider à trouver réellement ce qu’il cherche et celle
qui va servir de support pour qu’il puisse utiliser tout ce qu’il va trouver sur le site web dynamique
construit. Cette logique de quatres portes de Sundström, qui pourrait même trouver son soubassement dans
le mythique modèle TAM de Teece ou dans le modèle classique à succès de DeLone et McLean, s’impose
en partie actuellement dans la conception graphique pour le Web. Elle permet au fait à une conception
graphique dans le cadre du Web de donner davantage aux développeurs web et autres parties prenantes
impliquées des éléments pour pouvoir créer des pages web acceptables par des utilisateurs ou internautes-
visiteurs.
Pour ce faire, la conception graphique pour le Web devrait également montrer dans sa pratique la manière
dont le contenu choisi ou proposé par les parties prenantes impliquées dans la construction d’un site web
dynamique devrait par exemple être agencé sur une page web créé pour pouvoir transmettre un message
et/ou influencer des comportements cibles. Parmi les éléments qui peuvent constituer un contenu choisi ou
proposé, nous citons par exemple les images, les vidéos, les sons et les textes. Ces éléments sont des
formes ou objets multimédias qui possèdent chacun des propriétés typographiques différentes qui peuvent
être des simples dispositions de police et taille des caractères, de couleurs ou de contrastes, etc. devant
alors créer l’ensemble d’une page web ou interface utilisateur dans un site web construit. Pour Mbuta
Ikoko (2011), « il est aujourd’hui souhaitable que les objets multimédias qui vont contenir les différentes
pages web à créer pour un site web dynamique fonctionnent comme un tout dans un tout, de manière à ce
qu’il n’y ait plus trop d’objets différents, car en soi ils s’affectent ou s’influencent les uns sur les autres sur
une surface spécifique ».
Au fait, dans la pratique, ce qui caractérise en grande partie la conception graphique pour le Web, c’est
l’application de l’esthéthique ou de l’ergonomie sur les pages web créées pour un site, c.à.d. l’aspect
communication visuelle sur une série des pages web créées ou sur l’ensemble du site web dynamique
construit. Comme dit ci-dessus, cette application de l’esthétique ou de l’ergonomie se fait par l’usage des
polices et tailles de caractères (textes ou lettres), des couleurs et/ou des effets sur des images, vidéos, sons
et textes contenus dans la page web créée. Sous-entendu, il y a au moment de l’application de cette
esthétique ou ergonomie la mise en page et la définition de la structure informationnelle sur la série des
pages web créées et qui fait même d’elles des pages web par défaut ou partielles dans un site web, etc. (la
littérature pratique parle de design de templates) De ce fait, les trois principes de la typographie et de la
mise en page ne devraient donc pas être omis. Il s’agit entre autre, pour la typographie, de la symétrie, de
l’asymétrie et du contraste et, pour la mise en page, de la proximité, de la répétition, de l’alignement, de
la sobriété et du contraste.
Concernant les couleurs qui sont utilisées dans cette conception graphique pour le Web, elles ont plusieurs
significations et symboliques (lire Pettersson Run et al, 2004). Ainsi, il faut noter que les différents
12
La communication visuelle est un concept collectif utilisé dans la communication pour décrire la communication
qu'un émetteur peut utiliser pour transmettre un message à un destinataire. Elle se sert dans la plupart de temps des
images, des textes et des couleurs liées.

15
résultats souvent obtenus par les développeurs web (UX), après la définition et l’application de couleurs
dans un site web donné, proviennent de leur mélange (couleurs primaires, secondaires et tertiaires) avec
l’aide par exemple des logiciels de création graphique ou de retouche d’images matricielles (Adobe
Photoshop CC, Adobe XD, CorelDRAW Graphics Suite, Paint.Net, MS Paint, GIMP, InDesign CC,
OmniGraffle, Sketch, Figma, Pixlr, etc.). Ces résultats sont parfois transposables ou pris en charge par le
langage de feuilles de styles (CSS) et/ou par les préprocesseurs CSS, c.à.d. le LESS ou le SASS. Les
différentes couleurs, qui servent de mélange, peuvent parfois être écrits ou appliquées soit en notation
hexadécimale, RGB (Rouge, Green, Blue, c.à.d. Rouge, Vert, Bleu ou RVB) ou HSL/HSV (Hue,
Saturation, Lightness/Value, c.à.d. Teinte, Saturation, Luminosité/Valeur ou TSL/V) (voire figure 5).
Figure 5 – Couleur bleu du logo de l’UPJV sous trois différentes notations ou écritures (RGB, HEX et HSL)
Pour définir, choisir ou mélanger les différentes couleurs à appliquer sur certains contenus multimédias de
pages web créées, les développeurs web (UX) se servent voire plus du cercle chromatique de Johannes
Itten (voir figure 5) qui est aujourd’hui présenté sous plusieurs forme au niveau de différents logiciels de
conception graphique ou de retouche d’images matricielles utilisés.
Figure 6 – Cercle chromatique de Johannes Itten (source : Chambeau Athony, https://www.cours-de-
peinture.net/technique-de-melange-en-peinture-acrylique/, 2019)
Pour terminer, retenons simplement que la conception graphique pour le Web représente aujourd’hui l’une
des meilleures techniques, dites complémentaires, pour pouvoir développer des sites et/ou des applications
web dynamiques esthétiques ou ergonomiques. Elle est intégrée complètement dans le processus ou
procédé de développement web et tourne actuellement en grande partie, d’un point de vue de
communication visuelle, autour de la typographie. Donc, pour arriver à transmettre un message
compréhensible ou à faciliter la compréhension des utilisateurs ou internautes-visiteurs d’un site et/ou
d’une application web dynamique construite ou à construire, elle combine alors des polices ou tailles de
caractères, des couleurs et des effets sur des textes, des sons, des images et des vidéos, avec l’aide parfois
des feuilles de styles (CSS/Less/Sass) ou des différents logiciels de conception graphique ou de retouche
d’images matricielles. Elle donne aussi aux développeurs ou créateurs de contenus web la possibilité de
séparer la présentation visuelle de ces derniers sur une page web créée et qui devrait être acceptée par les
utilisateurs. Oui, par des utilisateurs qui sont actuellement intégrés dans le processus de développement
web du début à la fin comme nous allons le voir dans notre partie empirique.

16
La conception graphique pour le Web, c’est aussi également une sorte de design ou de conception qui
accompagne aujourd’hui la convivialité et/ou l’utilisabilité d’un site et/ou d’une application web construit
ou en cours de construction, car les différents éléments visuels utilisés pour faciliter par exemple le
contrôle et la compréhension des utilisateurs ou des internautes-visiteurs influent sur leur perception quant
à la convivialité et/ou l’utilisabilité. En plus, faisant également partie des meilleures techniques
complémentaires de conception web, elle est alors récente dans les deux domaines du Web et tente de se
répandre à travers le monde depuis plus d’une décennie, et cela, grâce à l’utilisation accrue des différents
outils, applications et/ou services TI multimédias par les acteurs de l’actuelle société de l’information,
appelée aussi aujourd’hui la société du savoir ou de la connaissance qui est déjà même en trait de nous
faire vivre une quatrième révolution industrielle dite non énergétique, le 4.0
b) Les directives ou critères d’accessibilité Web (WCAG).
Les directives ou critères d’accessibilité du contenu Web (WCAG, de l’anglais « Web Content
Accessibility Guidelines » ou du suédois « Webbtillgänglighetsdirektivet » eller « Riktlinjer för
tillgänglighet på webben ») sont des directives élaborées à l’initiative de World Wide Web Consortium
(W3C) qui est un organe de collaboration internationale bien connue et important qui élabore alors des
normes et des standards pour le Web
En effet, ces directives traitent de l’accessibilité des sites ou applications web déstinées à un plus grand
nombre d’utilisateurs ou internautes-visiteurs. Elles sont aussi utilisées ou considérées comme une source
d’inspiration pour les développeurs et les créateurs de contenu Web mais aussi également dans certains
cas comme étant les fondements de la législation ou des exigences13
qui permettent donc de s’assurer ou
de déterminer si un site web est accessible ou non aux personnes avec handicap. Actuellement, plusieurs
versions de WCAG existent et la version à jour est la version 2.1, publiée depuis juillet 2018 par le W3C.
En 2016, comme dit, l’UE avait publié sur son journal officiel une directive Web à propos (cf. OJ L 327,
2016). Et, pour être conforme avec cette directive EU et la dernière version de WCAG14
, la Suède a
promulgué et fait entrer en vigueur une nouvelle loi depuis le 01 janvier 2019 qui réglemente désormais
l’accessibilité de différents sites et/ou applications web des organismes publics du pays.
Rappelonségalement ici que les directives ou critères WCAG reposent dans leur ensemble sur quatre
principes (perceptible, utilisable, compréhensible et robustesse) et sur trois niveaux différents de
conformité (A, AA et AAA). Elles ne sont qu’une mise à jour augmentée de la version 2.0. Le niveau AA
est le niveau d’accessibilité auquel devraient satisfaire depuis 2016 tous les sites et/ou applications web et
mobiles destinés à un plus grand nombre d’utilisateurs possible au sein de l’UE. On compte près de 50
critères de niveau AA qui incluent donc le niveau A qui est le niveau minimal ou de base de la conformité.
Le niveau AAA est le plus haut niveau d’accessibilité Web. Au total, plus de 60 critères sont reprises pour
les trois niveaux. Et, pour rendre les sites et/ou application web ou mobiles accessibles ou conformes à ces
différents critères, plusieurs composants différents doivent fonctionner ensemble. Nous pouvons citer par
exemple :
 Le contenu - informations sur une page ou application web, y compris des informations naturelles
telles que du texte, des images et des sons, mais également un code ou un balisage définissant la
structure et la présentation de ladite page ;
 Les navigateurs, lecteurs multimédias et autres « agents utilisateurs » ;
13
Une exigence est une représentation documentée d’une condition ou d’une capacité dont un produit-logiciel (ou un
composant de produit-logiciel) doit posséder pour remplir un contrat, se conformer à une norme ou tout autre
document imposé formellement ou tout simplement dont un utilisateur a besoin pour résoudre un problème ou
atteindre un objectif.
14
La version 2.1 de WCAG contient logiquement tous les critères des versions antérieures mais aussi des ajouts ou
extensions qui concernent principalement les utilisateurs ayant des troubles d’apprentissage ou des troubles cognitifs,
les malvoyants et les utilisateurs d’appareils mobiles tels que les téléphones intelligents ou les tablettes. C’est donc
une version rétrocompatible avec la version 2.0, c’est-à-dire qu’un site Web répondant aux exigences de la version
2.1 devrait également répondre aux exigences de la version 2.0.

17
 La technologie d’assistance, dans certains cas - lecteurs d’écran, claviers alternatifs,
commutateurs, programmes de numérisation, etc. ;
 Les connaissances des utilisateurs, expérience et, dans certains cas, stratégies adaptatives utilisant
le web ;
 Les développeurs - concepteurs, rédacteurs, y compris les contributeurs de contenus pour
personnes avec handicap ;
 Les outils de création - logiciels de création de sites web ou CMS ;
 Les outils d’évaluation - de la disponibilité web, les validateurs HTML, les validateurs CSS, etc.
Pour terminer, faisons noter de manière globale que les directives ou critères d’accessibilité du contenu
Web sont aujourd’hui élaborées pour qu’un plus grand nombre de personnes puisse accéder au contenu
autorisé sur le Web, mais aussi pour éviter un certain type de problème affectant un type spécifique
d’utilisateurs, particulièrement les handicapés, les malvoyants ou les personnes atteintes de dyslexie, etc.).
Elles représentent donc une amélioration très avantageuse si elles devraient être comparées à la loi
fédérale américaine de 1973 qui, portant sur l’accessibilité aux personnes handicapées, a été amendée en
1998 (22 critères) et a comme nom la « section 518 ».En plus, cette directive de l’union européenne
devrait devenir une loi et entre en vigeur au niveau de l’ensemble de l’espace européen au mois de
septembre 2020.
1.2 Les systèmes de gestion de contenu
1.2.1 Définitions et fonctionnalités
Les systèmes de gestion de contenu (de l’anglais CMS : Content Mangement System), qui est l’une des
capacités TI ou numériques de gestion des différents contenus informationnels des entreprises (Enterprises
Content Management ou ECM en anglais), offrent aujourd’hui aux organisations 2.0 la possibilité de
créer, d’archiver (stocker), de rechercher, de contrôler et/ou de publier davantage des informations à partir
d’un environnement de gestion fiable, intégré et flexible, c.à.d. fonctionnel qui peut être tourné vers
l’extérieur ou le web 2.0. Pour Barker Deane (2016), ces systèmes de gestion de contenu sont des
« interfaces logicielles communes qui ont été créées à l’origine pour gérer seulement des contenus non
structurés des organisations avant de les voir s’étendre aujourd’hui à toutes les formes d’informations ou
de contenus associées aux organisations ou entreprises actuelles ». Ils peuvent donc « héberger tout type
d’informations, de contenus ou de fichiers, allant des simples documents textes aux jeux de données, en
passant par la vidéo, le son et les images » (Barker Deane, 2016).
Toutefois, l’idée principale qui a été et qui est encore aujourd’hui derrière la création ces interfaces
logicielles communes est de pouvoir arriver à séparer le contenu (textes, sons, images, vidéos, rubriques,
etc.) du contenant (mise en page ou forme). Ici, tout contenu séparé est alors géré comme un composant
avant de pouvoir être manipulé et réutilisé indépendamment de sa mise en forme. En plus, la majorité de
différents CMS évoqués ci-dessus permettent également à ces organisations ou entreprises de connaître et
d’analyser facilement leurs groupes cibles, mais également de les rechercher à travers les différentes pages
web consultées et de rassembler leurs informations pour des offres marketing et/ou améliorations de
produits par des feedbacks. Dans ces conditions, ils sont donc tout simplement, ces différents CMS cités,
des outils logiciels capables de pouvoir organiser de manière différente la présentation de différents
contenus créés pour des besoins marketing et de communication interne ou externe des organisations ou
entreprises.
1.2.2 Types de CMS
Au niveau du marché des TIC, les CMS existent sous trois types, à savoir (1) les systèmes de gestion de
contenu des actifs numériques ; (2) les systèmes de gestion de contenu métier ; et (3) les systèmes de
gestion de contenu Web. Dans un certain nombre de contextes informatiques, ces trois types cités sont
donc utilisés à des fins différentes où le facteur commun reste tout de même la gestion de contenus
informationnels des entreprises (ECM).

18
 Les systèmes de gestion de contenu des actifs numériques (Digital Asset Management System
ou DAMS15
en anglais).
Les DAMS sont principalement utilisés par les équipes marketing et opérationnelles des entreprises
pour gérer la présence de leur marque en ligne tout en offrant de puissantes fonctionnalités
d’importation et d’exportation, ou celles de traitement optimisé et/ou de conversion automatique des
fichiers.
 Les systèmes de gestion de contenu métier (Business Content Management System ou BCMS
en anglais).
Ils sont utilisés pour aider les entreprises ou organisations à gérer plusieurs types de contenu tout en
fournissant des fonctionnalités d’accès, de synchronisation, d’édition et de partage de fichiers sur une
plateforme collaborative préconfigurée. Au fait, les BCMS tiennent aussi compte des directives de
conformité et de gouvernance des organisations ou entreprises et peuvent même s’intégrer aux
systèmes de gestion d’actifs numériques (DAMS) ou aux systèmes de gestion de contenu Web
(WCMS) via des API spécifiques (Web ou non) pour ainsi fournir des fonctionnalités de
collaboration intégrées. Les fonctionnalités de collaboration intégrées qu’ils fournissent permettent à
un ensemble varié d’utilisateurs de travailler alors ensemble sur plusieurs types de fichiers ou
contenus structurés ou non structurés, et cela, au sein et/ou en dehors d’une organisation. Parmi les
BCMS leaders actuellement sur le marché, nous avons le MS SharePoint, le DropBox Business, le
Google Drive, le Box, le Microsoft OneDrive for Business, le OpenText Hightail, le Sharefile (Citrix)
et le Quip.
 Les systèmes de gestion de contenu Web (Web Content Management System ou WCMS en
anglais).
Ils sont utilisés pour permettre plus spécialement l’accès à des données complexes et à des services
interactifs sur le Web. Ils proposent aussi des modèles16
frontaux par défaut sous forme des sites web. Ces
modèles frontaux dits par défaut permettent aux utilisateurs de se concentrer plus sur la gestion du contenu
web (ajouter, modifier et publier du contenu puis administrer un site web) et non sur la structure
conceptuelle ou l’architecture de l’information17
d’un site web dans son ensemble. Cet aspect des choses a
même rendu plus populaires aujourd’hui les WCMS auprès des différents blogueurs et/ou créateurs de
contenus web qui n’ont pas suffisamment des connaissances techniques sur le développement web. Dans
cette condition, les WCMS peuvent être considérés aujourd’hui comme la réponse aux problèmes de
cohérence, de navigation, de duplication et de contrôle de données ou contenus liés à la gourmandise de
différents services web qui sont créés et/ou utilisés par la majorité des organisations ou des entreprises. Ils
servent alors principalement pour le stockage de contenu ou de modèles des sites web et passent aussi
15
Parmi les DAMS leaders et présents sur le marché, nous avons Libris, Brandfolder, Widen Collective, Canto,
Image relay, WireDrive, IntelligenceBank, Daminion, Bynder et Cumulus.
16
Un modèle doit être compris ici comme étant une abstraction, c.à.d. comme « une simplification d’un système qui
est suffisante pour comprendre le système modélisé et répondre aux questions que l’on se pose sur lui. Un système
peut être décrit par différents modèles liés les uns aux autres » (Combemale Benoît, 2008). Parmi ces différents
modèles décrivant un système, nous avons les modèles d’exigences, d’analyse, de test système, extra-fonctionnel, de
conception, ou de template (lire Jézéquel Jean-Marc et al, 2006).
17
L’architecture informationnelle désigne la classification, le balisage et la structuration de l’information dans le
domaine informatique. Dans le cadre de cération des sites web statiques ou dynamiques, elle joue un rôle important
car elle se réfère à la conception d’un site web structuré. Pour les concepteurs de sites web, cela implique tout
d’abord de nommer chacun des sujets ou des produits que l’on souhaite publier et de les classer dans des catégories
sémantiques. Ces catégories constituent à leur tour les principales composantes d’une hiérarchie de sites web, c.à.d.
d’une hierarchie qui permet aux utilisateurs de s’y retrouver plus facilement et aux opérateurs de sites de travailler
avec eux. Elle est encore très importante lorsqu’elle divise un site en catégories et sous-catégories, et organise les
chemins d’accès de chacune de ses pages, de sorte que les visiteurs atteignent intuitivement les informations
souhaitées en quelques clics seulement.

19
pour un outil par excellence de création, de configuration, de personnalisation et de gestion de ces
derniers. Les WCMS vedettes actuellement sur le marché des TIC sont le WordPress, le Drupal, le
HubSpot, le Sitefinity, le Joomla, l’EpiServer CMS, le Sitecore Experience Platform, le Pantheon,
l’Agility, le Contentful, l’Ingeniux CMS, le Mura, l’Adobe Experience Manager et le Kentico. Ces
derniers n’offrent pas seulement à leurs utilisateurs la gestion de contenus mais aussi des services, tels que
celui d’indexation, de visualisation, de contrôle des versions, de gestion et droits des utilisateurs, de chaîne
de validation de flux de travail (workflow), de support des métadonnées, de syndication (flux RSS) et
d’intégration des sources de données externes.
1.2.3 Architecture d’un système de gestion de contenu
En rapport avec les trois types de CMS qui viennent d’être décrits et que l’on retrouve aujourd’hui sur le
marché des TI, trois architectures existent. Pour Barker Deane (2016), les frontières entre ces trois
architectures sont parfois floues, et une implémentation ou un déploiement de CMS emploie souvent plus
d’une architecture. Ci-dessous, nous présentons de manière synthèse les quelques lignes fournies par
Barker en rapport avec les trois architectures possibles pour un CMS.
 architecture couplée (coupled CMS architecture). Appelée aussi architecture traditionnelle, cette
dernière est l’architecture la plus courante pour la diffusion de contenu Web. Un CMS couplé
récupère le contenu du référentiel, le formate et le diffuse en temps réel depuis le même système
que celui auquel le consommateur de contenu a accès. La gestion du contenu et la diffusion sont
les deux côtés du même système; les éditeurs gèrent le contenu dans le même système à partir
duquel le contenu est livré. L’avantage est que l’aspect en temps réel de la livraison permet une
personnalisation en fonction du contexte du consommateur.
 architecture découplée (decoupled CMS architecture). Dans cette architecture, un référentiel de
contenu manipule et formate le contenu en un artefact quelconque (souvent un fichier HTML
statique), puis déplace cet artefact vers un environnement de remise séparé. Le consommateur
accède à cet environnement de livraison et peut ne jamais entrer en contact direct avec le
référentiel. Il y a quelques années, il s’agissait d’un modèle de livraison commun et présentait des
avantages en termes d’évolutivité, de tolérance aux pannes et (parfois) de coût. Cependant, il a
peu à peu perdu du terrain à mesure que l’immédiateté des architectures couplées prenait de la
valeur.
 architecture sans tête (Headless CMS architecture). Dans cette architecture, l’environnement de
diffusion est séparé (comme avec découplé), mais cet environnement contacte le référentiel en
temps réel pour récupérer le contenu. L’environnement de diffusion peut être un site Web, une
application mobile ou un processus en arrière-plan, le tout utilisant le référentiel de contenu
comme une base de données centrale. Le terme vient de l’idée que la livraison est la «tête» au-
dessus de la pile de gestion. Retirez cette tête et vous avez un CMS «sans tête», c.à.d. un
référentiel de contenu backend permettant de publier le contenu sur toute application ou couche
d’affichage à l’aide d’une API.
Le CMS EpiServer se retrouve également dans le cas de cette frontière floue entre les trois architectures
présentées. Ainsi, il a une architecture qui fournit un code côté client permettant aux appels Ajax de se
rendre au référentiel, ce qui est une forme de sans tête. Traditionnellement, un CMS couplé, son
architecture possède aujourd’hui des fonctionnalités suffisamment étendues du découplé et/ou du sans
tête. Ces fonctionnalités architecturales étendues font alors de EpiServer un CMS intégré, flexible et
fonctionnel, c.à.d. complet et facilitant la collaboration et le suivi de gestion de contenus entre différents
utilisateurs, etc.
Pour terminer, disons que les CMS, comme un des outils ou capacités TI implémentables pour pouvoir
gérer le contenu de toutes organisations actuelles, particulièment les organisations 2.0, ils sont donc à
mesure de gérer alors aussi des multiples problèmes ou risques qui peuvent être causées par les autres
capacités TI implémentés ou utilisées, particulièrement les capacités TI sociales émergentes d’un point de
vue sécurité des informations (protection, confidentialité, intégrité, disponibilité, sûreté, ...) ; surtout celles
créées de manière non structurée et qui, avec leur accroissement rapide ou génération continue, pourraient

20
créer une certaine manque de confiance entre les différentes parties prenantes. En plus, ils ne gèrent pas
seulement ce contenu généré ou produit par les différentes parties prenantes et les autres multiples
problèmes ou risques liés mais ils accompagnent aussi également leur communication, c.à.d. leur partage
et/ou échange responsable entre les différentes parties prenantes, et cela, dans le but de créer de la valeur
ou d’atteindre différents objectifs stratégiques, tactiques ou opérationnels définis.
1.3 Un mot sur les projets informatiques ou TI dans leur ensemble
1.3.1 Définitions et types de projets informatiques
Les projets informatiques dans leur ensemble sont réalisés pour construire, créer ou fabriquer des
produits-logiciels pour le compte des organisations, entreprises ou individus. Ils sont souvent réalisés en
interne ou à l’externe des organisations, et cela, pour des raisons de productivité ou performance
organisationnelle mais aussi en fonction de la disponibilité des acteurs TI compétents. En ces termes,
ils soutiennent donc l’ensemble «... l’évolution des systèmes d’information existants dans les
organisations ou entreprises. Ils font partie des projets systèmes d’information » (Morley Chantal, 2012).
Il existe globalement deux types de projets informatiques : « les projets d’exploitation informatique et/ou
TI » et « les projets de développement et/ou maintenance logiciels ». Ces deux types sont gérés soit en
partenariat ou de facon mixte et tournent sur cinq dimensions fondamentales, à savoir (1) la mission,
(2) les activités critiques à réaliser, (3) les compétences et connaissances de membres à affecter,
(4) la relation avec le reste des unités d’affaires de l’organisation ou entreprise concernée, et (5)
la gouvernance (lire Manon Guillemette et Paré Guy, 2007, cité par Mbuta Ikoko, 2011 et 2018).
Ces cinq dimensions sont liées entre elles et font face à la gestion des difficultés techniques
d’analyse, de conception et de réalisation, mais aussi à celle de mise en oeuvre des logiciels souhaités
par le client ou par les bénéficiaires finaux, c.à.d. par les utilisateurs18
. Ici, même dans des conditions où
un projet informatique type devrait s’appuyer sur une équipe compétente et sur des architectures
informatiques et/ou des réseaux de communications sophistiqués et opérationnels du client ou existants sur
le marché. D’ailleurs, derrière cet aspect des choses, certaines propriétés de risques apparaissent
également ; le cas par exemple de la gestion et sécurité de données (protection, confidentialité, intégrité,
disponibilité, sûreté, ...) et de la qualité des services et/ou produit-logiciel à offrir (disponibilité des
services, pérennité, relation avec les utilisateurs, ...).
Toutefois, pour pouvoir gérer correctement ces différentes difficultés ou risques, les parties prenantes qui
vont être impliquées au projet doivent tout d’abord établir et organiser une politique de gestion adaptée
puis définir par la suite des objectifs à réaliser ou atteindre (cf. ISO/CEI 9000 : 2005). Dans le lot des
objectifs à définir, il ya trois qui sont majeurs et qui devraient coûte que coûte être atteints. Il s’agit
des objectifs liés (1) au respect des besoins exprimées par le client ou des exigences du produit-logiciel
élaborées par toutes les parties prenantes impliquées ; (2) au respect des coûts et (3) au respect des délais.
Ces trois objectifs majeurs ne sont souvent atteints qu’avec la volonté des différentes parties prenantes
du projet et avec l’aide des différentes autres ressources ou capacités organisationnelles mises àla
disposition (financières, matérielles, informationnelles, etc.). Quant à la politique de gestion, cette
dernière fait simplement appel à la gouvernance du projet pour pouvoir parvenir au but ou à la finalité
(souvent la fabrication ou la fourniture d’un produit-logiciel). Cette politique est souvent reprise dans la
charte du projet informatique en cours d’exécution. La charte du projet informatique est tout simplement
un document synthèse de l’engagement que prend l’organisation parrainant le projet (le sponsor du
projet, le client) ou ayant signé le contrat avec l’organisation fournisseur ou fabricant du produit-logiciel
(partenaire TI). En référence aux bonnes pratiques de gestion globale de projet, reprises dans le PMBoK
18
Au fait, si nous suivons Frederick Brooks (2001, cité par Mbuta Ikoko, 2011), qui a aussi évoqué cet aspect des
choses, nous dirons qu’un projet informatique est souvent un projet difficile par sa nature (fabrication du produit-
logiciel) et paraît également complexe d’un point de vue de pilotage et/ou de gestion (des coûts, des délais, du
temps, des ressources et des communications, etc.). De ce point de vue, il comporte « une part importante
d’incertitudes ou de risques liés et qui font suite aux particularités dues surtout au produit-logiciel à fabriquer»
(Frederick Brooks2001, cité par Mbuta Ikoko, 2011).

Dodi_Mbuta_Rapport D605 : Annuaire_anciens_miage_amiens_upjv

Dodi_Mbuta_Rapport D605 : Annuaire_anciens_miage_amiens_upjv

Recommandé

Recommandé

Contenu connexe

Similaire à Dodi_Mbuta_Rapport D605 : Annuaire_anciens_miage_amiens_upjv

Similaire à Dodi_Mbuta_Rapport D605 : Annuaire_anciens_miage_amiens_upjv (20)

Plus de Daniella Mbuta

Plus de Daniella Mbuta (6)

Dodi_Mbuta_Rapport D605 : Annuaire_anciens_miage_amiens_upjv