LOGO D

MEMOIRE DE FIN D’ETUDES

Refonte d’un site web avec un CMS Open Source

PERIODE :
Du 14/03/2022 au 14/07/2022

Nom & Prénom de l’Etudiant : Nada BOUDRA

Classe, Filière et Option de l’Etudiant : 3ème année licence professionnelle en e-business et Marketing

SUPERVISEUR EN ENTREPRISE : ENCADRANT ECOLE :

Chargé d’orienter l’étudiant au sein de l’entreprise

Nom et Prénom : M. CHAACHO Saad Nom et Prénom : M. BAZI Mohamed

Fonction : Directeur de l’Information Médicale
à l’Hôpital Cheikh Khalifa

Visa de validation :

Année universitaire : 2021-2022

 Table des matières

Remerciements ...................................................................................................................................... 1
Dédicaces ............................................................................................................................................... 2
Résumé .................................................................................................................................................. 3
Abstract ................................................................................................................................................. 4
Liste des abréviations et sigles ................................................................................................................ 5
1. Introduction ....................................................................................................................................................6
2. Etat des lieux et problématique.....................................................................................................................9
3. Objectifs du stage ........................................................................................................................................ 13
4. Expression des besoins ................................................................................................................................ 15
a. Nature du site ....................................................................................................................................... 16
b. Impératifs organisationnels ................................................................................................................. 18
c. Impératifs rédactionnels ...................................................................................................................... 18
d. Impératifs techniques .......................................................................................................................... 20
5. Solutions techniques ................................................................................................................................... 21
a. Sites web statiques versus dynamiques ............................................................................................... 21
b. Présentation de la technologie CMS .................................................................................................... 24
c. Particularités des principaux CMS open source ................................................................................... 25

6. Choix et validation du CMS ......................................................................................................................... 29

7. Conception du prototype ............................................................................................................................ 31
a. Limites du POC ..................................................................................................................................... 31
b. Déploiement du CMS ........................................................................................................................... 33
c. Récupération du contenu du site actuel .............................................................................................. 35
d. Choix du template ................................................................................................................................ 36
e. Choix des modules additionnels .......................................................................................................... 40
f. Intégration du contenu ......................................................................................................................... 40
g. Documentation..................................................................................................................................... 45

8. Hébergement du prototype ........................................................................................................................ 46

9. Formation des utilisateurs .......................................................................................................................... 47
10. Evaluation .................................................................................................................................................. 47
11. Résultats .................................................................................................................................................... 48
a. Rendu global du prototype .................................................................................................................. 48
b. Respect de la charte graphique originale ............................................................................................ 51
c. Facilité de création et de mise à jour du contenu ................................................................................ 52
 d. Maintenabilité technique du site ......................................................................................................... 52
12. Discussion .................................................................................................................................................. 54
a. Internaliser ou sous-traiter ? ................................................................................................................ 54
b. Maintien du référencement ................................................................................................................. 54
c. CMS : des compromis nécessaires ....................................................................................................... 55
d. La question de la sécurité .................................................................................................................... 57
e. Préserver les habitudes des utilisateurs du site .................................................................................. 57
f. Sources multimédia et droits d’auteur ................................................................................................. 57
g. Nécessité de ressources humaines qualifiées et pérennes en interne................................................ 58

h. Open Source, oui, mais pas sans frais .................................................................................................. 58

i. La nécessité de la manipulation du code .............................................................................................. 59

13. Conclusion .................................................................................................................................................. 59

Références bibliographiques ........................................................................................................................... 61
Curriculum Vitae .............................................................................................................................................. 66
Annexes............................................................................................................................................................ 68
 Remerciements

Je saisis cette occasion pour remercier chaleureusement l’ensemble du

personnel de l’Hôpital Universitaire International Cheikh Khalifa, et plus
particulièrement, celui de la Direction de l’Information Médicale (DIM), pour
son accueil et son professionnalisme, ainsi que pour l’aide et le soutien fournis
tout au long de mon stage.

Je remercie également le corps enseignant de l’ESTEM pour leur

accompagnement pédagogique et leur formation, et qui m’ont permis de
m’ouvrir au monde professionnel grâce à leurs conseils avisés et leur
orientation.

Mon attention se tourne également vers le Pr BAZI, qui m’a encadrée en tant
que tuteur académique, et vers le Dr CHAACHO, mon encadrant de stage, qui
ont tous deux fait preuve de patience, d’écoute et de disponibilité.

Mes remerciements s’adressent également à mes proches et à ma famille, qui

m’ont continuellement soutenue tout en long de stage d’immersion
professionnelle.

1
 Dédicaces

C’est avec grande gratitude et sincères mots que je dédie ce modeste travail :

À mon cher mari, que ce travail lui soit témoin de son soutien infaillible.

À ma chère mère, qui n’a pas cessé de m’encourager et de prier pour moi.
Aucune dédicace ne saurait être assez éloquente pour exprimer ce qu’elle
mérite.

À mon cher père, rien au monde ne vaut ses efforts fournis jour et nuit pour
mon éducation et mon bien être.

À tous les chers membres de ma famille, qui n’ont jamais cessé d’être à mes
côtés.

Et à tous ceux à qui m’ont aidé de près ou de loin pour la réalisation de ce

projet. Je vous remercie infiniment.

2
 Résumé

Introduction

Le site web actuel de l’Hôpital Universitaire International Cheikh Khalifa, disponible à l’adresse
www.hck.ma, a été développé en sous-traitance avec le framework Django. Même si ce dernier est
réputé pour sa fiabilité et sa sécurité, il demeure difficile à administrer et à mettre à jour, entraînant
ainsi une dépendance avérée de l’établissement vis-à-vis du développeur pour chaque modification
conséquente ainsi que des retards pour l’actualisation du contenu du site. La Direction de l’Information
Médicale de l’établissement souhaite développer une version simplifiée du site web actuel en
exploitant un CMS open source conventionnel et facile à administrer, afin de pouvoir internaliser les
mises à jour, les développements ainsi que la maintenance de son site web.

Méthodes

Après une revue des principaux systèmes actuels de gestion de contenu (CMS) open source et de
l’étude des besoins spécifiques de la Direction de l’Information Médicale, nous avons proposé de
concevoir une version simplifiée du site web actuel en guise de POC (proof of concept) en exploitant
un CMS conventionnel. Nous avons pour ce faire adopté une démarche agile, consistant en plusieurs
entretiens préliminaires avec les équipes de l’établissement pour relever leurs besoins spécifiques, une
étude comparative des principaux CMS open source, la documentation concernant les bonnes
pratiques en la matière, un benchmarking de plusieurs sites internet du domaine de la santé, suivis par
la réalisation d’un prototype en guise de preuve de concept et la formation des agents internes à son
exploitation à des fins de test et d’évaluation.

Résultats

La réalisation du prototype avec l’aide du CMS Joomla a permis de réconforter le choix de

l’établissement quant à la faisabilité technique de la refonte du site actuel. La richesse fonctionnelle
du CMS, la multitude des plugins disponibles et sa facilité de prise en main rendent possible
l’internalisation du développement du site web, ainsi que sa maintenance. Toutefois, cette
internalisation déplace la complexité de la maintenance du prestataire vers le client, notamment en
ce qui concerne le volet de la sécurité et des mises à jour, et nécessite des compétences internes pour
assurer un produit de qualité.

Mots-clés : HCK, site web, CMS, Joomla

3
 Abstract

Introduction

The current website of the Cheikh Khalifa International University Hospital, available at www.hck.ma,
was developed under contract using the Django framework. Even if this CMS is renowned for its
reliability and security, it remains difficult to administer and update, thus resulting in a proven
dependence of the establishment to the developer for each substantial modification as well as delays
for updating the content of the site. The establishment's Medical Information Department wishes to
develop a simplified version of the current website by using a conventional open-source CMS that is
easy to administer, in order to be able to internalize the updates, developments and maintenance of
its website.

Methods

After a review of the main current open-source content management systems (CMS) and the study of
the specific needs of the Medical Information Department, we proposed to design a simplified version
of the current website as a POC (proof of concept) using a conventional CMS. To do this, we have
adopted an agile approach, consisting of several preliminary interviews with the establishment's teams
to identify their specific needs, a comparative study of the main open-source CMS, a documentation
concerning best practices, a benchmarking of several websites in the field of health, followed by the
production of a prototype as a proof of concept and the training of internal agents in its operation for
testing and evaluation purposes.

Results

The achievement of the prototype using the Joomla CMS made it possible to confirm the choice of the
establishment about the technical feasibility of the redesign of the current site. The functional richness
of the CMS, the diversity of plugins available and its ease of handling make it possible to internalize
the development of the website, as well as its maintenance. However, this internalization shifts the
complexity of maintenance from the service provider to the customer, particularly with regard to
security and updates, and requires internal skills to ensure a quality product.

Keywords: CKH, website, CMS, Joomla

4
 Liste des abréviations et sigles
(Par ordre alphabétique)

BDD : Base de données

CSS : Cascading Style Sheets ou feuilles de style en cascade
CMS : Content management system ou système de gestion de contenu
CRM : Customer Relationship Management ou gestion de la relation client
DAO : Dessin assisté par ordinateur
DDoS : Distributed Denial of Service ou déni de service distribué
DIM : Direction de l’Information Médicale
DSI : Direction des Systèmes d’Information
ERP : Enterprise Ressource Planning ou progiciel de gestion intégré
HCK : Hôpital Universitaire International Cheikh Khalifa
HTML : HyperText Markup Language ou langage de balises pour l'hypertexte
PHP : Hypertext Preprocessor
PNG : Portable Network Graphics
POC : Proof of concept ou preuve de concept
SEO : Search Engine Optimization ou optimisation pour les moteurs de recherche
SGBD : Système de gestion de bases de données
SIH : Système d’information hospitalier
SMTP : Simple Mail Transfer Protocol
SQL : Structured Query Language ou langage de requête structurée
WYSIWYG : What you see is what you get ou « ce que vous voyez est ce que vous obtenez »

5
 1. Introduction
Situé au cœur de la métropole du Grand Casablanca, l’Hôpital Universitaire International
Cheikh Khalifa (HCK) relevant de l’Université Mohammed VI des Sciences de la Santé (UM6SS),
est un établissement privé pluridisciplinaire, à but non lucratif, qui propose un large éventail
de prestations médicales permettant de garantir aux patients une prise en charge optimale et
complète. L’Hôpital est également une structure importante pour la formation et la
recherche.[1]

Figure 1 : aperçu de l’entrée principale de l’HCK

Structure moderne construite sur plus de 48 000 m², l’Hôpital Universitaire International
Cheikh Khalifa dispose d’une capacité de 327 lits, de 58 salles d’exploration et d’un bloc
opératoire de 8 salles.
Quelques chiffres clés concernant l’hôpital en 2021 [2] :
✓ 670 500 consultations
✓ 13 600 hospitalisations
✓ 39 000 actes d’imagerie médicale
✓ 632 accouchements
✓ Plus de 700 emplois directs
✓ 35 spécialités médicales
✓ Plus de 200 étudiants reçus en formation

En plus du professionnalisme de ses équipes, l’hôpital dispose d’une infrastructure de pointe

équipée d’un plateau technique des plus performants et de haute technicité répondant aux
normes internationales, grâce à son investissement constant dans les nouvelles technologies.
En tant qu’hôpital universitaire rattaché à l’Université Mohammed VI des Sciences de la Santé,
l’Hôpital Universitaire International Cheikh Khalifa a également pour mission de former au

6
quotidien la relève de demain, tant dans les métiers médicaux que paramédicaux. Un savoir-
faire partagé avec passion, permettant aux étudiants d‘acquérir l’engagement, les qualités et
le dynamisme des professionnels. [3]
Soucieux de moderniser ses prestations ainsi que son mode de gestion, et croyant au potentiel
des nouvelles technologies de l’information pour améliorer l’efficience et la performance
hospitalières, la sécurité et la qualité des soins ainsi que le pilotage stratégique,
l’établissement s’est inscrit dans une démarche de transformation digitale, par l’adoption d’un
système d’information hospitalier (SIH) et le recours aux solutions digitales, notamment son
site web à destination des professionnels et des usagers. Ce dernier est accessible depuis
l’adresse http://www.hck.ma.

Figure 2 : le site internet actuel de l’HCK

Pour accompagner sa transformation digitale, l’organisation de l’HCK dispose de deux

directions complémentaires [4] :

• La Direction des Systèmes d’Information ou DSI, qui s’occupe des aspects

informatiques au sein de l’établissement, notamment la gestion du réseau, de la
téléphonie, du parc et de l’infrastructure informatiques, de la sécurité et des différents
systèmes d’information qui assurent le bon fonctionnement de l’hôpital (dossier
patient informatisé, système de gestion des ressources humaines, système
comptable…etc.).
• La Direction de l’Information Médicale ou DIM, qui s’occupe du traitement de la
donnée médicale au sein de l’établissement, mais également de la tenue des

7
 référentiels, du codage de l’information, des statistiques hospitalières, de l’archivage,
de la télémédecine ainsi que la production des rapports d’activité périodiques.
Depuis 2018, le département de la communication a été rattaché hiérarchiquement et
fonctionnellement à la Direction de l’Information Médicale, dans le but d’adapter les supports
communicationnels de l’établissement à sa stratégie médicale et adopter une ligne éditoriale
orientée vers les patients et le grand public.
La DIM gère plusieurs canaux de communication institutionnels dans le cadre de sa mission
de communication envers le grand public, afin d’améliorer la perception de l’établissement
mais également, en raison de son statut d’utilité publique, pour jouer un rôle social de
promotion de la santé par la diffusion de contenus divers en rapport avec la sensibilisation
médicale.
En sus du site web institutionnel, la DIM assure la gestion :
✓ De la page LinkedIn officielle de l’HCK
✓ De la page Facebook officielle de l’HCK
✓ De la chaîne YouTube officielle de l’HCK
✓ De la page Instagram officielle de l’HCK

Figure 3 : la chaîne YouTube officielle de l’HCK

Ces supports sont constamment maintenus et mis à jour par les équipes internes de la DIM,
qui s’occupent de tous les aspects liés y compris la production multimédia, la prise d’images,
le tournage ainsi que le montage vidéo.

La DIM assure également la production de supports physiques, notamment des brochures et

des plaquettes à destination des patients et usagers de l’établissement, et assure la

8
communication interne auprès des médecins et collaborateurs de l’HCK via de nombreux
canaux dont le mailing de masse, les listes de distribution, les groupes WhatsApp et les écrans
d’affichage dynamiques répartis sur l’ensemble de l’établissement exploitant la technologie
open source XIBO [5] .

Figure 4 : exemple d’affiches informationnelles (à gauche) et d’écran dynamique (à droite)

2. Etat des lieux et problématique

Le site web officiel de l’HCK a connu, depuis le démarrage des activités de l’établissement en
mars 2015, 3 versions majeures afin de répondre aux nouveaux besoins des utilisateurs et
d’accompagner la vision stratégique de l’HCK :

• Un site vitrine, conçu, développé et hébergé en interne, composé essentiellement

d’une page d’accueil et de quelques rubriques complémentaires de base pour informer
les patients du démarrage des activités et leur fournir des informations de contact.

• Une deuxième version, conçue par un prestataire externe avec le CMS WordPress [6],
a été par la suite développée et mise en ligne pour accompagner l’extension des
activités de l’hôpital et répondre mieux aux impératifs de l’époque, notamment le
design réactif (responsive web design) pour afficher le site web convenablement sur
les terminaux mobiles.

• Une troisième version a été conçue par un autre prestataire externe, cette fois-ci
moyennant le Framework Django [7], reprenant pratiquement la même structure et le
même contenu du site antérieur, tout en rajoutant la prise en charge native de la
langue arabe et en portant une attention particulière au volet sécurité. Cette version,
toujours en ligne actuellement, est également hébergée auprès d’un prestataire
externe, contrairement aux versions antérieures qui ont été hébergées au sein de la
plateforme interne de l’hôpital. La troisième version possède également deux
applications compagnons, disponibles sur les stores d’Apple et d’Android [8], qui sont
interfacées avec le contenu du site.

9
 Figure 5 : captures d’écran de la deuxième version du site développé avec WordPress

Dans sa dernière itération, le site web actuel de l’établissement a été conçu de manière à
répondre aux exigences suivantes :
✓ Être en phase avec la cible, qui demeure majoritairement des patients à la recherche
de prestations de soins ou de diagnostic ;
✓ Développer l’accessibilité du contenu aux internautes à travers l’ensemble de la
navigation ;
✓ S’inscrire dans le quotidien des patients marocains en leur offrant des contenus
médicaux de qualité ;
✓ Marquer un positionnement différenciateur et innovant sur le web pour le secteur,
✓ Offrir un espace dynamique permettant une réelle interaction avec les usagers ;
✓ Proposer à terme des e-services en ligne (prise de RV, télémédecine…) ;
✓ Acquérir de nouveaux patients ;
✓ Ancrer les concepts des spécialités de l’hôpital et inciter les patients à revenir.

Grâce aux outils analytiques intégrés au site web, la DIM a pu objectivement mesurer son
attractivité et analyser son trafic et son exploitation réelle par les utilisateurs.
Ainsi, en 2021, le nombre de sessions comptabilisées sur le site web est de 162 147 sessions,
contre 154 211 durant l’année 2020, soit une augmentation de 5,2%. Le nombre d’utilisateurs
uniques ayant utilisé le site web est de 112 850, soit 309 visiteurs uniques par jour, traduisant
ainsi une augmentation notable de 6% par rapport à l’année précédente. [2]
Le nombre de pages vues est de 621 641 pages, soit une moyenne de 3,22 pages par session,
et la durée moyenne de chaque visite est de 2 minutes et 39 secondes.
Toujours grâce aux statistiques du site, la DIM a déterminé que les visiteurs mobiles du site
sont désormais majoritaires, puisque 53% des visites proviennent de terminaux Android et
23% des terminaux iOS, contre seulement 19% de terminaux Windows. Pour cette raison, le

10
développement d’un site web réactif compatible avec l’affichage mobile est clairement justifié
pour accompagner les nouvelles habitudes des internautes. L’application Android a également
été téléchargée plus de 5000 fois depuis le store officiel de Google.
Bien que cette troisième version du site ait donné entière satisfaction selon les propos
recueillis et qu’elle réponde convenablement au cahier de charges initial élaboré par les
équipes de l’HCK, notamment en ce qui concerne l’aspect sécurité et disponibilité (aucun
incident majeur n’a été rapporté depuis sa mise en ligne), elle suscite un certain nombre de
problèmes au quotidien :

• Le site web actuel a été développé avec le framework Django. Ce dernier est basé sur
le langage de programmation orienté objet Python [9], et est notamment reconnu pour
sa sécurité et sa fiabilité. Plusieurs sociétés internationales [10], [11] ont eu recours à
cette technologie pour leurs services web, notamment :

o La NASA
o Google (Alphabet) pour son service de streaming YouTube
o Spotify
o Instagram
o Boeing
o Pinterest
o National Geographic

Toutefois, la maîtrise de ce framework nécessite des connaissances en matière en

programmation orientée objet et du langage Python [12], une compétence qui n’est pas
disponible au sein de la DIM et qui n’est pas habituellement requise pour des profils
travaillant dans le secteur de la communication et du marketing digital.

Figure 6 : exemple de code source Python d’une page conçue avec le framework Django

En conséquence, toute modification conséquente du site doit impérativement être

réalisée par le prestataire, ce qui entretient une dépendance vis-à-vis de ce dernier.

• L’utilisation de la technologie Django est habituellement justifiée par les interfaces

avec des systèmes informatiques tiers en entreprise, notamment les solutions de

11
 gestion de la relation client (CRM), les progiciels de gestion intégrée (ERP), les solutions
de e-commerce ou encore les bases de données [13]. Or, le schéma directeur
informatique et télécom de l’HCK ne prévoit pas ces cas d’usage, ayant opté pour un
système d’information hospitalier intégré disposant de ses propres services web et
fonctionnant en total autonomie. La technologie Django introduit ainsi une complexité
qui ne trouve pas sa justification actuellement.

• Les applications compagnons, disponibles sur l’App Store d’Apple et le Play Store de
Google, tirent profit de la technologie du framework Django pour récupérer le contenu
inséré dans le site web et le proposer à leur tour. Toutefois, ces applications ne
présentent aujourd’hui aucune valeur ajoutée en termes de fonctionnalités (par
exemple des fonctionnalités de prise de RV en ligne ou de consultation de dossier
patient) par rapport à la version mobile du site, qui, de surcroît, n’a pas besoin
d’installation ni de mise à jour. Là encore, les applications mobiles, en dehors d’un
aspect marketing bienvenues, ne sont pas techniquement justifiées.

Figure 7 : l’application mobile officielle (ici la version Android) n’offre pas de fonctionnalités supplémentaires

• La nécessité de recourir à un prestataire externe entraîne des surcoûts non

négligeables liés à la prestation de réalisation et à la maintenance du site et des
applications, et l’utilisation d’un framework peu courant (Django n’apparaît pas dans
le top 10 des technologies web utilisés [14]) limite le nombre de prestataires tiers
éventuels pouvant reprendre le projet en cas de rupture de contrat ou de litige avec le
prestataire actuel.

12
 • L’externalisation du développement et de la maintenance du site web entraîne, en sus
de délais de traitement supplémentaires des demandes d’évolution, une relative
dévalorisation des compétences internes dont le rôle se reconcentre davantage sur la
création de contenu.

Au vu de ces constats, et bien que le choix de l’externalisation permette de bénéficier de

solutions et de prestations de qualité professionnelle permettant à l’HCK de se focaliser sur
son métier premier, la DIM souhaite tout de même étudier la faisabilité de l’internalisation du
développement et de la maintenance du site web de l’hôpital, en tenant compte des nouvelles
compétences recrutées depuis l’inauguration de l’établissement et des avancées
technologiques disponibles pour le développement des sites web. C’est dans ce cadre que le
présent stage s’inscrit.

3. Objectifs du stage
Le stage correspondant au présent mémoire s’est articulé autour de l’étude de faisabilité
d’une refonte interne de l’actuel site web, afin de répondre à la problématique posée et de
tenter d’y répondre par une preuve de concept (POC ou proof of concept).
Les objectifs du stage ont été fixés comme suit, en accord avec la DIM de l’HCK :

• S’entretenir avec les équipes internes de l’hôpital pour déterminer leurs besoins
spécifiques et leurs attentes quant à la refonte du site web ;

• Réaliser une revue des principaux systèmes de gestion de contenu (CMS) libres
disponibles actuellement, en listant leurs avantages et inconvénients pour déterminer
quelle solution pourrait être utilisée en interne pour réaliser la refonte du site web ;

• Choisir, en accord avec la DIM, un CMS qui pourrait être utilisé pour la refonte du site
en tenant compte des possibilités techniques (hébergement, compétences, technicité)
de l’HCK et du délai accordé pour le déroulement du stage ;

• A l’aide du CMS retenu, développer un prototype sous forme d’un site web reprenant,
dans la mesure du possible, la majorité des fonctionnalités actuelles et en exploitant
si besoin les outils de conception disponibles au sein de la DIM, notamment la suite
Adobe Creative Suite, ainsi que l’abonnement à la banque d’images sans redevance
Shutterstock [15] ;

13
 Figure 8 : l’abonnement Shutterstock offre des illustrations de qualité, y compris dans le domaine de la santé

• Présenter et valider le prototype avec les équipes de la DIM, et tenir compte de leurs
remarques et suggestions pour aboutir à un résultat acceptable ;

• Assurer la formation des équipes internes à la technologie utilisée, avec la remise de

la documentation nécessaire à l’exploitation du prototype en cas de besoin ;

• Discuter, à la lumière du développement réalisé et des différentes contraintes

rencontrées, la pertinence de l’internalisation du développement de la nouvelle
version et la confronter à la solution actuelle basée sur l’externalisation de la
prestation.

Toujours en accord avec la DIM, les livrables suivants ont été convenus dans le cadre du stage :
✓ Le prototype du site web, développé à l’aide du CMS choisi conjointement ;
✓ Les supports de formation du CMS choisi ;
✓ La documentation spécifique complémentaire du prototype, notamment celle de
l’habillage (template) ou des modules tiers utilisés, ainsi que les identifiants de
connexion.

Le développement d’un site web, de par sa complexité et sa richesse, est également une
excellente occasion de se confronter au besoin du marché, d’échanger avec des professionnels
du secteur du marketing digital et de répondre à une problématique concrète. En dehors de
cette opportunité de s’exercer dans le monde de l’entreprise et de mettre en pratique les

14
acquis théoriques prodigués à l’école, ce stage a été pensé avec la DIM de manière à présenter
une véritable valeur ajoutée pour l’établissement :
✓ Eprouver la faisabilité de migrer vers une solution gratuite, sécurisée et
techniquement accessible sans investissement financier supplémentaire ;
✓ Réduire le recours à l’externalisation, diminuer la dépendance et valoriser davantage
les équipes internes ;
✓ Exploiter une technologie répandue pour laquelle il existe un véritable support de la
communauté et une grande richesse en termes de modules et de plugins tiers ;
✓ Améliorer, à termes, la réputation électronique de l’établissement ainsi que sa
présence sur le net en lui offrant une plateforme dynamique et facilement actualisable
et administrable.
Il est à préciser que le prototype réalisé n’a pas vocation à remplacer le site actuel dans l’état
et dans l’immédiat, bien que cette option puisse être retenue ultérieurement au prix d’un
enrichissement du site et d’une évaluation approfondie des bénéfices et des risques,
notamment en ce qui concerne le référencement ainsi que la sécurité du portail, deux aspects
cruciaux pour un établissement hospitalier de type universitaire. Il a en effet été convenu que
le livrable serait avant tout une preuve de concept qui pourrait servir de démonstration en
conditions réelles pour la prise de décision, et représenter éventuellement un socle de base
pour un travail plus élaboré réalisé par les équipes internes.

4. Expression des besoins

Afin de présenter un livrable de qualité conforme aux attentes de la DIM, plusieurs entretiens
ont été menés avec les équipes de cette direction en début du stage, afin d’exprimer
formellement les besoins.
Cette étape fondamentale a permis une approche globale pour établir le cahier de charges de
la refonte, tenant compte de l’ensemble des besoins exprimés, et évitant par la même
occasion une dérive éventuelle du périmètre du projet, d’autant plus que la durée du stage
est relativement courte par rapport à la réalisation ciblée.
Un canevas simple a servi de matrice des exigences, organisée comme suit (exemple) :
Identifiant Exigence Description Priorité Type Livrable
Le nouveau site hck.ma doit
Reprise du Must
1 reprendre au moins le même Fonctionnelle Contenu intégré
contenu existant have
contenu disponible
Un CMS open source doit être
Utilisation d’un Must Prototype basé sur un CMS
2 utilisé pour la conception et la Technique
CMS open source have open source
maintenance du site hck.ma
Le prototype doit se rapprocher
Charte graphique Should Charte graphique similaire
3 au maximum de la charte Fonctionnelle
respectée have adoptée
graphique actuelle

Après validation de la matrice auprès de la DIM, les différents besoins exprimés ont été
regroupés en quatre catégories :

15
 a. Nature du site :

La nature du nouveau site doit demeurer identique à l’existant, autrement dit un site vitrine
de l’HCK permettant une interaction avec les utilisateurs et leur offrant des informations utiles
de deux ordres :

• Des informations en rapport à l’établissement lui-même : prestations offertes,

formalités pour en bénéficier et présentation générale de l’hôpital et de son
écosystème.

• Des informations d’ordre général en rapport avec la mission d’intérêt public de

l’hôpital, plus particulièrement des messages d’éducation sanitaire, des conseils et des
recommandations en rapport avec la santé et l’hygiène de vie.
Ainsi, le nouveau site doit répondre aux exigences suivantes :
✓ Site de nature vitrine, présentant fidèlement l’activité de l’hôpital ;
✓ Mise en valeur des e-services de l’hôpital, notamment la prise de rendez-vous ;
✓ Site multilingue, destiné à être enrichi progressivement par l’ajout ultérieur de
plusieurs langues notamment l’arabe, l’anglais et le tifinagh ;
✓ Site ergonomique, permettant de visualiser un maximum de contenu intéressant dès
son chargement en mettant en évidence les informations essentielles au-dessus de la
ligne de flottaison [16];

Figure 9 : la ligne de flottaison (ici en rose sur le site actuel de l’HCK) délimite la partie immédiatement visible,
en haut, et celle nécessitant de faire défiler le contenu, en bas. Le rendu a été réalisé avec le navigateur Google
Chrome, sur un PC doté d’une résolution d’écran classique de 1600 x 900 pixels

16
 ✓ Interface sobre, conviviale, rassurante et épurée, en accord avec la vision moderne de
l’établissement, exploitant des photographies et des visuels humanisants et
chaleureux ;
✓ Utilisation de pictogrammes et d’aplats de couleur pour un aspect intuitif et moderne
de l’interface ;
✓ Une organisation claire qui mêle aussi bien des colonnes et des blocs pour favoriser le
repérage de l’information ;
✓ Intégration des médias sociaux officiels ;
✓ Un site optimisé pour les 8 profils de visiteurs identifiés conjointement avec la DIM,
comprenant une arborescence adaptée à leurs besoins spécifiques et leur permettant
d’atteindre rapidement l’information désirée :

1) Patient cherchant à s’informer sur les prestations de l’établissement et leurs

modalités ;
2) Patient cherchant à prendre un rendez-vous ;
3) Patient international cherchant à s’informer sur l’hôpital ;
4) Chercheur d’emploi cherchant à s’informer sur l’établissement et ses offres
d’emploi ;
5) Internaute à la recherche d’une information via un moteur de recherche ;
6) Chercheur et professionnel de la santé, cherchant à s’informer sur les activités de
l’hôpital ;
7) Étudiant dans le domaine de la santé ;
8) Journaliste à la recherche d’information concernant l’hôpital.

✓ Un site optimisé pour les différents cas d’utilisation retenus :

1) Prise de rendez-vous ;
2) Consultation de la liste des médecins ;
3) Consultation de la liste des spécialités ;
4) Contacts d’urgence ;
5) Information sur l’hôpital et ses prestations ;
6) Information sur les offres d’emploi et candidature ;
7) Navigation dans le site ;
8) Information sur les activités de l’hôpital ;
9) Consultation des offres de formation, via l’université ;
10) Recherche d’une adresse mail ou d’un numéro de contact ;
11) Consultation des activités de l’hôpital ;
12) Informations concernant les patients internationaux ;
13) Dépôt d’une plainte ou d’une réclamation.

Chaque cas d’utilisation a été précisément décrit et validé, afin d’en tenir compte lors de la
conception du prototype et plus particulièrement pour décrire les arborescences des
différents menus du site, et ce, en rapport avec les différentes catégories d’utilisateurs.

17
 Figure 10 : exemple des cas d’utilisation validés pour chaque catégorie d’utilisateur du site web de l’HCK

b. Impératifs organisationnels
A l’heure actuelle, les rédacteurs au sein de la DIM soumettent le contenu rédigé par courrier
électronique à leur responsable hiérarchique. Ce dernier assure la révision du contenu
proposé, y apporte éventuellement des ajustements puis procède à son insertion au sein du
site web pour sa publication finale. Toutefois, l’HCK ne disposant pas encore d’un système de
gestion électronique de documents (GED) [17], le processus demeure manuel et se base
essentiellement sur le courrier électronique, ce qui se révèle être peu pratique dans le cadre
du suivi de cette activité, notamment pour détecter les retards de traitement ou pour gérer
efficacement la liste d’attente.
Le site web doit être capable de supporter le flux de travail de publication (workflow) [18], en
permettant à plusieurs professionnels de la DIM de collaborer ensemble en vue d’alimenter
le site web en contenu, tout en respectant la chaîne de validation actuelle.
Il doit permettre notamment :

✓ De rédiger du contenu directement au niveau de la plateforme d’administration privée

du site web (back-end) ;
✓ De gérer le flux de publication depuis la production de contenu jusqu’à sa publication
finale sur le site ;
✓ De différencier plusieurs niveaux d’utilisateurs, notamment :
o Les auteurs : capables de rédiger et soumettre du contenu ;
o Les éditeurs : capables de retoucher le contenu soumis par les auteurs ;
o Les publieurs : capables de valider le contenu et assurer sa publication ;
o Les administrateurs : capables d’éditer également la structure du site.
✓ De pouvoir archiver au besoin les anciens articles.

c. Impératifs rédactionnels
Afin de répondre aux besoins des utilisateurs du site, la DIM a adopté une ligne éditoriale
marquée par la médicalisation du contenu et la vulgarisation scientifique afin d’offrir du
contenu accessible au grand public, tout en publiant des données et des articles spécifiques à

18
destination des professionnels, dont les médecins et les chercheurs dans le domaine des
sciences de la santé.
Le contenu éditorial du site peut être synthétisé comme suit :
✓ Varié : en proposant du contenu de nature diverse tel que des conseils ou des
actualités, ainsi que des articles décrivant les services de l’hôpital et ses prestations ;
✓ Illustré : avec le recours pertinent aux éléments graphiques et multimédia ;
✓ Régulièrement mis à jour : pour proposer aux usagers du site du contenu attrayant et
bénéficier d’un bon référencement par les moteurs de recherche ;
✓ Multi-sources : le site web doit pouvoir s’alimenter de contenu tiers en complément,
issu d’organismes de presse ou de sources scientifiques ou techniques ;
✓ Téléchargeable au besoin pour une lecture hors ligne ;
✓ Imprimable au besoin ;
✓ Accessible pour la navigation des personnes malvoyantes ;
✓ Compatible avec tout support tel que les mobiles et les tablettes.

La DIM a par ailleurs préconisé plusieurs orientations à ses auteurs :

✓ Rédaction d’un contenu de qualité, propriétaire, sans plagiat, adapté au public cible et
soigneusement rédigé ;
✓ Proposer du contenu adapté à la publication en ligne, conçu pour une lecture rapide
et efficace des données recherchées par l’internaute ;
✓ Rédiger le contenu en respectant les bonnes pratiques pour un référencement
efficace, notamment le choix des mots-clés pertinents prioritaires et la hiérarchisation
du contenu en allant de l’essentiel au spécifique [19].

Figure 11 : la règle des 5W et celle de la pyramide inversée sont des techniques connues pour structurer
convenablement un article destiné à la publication en ligne [19]

19
 d. Impératifs techniques

Plusieurs impératifs techniques ont été retenus suite aux échanges avec la DIM, émanant
majoritairement des dernières tendances et recommandations :
✓ Site web dynamique ;
✓ Site web géré par un système de gestion de contenu (CMS) ;
✓ CMS sous licence GPL (open source);
✓ Interface d’administration (back-end) intégrée ;
✓ Support de plusieurs profils d’utilisateurs avec définition fine des droits et privilèges ;
✓ Support des habillages graphiques (templates) tiers ;
✓ Basé principalement sur les technologies PHP, HTML 5 et CSS [20] ;
✓ Base de données de type MySQL, MariaDB ou PostgreSQL [21] ;
✓ Site pouvant être hébergé sur une plateforme standard de type LAMP [22] ;
✓ Compatible avec les navigateurs récents, notamment Google Chrome, Microsoft Edge,
Mozilla Firefox et Apple Safari ;
✓ Support multilingue natif UTF-8, gérant notamment la langue arabe ;
✓ Site réactif compatible responsive design permettant un affichage correct et optimisé
sous les navigateurs mobiles sur smartphones et tablettes également ;
✓ Support des formats d’image web standard, notamment le WebP [23] ;
✓ Support des polices web additionnelles ;
✓ Possibilité d’enrichir les fonctionnalités du site par des modules ou des plugins tiers ;
✓ Possibilité de définir des sections publiques et privées du site web ;
✓ Compatibilité SMTP pour l’envoi des mails ;
✓ Support de la technologie CAPTCHA [24] ;
✓ Support des flux RSS ;
✓ Site conforme aux standard W3C [25] ;
✓ Site prenant en considération les directives d'accessibilité Web (WCAG) [25] ;
✓ Support de la réécriture en clair et au vol des URL pour l’optimisation du contenu pour
les moteurs de recherche ;
✓ Prise en charge des outils statistiques de mesure de fréquentation, notamment Google
Analytics [26].

Figure 12 : Google Analytics offre des informations pertinentes pour le suivi de la fréquentation d’un site web

20
 5. Solutions techniques
Depuis l’invention de la technologie web par Tim Berners-Lee en 1989, sous forme d’un
produit destiné principalement à l’échange d’informations scientifiques entre universités et
instituts du monde entier, le réseau internet a comptabilisé une dizaine de sites web en ligne
en 1992, puis 3000 sites en 1994. Actuellement, le nombre de sites web avoisine les 1,9
milliards, indépendamment de leur activité effective en ligne [27].

Figure 13 : évolution du nombre de sites web en ligne, d’après l’observatoire Internet Live Stats

L’explosion du nombre de sites web, la demande croissante en services connectés et la

banalisation des accès au réseau internet grâce aux solutions mobiles a favorisé l’émergence
de nombreuses technologies permettant de concevoir les sites web.

a. Sites web statiques versus dynamiques [28]

Un site web statique est une collection de pages web reliées entre elles par des hyperliens,
conçues à leur tour de manière statique, autrement dit créées et finalisées de manière
définitive et stockées sur un serveur d’hébergement. Les pages statiques correspondent ainsi
à des fichiers, habituellement écrits en langage HTML, qui sont sauvegardés dans une
arborescence au sein d’un serveur web qui les restitue à l’identique à l’internaute.
Dans le cas d’un site web statique, toutes les pages sont nécessairement prévues d’avance, et
conçues préalablement une par une par le développeur. Par ailleurs, les pages statiques étant
figées, elles ne permettent généralement aucune interaction avec l’internaute, dans la mesure
où leur affichage est immuable. De même, le code ayant généré la page web statique sera
directement interprété par le navigateur de l’internaute qui fera office de lecteur de fichier.
Le serveur web, quant à lui, se contentera de stocker passivement la page et de la restituer
sans agir sur sa structure ou l’altérer en fonction de paramètres éventuels. Les réponses du
site web demeureront identiques pour chaque requête similaire.
Le caractère statistique d’une page web concerne sa génération et sa restitution, mais
n’empêche pas d’intégrer au sein de la page des éléments multimédia tels que des animations
ou des vidéos. Ainsi, une page web statique n’est pas nécessairement une page figée au sens
graphique du terme.
21
 Figure 14 : la réalisation d’un site statique fait appel à un assemblage de pages préconçues

Même si la technologie des sites web statiques semble dépassée aujourd’hui, elle garde
plusieurs avantages dont la flexibilité, puisque chaque page peut être construite et conçue de
manière totalement différente des autres pages constituant le site web. Cette technologie
peut également être intéressante pour la création d’un site ne nécessitant pas de mises à jour
régulières ou dans le cas d’un serveur web limité en termes de performances.

Les sites web statiques étant majoritairement conçus avec le langage HTML, il est
théoriquement possible d’écrire manuellement leur code, mais cette méthode fastidieuse et
chronophage et il est plus courant de faire appel à des éditeurs HTML WYSIWYG (what you
see is what you get), qui permettent de générer du code HTML à la volée via une interface
graphique proche des logiciels de traitement de texte conventionnels [29].

Figure 15 : un éditeur WYSIWYG permet de générer simplement du code HTML, visible dans la fenêtre de droite

A contrario, les sites web dynamiques sont constituées de pages web n’existant pas en tant
que fichiers figés déposés sur le serveur d’hébergement, mais générées à la volée au sein de
ce dernier à l’occasion d’une requête lancée par le navigateur de l’internaute. Il est donc

22
question d’une création dynamique de la page demandée, d’où le nom donné à cette
technologie.
Les pages web dynamiques sont générées en temps réel par le serveur, en se basant sur des
informations stockées préalablement dans une base de données et complétées par des
éléments issus de l’interaction avec l’utilisateur (clics, saisies, chargement de fichiers…etc.).

Plusieurs technologies permettent de générer des pages web dynamiques, plus

particulièrement le langage de programmation PHP, associé le plus souvent à un système de
gestion de bases de données. Véritables programmes informatiques au sens propre du terme,
les sites web dynamiques peuvent générer, entre autres, du code HTML pouvant être
interprété par les navigateurs [28].

Figure 16 : les pages web dynamiques sont générées à la volée par le serveur

Les sites web dynamiques présentent plusieurs avantages par rapport à leurs homologues
statiques [30], notamment :

✓ Une mise à jour simplifiée du contenu sans nécessité de réécrire toutes les pages ;
✓ Possibilité de mettre à jour le contenu en direct ;
✓ Personnalisation extrême du rendu en fonction de la cible ;
✓ Meilleure structuration des sites ;
✓ Possibilité d’interaction avec les utilisateurs du site ;
✓ Possibilité de limiter l’accès à des rubriques en fonction de privilèges ;
✓ Possibilité d’intégrer un moteur de recherche interne ;
✓ Constitution dynamique de données exploitables, dont des statistiques ;
✓ Amélioration de l’indexation par les moteurs de recherche ;
✓ Possibilité de collaboration simultanée à plusieurs pour mettre à jour le site ;
✓ Dissociation entre le contenu (texte) et le contenant (habillage graphique).

23
La création d’un site web dynamique reposant principalement sur la programmation
informatique, il est fastidieux de développer de toutes pièces un tel site et il est préférable de
faire appel à des outils spécialisés, notamment les systèmes de gestion de contenu ou CMS.

b. Présentation de la technologie CMS [31]

Les systèmes de gestion de contenu web, plus connus sous leur appellation anglaise CMS pour
Content Management System, sont des logiciels qui permettent de développer, de gérer et de
mettre à jour des sites web dynamiques.
Les CMS fournissent une ossature développée avec un langage informatique spécifique, qui
sera complétée par la suite par les éditeurs du site en y intégrant du contenu propriétaire sans
nécessité de manipuler du code informatique souvent hors de portée de la plupart des
mainteneurs de sites.
Les CMS offrent classiquement plusieurs fonctionnalités :
✓ Des outils de travail collaboratif permettant à une équipe de travailler conjointement,
simultanément ou en différé, sur un même site web dynamique ;
✓ Edition facilitée du contenu, avec la possibilité de rédiger des articles avec un éditeur
WYSIWYG intégré sans nécessité de saisir du code HTML ;
✓ Un système de gestion de la chaîne de publication, avec possibilité d’hiérarchiser les
utilisateurs et de leur attribuer des privilèges depuis la proposition du contenu jusqu’à
sa publication finale sur le site ;
✓ La séparation du contenu (textes, éléments multimédia) du contenant et de la forme
de ce dernier (habillage graphique, structure, template), permettant à des profils
différents d’utilisateurs de contribuer sans la nécessité de maîtriser l’ensemble des
technologies liées aux sites web dynamiques (PHP, SQL, CSS, ASP…etc.) ;
✓ La structuration du contenu du site, qui peut être organisé en catégories, supprimé,
mis à jour ou archivé en fonction des besoins.

Figure 17 : les CMS permettent de gérer séparément le contenu et l’habillage des sites web dynamiques

24
Globalement, les CMS présentent plusieurs avantages par rapport au développement d’un site
web dynamique de novo [32] :
✓ Temps de développement plus réduit ;
✓ La maîtrise des techniques de programmation web et des langages informatiques n’est
plus nécessaire ;
✓ Un néophyte peut concevoir des sites de grande qualité visuelle grâce à des thèmes
conçus par des professionnels, disponibles gratuitement ou moyennant finance ;
✓ Plusieurs composants ou additifs peuvent être intégrés pour gagner en fonctionnalités
supplémentaires, sans nécessité de développement informatique ;
✓ La mise à jour des CMS permet de se prévenir des risques informatiques en corrigeant
les failles dès leur identification ;
✓ Les CMS permettent de mieux respecter les recommandations et les bonnes pratiques
en termes de développement web (CSS, SEO…etc.).

c. Particularités des principaux CMS open source

Les solutions open source ou libres peuvent être définis selon le référentiel de la Free Software
Foundation [33] comme étant des programmes conférant à leurs utilisateurs quatre libertés
fondamentales :

✓ La liberté d’exploiter le programme pour tous les usages sans aucune restriction ;
✓ La liberté d'étudier le fonctionnement du programme et de l'adapter à ses besoins ;
✓ La liberté de redistribuer des copies du programme ;
✓ La liberté d'améliorer le programme et de distribuer ces améliorations.

Figure 18 : la FSF a pour mission de promouvoir le logiciel libre et de défendre ses utilisateurs

Au-delà des gratuiciels avec lesquels ils sont souvent confondus, les solutions libres
permettent de disposer du code source du programme, permettant ainsi sa modification, son
adaptation mais également son étude. Cette possibilité permet de déceler la majorité des
failles de sécurité, contribuant à rendre les solutions open source fiables et utilisables à grande
échelle (Linux, Android, PHP, PostgreSQL…etc.) [34].
On répertorie aujourd’hui plus de 250 CMS tous types confondus, aussi bien libres que
propriétaires [14]. Si certains sont de nature généraliste et peuvent être exploités pour
développer tous types de sites web dynamiques à l’instar de WordPress, certains sont

25
optimisés et orientés pour un usage particulier, par exemple Shopify et PrestaShop qui ont été
conçus pour les sites de vente en ligne et le commerce électronique.
En termes de parts du marché, les solutions du top 10 représentent à elles-seules 87% de
l’utilisation globale de ces produits, dont le CMS open source WordPress occupe la première
place avec 65% des parts [14]. Cela signifie non seulement que les solutions open sources
bénéficient de l’adhésion et de la confiance des développeurs des sites web, mais que
l’utilisation des autres CMS demeure marginale.

Figure 19 : top 10 des CMS les plus utilisés dans le monde. Le CMS WordPress, open source, occupe la première
place avec 65% des parts de marché

Concernant l’étude objet de ce mémoire, et afin de répondre aux exigences du cahier de

charges de l’HCK, seuls les CMS open source et à usage générique du top 10 ont été retenus
pour présenter leurs spécificités. Il s’agit de :
✓ WordPress : 65% des part du marché ;
✓ Joomla : 3% des parts du marché ;
✓ Drupal : 2% des parts du marché.
WordPress, qui a vu le jour en 2003, est le CMS le plus utilisé dans le monde. Open source,
c’est une plateforme généraliste conçue autour du langage PHP et du système de gestion de
bases de données (SGBD), MySQL, mais supporte également d’autres types de SGBD comme
MariaDB. En 2022, le nombre de sites web dynamiques conçus avec WordPress a dépassé les
30 millions, un chiffre en augmentation constante depuis sa publication. WordPress fait
tourner aujourd’hui près de 40% du web [14].

Fort d’une grande communauté de développeurs et de contributeurs bénévoles, WordPress

dispose de plus de 58 000 plugins et de nombreux thèmes fournis gratuitement par la

26
communauté. WordPress est également conçu pour le responsive design, permettant la
création de sites adaptés aux terminaux mobiles.
Principaux avantages de WordPress [35] :
✓ Communauté importante et réactive d’utilisateurs et de développeurs ;
✓ Déploiement rapide et simplifié ;
✓ De très nombreuses extensions disponibles ;
✓ Optimisé pour le référencement ;
✓ Editeur WYSIWYG intégré ;
✓ Fournit une chaîne de publication ;
✓ De nombreuses mises à jour publiées régulièrement ;
✓ Possibilité de mise à jour automatique sans intervention humaine ;
✓ Respecte les standards XHTML et CSS ;
✓ Peut supporter plusieurs millions de pages ;
✓ Adapté à plusieurs types d’usages.

Principaux inconvénients de WordPress [35] :

✓ Sa popularité le rend particulièrement ciblé par les menaces informatiques ;
✓ L’usage de plusieurs extensions peut le ralentir ou entraîner des erreurs ;
✓ Sa sécurité par défaut est gérée par un fichier .htaccess jugé vulnérable ;
✓ Les mises à jour peuvent entraîner des incompatibilités avec les extensions ;
✓ Pas adapté à des usages spécifiques de type intranet ;
✓ Pas adapté nativement aux sites multilingues ;
✓ Plusieurs thèmes comportent du code inutile capable de réduire les performances ;
✓ Ne supporte pas des thèmes différents par pages pour un même site ;
✓ Le développement d’un site professionnel nécessite des compétences spécifiques.
Le CMS Joomla, dont le nom stylisé « Joomla! » dérive du mot « Jumla » en swahili qui signifie
« tous ensemble », a été développé en 2005 à partir d’un autre CMS open source, Mambo.
Deuxième CMS open source le plus utilisé dans le monde après WordPress, Joomla fait tourner
plus de 2 millions de sites web actifs dans le monde, avec plusieurs références notables dont
l’Organisation des Nations Unies, le gouvernement Argentin, Linux.com, IKEA, Peugeot,
l’UNESCO, General Electric, Citybank, EDF, Unilever…etc. [14], [36]
A l’instar de WordPress, Joomla repose également sur une plateforme PHP/MySQL, tout en
étant compatible également avec le SGBD open source PostgreSQL, une alternative
intéressante depuis le rachat de MySQL par Sun Microsystems (Oracle) en 2008 [37].
Totalement versatile, Joomla permet la création native de toutes sortes de sites web, y
compris des intranets et des extranets d’entreprise, une caractéristique qui le distingue
notamment de WordPress. Joomla a également reçu à plusieurs reprises le prix du meilleur
CMS gratuit et le prix du meilleurs CMS open source du CMS Critic People’s Choice Awards [38].
Principaux avantages de Joomla [39] :
✓ Interface de gestion intuitive et optimisée pour les sites au contenu important ;
✓ Plus de 8000 extensions et 1000 templates disponibles ;

27
 ✓ Prise en charge native des sites multilingues avec plus 70 packs de traduction ;
✓ Intégration d’une solution de gestion du flux de publication ;
✓ Une gestion très fine des utilisateurs et de leurs habilitations via ACL ;
✓ Intégration native d’un moteur de recherche avancé ;
✓ Supporte plusieurs thèmes sur un même site simultanément ;
✓ Adapté au développement d’applications web d’entreprise comme les intranets ;
✓ Prise en charge native des envois de courriers électronique par le protocole SMTP ;
✓ Sécurité accrue via le support natif du HTTPS/SSL et l’authentification à deux facteurs ;
✓ Moins ciblé par les attaques informatiques en raison de sa plus faible popularité ;
✓ Adapté aux sites complexes d’entreprise offrant des fonctionnalités avancées ;
✓ Possibilité d’intégrer des champs personnalisés aux sites ;
✓ Prise en charge native des systèmes de redirection ;
✓ Prise en charge native du cache pour l’optimisation des performances ;
✓ Optimisation du référencement grâce à la prise en charge native des métadonnées ;
✓ Plus adapté aux évolutions majeures des fonctionnalités des sites ;
✓ Prise en charge de modules programmables indépendamment du noyau du site.
Principaux inconvénients de Joomla [39] :
✓ Une prise en main plus complexe que WordPress pour le maîtriser totalement ;
✓ Une adaptation profonde peut nécessiter de saisir du code ou de le modifier ;
✓ Pas de bibliothèque intégrée de templates pour les choisir et les télécharger ;
✓ Les templates de qualité sont souvent payants.
Dernier CMS open source de ce comparatif, Drupal a été conçu en 2000 comme étant un
système de forums, avant d’évoluer vers un système plus générique, occupant 2,3% des parts
du marché. Il s’agit donc du plus ancien CMS open source, mettant particulièrement l’accent
sur les fonctions de partage et d’interaction sociale entre utilisateurs. Tout comme WordPress
et Joomla, Drupal repose sur une architecture classique PHP/MySQL, tout en étant compatible
avec d’autres SGBD comme MariaDB, PostgreSQL ou SQLite [40].

Drupal est reconnu pour sa sécurité, et plusieurs sites renommés (La Maison Blanche, Ubuntu,
le Gouvernement Français, L’Université d’Oxford, Médecins Sans Frontière, Le Figaro…etc.)
l’utilisent comme CMS [41].
Principaux avantages de Drupal [42] :
✓ Plus de 2500 thèmes et 47 000 plugins disponibles ;
✓ Optimisé pour des sites de type blogs ou dans le cadre des sphères privées ;
✓ Bonne flexibilité permettant de développer des sites complexes ;
✓ Adapté aux besoins de grandes entreprises internationales ;
✓ Prise en charge native des sites multilingues ;
✓ Gestion des droits des utilisateurs par ACL ;
✓ Une sécurité élevée grâce au cryptage de la base de données et des mots de passe.
Principaux inconvénients de Drupal [42] :
✓ Grande consommation en ressources nécessitant un hébergeur performant ;

28
 ✓ Une interface d’administration peu intuitive ;
✓ La plupart des réglages, caches et paramètres sont stockés dans la base de données ;
✓ Une courbe d’apprentissage plus longue par rapport à WordPress ou Joomla ;
✓ Une connaissance des bases du PHP, HTML et CSS demeure requise ;
✓ Une complexité disproportionnée pour des sites simples ;
✓ Pas de rétrocompatibilité avec les versions antérieures ;
✓ Mise en cache nécessaire du contenu pour éviter les lenteurs.

6. Choix et validation du CMS

Le choix du CMS pour développer le prototype en interne a été discuté avec l’équipe de la
DIM, à la lumière du comparatif des avantages et des inconvénients des trois CMS open source
identifiés auparavant.
Les critères retenus pour la prise de décision furent les suivants :

✓ La possibilité de respecter le cahier de charges établi, notamment la nature du site et

les aspects techniques ;
✓ La réputation du CMS ;
✓ Sa facilité d’utilisation ;
✓ La disponibilité d’une bonne documentation en ligne ;
✓ La disponibilité de thèmes compatibles et d’extensions ;
✓ La nécessité ou pas de recourir au codage pour la réalisation du prototype ;
✓ Le temps nécessaire pour arriver au résultat désiré ;

Si les CMS open source décrits possèdent tous les trois d’excellentes références et bénéficient
de retours positifs de la communauté, le CMS Drupal a été écarté d’emblée en raison de la
technicité requise pour sa maîtrise, incompatible avec le contexte et le délai du stage, mais
également du fait que le site de l’HCK se présente sous la forme d’une vitrine institutionnelle
relativement simple à concevoir et pour laquelle la complexité de Drupal ne trouve pas de
justification.
Le choix entre les CMS WordPress et Joomla, 1er et 2ème CMS open source respectivement sur
le marché mondial [14], était plus délicat au vu de leur caractère généraliste et de leurs
avantages respectifs. Malgré la dominance de WordPress en termes de part de marché, le
choix s’est finalement porté sur le CMS Joomla, pour les raisons suivantes :

• Le caractère international du site de l’HCK, qui s’adresse à plusieurs nationalités et

catégories de patients, nécessite une prise en charge optimisée du support
multilingue, dont celui de la langue arabe, qui est nativement supportée dans le CMS
Joomla. Bien que WordPress puisse gérer, avec des extensions supplémentaires, le
support multilingue, il est préférable d’exploiter des fonctionnalités intégrées qui ne
poseront pas de problèmes de mises à jour ni de compatibilité avec les prochaines
versions. Par ailleurs, il est recommandé, pour des raisons de sécurité, de restreindre
le nombre d’extensions puisque leur code n’est pas forcément mis à jour aussi
fréquemment que le CMS lui-même. Finalement, les extensions peuvent générer des

29
 bugs ou des problèmes de performance, d’où la préférence d’opter pour une
fonctionnalité native [43].

Figure 20 : le CMS Joomla prend en charge nativement la gestion multilingue du contenu

• Le CMS Joomla est conçu de manière à supporter plusieurs habillages (templates)

simultanément pour le même site [39]. Il est possible d’appliquer un thème spécifique
à certaines pages, ce qui étend les capacités de customisation offertes. Dans le cas de
l’HCK, le centre dentaire pourrait bénéficier d’une charte graphique et d’une identité
visuelle adaptée, tout en évitant le recours au développement d’un site web dédié.

• L’HCK a bénéficié, au démarrage de son activité, d’un logiciel de travail collaboratif et

d’une messagerie électronique professionnelle open source, gérés et administrés en
interne. Cette solution, basée sur EGroupware [44], offrait plusieurs fonctionnalités tels
que les agendas partagés, un annuaire, des communiqués internes, une gestion
électronique de documents…etc. Cette solution, qui a été remplacée par la suite par
une solution cloud propriétaire, a démontré l’intérêt des professionnels de l’HCK pour
des systèmes de type intranet, et il serait donc envisageable de prévoir une partie
privée du site à destination des professionnels, d’où l’intérêt d’opter pour le CMS
Joomla qui offre nativement des fonctionnalités intranet et extranet.

• Le site web de l’HCK fait appel à plusieurs formulaires, destinés à des usages
différents : prise de rendez-vous, dépôt de candidature pour le recrutement,
réclamations et contacts. En l’absence d’interconnexion de ces services avec des
systèmes d’information dédiés, les formulaires doivent générer automatiquement des
courriers électroniques à destination des services concernés. Contrairement à
WordPress, Joomla gère nativement le protocole de messagerie SMTP [39] qui permet
l’envoi sécurisé de courriers électroniques en exploitant la plateforme de l’HCK. Là
encore, il est préférable d’exploiter une fonctionnalité nativement intégrée au CMS
pour des raisons de fiabilité et de sécurité.

• La sécurité native de Joomla est réputée être meilleure que celle de WordPress, grâce
notamment à sa prise en charge des protocoles HTTPS et des certificats SSL pour une

30
 navigation sécurisée, ainsi que l’authentification à deux facteurs qui permet de
sécuriser l’accès à sa plateforme d’administration [45].

Figure 21 : le protocole sécurisé HTTPS est pris en charge par Joomla

• La deuxième version du site institutionnel de l’HCK fut développée avec le CMS

WordPress, qui a montré rapidement ses limites, notamment en termes de
performances et de capacités d’adaptation.

• Finalement, pour les besoins du stage et de la formation, il était également pertinent

et enrichissant de découvrir une nouvelle plateforme, vu que le CMS WordPress était
déjà enseigné dans le cadre du cursus.
Il est à rappeler que l’objectif principal de ce travail est de réussir une refonte du site web
actuel en exploitant un CMS open source, pour prouver la faisabilité de l’opération en interne.
Dans l’affirmative, la DIM se réserve le droit de retenir le même CMS ou d’opter pour un autre
lors d’un passage en production.

7. Conception du prototype
Pour évaluer la faisabilité de l’internalisation du développement d’une nouvelle version du
site à l’aide d’un CMS open source, il a été convenu de développer un prototype fonctionnel
reprenant les fonctionnalités clés du site actuellement en ligne, en suivant une méthodologie
convenue avec la DIM.

a. Limites du POC
Au vu de la durée accordée au stage et de l’importance des étapes préparatoires avant le
développement proprement dit (documentation sur le CMS Joomla, expression des besoins,
revue de la littérature…etc.), une refonte à l’identique de la totalité des éléments du site et
de ses fonctionnalités serait hors de portée dans le cadre d’un travail de stage. Au vu des
objectifs de la mission confiée, certaines limites ont été consenties, sans que cela ne remette
en cause la qualité du travail accompli ni sa capacité à éprouver le concept de l’internalisation.
Ces limites concernent notamment :

• L’intégration de la langue arabe, sachant que le CMS gère nativement le multilingue. Il

n’y avait pas d’intérêt particulier à éprouver cette fonctionnalité, mais le support de la

31
 langue arabe a tout de même été installé pour vérifier la compatibilité et une page de
test, reprenant du contenu original du site actuel, a été rédigée et affichée avec succès.

Figure 22 : le contenu arabe est correctement pris en charge par Joomla

• A des fins de tests et d’illustration, 4 spécialités et 6 médecins fictifs seulement ont été
intégrés. Toutefois, contrairement au site actuel où ils sont saisis en mode texte, un
véritable gestionnaire de médecins et de spécialités a été intégré sous forme d’un
composant, permettant de les renseigner au niveau d’une base de données
relationnelle intégrée au back-end. Il est donc possible d’en ajouter à l’infini, avec une
mise en page automatique au niveau du site.

• Les articles des rubrique « InfoSanté », « Actualités » ou « Espace Presse » n’ont pas
été tous repris, dans la mesure où il s’agit simplement d’afficher une sélection
d’articles d’une catégorie donnée. Quelques articles ont été tout de même été intégrés
dans le prototype pour démontrer son bon fonctionnement.

• La même approche a été adoptée pour la section « Documents utiles », qui ne reprend
que 4 pièces jointes proposées en téléchargement. La section correspondante au sein
du prototype a été pensée pour un nombre infini de documents téléchargeables.

• L’envoi des formulaires par courrier électronique à leurs destinataires a été testé avec
succès, mais uniquement avec un compte Gmail personnel pour éviter de spammer un
compte mail officiel en @hck.ma. Le serveur de messagerie peut être reconfiguré avec
n’importe quel compte SMTP.

• Le suivi statistique de la fréquentation du site est pris en charge, mais non activée
puisque le prototype est hébergé uniquement en local.

32
 • Les illustrations manquantes, dont les photographies des médecins qui sont absentes
dans le site d’origine, ont été remplacées par des images de stock libres de droits.

b. Déploiement du CMS
Le développement du prototype a été réalisé principalement sur un poste de travail Windows
11 Professionnel, doté d’un processeur Intel® Core™ i7 et de 16 Go de mémoire RAM, avec
une résolution d’affichage de 1600 x 900 pixels.
En mobilité, le développement était poursuivi sur un MacBook Air avec une puce Apple M1, 8
Go de RAM et une résolution d’affichage de 2560 x 1600 pixels.
Pour préparer l’environnement d’hébergement du prototype, le choix s’est porté, pour les
deux systèmes d’exploitation, sur la suite logicielle XAMPP [46] en version 64 bits. Cette
dernière regroupe, entre autres :
✓ Le serveur web Apache ;
✓ PHP ;
✓ Le système de gestion de base de données MariaDB (syntaxe identique à MySQL) ;
✓ L’application web phpMyAdmin permettant de gérer les bases de données.

Figure 23 : XAMPP sur le PC Windows, avec les serveurs Apache et MariaDB activés

Tenant en compte le caractère local et démonstratif de l’installation, la configuration par

défaut de XAMPP a été utilisée, sans spécifier de mot de passe pour l’administration de la base
de données. Par ailleurs, XAMPP n’est pas conçu pour servir d’environnement de production
à cause de ses vulnérabilités et de ses performances, mais fournit plutôt un environnement
de développement facile à déployer [46].
Après l’installation de XAMPP et le démarrage des deux services Apache et MariaDB requis
par le CMS Joomla, la base de données « hcktest » a été créée via phpMyAdmin et son
interface graphique. En effet, Joomla ne génère pas sa base de données vierge lors de son
installation mais renseigne ses données au sein d’une base existante. Il était donc impératif
de la créer préalablement à l’installation du CMS Joomla à proprement parler.

33
 Figure 24 : création de la base de données « hcktest » avec phpMyAdmin

La dernière version stable du CMS Joomla, en version 4, a été téléchargée à partir du site
officiel sous forme d’une archive zip, qui a été décompressée dans le dossier « hcktest » au
sein de la racine web de la suite XAMPP. L’installation de Joomla a été ensuite lancée via son
adresse web locale http://localhost/hcktest/. Les informations concernant l’administrateur du
site, la base de données et le nom du site ont été renseignés durant l’installation.

Figure 25 : l’installation de Joomla passe par des étapes simples en renseignant les champs requis

Le dernier package d’installation en date étant disponible en langue anglaise uniquement, le

site ainsi que le back-end, accessible à l’adresse http://localhost/hcktest/administrator/, sont
affichés en cette langue par défaut.

Figure 26 : le site web vierge après installation, à gauche, et le back-end en anglais, à droite

34
L’interface d’administration permet par la suite d’installer la langue française, dont la version
correspond à celle de Joomla, et de l’activer pour franciser le site ainsi que le back-end.
L’installation du CMS Joomla est ainsi finalisée.

c. Récupération du contenu du site actuel

La récupération du contenu du site web actuel www.hck.ma a été réalisée manuellement à

partir du site publié en ligne, selon les modalités suivantes :
✓ Les différents menus ont été repris en exploitant l’outil en ligne GlooMaps qui permet
de représenter graphiquement les menus ainsi que leurs arborescences [47] :

Figure 27 : l’arborescence du sous-menu « Notre hôpital » du site publié, représentée avec GlooMaps

✓ Une arborescence de dossiers respectant celle des menus du site a été créée ;
✓ Le contenu texte de chaque article a été copié, puis collé dans un document Word dont
l’intitulé respecte l’arborescence du menu d’origine du site web en ligne ;

Figure 28 : articles récupérés selon l’arborescence d’origine

✓ Les différentes images illustrant les articles ont été téléchargées et enregistrées au sein
de chaque dossier, toujours en respectant l’arborescence. Pour certaines images ne
pouvant être enregistrées directement avec le menu « Enregistrer l’image sous… »,
l’utilisation de l’outil « Inspecter » du navigateur Google Chrome permet de retrouver
l’URL de l’image via le code source de la page et de la récupérer directement.

35
 Figure 29 : l’inspecteur de code du navigateur Google Chrome

✓ Les documents téléchargeables ont été simplement téléchargés puis enregistrés au

sein d’un dossier dédié aux documents.
✓ Les liens externes, notamment ceux de l’espace presse, ont été enregistrés dans un
fichier texte avec leurs URL respectives.

d. Choix du template
Le choix du template est une étape importante dans la conception d’un site web avec l’aide
d’un CMS, puisque la nature de ce dernier contribue au rendu global du site ainsi que sa
qualité.

En dehors des aspects purement esthétiques, un template doit être correctement codé par
son concepteur, pour éviter des erreurs pouvant impacter les performances du site, son
référencement ou encore son accessibilité. Il doit être également compatible avec la version
du CMS utilisée, de gérer nativement le responsive design et offrir des possibilités de
customisation natives pour éviter au maximum de modifier manuellement les codes HTML,
PHP ou CSS le constituant. Dans les cas où une retouche manuelle du code s’avère nécessaire,
le template doit être suffisamment documenté pour permettre son adaptation correcte pour
les besoins de l’utilisateur sans générer des erreurs.
Contrairement à WordPress, le CMS Joomla ne possède pas de bibliothèque de templates
intégrée à son interface d’administration. Il appartient donc au développeur de trouver le
template correspondant à ses besoins et de l’installer manuellement depuis le gestionnaire
d’extensions de Joomla [45].
Le réseau Internet abonde de sites spécialisés proposant des templates pour les CMS
populaires, dont Joomla. Une recherche sur Google des termes « templates Joomla 4 »
ramène plus de 10 millions de résultats, et on considère qu’il existe à ce jour plus d’un millier
de templates Joomla [14], répartis entre produits gratuits et solutions premium. Généralement,
les templates premium sont de meilleure qualité, bien documentés, proposent plusieurs
options de configuration et sont régulièrement mis à jour pour corriger les bugs ainsi que les
éventuelles failles de sécurité.
Pour les besoins du prototype développé, en dehors du respect des impératifs techniques
(compatibilité avec Joomla en version 4, responsive design adapté aux vues mobile et tablette,

36
intégration de polices web, compatibilité avec les principaux navigateurs, outils de
customisation intégrés…etc.), plusieurs aspects esthétiques ont été pris en considération,
notamment l’aspect épuré du rendu, la charte graphique par défaut du template qui doit
idéalement se rapprocher au maximum de celle du site actuel, la palette de couleurs ainsi que
le thème général.

Puisqu’une refonte ne signifie pas forcément une reprise à l’identique du site existant, un
benchmark de plusieurs sites hospitaliers de grande notoriété [48] a été mené, pour identifier
les tendances des vitrines web hospitalières et s’en inspirer pour choisir un template
compatible avec les aspirations internationales de l’établissement. Il s’agit notamment de :
✓ La Mayo Clinic : https://www.mayoclinic.org/
✓ The Cleveland Clinic: https://my.clevelandclinic.org/
✓ The Massachusetts General Hospital: http://www.massgeneral.org/
✓ L’Hôpital Américain de Paris : https://www.american-hospital.org/
✓ The Lister Hospital: https://www.hcahealthcare.co.uk/facilities/the-lister-hospital
✓ The Johnson Memorial Health: https://www.johnsonmemorial.org/
✓ The Northwestern Medicine: https://www.nm.org/
Le benchmark réalisé s’est focalisé sur des critères simples concernant l’aspect visuel global,
le haut de page (header), les menus, la page d’accueil ou encore le bas de page (footer). Selon
ce benchmark :
✓ La tendance est à la simplicité, avec des sites épurés et graphiquement aérés à
dominance blanche ;
✓ Les polices et les menus reprennent souvent la couleur dominante du logo ;
✓ Les images et les illustrations sont utilisées avec parcimonie ;
✓ Les sites comportent peu ou pas d’animation ;
✓ Les headers comportent généralement les raccourcis vers les sections clés ;
✓ Certains sites proposent des espaces privés protégés par identifiant et mot de passe,
destinés principalement aux patients pour accéder à des e-services, généralement au
niveau du header ;
✓ Les numéros d’urgence sont souvent mis en valeur sur le header au-dessus de la ligne
de flottaison ;
✓ Les logos sont généralement positionnés à l’extrême gauche ;
✓ Un menu de recherche est généralement intégré au header ;
✓ Le menu général décrit souvent l’établissement, ses équipes et ses prestations ;
✓ La page d’accueil comporte généralement un carrousel dynamique avec les actualités
ou les faits marquants de l’établissement ;
✓ La page d’accueil est souvent organisée en blocs avec un rubriquage présentant les
services clés ;
✓ Les footers reprennent généralement les liens importants sous forme d’un sitemap
éclaté ainsi que les mentions légales ;
✓ Les liens externes, notamment vers les réseaux sociaux, sont mis en valeur
généralement au sein du footer.

37
 Figure 30 : le site web de la Mayo Clinic, classé meilleur hôpital du monde, est un exemple de sobriété

A la lumière de ces résultats, et après avoir parcouru plusieurs sites en ligne dédiés, le
template hospitalier premium Nuron, proposé par l’entreprise spécialisée Joomshaper [49], a
été retenu pour ses nombreuses qualités :

✓ Compatible avec les versions 3 et 4 du CMS Joomla ;

✓ Conçu d’office pour un usage médical et hospitalier ;
✓ Design moderne et épuré, à prédominance blanche ;
✓ Template réactif adapté à l’affichage des terminaux fixes et mobiles ;
✓ Intègre nativement des composants additionnels pour gérer les départements, les
spécialités et les médecins ;
✓ Intègre un moteur de recherche supplémentaire pour trouver un médecin selon des
critères déterminés ;
✓ Supporte 3 variations de thème : hôpital, centre de diagnostic et centre dentaire ;
✓ Intègre le framework Helix Ultimate et SP Page Builder pour la construction intuitive
des pages par glisser/déposer depuis le back-end et le front-end, avec possibilité de
visualiser les changements en temps réel ;
✓ Conçu avec plus de 40 positions pour la publication du contenu ;

38
 ✓ Produit premium avec support sur le long terme pour garantir sa compatibilité avec les
versions futures du CMS et la correction des bugs ;
✓ Documentation détaillée du template pour les besoins de customisation avancée ;
✓ Possibilité de visualiser en ligne un site de démonstration conçu avec le template avant
toute installation, accessible sur le site web de l’entreprise.

Figure 31 : le template Nuron offre des thèmes variés, avec une présentation épurée adaptée aux hôpitaux

Dans le cadre du stage et afin d’encourager ce travail, le responsable de la DIM a bien voulu
acquérir les droits d’utilisation du template, en payant un abonnement personnel d’une durée
limitée à la plateforme Joomshaper, permettant de télécharger l’ensemble des templates du
site pendant la durée de l’abonnement de pouvoir utiliser un template sur un seul site web
publié indéfiniment. L’abonnement donne droit à une clé numérique unique permettant
également d’activer toutes les fonctionnalités du template.

Figure 32 : l’abonnement à Joomshaper permet de bénéficier de la totalité des templates de l’éditeur

39
 e. Choix des modules additionnels

Les différentes extensions disponibles pour le CMS Joomla permettent de rajouter des
fonctionnalités supplémentaires aux sites développés. Toutefois, il faut noter que les
extensions tierces peuvent causer des ralentissements, des problèmes de compatibilité ou
encore exposer le site à des attaques externes, surtout si les extensions ne sont pas mises à
jour régulièrement [43].
Le rapport Website Threat Research Report de Sucuri, publié en 2021, a démontré que les
extensions vulnérables engendrent plus de failles de sécurité que des CMS non mis à jour, et
que 50% environ des piratages des sites web dont le CMS est correctement mis à jour sont
effectivement imputables aux extensions [50].

En tenant compte de ce constat, il est préférable de restreindre au strict minimum le nombre

d’extensions installées, et de privilégier au maximum les fonctionnalités natives du CMS pour
arriver au résultat désiré. Pour les besoins du prototype, et en dehors du template Nuron et
de ses fonctionnalités intégrées (SP Page Builder, gestion des médecins et des spécialités),
aucune extension supplémentaire n’a été incorporée. Joomshaper garantie d’ailleurs la mise
à jour de ses produits, et cette dernière est automatiquement gérée par le gestionnaire du
CMS Joomla.

Figure 33 : il est recommandé de maintenir le CMS et ses extensions à jour

f. Intégration du contenu
Le motif de la refonte du site étant plutôt d’ordre technique et organisationnelle, à savoir la
transition vers un CMS open source et l’internalisation de la maintenance et de la gestion du
site, le contenu du site web actuel a été jugé convenable pour sa réutilisation. Quelques
compléments rédactionnels ont été parfois nécessaires, notamment en guise de texte
d’introduction à certaines sections au sein du prototype.
L’intégration du contenu a été réalisée par étapes :

• Le template Nuron ainsi que ses dépendances ont été installés via le gestionnaire
d’extensions de Joomla, sur une installation vierge du CMS sans données d’exemple.

• L’intégration du logo de l’HCK ainsi que l’adaptation de certaines couleurs du template,

notamment celles des polices et des boutons, ont été réalisées via le menu de

40
 paramétrage du template, qui offre plusieurs possibilités de personnalisation. La
couleur prédominante choisie, au code hexadécimal #25317b (code RGB 37 49 123),
correspond à la couleur du logo de l’HCK en vue de maintenir une identité visuelle
cohérente et de respecter la charte graphique de l’établissement. Les styles CSS,
notamment les tailles des polices et le choix des fontes, n’ont pas dus être modifiés en
raison du rendu satisfaisant par défaut.

Figure 34 : l’outil de paramétrage du template Nuron permet d’adapter le thème du site à la couleur du logo (à
droite)

• Trois menus ont été paramétrés au niveau du CMS :

o Le menu global (main menu), pointant vers la page d’accueil principale du site ainsi
que les quatre sous-menus principaux du site (l’hôpital, médecins et spécialités,
patients et contact). Ce menu a été publié horizontalement au niveau du header,
conformément à la tendance des sites web hospitaliers modernes.
o Un premier menu récapitulatif, « L’hôpital », reprenant quelques éléments pertinents
au niveau du footer ;
o Un second menu récapitulatif, « Patients », également destiné au footer.

• En vue de l’organisation du contenu, trois catégories ont été paramétrées pour les
articles :

o La catégorie « Divers », destinée à tous les articles par défaut ;

o La catégorie « Actualités et évènements », dédiée aux articles homonymes pour leur
affichage en mode blog au sein du site ;
o La catégorie « InfoSanté », regroupant les articles de sensibilisation médicale destinés
aux visiteurs du site pour un affichage en mode blog également.

41
 • Les articles ont été rédigés à partir du contenu initial récupéré et sauvegardé,
comprenant les textes au format Microsoft Word ainsi que les images et illustrations
sauvegardées ou conçues au besoin à l’aide d’Adobe Photoshop. Joomla propose par
défaut un éditeur WYSIWYG intégré, mais le complément SP Page Builder, fourni avec
le template Nuron, offre également une alternative intéressante pour la rédaction des
articles, en spécifiant de manière graphique et intuitive les emplacements des blocs
d’éléments avec la possibilité de déplacer le contenu de la page par glisser/déposer et
d’évaluer en temps réel le résultat. Selon la complexité de la page à rédiger, l’éditeur
natif de Joomla ou le constructeur de page SP Page Builder a été utilisé. Dans tous les
cas, le code HTML correspondant aux textes initiaux a été soigneusement nettoyé avec
l’éditeur de Joomla avant d’être réutilisé, pour éviter tout problème d’affichage [51].

Figure 35 : SP Page Builder permet une création plus intuitive du contenu (ici la page d’accueil du prototype)

• Des éléments additionnels et spécifiques ont été intégrés à certaines pages en fonction
du besoin :

o Un carrousel dynamique pour la page d’accueil, renvoyant vers certaines actualités

sélectionnées ;
o Une cartographie Google Maps de l’établissement pour la page « Nous situer » ;
o Des formulaires dédiés pour les pages « Nous rejoindre », « Prendre un RV », « Nous
contacter », « Réclamations » et pour l’abonnement à la newsletter ;
o Un gestionnaire de documents téléchargeables pour la page « Documents utiles » ;
o Des liens externes YouTube pour les présentations de l’hôpital, de l’université, du
laboratoire et des services aux patients internationaux.

• Quatre spécialités ont été renseignées, à titre de démonstration, au niveau du

composant « Departments » fourni avec le template et sont accessibles depuis la page
d’accueil ainsi qu’au niveau de la section dédiée « Nos spécialités ». Ce composant
permet de renseigner, pour chaque spécialité, son titre, sa description, mais aussi
d’autres éléments comme les symptômes pouvant conduire un patient à la
sélectionner lors d’une prise de RV.

42
• Six médecins fictifs ont été renseignés, toujours à titre de démonstration et avec des
photographies non-contractuelles, au niveau du composant « Specialists » fourni avec
le template. Ce composant permet, pour chaque médecin, de spécifier son identité
complète, sa spécialité, sa sous-spécialité, son genre, sa description ainsi que sa
formation, entre autres métadonnées. Ces dernières sont exploitables par la recherche
multicritère des patients.

Figure 36 : les médecins (fictifs dans le prototype) sont renseignés avec des métadonnées accessibles à la
recherche ou pour la fonctionnalité de prise de RV

• Quatre modules supplémentaires personnalisés ont été conçus avec le gestionnaire de

modules natif de Joomla. Il s’agit :

o Du module rappelant les différents numéros de contact, visualisable en permanence

sur l’ensemble des pages au niveau du header et renvoyant à la page de prise de
contact ;
o Du module d'information patient situé en position droite sur certaines pages du site
et proposant des raccourcis vers les horaires, la prise de rendez-vous, la localisation
de l’hôpital, l’espace presse et le recrutement ;
o Du module dédié à la partie droite du footer, permettant l’affichage des deux menus
récapitulatifs « L’hôpital » et « Patients », ainsi que des logos pointant vers les sites
officiels de l’Université Mohammed VI des Sciences de la Santé et du Laboratoire
National de Référence ;
o Du module dédié à la partie gauche du footer, intégrant les icônes et les liens vers les
réseaux sociaux officiels de l’hôpital ainsi que ses applications mobiles, l’abonnement
à la newsletter, ainsi que deux liens pointant vers les offres de formation et les
mentions légales, ces dernières étant imposées par les lignes directrices relatives à la
conformité des sites web à la loi 09-08.

43
Figure 37 : rendu de la page d’accueil du prototype, sur PC, après intégration du contenu

44
 g. Documentation

Pour assurer la pérennité du travail réalisé, dans l’optique de l’exploiter à des fins de
démonstration ou d’exploitation effective par l’hôpital, quelques documents ont été préparés
à destination des utilisateurs. Comme le prototype a été conçu avec un CMS, il était plus
pertinent de fournir tout d’abord une documentation générique s’appliquant aussi bien au
site réalisé qu’à l’ensemble des solutions conçues avec Joomla. Les spécificités du site
développé ont fait l’objet ensuite d’une documentation complémentaire.
Ont été fournis :

• Le livre électronique « Joomla : les bases de l’administration » : ce manuel permet

d’initier les utilisateurs novices à la manipulation de base du CMS Joomla et
l’exploitation de ses principales fonctionnalités :

o L’administration du site ;
o La gestion des utilisateurs ;
o L’ajout et la modification du contenu ;
o L’insertion de médias ;
o Les menus et leurs liens ;
o La gestion des articles en vedette ;
o La page de contact ;
o Les extensions ;
o La maintenance du site.

• Le guide d’utilisateur du template Nuron : il s’agit d’un manuel en langue anglaise,

réalisé pour les besoins de ce travail à partir de la documentation officielle du
template, accessible librement en ligne. Il contient les chapitres suivants :

o Introduction ;
o Prérequis techniques ;
o Démarrage rapide et site de démonstration ;
o Résolution des problèmes ;
o Extensions ;
o Disposition et positions des modules ;
o Page d’accueil ;
o Pages médicales ;
o Comment changer des éléments.

• Les identifiants pour l’administration du site : il s’agit d’un document comportant le

login et le mot de passe d’administration du back-end du prototype, avec les privilèges
Super Users de Joomla pour pouvoir administrer le site et créer les autres utilisateurs.

• L’ensemble des illustrations utilisées pour la création du site web, en dehors de celles
livrées avec le template. Pour préserver leur qualité maximale, toutes les images ont
été enregistrées sans perte au format PNG.

45
 Figure 38 : la documentation du prototype permet l’exploitation de ce dernier

8. Hébergement du prototype
Pour éviter tout risque de confusion avec le site réel ou d’indexation accidentelle par les
moteurs de recherche, et bien que disposant d’espaces d’hébergement en ligne disponibles,
l’établissement n’a pas souhaité publier le prototype dans l’état et a préconisé son
développement et son test depuis le réseau interne de l’hôpital uniquement.
Le prototype a ainsi été hébergé sur un poste de travail de la DIM, équipé de la suite logicielle
XAMPP identique à celle utilisée pour le développement. Le poste de travail étant connecté
au réseau local de l’HCK, le prototype était donc accessible depuis n’importe quel poste de
travail, tablette ou smartphone connecté en câble ou en Wi-Fi à ce même réseau, via l’adresse
locale http://10.0.2.75/hcktest, l’adresse IP interne du poste étant 10.0.2.75. Une connexion
depuis le réseau internet était toujours possible, à condition d’utiliser un VPN sécurisé
convenablement configuré pour l’accès à distance aux ressources internes.
Après la finalisation du développement, un exécutable d’installation a été développé à l’aide
de l’archiveur WinRAR, qui permet la création d’archives auto-extractibles programmables [52].
L’exécutable permet d’installer automatiquement l’environnement XAMPP avec le prototype
préconfiguré, de lancer le panneau de contrôle de XAMPP après installation pour démarrer
les services Apache et MariaDB, et dépose sur le bureau Windows deux raccourcis permettant
d’accéder directement aux pages d’accueil et d’administration du site.

Figure 39 : le programme d’installation complet du prototype

46
 9. Formation des utilisateurs
La formation des utilisateurs n’a pas ciblé l’exploitation effective du prototype en production,
cette décision revenant ultérieurement à la DIM après une évaluation en interne des
avantages et des risques par rapport à la solution actuelle. Par conséquent, la formation avait
plutôt pour objectif de permettre aux utilisateurs de manipuler correctement le prototype à
des fins d’évaluation.
La formation s’est déroulée en présentiel au chevet des utilisateurs, qui avaient la possibilité
de manipuler directement le prototype, accessible via le réseau local de l’hôpital depuis le PC
l’hébergeant. Des copies de l’installation d’origine ont été réalisées, permettant de réinstaller,
grâce à l’archive auto-extractible, l’environnement à l’identique avant chaque formation pour
permettre aux utilisateurs de manipuler et d’expérimenter sans risques.
La formation a concerné les aspects suivants :
✓ Notions de base concernant la technologie CMS ;
✓ Particularités du CMS Joomla ;
✓ Installation du CMS Joomla sur un poste de travail local avec l’environnement XAMPP ;
✓ Découverte de l’interface d’administration du back-end du site ;
✓ Extensions de Joomla ;
✓ Présentation du template Nuron utilisé pour le site développé ;
✓ Installation, désinstallation et mise à jour des extensions et des templates ;
✓ Utilisation des données d’exemple ;
✓ Création et gestion des menus et des liens ;
✓ Création et gestion des articles, des catégories et du contenu ;
✓ Présentation des profils utilisateurs et leur paramétrage ;
✓ Gestion des flux de publication ;
✓ Gestion des médias ;
✓ Utilisation de la corbeille ;
✓ Optimisations de Joomla pour le référencement ;
✓ Sauvegarde et restauration des fichiers du CMS ;
✓ Sauvegarde et restauration de la base de données avec phpMyAdmin ;
✓ Particularités d’un site multilingue avec Joomla ;
✓ Forums et ressources d’aide en ligne ;
✓ Divers.
La documentation du prototype a été remise aux intéressés comme support de formation.

10. Evaluation
A l’issue de la formation et avec l’aide des supports de formation distribués aux utilisateurs
de la DIM, ces derniers ont été en mesure d’évaluer objectivement le travail réalisé, en vue
d’éprouver l’internalisation du développement et de la maintenance du site web institutionnel
de l’HCK.

47
Les aspects suivants ont été analysés par la DIM, dans le cadre d’une confrontation de la
réalisation avec le cahier de charges et les fonctionnalités exigées :
✓ Le respect de la typologie globale du site d’origine, notamment son aspect vitrine ;
✓ Accessibilité générale du site, ergonomie et facilité d’accès aux services en ligne ;
✓ Prise en charge de langues additionnelles ;
✓ Design global du site et respect de la charte graphique correspondant au logo ;
✓ Optimisation du contenu et son agencement pour les cas d’utilisation identifiés ;
✓ Gestion des flux de publication, depuis la rédaction jusqu’à l’archivage ;
✓ Création et habilitation des utilisateurs du site ;
✓ Qualité rédactionnelle pour le contenu retravaillé, si applicable ;
✓ Compatibilité avec les navigateurs usuels ;
✓ Performances et vitesse d’exécution ;
✓ Adaptation du site aux terminaux mobiles ;
✓ Envoi de mails internes depuis le CMS ;
✓ Conformité W3C [25] ;
✓ Optimisation pour le SEO ;
✓ Prise en charge d’indicateurs statistiques ;
✓ Maintenabilité et évolutivité du site ;
✓ Nécessité de manipulation du code source.
Une autoévaluation du prototype a également été réalisée, selon le même canevas. Les
résultats des deux analyses ont été ensuite consolidés par item.

11. Résultats

a. Rendu global du prototype

Le prototype réalisé respecte bien la nature vitrine du site internet actuel, tout en proposant
une interface sobre, aérée, épurée avec une utilisation raisonnable des couleurs et des
illustrations, à l’instar des portails web des hôpitaux les plus prestigieux du monde. Les
différentes sections sont généralement accessibles en deux clics de souris au maximum, suite
au réarrangement de certains sous-menus. Le rendu mobile est également satisfaisant.

Comparé au site original, certaines modifications volontaires peuvent être notées :

• Au niveau du menu principal, l’ordre des sous-menus a été modifié pour respecter les
tendances actuelles et la logique de navigation identifiée dans les études de cas.
L’hôpital est d’abord présenté, suivi de ses médecins et ses spécialités, puis des
informations utiles aux patients et finalement par les canaux de contact.

• L’appellation des sous-menus du menu principal a été légèrement retouchée en

supprimant les adjectifs possessifs afin d’adopter un ton plus neutre.

48
• La notion de « parcours patient » n’étant pas forcément usuelle auprès de tous les
visiteurs du site, il a été décidé de rattacher les catégories filles de cet élément
directement au sous-menu « Patients ». Ainsi, un usager du site cherchant à connaître
par exemple les modalités d’admission au sein de l’hôpital pourra trouver plus
facilement l’information recherchée, en minimisant le nombre de clics.

• La section « Formation et recherche » n’apparait pas dans le site actuel comme

élément de menu ou de sous-menu, mais uniquement sous forme d’un lien au sein du
footer. Au vu de la nature universitaire de l’établissement et ses liens fonctionnels avec
l’Université Mohammed VI des Sciences de la Santé, un lien dédié a été rajouté au
sous-menu « L’hôpital ».

• La section dédiée à la prise de rendez-vous pour le dépistage de la Covid-19 a été

retirée de la sous-section « Hôpital », cette dernière étant obsolète puisque le
dépistage est réalisé désormais directement au sein du Laboratoire National de
Référence.

• L’organisation polaire des spécialités, telle que figurant au sein du site actuel, n’est pas
intuitive pour les patients et visiteurs. Elle sous-entend que ces derniers sont capables
de reconnaître le rattachement d’une spécialité à un pôle particulier, par exemple de
retrouver la dermatologie en passant par le pôle des spécialités médicales. Pour cette
raison, les spécialités au sein du prototype sont directement accessibles depuis le sous-
menu.

Figure 40 : l’organisation polaire des spécialités n’est pas intuitive pour le grand public

• Les médecins peuvent désormais être mis en valeur, ainsi que leurs sous-spécialités,
leurs formations et leurs expériences. Leur photographie est également intégrable sur
le prototype, ce qui permet d’humaniser davantage le site web et d’établir un
sentiment de confiance vis-à-vis des patients.

49
• La présentation du centre de check-up et de bilan santé, du SAMU et des rendez-vous
de dépistage de la Covid-19 ne figurent plus au niveau du header, afin de le rendre plus
épuré et graphiquement cohérent. Le centre de check-up, qui est désormais une
prestation commune de l’HCK, figure désormais au sein du sous-menu « Médecins et
spécialités ». Le numéro des urgences est rappelé plusieurs fois au niveau de la page
d’accueil, aussi bien au niveau des numéros d’appel du header que du corps de la page
d’accueil. Concernant le dépistage de la Covid-19, le même argumentaire demeure
applicable.

• Les mentions légales ont été rajoutées au sein du sous-menu « Contact », en sus de
leur emplacement au niveau du footer.

• La prise de RV bénéficie, sur le prototype, d’un formulaire permettant d’envoyer une

requête automatisée par courrier électronique à la cellule de programmation de
l’hôpital. Cette fonctionnalité est absente sur le site web actuel.

• La rubrique « Nous situer » dispose dans le prototype d’une cartographie Google Maps
intégrée pour faciliter la navigation jusqu’à l’établissement.

• Le footer dispose sur le prototype d’une possibilité d’abonnement à la newsletter de

l’établissement, contrairement au site actuel.

• Les menus du footer, moins accessibles pour les visiteurs et plus orientés sitemap, ont
été réorganisés tout en évitant les répétitions. Par exemple, la présentation des
médecins et des spécialités est déjà incluse au sein du header et du corps de la page
d’accueil.

• La ligne de flottaison du prototype est optimisée pour afficher directement les

prestations essentielles du site dès le chargement de la page d’accueil.

Figure 41 : le prototype affiche plusieurs éléments au chargement du site sans devoir scroller vers le bas

• Les détails du parcours patient ne sont plus exposés au sein de la page d’accueil, et ont
été remplacés par un texte plus convivial invitant les visiteurs à se rendre aux sections
détaillant les étapes de la prise en charge au sein de l’hôpital.

50
 • Les actualités et les évènements ont été retirés de la page d’accueil comme bloc, vu
que le carrousel les propose dès le chargement de la page. Cette action permet
d’alléger la page d’accueil et donc optimiser les temps de chargement.

• La visite virtuelle 3D de l’établissement n’étant plus disponible, son lien a été retiré de
la page d’accueil.

• Les options proposées aux patients internationaux sur la page d’accueil du site actuel
ne leurs sont pas spécifiques. Un nouveau rubricage a été proposé sur le prototype
pour mettre en valeur la dimension internationale de l’HCK, les nationalités de la
patientèle étrangère d’après le rapport d’activité de l’établissement ainsi qu’une vidéo
en guise de témoignage.

Figure 42 : la vocation internationale de l’HCK est mise en avant sur la page d’accueil du site

b. Respect de la charte graphique

La charte graphique de l’établissement, notamment le choix des couleurs et le thème général,
a été respectée pour obtenir un rendu proche du site actuel et cohérent avec le logo. Les
possibilités de paramétrage du template ont permis de spécifier avec précision les couleurs
de chaque élément du site. Le bleu cyan (code couleur #37c9df), utilisé en page d’accueil du
site actuel, a été remplacé par un violet froid (code couleur #eff0fc), jugé plus cohérent avec
le bleu prédominant issu du logo de l’HCK (code couleur #25317b).

Figure 43 : la cohérence avec le logo est plus évidente sur le prototype

51
 c. Facilité de création et de mise à jour du contenu

Le CMS Joomla est nativement conçu pour faciliter la création et la gestion du contenu.
L’organisation des articles par catégories et l’intégration du flux de publication permet de
répartir les tâches rédactionnelles en fonction des profils, tout en ayant la possibilité
d’archiver du contenu sans pour autant le supprimer définitivement du CMS.

Dans le cas du prototype en question, la création et la gestion du contenu s’en trouve encore
plus facilitée par :
✓ L’intégration du constructeur de pages SP Page Builder Pro, intégré au template, qui
permet la création de tout type de contenu de manière intuitive et sans recours à la
programmation ni à la manipulation du code ;
✓ La possibilité offerte par SP Page Builder Pro d’éditer du contenu directement depuis
le front-end pour visualiser instantanément mes modifications apportées, à l’instar
d’un logiciel de traitement de texte [51] ;
✓ La possibilité d’intégrer du code HTML directement via l’éditeur de texte natif de
Joomla en cas de besoin, pour obtenir une mise en page particulière ou pour créer des
modules personnalisés ;
✓ Les nombreuses positions offertes par le template choisi, permettant de positionner
les modules du site avec un grand degré de liberté ;
✓ Les composants dédiés aux spécialités et aux médecins facilitent grandement le
renseignement et la mise à jour de leurs informations.

Figure 44 : l’édition du contenu depuis le front-end permet une mise à jour plus rapide et intuitive

d. Maintenabilité technique du site

Les prérequis à l’hébergement des sites conçus avec Joomla sont désormais disponibles chez
la majorité des hébergeurs de contenu en ligne, puisque ce CMS exploite la technologie
PHP/MySQL largement utilisée. Plusieurs hébergeurs proposent d’ailleurs l’interface
graphique cPanel [53] pour faciliter l’hébergement et la gestion du contenu qui leur est confié,
et qui gère nativement la configuration des services usuels comme PHP, MySQL, Apache…etc.

52
Il est donc plus simple d’héberger et de maintenir des sites web conçus à base de ces
technologies.

Figure 45 : cPanel permet de gérer facilement les paramètres d’hébergement d’un site Joomla

En termes de maintenabilité du site web lui-même, le CMS Joomla, de par la séparation du

contenu du contenant, permet de maintenir à jour facilement le site web sans altérer ses
données ni son apparence. Par ailleurs, le gestionnaire de mises à jour de Joomla permet
également la maintenance des extensions, dont les templates, pour éviter d’éventuelles failles
de sécurité.
Il est à noter toutefois que les sauts majeurs de version peuvent poser problème en cas de
mise à jour, une majorité d’extension et de templates n’étant officiellement compatibles
qu’avec une version majeure du CMS (par exemple Joomla 3 ou Joomla 4) [54].

La version 4 stable étant relativement récente puisque datant du 17 août 2021, suivie de la
4.1 le 15 février 2022, le support de la branche 4.x sera assuré pour une durée confortable.
Par exemple, la dernière version de la branche 3.x, la version 3.10 publiée le 17 août 2021,
sera supportée officiellement jusqu’au 17 août 2023 [55].
Par rapport au template, l’acquittement des frais d’abonnement permet de profiter des mises
à jour et des développements futurs, mais également d’une assistance technique
professionnelle en cas de problème ou de demandes spécifiques.

53
 12. Discussion

a. Internaliser ou sous-traiter [56] ?

Le développement d’un prototype fonctionnel et conforme aux attentes et exigences de la
DIM prouve en soi la faisabilité de l’internalisation du développement et de la maintenance
du site web institutionnel de l’hôpital, dans des délais raisonnables.
Bien entendu, le développement du prototype a été facilité par l’existant, à savoir un site web
publié, opérationnel et validé, qui a servi de source d’inspiration et de contenu. En l’absence
d’un préalable, le développement aurait sans doute été plus chronophage pour rédiger du
contenu, décider de la structure du site ou encore acquérir ou concevoir l’iconographie et les
illustrations nécessaires.
Au vu des résultats obtenus, l’externalisation du développement d’un site web institutionnel
ne semble plus obéir à des impératifs techniques, mais découlerait plutôt d’un choix
stratégique : sous-traiter les prestations non liées aux soins à un professionnel du secteur pour
pouvoir se focaliser sur son véritable cœur de métier, ou consentir un investissement en
temps, salaires voire en abonnements et acquisitions pour internaliser le développement et
la maintenance.

Si l’établissement est déjà à sa seconde itération en termes d’externalisation, cela signifie qu’il
est conscient du fait que le recours à une entreprise spécialisée est un gage de qualité de
résultat. Pour pouvoir tirer profit des deux approches, une stratégie intermédiaire consisterait
à développer un site web de qualité professionnelle en mode collaboratif avec l’aide d’une
entreprise, avec la condition expresse de choisir un CMS tel que Joomla qui puisse offrir par la
suite toutes les possibilités au client final de gérer, de mettre à jour et de faire évoluer son
propre produit. Le prototype développé dans le cadre de ce travail peut servir de
démonstration, voire de base de développement d’un site professionnel basé sur Joomla.

b. Maintien du référencement
Plusieurs actions ont été menées pour obtenir un bon référencement du site www.hck.ma sur
les principaux moteurs de recherche, notamment Google. Une recherche portant sur les mots
clés « hôpital Casablanca » par exemple positionne l’hôpital juste après le CHU public Ibn
Rochd.
Pour ne pas perdre ce référencement après la refonte et risquer des erreurs de redirection
404, et prenant en considération les différents changements syntaxiques des liens et des
menus, il est important de paramétrer convenablement les option SEO de Joomla, plus
particulièrement la réécriture des URL en clair et de les déclarer aux moteurs de recherche via
leurs fonctionnalités dédiées tels que les outils Google pour les webmasters qui permettent
de soumettre un nom de domaine pour son indexation.

54
Il est également utile d’avoir recours aux redirections 301, pour que les anciens liens
provenant du site précédent et déjà indexés par le moteur de recherche puisse pointer
convenablement vers les nouveaux liens équivalent au même contenu. Par exemple, l’URL
correspondant à la prise de rendez-vous sur le site actuel est
https://www.hck.ma/fr/prendre-rdv/

Tandis que la nouvelle URL au sein du prototype serait, après publication et activation du
support multilingue :
https://www.hck.ma/fr/medecins-et-specialites/prendre-un-rv
Joomla permet la gestion native des redirections 301 [57], après activation du plugin de
redirection au sein de l’interface d’administration. Cette fonctionnalité intégrée permet de
spécifier l’ancienne URL ainsi que la nouvelle, pour assurer la redirection sans devoir éditer
manuellement le fichier .htaccess.

Figure 46 : Joomla gère nativement les redirections 301, directement via l’interface d’administration

c. CMS : des compromis nécessaires

L’expérience du développement du prototype avec le CMS Joomla a objectivé les avantages

d’une telle technologie, notamment le gain de temps, la richesse fonctionnelle et la possibilité
de concevoir un site web de qualité professionnelle sans posséder nécessairement une
expertise en codage.

Toutefois, le développement avec un CMS impose l’acceptation de certaines limites :

• Le résultat obtenu ne sera pas forcément unique, dans la mesure où le template utilisé
peut être exploité par un autre site web, y compris celui d’une entreprise concurrente ;

55
• Etant à code source ouvert, un CMS comme Joomla peut être parfaitement et
légalement modifié en profondeur par le propriétaire du site pour l’adapter à ses
besoins spécifiques, au-delà du simple paramétrage permis par les fonctionnalités de
customisation. En modifiant le code, les mises à jour du CMS ne pourront plus être
appliquées, exposant le site customisé à des failles de sécurité potentielles et des bugs
non corrigés [43].

• Plusieurs sites simples ne nécessitent pas des fonctionnalités avancées (plugins,

redirections, compléments…etc.). Or, tous les CMS usuels dont Joomla comportent des
dizaines de fonctionnalités activées par défaut qui risquent de ne jamais être utilisées
et qui alourdissent inutilement le site web développé.

• Tous les sites développés avec le même CMS présentent potentiellement les mêmes
failles de sécurité en attendant de les découvrir et de les corriger. La découverte d’une
vulnérabilité 0-day [58] (méconnue des concepteurs et n’ayant pas encore de correctif)
par un pirate informatique pourrait mettre à mal l’ensemble des sites concernés.

• Les CMS, en raison de leur caractère générique, se prêtent moins bien au

développement d’interfaces informatiques avec d’autres éléments des systèmes
d’information dont peut disposer l’établissement. L’HCK dispose à titre d’exemple du
système d’information hospitalier DxCare de Medasys, qui gère plusieurs aspects
hospitaliers dont la planification des rendez-vous médicaux via le module DxPlanning.
Il peut être judicieux d’interfacer ce module avec le site web de l’hôpital pour proposer
automatiquement aux patients les créneaux disponibles pour la prise de rendez-vous.
Une telle interface ne peut être gérée par un CMS, et il faudra recourir à un
développement dédié pour assurer cet interfaçage qui risque par ailleurs de devenir
obsolète au gré des mises à jour du CMS, notamment en cas de passage vers une
nouvelle version majeure.

Figure 47 : l’outil de planification de l’hôpital ne peut pas être interfacé directement avec le site web

56
 • Finalement le recours aux CMS a instauré une certaine méthodologie de travail auprès
des webmasters, pouvant aboutir, au nom de la standardisation, à une diminution de
leur créativité et de l’originalité de leurs conceptions.

d. La question de la sécurité
Comme tout produit informatique, les CMS sont soumis aux risques d’intrusion, de
détournement ou de piratage. S’agissant d’un établissement hospitalier comme l’HCK,
l’intrusion illégale dans un site peut avoir des conséquences désastreuses sur la confidentialité
des données confiées par les patients, telles que les informations nécessaires à la prise de
rendez-vous. Un site rendu inopérant, par exemple suite à une attaque par déni de service
DDoS [59], peut entraîner des répercussions fâcheuses en termes d’image de marque.

La question de la sécurité est donc cruciale et doit être prise en considération lors du
développement et de l’hébergement du site web, surtout avec les CMS qui donnent
l’impression, à tort, de décharger le webmaster de l’obligation de s’occuper de la sécurité de
son site.
Si c’est en partie vrai, dans le sens où l’éditeur du CMS s’occupe de publier des mises à jour
régulières pour sécuriser son produit, une mauvaise manipulation des fichiers .htaccess ou de
la base de données, l’installation d’une extension vulnérable, un changement manuel du code
ou un hébergement défaillant peuvent compromettre malgré toute la sécurité du site. Un
minimum de connaissances en sécurité informatique est donc requis en cas d’internalisation
du développement et de la maintenance du site web [43].

e. Préserver les habitudes des utilisateurs du site

La refonte des sites web, spécialement ceux proposant des services en ligne, ne doit pas
dérouter l’utilisateur au point de remettre en question sa fidélité. Dans le cas de l’HCK qui
dispose d’un portail internet décent, la refonte doit être douce et non disruptive, au risque de
bouleverser l’expérience utilisateur. C’est l’approche adoptée pour le développement du
prototype, qui a été conçu sur la base du site actuel.
Par ailleurs, un site web proposant des services du genre newsletter ou un espace patient
privé en ligne doit préserver, malgré la refonte, les données et les identifiants pour assurer la
continuité de service sans interruption. Cet impératif n’a pas concerné notre prototype vu que
le site actuel de l’HCK ne propose pas encore de tels services aux utilisateurs.

f. Sources multimédia et droits d’auteur

Les illustrations, images, vidéos et autres ressources multimédias sont nécessaires au bon
rendu d’un site web et à l’expérience utilisateur. Toutefois, avoir accès à des ressources
multimédia de qualité en toute légalité et sans crainte de violer des droits d’auteur nécessite
souvent le passage obligé par des services spécialisés en ligne, permettant l’acquisition de
fichiers multimédias libres de droit, moyennant un abonnement dont le prix peut devenir

57
rapidement prohibitif. Contrairement à une agence de marketing digital qui peut rapidement
amortir son investissement en le mutualisant entre clients divers, un établissement de type
hôpital devra supporter l’ensemble des coûts sans possibilité de monétiser sans
investissement.
De même, un site professionnel ne peut pas reposer uniquement sur des supports tiers, mais
doit également proposer du matériel original provenant de son activité (photographies des
locaux, des installations, des médecins…etc.). Un budget conséquent pour s’équiper en
matériel adéquat pour les prises de vue, de suites logicielles professionnelles pour le
traitement et le montage multimédia (DAO) et pour recruter du personnel qualifié peut
s’avérer rapidement indispensable.

g. Nécessité de ressources humaines qualifiées et pérennes en interne

Le choix de l’internalisation requiert la présence d’une équipe dédiée, correctement formée
et maîtrisant plusieurs aspects dont le web design, les technologies CMS, le codage
HTML/PHP/CSS pour la création de contenu original, la rédaction, la production de documents
multimédia ou encore la sécurité.
Dans le cas d’un hôpital, l’internalisation de la gestion du site web requiert une attention
particulière de la Direction des Ressources Humaines à l’encontre de ces profils, pour les
fidéliser, les motiver et assurer leur backup en cas de désistement.
Cette contrainte ne concerne pas les marchés de prestation de service, dans la mesure où le
prestataire a l’obligation d’assurer à son niveau ses engagements contractuels et donc de se
pourvoir convenablement en compétences.

h. Open Source, oui, mais pas sans frais

Bien que le CMS Joomla soit entièrement gratuit et open source, une erreur communément
commise dans le domaine du logiciel libre consiste à négliger les autres coûts associés aux
prestations de services ou aux investissements.

L’expérience de la refonte du site web de l’HCK a objectivé la nécessité de plusieurs dépenses

connexes, dont l’acquisition du template, l’abonnement à une banque d’images, l’achat d’une
licence perpétuelle ou d’un droit d’utilisation annuel d’une suite de DAO, la masse salariale de
l’équipe projet…etc.

Des besoins de développement web spécifiques, dont les interfaces avec des systèmes
d’information tiers, peuvent également s’imposer à l’établissement désireux de proposer des
services intégrés (paiement en ligne, agendas médicaux partagés) et nécessiter des licences
payantes ou des frais de développement.

La prise en compte de l’ensemble de ces frais doit entrer en considération lors de l’estimation
du coût réel du développement interne versus l’externalisation.

58
 i. La nécessité de la manipulation du code

Les éditeurs WYSIWYG tiers ou ceux intégrés nativement aux CMS entretiennent l’idée de la
capacité de développer un site professionnel sans recours au codage.
Si les CMS modernes ont bien été développés dans cette optique, le codage demeure
indispensable dès lors qu’il s’agit d’un développement spécifique de modules ou de
fonctionnalités, de modifier un template au-delà de ses possibilités de personnalisation, de
réussir une mise en page particulière ou simplement pour proposer un contenu original [60].
Des connaissances de base en langage HTML, PHP et CSS demeurent malgré tout
indispensable dès que le niveau de finition l’exige.

13. Conclusion

Au terme de ce stage, la pertinence de l’internalisation du développement et de la

maintenance du site web institutionnel de l’HCK demeure discutable, dans la mesure où les
deux stratégies d’internalisation et d’externalisation de la prestation semblent toutes les deux
envisageables.

A titre d’exemple, le site web de l’Hôpital Américain de Paris a été conçu en collaboration avec
l'agence Spintank et réalisé par OWS, tel que précisé dans sa section de crédits.
L’externalisation de la conception de son site internet ne doit souffrir d’aucun complexe et
traduit bien au contraire une prise de conscience de l’entité de la nécessité de recourir à des
spécialistes du domaine pour s’affranchir des contraintes et des insuffisances internes,
notamment lorsqu’il ne s’agit pas de son cœur de métier.

L’expérience de l’HCK en matière de site web a démontré la maturité de la structure, qui a su

confier le sien à des entreprises spécialisées ayant réussi à proposer des produits de qualité,
bien référencés, n’ayant jamais subi d’incident technique majeur ni d’intrusion et ayant mené
à bien leur mission de faire connaître l’établissement ainsi que ses prestations à une large
patientèle nationale et internationale, comme en attestent les statistiques du site web.

Certes, la dernière mouture développée avec le framework Django présente aujourd’hui de

nombreux inconvénients et génère une frustration palpable au sein de la DIM, mais permet
tout de même à l’établissement de disposer d’une vitrine fiable et hautement disponible.

Le développement du prototype a largement démontré la faisabilité technique de

l’internalisation ainsi que la supériorité du CMS Joomla sur bien des points. Ce POC a
également eu le mérite de rappeler que tout développement interne demeure tributaire de
nombreux prérequis, dont des investissements connexes non négligeables et des équipes
disponibles, dédiées et engagées, tout en déplaçant les risques et les responsabilités vers le
client.

59
Une solution hybride semble aujourd’hui l’alternative à recommander pour l’HCK, qui peut
exploiter le prototype en sa disposition pour demander une refonte de qualité professionnelle
à une agence spécialisée, en exigeant de cette dernière d’exploiter un CMS open source,
potentiellement Joomla au vu de l’argumentaire proposé.

L’HCK pourra bénéficier ainsi d’un produit original, muni d’un template personnalisé et conçu
sur mesure, sans perdre pour autant les avantages d’un CMS sécurisé, évolutif et
complètement administrable par les équipes internes.

Un support technique optionnel par ladite agence, à raison de quelques jours-hommes par an,
est également recommandé pour s’assurer une maintenance correcte et des évolutions
profondes en cas de besoin.

Finalement, et dans le cadre de la promotion interne du personnel de l’hôpital, une formation

diplômante approfondie au CMS choisi et aux techniques de programmation web serait un
atout indéniable pour améliorer le rendement des équipes, les motiver et maintenir un site
de qualité à la hauteur des ambitions de l’Hôpital Universitaire International Cheikh Khalifa.

60
 Références bibliographiques

[1] Hôpital Universitaire International Cheikh Khalifa. (2018). Hôpital Universitaire International Cheikh

Khalifa Ibn Zaid. https://www.hck.ma/fr/

[2] Hôpital Universitaire International Cheikh Khalifa. (2021). Rapport d’activité (No 2021).

[3] Présentation de l’Université Mohammed VI des Sciences de la Santé. (2022, 14 avril). Université

Mohammed VI des Sciences de la Santé - UM6SS. https://www.um6ss.ma/

[4] Hôpital Universitaire International Cheikh Khalifa. (2010). Manuel d’organisation interne.

[5] What is XIBO ? (2021). XIBO Open Source Digital Signage. https://xibo.org.uk/get-xibo

[6] WordPress.com. (2021, 18 novembre). Créateur de sites Web WordPress | Créez le site Web de vos

rêves — WordPress.com. Go WordPress – WordPress.com. https://wordpress.com/fr/createur-de-site-

web/

[7] Django overview | Django. (2022). Django. https://www.djangoproject.com/start/overview/

[8] Application officielle de l’Hôpital Universitaire International Cheikh Khalifa. (2018). Google Play

Store. https://play.google.com/store/apps/details?id=mlu.smarteez.hck&hl=fr&gl=US

[9] Django at a glance | Django documentation | Django. (2022). Django.

https://docs.djangoproject.com/en/4.0/intro/overview/

[10] Le framework Django. (2022). Pilot Systems. https://www.pilotsystems.net/technologies/python/django

[11] Brewster, C., Brewster, C., Brewster, C., & Brewster, C. (2020). 9 Examples of Companies Using

Django in 2022 | Trio Developers. Trio Developers. https://www.trio.dev/blog/django-applications

[12] Welcome to Python. (2022, 3 juin). Python.Org. https://www.python.org/

[13] M. (2019, 16 juillet). What is Django CRM and it’s advantages. Micropyramid - MicroPyramid.

https://micropyramid.com/blog/what-is-django-crm-and-advantages/

[14] Comparatif de CMS 2022 : les meilleurs systèmes open source. (2021, 15 décembre). IONOS

Digitalguide. https://www.ionos.fr/digitalguide/hebergement/cms/comparatif-des-meilleurs-cms/

[15] Shutterstock. (2022). Images de stock – Photos, images vectorielles et illustrations pour vos projets

créatifs. https://www.shutterstock.com/fr/

[16] B. (2018). Ligne de flottaison - Définitions Marketing » L’encyclopédie illustrée du marketing.

copyright Définitions Marketing - Boitmobile. https://www.definitions-marketing.com/definition/ligne-

de-flottaison/

61
[17] La GED - Gestion électronique des documents - Infos et devis. (2020). archivage-numerique.fr.

https://www.archivage-numerique.fr/ged

[18] cms — Quel est le flux de travail de publication idéal pour un CMS d’entreprise? (2011, 4 octobre).

web-dev-qa-db-fra.com. https://www.web-dev-qa-db-fra.com/fr/cms/quel-est-le-flux-de-travail-de-

publication-ideal-pour-un-cms-dentreprise/956878020/

[19] V. (2010, 9 décembre). Pyramide inversée et méthode rédactionnelle. Digitalneed.

https://bit.ly/3x6L6O3

[20] Concevez votre site web avec PHP et MySQL. (2019). OpenClassrooms.

https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql

[21] MariaDB vs. MySQL vs. PostgreSQL Comparison. (2022). System Properties Comparison MariaDB vs.

MySQL vs. PostgreSQL. https://db-engines.com/en/system/MariaDB%3BMySQL%3BPostgreSQL

[22] Rédaction, L. (2019, 10 janvier). LAMP (Linux Apache MySQL PHP) : définition. LAMP (Linux

Apache MySQL PHP) : définition. https://www.journaldunet.fr/web-tech/dictionnaire-du-

webmastering/1203347-lamp-linux-apache-mysql-php-definition/

[23] An image format for the Web | WebP |. (2022). Google Developers.

https://developers.google.com/speed/webp

[24] Qu’est-ce qu’un test CAPTCHA ? - Aide Administrateur Google Workspace. (2022). Google

Workspaces.

https://support.google.com/a/answer/1217728?hl=fr#:%7E:text=Le%20CAPTCHA%20(acronyme%20

de%20l,authentification%20par%20question%2Dr%C3%A9ponse%22

[25] Initiative, W. W. A. (2020). Vue d’ensemble des standards d’accessibilité du W3C. Web Accessibility

Initiative (WAI). https://www.w3.org/WAI/standards-guidelines/fr

[26] Google Analytics Academy. (2022). Google Analytics.

https://analytics.google.com/analytics/academy/course/6

[27] Total number of Websites - Internet Live Stats. (2022). Internet Live Stats.

https://www.internetlivestats.com/total-number-of-websites/

62
[28] Page statique - page dynamique - Site statique - Site dynamique. (2022, 9 février). Imedias.

https://www.imedias.pro/cours-en-ligne/web-internet/page-web-page-internet/pages-statiques-et-

dynamiques/#:%7E:text=Diff%C3%A9rence%20entre%20une%20page%20Web,et%20page%20Web

%20dynamique%20(PHP)&text=Une%20page%20statique%20est%20affich%C3%A9e,l’%C3%A9cra

n%20par%20le%20Navigateur

[29] Rédaction, L. (2019, 10 janvier). WYSIWYG (What You See Is What You Get) : définition, traduction.

Journal du net. https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203303-wysiwyg-

what-you-see-is-what-you-get-definition-

traduction/#:%7E:text=D%C3%A9finition%20du%20mot%20WYSIWYG,la%20saisie%20d’un%20do

cument

[30] Les avantages d’un site dynamique. (2020). Olloweb.com. https://www.olloweb.com/fr/creation-site-

internet/avantage-site-dynamique.html

[31] Kinsta. (2020, 20 octobre). Qu’est-ce qu’un système de gestion de contenu (CMS) ?

https://kinsta.com/fr/base-de-connaissances/systeme-gestion-contenu/

[32] A. (2017, 30 juin). Pourquoi utiliser un CMS (Content Management System) pour son site internet ?

Agence-Web Cubis-Helios. https://agence-web.cubis-helios.com/pourquoi-utiliser-un-cms-avantages-

inconvenients-wordpress-drupal/

[33] Working together for free software. (2022). Free Software Foundation. https://www.fsf.org/about/

[34] L’Open Source, qu’est-ce que c’est ? (2019). Red Hat. https://www.redhat.com/fr/topics/open-

source/what-is-open-

source#:%7E:text=Un%20logiciel%20Open%20Source%20est,l’examen%20par%20les%20pairs

[35] Editorial Team. (2022, 25 avril). What are the Pros and Cons of WordPress ? Why Should You Use it?

CyberChimps. https://cyberchimps.com/blog/pros-and-cons-of-wordpress/

[36] Quels sont les exemples de sites renommés qui utilisent Joomla ? (2022). Alphadesign.

https://alphadesign.fr/blog/42-news-joomla/591-quels-sont-les-sites-renommes-qui-utilisent-

joomla.html

[37] Rafal, O., & Rafal, O. (2008, 16 janvier). Sun rachte MySQL pour 1 Md$. LeMondeInformatique.

https://www.lemondeinformatique.fr/actualites/lire-sun-rachete-mysql-pour-1-md$-25084.html

63
[38] Staff, C. C. (2022, 31 mars). Oscar Who ? We’re Celebrating the Winners of the 2021 CMS Critic

People’s Choice Awards. CMS Critic. https://www.cmscritic.com/oscar-who-were-celebrating-the-

winners-of-the-2021-cms-critic-peoples-choice-awards

[39] Joomla : The Pros & Cons. (2022). Cocoon. https://createdbycocoon.com/post/joomla-pros-cons

[40] Our history. (2018, 24 février). Drupal.org. https://www.drupal.org/about/history

[41] Crochet-Damais, A. (2014, 21 mars). Les CMS open source utilisés par les grands sites web français.

Journal du Net. https://www.journaldunet.com/solutions/dsi/1135383-les-cms-open-source-utilises-par-

les-grands-sites-web-francais/

[42] Varty, J. (2022, 12 mai). Drupal Pros and Cons. Agility CMS.

https://agilitycms.com/resources/posts/drupal-pros-and-cons/

[43] Osborne, C. (2022, 29 avril). Les plugins vulnérables, plaie des CMS. ZDNet France.

https://www.zdnet.fr/actualites/les-plugins-vulnerables-plaie-des-cms-39941291.htm

[44] Groupware Software | Outils de collaboration en ligne | Essayez-le gratuitement ! (2022, 24 février).

EGroupware. https://www.egroupware.org/fr

[45] WordPress vs Joomla : CMS in comparison. (2021, août 10). IONOS Digitalguide.

https://www.ionos.com/digitalguide/hosting/cms/wordpress-vs-joomla/

[46] XAMPP Installers and Downloads for Apache Friends. (2022). Apache Friends.

https://www.apachefriends.org/fr/index.html

[47] GlooMaps Reviews 2022, Pricing, Features, Pros, Cons. (2022). Truely. https://truely.com/sitemap-

generators/gloomaps

[48] Newsweek. (2022, 2 mars). NEWSWEEK RELEASES 2022 WORLD’S BEST HOSPITALS LIST. PR

Newswire. https://www.prnewswire.com/news-releases/newsweek-releases-2022-worlds-best-hospitals-

list-301494203.html

[49] JoomShaper. (2022). Nuron - Multipurpose Joomla Medical & Healthcare Template.

https://www.joomshaper.com/joomla-templates/nuron

[50] SUCURI. (2022). 2021 Website Threat Research Report. https://sucuri.net/wp-

content/uploads/2022/04/22-sucuri-2021-hacked-report.pdf

[51] JoomShaper. (2022b). SP Page Builder - #1 Drag and Drop Joomla Page Builder Extension.

https://www.joomshaper.com/page-builder

64
[52] A. (2018, 11 décembre). How to Create SFX Archive with WinRAR and 7-Zip. iSunshare Blog.

https://www.isunshare.com/blog/how-to-create-sfx-archive-with-winrar-and-7zip/

[53] cPanel. (2022). Hosting Platform of Choice. https://cpanel.net

[54] Changements importants dans le processus de mise à jour. (2021, 18 octobre). Joomla ! FR.

https://www.joomla.fr/actualites/changements-importants-dans-le-processus-de-mise-a-jour

[55] Historique des versions - Joomla ! Documentation. (2022). Joomla.Org.

https://docs.joomla.org/Category:Version_History/fr

[56] A. (2020, 27 octobre). Internaliser ou externaliser la création de votre site web ? Guide Webdesign.

https://www.guide-webdesign.be/internaliser-ou-externaliser-la-creation-de-votre-site-web/

[57] Redirections 301 : Redirection Joomla vs .htaccess - Checklist SEO pour Joomla. (2017, 18 juin).

Alpha Design. https://alphadesign.fr/joomla/checklist-seo-pour-joomla-referencement-

joomla/redirections-301-pour-les-anciennes-urls.html

[58] F. (2022). Zero-day : qu’est-ce que c’est ? Futura. https://www.futura-

sciences.com/tech/definitions/informatique-zero-day-4029

[59] Qu’est-ce qu’une attaque DDoS ? (2022). Cloudflare. https://www.cloudflare.com/fr-

fr/learning/ddos/what-is-a-ddos-attack/

[60] Falaize, M. B. E. C. (2021, 27 avril). Lancer son propre site internet : utiliser un CMS ou coder pour un

site sur mesure ? Blog Specialist-Wanted. https://blog.specialist-wanted.com/me-faire-connaitre-sur-

internet/lancer-son-propre-site-internet-utiliser-un-cms-ou-coder-pour-un-site-sur-mesure

65
66
67
 Annexes

Site web officiel de l’HCK

Installation de Joomla 4

Installation de XAMPP pour

Windows

Autoformation Joomla

Manuel du template Nuron

Manuel de SP Page Builder Pro

GlooMaps

68