L3 IC - E5pd1ic5 Université Paul Valéry MTP III

Promotion 2018-2019
Mail : victor.pelletier@gmail.com

Conception Site Web

Dynamique

DOSSIER DE
CONCEPTION

L'équipe
du projet
APEMA

Développeur Graphiste
Julien Beillon Olivia Chouillou

Rédactrice Développeuse Chef de projet

Camille Morin Pauline Miranda Victor Pelletier

Tableau de bord : https://trello.com/invite/b/TAB6mFKT

/042da9436e04eea83000d8a6befd068d/gestion-de-projet-web-l3
Sommaire : 0

Mémento des accès et documents du projet 2

Introduction : 3
Descriptif rapide du projet : 3
Présentation du CDC : 3

Définition des contextes/Présentation du projet 4

1.1 Présentation du projet / des contextes / du commanditaire 4
1.2 La commande : 4

2.Stratégie de communication 5
2.1 Problématiques 5
2.2 Objectifs 5
2.3 Buts à atteindre 6

3. CIBLES / CONCURRENCES / ANALYSE DE L’EXISTANT 7

3.1 Analyse de l’existant 7
Le site Internet 7
La communication Papier 8
3.2 Concurrence 8
3.3 Connaissances des cibles 9
3.3.1 Définition des différentes cibles 9
3.3.2 Attentes/besoins/valeurs partagées 9

4. ARBORESCENCE & ORGANISATION DU SITE 11

4.1 Contenu et arborescence 11
4.2 Organisation des contenus, story-board (graphique et synthèse du travail du
rédacteur) 12
4.2.1 Présentation de l’information et mise en page 12
4.2.2 Principes de navigations et organisations des contenus 13

5. PRINCIPES ESTHÉTIQUES 14
5.1 Stratégie de communication graphique 14
5.2 Maquettes graphiques 15
5.3 Charte graphique 16

6. FONCTIONNALITÉS AVANCÉES 17
6.1 Mise en place d'une newsletter 17
6.2 Installation d'un module de donation par CB 17
6.3 Mise en place d'une page facebook interconnectée avec la partie actualités 17

7. ERGONOMIE, SÉCURITÉ ET PERFORMANCE 18

 7.1 Optimisation de l'ergonomie. 18
7.2 Gestion de la sécurité 18
7.3 Gestion des performances 19

8. MISE EN PLACE ET ACCOMPAGNEMENT 20

9. RÉTROPLANNING 20

10. BUDGET 21

1
Introduction :

Descriptif rapide du projet :

Le projet consiste à réaliser un site web pour une association qui donne un accès à
l’éducation aux enfants malades et accidentés. Il faut prendre en compte les problématiques
de rédaction et d'ergonomie pour offrir une bonne expérience utilisateur mais aussi mettre
en place une charte graphique adaptée au secteur.

Présentation du CDC :
Dans une première partie nous allons présenter le projet en évoquant le contexte dans
lequel celui-ci s’inscrit mais aussi le commanditaire et son domaine d’activité.
Puis nous allons définir précisément la commande pour délimiter notre prestation.

Dans une seconde partie nous allons traiter de notre stratégie de communication en listant
les différents problèmes rencontrés par notre commanditaire et ceux liés à la réalisation de
notre projet. Nous déterminerons ensuite les objectifs de la création de notre site web et les
résultats attendus.

Dans une troisième partie nous allons analyser les cibles existantes et potentielles et les
concurrents de notre commanditaire.

Une fois ces trois grandes parties réalisées nous allons réfléchir à l’arborescence et
l’organisation du site .
Puis nous aborderons la stratégie de communication graphique avec les grands principes
esthétiques. Pour cette étape nous fournirons une maquette graphique de notre site web et
un résumé de la charte graphique.

Enfin le CDC comprendra aussi un Gantt, la présentation de notre devis et d’autres

rubriques spécifiques : fonctionnalités avancées, ergonomie et sécurité, mise en place et
accompagnement.

3
 1.Définition des contextes/Présentation du projet

1.1 Présentation du projet / des contextes / du commanditaire

Notre projet est la refonte du site de l’association APEMA qui est notre commanditaire.

L’APEMA signifie Association Pour Enfants Malades ou Accidentés. Cette association vise à
fournir un accès à l’éducation aux enfants qui n’ont pas la possibilité de se déplacer pour
aller à l’école.

L’association donne des cours à domicile mais aussi en établissement hospitalier (clinique,
hopital). L’association est portée par des enseignants bénévoles qui transmettent des cours
mais aussi un soutien psychologique.

L’association existe depuis 32 ans et doit répondre à de multiples sollicitations. Après une
première mise en place de site web dans les années 2000, l’association n’a pas su faire
évoluer son site et se trouve aujourd’hui confrontée à un déficit de communication.
En nous sollicitant, elle espère remettre à niveau ses outils et améliorer son fonctionnement
global pour pouvoir répondre à un plus grand nombre de situations notamment en périphérie
de Montpellier où elle rencontre un déficit d’intervenants.

1.2 La commande :
Le commanditaire nous demande de faire la refonte de son site web.

Plus précisément, il nous demande :

● de repenser la charte graphique en intégrant une proposition de logo

● de proposer un contenu rédactionnel,
● de définir l’organisation et la navigation au sein du site
● de réaliser techniquement la mise en oeuvre du site internet en utilisant le système
de gestion de contenu Wordpress.

Il nous demande d’être vigilant sur les aspects suivants :

● Veiller à ce que le site soit parfaitement responsive

● Soigner le volet référencement naturel.

Notre intervention parviendra à son terme lorsque le site sera mis en ligne sur le serveur
prévu à cet effet et que les administrateurs du site auront reçu une formation pour assurer
sa mise à jour.

4
2.Stratégie de communication

2.1 Problématiques
Pour réussir la mise en place de notre stratégie de communication, nous devons prendre en
compte les problématiques suivantes

Les problématiques intrinsèques à notre commanditaire :

● L’association a du mal à recruter des intervenants, notamment en périphérie de

Montpellier
● L’association doit faire face une saisonnalité des demandes d’intervention,
notamment avec une augmentation à l’approche des examens.
● Le site actuel n’est pas très reluisant et dessert d’une certaine manière l’image de
l’association. Cela est sans doute un frein au recrutement de nouveaux intervenants

Les problématiques liées à notre équipe projet :

● La période de réalisation pour ce projet est la fin d’année avec une dead-line au 06
janvier 2019. Cette période est complexe pour coordonner une équipe car elle
recouvre les partielles et les fêtes de fin d’année. Il faudra vraisemblablement que
l’équipe fonctionne en mode asynchrone et à distance pour avancer efficacement.
Des outils comme trello devrait faciliter le partage des tâches et le suivi de projet.

2.2 Objectifs

L’objectif principal est d'accroître la visibilité de l'association en lui donnant une image
rassurante et attractive.

L’objectif secondaire est de faciliter le recrutement des enseignants bénévoles en intégrant

en particulier le fait que le besoin d’enseignants qui peuvent se déplacer en périphérie est
important.

Enfin, bien que ce ne soit pas le plus important aux yeux de notre commanditaire, la refonte
du site devrait permettre une augmentation des donations pour mieux répondre à l’objet de
l’association.

5
2.3 Buts à atteindre

Les résultats attendus sont qualitatifs.

Le site de l’APEMA est clairement obsolète, les membres de l’association veulent un site
plus moderne dont le but premier sera d’augmenter la visibilité de l’association.
Nous procédons à la refonte du site internet pour qu’il inspire confiance en offrant une bonne
expérience utilisateur aux futurs adhérents et aux futurs bénévoles.

Les buts à atteindre sont :

A moyen terme :
- une augmentation des visites sur le site internet de l’Apema. Compte tenu de
l’absence de statistiques sur le site actuel, il est difficile de proposer un objectif chiffré
à ce stade du projet.
- une augmentation des bénévoles de l’association

A plus long terme :

- une augmentation des donations

6
3. CIBLES / CONCURRENCES / ANALYSE DE
L’EXISTANT

3.1 Analyse de l’existant

Le site Internet

L'association APEMA Montpellier dispose déjà d'un site internet qui est consultable à
l'adresse : ​http://apema.montpellier.free.fr/

Le site est ancien, voire très ancien. Sans pouvoir le dater avec certitude, nous savons qu'il
date d'avant 2005 puisque les dernières informations publiées sont datées de cette année.
Le style graphique laisse penser que ce site a été conçu avant l'an 2000.

D'ores et déjà, nous pouvons relever l'absence d'un DNS véritablement propre à
l'association puisque le site est hébergé sur une solution gratuite proposée par le
Fournisseur d'Accès Internet Free. Cette solution n'est pas professionnelle et n'est pas
idéale pour bâtir une solution pleinement efficace.

D'un point de vue technique, l'analyse rapide du code source montre qu'il s'agit d'un site
statique créé à "l'ancienne" avec une mise en page à l'aide de tableaux sans utilisation de
CSS. Il a été développé en HTML 4.01 Transitional. La navigation est articulée autour d'un
système de frames totalement dépassé aujourd'hui.
En résumé, le site est totalement obsolète et rien n'est récupérable d'un point de vue
technique.

D'un point de vue ergonomique, le style est très vieillot et rien ne laisse penser que les
informations encore diffusées sont à jour. Le moins qu'on puisse dire est que le site ne met
pas en confiance et peut même constituer un facteur de rejet vis à vis de l'association tant
l'expérience utilisateur est déplorable. Aucun logo n'est visible sur le site et il ne semble pas
y avoir véritablement de cohérence graphique.
En résumé, d'un point de vue ergonomique, tout est à construire.

D'un point de vue référencement, le site est bien référencé sur des requêtes évidentes de
type "APEMA" ou "APEMA Montpellier". Il est encore bien classé dès que la problématique
est localisée sur Montpellier avec des requêtes de type "Enseignement enfants malades
Montpellier" mais disparaît assez vite des premières pages de résultat sur des requêtes
génériques de type "Enseignements enfants malade" ou Enseignement à l'hôpital".
Quoi qu'il en soit, si c'est possible, il faudra veiller à placer une redirection permanente de
type 301 sur le site actuel afin de rediriger le traffic et le référencement existant vers le
nouveau site. L'opération se fera en déposant un fichier htaccess à la racine du site existant.

7
La communication Papier

En parallèle, l'association nous a remis également un dépliant papier de type 3 volets

recto-verso qui présente sommairement l'activité de l'association. Ce dépliant n'est guère
"sexy" et nous ne sommes pas sûr qu'il soit très efficace, d'autant plus qu'il génère de la
confusion puisque ce dépliant fait mention d'un autre site internet à l'adresse :
www.apema34.jimdo.fr
Ce site n'existe plus et ne renvoie pas vers le nouveau site.
Ce dépliant est donc à abandonner de toute urgence, au profit d'un dépliant plus moderne
qui soit en cohérence en terme de contenu et de ligne éditoriale avec le futur site web de
l'association.

En conclusion, selon notre point de vue, l'association ne dispose plus d'outils véritablement
opérationnels pour assurer une communication de base. D'ailleurs, les échanges avec les
responsables de l'association nous ont confirmé que le site internet actuel n'était plus mis à
jour et pour ainsi dire plus utilisé.

3.2 Concurrence

La notion de concurrence n'a pas de véritable sens dans le milieu de l'aide à l'enseignement
aux enfants malades. En général, nous y rencontrons plus de solidarité que de concurrence.

Toutefois, s'il s'agit d'identifier des structures comparables afin de réaliser un benchmarking,
nous avons repéré quelques éléments :

- Sur le département de l'Hérault, il n'existe pas d'autres structures comparables à l'APEMA

qui proposerait un service équivalent.

- Au niveau national, il existe peu de structures sur ce créneau et très peu présentent de site
web remarquable qui puisse servir de modèle d'une manière ou d'une autre. Nous avons
identifié les structures suivantes :

● Une association en Isère dont le site est hébergée à l'adresse suivante :

http://www.aeemdh.fr/​. Ce site est géré avec le logiciel de gestion de contenu SPIP
et bien qu'étant plus abouti que le site de l'APEMA, il ne présente pas un immense
intérêt.
● Une association en Aquitaine dont le site est : ​http://www.assem-aquitaine.com/​. Le
site est construit en PHP et HTML. Il est tenu à jour mais n'a rien de remarquable.
● Une association à Toulouse qui propose une landing page sur son activité :
http://www.aseem31.com/
● Dans le béarn, nous avons repéré l’association de l’enseignement aux enfants
malades qui propose un site web plus abouti. Il est visible à l’adresse :

8
 https://aeembearn.org/
Le site est réalisé sous wordpress et présente globalement toutes les fonctionnalités
nécessaires à notre commanditaire : l’association APEMA.

- Enfin, il existe une Fédération pour l'enseignement aux malades à domicile et à l'hôpital qui
fédère un certain nombre d'associations dont l'APEMA Montpellier. A l'heure où est rédigé
ce cahier des charges, le site de la fédération est en cours de refonte pour passer sous
wordpress : ​https://www.femdh.fr/​ .

3.3 Connaissances des cibles

3.3.1 Définition des différentes cibles

L’APEMA s’adresse en particulier :

● Aux parents et tuteurs de personnes malades

● Aux élèves en difficulté
● Aux intervenants
● Aux personnes travaillant avec des enfants

En complément, l’association a besoin d’échanger également avec :

● de futurs enseignants (Professeurs à la retraite, étudiants, comptable…)

● des bienfaisants et donateurs
● des psychologues, des médecins, des hôpitaux, des assistantes sociales

L’ensemble de ces acteurs constituent la cible du site internet à construire.

3.3.2 Attentes/besoins/valeurs partagées

Les parents ont de grandes attentes envers l’association qui représente pour eux un espoir
de fournir un accès à l’éducation à leurs enfants malgré leurs difficultés physiques ou
psychiques. Il faut donc créer un site web rassurant et crédible pour leur inspirer confiance.

Les élèves devront aussi avoir envie de choisir l’Apema.

Pour cela, le choix des mots utilisés aura toute son importance et il faudra faire attention au
ton employé afin de ne pas être trop strict, ni trop enfantin dans l’écriture. Le meilleur moyen
de convaincre ces cibles est de montrer que l’Apema répond à leurs besoins.

Par ailleurs, l’association est composée de bénévoles composés principalement de jeunes

professeurs retraités qui souhaitent continuer à enseigner pour aider des malades ou
accidentés.
La difficulté est que ces jeunes retraités ne souhaitent pas s’éloigner trop loin de chez eux
pour donner des cours à ces jeunes et par conséquent, certains secteurs, notamment en

9
périphérie des grandes villes connaissent un manque de bénévoles. L’attente principal des
bénévoles est donc une proximité géographique avec leur domicile. Nous pensons qu’une
meilleure qualité du site web augmentera la visibilité et permettra d’augmenter l’attrait pour
l’association aussi bien pour les bénévoles habitant en ville qu’en périphérie.

Bien entendu, toute association a besoin de fonds pour pouvoir fonctionner correctement.
Nous allons aussi ciblé les bienfaisants donateurs en prévoyant un bouton “faire un don”
bien visible sur la page d’accueil du site.

Nous comptons sur la réputation de l’Apema et la qualité du site web pour que les autres
cibles secondaires (médecins, hôpitaux…) ait confiance en l’association.

10
4. ARBORESCENCE & ORGANISATION DU
SITE

4.1 Contenu et arborescence

A l’issue des échanges avec le commanditaire et en synthétisant le contenu du site existant,

nous avons noté qu’il faut intégrer le contenu suivant :

- Une courte présentation de l’association

- Une possibilité de contacter l’association par téléphone ou au travers d’un formulaire
web
- Le règlement intérieur de l’Apema
- Une possibilité de recueillir des dons
- Une possibilité de s’informer en tant qu’enseignant ou en tant qu’étudiant

Afin de simplifier la lecture pour le visiteur, nous avons choisit de rassembler un maximum
d’élément sur la page d’accueil, qui correspond aussi à la page «L’association». Cette page

11
permet d’accéder à presque l’intégralité des pages du site de diverses façons, par divers
chemins qui pourront se spécifier selon les préférences de l’utilisateur.

4.2 Organisation des contenus, story-board (graphique et

synthèse du travail du rédacteur)

4.2.1 Présentation de l’information et mise en page

Voici le storyboard concernant la homepage :

12
Les autres schémas du storyboard se trouve dans le dossier éditorial établi par la rédactrice.

4.2.2 Principes de navigations et organisations des contenus

L'ensemble des pages de ce dossier ont été écrites dans le but d'informer le visiteur du site.

La page d’accueil correspond à la page “L’association”, elle est accessible en un clic sur
toutes les pages du site en cliquant sur le logo qui reste statique. Cette page commence par
informer sur la naissance de l’association. La page d’accueil à pour objectif d’attirer
l’attention, de susciter l’intérêt et d’inciter au passage à l’action avec l’hyperlien “contactez
nous” menant directement à la page contact.

La page contact est composé d’une carte permettant d’identifier rapidement la zone
d’opérations de l’APEMA Montpellier (notre commanditaire) car celle-ci se partage le
territoire avec l’APEMA Béziers. La page contact est évidemment composé d’un formulaire
de contact qui sera par la suite relié à la boîte mail de l’APEMA .

Une page faire un don est bien visible dans un encadré orange sur le site et reste statique
comme le menu sur toutes les pages du site.

Les pages “règlement intérieur” et “mentions légales” sont présentes dans le footer du site.
Le règlement intérieur fait partie des demandes de notre commanditaire et les mentions
légales font partie des obligations d’un site web.

Une page actualité à été mise en place afin de donner la possibilité à notre commanditaire
d’informer et de communiquer sur les différents événements de l’association.

Les pages espaces ont été eux aussi créées à but informatif de façon à rapidement ciblé
l’internaute en fonction de la raison qui l’amène sur notre site. A ce titre des pages “espace
famille”, “espace enseignant” et “espace établissement” sont présents sur toutes les pages
du site.

Nous avons respecté la règle des 3 cliques sur l’intégralité de notre site. D’ailleurs, une
seule clique suffit pour se rendre sur n’importe quelle page de notre site web.

L'utilisation du pronom « vous » est récurrente et permet au lecteur de s'identifier.

De manière générale, le ton employé est léger mais formel, il a pour but de créer une
proximité avec le lecteur tout en gardant un caractère informatif qui est l’objectif de ce site.

La stratégie éditoriale et l’organisation des contenus est explicitée plus en détails dans le
dossier éditorial prévu à cet effet.

13
5. PRINCIPES ESTHÉTIQUES

5.1 Stratégie de communication graphique

La stratégie de communication graphique englobe le choix du logotype, des couleurs, des

différentes icônes, des typographies utilisées et la production de la carte dans la page
contact.

Nous avons choisi de créer un logotype plus moderne pour représenter les valeurs de
l’APEMA . La police de ce logotype est différente de celle employée dans le site pour
marquer l’importance du logotype en lui donnant une police personnalisée.
Pour rendre l’acronyme de l’association aisément identifiable nous avons coloré les
premières lettres de chaque mot. Nous avons choisi de mettre l’accent sur l’enseignement
qui est le moteur de l’association en ajoutant le visuel d’un livre présent dans le logotype. Le
livre étant le symbole de l’enseignement et de l’éducation.

Les couleurs que nous avons retenues sont le bleu, l'orange et le blanc. Ce sont des
couleurs complémentaires qui s’assemblent parfaitement et qui sont à la base de notre
communication graphique. Nous avons associé ces couleurs au blanc afin d’obtenir un
rendu plus visible et plus épuré.
La couleur principale de notre site est le bleue, elle est utilisée notamment pour le menu et
les boutons principaux. La couleur “orange” est utilisée pour les titres. Les autres couleurs
utilisées sont le “gris foncé” et le “gris clair” afin de différencier le pied de page et les sous
titres. La couleur d’arrière-plan est le blanc pour garantir une très bonne lisibilité.
Le noir nuancé est la couleur du corps du texte pour un effet moins agressif que le noir pur.

Les différentes icônes utilisées sont des symboles universels pour des raisons évidentes de
compréhension par le plus grand nombre de personne. Ces icônes sont utilisées pour
représenter la prise de contact, l’enseignement, les établissements et la famille qui sont les
éléments de notre commanditaire que nous avons voulu mettre en avant.

Enfin, les typographies utilisées sont sans empattements pour une lisibilité optimale sur le
web. Nous avons choisi deux typographies pour hiérarchiser l’importance des textes. Les
titres et le corps de texte n’ont donc pas la même typographie. De plus, les niveaux de titres
n’ont pas la même taille de police pour une hiérarchisation des textes de façon à ce que le
lecteur puisse rapidement identifier les éléments textuels les plus importants.

Pour en savoir plus sur ces couleurs et ces typographies, leurs pertinences et leurs
significations, nous vous invitons à consulter le dossier de justification graphique établi par
notre graphiste.

14
5.2 Maquettes graphiques

Voici la maquette graphique maîtresse de la page d’accueil qui a servie de modèle pour la
déclinaison des autres. Les autres maquettes graphiques sont disponibles dans le dossier
graphique.

15
5.3 Charte graphique

La charte graphique a veillé à bien prendre en compte le secteur de l’association Apema et

à orienter ses choix de façon à être en harmonie avec ses valeurs.

Le logotype reprend l’acronyme de l’association en utilisant les couleurs préalablement

choisies. Les initiales du logo s’inscrivent toujours en lettres majuscule.

Les couleurs principales utilisées sont le bleu clair et l’orange foncé et le blanc. Les couleurs
secondaires utilisées sont le bleu foncé et l’orange clair. Le blanc est utilisé pour la couleur
de fond. Les codes couleurs sont fournis dans la charte graphique détaillée par la graphiste.
Les couleurs doivent demeurer inchangées. Nous avons choisi le bleu clair comme couleur
principale en référence au milieu hospitalier, mais aussi, car il évoque la confiance, la
sérénité et la fidélité. Autant de valeurs représentatives de notre commanditaire.
Par ailleurs, l'orange foncé vient en complément du bleu dans les couleurs principales. La
couleur orange évoque le respect, la créativité et l’énergie. Nous l’avons choisi pour faire
référence à l’enseignement et au dynamisme de l’association.

La dernière couleur principale est le blanc symbole de pureté. La couleur blanche est aussi
très présente dans le milieu hospitalier ou exerce de nombreux professeurs de l’Apema.
Nous avons aussi choisi le blanc, car il a apporté un rendu au site plus épuré et une lisibilité
plus confortable ce qui contribue grandement à l‘expérience utilisateur.

La charte graphique détaillée par notre graphiste stipule tous les interdits du logotype
comme ne pas changer les couleurs ou la typographie par exemple.

Concernant la typographie, la police principale retenue est Segoe. La police est utilisée en
romain et en italique.
Nous avons choisi une deuxième typographie pour bien différencier les titres du corps de
texte : Arial Bold.

La police Segoe avec son caractère bâton simple sans empâtements évoque un côté
normatif qui correspond bien à l’enseignement. La police est assez droite et cela peut
donner une impression de froideur, mais cela permet surtout une meilleure lisibilité.
La police Arial Bold est une police épaisse et sans empattements utilisée pour nos titres afin
de les rendre propres et lisibles.

16
6. FONCTIONNALITÉS AVANCÉES
Dans une deuxième phase, il est possible d’envisager des fonctionnalités supplémentaires
qui apporteraient de petits plus à l’association.

Ces fonctionnalités éventuelles sont simplement décrites sans avoir été mise en oeuvre ou
expérimentées sur le site web réalisé par l’équipe dans une première phase.

6.1 Mise en place d'une newsletter

Une newsletter permettrait d’informer régulièrement les enseignants bénévoles de l’actualité

de l’association ou plus général du monde de l’enseignement pour les personnes malades
(Relai d’infos de la fédération nationale par exemple).
La mise en oeuvre est relativement facile sur Wordpress avec un plugin comme MailPoet
par exemple.

6.2 Installation d'un module de donation par CB

Les dons sont un moyen de financement intéressant pour notre commanditaire.

Actuellement, ils en perçoivent peu car l’association n’est pas organisée de manière efficace
sur ce point. Outre le fait qu’il faudra rappeler sur le nouveau site les avantages fiscaux
associés au don à une association reconnue d’utilité publique, nous pouvons imaginer un
système de donation électronique permettant un paiement par carte bancaire.
Un tel système simplifie les démarches et augmente le pourcentage de don en levant des
freins pour concrétiser le don.

La solution technique simple passerais par des plate-formes non-bancaires de type Stripe
ou payplug qui proposent des modules d’intégration à Wordpress.

6.3 Mise en place d'une page facebook interconnectée avec la

partie actualités

L’association ne dispose pour le moment d’une page facebook. Si elle souhaite développer
un réseau social, nous pouvons envisager une solution permettant d’interconnecter le fil
d’actualité d’une page facebook avec une partie blog installée sur le site.
Un plugin comme “Facebook Wall and Social Integration” permet ce genre d’interconnection.

17
7. ERGONOMIE, SÉCURITÉ ET PERFORMANCE
Afin de disposer d'un site internet performant et facilement maintenable, nous préconisons
l'utilisation du système de gestion de contenu Wordpress. Ce système est très éprouvé car il
propulse actuellement environ 30% des sites dans le monde. Sa notoriété est un premier
gage de qualité mais pour garantir la meilleure expérience utilisateur possible, nous
proposons une série de mesures spécifiques pour optimiser l'ergonomie, la sécurité et les
performances du site.

7.1 Optimisation de l'ergonomie.

Pour obtenir des conditions ergonomiques optimales, nous travaillerons avec le référentiel
OPQUAST qui propose plus de 300 critères de qualité web.

Lors du développement, nous veillerons à respecter le plus grand nombre possible de

critères.

La liste complète des critères est consultable à cette adresse :

https://checklists.opquast.com/fr/

Voici quelques exemples de critères à respecter :

- Il est possible de revenir à la page d'accueil depuis toutes les pages
- Les blocs de navigation de même nature sont affichés aux mêmes emplacements sur
toutes les pages.
- Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan.

7.2 Gestion de la sécurité

Wordpress étant un système très populaire dans le monde entier, il est très sécurisé
nativement mais il fait également l'objet de nombreuses attaques. Un soin tout particulier
doit être observé pour sécuriser le site contre les éventuelles tentatives de piratage.

Pour assurer la sécurité, nous allons veiller à mettre les bonnes pratiques en matière de
sécurité avec Wordpress. En particulier, nous allons veiller aux points suivants :

- Sensibiliser les utilisateurs à la nécessité d'utiliser des mots de passe robustes

- Installer un système de sauvegarde automatique
- Utiliser uniquement un thème et des plug-in à jour

18
- Dans la version finale, faire en sorte que l'accès au site se fasse via une connexion
sécurisée de type https.

Nous contrôlerons la mise en place correcte du protocole SSL avec l'outil de référence en
matière de test de connexion sécurisé : https://www.ssllabs.com/index.html

Toutes ces mesures ne garantissent pas une sécurité à 100% mais réduisent
considérablement les risques.

7.3 Gestion des performances

Les performances d'un site web sont importantes pour l'expérience utilisateur. Deux points
sont particulièrement à surveiller : La vitesse de chargement et la capacité d'adaptation du
site aux différents supports de consultation (Ordinateur, tablette, mobile) connue sous le
vocable anglais de "responsive".

En ce qui concerne la vitesse de chargement, nous conseillons à terme d’installer un plugin

de cache qui permet de charger les pages plus rapidement. Le plugin que nous vous
proposons est : WP Super cache

Afin de mesurer les performances en terme de vitesse, nous testerons le site web avec l'outil
de référence de google pour analyser les temps de réponse d'un site web :
https://developers.google.com/speed/pagespeed/insights/

En ce qui concerne les aspects responsive, nous proposons un thème nativement

responsive. En complément, nous testerons les capacités responsive du site internet avec
l'outil de référnce google : https://search.google.com/test/mobile-friendly

A l'issue des différents tests, nous effectuerons les éventuels ajustements nécessaires au
cas où des écarts importants seraient identifiés.

19
8. MISE EN PLACE ET ACCOMPAGNEMENT
Tout changement de site internet engendre des bouleversements plus ou moins importants
à la fois du côté des visiteurs mais également du côté des administrateurs.

Dans le cas présent, le site va être géré par les bénévoles de l'association qui ne sont pas
forcément des habitués des système de publication tel que Wordpress.

Pour l'accompagnement au changement, nous souhaitons procéder de la manière suivante :

- Aborder les choses par étapes en implémentant dans une première phase les aspects
essentiels (Présentation, contact) et dans des phases ultérieures des fonctionnalités moins
fondamentales comme des newsletters ou des compte-rendus de réunions.

- Mettre à disposition des administrateurs un manuel de publication qui rappelle les

différentes phases pour publier un article sur wordpress et les points de vigilance à
observer.

9. RÉTROPLANNING
Pour gérer le planning, nous avons utilisé le logiciel GanttProject afin de produire un
diagramme de Gantt.

Nous avons réparti les différentes tâches de notre projet en 5 grandes phases qui sont
identifiables grâce à un code couleur :

- Analyse et compréhension du besoin (en jaune)

- Conception (en bleu)
- Réalisation technique (en rouge)
- Production de contenus (en vert)
- Suivi et organisation du projet (en violet)

Le rétro-planning est consultable en annexe à la fin du cahier des charges

20
10. BUDGET
Au niveau du budget, nous proposons un budget inspiré des pratiques des agences web
classiques avec le détail des opérations à mener et un tarif journalier.

Nous avons choisi d’appliquer le tarif proposé par la plate-forme MALT qui met en relation
des intervenants freelance et des commanditaires. Notre équipe étant composée d’étudiant,
nous avons retenu le tarif moyen correspondant à des intervenants ayant moins de deux ans
d’expérience. Ces tarifs sont consultables sur le site de la plate-forme :
https://www.malt.fr/t/barometre-tarifs

Les freelance n’étant en général pas assujettis à la TVA, ces tarifs sont appliqués TTC.

Tâche Acteur Tarif journalier Charge Coût

Rédaction du cahier des Chef de projet 283 €/jour 1,5 424,5

charges

Conception des éléments Graphiste 241 €/jour 2 482

graphiques (Charte, logo)

Installation et Développeur 261 €/jour 0,5 130,5

paramétrage de
wordpress

Customisation du thème Développeur 261 €/jour 2 522

Analyse des contenus et Responsable 217 €/jour 1 217

définition de la ligne éditorial
éditoriale

Rédaction et intégration Responsable 217 €/jour 2 434

des contenus éditorial

Test et ajustements L’équipe 250 €/jour 1 250

Suivi du projet Chef de projet 283 €/jour 1 283

TOTAL 2743

21