SlideShare une entreprise Scribd logo
CAHIER DES CHARGES WEB
VERSION 1.0
KUNG FOOD
TABLE DES MARTIERES
1.1 DESCRIPTIF DU PROJET................................................................................................................ 4
1.2 GLOSSAIRE................................................................................................................................... 5
1.3 PROFILS UTILISATEURS................................................................................................................ 5
1.3 IMPACT MAPPING ....................................................................................................................... 6
2.1 NORMES D’ACCESSIBILITE........................................................................................................... 8
2.2 OPTIMISATIONS SEO................................................................................................................... 8
2.3 OUTILS DE TRACKING .................................................................................................................. 9
2.4 WEB DESIGN............................................................................................................................. 10
2.5 ARBORESCENCE........................................................................................................................ 11
3. WIREFRAMES............................................................................................................................ 13
SECTION 1
1.1 DESCRIPTIF DU PROJET
La création des pages Web faisant l’objet du présent cahier des
charges intervient dans le cadre d’une vision globale sur
l’année 2019 pour le futur de Kung Food.
La création de ces pages Web contribue à la réalisation de nos
objectifs globaux, et viennent contribuer au site déjà existant.
Il ne s’agit ici que de rajouter au site KungFood, utilisant la
charte éditoriale et graphique de l’entreprise.
Documents annexes au projet :
 Plan d’action opérationnel (Planning)
 Charte éditoriale KungFood
 Charte graphique KungFood
 Document de référence technique
Ce document reprend l’ensemble des éléments opérationnels
relatifs à la création des pages Web suivantes sur le site Kung
Food :
 A propos de Kung Food
 Carrières
1.2 GLOSSAIRE
Les acronymes utilisés dans ce document sont explicités
comme suit :
 SEO : Search Engine Optimization
 WCAG : Web Content Accessibility Guidelines
 ATAG : Authoring Tool Accessibility Guidelines
 UAAG : User Agent Accessibility Guidelines
 XAG : XML Accessibility Guidelines
 XML : Extensive Markup Language
1.3 PROFILS UTILISATEURS
Les profils qui fréquenteront nos pages seront les suivantes :
 Visiteur (non-identifié)
 Utilisateur (identifié)
 Administrateur
Les spécificités propres à chaque profil seront explicitées dans
la partie suivante : Impact Mapping.
1.3 IMPACT MAPPING
BESOIN PAGES
FONCTIONNALITES
ASSOCIEE
SECTION 2
2.1 NORMES D’ACCESSIBILITE
Les contraintes d’accessibilité propres à la création des deux
pages « A propos » et « Carrière », suivront les mêmes
contraintes que le reste du site déjà existant. Ils suivront donc
les normes W3C : https://www.w3.org/
2.2 OPTIMISATIONS SEO
 Optimisations des mots clés & du contenu : choix des
mots clés à cibler.
 Optimisation technique de la page (Le code HTML, la
balise title, la balise Meta description, les URL, les
redirections, le charset, etc...)
 Le « Linking » interne du site.
 Renommer les URL pour qu'elles soient simples et
agréables à lire (ex : http://www.monsite.fr?article=43
devient http://www.monsite.fr/actualite/titre-de-mon-actu);
2.3 OUTILS DE TRACKING
Les outils de suivi à mettre en place sont déjà à l’œuvre sur le
site de KungFood. Nous pourrons assurer une veille efficace du
système, en utilisant ces outils :
 Google Analytics
 SEMrush
 Hotjar
Les documents annexes nous servirons également à assurer le
suivi et la cohérence de nos actions dans un cadre global.
 Plan d’action opérationnel (Planning)
 Charte éditoriale KungFood
 Charte graphique KungFood
 Cahier des charges technique et fonctionnel du site
existant
 Le présent cahier des charges
Nous pouvons également assurer un suivi de projet pour la
rétro-planification des tâches techniques :
 GanttProject
 Wricke
2.4 WEB DESIGN
Dans l’optique de s’adapter à tous les équipements, nous
axons notre design vers une démarche « Responsive ».
2.5 ARBORESCENCE
Rubriques
Sections
Sous-rubriques
SECTION 3
3. WIREFRAMES
Spécifications fonctionnelles :
1 : Outil de navigation principal, commun à l’ensemble du site, il permet de
naviguer à travers les différentes sections, et le cas échéant « A propos »
et « Carrière ».
2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve.
3 : Outil de sélection de rubrique en « accordéon », permettant de changer
de rubrique par sélection.
Pour la rubrique « L’équipe » de la section « A propos », la description du
contenu est scindée en 4 parties :
-RH
-Data
-Marketing
-Développement
On sélectionne la partie désirée par choix de l’onglet d’affichage.
4 : Une photo du membre de l’équipe servant d’entête pour la partie
affichée.
5 : Descriptif du poste :
-Le rôle & missions
-Une journée type
-La place au sein de l’équipe
La flèche est un outil de lien permettant de ramener à la fiche de poste
complète de la partie affichée.
Spécifications fonctionnelles :
1 : Outil de navigation principal, commun à l’ensemble du site, il permet de
naviguer à travers les différentes sections, et le cas échéant « A propos »
et « Carrière ».
2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve.
3 : Outil de sélection de rubrique en « accordéon », permettant de changer
de rubrique par sélection.
On sélectionne la partie désirée par choix de l’onglet d’affichage.
4 : Un lien Google Maps permettant d’accéder à la position géographique
de l’entreprise KungFood.
Une photo du pôle de l’équipe servant d’entête pour la partie affichée.
5 : Une description des lieux : de l’environnement, et de l’ergonomie de
travail et le cadre général
Spécifications fonctionnelles :
1 : Outil de navigation principal, commun à l’ensemble du site, il permet de
naviguer à travers les différentes sections, et le cas échéant « A propos »
et « Carrière ».
2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve.
3 : Outil de sélection de rubrique en « accordéon », permettant de changer
de rubrique par sélection.
On sélectionne la partie désirée par choix de l’onglet d’affichage.
4 : Un outil d’affichage style « cover flow », permettant de visualiser
différentes sections par glissement, avec un descriptif affiché et un effet sur
le visuel [5]
5 : Un visuel de progression circulaire, en lien avec la cover flow, qui traduit
un avancement dans la journée selon la partie du cover flow qu’on affiche.
Spécifications fonctionnelles :
1 : Outil de navigation principal, commun à l’ensemble du site, il permet de
naviguer à travers les différentes sections, et le cas échéant « A propos »
et « Carrière ».
2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve.
3 : Outil de sélection de rubrique en « accordéon », permettant de changer
de rubrique par sélection.
On sélectionne la partie désirée par choix de l’onglet d’affichage.
4 : L’histoire de l’entreprise comme explicité dans la plateforme sera
exposé dans cette section.
Spécifications fonctionnelles :
1 : Outil de navigation principal, commun à l’ensemble du site, il permet de
naviguer à travers les différentes sections, et le cas échéant « A propos »
et « Carrière ».
2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve.
3 : Outil de sélection de rubrique en « accordéon », permettant de changer
de rubrique par sélection.
4 : Pour la rubrique «Offre » de la section « Carrière », la description du
contenu est scindée en 4 sous-rubriques :
-RH
-Data
-Marketing
-Développement
On sélectionne la partie désirée par choix de l’onglet d’affichage.
5 : Descriptif des offres :
-L’image
-Le titre
-La catégorie de métier
-Le salaire
-La date de publication
La flèche est un outil de lien permettant de ramener à la fiche de poste
complète.
Spécifications fonctionnelles :
1 : Outil de navigation principal, commun à l’ensemble du site, il permet de
naviguer à travers les différentes sections, et le cas échéant « A propos »
et « Carrière ».
2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve.
3 : Outil de sélection de rubrique en « accordéon », permettant de changer
de rubrique par sélection.
On sélectionne la partie désirée par choix de l’onglet d’affichage.
4 : Pour la rubrique «Espace utilisateur » de la section « Carrière », la
description du contenu est scindée en 4 sous-rubriques :
-Suivi de candidature
-Messagerie (permet d’accéder au formulaire d’envoie et réception de
messages) via la section espace personnelle
5 : Descriptif des candidatures déposées :
-Intitulé du poste
-Date de dépôt de candidature
-Statut du traitement de candidature
Un clic sur la candidature déposée permet d’accéder à la fiche de poste
complète de la sous rubrique « Offres ».

Contenu connexe

Tendances

Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Valls y Machinant David - Auteur sur : Carrefourdesreussites.com
 
Mémoire Professionnel - En quoi l’utilisation du marketing digital peut perm...
Mémoire Professionnel  - En quoi l’utilisation du marketing digital peut perm...Mémoire Professionnel  - En quoi l’utilisation du marketing digital peut perm...
Mémoire Professionnel - En quoi l’utilisation du marketing digital peut perm...
Thibault PAILLIER
 
Transformation digitale : effet de mode ou révolution ?
Transformation digitale : effet de mode ou révolution ? Transformation digitale : effet de mode ou révolution ?
Transformation digitale : effet de mode ou révolution ?
Publicis Consultants
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
Laribi Aicha
 
Décathlon : Stratégie de distribution et Merchandising de l'enseigne
Décathlon : Stratégie de distribution et Merchandising de l'enseigneDécathlon : Stratégie de distribution et Merchandising de l'enseigne
Décathlon : Stratégie de distribution et Merchandising de l'enseigne
Marketing du Sport et des Loisirs
 
Plan de communication interne
Plan de communication internePlan de communication interne
Plan de communication interne
Michel Stawniak
 
Plan marketing
Plan marketingPlan marketing
Plan marketing
Michel Stawniak
 
PROJET FIN D'ETUDE.pdf
PROJET FIN D'ETUDE.pdfPROJET FIN D'ETUDE.pdf
PROJET FIN D'ETUDE.pdf
IlyasseBanan1
 
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
Benjamin Poisson
 
Axes et outils d'une stratégie digitale
Axes et outils d'une stratégie digitaleAxes et outils d'une stratégie digitale
Axes et outils d'une stratégie digitale
Grégoire Lievens
 
Mise en place d'une stratégie de marketing digital
Mise en place d'une stratégie de marketing digital Mise en place d'une stratégie de marketing digital
Mise en place d'une stratégie de marketing digital
Karim Ben Alaya
 
Stratégie d'entreprise - Etude de cas : Décathlon
Stratégie d'entreprise - Etude de cas : DécathlonStratégie d'entreprise - Etude de cas : Décathlon
Stratégie d'entreprise - Etude de cas : Décathlon
Benjamin Poisson
 
Mémoire professionnel : La stratégie digitale dans la relation client
Mémoire professionnel : La stratégie digitale dans la relation clientMémoire professionnel : La stratégie digitale dans la relation client
Mémoire professionnel : La stratégie digitale dans la relation client
Floriane Akpa
 
Plan de communication digitale
Plan de communication digitalePlan de communication digitale
Plan de communication digitale
Tarik Zghinou
 
Mémoire Marketing Digital - E-Commerce et Personnalisation
Mémoire Marketing Digital - E-Commerce et PersonnalisationMémoire Marketing Digital - E-Commerce et Personnalisation
Mémoire Marketing Digital - E-Commerce et Personnalisation
Pamela Desvignes
 
Marque marwa nouvelle stratégie digitale
Marque marwa nouvelle stratégie digitale Marque marwa nouvelle stratégie digitale
Marque marwa nouvelle stratégie digitale
maryaslm
 
Stratégie Digitale Carrefour
Stratégie Digitale CarrefourStratégie Digitale Carrefour
Stratégie Digitale Carrefour
Hiba Dridi
 
Etude de Cas - Adidas
Etude de Cas - AdidasEtude de Cas - Adidas
Etude de Cas - Adidas
redalem
 
Soutenance MéMoire V3
Soutenance MéMoire V3Soutenance MéMoire V3
Soutenance MéMoire V3
Titiopendoor
 
Rédaction d'un cahier des charges web
Rédaction d'un cahier des charges webRédaction d'un cahier des charges web
Rédaction d'un cahier des charges web
Forestier Mégane
 

Tendances (20)

Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !
 
Mémoire Professionnel - En quoi l’utilisation du marketing digital peut perm...
Mémoire Professionnel  - En quoi l’utilisation du marketing digital peut perm...Mémoire Professionnel  - En quoi l’utilisation du marketing digital peut perm...
Mémoire Professionnel - En quoi l’utilisation du marketing digital peut perm...
 
Transformation digitale : effet de mode ou révolution ?
Transformation digitale : effet de mode ou révolution ? Transformation digitale : effet de mode ou révolution ?
Transformation digitale : effet de mode ou révolution ?
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
Décathlon : Stratégie de distribution et Merchandising de l'enseigne
Décathlon : Stratégie de distribution et Merchandising de l'enseigneDécathlon : Stratégie de distribution et Merchandising de l'enseigne
Décathlon : Stratégie de distribution et Merchandising de l'enseigne
 
Plan de communication interne
Plan de communication internePlan de communication interne
Plan de communication interne
 
Plan marketing
Plan marketingPlan marketing
Plan marketing
 
PROJET FIN D'ETUDE.pdf
PROJET FIN D'ETUDE.pdfPROJET FIN D'ETUDE.pdf
PROJET FIN D'ETUDE.pdf
 
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
 
Axes et outils d'une stratégie digitale
Axes et outils d'une stratégie digitaleAxes et outils d'une stratégie digitale
Axes et outils d'une stratégie digitale
 
Mise en place d'une stratégie de marketing digital
Mise en place d'une stratégie de marketing digital Mise en place d'une stratégie de marketing digital
Mise en place d'une stratégie de marketing digital
 
Stratégie d'entreprise - Etude de cas : Décathlon
Stratégie d'entreprise - Etude de cas : DécathlonStratégie d'entreprise - Etude de cas : Décathlon
Stratégie d'entreprise - Etude de cas : Décathlon
 
Mémoire professionnel : La stratégie digitale dans la relation client
Mémoire professionnel : La stratégie digitale dans la relation clientMémoire professionnel : La stratégie digitale dans la relation client
Mémoire professionnel : La stratégie digitale dans la relation client
 
Plan de communication digitale
Plan de communication digitalePlan de communication digitale
Plan de communication digitale
 
Mémoire Marketing Digital - E-Commerce et Personnalisation
Mémoire Marketing Digital - E-Commerce et PersonnalisationMémoire Marketing Digital - E-Commerce et Personnalisation
Mémoire Marketing Digital - E-Commerce et Personnalisation
 
Marque marwa nouvelle stratégie digitale
Marque marwa nouvelle stratégie digitale Marque marwa nouvelle stratégie digitale
Marque marwa nouvelle stratégie digitale
 
Stratégie Digitale Carrefour
Stratégie Digitale CarrefourStratégie Digitale Carrefour
Stratégie Digitale Carrefour
 
Etude de Cas - Adidas
Etude de Cas - AdidasEtude de Cas - Adidas
Etude de Cas - Adidas
 
Soutenance MéMoire V3
Soutenance MéMoire V3Soutenance MéMoire V3
Soutenance MéMoire V3
 
Rédaction d'un cahier des charges web
Rédaction d'un cahier des charges webRédaction d'un cahier des charges web
Rédaction d'un cahier des charges web
 

Similaire à Cahier des charges web

Cours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internetCours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internet
Nicolas Rouat
 
Cahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internetCahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internet
Karim Ayari
 
Content square
Content squareContent square
Content square
Pierre Renaudeau
 
Administrer Salesforce
Administrer SalesforceAdministrer Salesforce
Administrer Salesforce
Axel KAMALAK
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIP
Cyberco
 
Web 2.0 par nouvelle MARQUE
Web 2.0 par nouvelle MARQUEWeb 2.0 par nouvelle MARQUE
Web 2.0 par nouvelle MARQUE
nouvelle MARQUE
 
Plan cahier-des-charges
Plan cahier-des-chargesPlan cahier-des-charges
Plan cahier-des-charges
walouziz
 
Tutoriaux
TutoriauxTutoriaux
Tutoriaux
modokimokona
 
Publier des contenus_dans_rubriques_v2-2
Publier des contenus_dans_rubriques_v2-2Publier des contenus_dans_rubriques_v2-2
Publier des contenus_dans_rubriques_v2-2
cdipatrizi
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMM
Abdelmonem NAAMANE
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
Jean Michel
 
Fichescoop it-120802042824-phpapp02
Fichescoop it-120802042824-phpapp02Fichescoop it-120802042824-phpapp02
Fichescoop it-120802042824-phpapp02
Imane Ouaïch
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
Nicolas Morin
 
Guide d'utilisation site colibri ville
Guide d'utilisation   site colibri villeGuide d'utilisation   site colibri ville
Guide d'utilisation site colibri ville
Peggy Le Déaut ☂️
 
Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop
amat samiâ boualil
 
EDweb2.0
EDweb2.0EDweb2.0
EDweb2.0
lvillard
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
Relax In The Air
 

Similaire à Cahier des charges web (20)

Cours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internetCours 2-cahier des-charges_de_realisation_de_site_internet
Cours 2-cahier des-charges_de_realisation_de_site_internet
 
Cahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internetCahier des charges_de_realisation_de_site_internet
Cahier des charges_de_realisation_de_site_internet
 
Content square
Content squareContent square
Content square
 
Tutoriel netvibes
Tutoriel netvibesTutoriel netvibes
Tutoriel netvibes
 
Administrer Salesforce
Administrer SalesforceAdministrer Salesforce
Administrer Salesforce
 
Tutoriel SPIP
Tutoriel SPIPTutoriel SPIP
Tutoriel SPIP
 
Web 2.0 par nouvelle MARQUE
Web 2.0 par nouvelle MARQUEWeb 2.0 par nouvelle MARQUE
Web 2.0 par nouvelle MARQUE
 
Plan cahier-des-charges
Plan cahier-des-chargesPlan cahier-des-charges
Plan cahier-des-charges
 
Tutoriaux
TutoriauxTutoriaux
Tutoriaux
 
Publier des contenus_dans_rubriques_v2-2
Publier des contenus_dans_rubriques_v2-2Publier des contenus_dans_rubriques_v2-2
Publier des contenus_dans_rubriques_v2-2
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMM
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
 
Fichescoop it-120802042824-phpapp02
Fichescoop it-120802042824-phpapp02Fichescoop it-120802042824-phpapp02
Fichescoop it-120802042824-phpapp02
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
Guide d'utilisation site colibri ville
Guide d'utilisation   site colibri villeGuide d'utilisation   site colibri ville
Guide d'utilisation site colibri ville
 
Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop
 
EDweb2.0
EDweb2.0EDweb2.0
EDweb2.0
 
Edweb2.0
Edweb2.0Edweb2.0
Edweb2.0
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 

Cahier des charges web

  • 1. CAHIER DES CHARGES WEB VERSION 1.0 KUNG FOOD
  • 2. TABLE DES MARTIERES 1.1 DESCRIPTIF DU PROJET................................................................................................................ 4 1.2 GLOSSAIRE................................................................................................................................... 5 1.3 PROFILS UTILISATEURS................................................................................................................ 5 1.3 IMPACT MAPPING ....................................................................................................................... 6 2.1 NORMES D’ACCESSIBILITE........................................................................................................... 8 2.2 OPTIMISATIONS SEO................................................................................................................... 8 2.3 OUTILS DE TRACKING .................................................................................................................. 9 2.4 WEB DESIGN............................................................................................................................. 10 2.5 ARBORESCENCE........................................................................................................................ 11 3. WIREFRAMES............................................................................................................................ 13
  • 4. 1.1 DESCRIPTIF DU PROJET La création des pages Web faisant l’objet du présent cahier des charges intervient dans le cadre d’une vision globale sur l’année 2019 pour le futur de Kung Food. La création de ces pages Web contribue à la réalisation de nos objectifs globaux, et viennent contribuer au site déjà existant. Il ne s’agit ici que de rajouter au site KungFood, utilisant la charte éditoriale et graphique de l’entreprise. Documents annexes au projet :  Plan d’action opérationnel (Planning)  Charte éditoriale KungFood  Charte graphique KungFood  Document de référence technique Ce document reprend l’ensemble des éléments opérationnels relatifs à la création des pages Web suivantes sur le site Kung Food :  A propos de Kung Food  Carrières
  • 5. 1.2 GLOSSAIRE Les acronymes utilisés dans ce document sont explicités comme suit :  SEO : Search Engine Optimization  WCAG : Web Content Accessibility Guidelines  ATAG : Authoring Tool Accessibility Guidelines  UAAG : User Agent Accessibility Guidelines  XAG : XML Accessibility Guidelines  XML : Extensive Markup Language 1.3 PROFILS UTILISATEURS Les profils qui fréquenteront nos pages seront les suivantes :  Visiteur (non-identifié)  Utilisateur (identifié)  Administrateur Les spécificités propres à chaque profil seront explicitées dans la partie suivante : Impact Mapping.
  • 6. 1.3 IMPACT MAPPING BESOIN PAGES FONCTIONNALITES ASSOCIEE
  • 8. 2.1 NORMES D’ACCESSIBILITE Les contraintes d’accessibilité propres à la création des deux pages « A propos » et « Carrière », suivront les mêmes contraintes que le reste du site déjà existant. Ils suivront donc les normes W3C : https://www.w3.org/ 2.2 OPTIMISATIONS SEO  Optimisations des mots clés & du contenu : choix des mots clés à cibler.  Optimisation technique de la page (Le code HTML, la balise title, la balise Meta description, les URL, les redirections, le charset, etc...)  Le « Linking » interne du site.  Renommer les URL pour qu'elles soient simples et agréables à lire (ex : http://www.monsite.fr?article=43 devient http://www.monsite.fr/actualite/titre-de-mon-actu);
  • 9. 2.3 OUTILS DE TRACKING Les outils de suivi à mettre en place sont déjà à l’œuvre sur le site de KungFood. Nous pourrons assurer une veille efficace du système, en utilisant ces outils :  Google Analytics  SEMrush  Hotjar Les documents annexes nous servirons également à assurer le suivi et la cohérence de nos actions dans un cadre global.  Plan d’action opérationnel (Planning)  Charte éditoriale KungFood  Charte graphique KungFood  Cahier des charges technique et fonctionnel du site existant  Le présent cahier des charges Nous pouvons également assurer un suivi de projet pour la rétro-planification des tâches techniques :  GanttProject  Wricke
  • 10. 2.4 WEB DESIGN Dans l’optique de s’adapter à tous les équipements, nous axons notre design vers une démarche « Responsive ».
  • 13. 3. WIREFRAMES Spécifications fonctionnelles : 1 : Outil de navigation principal, commun à l’ensemble du site, il permet de naviguer à travers les différentes sections, et le cas échéant « A propos » et « Carrière ». 2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve. 3 : Outil de sélection de rubrique en « accordéon », permettant de changer de rubrique par sélection. Pour la rubrique « L’équipe » de la section « A propos », la description du contenu est scindée en 4 parties : -RH -Data -Marketing -Développement On sélectionne la partie désirée par choix de l’onglet d’affichage. 4 : Une photo du membre de l’équipe servant d’entête pour la partie affichée. 5 : Descriptif du poste : -Le rôle & missions -Une journée type -La place au sein de l’équipe La flèche est un outil de lien permettant de ramener à la fiche de poste complète de la partie affichée.
  • 14. Spécifications fonctionnelles : 1 : Outil de navigation principal, commun à l’ensemble du site, il permet de naviguer à travers les différentes sections, et le cas échéant « A propos » et « Carrière ». 2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve. 3 : Outil de sélection de rubrique en « accordéon », permettant de changer de rubrique par sélection. On sélectionne la partie désirée par choix de l’onglet d’affichage. 4 : Un lien Google Maps permettant d’accéder à la position géographique de l’entreprise KungFood. Une photo du pôle de l’équipe servant d’entête pour la partie affichée. 5 : Une description des lieux : de l’environnement, et de l’ergonomie de travail et le cadre général
  • 15. Spécifications fonctionnelles : 1 : Outil de navigation principal, commun à l’ensemble du site, il permet de naviguer à travers les différentes sections, et le cas échéant « A propos » et « Carrière ». 2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve. 3 : Outil de sélection de rubrique en « accordéon », permettant de changer de rubrique par sélection. On sélectionne la partie désirée par choix de l’onglet d’affichage. 4 : Un outil d’affichage style « cover flow », permettant de visualiser différentes sections par glissement, avec un descriptif affiché et un effet sur le visuel [5] 5 : Un visuel de progression circulaire, en lien avec la cover flow, qui traduit un avancement dans la journée selon la partie du cover flow qu’on affiche.
  • 16. Spécifications fonctionnelles : 1 : Outil de navigation principal, commun à l’ensemble du site, il permet de naviguer à travers les différentes sections, et le cas échéant « A propos » et « Carrière ». 2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve. 3 : Outil de sélection de rubrique en « accordéon », permettant de changer de rubrique par sélection. On sélectionne la partie désirée par choix de l’onglet d’affichage. 4 : L’histoire de l’entreprise comme explicité dans la plateforme sera exposé dans cette section.
  • 17. Spécifications fonctionnelles : 1 : Outil de navigation principal, commun à l’ensemble du site, il permet de naviguer à travers les différentes sections, et le cas échéant « A propos » et « Carrière ». 2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve. 3 : Outil de sélection de rubrique en « accordéon », permettant de changer de rubrique par sélection. 4 : Pour la rubrique «Offre » de la section « Carrière », la description du contenu est scindée en 4 sous-rubriques : -RH -Data -Marketing -Développement On sélectionne la partie désirée par choix de l’onglet d’affichage. 5 : Descriptif des offres : -L’image -Le titre -La catégorie de métier -Le salaire -La date de publication La flèche est un outil de lien permettant de ramener à la fiche de poste complète.
  • 18. Spécifications fonctionnelles : 1 : Outil de navigation principal, commun à l’ensemble du site, il permet de naviguer à travers les différentes sections, et le cas échéant « A propos » et « Carrière ». 2 : Affichage indiquant la rubrique dans laquelle l’utilisateur se trouve. 3 : Outil de sélection de rubrique en « accordéon », permettant de changer de rubrique par sélection. On sélectionne la partie désirée par choix de l’onglet d’affichage. 4 : Pour la rubrique «Espace utilisateur » de la section « Carrière », la description du contenu est scindée en 4 sous-rubriques : -Suivi de candidature -Messagerie (permet d’accéder au formulaire d’envoie et réception de messages) via la section espace personnelle 5 : Descriptif des candidatures déposées : -Intitulé du poste -Date de dépôt de candidature -Statut du traitement de candidature Un clic sur la candidature déposée permet d’accéder à la fiche de poste complète de la sous rubrique « Offres ».