Salon chocolat

Edité par de Vergezac Matthieu
Année de création : 2016
Projet : Initier et lancer
un projet mulditmédia :
Le salon du chocolat Paris (fictif)
Cadre du projet : scolaire

Note de Cadrage en réponse au Salon du
Chocolat de Paris par Frédéric Charain
Table des matières
Contexte ........................................................................................2
Objectif..........................................................................................2
Finalité................................................................................ 2
Objectifs principaux du livrable......................................................2

Contexte
Notre client Frédéric Charain organise le Salon du Chocolat de
Paris dans moins de 6 mois. Il souhaite mettre en place un site web
pour y présenter : liste d’exposants, carte des exposants,
intervenants prévus lors des tables rondes, actualités et retombées
presse.
Objectif
Nécessite la création d’un site web vitrine qui présente le salon
et ce qui s’y déroule, avec système de réservation de billet en ligne.
Le but de ce projet étant de produire les livrables assez rapidement
pour que la communication et les réservations du Salon du Chocolat
de Paris soient efficaces.
Digitalizer doit être capable de comprendre le monde du
Chocolat, l’enjeu de ce salon, la différence entre les univers des
intervenants, la mise à jour constante actualités/retombées presse.
Finalité
Création d’un site CMS où les gestionnaires pourront y mettre les
actualités, ainsi que des billets sur les retombées de presse. Mise en
place d’un système de réservation, d’un gestionnaire de réservation,
publicité web.
Eventuellement formation du client à la gestion de réservation
et mise à jour des actualités.
Objectifs principaux du livrable
Communication sur l’existence du Salon du chocolat, ce qui s’y
déroule, rentabilisation grâce à la vente de billet.
Internautes visées : principalement les habitants de Paris,
amateurs de Chocolat, animateurs du Salon, admirateurs des
exposants/intervenants du Salon.

DIGITALIZER
PROPOSITION COMMERCIALE
Adresse de Digitalizer - Tél : 00.00.00.00.00 - email : agence@digitalizer.com - SIRET : 1234567890
- APE : 0000A - TVA Intracommunautaire : Régime de l'auto-entrepreneur - Non soumis à TVA
Rédigé par :
De Vergezac Matthieu

RÉPONSE A VOTRE APPEL D’OFFRE
Bonjour… nous sommes heureux de vous répondre !
MATTHIEU
Chef de Projet
Nous sommes activement engagé dans la refonte/création de sites pour salons. Celui que vous
proposez pour le salon du chocolat est une bien trop belle occasion de vous montrer notre expertise
pour ne pas y répondre. Nous serons ravi de partager avec vous nos connaissances en la matière, et
répondre au mieux à vos besoins grâce à notre expérience dans les salons.
Nous sommes vivement intéressé…
Ensemble, construisons votre projet !

CONTEXTE
Le salon du chocolat…
Frédéric Charain
Le salon du
chocolat de Paris moins de 6 mois
communication
site vitrine
Notoriété du salon
Système de
réservation de billetsAmateurs & pro Responsive

FOCUS SUR LES BESOINS
Ce que vous souhaitez…
Communication
Présentation
Carte exposants
Billets
Actualités presse
Informations
salon
...nous avons répertorier vos besoins, on vous présente les solutions...
6

EXPLOITATION DU CMS EN RESPONSIVE
Pilotable par le client…
WORDPRESS
Simple d’utilisation, vous
pourrez gérer directement vos
contenus
RESPONSIVE
Fluide sur tous les supports,
pour une simplicité d’utilisation
client
ANALYTICS
Parce qu’il est nécessaire de
connaitre les pages les plus
attrayantes et en améliorer le
contenu
CHOIX DE WORDPRESS +
WOOCOMMERCE
Un CMS permet la conception et la
mise à jour d’un site web par un
groupes hiérarchisés de personnes via
un panneau d’administration. Il vous
est de ce fait beaucoup plus simple de
gérer le contenu de vos pages.
WordPress est facile d’utilisation,
nécessitant une courte formation pour
le maîtriser dans chaque recoin. Il sera
accompagné de WooCommerce, un
plugin WordPress qui permet de gérer
les bénéfices réalisés grâce à la vente
de billets de réservation. Le but du jeu
? Rendre le site ergonomique et fluide
sur tout les supports !
7

LES CIBLES
LES PROFESSIONNELS & LES PARTICULIERS
AU SALON DU CHOCOLAT
PARTICULIERS PROFESSIONNELS
Exposants
Intervenants des tables
Commerçants
Professionnels du chocolat
8
Restauration
Chefs chocolatiers
Industriels
Fans Chefs chocolatiers
Amateurs
Touristes
Fans des intervenants
Presse locale
Bloggeur
Journalistes

OPTIMISATION DU REFERENCEMENT
Parce que nous trouver sur internet c’est mieux…
searching...
Référencement organique
Ce qui permet le positionnement de
recherche sur les moteurs de recherches.
Amélioration possible de 75%
PARCE QUE VOUS TROUVER PLUS
RAPIDEMENT, CELA SE TRAVAILLE
Yoast SEO est une extension qui permet de gérer la
pertinence des pages sur WordPress. On augmente
ainsi la qualité de pages, avec une succession de
mots-clés pertinents à insérer. Ainsi, les moteurs de
recherches auront une image positive des pages de
votre site.
....amélioration du positionnement
9

PARCE QUE LE CHOCOLAT SE
DEVORE DANS LE MONDE ENTIER
Internationalisation, le
principe même d’un site en
plusieurs langues est
nécessaire de nos jours.
Pour le salon du chocolat, je
propose une création dans
les 3 langues majeurs du
salon que sont en français,
en allemand et en anglais.
On toucherait ainsi plus de
visiteurs, qui pourront alors
participer à ce salon.
INTERNATIONALISATION
Un site en multilingues…
Estimation du nombres d’étrangers
Parce que le salon du chocolat ne s’adresse pas seulement
aux francophones, il est nécessaire d’éditer le site en
plusieurs langues. Dans ce salon, les anglophones seront
d’environ 36%
10
8%
42%
36%
14%
42% Français
36% Anglais
14% Allemand
8% Russes

TRAME A SUIVRE
Le déroulement...
CREATION
WORDPRESS
Faire la liste de toutes les
fonctions nécessaires au
site. De cette manière,
nous aurons une
production complète.
DESIGN &
CUSTOMISATION
Customisation et
personnalisation du thème.
Le rendre esthétique et
fluide, c’est notre but !
DEPLOIEMENT &
HEBERGEMENT
Nous préférons
l’hébergement chez 1&1,
pour un faible coût d’achat
avec domaine + mail
entreprise.
TEST &
RECTIFICATION
On surveillera si chaque
item se comporte à la
perfection, pour un site
propre et fonctionnel.
EXPLOITATION &
PROFIT
C’est à votre tour de gérer
les contenus de vos pages,
pour le rendre vivant et
unique !
11
Méthodologie agileMéthodologie classique
PREVISIBLE IMPREVISIBLE
Utilisation de la méthodologie classique, car le projet
se déroule en plusieurs étapes connues, prévisibles et
sans risque pour le client.

ARBORESCENCE DU SITE
Composition du site…
Accueil
Actualités
Blog
Galeries photos
On parle de nous
(presse)
Infos/présentation
Carte des
exposants
Exposant 1
Exposant 2
Intervenants
Intervenant 1
Intervenant 2
Nous trouver
Achat
Billetterie
Contact
Formulaire de
contact
Connexion
utilisateur
Connexion
Espace pro
12

PLANNING PRÉVISIONNEL
Présentation des différentes phases du projet
PHASE D’INITIALISATION
Du 7 au 11 mai 2018
PHASE DE LANCEMENT
Du 14 au 21 mai 2018
PHASE DE CONCEPTION
Du 22 au 25 mai 2018
PHASE DE PRODUCTION
Du 28 au 11 juin 2018
PHASE D’EXPLOITATION
Du 12 au 18 juin 2018
13
Validation du
cahier des
charges
Validation
des
maquettes
Validation
proposition
commerciale
Validation de
la production
finale
Validation &
Formation
finale

CONCLUSION
De la proposition commerciale…
01
Création du site vitrine avec système
de réservation, le tout en responsive
Site vitrine
02
Dans le même style graphique du
site, une carte imprimable depuis la
page
Création carte des exposants
03
Test et mise en place chez
l’hébergeur du site, mise en fonction
Test et déploiement
04
On vous forme pour utiliser au mieux
les ressources de votre site, pour
gérer vos propre contenu
Formation WordPress
05
Suivi Analytics et Newsletter pour
informer et s’informer sur les visiteurs
Newsletter et suivi
Le salon du chocolat est prêt à
accueillir le site qui va faire
connaitre son savoir-faire !
14

BUDGET PREVISIONNEL
Le coût des prestations…
15
1808,52 €
PHASE DE LANCEMENT
2645,86 €
PHASE DE CONCEPTION
2041,67 €
PHASE DE PRODUCTION
7541,66 €
1854,18 €
ESTIMATION
DU BUDGET
En ajoutant le thème et
l’hébergement on a
19700€ tout compris !
RETOUCHES APRES
ANALYSE = OFFERT !

NOTRE AGENCE
Ce qui fait la différence…
4 PERSONNES
PASSIONNÉES
Parce que nous avons
choisi notre métier,
nous le réalisons avec
PASSION
EXPERT EN
CREATION WEB
Grâce à nos nombreux
projets, nous nous
perfectionnons
RESPECT DU
BUDGET
Être attentif aux
dépenses, c’est
respecter le budget
38 PROJETS
REALISÉS
Déjà presque 40
projets réalisés à ce
jour avec expertise
31 PROJETS DE
SALONS
Nous devenons
spécialiste des salons,
notre connaissance du
milieu fera la différence
110%
C’est le taux de satisfaction de nos clients, car nous
avons toujours quelque chose à apporter en plus qui
fait la différence !
16

Gestion e-commerce
Augmenter le chiffre d’affaire de
l’entreprise
Référencement web
Qu’il soit naturel ou payant,
votre place sur internet compte !
Gestion sur les réseaux
Image de l’entreprise, notoriété,
publicité … La clé se trouve sur
les réseaux sociaux
Intégration & Dev
CMS (WordPress), Magento,
Drupal … Nous les maîtrisons
tous !
Nous partons du constat que tout connaitre
n’est pas possible. Cependant, ce que nous
connaissons, nous le perfectionnons sans
cesse pour vous offrir le meilleur ! Gestion e-
commerce, amelioration du ROI (Retour sur
Investissement), réseaux sociaux, parcours
client (UX), déploiement d’un site … Nous
vous conseillerons au mieux de vos attentes
pour transformer vos idées en projets !
NOUS TRAVAILLONS POUR
VOS IDÉES
17

NOUS TRANSFORMONS
VOS IDEES EN PROJETS; PARTAGEZ
LES AVEC NOUS… EUX L’ONT FAIT !
VOUS AVEZ UNE IDEE ?
Partagez la avec nous…
LE SALON DU CHEVAL DE PARIS
LE SALON NAUTIC DE PARIS
LE SALON DU LUXE DE PARIS
LE SALON VIVATECHNOLOGIE
18

SITES DE REFERENCES
Ce que nous avons réalisés…
19

NOS 4 PASSIONNÉS
Parce que notre métier, c’est notre vie…
MATTHIEU ÉRIC DIGITALIZER MARGAUX ÉLISA
20
Chef de Projet
C’est notre contact
direct entre le client et
l’équipe. Il aime
organiser, écouter,
réfléchir et proposer. Il
aime le piment !
UX Designer
Le parcours utilisateur
n’a aucun secret pour
lui. Il sait manié
l’ergonomie et le
fonctionnel en même
temps. Il aime le client !
Développeuse web
A la tête de 12 sites
conçues de ses doigts,
elle saura transformer
vos idées en code ! Elle
aime les claviers !
Graphiste
C’est elle qui vous
séduira de la pointe de
son crayon. Faite-lui
confiance. Elle aime
dessiner !

Cahier des Charges
LE SALON DU CHOCOLAT
pour : Frédéric Charain
Diffusion :
• Matthieu matthieu@digitalizer.fr
• Elisa elisa@digitalizer.fr
• Margaux margaux@digitalizer.fr
• Éric eric@digitalizer.fr
• Frédéric Charain frederic-charain@salonchocolat.fr
• Mme Dupont dupont@salonchocolat.fr
Version : 1.0
Date de la dernière mise à jour : 25 avril 2018

Sommaire
1 Cadre du projet .................................................................................... 4
1.1 Résumé ......................................................................................... 4
1.2 Contexte de l’entreprise ................................................................... 4
1.3 Enjeux et objectifs........................................................................... 4
1.4 Livrables ........................................................................................ 5
1.5 Présentation de l’équipe ................................................................... 5
1.6 Planning prévisionnel....................................................................... 6
2 Benchmark .......................................................................................... 7
3 Considérations marketing .................................................................... 15
3.1 Cibles .......................................................................................... 15
3.2 International ................................................................................ 16
3.3 Référencement ............................................................................. 16
4 Conception graphique.......................................................................... 18
4.1 Brief créatif .................................................................................. 18
4.2 Charte graphique .......................................................................... 18
4.3 Images ........................................................................................ 18
5 Spécifications fonctionnelles................................................................. 19
5.1 Périmètre fonctionnel..................................................................... 19
5.1.1 Front office ............................................................................. 20
5.1.2 Back office.............................................................................. 20
5.2 Arborescence................................................................................ 20
6 Constitution des pages & spécifications.................................................. 21
6.1 Présentation de la solution ............................................................. 21
6.1.1 Rappel arborescence du site...................................................... 21
6.2 Pages du site (version ordinateur)................................................... 22
6.2.1 Accueil (+ présentation générale des pages) ............................... 22
6.2.2 Actualités (ancrage pages blog + galerie photo + presse)............. 25
6.2.3 Infos/présentation -> Carte ...................................................... 27
6.2.4 Infos/présentation -> exposants (ex : Henri Dravan) ................... 28
6.2.5 Infos/présentation -> liste des intervenants................................ 29
6.2.6 Infos/présentation -> intervenant (après clic) ............................. 30
6.2.7 Infos/présentation -> nous trouver............................................ 31
6.2.8 Achat -> Billetterie .................................................................. 32
6.2.9 Contact .................................................................................. 33

6.2.10 Connexion utilisateur -> Particulier (connexion) .......................... 34
6.2.11 Connexion utilisateur -> particulier (création) ............................. 35
6.2.12 Connexion utilisateur -> particulier (après connexion).................. 36
6.2.13 Connexion utilisateur -> espace pro (connexion) ......................... 37
6.2.14 Connexion utilisateur -> espace pro (création) ............................ 38
6.2.15 Connexion utilisateur -> espace pro (après connexion) ................ 40
6.3 Page du site (version smartphone) .................................................. 41
6.3.1 Changement du menu .............................................................. 41
6.3.2 Disposition responsive.............................................................. 41
6.4 Processus d’achat.......................................................................... 42
6.4.1 Diagramme de flux .................................................................. 42
6.4.2 Plugin WooCommerce .............................................................. 43
6.5 Domaine et hébergement............................................................... 43
6.5.1 Nom de domaine et hébergement.............................................. 43
6.5.2 Email ..................................................................................... 44
6.6 Accessibilité.................................................................................. 44
6.6.1 Compatibilité navigateurs ......................................................... 44
6.6.2 Types d’appareils..................................................................... 44
6.6.3 Normes d’accessibilité .............................................................. 44
6.7 Services tiers................................................................................ 45
6.7.1 Google analytics ...................................................................... 45
6.7.2 Google Maps ........................................................................... 45
6.8 Sécurité ....................................................................................... 45
6.9 Maintenance et évolutions .............................................................. 45

1 Cadre du projet
Nous nous sommes engagés aujourd’hui auprès du salon du chocolat de Paris organisé par
Frédéric Charain.
1.1 Résumé
Le commanditaire du projet M. Charain, gérant du Salon du Chocolat de Paris a exprimé les
besoins suivants :
• Développer la présence en ligne de l’évènement à partir d’une coquille vide
o Liste des exposants
o Liste des intervenants
o Actualités & retombées presses
o Pilotable par le client
• Créer une carte des exposants
• Mettre en place un système de réservation de billet
Pitch ascenseur :
Le salon du chocolat attirera des étrangers (touristes, professionnels en déplacement), il
serait intéressant de mettre en place une réservation automatisé dans la langue du visiteur.
1.2 Contexte de l’entreprise
Le salon du chocolat géré par Frédéric Charain est une première à Paris. Ce
salon permettra la rencontre entre le monde professionnel et les passionnés du
chocolat.
1.3 Enjeux et objectifs
L’objectif du projet va être de communiquer sur l’évènement et de tirer profit
de la vente de billets (réservations pro & visiteurs). La communication pourra
se faire au travers d’un site multilingue car nous proposons la mise en place de
3 langues : français, anglais, allemand.

1.4 Livrables
Phase Date Livrables
Initialisation 11 mai 2018 Proposition commerciale
Initialisation 14 mai 2018 Rapport de soutenance
Lancement 21 mai 2018 Cahier des charges
Conception 25 mai 2018 Maquettes
Production 8 juin 2018 Mail
Production 11 juin 2018 Site fonctionnel
Exploitation 12 juin 2018 Formation WordPress
Exploitation 18 juin 2018 Rapport d’analyse et
finalisation site
1.5 Présentation de l’équipe
Matthieu
Chef de projet
Éric
UX Designer
Margaux
Développeuse
web
Élisa
Graphiste

1.6 Planning prévisionnel
Lien vers Diagramme de Gantt

LE SALON INTERNATIONAL DE L’AGRICULTURE :
https://www.salon-agriculture.com
Force
Site graphique
Vidéo d’accueil
Page d’accueil très aérer
Menu ancré avec date du salon, lieu et
appel à l’action (réservation)
Faiblesse
Menu (actualité, salon…) pas assez visible
« les coulisses » pas assez mis en avant
A en tirer :
Graphique
Menu ancré
Appel à l’action (réservation)
Ensemble du site sur la page d’accueil

LE SALON DU MONDIAL DU TATOUAGE :
http://www.mondialdutatouage.com/2018/
Force
Date de l’événement mis en avant
Vidéo de présentation
Faiblesse
Mauvaise lisibilité
Beaucoup trop de texte
Pas d’indication en bas de page
Vidéo sans description textuelle
Pas assez de visuel pour un salon de
« tatouage »
Menu figé
Pas d’accès aux autres pages du site à
la page d’accueil
A en tirer
Présentation vidéo

LE SALON PLANETE BIERE :
http://planete-biere.com
Force
Graphiques travaillés
Arrivée sur une « affiche » en guise de
page d’accueil
On retrouve toutes les pages sur la page
principale, jusqu’à la mention
« contact »
Menu qui suit l’internaute
Faiblesse
Billet pour réservation
Palette de couleur (charte graphique)
A en tirer
Menu, site essentiellement graphique
Billet de réservation

3 Considérations marketing
La gestion marketing se fait directement par le client, qui souhaite gérer ses
propres campagnes de communications et la rédaction direct des contenus.
3.1 Cibles
PROFESSIONNEL
Caractéristiques
socio-démographiques
Caractéristiques
comportementales
• Origine : grandes
métropoles
mondiales
• Âge : 20-45 ans
• Travail dans le
chocolat
• Salaire : +50k/an
• Archétype : Chef
chocolatier, commerçants
de chocolat
• Motivation : faire connaitre
les produits
N.B : Les professionnels pourront réserver leurs emplacements directement en
ligne via un espace pro, la communication avec le client permettra ensuite la
mise en place d’une page dédié à l’exposant.
PARTICULIER
Caractéristiques
socio-démographiques
Caractéristiques
comportementales
• Origine : touristes,
• Âge : 20-45 ans
• Aime le chocolat/fan
d’un exposant
• Salaire : +30k/an
• Archétype : père de famille,
restauration
• Motivation : s’approprier de
bons produits, goûter
N.B : Les particuliers pourront réserver leurs billets, et choisir des exposants en
favoris via leur compte utilisateur. Ainsi, il sera notifié sur leur carte d’exposants
où se trouve leurs favoris.

3.2 International
Le salon sera fréquenté par beaucoup d’étrangers. Paris étant la capitale,
il existe déjà une mixité linguistiques importantes, il est donc nécessaire de
créer un site en plusieurs de ces langues (français, anglais, allemand); pour
atteindre le maximum d’internautes.
Les ressources pour les langues se trouveront sur le même compte drive
de l’équipe dans Projet salon du chocolat>traduction>en(ou al)
(https://drive.google.com/open?id=12A4sPv6QMPwiSGW0993qqUFohJVve9g4)
3.3 Référencement
Métas :
La rédaction des metas se fera directement avec l'aide du plugin Wordpress,
celui-ci indiquera un résumé textuel de la page concernée, ainsi qu'un titre
comprenant les mots clés principaux de la page en question, cependant la
rédaction de ces contenus meta sera géré par le client (et ne devra pas dépasser
156 caractères, espaces compris)
Title :
La balise title indiquera le titre de la page, comme précédemment elle est la
balise la plus importante avec la meta description et permet d'indiquer aux
moteurs de recherches où référencer la page web.
Titres :
Les titres H1 (titre principal de contenu de page), devront comportés le mot clé
le plus important qui résume la page, celui-ci permettra aux moteurs de
recherches d'en connaitre le contenu et faire un lien avec la balise title. Les
autres balises h2...h6 indiqueront les éventuels sous parties de la page.
Mots-clés :
Les mots clés qui apparaissent dans les balises citées plus haut devront être
répétés dans le contenu textuel de la page. La densité de ces mots (le rapport
mots-clésnbre de mots total) devra être compris entre 3%-6% avec un bon
repère d'un mot-clé tous les 100 mots.
8%
42%
36%
14%
42% Français
36% Anglais
14% Allemand
8% Russes

Liste des différents liens qui constitueront les pages du site :
Actualités :
www.lesalonduchocolat.fr>actualités
www.lesalonduchocolat.fr>actualités>blog
www.lesalonduchocolat.fr>actualités>galeriephotos
www.lesalonduchocolat.fr>actualités>presse
Infos/présentations
www.lesalonduchocolat.fr>infospresentation>carte (liste les exposants)
www.lesalonduchocolat.fr>infospresentation>intervenants (voir ex intervenants)
www.lesalonduchocolat.fr>infospresentation>noustrouver
Exemple de noms d'exposants :
www.lesalonduchocolat.fr>infospresentation>carte>Henri-Dravan
www.lesalonduchocolat.fr>infospresentation>carte>Margaux-Ardri
Exemple d'intervenants :
www.lesalonduchocolat.fr>infospresentation>intervenants>Marie-Oprine
www.lesalonduchocolat.fr>infospresentation>intervenants>Mathieu-Serti
Achat :
www.lesalonduchocolat.fr>achat>billetterie
www.lesalonduchocolat.fr>achat>reservationpro
Contact :
www.lesalonduchocolat.fr>contact
Connexion utilisateur (particulier) :
www.lesalonduchocolat.fr>particulier>connexion
www.lesalonduchocolat.fr>particulier>création
Pages débloquées à la connexion pour particulier
www.lesalonduchocolat.fr>particulier>nomutilisateur>
www.lesalonduchocolat.fr>particulier>nomutilisateur>carteperso
www.lesalonduchocolat.fr>particulier>nomutilisateur>réservations
Connexion utilisateur (professionnel) :
www.lesalonduchocolat.fr>espacepro>connexion
Pages débloquées à la connexion pour professionnel :
www.lesalonduchocolat.fr>espacepro>nomutilisateur>
www.lesalonduchocolat.fr>espacepro>nomutilisateur>réservations

4 Conception graphique
4.1 Brief créatif
Le graphisme du site doit transcrire une image « douce », « sucrée »,
tourné autour de la couleur chocolat afin de rappeler la couleur des produits.
Nous aurons des pages visuels et graphiques de qualités (photographies).
Le site sera épuré, moderne et incitera à réserver sa place.
Toutes les ressources graphiques (logo, charte graphique), se trouveront
sur le drive de l’équipe dans « projet salon du chocolat »
(https://drive.google.com/open?id=12A4sPv6QMPwiSGW0993qqUFohJVve9g4)
4.2 Charte graphique
4.3 Images
Comme il s’agit d’un site de présentation du salon du chocolat, il est
important de fonctionner avec un maximum de visuels de qualités afin de
montrer la diversité des produits présents au salon. Si possible, les clichés seront
faits par un photographe professionnel, et seront optimisés pour un chargement
rapide des pages. L’accès aux photographies se fera depuis le Google Drive de
l’agence mis en place par le chef de projet. Vous trouverez toutes les ressources
dans Projet salon du chocolat>Photographies = les images seront triées par page
d’appartenance. (https://drive.google.com/open?id=12A4sPv6QMPwiSGW0993qqUFohJVve9g4)

5 Spécifications fonctionnelles
5.1 Périmètre fonctionnel

5.1.1 Front office
Fonctionnalité Contrainte(s) associée(s)
Réservation en ligne Filtres
Formulaire de contact Anti-spam
Galerie de photo Contrôlable
Inscription newsletter Pas de contrainte particulière
Changement de langue Toujours présent à l’écran
Vidéo de présentation Contrôlable
Google Maps Pas de contrainte particulière
5.1.2 Back office
Fonctionnalité Contrainte(s) associée(s)
Gestion des contenus Restrictions en fonction de rôles
Gestion des prix Système de paiement
Gestion des réservations Système de paiement à gérer
5.2 Arborescence
Accueil
Actualités
Blog
Galeries photos
On parle de nous
(presse)
Infos/présentation
Carte des exposants
Exposant 1
Exposant 2
Intervenants
Intervenant 1
Intervenant 2
Nous trouver
Achat
Billetterie
Contact
Formulaire de
contact
Connexion
utilisateur
Connexion
Espace pro

6 Constitution des pages & spécifications
6.1 Présentation de la solution
Besoins Contraintes Solution
Autonomie sur :
● l’édition des
contenus
● la gestion de prix
● la gestion des
réservations
Temporelles et
budgétaires
Il conviendra donc
d’utiliser une solution
CMS (content
management system)
plutôt que de développer
le site, son interface
d’administration et toutes
ses fonctionnalités de zéro.
En fonction des critères présentés dans la score card suivants, il convient
d’utiliser le CMS Wordpress pour la réalisation du site.
Administration
(0,4)
Modules
(0,3)
Expertise
interne (0,3)
Score total sur
1
Wordpress 0,9 0,8 1 0,9
Joomla 0,5 0,5 0,2 0,41
Drupal 0,5 0,4 0,3 0,41
Afin de proposer toutes les fonctionnalités identifiées dans l’impact mapping, le
site utilisera :
● le module WooCommerce
● une intégration Google Maps
6.1.1 Rappel arborescence du site
Actualités :
www.lesalonduchocolat.fr>actualités
www.lesalonduchocolat.fr>actualités>blog
Infos/présentations
www.lesalonduchocolat.fr>infospresentation>carte (liste les exposants)
www.lesalonduchocolat.fr>infospresentation>intervenants (voir ex intervenants)
www.lesalonduchocolat.fr>infospresentation>noustrouver
Exemple de noms d'exposants :
www.lesalonduchocolat.fr>infospresentation>carte>Henri-Dravan
www.lesalonduchocolat.fr>infospresentation>carte>Margaux-Ardri

Exemple d'intervenants :
www.lesalonduchocolat.fr>infospresentation>intervenants>Marie-Oprine
www.lesalonduchocolat.fr>infospresentation>intervenants>Mathieu-Serti
Achat :
www.lesalonduchocolat.fr>achat>billetterie
www.lesalonduchocolat.fr>achat>reservationpro
Contact :
www.lesalonduchocolat.fr>contact
Connexion utilisateur (particulier) :
www.lesalonduchocolat.fr>particulier>connexion
www.lesalonduchocolat.fr>particulier>création
Pages débloquées à la connexion pour particulier
www.lesalonduchocolat.fr>particulier>nomutilisateur>
Connexion utilisateur (professionnel) :
www.lesalonduchocolat.fr>espacepro>connexion
Pages débloquées à la connexion pour professionnel :
www.lesalonduchocolat.fr>espacepro>nomutilisateur>
www.lesalonduchocolat.fr>espacepro>nomutilisateur>réservations
6.2 Pages du site (version ordinateur)
6.2.1 Accueil (+ présentation générale des pages)
Lien : www.lesalonduchocolat.fr>accueil
6.2.1.1 Maquette

6.2.1.2 Spécifications
• But : Rassemble toutes les pages du site
• Diaporama d’accueil des photos autour du salon (fait par un professionnel)
o Produits des chefs chocolatiers
o Lecture automatique toutes les 3 secondes
• Menu navigation suit l’internaute sur la page
o Comporte : Actualités (déroulant : blog, galerie photo, presse) ;
Infos/présentation (déroulant : carte des exposants, intervenants,
nous trouver) ; Achat ; Contact ; Connexion utilisateur ; choix des
langues (déroulant : fr, de, en).
o Logo du salon, qui amène sur la page d’accueil
o A droite du logo, date + lieu de l’évènement (statique)
o Les déroulants s’affichent au survol de la souris
o Loupe de recherche sur l’ensemble du site
• Diaporama avec 2 boutons : Réserver les billets et Nouveautés
o Réserver (couleur foncée) : pop-up s’affiche pour sélectionner
« réservation particulier » ou « réservation pro » amène
respectivement aux pages « billetterie »
(www.lesalonduchocolat.fr>achat>billetterie) et « espace pro »
(www.lesalonduchocolat.fr>espacepro)
o Nouveautés (couleur claire) : amène à la page actualités avec un
ancrage sur le départ de la page actualités (rassemble les
nouveautés du salon)
• Liste des exposants avec à gauche image et descriptif à droite (2 billets
par ligne), un clic amène à la page de l’exposant concerné
Ex : www.lesalonchocolat.fr>infospresentation>carte>Henri-Dravan
• Intervenants des tables rondes dans un autre encart en dessous de la
précédente, sur 3 colonnes, une image (l’intervenant) avec un titre et une
courte description (en colonne) avec la mention « lire la suite » qui amène
à la page de l’intervenant correspondant
Ex : www.lesalonduchocolat.fr>infospresentation>intervenant>Marie-Oprine
• Encart explication salon du chocolat
• A droite : la dernière retombée presse du salon du chocolat
• Dernier encart : à gauche formulaire de contact rapide
(hello@salonchocolat.fr) qui comporte nom-prénom, mail, objet, corps du
message et le bouton envoyer (avec confirmation d’envoi en pop-up) ; à
droite une map qui situe le salon + informations importantes (adresse,
date, horaire, tel, mail)
• Contact encadré dans une boite 50% de la page à gauche
• Chaque encart (élément distinct) est séparé par une ligne continue en
opacité 70%, noir, 3px ; ou palette de couleur différent par encart
• Titre en 14px
• Clic sur le logo amène à cette page d’accueil
• Un lien vers réservation pro qui amène à la page « espace pro »
(www.lesalonduchocolat.fr>espacepro)
• Bas de page : liens « en savoir plus » (à préciser avec le client) + mention
légale ; le plan du site ; un kit presse à télécharger pour rédaction rapide
d’articles (photos sites + logos => pour les bloggeurs/journalistes). Le
plus à droite sur 30% du bas de page : inscription rapide aux newsletters.
En dessous une palette de liens vers les réseaux sociaux.

6.2.2 Actualités (ancrage pages blog + galerie photo + presse)
Lien : www.lesalonduchocolat.fr>actualités
Ancrage : www.lesalonduchocolat.fr>actualités>blog
6.2.2.1 Maquette

• But : référence les nouveautés du salon
• Les nouveautés (type blog) 3 billets par ligne, une image, un titre et une
courte description. Clic sur image ouvre l’article en question (url de l’article
en fonction du titre de l’article)
• La partie galerie photo présente toutes les photos du salon (exposants,
produits)
• Chaque image aura un encart sur le haut qui montre le titre au survol de
la souris (opacité 50%)
• Dispose 3 photos par ligne, photo en 16/9, résolution à préciser avec le
photographe.
• Images optimisées pour chargement rapide de la page
• Retombée presse 3 par ligne, image suivie d’un titre et du début de
l’article de presse, au clic, ouverture de l’article dans un nouvel onglet
• Taille image à préciser
• Titres des articles/presse en 12px
• Les accès aux différentes parties fonctionnent par ancrage (menu
déroulant)
o 1ère
partie = blog : www.lesalonduchocolat.fr>actualités>blog
o 2nd
partie = galerie photo :
o 3ème
partie = presse : www.lesalonduchocolat.fr>actualités>presse

6.2.3 Infos/présentation -> Carte
Lien : www.lesalonduchocolat.fr>infospresentation>carte
6.2.3.1 Maquette
• But : présenter les exposants présents
• Chaque cercle = un stand (chaque cercle présente en son centre le logo du
stand ou les deux initiales de l’exposant)
• Au survol de la souris, une affiche montre le nom du stand, son
représentant, une image 150x150, ainsi qu’une courte description
• Chaque exposant rédige sa propre description marketing (lors de la
création de son compte pro)
• Il est possible pour l’internaute de cliquer sur le stand, cela permet
d’ouvrir dans un nouvel onglet un descriptif plus complet du stand
• Carte imprimable : celle-ci est en lien avec la page « carte personnalisée »
après connexion. Sans connexion, l’impression de cette carte affiche la
carte en paysage sur une première page A4 et la liste des exposants +
images + noms + description sous forme de liste à la suite de la carte
• Carte personnalisable quand connexion client (exposants en favoris)
• Titre en 14px
• Non-indiquer sur cette maquette : inclure une barre de recherche sur la
carte des exposants
• Listing des exposants en dessous de la carte : tri possible des exposants
selon notoriété, alphabétique, date de création entreprise

6.2.4 Infos/présentation -> exposants (ex : Henri Dravan)
Lien : www.lesalonduchocolat.fr>infospresentation>carte>Henri-Dravan
6.2.4.1 Maquette
• But : Afficher la description d’un exposant
• S’affiche après clic sur une affichette de la carte des exposants
• Image de l’exposant (image de profil + logo importé lors de la création de
l’espace pro) ; alternance de ces 2 images toutes les 4s
• A droite des images, la description de l’entreprise + l’exposant
• En dessous : diaporama de photos importées par l’exposant lors de la
création du compte pro avec le descriptif de la photo à droite (rédaction
par l’exposant)
• Le diaporama des réalisations prend 70% du bas de la page
• Non-indiquer : présence d’un formulaire de contact vers l’exposant en
dessous de « slide des réalisations », le formulaire est envoyé à l’adresse
mail renseigné par l’exposant lors de la création de l’espace pro
• Titre en 14 px

6.2.5 Infos/présentation -> liste des intervenants
Lien : www.lesalonduchocolat.fr>infospresentation>intervenants
6.2.5.1 Maquette
• Listing des intervenants aux tables rondes (liens qui amènent vers une
page dédiée pour chaque intervenant) dans un nouvel onglet
• Tables sous formes de thématiques
• Carte figée avec le nom des intervenants en liste relié à chaque table
• Carte centrale sur la page (60%)
• Titre en 14px

6.2.6 Infos/présentation -> intervenant (après clic)
Lien : www.lesalonduchocolat.fr>infospresentation>intervenants>Marie-Oprine
6.2.6.1 Maquette
• But : présenter l’intervenant
• Présence de l’image de l’intervenant (profil), image 400px
• Nom de l’intervenant en 14px à droite de l’image
• En dessous en taille 10px l’horaire de passage + stand + le titre de
l’intervention
• En dessous de l’image, on liste les différents points abordés par
l’intervenant
• On met une carte des intervenants des tables rondes à droite des points
abordés
• Les noms des intervenants s’affichent au survol de la souris

6.2.7 Infos/présentation -> nous trouver
Lien : www.lesalonduchocolat.fr>infospresentation>noustrouver
6.2.7.1 Maquette
• But : Afficher le lieu de l’évènement
• Un pointeur animé (rebondi) centré sur la carte
• Possibilité de faire un itinéraire depuis la carte
• Titre en 14px
• Vu en plan
• Map au centre, prend 80% de la page
• Création d’un compte Google obligatoire pour intégrer une API

6.2.8 Achat -> Billetterie
Lien : achat www.lesalonduchocolat.fr>achat>billetterie
pro www.lesalonduchocolat.fr>achat>réservationpro
6.2.8.1 Maquette
• But : Proposer les billets de réservations
• L’arrivée sur la page, proposition création d’un compte si utilisateur non
connecté. Si connecté, processus d’achat (ref : 7 Processus d’achat)
• Billets dans l’ordre suivant : billet vendredi, billet samedi, billet dimanche,
billet 2 jours, billet 3 jours (tarif à préciser avec le client)
• 2 billets par ligne
• Billets différents pour les professionnels, paiement pour une place pour 1-
2 ou 3 jours, place attribuée automatiquement
• Un « titre-image », une liste de ce que comprend la réservation, le tarif +
horaire.
• Un bouton qui amène au processus d’achat (ref : 7 Processus d’achat)
• Titre en 14 px
• Plugin Woocommerce gère le processus d’achat
• Plus d’information 7 Processus d’achat

6.2.9 Contact
Lien : www.lesalonduchocolat.fr>contact
6.2.9.1 Maquette
• But : contact entre le visiteur et les collaborateurs du salon
• Gestion par le plugin ContactForm 7
• S’installe depuis le panneau d’administration WordPress
• On trouve les mentions objet, nom-prénom, mail et message
• Se trouve dans une boite 50% de la page
• L’envoi du formulaire correspond à la boite hello@salonchocolat.fr
• Bouton envoyer permet de confirmer l’envoi du message
• Configuration facile sous WordPress du compte ContactForm
o Préciser le mail de réception
o Préciser les informations demandées (mentions plus haut)
• Titre en 14 px
• Même dimension en responsive (mobile, tablette)

6.2.10 Connexion utilisateur -> Particulier (connexion)
Lien : www.lesalonduchocolat.fr>particulier>connexion
6.2.10.1 Maquette
• But : connexion de l’internaute espace particulier
• Base de données géré par 1&1, généré par la création utilisateur
• Mention identifiant et mot de passe (avec indication de remplissage)
• Case mémoriser ma connexion permet une navigation plus fluide lors de la
prochaine connexion (cookies)
• Création de compte au clic sur le lien « pas de compte ? créer en un
ici…> », cette page amène à la page de création de compte (voir ci-
dessous) => www.lesalonduchocolat.fr>particulier>création
• Titre en 14px
• Encart prend 50% de la page
• Bouton connexion en bas à droite 25% (couleur foncée)
• Mémoriser et pas de compte en 8px
• Identifiant et mot de passe en 10px

6.2.11 Connexion utilisateur -> particulier (création)
Lien : www.lesalonduchocolat.fr>particulier>création
6.2.11.1 Maquette
• But : création d’un compte particulier
• Mentions : nom complet (obligation nom prénom), mail, recopier mail,
adresse (avec n°), Code postale, ville
o « retaper mail » quand correspond pas
• Mentions en 10px
• Titre en 14px
• Identifiant généré automatiquement de la manière suivante : 1ère
lettre du
prénom + 5ères
lettres du nom
o Ex : Dravan Henri => hdrava = identifiant
• Mentions choisir un mot de passe et confirmer mot de passe choix de
l’internaute
o Mot de passe = 8 caractères minimum
o Mot de passe = 1 caractère spécial obligatoire
o Affiche « retaper mot de passe » quand correspond pas
• Bouton « création » pour envoyer les données à la base de données,
création du compte l’utilisateur
• Cocher case obligatoire, clic sur le lien « j’accepte le termes » amène à la
page www.salonduchocolat.fr>conditionutilisation
• Amène à la page d’accueil utilisateur (tableau de bord) =>
www.lesalonduchocolat.fr>particulier>nomutilisateur
• Titre en 14 px
En cochant cette case, j’accepte les termes d’utilisation

6.2.12 Connexion utilisateur -> particulier (après connexion)
Lien : www.lesalonduchocolat.fr>particulier>nomutilisateur>
6.2.12.1 Maquette
• But : orienter l’utilisateur vers ce qu’il a réserver/avantage
• A gauche à 40%, carte personnalisée des exposants, en cliquant
l’utilisateur arrive sur la page de carte des exposants (clic sur la carte ou
sur « personnaliser »)
www.lesalonduchocolat.fr>infospresentation>carte
o Cette fois-ci, on retrouve des cases à cocher à gauche des stands
que l’utilisateur peut cocher
o A l’impression, on imprime seulement les cases cochées par
l’utilisateur
• A droite, 40% de la largeur de la page ; carte des tables rondes et de leurs
intervenants, uniquement disponible depuis un clic = ouverture dans un
nouvel onglet, amène à la page
www.lesalonduchocolat.fr>infospresentation>intervenants
• Au-dessous du tout, on retrouve la/les réservation(s) de l’internaute fait
sur la page « billetterie »
• Sur la ligne de réservation, on retrouve les informations suivantes :
o Date de la réservation
o Les accès que propose la réservation
o Le tarif payé
• Titre en 14px

6.2.13 Connexion utilisateur -> espace pro (connexion)
Lien : www.lesalonduchocolat.fr>espacepro
6.2.13.1 Maquette
• But : connexion de l’internaute espace pro
• Base de données géré par 1&1, généré par la création utilisateur
• Mention identifiant et mot de passe (avec indication de remplissage)
• Case mémoriser ma connexion permet une navigation plus fluide lors de la
prochaine connexion (cookies)
• Création de compte au clic sur le lien « pas de compte ? créer en un
ici…> », cette page amène à la page de création de compte (voir ci-
dessous) => www.lesalonduchocolat.fr>espacepro>création
• Titre en 14px
• Encart prend 50% de la page
• Bouton connexion en bas à droite 25% (couleur foncée)
• Mémoriser et pas de compte en 8px
• Identifiant et mot de passe en 10px

6.2.14 Connexion utilisateur -> espace pro (création)
Lien : www.lesalonduchocolat.fr>espacepro>création
6.2.14.1 Maquette
En cochant cette case, j’accepte les termes d’utilisation

• But : création d’un compte pro
• Mentions : nom complet (obligation nom prénom), mail, recopier mail,
adresse (avec n°), Code postale, ville
o « retaper mail » quand correspond pas
• Mentions en 10px
• Titre en 14px
• Identifiant généré automatiquement de la manière suivante : 1ère
lettre du
prénom + 5ères
lettres du nom
o Ex : Dravan Henri => hdrava = identifiant
• Mentions choisir un mot de passe et confirmer mot de passe choix de
l’internaute
o Mot de passe = 8 caractères minimum
o Mot de passe = 1 caractère spécial obligatoire
o Affiche « retaper mot de passe » quand correspond pas
• Bouton « suivant » pour accéder à la deuxième partie de l’inscription
• Au-dessus de l’identifiant, deux encarts permettent à l’utilisateur
d’importer dans le premier une image de profil, dans le second un logo
o Fenêtre s’affiche pour importer une photo depuis FB ou le PC
• Cette seconde page permet de mettre les informations pros sur
l’entreprise/stand
• Titre change et prend le nom complet inscrit sur la page précédente
(14px)
• Sur 30% de la page à gauche on retrouve un aperçu diaporama des
différentes photos importées
o Quand on importe une photo, il est obligatoire d’inscrire une
description (on essaie de faire importer les réalisations du stand)
o Les photos doivent être en HD
o Photos pas dépassés 10MO/photo
o Défilement auto toutes les 3s
• En-dessous se trouve le bouton d’importation des photos, à sa droite un
mémo du nombre de photos importées, en incluant la contrainte de 5
photos max
• A droite, une zone de texte où le professionnel inscrit son argumentaire de
stand (bio de l’entreprise, etc)
• En dessous de ces 2 encarts, on retrouve les photos importées avec la
description de celle-ci (obligatoire lors de l’importation)
• Termine l’inscription avec un bouton création de compte
• Cocher case obligatoire, clic sur le lien « j’accepte le termes » amène à la
page www.salonduchocolat.fr>conditionutilisation

6.2.15 Connexion utilisateur -> espace pro (après connexion)
Lien : www.lesalonduchocolat.fr>espacepro>nomutilisateur
6.2.15.1 Maquette
• But : connaitre réservation et ce que l’on a rempli
• Sur 30% de la page à gauche on retrouve un aperçu diaporama des
différentes photos importées
• Défilement des photos toutes les 3s
• En-dessous se trouve les 5 photos en miniatures, opacité 50% qui devient
opacité 100% au survol de la souris
• A droite, on retrouve ce qu’a écrit le professionnel lors de la création de
son compte (description du stand)
• Titre 14px
• Titre qui mentionne le nom + prénom du pro
• Juste en dessous, on retrouve la réservation du professionnel
o Son n° de stand
o Les jours de réservations
o Le tarif payé
Description de l’entrepriseDiaporama de photos importées
Aperçu des 5 photos

6.3 Page du site (version smartphone)
6.3.1 Changement du menu
6.3.1.1 Maquette
• Menu sous forme de 3 traits à gauche
• Logo au centre, au clic amène à la page d’accueil
• Clic 3 traits, affiche un déroulant des pages du site
o Ranger par thème (actualités, infos/présentation…)
o Chaque thème de page, au clic, affiche un déroulant des différentes
pages
o Se connecter sans déroulant
• Déroulant langue à droite (fr, en, de)
• Opacité 100%
• Menu 30% de la page
• Fond noir, simple
6.3.2 Disposition responsive
Disposé sous forme de « blocs » en colonne. Ex page après connexion
utilisateur : on dispose éléments dans cet ordre ; carte personnalisée, carte des
tables rondes, réservations.

6.4 Processus d’achat
6.4.1 Diagramme de flux

6.4.2 Plugin WooCommerce
Suivre l’assistant de configuration proposé par le plugin WooCommece.
Création des différents billets.
On ajoute à cela le plugin « multilinguale » qui permet de proposer la
boutique WooCommerce en plusieurs langues.
Pour suivre l’évolution des achats et des profits, on ajoute le plugin
« Google Analytics Integration » lié au compte Google qui analyse les
performances du site.
« WooCommerce One Page Checkout » est un plugin indispensable pour
effectuer les achats sur une même page. Le tunnel d’achat est ainsi facilité.
« PayPal Plus for WooCommerce » sera ajouté pour effectuer les achats
depuis PayPal.
6.5 Domaine et hébergement
6.5.1 Nom de domaine et hébergement
Le nom de domaine www.lesalonduchocolat.fr sera déposé au registre 1&1 et
aussi hébergé sur 1&1. Le renouvellement sera assuré par l’agence.
Type d’abonnement : UNLIMITED PRO => 10,79€
Ajout : Protection complète => 5,99€
Sidelock basic (protection malware) => 1,19€
Total : => 17,97€
Unlimited pro :
• 9GO de RAM
• 900 processus à la minute
• 300 visiteurs par jour
• Boite mail illimité (2GO par mail)
• Certificat SSL
• Performance
• Base de données illimitées (1go/SSD)
• Espace disque illimité
• Trafic illimité
• Protection anti-phishing & anti-spam
• Assistance 24/7
• Protection DDoS
• Connectivité jusqu’à 300Gbits/s

6.5.2 Email
Nous créerons un mail pour les personnes suivantes :
- Directeur du salon (M. Charain)
- Rédactrice marketing (Mme Dupont)
- Par défaut (Hello) => contact
Les mails seront de la manière suivante : Nom-prénom@salonchocolat.fr
La demande de mail supplémentaires est possible, gratuitement sur demande
client.
6.6 Accessibilité
6.6.1 Compatibilité navigateurs
Le site sera compatible avec les navigateurs suivants :
● Internet Explorer
● Mozilla Firefox
● Google Chrome
● Safari
● Opéra
6.6.2 Types d’appareils
Le site sera conçu de manière dite “responsive” pour qu’il assure une navigation
optimale sur tous types d’appareils :
● Téléphones mobiles
● Tablettes
● Ordinateurs portables
● Ordinateur de bureau
6.6.3 Normes d’accessibilité
Nous choisirons pour ce site la mention AA, qui concerne les handicapes
visuelles et auditives. Nous n’avons pas besoin de pousser les fonctionnalités du
site jusqu’aux handicapes moteurs car nous n’avons pas de services sur le site
qui permettent cela. Lors de la création du site, le client devra fournir la
description de chacune des images présentes sur le site lui appartenant. Il sera
aussi nécessaire que toutes les fonctions soient accessibles au clavier (ex : les
flèches permettent de naviguer sur la carte des exposants, …)
La langue par défaut de la page web prend en compte la langue système du PC
du visiteur. La page doit être contrôlable par l’utilisateur de manière fluide et
sans contrainte spécifique.

6.7 Services tiers
6.7.1 Google analytics
Le site sera connecté au compte Analytics du client, il pourra analyser
l’impact de ces campagnes et d’éventuels problèmes de lisibilités du site. Cela se
fera principalement avec notre aide la première semaine de recettage. Nous
pourrons éventuellement modifier certaines pages afin de les rendre plus
attrayante et améliorer l’expérience utilisateur du site.
6.7.2 Google Maps
Un plugin Google Maps est ajouté pour situer le salon du chocolat de Paris.
Celui-ci est un plugin WordPress, auquel il faudra ajouter une clé API (nécessite
un compte Google/Gmail)
6.8 Sécurité
L’accès aux comptes d’administration sera limité aux personnes suivantes :
● Direction du salon
● Gestionnaire des réservations/trésorerie
● Le chef de projet et la responsable de technique de l’agence Digitalizer
Un backup de la base de données est prévu et assuré par l’agence. Des
maintenances de sécurités sont assurés par la société 1&1 avec un abonnement
spécifique (malware, DDoS, Backup réalisé automatiquement tous les lundis
matin par le plugin BackupWup)
On installe une double authentification pour se connecter sur la page
d’administration de WordPress (wp-admin) grâce au plugin « Google
authenticator »
6.9 Maintenance et évolutions
En cours de négociation avec le client

UX Designer Graphiste Développeuse Chef de projet
291,67 € 333,33 € 500,00 € 416,67 €
Phase d'initialisation
Recueil des besoins 0,5 208,34 €
Cadrage 0,5 0,5 0,5 0,5 770,84 €
Proposition commerciale 2 833,34 €
Phase de lancement
Considérations graphiques 0,5 0,25 270,83 €
Considérations marketing 0,25 104,17 €
Spécifications fonctionnelles 0,25 0,25 0,25 302,09 €
Spécifications techniques 0,25 0,25 0,25 302,09 €
Cahier des charges 4 1 666,68 €
Phase de conception
Charte éditoriale 0,5 208,34 €
Rassemblement des ressources 0,5 208,34 €
Charte graphique 1 333,33 €
Maquette 1 3 1 291,66 €
Phase de production
Hébergement & domaine 0,25 125,00 €
Installation 0,25 125,00 €
Customisation du thème 3 5 8 6 541,66 €
Internationalisation 0,5 250,00 €
Création des mails & newsletter 0,5 250,00 €
Test & rectification 0,25 125,00 €
Déploiement 0,25 125,00 €
Phase d'exploitation
Formation WordPress 2 833,34 €
Recettage + analyse 1 416,67 €
Finalisation 0,5 0,5 0,5 604,17 €
Coût total (HT)
15 895,86 €
12,511,5Total temps 5,5 10
Temps et coût humain du projet
Coût total
Coût journalier
Tâches

Updating:0% May-7-18 2 H3:AK31 Aujourd'hui : 4/22/2018
Project Date de début Date de fin
Durée en
jours
Progression Responsable Couleur May-7 May-9 May-11 May-13 May-15 May-17 May-19 May-21 May-23 May-25 May-27 May-29 May-31 Jun-2 Jun-4 Jun-6 Jun-8 Jun-10 Jun-12 Jun-14 Jun-16 Jun-18 Jun-20
Phase d'initialisation 7-May 11-May 4 0% green
Recueil des besoins 7-May 7-May 1 0% Matthieu tomato
Cadrage 8-May 8-May 1 0% Equipe tomato
Proposition Commerciale 9-May 11-May 2 0% Matthieu tomato
Soutenance 14-May 14-May 1 0% Matthieu tomato
Phase de lancement 14-May 21-May 7 0% green
Considérations graphiques 14-May 14-May 1 0% Elisa orange
Considérations marketing 14-May 14-May 1 0% Matthieu orange
Spécifications fontionnelles 15-May 15-May 1 0% Matthieu, Margaux orange
Spécifications techniques 15-May 15-May 1 0% Matthieu, Margaux orange
Cahier des charges 16-May 21-May 5 0% Matthieu orange
Phase de conception 22-May 25-May 3 0% green
Charte éditoriale 22-May 22-May 1 0% Matthieu gold
Rasemblement ressources 22-May 22-May 1 0% Matthieu gold
Charte graphique 23-May 23-May 1 0% Elisa gold
Maquettes 24-May 25-May 1 0% Elisa, Eric gold
Phase de production 28-May 18-Jun 21 0% green
Hébergement & domaine 28-May 28-May 1 0% Margaux red
Installation 28-May 28-May 1 0% Margaux red
Customisation du thème 29-May 7-Jun 9 0% Margaux, Eric, Elisa red
Internationalisation 7-Jun 7-Jun 1 0% Margaux red
Création mail & newsletter 8-Jun 8-Jun 1 0% Margaux red
Test & rectification 11-Jun 11-Jun 1 0% Margaux red
Déploiement 11-Jun 18-Jun 7 0% Margaux red
Phase d'exploitation 12-Jun 18-Jun 6 0% green
Formation WordPress 12-Jun 14-Jun 2 0% Matthieu turquoise
Recettage & analyse 15-Jun 15-Jun 1 0% Matthieu turquoise
Finalisation 18-Jun 18-Jun 1 0% Matthieu turquoise

1
Contrat de prestations
Entre les SOUSSIGNÉS
Digitalizer dont le siège social est situé xxxxxxx, immatriculée au Registre du
Commerce et des Sociétés n°0000000000 représentée par Matthieu de Vergezac
habilité à signer les présentes
Ci-après dénommée « le Concepteur »
D’UNE PART
ET
La société Salon du chocolat, dont le siège social est situé au 1, rue de la Pyramide 75000
Paris, immatriculée au Registre du Commerce et des Sociétés n°000000000, représentée
par Frédéric Charain habilité à signer les présentes
Ci-après dénommée « le Client »
D’AUTRE PART

2
ARTICLE 1 – OBJET DU CONTRAT
Le présent contrat et ses annexes ont pour objet de définir les conditions dans lesquelles le
Concepteur, à la demande du Client, concevra et réalisera le site Internet du Client.
ARTICLE 2 – DURÉE DU CONTRAT
La conception du site Internet conformément au cahier des charges annexé au présent
contrat devra être achevée au plus tard dans X mois. L’achèvement de la conception du site
Internet devra être constatée par écrit par le Client, qui ne pourra refuser de constater
l’achèvement que dans le cas où le cahier des charges annexé n’aurait pas été respecté.
Les prestations de réactualisation du site Internet seront fournies pour une durée initiale de
1 mois à compter de la date de signature du présent contrat.
Après cette période initiale, la période de fourniture des prestations de réactualisation sera
renouvelable par tacite reconduction pour des périodes successives de 1 an, sauf
dénonciation par lettre recommandée avec accusé de réception par l’une ou l’autre des
parties, en respectant un préavis de 3 mois avant chaque échéance de reconduction.
ARTICLE 3 – PRESTATIONS DU CONCEPTEUR
3.1 Conception du site Internet
Le Concepteur réalisera la conception du service Internet selon les conditions définies dans
le cahier des charges annexé au présent contrat.
Le Concepteur devra prendre en charge et s’assurer de l’obtention des éventuelles
autorisations relatives aux droits d’auteur ou droits voisins qui en découlent.
Le Client devra communiquer au Concepteur toutes les informations nécessaires à la
conception du site Internet et à sa réactualisation, qui lui seront demandées par le
Concepteur.
Le Concepteur devra procéder à la mise en ligne du site Internet et de ses éventuelles
réactualisations.
3.2 Réactualisation
Le Concepteur s’engage à réaliser et à mettre en ligne les éventuelles réactualisations du
site Internet auxquelles le Client lui demandera de procéder, conformément au cahier des
charges annexé au présent contrat.
3.3 Travaux exceptionnels
Tous travaux exceptionnels demandés par le Client ne rentrant pas dans le cadre des
prestations définies dans le présent contrat et ses annexes feront l’objet d’un devis qui ne
sera exécuté qu’après accord des deux parties.

3
ARTICLE 4 – RESPONSABILITÉ DU CONCEPTEUR
Le Concepteur garantit seulement qu’il atteindra les objectifs fixés par le Client dans le
cahier des charges annexé au présent contrat.
[A cette fin, le Concepteur devra mettre en œuvre les techniques le plus adaptées aux besoins
exprimés par le Client et fournir des prestations d'une qualité répondant aux normes de qualité les plus
élevées.]
ARTICLE 5 – RESPONSABILITÉ DU CLIENT
Les informations diffusées sur le site Internet par le Client après sa mise en ligne le sont
sous sa seule et unique responsabilité.
Le Client s’engage à fournir au Concepteur des données loyales, de qualité et conformes à
la législation en vigueur.
Le Client s’engage à respecter l’ensemble des prescriptions légales et réglementaires en
vigueur relatives à l’informatique, aux fichiers et aux libertés.
ARTICLE 6 – PROPRIÉTÉ
L’ensemble des informations apportées par le Client de quelque nature que ce soit et sous
quelque format que ce soit (et notamment les pages HTML, fichiers images, sons, vidéo,
etc…) sont et resteront à tout moment la propriété du Client.
Pour ce qui est des créations réalisées par le Concepteur pour le Client, ce dernier en
acquiert la propriété au fur et à mesure du paiement des sommes dues pour la réalisation
des travaux en vertu de l’article 8 du présent contrat.
Le Client sera donc libre de modifier ou de reproduire l’ensemble des pages du site Internet,
les fichiers, programmes ou composantes du site Internet ainsi que ses réactualisations, et
ce pour une durée illimitée.
Le Concepteur accorde au Client le droit de ne pas faire figurer son nom, son logo ou
quelque mode d’identification que ce soit sur le site Internet ou sur tout autre document.
ARTICLE 7 – CONFIDENTIALITÉ
Chacune des parties au présent contrat s’engage en son nom comme en celui de ses
collaborateurs à considérer comme confidentiels, pendant la durée du présent contrat et
après son expiration, les documents, systèmes, logiciels, savoir-faire en provenance de
l’autre partie dont elle pourrait avoir eu connaissance à l’occasion de l’exécution du présent
contrat, et à ne pas les utiliser en dehors des besoins du présent accord.
Ne sont pas concernées par cette obligation de confidentialité les informations tombées
dans le domaine public ou dont la révélation a été autorisée par écrit par la partie concernée.

4
ARTICLE 8 – CONDITIONS FINANCIÈRES
La création du site Internet du Client sera facturée par le Concepteur pour un
montant forfaitaire de 16416,67 € HT, soit 19700 € TTC. Un acompte de 30% devra
être versé à signature du contrat dont le versement seul permettra le démarrage du
projet.
ARTICLE 9 –RÉFÉRENCES AU CLIENT
Le Client autorise le Concepteur à utiliser son nom et les produits développés pour son
compte aux fins de sa propre promotion commerciale (portfolio de l’agence).
ARTICLE 10 – RÉSILIATION
En cas de manquement grave par l’une des parties aux obligations des présentes, auquel
il n’aurait pas été remédié dans un délai de quinze jours à compter de la réception d'une
lettre recommandée avec demande d’avis de réception notifiant le manquement et
adressée par l’autre partie, cette dernière pourra faire valoir la résiliation du contrat sous
réserve de tous les dommages-intérêts auxquels elle pourrait prétendre.
Lorsque la résiliation est due à un manquement du Concepteur, celui-ci devra remettre au
Client tous les documents en sa possession concernant les travaux effectués dans le
cadre du présent contrat.
Cas de rupture
Côté Concepteur
Le concepteur pourra modifier les termes ou mettre fin au présent contrat dans le cas où
les informations fournies par le client seraient incomplètes ou trop tardivement fournies
pour permettre la réalisation du site dans les délais spécifiés par le présent contrat et
pourrait mettre en danger l’équilibre de son entreprise (et notamment retarder d’autres
contrats en cours).
Un planning précis sera fourni à cet effet au Client afin qu’il puisse connaître les échéances
précises du contrat.
Le concepteur pourra mettre fin au contrat si ces conditions de règlement ne sont pas
respectés par le client : exemple : défaut de paiement de l’acompte initial.
Côté Client
Le client pourra mettre fin au contrat si le produit livré ne correspond pas au cahier des
charges qui décrit le projet à réaliser.
Si des paiements supplémentaires non justifiés par le cahier des charges initial lui étaient
demandés.
Enfin, au cas où les délais de réalisation du site dépasseraient le double de ce qui était
initialement prévu par le présent contrat et ceci en raison d’un manquement injustifié du côté
du prestataire (hors maladie, cause réelle et motivée).

5
ARTICLE 11 – LITIGES
En cas de difficultés ou de différend entre les parties à l’occasion de l’interprétation, de
l’exécution ou de la résiliation du présent accord, les parties conviennent de rechercher une
solution amiable dans l’esprit du présent contrat.
Le présent contrat est soumis à la loi française et tout litige ou différend qui pourrait naître
entre les parties à l’occasion de l’interprétation, de l’exécution ou de la résiliation du présent
contrat relèvera de la compétence du tribunal de commerce de Bordeaux – 33000
Fait en deux exemplaires originaux
A , le
Pour le Concepteur Pour le Client

6
Annexe à ce document :
➢Proposition commerciale
➢Note de Cadrage
➢Cahier des Charges
➢Devis

Unacompte de 30 % sera demandé à la signature du devis Total HT 16416.67 €
Paiement par CB ou Virement uniquement TVA 3383,33 €
Total TTC 19 700,00 €
Signature du client précédée de la mention « Lu et approuvé, bon pour accord » :
DESCRIPTION TOTAL TTC
Phase d’initialisation
Etude faisabilité, préparation du cadre du projet,
Proposition commerciale et cahier des charges
1812,50 €
Phase de lancement
Considérations marketing et graphique
Spécifications fonctionnelles et techniques
2645,83 €
Phase de conception
Charte éditoriale, contenu du site
Maquette et charte graphique
2041,67 €
Phase de production
Création du site, customisation du thème, mailing,
Internationalisation, test et rectification
7541,67 €
Phase d’exploitation
Formation WordPress, recettage,
Analyse et finalisation
1854,17 €
Ressource
Abonnement annuel hébergement & domaine
Coût du thème
520,83 €
Référence du devis :
Numéro client :
Date de validité devis :
Modalité paiement :
Emis par :
Contact client :
Date de début de prestation :
Durée estimée de prestation :
Devis 1
33
01/06/2018
- 30% à la signature du devis
- règlement final à la livraison
de Vergezac Matthieu
Frédéric Charain
07/05/2018
8 semaines, livraison 5 semaines
Infos additionnelles
La livraison sera effectuée dans les 5 semaines après réception de la confirmation de commande.
Service Après-Vente : Non-inclus
DEVIS 1
Date : 25/03/2018
Réf.Client : SALONCHOCOLAT
Destinataire :
Frédéric Charain
Adresse salon
De :
Digitalizer
Adresse Digitalizer

Edité par de Vergezac Matthieu
Année de création : 2016
Projet : Initier et lancer
un projet mulditmédia :
Le salon du chocolat Paris (fictif)
Présentation orale
Cadre du projet : scolaire

DIGITALIZER
PRÉSENTATION PROJET : LE SALON DU CHOCOLAT

CONTEXTE
Frédéric Charain
Le salon du
chocolat de Paris moins de 6 mois
communication
site vitrine
Notoriété du salon
Système de
réservation de billetsAmateurs & pro Responsive
Voir : Note de cadrage

Communication
Présentation
Carte exposants
Réservation
Actualités presse
Informations salon
3
Voir : Proposition commerciale
WORDPRESS POUR REPONDRE AUX BESOINS
3
RESPONSIVE

ARBORESCENCE DU SITE
Accueil
Actualités
Blog
Galeries photos
On parle de nous
(presse)
Infos/présentation
Carte des
exposants
Exposant 1
Exposant 2
Intervenants
Intervenant 1
Intervenant 2
Nous trouver
Achat
Billetterie
Contact
Formulaire de
contact
Connexion
utilisateur
Connexion
Espace pro
4

INTERNATIONALISATION & CIBLES
5
8%
42%
36%
14%
42% Français
36% Anglais
14% Allemand
8% Russes
Exposants
Intervenants des tables
Commerçants
Professionnels du chocolat
Restauration
Chefs chocolatiers
Industriels
Fans Chefs chocolatiers
Amateurs
Touristes
Fans des intervenants
Presse locale
Bloggeur
Journalistes
PARTICULIERS PROFESSIONNELS

NOTRE ÉQUIPE SUR CE PROJET
MATTHIEU ÉRIC DIGITALIZER MARGAUX ÉLISA
6
Chef de Projet
Gestion d’équipe, du
projet et de son pilotage
UX Designer
S’attèle au parcours
utilisateur, de la fluidité
de navigation
Développeuse web
Transforme les idées en
codes, conception du
site
Graphiste
Conception graphique
du site, proposition
créative
Voir : Cahier des charges

WIREFRAME

FONCTIONNALITÉS : PAGE D’ACCUEIL
• Diaporama photos salon
• 2 boutons d’appels à l’action
• Liste des exposants avec
descriptif
• Liste des intervenants des tables
rondes
• Explication salon du chocolat
• Dernière retombée presse
• Formulaire de contact
• Map + adresse du salon + horaire
• Bas de page réseaux sociaux +
inscription newsletters

EXPOSANT (ex : Henri Dravan)
13

FONCTIONNALITÉS : CARTE & EXPOSANT
• Disposition des stands du salon
• Apparition des stands au survol de
la souris
• Carte imprimable avec tous les
stands en listing
• Fiche intervenant après carte salon
• Visuels sur les réalisations de
l’exposant
• Mise en favoris possible quand
connecté

DIAGRAMME DE FLUX ACHAT
15

PLANNING PRÉVISIONNEL
Du 7 au 11 mai 2018
PHASE DE LANCEMENT
Du 14 au 21 mai 2018
PHASE DE CONCEPTION
Du 22 au 25 mai 2018
PHASE DE PRODUCTION
Du 28 au 11 juin 2018
Du 12 au 18 juin 2018
16
Validation du
cahier des
charges
Validation
des
maquettes
Validation
proposition
commerciale
Validation de
la production
finale
Validation &
Formation
finale
Voir : Plan de charge

17
LIVRABLES DU PROJET
Phase Date Livrables
Initialisation 11 mai 2018 Proposition commerciale
Initialisation 14 mai 2018 Rapport de soutenance
Lancement 21 mai 2018 Cahier des charges
Conception 25 mai 2018 Maquettes
Production 8 juin 2018 Mail
Production 11 juin 2018 Site fonctionnel
Exploitation 12 juin 2018 Formation WordPress
Exploitation 18 juin 2018 Rapport d’analyse et
finalisation site

DIAGRAMME DE GANTT DU PROJET
Lien vers Diagramme de Gantt
18
Voir : Diagramme de Gantt

BUDGET PRÉVISIONNEL
19
1812,50 €
PHASE DE LANCEMENT
2645,83 €
PHASE DE CONCEPTION
2041,67 €
PHASE DE PRODUCTION
7541,67 €
1854,17 €
ESTIMATION
DU BUDGET
On en a pour
16416,67€ (HT)
RETOUCHES APRES
ANALYSE = OFFERT !
HEBERGEMENT + THEME
520,83 €
Voir : Devis

DOCUMENTS À CONSULTER
Documents présents sur le drive suivant :
https://drive.google.com/open?id=1tPokIPlEqJpijhQogSdFZE46PACH4VcR
1 Note de cadrage
2 Proposition commerciale
3 Cahier des charges
4 Plan de charge +
Gantt
6 Contrat de Prestation
7 Devis
1
2
3
4
5
6
7

Salon chocolat

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Salon chocolat

Semelhante a Salon chocolat (20)

Mais de Matthieu de Vergezac

Mais de Matthieu de Vergezac (8)

Salon chocolat