UNIVERSITE HASSAN II-CASABLANCA

FACULTE DES SCIENCES BEN M’SIK

DEPARTEMENT MATHEMATIQUES ET INFORMATIQUE

CAHIER DES CHARGES

Projet fin d’étude

Réalisé par

Temara Oumaima &

El Khassoumi Chaimae

Encadré par
Mr. Ghazouani Mohamed

Table des matières

1
Table des matières...............................................................................................2
1. Cadre du projet.............................................................................................4
1.1 Problématique..............................................................................................................................4
1.2 Présentation générale de la FSBM et du SMI............................................................................4
o FSBM............................................................................................................................................4
o SMI................................................................................................................................................5
1.3 Enjeux et Objectifs.......................................................................................................................5
1.4 Présentation de l’équipe...............................................................................................................6
2. Benchmark.....................................................................................................7
2.1 EMSI Community........................................................................................................................7
2.2 LinkedIn.......................................................................................................................................8
2.3 Viadeo...........................................................................................................................................9
2.4. Les avantages du FSBMI COMMUNITY................................................................................10
3. Description Graphique et ergonomique....................................................10
3.1 Charte Graphique......................................................................................................................10
3.2 Design..........................................................................................................................................11
3.3 Maquettes....................................................................................................................................11
3.3.1. Page Principale (Ordinateur).................................................................................................12
3.3.2. Page Principale (Mobile).........................................................................................................13
a. Exemple 1 :.............................................................................................................................13
b. Exemple 2 :.............................................................................................................................14
3.3.3. Page Principale (Tablette)......................................................................................................15
3.3.4. Page choix du profil lors d’une nouvelle inscription (Ordinateur)......................................16
3.3.5. Page inscription : Etudiant (Ordinateur)..............................................................................17
3.3.6. Page inscription : Professeur (Ordinateur)...........................................................................18
3.3.7. Page d’accueil (Ordinateur)...................................................................................................19
4.Description fonctionnelle et technique.........................................................20
4.1. Les acteurs et leurs fonctions........................................................................................................20
4.1.1. Professeur, invite et association...............................................................................................20
4.1.2. Étudiants ou Lauréats..............................................................................................................21
4.1.3. Entreprise.................................................................................................................................21
4.1.4. Administrateur.........................................................................................................................22
4.2. Arborescence du site......................................................................................................................23
4.3. Informations relatives aux contenus.............................................................................................24
4.3.1. Description des rubriques principales :..................................................................................24
a. Rubrique de la nouvelle inscription......................................................................................24
b. Rubrique authentification......................................................................................................24

2
 c. Rubrique accueil.....................................................................................................................24
d. Rubrique messagerie..............................................................................................................24
e. Rubrique Notifications...........................................................................................................25
f. Rubrique compte....................................................................................................................25
g. Rubrique Profil.......................................................................................................................25
h. Rubrique liste D’abonnés & Rubrique abonnements..........................................................25
i. Rubrique enregistrements.....................................................................................................26
j. Rubrique favoris.....................................................................................................................26
k. Rubrique groupes...................................................................................................................26
l. Rubrique emploi.....................................................................................................................26
m. Rubrique évènements.........................................................................................................26
n. Les plus récents......................................................................................................................27
o. Rubrique des jeux éducatifs..................................................................................................27
4.4 Spécifications technique.............................................................................................................27
4.4.1 Technologie utilise..............................................................................................................27
a. Back End.................................................................................................................................27
b. Front End................................................................................................................................27
4.4.2 Accessibilité.........................................................................................................................27
a. Compatibilité navigateur.......................................................................................................27
b. Comptabilité système.............................................................................................................28
c. Comptabilité d’Appareils......................................................................................................28
5. Planning.......................................................................................................29

1. Cadre du projet
1.1 Problématique

3
 L'informatique est au cœur de notre société, peu de professions peuvent
aujourd'hui se passer de l'informatique ou d'un ordinateur, et toutes les entreprises
ont évidemment un parc informatique. C'est donc un secteur qui reste très
dynamique, et qui ne cesse pas d'évoluer et de se développer.
La formation Sciences mathématiques et informatiques permettre aux
étudiants d’avoir les compétences techniques nécessaires pour intégrer le marché du
travail. Or que ce dernier est un monde vague d’où les étudiants trouvent des
difficultés de contacter les entreprises, de postuler des demandes d’emploi ainsi que
trouver des stages. De plus le domaine d’informatique exige plusieurs compétences
techniques et non techniques par conséquent cette formation SMI est insuffisante.
FSBMI COMMUNITY est une communauté professionnelle et éducative en
ligne qui va permettre aux étudiants de se rapprocher au monde du travail, d’enrichir
leurs softs skills ainsi que leurs compétences en informatique grâce aux événements,
les conseils des lauréats et de leurs professeurs.

1.2 Présentation générale de la FSBM et du SMI

o FSBM
FSBM, la faculté des Sciences Ben M’Sik a ouvert ses portes en 1984. Elle
est rattachée à l’Université Hassan II - Mohammedia - Casablanca qui regroupe six
établissements universitaires répartis sur deux campus : le campus de Casablanca et
le campus de Mohammedia. Dès son ouverture, la faculté des Sciences Ben M’Sik a
accordé un intérêt particulier au développement de la recherche scientifique
parallèlement à sa mission d’enseignement et de formation. De 1984 à 2003, la
FSBM a dispensé diverses formations du type premier cycle (DEUG) et deuxième
cycle (Licences ès sciences : Bac+4) dans diverses spécialités. À partir de 1989, les
premières formations de 3ème cycle (CEA et DES) ont commencé grâce à la mise
en place d’un certain nombre d’équipes et de laboratoires de recherche.
o SMI
SMI, Sciences mathématiques et informatiques cette filière à dominante
informatique, on introduit les concepts de base des langages de programmation,
d’algorithmique, des structures de données et des réseaux informatiques des notions
de base sur l’architecture des ordinateurs et sur les systèmes d'exploitation sera
introduites.

1.3 Enjeux et Objectifs

4
 Ce que vous venez de lister ici ne sont pas les objectifs, ce
sont les exigences fonctionnelles.
Il faut revoir les objectifs et ces points vous les mettre en
bas parmi les rubriques.
Ce projet a pour objectif d’acquérir de mettre en œuvre un réseau social
spécial professionnel en ligne destiné à la filière SMI (sciences mathématiques
informatiques) de la faculté des sciences Ben M’sik (FSBM).
 Ce réseau sert à :
o Compléter la formation des étudiants concernés.
o Assurer le contact entre les étudiants actuels et les anciens, les
professeurs, les entreprises et les associations.

 Les acteurs peuvent publier, aimer, et commenter les postes.

 L'administrateur a tout le droit de supprimer des publications ou retirer des

membres qui ne respectent pas les conditions du réseau.

 Les étudiants comme première étape peuvent s'authentifier

au site avec leur code apogée, et ce site va donner l'accès seulement aux
étudiants de la filière SMI.

 Chaque membre a la possibilité de faire une recherche sur un autre profil.

 L'acteur peut s'abonner à d'autres comptes. Tous les étudiants vont recevoir
une notification le moment où une nouvelle entreprise ou association à intégrer
la communauté.

 Les étudiants, les lauréats et les professeurs reçoivent des notifications lors
d’un nouvel évènement planifié.

 Les étudiants reçoivent des alertes lorsqu’une entreprise rejoindre la

communauté, lors d’une nouvelle offre d’emploi ou une offre de stage publier
sur la communauté

1.4 Présentation de l’équipe

FSBM
Commanditaire 5
2. Benchmark

2.1 EMSI Community

Points forts Points faibles

 Créer de nouvelles opportunités

par le réseautage.  Permet à tout le monde d'y
accéder.

6
  Sert à compléter la formation  Concernant à concerne tous les
des étudiants de l’EMSI. étudiants et non pas une filière
spécifique

Ne sont pas des points faibles

2.2 LinkedIn

Points forts Points faibles

 Une plateforme orientée B2B1.

 Créer de nouvelles opportunités
par le réseautage.  Sa meilleure version est
payante
Sert à contrôler l’image de
1
Les membres qui utilisent LinkedIn à des fins commerciales (trouver de nouveaux prospects) sont des
professionnels qui ont une clientèle exclusivement professionnelle

7
l’utilisateur sur le web
 Destine à tout le monde et non
pas une communauté
spécifique

Le dernier point n’est pas un

point faible

2.3 Viadeo

Points forts Points faibles

8
 Mettre en relation des chercheurs
d’emplois avec des recruteurs.
 Trouver des nouveaux fournisseurs
ou partenaires

 Destine à tout le monde et non pas
une communauté spécifique ce
point n’est pas un point
faible

 Sa meilleure version est payante

2.4. Les avantages du FSBMI COMMUNITY

Les raisons pour utiliser le réseau social FSBMI COMMUNITY :
 Très intuitif et facile à utiliser.

 Grâce à la rubrique évènements le planificateur de cette

dernière publie son annonce à tous les membres de
communauté, ainsi que les utilisateurs peuvent découvrir
toutes tous les évènements récemment publier publiés sur le
réseau.

 Avec un simple clic vous pouvez découvrir toutes les offres

d’emploi et les offres du stage publier publiées sur le réseau.

 Votre demande d’emploi ou du stage sera publié sur la

communauté et s’ajouter automatiquement sur la rubrique.

3. Description Graphique et ergonomique

3.1 Charte Graphique

 Aperçu du logo

9
  Couleurs Utilise :

#FFCF03

#FFFFF #00678D #084A62

F

 Polices et typographie
o Typographie de branding et de titre : Lato
o Typographie de contenu : Lato

3.2 Design

L’application Web-Mobile FSBMI COMMUNITY à un design FLAT. Ce

dernier est un design graphique axe sur le minimalisme. Par opposition à un
design réaliste et détaillé, le flat design élimine les éléments jugés décoratifs ou
superflus (détails, ombres, effet 3D…). L’interface en flat design est donc
centrée sur le contenu, la fonctionnalité. En fait, le design plat fait appel à
l’imaginaire de l’utilisateur. Au lieu de lui expliquer l’utilité d’un élément de
l’interface, elle est signifiée de la manière la plus simple possible.

3.3 Maquettes

Les images ci-dessous représentant des pages exemplaires permettant d’aperçu le

contenu ainsi que quelques fonctionnalités du site FSBMI COMMUNITY versions
ordinateur et mobile.

10
3.3.1. Page Principale (Ordinateur)

11
3.3.2. Page Principale (Mobile)

a. Exemple 1 :

12
b. Exemple 2 :

3.3.3. Page Principale (Tablette)

13
14
 3.3.4. Page choix du profil lors d’une nouvelle inscription
(Ordinateur)

3.3.5. Page inscription : Etudiant (Ordinateur)

15
16
3.3.6. Page inscription : Professeur (Ordinateur)

17
 3.3.7. Page d’accueil (Ordinateur)

4.Description fonctionnelle et technique

4.1. Les acteurs et leurs fonctions

18
 Les acteurs de la communauté FSBMI COMMUNITY sont :
 Étudiants
 Lauréats
 Professeurs
 Invite
 Entreprise
 Administrateur
Les diagrammes ci-dessous sont des diagrammes cas d’utilisation a pour but de
représenter le comportement et les fonctions des acteurs d’un système.
4.1.1. Professeur, invite et association

4.1.2. Étudiants ou Lauréats

19
4.1.3. Entreprise

20
4.1.4. Administrateur

21
4.2. Arborescence du site

Page
Principale

Rubrique Rubrique Nouvel

Authentificatien Inscription

Rubrique Page
Acceuil
Choix du
Rubrique Rubrique profil
Acceuil Messagerie

Rubrique Rubrique
Notifications Compte
Page
Rubrique des D'inscription
Rubrique liste
Jeux Educatifs abonnements

Rubrique liste Rubrique des

d'abonnes groupes

Rubrique
Rubrique Emploi
enregistrements

Rubrique Les plus recents

Evenement

22
4.3. Informations relatives aux contenus
4.3.1. Description des rubriques principales :

a. Rubrique de la nouvelle inscription

La page d’inscription permet aux utilisateurs de remplir le
formulaire d’inscription selon le profil choisi. L’inscription des
entreprises et les invites invités sera validées validée par
l’administrateur.

b. Rubrique authentification
Cette page contient un formulaire permettant aux utilisateurs
de saisir leur donnée de connexion afin de se connecter, ou
demande de récupération de mot de passe

c. Rubrique accueil
Cette page d’accueil est la page de destination sur laquelle les
différents acteurs du FSBMI COMMUNITY arrivent en premier
lorsqu’ils s’identifier sur leurs comptes. C’est une page pour voir ce
qui se passe dans leurs communautés et partager des postes
professionnelles, des photos, des articles, ainsi que de découvrir les
différentes publications de leurs abonnements etc.

d. Rubrique messagerie
La rubrique messagerie va permettre aux utilisateurs de rester
en contact avec leurs collègues, associées ou autres opportunités.
De plus d’accéder facilement à leurs discussions. En envoyant,
recevant des messages ainsi que la possibilité de supprimer ou
rechercher des messages.

e. Rubrique Notifications
Les utilisateurs du système reçoivent des notifications sur
eux-mêmes, leurs activités, et leurs connexions. Il peut s’agir
d’alertes pour leurs messages ou leurs partages, d’opportunités
professionnelles et de nouvelles des personnes dans leurs réseaux,
des nouveaux évènements, et d’offres emploi ou stage.

23
f. Rubrique compte
Cette rubrique permet aux utilisateurs de gérer leurs
comptes :
 Changer de mot de passe, ajouter, modifier.
 Supprimer leur numéro ainsi que leur email
personnel.
 Renforcer la sécurité de leurs comptes. Les étudiants
et les lauréats ont la possibilité d’ajouter, modifier ou
supprimer leur cv.

g. Rubrique Profil
Cette rubrique représente le profil d’utilisateur, ses
informations personnelles et professionnelles, sa photo de profil
ainsi que de couverture. Le profil contient aussi les postes publier
par lui-même, son CV, et il peut modifier, ajouter, ou supprimer le
contenu de son profil.

h. Rubrique liste D’abonnés & Rubrique abonnements

La rubrique « liste D’abonnés » d’un acteur c’est
l’ensemble des personnes qui se sont abonnées à son compte sur
FSBMI COMMUNITY.
D’une autre par La rubrique « liste abonnements » c’est
l’ensemble des comptes qu’un acteur leur suit sur FSBMI
COMMUNITY.
Faut savoir que les personnes qui font partie du liste
d’abonnés d’un utilisateur ne font pas spécialement partie de sa liste
d’abonnement.

i. Rubrique enregistrements
Cette rubrique permet aux utilisateurs d’enregistrer certains
éléments publie sur FSBMI COMMUNITY pour les consulter
ultérieurement, tels que des liens ou des vidéos publiés par leurs
abonnés ou abonnements, des évènements, des photos, des articles
etc.

j. Rubrique favoris

24
 Cette rubrique contient un raccourci sur les pages qu’un
acteur utilise les plus souvent.

k. Rubrique groupes
Cette rubrique des groupes permet aux utilisateurs du système
de créer des groupes, gérer ou supprimer leur propre groupe ou
trouver des suggestions des groupes. Cette rubrique va faciliter la
communication entre les membres de FSBMI COMMUNITY.

l. Rubrique emploi
Cette rubrique a pour but de faciliter aux étudiants ainsi que
lauréats de trouver des emplois et stages de consulter les offres
d’emploi publier par l’entreprise ou des suggestions des professeurs.
De plus les utilisateurs de FSBMI COMMUNITY

m. Rubrique évènements
Cette rubrique permet aux utilisateurs de découvrir tous les
évènements disponibles sur le réseau aux de planifier ou participer à
des événements, inviter des contacts, échanger avec d’autres
participants et garder un contact même après l’événement.

n. Les plus récents

Permets aux utilisateurs de découvrir et d’accéder aux

postes les plus récents, les nouveaux évènements créer, ainsi que de
consulter les publications des acteurs du réseau.

o. Rubrique des jeux éducatifs

Cette rubrique est un page contenant des jeux éducatifs
permettent aux communautés de développer leurs compétences
ainsi de s’amuser en jouant.

3.4 Spécifications technique

3.4.1 Technologie utilise
25
 a. Back End
LARAVEL est La technologie dont la réalisation du FSBMI COMMUNITY va
se baser. Larvel est un Framework web open source écrit en PHP respectant le
principe modèle-vue-contrôleur et entièrement développé en programmation
orientée objet.
b. Front End
La réalisation du front End site FSBMI COMMUNITY est base sur la
technologie du HTML5 et CSS3.

1.1.1 Accessibilité
a. Compatibilité navigateur
Le site du FSBMI COMMUNITY sera compatible avec les navigateurs suivants :
o Google Chrome
o Microsoft Egede
o Mozilla Firefox
o Safari
o Opera

b. Comptabilité système
Le site du FSBMI COMMUNITY sera compatible avec les systèmes d’exploitation
suivants :

o Windows
o Mac OSX
o Linus
o IOS
o Android

c. Comptabilité d’Appareils

Le site sera conçu de manière dite « responsive design » pour qu’il assure une
navigation optimale sur tous types d’appareils :

o Ordinateurs de bureau
o Ordinateurs portables
o Téléphone mobiles
o Tablettes

1.1.2 . Contraintes
Ce tableau ci-dessous représente les différentes contraintes avec des solutions
provisoires :
26
 La solution pour régler la contrainte du temps n’est pas adéquate.
Il faut ajouter d’autre contraintes.

Contrainte Solutions

Contrainte de temps : Gérer et planifier le temps à l’aide du

la courte durée pour réaliser le projet diagramme gant gantt

Contrainte technique: Grâce aux formations en ligne l’équipe

Manque de maîtrise du LARAVEL va améliorer leurs ses connaissances sur
PHP et maitriser le Framework
LARAVEL

5. Planning
Chaque projet nécessite une bonne gestion du temps, pour cette raison
l’équipe FSBMI COMMUNITY à utiliser le diagramme de GANT GANTT afin de
représenter les taches à réaliser et leur durée.
Ce diagramme est un outil utilisé en ordonnancement et en gestion du projet
et permettant de visualiser dans le temps les diverses tâches composant un projet.

27
 ce n’est pas comme ça qu’on fait un diagramme de gantt. Il est mal
fait, refaites le :

28