Télécharger pour lire hors ligne
![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
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.](https://image.slidesharecdn.com/salonchocolat-200122161453/85/Salon-chocolat-72-320.jpg)
![Stratégie digitale 360 [alger 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/stratgiedigitale360alger2014-140103032008-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[MÉMOIRE] Améliorer l'image de marque d'une entreprise sur les médias sociaux...](https://cdn.slidesharecdn.com/ss_thumbnails/mmoirebourzatadrien-120607141918-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Salon chocolat
- 1. Edité par deVergezac 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
- 2. Page 1 Note deCadrage 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
- 3. Page 2 Contexte Notre clientFré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.
- 4. DIGITALIZER PROPOSITION COMMERCIALE Adresse deDigitalizer - 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
- 5. RÉPONSE A VOTREAPPEL 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 !
- 6. CONTEXTE Le salon duchocolat… 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
- 7. FOCUS SUR LESBESOINS 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
- 8. EXPLOITATION DU CMSEN 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
- 9. 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
- 10. OPTIMISATION DU REFERENCEMENT Parceque 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
- 11. PARCE QUE LECHOCOLAT 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
- 12. TRAME A SUIVRE Ledé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.
- 13. ARBORESCENCE DU SITE Compositiondu 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
- 14. PLANNING PRÉVISIONNEL Présentation desdiffé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
- 15. CONCLUSION De la propositioncommerciale… 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
- 16. BUDGET PREVISIONNEL Le coûtdes prestations… 15 PHASE D’INITIALISATION 1808,52 € PHASE DE LANCEMENT 2645,86 € PHASE DE CONCEPTION 2041,67 € PHASE DE PRODUCTION 7541,66 € PHASE D’EXPLOITATION 1854,18 € ESTIMATION DU BUDGET En ajoutant le thème et l’hébergement on a 19700€ tout compris ! RETOUCHES APRES ANALYSE = OFFERT !
- 17. NOTRE AGENCE Ce quifait 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
- 18. Gestion e-commerce Augmenter lechiffre 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
- 19. NOUS TRANSFORMONS VOS IDEESEN 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
- 20. SITES DE REFERENCES Ceque nous avons réalisés… 19
- 21. NOS 4 PASSIONNÉS Parceque 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 !
- 22.
- 23. Cahier des Charges LESALON 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
- 24. Sommaire 1 Cadre duprojet .................................................................................... 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
- 25. 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
- 26. 1 Cadre duprojet 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.
- 27. 1.4 Livrables Phase DateLivrables 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
- 28. 1.6 Planning prévisionnel Lienvers Diagramme de Gantt
- 29.
- 31. LE SALON INTERNATIONALDE 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
- 33. LE SALON DUMONDIAL 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
- 36. LE SALON PLANETEBIERE : 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
- 37. 3 Considérations marketing Lagestion 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.
- 38. 3.2 International Le salonsera 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
- 39. Liste des différentsliens 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
- 40. 4 Conception graphique 4.1Brief 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)
- 41. 5 Spécifications fonctionnelles 5.1Périmètre fonctionnel
- 42. 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
- 43. 6 Constitution despages & 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 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
- 44. 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 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
- 45. Réservation pro, parici…>
- 46. 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.
- 47. 6.2.2 Actualités (ancragepages blog + galerie photo + presse) Lien : www.lesalonduchocolat.fr>actualités Ancrage : www.lesalonduchocolat.fr>actualités>blog www.lesalonduchocolat.fr>actualités>galeriephotos www.lesalonduchocolat.fr>actualités>presse 6.2.2.1 Maquette
- 48. 6.2.2.2 Spécifications • 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 : www.lesalonduchocolat.fr>actualités>galeriephotos o 3ème partie = presse : www.lesalonduchocolat.fr>actualités>presse
- 49. 6.2.3 Infos/présentation ->Carte Lien : www.lesalonduchocolat.fr>infospresentation>carte 6.2.3.1 Maquette 6.2.3.2 Spécifications • 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
- 50. 6.2.4 Infos/présentation ->exposants (ex : Henri Dravan) Lien : www.lesalonduchocolat.fr>infospresentation>carte>Henri-Dravan 6.2.4.1 Maquette 6.2.4.2 Spécifications • 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
- 51. 6.2.5 Infos/présentation ->liste des intervenants Lien : www.lesalonduchocolat.fr>infospresentation>intervenants 6.2.5.1 Maquette 6.2.5.2 Spécifications • 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
- 52. 6.2.6 Infos/présentation ->intervenant (après clic) Lien : www.lesalonduchocolat.fr>infospresentation>intervenants>Marie-Oprine 6.2.6.1 Maquette 6.2.6.2 Spécifications • 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
- 53. 6.2.7 Infos/présentation ->nous trouver Lien : www.lesalonduchocolat.fr>infospresentation>noustrouver 6.2.7.1 Maquette 6.2.7.2 Spécifications • 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
- 54. 6.2.8 Achat ->Billetterie Lien : achat www.lesalonduchocolat.fr>achat>billetterie pro www.lesalonduchocolat.fr>achat>réservationpro 6.2.8.1 Maquette 6.2.8.2 Spécifications • 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
- 55. 6.2.9 Contact Lien :www.lesalonduchocolat.fr>contact 6.2.9.1 Maquette 6.2.9.2 Spécifications • 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)
- 56. 6.2.10 Connexion utilisateur-> Particulier (connexion) Lien : www.lesalonduchocolat.fr>particulier>connexion 6.2.10.1 Maquette 6.2.10.2 Spécifications • 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
- 57. 6.2.11 Connexion utilisateur-> particulier (création) Lien : www.lesalonduchocolat.fr>particulier>création 6.2.11.1 Maquette 6.2.11.2 Spécifications • 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
- 58. 6.2.12 Connexion utilisateur-> particulier (après connexion) Lien : www.lesalonduchocolat.fr>particulier>nomutilisateur> www.lesalonduchocolat.fr>particulier>nomutilisateur>carteperso www.lesalonduchocolat.fr>particulier>nomutilisateur>réservations 6.2.12.1 Maquette 6.2.12.2 Spécifications • 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
- 59. 6.2.13 Connexion utilisateur-> espace pro (connexion) Lien : www.lesalonduchocolat.fr>espacepro 6.2.13.1 Maquette 6.2.13.2 Spécifications • 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
- 60. 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
- 61. 6.2.14.2 Spécifications • 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
- 62. 6.2.15 Connexion utilisateur-> espace pro (après connexion) Lien : www.lesalonduchocolat.fr>espacepro>nomutilisateur 6.2.15.1 Maquette 6.2.15.2 Spécifications • 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
- 63. 6.3 Page dusite (version smartphone) 6.3.1 Changement du menu 6.3.1.1 Maquette 6.3.1.2 Spécifications • 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.
- 64. 6.4 Processus d’achat 6.4.1Diagramme de flux
- 65. 6.4.2 Plugin WooCommerce Suivrel’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
- 66. 6.5.2 Email Nous créeronsun 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.
- 67. 6.7 Services tiers 6.7.1Google 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
- 68. UX Designer GraphisteDé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
- 69. Updating:0% May-7-18 2H3: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
- 70. 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 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
- 71. 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 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.
- 72. 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 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.
- 73. 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 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).
- 74. 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 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
- 75. 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 6 Annexe à ce document : ➢Proposition commerciale ➢Note de Cadrage ➢Cahier des Charges ➢Devis
- 76. 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 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
- 77. Edité par deVergezac 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
- 78. DIGITALIZER PRÉSENTATION PROJET :LE SALON DU CHOCOLAT
- 79. CONTEXTE Frédéric Charain Le salondu 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
- 80. Communication Présentation Carte exposants Réservation Actualités presse Informationssalon 3 Voir : Proposition commerciale WORDPRESS POUR REPONDRE AUX BESOINS 3 RESPONSIVE
- 81. ARBORESCENCE DU SITE Accueil Actualités Blog Galeriesphotos 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
- 82. 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
- 83. NOTRE ÉQUIPE SURCE 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
- 84. WIREFRAME Voir : Cahierdes charges
- 85.
- 86.
- 87.
- 88. FONCTIONNALITÉS : PAGED’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
- 89.
- 90. EXPOSANT (ex :Henri Dravan) 13
- 91. 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é
- 92. DIAGRAMME DE FLUXACHAT 15 Voir : Cahier des charges
- 93. PLANNING PRÉVISIONNEL PHASE D’INITIALISATION Du7 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 16 Validation du cahier des charges Validation des maquettes Validation proposition commerciale Validation de la production finale Validation & Formation finale Voir : Plan de charge
- 94. 17 LIVRABLES DU PROJET PhaseDate 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 Voir : Cahier des charges
- 95. DIAGRAMME DE GANTTDU PROJET Lien vers Diagramme de Gantt 18 Voir : Diagramme de Gantt
- 96. BUDGET PRÉVISIONNEL 19 PHASE D’INITIALISATION 1812,50€ PHASE DE LANCEMENT 2645,83 € PHASE DE CONCEPTION 2041,67 € PHASE DE PRODUCTION 7541,67 € PHASE D’EXPLOITATION 1854,17 € ESTIMATION DU BUDGET On en a pour 16416,67€ (HT) RETOUCHES APRES ANALYSE = OFFERT ! HEBERGEMENT + THEME 520,83 € Voir : Devis
- 97. DOCUMENTS À CONSULTER Documentspré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