Vous êtes sur la page 1sur 134
E cole N ationale S upérieure d’ I nformatique et d’ A nalyse des S

Ecole Nationale Supérieure d’Informatique

et d’Analyse des Systèmes

d’ I nformatique et d’ A nalyse des S ystèmes INTELLCAP Mémoire de Projet de Fin

INTELLCAP

Mémoire de Projet de Fin d’Etudes
Mémoire de Projet de Fin d’Etudes

Pour l’obtention du titre

D’Ingénieur d’Etat en Informatique
D’Ingénieur d’Etat en Informatique

Option

Génie Logiciel

Sujet :

Analyse, conception et réalisation d'une plateforme pédagogique et collaborative, web et mobile pour l’éducation à l’environnement et au développement durable

Soutenu par :

Sous la direction de :

Omar ZAHIR

Mme Bouchra BERRADA (ENSIAS)

Soufiane EL ASSAL

M. Hamza AKASBI (INTELLCAP)

Membre de Jury :

M. Salah BAINA (ENSIAS)

Mme. Mounia ABIK (ENSIAS)

Dédicaces

A mes chers parents, mes sœurs, mes frères, sans qui rien nest possible,

Aucun mot, aussi signifiant soit-il, ne saurait exprimer le degré damour, daffection, de respect et de reconnaissance que jéprouve pour vous.

Votre présence à mes côtés ma toujours apporté confiance et réconfort. Puisse ce travail être le fruit de votre dévouement et de vos sacrifices et un témoignage de ma gratitude.

Je vous souhaite des rêves à nen plus finir et lenvie furieuse den réaliser, vous avez toujours été pour moi dune aide très précieuse.

Je vous dédie ce travail en témoignage de ma grande affection.

Aux personnes qui maiment,

Que ce travail témoigne de mes sentiments les plus sincères.

2
2

Remerciements

Il nous est agréable de nous acquitter dune dette de reconnaissance auprès de toutes les personnes, dont la contribution inestimable, a favorisé laboutissement de ce projet. Ainsi, on tient à remercier notre encadrant Mr. Hamza AKASBI pour ses directives précieuses et ses conseils pertinents qui ont été dun apport considérable à notre démarche.

On tient à remercier Mme Housna ILLALI, Responsable de direction à INTELLCAP pour son aide très précieue, ses conseils aussi pertinents et ses éclaircissements tout au long de la période de notre stage.

On ne saurait oublier Mme. Bouchra BERRADA, pour les conseils quelle nous a prodigué et son judicieux encadrement. On tient à lui exprimer notre grand respect et à la remercier pour son aide scientifique précieue, son sérieux et sa patience.

On remercie aussi, les autres membres d’INTELLCAP que j’ai côtoyé lors de ces quatre derniers mois et qui ont tous, sans exception, contribué à réussir ce stage.

Enfin, on tient également à adresser nos plus sincères remerciements à lensemble du corps enseignant de lENSIAS, pour avoir porté un vif intérêt à notre formation, et pour avoir accordé le plus clair de leur temps, leur attention et leur énergie et ce dans un cadre agréable de complicité et de respect.

3
3

Résumé

Le présent document est le fruit du travail dans le cadre du projet de fin d’études effectué au sein d’INTELLCAP Rabat. Ce projet a pour but létude et la mise en œuvre dune plateforme d’éducation à l’environnement et au développement durable.

L’

objectif consiste donc à créer une plateforme d’apprentissage qui répond au besoin des

apprenants à la fois et de manière à favoriser une pédagogie socioconstructiviste, faciliter

l’accès aux ressources et services, et offrir aux apprenants un espace non seulement

d’apprentissage individualisé mais aussi de divertissement.

Durant le projet, la première mission était de cerner le sujet et de délimiter le périmètre du projet. Après une analyse approfondie de la problématique et des besoins, suivie dune division du projet en modules.

Pour bien mener le projet,

Y (2TUP), démarche qui a fait ses preuves dans le domaine des projets informatiques.

nous avons choisi de suivre

un cycle de développement en

Le processus en Y consiste à mener une étude fonctionnelle et une étude technique en parallèle, suivi de lélaboration dun modèle conceptuel, ensuite limplémentation et la mise en œuvre, et enfin le déploiement, les tests et la validation de chef de projet.

A travers ce document, nous allons décrire plus en détail chaque partie de la réalisation de ce projet.

4
4

Abstract

This report is the result of the work that we have carried o u t during our graduation internship within INTELLCAP Rabat. The internships purpose was the study and implementation of an e-learning platform about the environment.

The objective therefore is to create a learning

and

and provides learners not only with an individualized learning space but entertainment.

learners

promotes a social constructivist pedagogy, facilitates access to resources and services,

platform

that

meets

the needs of

also

a space of

During the project, our primary and main goal in the first phases was to identify and invest the scope of the project. After a deep analysis of the problematic and the different needs, we managed to subdivide the entire project into modules.

For the project management side, we opted for the 2TUP framework, an approach that has gained in maturity and proven its m erits within the management of the information technology projects.

Thanks to this document we are going to describe in details the different steps of the project’s realization.

5
5

Liste des abréviations

6
6

Liste des figures

Figure 1 : Organigramme d’INTELLCAP

17

Figure 2 : Cycle de l’eau

21

Figure 3 : Schéma descriptif de la plateforme

27

Figure 4 Modèle 2tup

29

Figure 5 : Diagramme de Gantt

31

Figure 6 : Interface d’accueil de la plateforme existante

36

Figure 7 : Interface de la médiathèque

36

Figure 8 : Interface de l’espace Wiki

37

Figure 9 : Matrice cas d’utilisation/acteurs

46

Figure 10 : Diagramme de cas d’utilisation global de la plateforme

48

Figure 11 : Les différents compétences dans le développement d'un Jeu Educatif

49

Figure 12 : Le processus de développement d’un Jeu

50

Figure 13 : Diagramme représentant l’évolution de la difficulté du jeu par rapport aux niveaux

51

Figure 14 : Losange représentant les facteurs qui interagissent sur l’évolution de la

de difficulté

compétence et du défi

52

Figure 15 : Diagramme de cas d’utilisation global du jeu 3D

53

Figure 16 : Diagramme de séquence du scénario de l’authentification

56

Figure 17 : Diagramme de séquence du scénario de la création de compte

57

Figure 18 : Diagramme de séquence du scénario de la publication Wiki

58

Figure 19 : Diagramme de séquence du scénario de la recherche ressource media

59

Figure 20 : Diagramme d’état-transition « Publication des fichiers »

60

Figure 21 : Diagramme d’état-transition du jeu 3D

61

Figure 22 : Diagramme de classes global

63

Figure 23 : L’architecture MVC

76

Figure 24 : Architecture en couche 3-tiers «MEAN »

77

Figure 25 : Schéma de flux de données provenant de la base de données

78

Figure 26 : Schéma non bloquant de node.js

80

7
7

Figure 27 :Positionnement de Three.js par rapport aux autres composants HTML5 de dessin

84

Figure 28: Exemple illustrant le Ray Casting

85

Figure 29: Arborescence des fichiers de l’application Web

87

Figure 30: Intégration de l’avatar et codage du comportement

91

Figure 31: Exemple d'une IHM « Material design »

92

Figure 32 : Architecture technique globale

94

Figure 33 : Interface d'Accueil en 3D

97

Figure 34 : Interface d'inscription en.3D

97

Figure 35 : Page des informations du profil

98

Figure 36 : Interface de la discussion instantanée

98

Figure 37 : Interface de la boite de réception

99

Figure 38 : Interface de médiathèque en 3D

99

Figure 39 : Interface de ressource numérique en 3D

100

Figure 40 : L’interface de la bibliothèque B.D en 3D

100

Figure 41 : Suite de l’interface de la Bibliothèque BD en 3D

101

Figure 42 : Interface de publication dans l’espace Wiki

102

Figure 43 : Interface de l'espace WIKI

103

Figure 44 : Interface d'un sujet Wiki avec les commentaires

103

Figure 45 : Tableau de bord de l'interface Web Admin

104

Figure 46 : Interface de la validation des publications

104

Figure 47 : Interface de la validation des étudiants

105

Figure 48 : Interface de la validation des professeurs

105

Figure 49 : Interface de la boite de réception

106

Figure 50 : L’interface d’accueil de l’application mobile

108

Figure 51 : L’interface des ressources media de l’application mobile

109

Figure 52 : L’interface d’authentification de l’application mobile

110

Figure 53 : L’interface d’inscription de l’application mobile

111

Figure 54 : Animation d’intro du jeu3D

113

Figure 55 : Interface principal du Jeu 3D

114

8
8

Figure 56 : Interface du Menu EAU

115

Figure 57 : Interface du menu SOURCES D'EAU

115

Figure 58 : Interface du menu SOURCES D'EAU « Fleuve »

116

Figure 59 : Interface du menu SOURCES D'EAU « Océan »

116

Figure 60 : Interface du menu CYCLE DE L’EAU

117

Figure 61 : Interface du menu TRAITEMENT DE L'EAU

117

Figure 62 : Interface du menu RECYCLAGE DE L'EAU

118

Figure 63 : Interface du menu Interface du Zone Urbaine

118

Figure 64 : Interface du SOURCES D'EAU dans la cuisine

118

Figure 65 : Interface du SOURCES D'EAU dans la salle de bain

119

Figure 66 : Interface du jeu puzzle

119

Figure 67 : Interface du jeu de catégorisation

119

9
9

Liste des tableaux

Tableau 1 : Tableau comparatif des différentes méthodes de développement

29

Tableau 2 : Liste des tâches

32

Tableau 3 : Bilan de la plateforme existante

39

Tableau 4 : Les différents acteurs de la plateforme

45

Tableau 5 : Tableau comparatif entre les bases de données relationnelles et les bases de

données non relationnelles

80

Tableau 4 : Les différents acteurs de la plateforme

45

10
10

Table des matières

Dédicace……………………………………………………………………………

……….2

Remerciements………………………………………….…………………………………….3

Résumé………………………………………………….…………………………………….4

Abstract……………………………………………………………………………………….5

Liste des abréviations .……………………………………………… ………………………6

Liste des figures.……………………… ……………………

……………………………….7

Liste des tableaux.……………………. …………………….………………………………10

Introduction générale………………………………………

………………………………13

Chapitre 1 : Contexte du projet

…………………………………………………

15

1.1

Organisme d’accueil ……

…………………………………………………………

16

1.1.1 Présentation générale ……………………

……………………………………16

1.1.2 Organigramme d’Intellcap ……………………………………………………

1.1.3 Le partenaire Fondation Mohammed VI …………………………………….…18

17

1.2 Présentation générale du projet………………………………………………….……19

1.3 Conduite du projet …………………………………………………………

……….30

1.3.1 Processus de développement

………………………………………………

30

1.3.2 Planification du projet ………………………………………………………

31

Chapitre 2 : Analyse et spécifications des besoins ……………………………………….…36

2.1

Analyse de l’existant …………………………

……

……………………………….37

2.1.1 Description de l’existant …………………………

………………….……….37

2.1.2 Analyse critique …………

…………………………

……………………….39

2.2

Identification des besoins fonctionnels ……………………………………………

41

2.3

Identification des besoins non fonctionnels ………………………………………….44

2.2

Identification des acteurs …………………

………

………………………………

44

2.5 Identification des cas d’utilisation………….…………….………………………….45

2.6 Diagramme de cas d’utilisation global de l’application Web et Mobile ………….47

11
11

2.7

Procédure de développement d’un jeu …………… …………………………………49

2.8 Modèle utilisateur et joueurs ………………………

……………………………….50

2.9 Diagramme de cas d’utilisation global de l’application jeu 3D ……………

…….52

2.10 Identifications des risques……………………….…………………………… ….54

Chapitre 3 : Phase de conception …………………………………………………………55

3.1 Diagrammes de séquences .………………………………… ………………… ….56

3.1.1

Scénario de l’authentification .…………

……………………………… ….56

3.1.2

Création de compte

………………………………………

……………….57

3.1.3

Publication Wiki ……

………………

……

…………………………

57

3.1.4

Recherche ressource Media …………………… ………………………… …58

3.2 Diagramme d’état de transition

……………………

…………………………

.59

3.2.1 Publication Wiki ……………

3.2.2 Jeu 3D ……………………………

………………………………………… ….59

.60

….….62

…………

…………………………

………………

…………………

3.3 Diagramme de classe ……… ……………………………

3.4 Document conceptuel ……… ……………………………

.64

74

Chapitre 4 : Etude technique et réalisation……………

….………………………………

……………………….75

76

4.3 Architecture technique de l’application ……… …….……………………….…….92

4.4 Sécurisation du système ………

95

4.1 Structure d’une application ………………………………

4.2 Technologies et outils utilisés ……… …………………

……………………

……………………………………….…………

4.5 Réalisation ……… …………………

……………………………………………97

4.5.1

Application Web …………….………………………………………………97

4.5.2

Application Mobile ………… …

………………………………………….107

4.5.5

Jeu 3D ………… …

……………………………………………………

113

Conclusion Générale et perspectives ………… …

……………………………………

120

12
12

Introduction :

Éduquer à l’environnement et au développement durable permet la responsabilisation et l’engagement des citoyens dans l’action. L’Éducation à l’Environnement et au Développement Durable vise non seulement à apporter des connaissances, mais également à développer l’esprit critique pour former les éco-citoyens de demain. La conférence de Tbilissi en 1977 officialise l’Éducation à l’Environnement et au Développement Durable au niveau international en proposant la définition suivante :

L’éducation à l’environnement a pour but "d’amener les individus et les collectivités à saisir la complexité de l’environnement tant naturel que créé par l’homme, complexité due à l’interactivité de ses aspects biologiques, physiques, sociaux, économiques et culturels [ ]et à acquérir les connaissances, les valeurs, les comportements et les compétences pratiques nécessaires pour participer de façon responsable et efficace à la prévention, à la solution des problèmes de l’environnement, et à la gestion de la qualité de l’environnement".[1]

Plus largement, éduquer à l'environnement c'est recréer du lien entre l'humain et son environnement naturel, social et culturel. Cela peut passer par un apport de connaissances scientifiques, de repères culturels et sensoriels, par la découverte d'un lieu, par un échange

La Fondation Mohammed VI pour la protection de l’environnement initie en partenariat avec INTELLCAP la création d’une plateforme collaborative qui se base essentiellement sur le partage des expériences pratiques, des projets et des études faites dans le domaine des énergies renouvelables.

C’est dans ce cadre que s’inscrit notre projet de fin d’études, qui s’intitule « Conception et réalisation d'une plateforme pédagogique pour l'éducation à l'environnement».

Ce document, qui constitue le mémoire du stage de fin d’études, compte quatre chapitres organisés comme suit :

Le premier chapitre du rapport traite le contexte général du projet. Il présente l’organisme d’accueil ainsi que La Fondation Mohammed VI pour la protection de l’environnement sponsor du projet. Ce chapitre présente également la méthodologie et l’organisation de notre travail.

13
13

Le deuxième chapitre est consacré à la première phase du projet à savoir une étude préliminaire portant sur l’observation de l’existant et la proposition de solutions. Ce chapitre présente en outre une phase théorique qui détaille les concepts métiers sur lesquels nous sommes basés pour établir la solution proposée.

Le troisième chapitre décrit la phase d’analyse et de conception. Le quatrième et dernier chapitre traite la phase de réalisation.

14
14

1. Contexte du projet

1. Contexte du projet Présentation du projet Ce chapitre décrit et situe le projet dans son
Présentation du projet Ce chapitre décrit et situe le projet dans son environnement organisationnel et
Présentation du projet
Ce chapitre décrit et situe le projet dans son environnement organisationnel et
contextuel. Il présente dans sa première partie l’organisme d’accueil « INTELLCAP
» et son principal client « Fondation Mohammed VI pour la protection de
l’environnement». La deuxième partie du présent chapitre donne une vue générale
sur la plateforme. La dernière partie est réservée à la démarche et à la conduite
adoptée pour la réalisation du projet.
15

1.1

ORGANISME DACCUEIL :

1.1.1 Présentation générale :

INTELLCAP est une société de droit marocain créée en 2008 à l’initiative de Monsieur ILALI Idriss. INTELLCAP, spécialisée dans la formation, la recherche, le développement et l'innovation technologique, entre autres, dans les domaines des énergies renouvelables et de l'eau, proposant des solutions intégrées et à la demande pour les entreprises et organisations. Elle déclare posséder l'expertise lui permettant de réaliser sa mission avec professionnalisme.

INTELLCAP opère dans plusieurs domaines d’activités :

Aéronautique, Aerospace, Energies renouvelables, véhicules électriques, production et prototypages

La R&D, le développement technologique de solutions innovantes par la réalisation de systèmes technologiques développés clés en main qui ont pour but d’intégrer le pays dans l’ère de l’industrialisation.

La formation des jeunes et leur accompagnement dans la création de startups innovantes sur la base de technologies nationales.

De plus, pour chaque domaine :

Recherche et Développement: INTELLCAP a tissé des partenariats avec Al Akhawayne University In Ifrane (AUI), IRESEN, et autres organismes et bureaux d’études afin de développer des solutions innovantes en matières de véhicules électriques, systèmes de stockages et de production de l’énergie propre, l’aéronautique.

Technologie & Ingénierie : INTELLCAP a tissé des partenariats avec des organismes et bureaux d’études afin de développer des solutions innovantes en matières de véhicules électriques, systèmes de stockages et de production de l’énergie propre, l’aéronautique.

Education & Formation : Education par le recours au processus de l’apprentissage par la pratique. INTELLCAP a développé dans le cadre de plusieurs partenariats, le concept et la pratique des ateliers pélagiques qui ont pour but d’initier les jeunes scolarisés et non scolarisés à des techniques industriels et technologiques respectueuses de l’environnement .

16
16

Services : Ces derniers consistent à offrir du conseil juridique et financier, scientifique industriel et technologique par l’accompagnement des STRATUPS dans leur montage juridique et financier jusqu’à la phase de la création et de la mise en œuvre de leur stratégie de développement.

1.1.2 Organigramme d’INTELLCAP :

INTELLCAP est une société de droit marocain, caractérisée par une organisation verticale ou le caractère hiérarchique n’est pas omniprésent. Elle est constituée de plusieurs organes :

La direction et présidence générale : L’organe de la gérance

Département de développement : L’organe qui est constitué d’employés (ingénieurs, techniciens, assistants …). L’équipe comporte des marocains ainsi que des étrangers, qui interviennent d’une façon ponctuelle selon les cas et leur intervention est généralement à distance ou à proximité selon les situations. Nous avons fait partie de ce département, et plus précisément l’équipe de développement de la plateforme

Département D’électricité : Cet organe comporte les différents employés qui travaillent sur les projets des systèmes embarqués.

Département administratif : Cet organe comporte les différents employés des ressources humaines, ainsi que la secrétaire générale d’Intellcap.

17
17
Figure 1 : Organigramme d' INTELLCAP La prise de décisions se fait d’une manière collégiale

Figure 1 : Organigramme d' INTELLCAP

La prise de décisions se fait d’une manière collégiale en concertation entre tous les membres

de l’équipe INTELLCAP.

Le fonctionnement de la société est régit par un règlement intérieur et un manuel de qualité et de procédures qui est mis à jour selon les besoins

1.1.3 Le partenaire Fondation Mohammed VI pour la Protection de l’Environnement :

Depuis sa création en Juin 2001 par Sa Majesté le Roi Mohammed VI, qui en a confié la

présidence à Son Altesse Royale la Princesse Lalla Hasnaa, la Fondation Mohammed VI pour

la Protection de l’Environnement place les enjeux de l’éducation et la sensibilisation au cœur

de la mission qui lui a été attribué. Elle s’inscrit ainsi dans les objectifs fixés par les sommets

de RIO 1992 et 2012, ainsi qu’à Johannesburg en 2002 en termes d’éducation pour le

développement durable et auxquels le Maroc a souscrit.

Plusieurs programmes et projets pilotes dans différents domaines ont été menés avec succès

basés sur l’éducation à l’environnement, la sauvegarde du littoral, l’amélioration de la qualité

de l’air, la compensation volontaire carbone, le tourisme responsable et la sauvegarde et

développement de jardins historiques, de palmeraies et oasis.

18
18

Dès son adhésion à la Fondation pour l’Education à l’Environnement (FEE) en 2002, la Fondation Mohammed VI pour la Protection de l’Environnement a décidé d’implanter au Maroc quatre programmes de la FEE :

« Pavillon Bleu » pour les plages.

« Eco- Ecoles » destinés aux établissements primaires.

« Jeunes Reporters pour l’Environnement » dans les lycées.

« Clef Verte » pour les établissements touristiques.

La Fondation pour l’Education à l’Environnement (FEE) est une organisation non gouvernementale, à but non lucratif, de promotion du développement durable à travers l’éducation à l’environnement. Elle regroupe 74 pays en Europe, Amérique du Nord et du Sud, Asie et Océanie.

Par l’adhésion de la Fondation à la FEE, le Maroc est devenu le 1er pays arabo-musulman à y adhérer [W1]

1.2 PRESENTATION GENERAL DU PROJET :

Le système consiste à mettre en place une plateforme pédagogique et collaborative pour l'éducation à l’environnement.

Plateforme d’information : «ةيتامولعملا ةصنملا»

Dans son approche globale d’utilisation des Technologies de l’Information et de la Communication (TICs) pour le renforcement de l’éducation et la sensibilisation à la protection de l’environnement, la Fondation M VI a mis en place le portail Eco-Ecoles en 2011 en tant que plateforme d’informations, de réseautage des écoles adhérentes et de partage des bonnes pratiques.

Dans ce cadre, la Fondation a développé des outils innovants et créatifs pour capter l’attention des jeunes :

Bandes dessinées avec les Boundifs*.

Jeux interactifs sur Internet du niveau écoliers, facilitateurs d’apprentissage.

La Fondation a également conçu et mis en place des Chemins pédagogiques (Jardins exotiques de Bouknadel, Aarsat Moulay Abdeslam à Marrakech) composés de modules thématiques en vue de permettre aux visiteurs, notamment le jeune public, de se familiariser

19
19

avec divers comportements favorables à notre environnement de manière plaisante et interactive.

En outre, la Fondation en collaboration avec INTELLCAP a mis en place et animé en marge du WEEC2013* une maquette ‘Village Ecologique’ sur les Energies Renouvelables au profit des écoliers.

Pour le renforcement des outils pédagogiques d’Eco-Ecoles et soutenir son dispositif de formation et d’animation, la Fondation a initié, en partenariat avec INTELLCAP, la création d’une plateforme virtuelle, nommée plateforme d’informations innovante d’apprentissage, sur les thèmes de l’Eau, l’Energie, la Gestion de déchets, l’Alimentation et la Biodiversité, basée sur la cognitive et la pédagogie active.

Pourquoi choisir le nom de «ةيتامولعملا ةصنملا» ?

Le nom de la plateforme a été choisi par la fondation Mohamed VI pour la protection de

l’environnement, pour la simple raison que ce produit est une plateforme pédagogique

contenant de multiples informations sur l’environnement et le développement durable. Ces

informations sont présentées avec des outils éducatifs simples, innovants et plaisants aux

enfants. La simplicité du nom renforce l’incrustation du concept pédagogique dans les esprits

des enfants, et reflète aussi le but éducatif de la plateforme qui est la diffusion de la

connaissance et l'échange des informations.

Problématiques :

Pour assurer à la plateforme une grande attractivité et réceptivité du public cible, il fallait innover en termes de fonctionnalités de la plateforme. C’est de cela où l’idée de développer un jeu sérieux est née.

Développer une plateforme d’éducation et un serious game de cette nature engendre plusieurs

contraintes. Tout d’abord le public visé se veut être large et ouvert : le jeu est destiné aux

enfants du primaire et peut ainsi être joué par un collégien tout comme un adulte souhaitant

s’informer sur les actualités des énergies renouvelables et connaitre leurs fonctionnements. Le

jeu doit donc être à la fois accessible et intuitif.

Ainsi, on peut définir la problématique du projet sous différents aspects :

La faible culture sur les différentes lois et bonnes pratiques visant à protéger
La
faible
culture
sur
les
différentes
lois
et
bonnes
pratiques
visant
à
protéger

l’environnement et les ressources naturelles :

20
20

L’environnement et les ressources naturelles doivent être considérés comme des biens

communs mondiaux, qui appartiennent aux catégories spécifiques des biens non manufacturés

qui, lorsqu’ils sont partagés, peuvent être soit divisés soit détruits. Le caractère mondial de ces

biens découle de l’appartenance de chacun des éléments qui le composent à un système

intégré. Chacun peut profiter de l’atmosphère, du climat et de la biodiversité (entre autres) et,

en même temps, la planète tout entière souffre des effets dramatiques du réchauffement

global, de la réduction de la couche d'ozone ou de l’extinction des espèces. Cette dimension

planétaire incite à une gestion partagée.

C’est pour cela que plusieurs organisations mondiales instaurent des lois pour la protection de

l’environnement lors de leurs conférences. D’ailleurs, le Maroc compte organiser le sommet

COP22 du 7 au 18 novembre 2016 à Marrakech. Durant ce sommet,

La COP22 aura

notamment comme objectif de traduire l’accord élaboré pendant la COP21 en feuille de route. Le Maroc, pays hôte de la COP22, souhaite impliquer fortement les pays africains.

Ces accords et ces lois doivent être appris aux jeunes enfants sous une forme plus adaptée à leurs niveaux intellectuels. Par exemple apprendre aux écoliers du primaire les bonnes pratiques pour la préservation de l’eau, les dangers de la pollution ou les bonnes conduites pour limiter le réchauffement climatique.

La difficulté d’expliquer aux élèves du primaire des concepts figurant dans leurs cours

de science :

Dans le passé, la relation pédagogique était déterminée par des conventions aussi précises que

bien connues de tous. Il s’agissait alors de respecter la « discipline ». Aujourd’hui, la pratique

de la profession de l’enseignement connait des difficultés dans le canal de communication

entre les deux intervenants à savoir l’enseignant et son élève. Il est difficile d’expliquer aux

élèves le cycle de l’eau sans illustrer par des images ou des expériences montrant les

transformations des états de l’eau.

Le

manque

de

sensibilisation

des

enfants envers

les

dangers

de

la

pollution

et

l’importance de la protection de l’environnement :

 

Pour

un

mode

de

vie

sain,

les

enfants

doivent

être

éduqués

de

manière

positive

à

l’environnement afin de développer une conscience et un sens de la participation, et de les

De plus, le Maroc tourne actuellement vers les énergies renouvelables, ce qui le met dans

l’obligation de former les jeunes afin de connaitre et se familiariser aux futures énergies. Le

projet Noor qui sera,

à sa finition totale, la plus grande centrale solaire au monde. Il est

nécessaire d’expliquer aux jeunes élèves la méthode de fonctionnement de cette centrale ainsi que son importance au niveau de l’écologie mondiale.

Coûts élevés des expériences scientifiques nécessaires pour la simulation des concepts

liés à l’environnement :

Afin de visualiser quelconque expérience scientifique ou les différents aspects écologiques et

environnementaux, on aura besoin de matières chimiques et outils de laboratoires ou parfois

de grandes machines.

Par exemple, pour réaliser une expérience de distillation fractionnée une expérience afin de

visualiser les changements des états de l’eau, il faut avoir les matériels suivant :

Un ballon

rond, contenant le mélange de liquides à séparer. Un montage à distillation fractionnée qui se compose d’une colonne à fractionnement comme une colonne de Vigreux (par exemple garnie avec des anneaux de Raschig), un tube de jonction, un adaptateur pour thermomètre, un thermomètre, un réfrigérant, et un tube d'écoulement. Un ballon, une fiole jaugée ou un cylindre gradué pour récupérer le distillat. Le cout de ces matériels s’élève à 3000Dhs. Ce qui nous engendre la nécessité d’avoir des centaines des millions de Dirhams pour équiper chaque école avec ces matériels. Tout en sachant que ces équipements ne sont que pour une expérience.

En dépit du grand intérêt et de la simplicité d’assimiler ces concepts à l’aide de ces outils, le

coût de ces expériences serait épouvantable d’où la difficulté d’avoir un grand budget pour un

grand nombre d’élèves.

L’absence

de

plateformes

pédagogiques

destinées

spécialement

au

jeune

public

Marocain :

On trouve plusieurs plateformes d’apprentissage sur le Net, néanmoins ces plateformes connaissent une absence d’outils pédagogiques qui soient contrôlés et bien cadrés On peut facilement tomber sur des informations erronées et fausses.

La plupart des plateformes existantes sont en langues étrangères. L’enfant marocain du primaire récepteur de ces informations trouve du mal à comprendre et à cerner des

22
22

terminologies anglaises ou francophones. Et elles ne présentent pas les différentes caractéristiques géographiques marocaines. Par exemple, on ne trouve jamais des informations liées au désert du Maroc.

Ainsi ces plateformes étrangères ne reflètent pas le contexte marocain.

Quels sont les principaux buts de la plateforme ?

Education par l’apprentissage :

L’éducation à l’environnement par l’apprentissage des élèves du primaire par la pratique est la clé de voûte et l’élément déterminant qui conditionnera à fortiori la capacité de ressources humaines à relever les défis par un accompagnement efficace des stratégies nationales et des projets structurants ; une initiative qui favorisera le développement d’une culture nouvelle et d’un savoir-faire innovant en matière de développement durable, de manière à répondre efficacement aux priorités économiques, sociales et environnementales du Royaume.

Le cycle de l’eau est un cours de la matière des sciences pratiques qu’on présente aux élèves depuis le 3 ème niveau du primaire. Et grâce à notre plateforme ils pourront voir des vidéos qui expliquent ce concept ou même regarder tout le scénario du cycle de l’eau en 3D présent dans le jeu. La visualisation graphique en 3D permet aux élèves de voir la circulation de l’eau dans l’atmosphère, sous forme de vapeur d’eau essentiellement, puis son écoulement sur les continents, qu’il soit superficiel ou souterrain.

23
23
Figure 2: cycle de l’eau [w15] La sensibilisation à l’importance de l’environnement et du développement

Figure 2: cycle de l’eau [w15]

La sensibilisation à l’importance de l’environnement et du développement durable :

La plateforme vise à inculquer aux écoliers les notions de développement durable, des comportements et modes de vie respectueux de l’environnement via une démarche pédagogique et volontariste qui incite les élèves à jouer un rôle actif et à établir un diagnostic de leur établissement scolaire afin de remédier aux problèmes environnementaux soulevés sur 5 thèmes environnementaux Eau, Energie, Gestion de déchets, Alimentation et Biodiversité. Ainsi l’instauration de ces concepts chez les enfants se fera à l’aide des éducatifs, des histoires, des visites virtuelles, des expériences scientifiques…

Par exemple sur la plateforme, on trouve une rubrique pour les bandes dessinées. Les personnages principaux de ces BD sont les « boundifs ». Dans ces histoires on véhicule les concepts de la protection de l’environnement. Par exemple : la nécessité de ne pas salir les plages, ou utiliser l’eau des robinets d’une manière responsable et respectueuse.

Divertissement instructif :

produit capable d’attirer l’attention des jeunes esprits à l’aide d’un beau design et différentes

animations. Ainsi que des interfaces ergonomiques, légères, efficaces, compatibles et simples

à manipuler pour les différents utilisateurs. L’enfant ne doit pas se sentir ennuyé lors de son

utilisation de la plateforme. L’objectif de l’éducation doit se réaliser tout en assurant le

divertissement. Donc l’objectif est de combiner à la fois des aspects sérieux tels, de manière

non exhaustive, l’enseignement, l’apprentissage, la communication ou encore l’information,

avec des ressorts ludiques issus du jeu vidéo.

Bien évidemment le jeu doit présenter des applications des éco gestes. Par exemple, chercher

les anomalies dans un environnement qui peuvent être : de l’eau qui coule d’un robinet ou les

gaz issus des voitures. Et interagir avec le jeu pour arrêter ces anomalies.

Illustration de la partie théorique du programme primaire :

Le programme primaire est riche d’expériences scientifiques dans la matière « activité

scientifique », pour aider les jeunes esprits à assimiler des concepts scientifiques dont nous

pouvons citer : le cycle de vie de l’eau, le réchauffement planétaire … Le but de la plateforme

est de visualiser ces concepts et ces expériences à travers des animations agréables et

concises, et non se limiter à l’explication théorique présentée à la classe. Les outils

technologiques de la plateforme permettent la facilité de la compréhension et la possibilité de

faire quelque simples expériences.

Mise en œuvre d’un système de validation et de contrôle :

Afin d’avoir un contenu qui soit crédible, les publications doivent être bien cadrées et contrôlées. Le contenu de cette plateforme fera l’objet d’un support pour les professeurs dans leurs préparations des cours, ainsi que pour les étudiants dans leurs recherches.

Ainsi en faisant appel aux TIC pour l’amélioration de l’apprentissage par des ressources pédagogiques plus interactives et le renforcement des compétences des jeunes, ce projet contribuera aux efforts du Maroc engagés dans le cadre de :

- Stratégie MENFP/ Programme ‘GENIE’ : Le renforcement des compétences du personnel de l’éducation et de la qualité de l’enseignement par la promotion des technologies les plus récentes dans le domaine de l’éducation et des contenus ;

- Programmes et Projets Structurants menés au niveau national : Programmes Solaire et Eolien, Efficacité Energétique, Lutte contre les Changements Climatiques… ;

25
25

- La décennie des nations unies de l’éducation au service de développement durable ‘2005-2014’ et recommandations du WEEC2013 soulevant le rôle clé de l’utilisation des Technologies d’information et de communication dans l’amélioration du processus d’enseignement et la diversification des méthodes et outils d’apprentissage ;

- La promotion du Programme de développement des Energies renouvelables :

dont le Plan Solaire Maroc qui prévoit 42% de capacité énergétique d’origine propre et 15% d’économie d’énergie à l’horizon 2020.

A qui est destinée la plateforme ?

Orientée Ecoliers du primaire du Royaume mais aussi aux Enseignants, cette plateforme permettra aux écoliers d’acquérir les notions de base et connaissances scientifiques sur cette thématique en les impliquant dans le processus d’apprentissage via l’intégration de modules interactifs et participatifs.

Pourquoi le jeu sérieux ?

Une des vocations des bibliothèques est de mettre à la disposition d'un public qui se veut le plus large possible un maximum d'informations, et ce, de façon à ce que lesdites informations puissent être facilement appréhendées et intégrées. Elles peuvent être fournies sous des formes très diverses, le livre étant bien sûr la plus ancienne, et probablement la plus « légitime » dans l'inconscient collectif. Mais l'essor des « nouveaux médias » et leur intégration progressive aux collections des nouvelles « médiathèques » fait que l'on peut aujourd'hui faire son miel à partir de nombreuses autres ressources, notamment numériques (documentaires vidéos consultables sur Internet, revues électroniques, sites internet informatifs ou engagés

Ces ressources informatives, papier ou numériques, ont ceci en commun qu'elles sont le plus souvent « passives ». Elles se contentent de présenter des faits, de les offrir au regard ou à l'écoute des publics, de manière plus ou moins neutre. Or, il est impossible de simplement mettre les pratiques par écrit. Du fait qu'ils proposent une application immédiate, une partie pratique complémentaire à la simple théorie, mais facile d'accès car basée sur des processus connus et facilement intégrables à des collections de bibliothèques, les serious-games apportent ainsi une importante plus-value par rapport aux sources « classiques » d'information.

26
26

Quelles sont les contraintes de qualité du projet ?

L’objectif ici est d’exposer les différentes catégories de contraintes auxquelles le sous- système de gestion d’administration doit répondre, à savoir les contraintes de sécurité, les contraintes techniques, et les contraintes architecturales.

Contraintes de sécurité

Tout utilisateur du système de gestion peut accéder à cette application. Ceci est garantie via son compte personnel gmail ou facebook qu’il possède déjà, donc il lui suffit qu’il introduise son login et mot de passe, ce qui permet d’éviter toute intrusion non désirable. Une fois authentifiés, les utilisateurs peuvent profiter des différents services offerts par l’application.

Contraintes techniques

L'interface web doit être conviviale et facile à utiliser.

L’interface doit être interactive et modélisée en 3D.

La vérification de l'authentification se fait au niveau d’un SGBD.

Contraintes architecturales

L’application est développée sur la base de la technologie MEAN STACK web.

L’application utilise node.js comme serveur d’application et des API pour communiquer avec le client.

L’application communique avec Mongo comme SGBD d’administration.

En termes de qualité, les résultats de notre projet doivent satisfaire les critères suivants :

Disponibilité : Le système doit fonctionner 24h/24 et 7j/7 afin d’offrir une disponibilité du système en permettant de maintenir le bon fonctionnement du système d’information.

Intégrité : L’intégrité du système doit être maintenue autant par la permission de modification de données que par les personnes appropriées et dans les lignes directrices établies.

27
27

Confidentialité : L’application doit protéger la confidentialité en limitant l’accès aux données des utilisateurs, cela impliquerait l’identification des utilisateurs, l’authentification et l’autorisation.

Evolutivité : Dans une conjoncture actuelle concurrentielle, le système cible doit être évolutif en vue de s’adapter ou adopter les éventuels changements structuro- organisationnels. Il doit être possible d’étendre l’application afin qu’elle puisse intégrer d’autres fonctionnalités.

Maintenabilité : l’application doit assurer éventuellement toute maintenance adaptative, évolutive ou corrective tout en minimisant l’effort à y allouer et en proposant des scénarii de backup en cas de panne.

Sécurité : l’application doit assurer un système de sécurité flexible, permettant, d’une part, d’accéder avec différents niveaux de granularité, aux fonctionnalités du système selon les droits de l’utilisateur ; et d’autre part d’échanger des données entre les différents modules tout en garantissant leur sécurité et intégrité.

Conclusion :

Le projet mené par INTELLCAP en partenariat avec la Fondation Mohamed VI pour la

Protection de l’Environnement est la création d’une plateforme pédagogique collaborative

pour l’éducation à l’Environnement et au Développement Durable. Cette plateforme doit être

réalisée en version Web et Mobile ; ce qui impose la nécessité de la synchronisation et la

compatibilité des paramètres de stockage entre les deux versions.

Les destinataires principaux de la plateforme sont les enfants (élèves) du primaire et pour

garantir l’efficacité du but éducatif la FONDATION et INTELLCAP ont utilisé les résultats

du programme Eco-Ecoles et du pratique terrain mené par les deux coopérateurs. Ces résultats

confirment la réceptivité des enseignants et des élèves envers l’approche basée sur
confirment
la
réceptivité
des
enseignants
et
des
élèves
envers
l’approche
basée
sur

l’apprentissage par la pratique, dans le cadre de projets collaboratifs faisant appel à divers

types d’outils pédagogiques, et notamment les kits technologiques.

La plateforme repose sur des communautés de scientifiques, de technologues, de pédagogues

et de sociologues qui débattent et traitent des questions relatives aux besoins éducatifs des

jeunes citoyens, des meilleures pratiques en matière d’apprentissage, qui orientent et
jeunes
citoyens,
des
meilleures
pratiques
en
matière
d’apprentissage,
qui
orientent
et

alimentent régulièrement la plateforme en contenus pertinents, égale à l’état-de-l ’art voire

avant-gardistes et innovants. Ces collaborateurs sont inscrits dans la plateforme en qualité de

informations personnelles qui confirment leur poste et leur profession comme le numéro de

somme.
somme.

Notre objectif consiste donc à créer une plateforme d’apprentissage qui répond au besoin des

apprenants à la fois et de manière à :

 Favoriser une pédagogie socioconstructiviste (collaboration, activités, réflexion critique, etc.) ; 
Favoriser
une
pédagogie
socioconstructiviste
(collaboration,
activités,
réflexion
critique, etc.) ;
Garantir plus de souplesse pour la planification des formations à l’aide d’une interface
ergonomique, légère, efficace, compatible -sans nécessité d'un navigateur récent- et
simple à manipuler pour les différents utilisateurs ;
Faciliter l’accès aux ressources et services ;
Offrir aux apprenants un espace d’apprentissage individualisé ;
Faciliter le partage, la production, la communication et la collaboration à distance ;
Offrir un accès aux fonctionnalités nécessaires t des services web 2.0 ;
Offrir
aux
apprenants
un
espace non
seulement
d’apprentissage mais
aussi
de

divertissement.

espace non seulement d’apprentissage mais aussi de divertissement. Figure 3: Schéma descriptif de la plateforme 29

Figure 3: Schéma descriptif de la plateforme

29
29

1.3 CONDUITE DU PROJET :

1.3.1 PROCESSUS DE DEVELOPPEMENT :

L’adéquation du projet au processus de développement peut largement affecter le sort d’un projet informatique. Donc, un mauvais choix du processus de développement peut conduire un projet à l’échec. Afin de minimiser ce risque, nous avons dressé un tableau comparatif des différents processus utilisés dans le cadre de développement de projet informatique (cf. tableau 1).

 

Description

 

Points forts

Points faibles

 

-Développement

guidé

-Itératif -Simple à mettre en œuvre -Fait une large place aux aspects techniques. -Builds journaliers -Amélioration constante, adaptation aux Modifications

-Ne couvre pas les phases en amont et en aval du développement -Assez flou dans sa mise en œuvre : quels intervenants, quels livrables ?

par

les

besoins

du

 

XP

client.

eXtreme

-Equipes

réduites,

centrés

sur

les

Programmingg

développeurs

 

(Binômes)

2TUP:

Two

-S’articule autour de l’architecture. -Propose un cycle de développement en Y -Cible des projets de toutes tailles.

 

-Itératif et fait une large place à la technologie et à la gestion du risque. -Définit des profils des intervenants, les livrables, les plannings, les prototypes

-Plutôt superficiel sur les phases situées en amont et en aval du développement -Ne propose pas de documents types.

Track

Unified

Process

 

- processus léger de développement de logiciels permettant de gérer le développement de produits logiciels.

-Itératif -L’ouverture des changements -La collaboration avec le client. -Les personnes et les interactions.

-

Un solide coup de

pied dans les couilles de

l’innovation.

SCRUM

-

Le livre dit de faire ça.

Tableau 1 : Tableau comparatif des différentes méthodes de développement [5]

30
30

Un processus de développement définit une séquence d’étapes, en partie ordonnée, qui concoure à l’obtention d’un système logiciel nouveau ou à l’évolution d’un système existant. Ce processus a pour objectifs de produire des solutions informatiques de qualité répondant aux besoins des utilisateurs dans des temps et des coûts prévisibles. De ce fait, l’adéquation du projet au processus de développement peut largement affecter le sort d’un projet informatique. A cet effet nous avons tenu à choisir un processus qui s’adapte le mieux à mon projet, donc nous avons opté pour le processus 2TUP (Tow Tracks Unified Processus).

2TUP signifie « 2 Track Unified Process», c’est un processus qui répond aux caractéristiques du Processus Unifié. Le processus 2TUP apporte une réponse aux contraintes de changement continuel imposées aux systèmes d’information de l’entreprise. En ce sens, il renforce le contrôle sur les capacités d’évolution et de correction de tels systèmes.

« 2 Track» signifient littéralement que le processus suit deux types de chemins. Il s’agit des «chemins fonctionnels» et « d’architecture technique », qui correspondent aux deux axes de changement imposés au système d’information. [w2]

correspondent aux deux axes de changement imposés au s ystème d’information. [w2] Figure 4: Modèle 2tup

Figure 4: Modèle 2tup [w16]

31
31

La branche gauche (fonctionnelle) : capitalise la connaissance du métier de l’entreprise. Elle constitue généralement un investissement pour le moyen et le long terme. Les fonctions du système d’information sont en effet indépendantes des technologies utilisées.

Cette branche comporte les étapes suivantes :

La capture des besoins fonctionnels, qui produit un modèle des besoins focalisés sur le métier des utilisateurs.

L’analyse.

La branche droite (architecture technique) : capitalise un savoir-faire technique. Elle constitue un investissement pour le court et moyen terme. Les techniques développées pour le système peuvent l’être en effet indépendamment des fonctions à réaliser.

Cette branche comporte les étapes suivantes :

La capture des besoins techniques.

La conception générique.

La branche du milieu : à l’issue des évolutions du modèle fonctionnel et de l’architecture technique, la réalisation du système consiste à fusionner les résultats des 2 branches. Cette fusion conduit à l’obtention d’un processus en forme de Y. Cette branche comporte les étapes suivantes :

La conception préliminaire.

La conception détaillée.

Le développement.

L’intégration.

La validation.

Les tests.

La mise en production.

32
32

1.3.2

PLANIFICATION DU PROJET :

Conduire un projet, c’est assurer le pilotage d’un processus de changement avec des ressources dédiées en optimisant les compétences, l’organisation, les systèmes et les outils de conduite.

Il s’agit donc d’une approche managériale réactive, souple et systématique pour mener à bien des changements importants, complexes, ciblés sur le but à atteindre. Il y a trois niveaux de gestion du projet : la gestion de la production, des ressources et du temps. Afin de satisfaire à ce dernier critère qu’est la gestion du temps, voici notre planning final.

à ce dernier critère qu’est la gestion du temps, voici notre planning final. Tableau 2 :

Tableau 2 : Listes des tâches

33
33
34 Figure 5 : Diagramme de Gantt du projet « Analyse, Conception et réalisation d’une
34
Figure 5 : Diagramme de Gantt du projet « Analyse, Conception et réalisation d’une plateforme
pédagogique collaborative, web et mobile pour l’éducation à l’environnement et au développement
durable

En effet, nous avons réalisé les tâches suivantes selon cet ordre.

Documentation

Etude de l’existant

Analyse : étude fonctionnelle et technique

Conception préliminaire et maquettage

Conception détaillée

Codage et tests internes

Déploiement et tests utilisateurs

Correction des anomalies

L’élaboration du rapport a été répartie tout au long du stage, et ce afin de présenter les différentes étapes de la réalisation du projet.

Ce planning était un fil conducteur tout au long du projet. Il nous a permis d’ajuster les dérives et de maitriser la gestion du temps allouée pour la réalisation du projet.

Conclusion

Ce premier chapitre constitue le point de départ du projet. Ceci a été représenté via l’étude de l’entreprise cliente, son organisme d’accueil, ses activités, ses missions. Ensuite, la présentation du cadre général du projet sous forme de problématique mise à l’épreuve, ainsi que la solution générale proposée. Avant de finir avec la planification de la mise en œuvre. Le deuxième chapitre qui suivra présentera les spécifications fonctionnelles du système.

35
35

2. Analyse et spécification des besoins

2. Analyse et spécification des besoins Analyse et spécification des besoins Cette partie est consacrée à
Analyse et spécification des besoins Cette partie est consacrée à l’étude, l’analyse et la spécification
Analyse et spécification des besoins
Cette partie est consacrée à l’étude, l’analyse et la spécification des
besoins qui permettra de présenter l’état actuel du système, les modules
à traiter et les fonctionnalités à assurer par le système et qui constituent
son périmètre fonctionnel.
36

2.1

ANALYSE DE LEXISTANT :

L’étude de l’existant permet de déterminer les points faibles et les points forts d’un produit actuel pour pouvoir déterminer les besoins du client, à prendre en considération lors de la conception et la réalisation de la plateforme. Dans cette section, nous présentons une analyse de la plateforme existante. Ensuite, nous formulerons une solution de la problématique.

Cette partie repose sur deux synthèses :

Une analyse technique critique de la plateforme à refondre, accompagnée des premiers constats et propositions.

Une analyse de l’existant. Elle repose sur une recherche d’outils similaires sur le Web et sur les résultats d’un questionnaire envoyé à un échantillon des utilisateurs actuels et potentiels de l’ancienne plateforme.

2.1.1 Description de l’existant :

Actuellement, INTELLCAP dispose d’une plateforme qui permet aux visiteurs de consulter des publications sur l’environnement et les énergies renouvelables, de lire des commentaires et de faire des publications. Au lancement de l‘application, la page d‘accueil s‘affiche pour permettre au visiteur de consulter le contenu de la plateforme. Le menu au milieu donne au visiteur le choix entre «Médiathèque », « ressources numériques » et « espace wiki » ainsi que la possibilité de s’inscrire pour bénéficier d’autres avantages tels que la publication dans le forum et les contributions dans la plateforme (cf. figure suivante) :

37
37
Figure 6 : Interface d’accueil de la plateforme existante En cliquant sur « Médiathèque »

Figure 6: Interface d’accueil de la plateforme existante

En cliquant sur « Médiathèque » dans la page d’accueil, l’utilisateur est redirigé vers la page Médiathèque, ou il peut consulter des vidéos sur l’environnement (cf. figure suivante) :

ou il peut consulter des vidéos sur l’environnement (cf. figure suivante) : Figure 7: Interface de

Figure 7: Interface de la médiathèque

38
38

L’espace Wiki est constitué de deux catégories (ex : idées et projets ou expériences pratiques) et dans chaque catégorie des sujets sont publiés par l’administrateur de la plateforme. L’utilisateur peut commenter les publications et participer aux discussions. (cf figure suivante) :

et participer aux discussions. (cf figure suivante) : Figure 8 : Interface de l’espace Wiki 2.1.2

Figure 8 :Interface de l’espace Wiki

2.1.2 Analyse critique :

L’analyse critique a permis, d’une part, de dresser un bilan de la page existante, d’en faire ressortir les atouts et les faiblesses, et d’autre part, de saisir les finalités du projet. Voici les faiblesses qui ont pu être établies suite à cette analyse :

39
39

Point analysé

Faiblesse(s) constaté(s)

Information sur le site (métadonnée)

Les métadonnées classiques étaient incomplètes. En effet, pour favoriser le référencement, certaines métadonnées classiques comme les mots-clés (keywords) doivent figurer dans la balise «Head».

Esthétique

et

Les couleurs, trop nombreuses, empêchaient une lisibilité claire de la page. De plus elles n’étaient pas toutes en adéquation avec la page d’accueil du site, ce qui dégage une impression esthétique désagréable.

La grande variété des styles de police créaient un effet de profusion qui nuisait à la compréhension globale de la page.

Illustration

Les logos de la FM VI et d’INTELLCAP ne figuraient pas sur la page d’une façon très claire. De plus l’identification au site n’était pas évidente puisqu’on ne retrouvait pas la cohérence graphique avec le thème l’environnement.

Les interfaces manquent d’interactivité 3D et ne présentent aucune attraction pour mettre en immersion d'une manière ludique et impliquer les enfants dans leur environnement.

Navigation

et

La page étudiée appartenait au premier niveau de l’arborescence : elle était donc facilement accessible. Cette page servait surtout à accéder à d’autres sites.

On pouvait remonter dans l’arborescence (vers la page d’accueil) via un lien en haut à droite de la page. Mais il n’y avait pas d’outils de navigation proprement dits.

arborescence

L’accès à la page depuis la page d’accueil n’était pas aisé.

Le contenu de la plateforme

Le contenu de la plateforme est incomplet.

L’organisation de la page est mal structurée et mal présentée.

 

Le dénombrement par conséquent des liens morts, en plus de pages mortes.

L’ancienne plateforme présente plusieurs bugs qui nuisent au contenu.

Tableau 3 : Bilan de la plateforme existante

Les résultats du programme Eco-Ecoles et des pratiques terrains menées par la FONDATION et

par INTELLCAP confirment la réceptivité des enseignants et des élèves envers l’approche basée

sur l’apprentissage par la pratique, dans le cadre de projets collaboratifs faisant appel à divers

types d’outils pédagogiques, et notamment les kits technologiques. Aussi, il a été jugé pertinent

d’adopter une approche composite, cognitiviste et connectivite à la fois, pour la mise en place

d’une plateforme pédagogique conçue sur la base d’outils virtuels et matériels. Un questionnaire

40
40

a été préparé afin de savoir comment le public, surtout les enfants du primaire, percevaient et appréhendaient la plateforme, ce qu’ils en attendaient, ce qu’ils déploraient.

a. L’élaboration du questionnaire :

Le questionnaire a été préparé à partir de l’analyse technique et des premiers constats critiques. Il avait différents objectifs :

Identifier les publics visés.

Evaluer les qualités et les défauts de l’ancienne plateforme : le contenu existant, son organisation et son esthétique.

Détecter les spécificités d’utilisation et les attentes des utilisateurs en fonction des catégories de public.

Confronter leurs besoins avec notre propre analyse.

b.

Analyse des réponses du questionnaire :

La consultation de l’application

Plus de 90% des personnes étaient satisfaites de l’utilisation de l’application. Pour la plupart des utilisateurs, ils n’ont pas trouvé des difficultés à utiliser toutes les fonctionnalités. Par contre, environ 36% des personnes ont dit avoir besoin d’un enseignant afin de les guider dans l’application.

Le contenu et son organisation

Près de 36% des répondants estimait avoir trouvé des problèmes techniques lors de l’utilisation de l’application.

La majorité des utilisateurs trouvent que la présentation de l’information et des instructions était très claire. En effet, 96% des personnes estimaient que l’organisation de la page était claire et 4% pensaient le contraire.

Plus de 90 % des utilisateurs pensent que l’utilisation de telle application est pertinente.

L’esthétique et l’animation de la page

La quasi-totalité des répondants a eu une impression esthétique. Cette impression est essentiellement liée aux couleurs et aux animations [Voir Annexe 1].

Conclusion de l’analyse

41
41

L’analyse de l’existant a donc contribué à dégager les faiblesses de la page telle qu’elle est proposée actuellement. Elle a permis de dégager les quatre axes essentiels pris en considération pour la conception du nouveau projet :

Accroître et/ou modifier l’information afin qu’elle puisse intéresser de nouveaux publics (en particulier les enseignants-chercheurs et les étudiants).

Réorganiser les informations, les aérer visuellement, les compléter et les détailler.

Modifier l’esthétique de la page en homogénéisant ses couleurs, sa police, ses icônes, images et boutons.

Programmer de nouveaux modèles interactifs en 3D qui soient plus attractives.

La solution « ةيتامولعملا ةصنملا» est donc une plateforme de partage des cours web. Elle permet aux visiteurs, qui désirent consulter un biblio-numérique, de visiter en ligne les différents documents pédagogiques qui existent, de voir ses différents cours, animation, et de faire des exercices afin de tester les connaissances formées. Ainsi, et cette fois à l’aide d’une petite inscription, il aura le droit d’accéder à Espace WIKI pour voir les expériences partager entre les utilisateurs de la Plateforme, de commenter et de voter sur un article.

L’utilisateur peut se trouver dans la plateforme en trois images : un visiteur simple, ou bien un membre à l’aide d’une inscription, ou bien un propriétaire d’expérience possédant son propre espace des articles, qui lui permet de créer son registre et de le gérer.

Le système fournit un espace d’administration, qui permet à l’administrateur de gérer les utilisateurs du système. A l’assistant le traitement du contenu de la plateforme, et l’affectation des profils aux utilisateurs de la plateforme.

INTELLCAP met à la disposition des utilisateurs de la plateforme un Jeu éducatif 3D en ligne développé avec une technologie de moteur de jeu dernière génération. Afin que l’utilisateur puisse visiter un espace 3D virtuel où il peut consulter des contenus scientifiques interactifs Ainsi, la solution « ةيتامولعملا ةصنملا» se décompose en deux parties :

Partie « Application Web et Mobile ».

Partie « Jeu sérieux 3D ».

Dans la suite, Nous allons décrire la phase de déroulement d’identification des besoins fonctionnels, et nous allons identifier les acteurs principaux, et déclarer les fonctionnalités de

42
42

modules. Et enfin, nous allons détailler ensuite le cas d’utilisation de la partie « Application Web », et du partie « Application Jeu 3D ».

Partie « application Web et Mobile »

Dans cette partie, nous allons voir les besoins fonctionnels qui représentent les attentes de chaque acteur de la future plate-forme. Toute solution conceptuelle doit satisfaire, préalablement, à des besoins fonctionnels afin de délimiter le périmètre fonctionnel de l‘application et surveiller la traçabilité des besoins lors de la phase de développement.

2.2 Identification des besoins fonctionnels :

Après une analyse approfondie du cahier de charges, il s’est avéré nécessaire que la plateforme puisse gérer plusieurs fonctionnalités. Ainsi la présente plateforme doit satisfaire les besoins fonctionnels suivant :

Gestion des utilisateurs

Ce module est dédié pour les utilisateurs ayant comme rôle administrateur. Ce profil d'utilisateurs est seul à gérer les utilisateurs, à savoir modifier, désactiver un utilisateur. Chaque champ sera vérifié s’il est correct par rapport à la syntaxe et à la sécurité. Une interface Webmaster est réalisée pour pouvoir gérer les inscriptions, valider ou supprimer un compte, gérer les publications et consulter les statistiques. C’est l’administrateur qui est responsable de l’affectation des profils aux utilisateurs afin de permettre ou de restreindre l’accès à telle ou telle fonctionnalité. Un profil ne peut être modifié ou supprimé que par l’administrateur qui l’a créé.

Gestion de l’espace Wiki

Ce module est dédié à la visualisation et le partage d’idées de projets et d’expériences pratiques, en offrant à l’utilisateur la possibilité de rédiger son propre contenu et de le publier

pour permettre aux autres de le consulter et de le télécharger. Ainsi cette rubrique est organisée comme suit :

● Expériences pratiques : L’utilisateur aura l’accès à la base de données des expériences pratiques, il pourra également télécharger les fichiers, images, photos, modèles et schémas relatifs à chaque publication mise en ligne par d’autres membres.

43
43

Idées et projets : un espace d’échange d’idées et de projets d’intérêt commun entre les utilisateurs de la plateforme.

Gestion de la Médiathèques

Dans cette rubrique, l’utilisateur est invité à visualiser les images, animations et spots vidéos

mis en ligne pour la sensibilisation à l’importance de la protection de l’environnement, et notamment des ressources rares comme l’eau : préservation, lutte contre le gaspillage

Gestion des ressources numériques

Un cube 3D (sous forme de dé) est prévu pour représenter les 6 niveaux scolaires primaires sur ses 6 facettes. En dessous du cube il y aura des flèches qui permettront de faire tourner le

dé, ou bien manipuler le pointeur de la souris pour sa rotation. Chaque niveau est lié à une page sur laquelle l’utilisateur trouvera les contenus pédagogiques disponibles : fiches pratiques, supports relatifs au programme scolaire.

Gestion de la bibliothèque B.D

Sur ce module, des catalogues sous forme de livrets 3D sont affichés ; l’utilisateur aura la

main pour choisir parmi ces livrets pour lister les contenus proposés. La navigation sur cette page se fait par le pointeur de la souris ou des flèches situées au- dessous de l’écran. Si on clique sur un catalogue l’utilisateur aura la possibilité de le visualiser en ligne ou de télécharger son contenu.

Gestion de la communication entre les utilisateurs

Les membres de la plateforme peuvent consulter la liste des personnes en ligne et communiquer avec eux ou inviter un autre membre à jouer en mode multi-joueurs en jeux 3D.

Module de reporting

Ce module concerne la génération des bilans sur la plateforme. Il contient des statistiques et

des données sur le nombre des visiteurs et les thèmes les plus traités. Cest une entrée principale pour la prise de décision au niveau de la gestion de la plateforme. Le reporting consiste en la génération du rapport en PDF.

44
44

Gestion d’accès

L'accès aux différents services ou interfaces du système est contraint par un ensemble de définitions de sécurité ou niveaux d'interventions, L'octroi de ces niveaux diffère selon le profil de chaque utilisateur. En effet, l’accès pour ce dernier se fait par des habilitations paramétrées à l’avance. Le login et le mot de passe sont envoyés à l'adresse de messagerie

renseignée lors de l’inscription. Pour chaque accès à l’un des services offerts par la plateforme, l’utilisateur doit avoir un profile qui lui permet d’y accéder.

2.3 Identification des besoins non fonctionnels :

Un besoin non fonctionnel est une restriction ou une contrainte qui pèse sur un service du système, telle les contraintes liées à l’environnement et à l’implémentation et les exigences en matière de performances. Les besoins non fonctionnels :

La plateforme doit fournir un accès rapide aux informations, et doit faire la mise à jour en temps réel,

La plateforme doit être portable, extensible, réutilisable et fiable,

La plateforme offre une interface conviviale et facile à utiliser,

La plateforme doit garantir la confidentialité, l’intégrité et la cohérence des données.

2.4 Identifications des acteurs :

Un acteur représente l’abstraction d’un rôle joué par des entités externes (utilisateur, dispositif matériel ou autre système) qui interagissent directement avec le système étudié. L’utilisateur peut se trouver dans la plateforme en deux profils : visiteur simple ou bien membre de la plateforme. D’autre part, le système fournit un espace d’administration, qui permet à l’administrateur de gérer les utilisateurs du système (assistants, gestionnaires). Le gestionnaire s’occupe de la gestion de l’espace Wiki alors que le comité pédagogique s’occupe de la gestion des ressources numérique.

45
45

Les acteurs principaux avec lesquels interagit notre plateforme sont :

Acteur

Explication

Administrateur

Responsable de la gestion des utilisateurs de l’application, de l’affectation des privilèges et de l’administration générale du système.

Comité pédagogique

Responsable de l’alimentation de l’application par des ressources numériques ainsi que la validation des fichiers partagés après la vérification du contenu.

Professeur

Le professeur peut publier des articles dans l’espace Wiki. Un professeur est un sorte de membre : il peut faire avec le système tout ce que peut faire un membre, plus d’autres choses.

Visiteur/membre

Les membres peuvent se connecter à la plateforme et peuvent discuter sur l’espace Wiki et noter les publications alors que le visiteur ne peut que consulter les publications sur la plateforme.

Tableau 4 : Les différents acteurs de la plateforme

2.5 Identification des cas d’utilisation :

Un cas d'utilisation définit une manière d'utiliser le système et permet d'en décrire les exigences fonctionnelles. Chaque cas d'utilisation contient un ou plusieurs scénarios qui définissent comment le système devrait interagir avec les utilisateurs (appelés acteurs) pour atteindre un but ou une fonction spécifique d'un travail. Un acteur d'un cas d'utilisation peut être un humain ou un autre système externe à celui que l'on tente de définir. Il permet d'adopter le langage de l'utilisateur final ou de l'expert du domaine. Chaque cas d'utilisation est représenté au sein d'un diagramme de cas d'utilisation.

46
46
Modules de l’application Administrateur Comité P Professeur Membre Gérer son profil (Créer compte, choisir son
Modules de l’application
Administrateur
Comité P
Professeur
Membre
Gérer son profil (Créer compte, choisir
son propre avatar, mettre à jour ses
informations, etc.)
Gestion des utilisateurs et affectation
des profils
Gestion des ressources numériques, de
la médiathèque et de la bibliothèque BD
Publication des articles sur l’espace
WIKI
Confirmation des publications dans
l’espace Wiki
Discuter, commenter et voter sur
l’espace WIKI, naviguer sur la
plateforme et jouer au jeu 3D
Module de reporting pour la génération
des bilans et des statistiques

Suppression des commentaires

Figure 8 : Matrice cas d’utilisation/acteurs

47
47

2.6

Diagramme de cas d’utilisation global de l’application Web et mobile :

Les fonctionnalités que le système doit assurer, ainsi raffinées et

reliées aux acteurs

correspondants,

sont

modélisées

en

langage

UML

à

travers

les

diagrammes

de

cas

d’utilisation.

Nous présentons le diagramme des cas d’utilisation concernant l’application Web aux différents membres ainsi que la mise à jour de la plateforme et le traitement de nouveaux fichiers transmis via les professeurs et les technologues :

48
48
Figure 10: Diagramme de cas d’utilisation global de l’applicat ion Web 49

Figure 10: Diagramme de cas d’utilisation global de l’application Web

49
49

Jeu sérieux 3D

Dans cette partie nous aborderons l’analyse du jeu sérieux. Pour faire une analyse du Jeu 3D, nous devons tout d’abord connaître le processus de développement d’un Jeu.

2.7 Procédure de développement d’un jeu :

Le développement d’un jeu ne nécessite pas que des compétences de programmations, mais surtout plusieurs personnes spécialistes du multimédia. A savoir : Game Designer, Artists, Instrumental Designer, Technical Designer, Subject Matters Designer, Programmeur.

Technical Designer, Subject Matters Designer, Programmeur. Figure 11 : Les différents compétences dans le

Figure 11 : Les différents compétences dans le développement d'un Jeu Educatif

Concernant le processus de développement du jeu, il y a trois phases principales :

La phase de pré-production : Cette phase est constituée de deux étapes, l’étape du développement du concept (Concept Development) où on définit l’idée principale du jeu, sa description, son histoire, son genre, son public cible et d’autre information du jeu. Et ensuite l’étape de conception où on fait la conception des personnages, du gameplay, des scènes, des interfaces, du StoryBoard, des niveaux.

La phase de production : Dans cette phase on implémente et on programme le jeu avec toutes les scènes et les modèles 3D ainsi que les interactions.

La phase de post-production : Dans cette phase finale, on se concentre sur les tests du jeu. Le test consiste à explorer les scènes du jeu dans tous les niveaux, et à rechercher les bugs, et les glitchs imprévus. Après les tests, le jeu ce distribue au grand public, et c’est la partie de déploiement.

50
50
Figure 12 : Le processus de développement d’un Jeu 2.8 Modèle utilisateur et joueurs :

Figure 12 : Le processus de développement d’un Jeu

2.8 Modèle utilisateur et joueurs :

Un élément essentiel de la qualité d’un jeu est basé sur un processus d’apprentissage :

« Les règles d’un jeu vidéo sont en générales très simples, mais, ce qui en fait l’apparente complexité et l’intérêt c’est qu’elles ne sont pas connues du joueur. Le manuel, rarement consulté, comporte une description très schématique de l’univers. Le joueur se lance dans l’aventure et découvre ennemis, pièges et stratégies dans un processus d’apprentissage savamment contrôlé qui lui donne une sensation de dépassement essentielle pour l’intérêt du jeu. Il devient plus fort, comprend de plus en plus l’univers hostile qui l’entoure et triomphe de monstres de plus en plus gros et d’énigmes de plus en plus complexes. Il s’affirme comme le héros du jeu. Or tout ceci n’est qu’un gigantesque bluff : le concepteur du jeu à cacher les règles et les modifie dynamiquement en fonction de la progression du joueur et, dans certains cas, d’une mesure de son efficacité. S’il perd trop souvent on lui fournit une aide pour s’en sortir. Lorsqu’il bat tous les monstres qu’un coup de pied et deux sorts magiques, le jeu lui envoie des monstres qui résistent à cette stratégie. » [2]

Ce principe, connu de tous les concepteurs de jeu (Game Designer), est résumé par la courbe suivante dite courbe d’apprentissage et de la difficulté : A chaque instant le niveau d’apprentissage du joueur lui permet, en faisant preuve d’un minimum de déduction ou d’agilité, de faire face à la difficulté courante. Lorsqu’il la surmonte, il acquiert un nouveau savoir, et doit faire face à un niveau de difficulté qui, de nouveau, l’oblige à se dépasser.

51
51
Figure 13 : Diagramme représentant l’évolution de la difficulté du jeu par rapport aux niveaux

Figure 13 : Diagramme représentant l’évolution de la difficulté du jeu par rapport aux niveaux de difficulté

Tout jeu éducatif ayant des buts de communication tente d’exploiter ce mécanique profondément immersive et addictive. Le diagramme ci-dessous montre les différents facteurs qui interagissent sur l’immersion de l’utilisateur dans le jeu. [3]

sur l’immersion de l’utilisateu r dans le jeu. [3] Figure 14 : Losange représentant les facteurs

Figure 14 : Losange représentant les facteurs qui interagissent sur l’évolution de la compétence et du défi

52
52

2.9 Diagramme de cas d’utilisation global de l’application jeu sérieux 3D

Nous présentons le diagramme des cas d’utilisation concernant le jeu sérieux 3D aux différents membres :

concernant le jeu sérieux 3D aux différents membres : Figure 15 : Diagramme de cas d’utilisation

Figure 15 : Diagramme de cas d’utilisation global du jeu 3D

53
53

2.10

Identifications des risques :

Afin d’assurer le bon fonctionnement du projet, il faut prendre en considération un certain nombre de contraintes :

Non maîtrise des outils de développement : le fait de ne pas maîtriser quelques outils de développement nous amène à passer un temps important pour apprendre et maîtriser ces outils.

Risque de créer une architecture inadaptée

Conclusion

Dans ce chapitre, il sagissait de mener une étude fonctionnelle en plus d’une analyse, ce qui correspond à la branche gauche du processus Y. Le chapitre suivant sera consacré à la conception de la solution.

54
54

3. Phase de conception

Phase de conception Ce chapitre présente les différents diagrammes de séquences relatifs à chaque cas
Phase de conception
Ce chapitre présente les différents diagrammes de séquences relatifs à
chaque cas d’utilisation, ainsi qu’un organigramme présentant le jeu3D, et
enfin le diagramme de classes. Ensuite, il présente les différents patrons de
conception adoptés durant le développement.
55

3.1

Diagrammes de séquences :

Durant la phase de conception, plusieurs diagrammes de séquences ont été dégagés. Ces diagrammes décrivent la communication, de point de vue temporel, entre les acteurs et les objets composants le système. Une description des digrammes les plus importants est présentée dans ce qui suit.

3.1.1 Scénario de l’authentification

dans ce qui suit. 3.1.1 Scénario de l’authentification Figure 16 : Diagramme de séquence d’authentification Le

Figure 16 : Diagramme de séquence d’authentification

Le cas d’utilisation authentification permet à un utilisateur de se connecter à la plateforme en saisissant son nom d’utilisateur et son mot de passe dans le formulaire de la page d’authentification. Le login et le mot de passe sont transmis au service d’authentification qui se charge de faire la vérification auprès d’une base de données.

Si l’authentification réussie, l’utilisateur est redirigé vers la page d’accueil de la console d’administration. En cas d’échec l’utilisateur reste positionné sur la page d’authentification et un message d’erreur sera remonté indiquant que les données sont invalides.

56
56

3.1.2

Création de compte :

Pour créer un nouveau compte, l’utilisateur consulte la page d’accueil de la plateforme. Puis il se dirige vers la page de la création de nouveaux comptes. Il choisit ensuite la fonctionnalité de la création de nouveaux comptes. Le système lui communique un formulaire pour qu’il renseigne ses informations. Ces informations sont transmises au service d’insertion pour qu’elles soient vérifiées et puis insérées dans la base de données. Le système valide par un message de confirmation ou d’échec. Si l’opération se termine avec un succès l’utilisateur est renvoyé à la page d’authentification pour qu’il se connecte à la plateforme.

pour qu’il se connecte à la plateforme. Figure 17 : Diagramme de séquence de création de

Figure 17 : Diagramme de séquence de création de compte

3.1.3 Publication Wiki :

Pour ajouter un nouveau Wiki, le professeur consulte la page d’accueil de la plateforme. Puis il se dirige vers la page des Wikis après être authentifier. Il choisit ensuite la fonctionnalité de l’ajout d’un Wiki. Le système lui communique un formulaire pour qu’il renseigne les différentes informations concernant sa publication. Par exemple l’intitulé, le type de la

Ces informations sont transmises au service d’insertion pour

publication, le contenu

57
57

qu’elles soient vérifiées et puis insérées dans la base de données. Le système valide par un message de confirmation ou d’échec. Si l’opération esse termine par un succès l’utilisateur (Professeur) est renvoyé à la page Wiki pour voir l’affichage de sa publication.

à la page Wiki pour voir l’affichage de sa publication. Figure 18 : Diagramme de séquence

Figure 18 : Diagramme de séquence de la publication Wiki

3.1.4 Recherche ressource Media :

L’utilisateur accède à la page d’accueil. Le système communique un formulaire d'identification. L’utilisateur s'identifie. Le système présente la page d'accueil de ce module avec une liste de ressources. L’utilisateur saisi le mot clé pour la recherche ainsi que le paramètre de la recherche. Le système lui renvoie la liste des ressources les plus adaptés aux critères de sa recherche.

58
58
Figure 19 : Diagramme de séquence de recherche ressource Media 3.2 Diagramme d’état de transition

Figure 19 : Diagramme de séquence de recherche ressource Media

3.2 Diagramme d’état de transition :

3.2.1 Publication Wiki :

Le diagramme d’états-transition permet d’illustrer les différentes étapes par lesquelles passe un fichier après la publication faite par un membre sur la plateforme. Un cours (fichier,

peut passer d’un état à un autre à travers des évènements auxquels il est soumis. A

l’arrivé d’un fichier publié sur la plateforme, il est transmis directement au système pour qu’il puisse être traité par l’assistant qui est responsable de traitement des fichiers reçus, ainsi il examine le fichier si c’est du contenu indésirable qui dans ce cas-là, le fichier sera directement archivé ou totalement rejeté de la plateforme. Dans le cas favorable le fichier est sauvegardé et mis en attente pour être traduit ou modifié éventuellement, pour finalement être publié par l’assistant.

article

)

59
59
Figure 20 : Diagramme d’état -transition « Publication des fichiers » 3.2.2 Jeu 3D :

Figure 20 : Diagramme d’état-transition « Publication des fichiers »

3.2.2 Jeu 3D :

Le présent organigramme présente le fonctionnement du jeu éducatif de la plateforme. Chaque élève peut à tout moment accéder au jeu 3D et bénéficier d’une expérience éducatif et divertissante en même temps.

60
60
Figure 21 : Diagramme d’état -transition « Jeu 3D » 61

Figure 21 : Diagramme d’état-transition « Jeu 3D »

61
61

La première interface présente le menu d’accueil, on peut faire des réglages pour le jeu .Le joueur peut changer la luminosité ou régler les paramètres d’affichages, Ajustez les commandes, ou modifier les réglages du son.

A partir du menu d’accueil le joueur choisit ensuite le type du jeu qui correspond à l’un des thèmes suivant: eau, air, climat … Ensuite il doit choisir le mode de jeu. On distingue deux modes :

Jeu guidé : qui consiste en une visite 3D d’un centre de traitement de l’eau, des composantes du projet Nour pour l’énergie renouvelable et d’autres scènes en 3D pour l’éducation à l’environnement et aux énergies renouvelables. Lors de cette visite, les informations sont simples a assimilé car elles sont présentées graphiquement devant l’élève.

Jeu Libre : qui peut être joué par un seul joueur ou multi-joueurs. Chaque joueur à un personnage qui vit dans un monde virtuel où il doit accomplir des challenges afin de gagner plus de points. Ces challenges sont de nature éducationnelle. Et les joueurs avec les scores les plus élevés reçoivent des cadeaux et des médailles de réussites.

3.3 Diagramme de classe :

Après avoir exposé les cas d’utilisations, l’organigramme du jeu 3D, les différents scénarios de notre système ainsi que les besoins auxquels il doit répondre, cette section présente le diagramme de classes.

62
62
Figure 22 : Diagramme de classe global 63

Figure 22 : Diagramme de classe global

63
63

La plateforme est composé d’un grand package où il y a les composantes de la plateforme ainsi qu’un package du jeu 3D.

Afin d’avoir plus d’informations statistiques et de reporting, la plateforme a plusieurs et différentes classes utilisateur. Les visiteurs définies par un UUID (Unique Universal ID), les membres qui peuvent être des élèves ou des professeurs. Il est nécessaire de vérifier l’identité des professeurs car ils collaborent dans la plateforme en ajoutant des cours ou des expériences (WIKI), du coup chaque professeur doit impérativement présenter son numéro de somme qui sera vérifié avant de finaliser son en enregistrement. On distingue aussi parmi les utilisateurs le WebAdmin qui est l’administrateur de la plateforme.

Le design de la plateforme est un design innovant. Il est composé de plusieurs objets en trois dimensions, cela a imposé des classes pour la gestion des objets, de la camera et des animations.

La classe principale Plateforme est composée de plusieurs classes qui présentent les différentes fonctionnalités de la plateforme dont on cite la classe BD responsable de la présentation des bandes dessinées destinées aux enfants ainsi que la classe Wiki responsable à la gestion des différentes publications de la plateforme.

La classe Plateforme est composée aussi du jeu 3D où se trouvent plusieurs classes responsables de la sauvegarde des données des scènes, des joueurs et des prix ainsi que l’affichage graphique du jeu.

3.4 Document conceptuel (Story Board)

Après la présentation du processus de développement d’un jeu, nous présentons l’un des documents principaux du jeu dans la phase de Pre-Production. Le Story Board représente un ensemble de croquis qui illustrent les différentes interfaces du jeu, ainsi les descriptions de toutes les interactions.

64
64

Niveau A : Le Menu Principale du Jeu 3D

Description

Visuel

Visuel

Croquie du menu Principal

Fonctionnalité

Animation d’intro

L’utilisateur fait face à une scène 3D où il fait face a une simulation de la rotation de terre et avec la lune qui y orbite autour.

Button

Action prévu

1 EAU

Bouton lien vers la scène représentative de l’Eau

2 AIR

Bouton lien vers la scène représentative de l’Air (Désactivé)

3 - ENERGIE

Bouton lien vers la scène représentative de l’Energie (Désactivé)

4 - ECOGESTES

Bouton lien vers la scène représentative de l’EcoGestes (Désactivé)

 

Message de sensibilisation « l’eau est une ressource rare, précieuse et sensible ».

Photos chocs des zones ou des pays qui ont connu des pénuries d’eau.

Message : « nous vous invitons à naviguer dans la plateforme 3D, thème eau »

65
65

Niveau B : Interface principale de l’Eau

Description

Visuel

Visuel

Croquie du menu EAU

 

Fonctionnalité

Bouton

 

Action prévue

1

-

Les

sources

d’eau

Bouton lien vers une scène représentative des sources d’eau douce

douce

 

2 - Le cycle de l’eau

 

Bouton lien vers une scène représentative du cycle de l’eau

3 - Consommation d’eau et

Bouton lien vers une scène représentative des modes de consommation d’eau

concept de l’eau virtuelle

4

- Traitement de l’eau

 

Bouton lien vers une scène représentative des systèmes de traitement de l’eau

5

-

Recyclage

et

Bouton lien vers une scène représentative des techniques de recyclage et réutilisation d’eau

réutilisation

- Pollution de l’eau/Eco- gestes

6

Bouton lien vers une scène mettant en avant les principales causes de pollution de l’eau et les gestes susceptibles de diminuer cette pollution.

7

-

Calculer

votre

Un calculateur d’empreinte sur l’eau est intégré dans le menu, permettant à l’utilisateur de répondre au questionnaire. Son résultat est affiché en ligne et si besoin envoyé par email.

empreinte Eau

Message à faire circuler sur cette scène

Message1 : Apprenez à connaître la valeur de l’eau (% d’eau potable sur la planète), les pressions et menaces

66
66
 

Message2 : Visitez les stations de production et de traitement d’eau ; modes de gestion et coût de l’eau

Message3 : Apprenez comment protéger l’eau

Message4 : Suivez les rubriques 1 par 1 pour devenir « ami » de l’eau.

Niveau B.1 : Interface Les sources d’eau

 

Description

Visuel

Visuel

Croquie du menu SOURCEs D'EAU

 

Contenu

4

- Montagne

L’application va zoomer sur la montagne, en affichant la source d’eau douce concernée, tout en faisant circuler des informations et images relatives aux montagnes les plus célèbres au Maroc.

2

Fleuve

L’application va zoomer sur les fleuves, en faisant circuler des messages et informations relatifs à la source d’eau concernée, et une mise en valeur des fleuves les plus importantes au Maroc, via des images et bulls d’informations.

3

- Lacs

L’application va zoomer sur les lacs, en faisant circuler des messages et informations relatifs à la source d’eau concernée, et une mise en valeur des lacs les plus importants au Maroc, via des images et bulls d’informations.

1

Océan

L’application va zoomer sur l’océan, un système de dessalement de l’eau de mer apparaîtra comme outils de production d’eau douce à partir de l’eau salée.

67
67
   

Des informations liées au littoral du Maroc sont affichées, via des images et bulles d’informations. Et dans la mesure du possible des animations/vidéos.

Messages

Message 1 : Les sources d’eau douce sont limitées, certaines sont épuisables/non renouvelables

Message 2 : plus la pollution augmente, plus le coût de traitement augmente, ainsi que la facture de l’eau consommée et le « coût environnemental » à payer sera cher

Message 3 : Même si l’eau de l’océan est considérée comme « inépuisable », le coût de dessalement est relativement cher pour avoir de l’eau douce en abondance

Message 4 : Positionner les ressources eau au Maroc en termes de milieux et de quantités Expliquer que polluer l’eau, c’est rendre cette ressource déjà rare inutilisable à faible coût car dépolluer une ressource rivière, lac, nappe phréatique coûte très cher.

68
68

Niveau B.2 : Interface Le cycle de l’eau

 

Description

Visuel

Visuel

Croquie du CYCLE DE L'EAU

 

Fonctionnalité

Bouton

Action / Contenu

 

Simulation du cycle

Un clic sur ce bouton démarre une animation complète des différentes phases du cycle de l’eau, accompagnée de messages explicatifs relatifs à chaque phénomène modélisé sur la scène

1 - Evaporation

Zoom sur les éléments concernés par le phénomène d’évaporation (océan, fleuve, lac), et simulation du processus d’évaporation indépendamment du cycle de l’eau, avec des informations et explications textes

2 - Condensation

Focus sur le processus de condensation, explication et simulation du phénomène avec messages explicatifs et informations

3 - Précipitations

Simulation 3D de

la

pluie et

les

zones et

éléments

de la

nature

affectés

par

ce

phénomène

4 - Infiltration

Focus sur l’importance du couvert végétal dans l’infiltration de l’eau dans le sol /rôle des arbres et des zones humides

Messages

- Message1 : Il faut préserver l’eau et éviter le gaspillage

 

- Message2 : Réduire au possible la consommation d’eau lors de saisons peu pluvieuses

- Message3 : l’absence ou la défaillance d’un phénomène du cycle de

69
69
 

l’eau perturbe la chaine entière du cycle (ex. de manque de soleil ou de pluie, excès Inondation).

Niveau B.3 : Interface consommation d’eau

 

Description

Visuel

Visuel

Croquie de CONSOMATIONS D'EAU

Fonctionnalité

Boutons

Action / Contenu

Eau virtuelle

Besoins en eau pour produire 1000Kcal de blé, de fromage, de poulet, de bœuf, …

Expliquer toutes nos formes de consommations d’eau (nourriture, électronique, transport, ….).

N.B. quelques notions et ordres de grandeur susceptibles de contribuer au réveil des consciences sans pour autant pointer du doigt ou rendre coupable un quelconque secteur productif.

Zone urbaine /Ville

Lorsque l’utilisateur clique sur la zone urbaine, une maison est mise avant de l’intérieur, en représentant les différents aspects de consommation d’eau (dans la cuisine, lavage, lessivage, nettoyage, douche, arrosage, boisson, nourriture, eau virtuelle)

Ecole

Si l’utilisateur clique sur une école, une représentation de l’intérieur est affichée en mettant en avant les différentes figures de consommation d’eau (boisson, nettoyage, arrosage…)

70
70
 

Zone rurale/Compagne

Lorsque l’utilisateur clique sur la zone rurale, un zoom est fait sur la compagne, et différents aspects de consommation d’eau sont mis en avant, à savoir :

Boisson (sources comme Sakaya, puits, récupération des eaux de pluies …)

Lavage

Irrigation

Elevage

Intérêt de mettre de l’eau de javel et de couvrir l’eau/maladies hydriques au Maroc (utile ou idée reçue ; quels serait le bon geste à adopter lien au éco-gestes? )

Messages

Message1 : réduire la consommation d’eau via des éco-gestes relatifs à chaque type d’utilisation d’eau, notamment nos consommations courantes et notre alimentation

Message2 : mettre en valeur les risques liés au gaspillage de l’eau

Message3 : Estimation de la consommation journalière d’un être humain :

empreinte sur l’eau

Message4 : lien entre la consommation et l’augmentation de la facture d’eau.

Message 5 : Usage d’eau dans les hammams publics

71
71

Niveau B.4 : Traitement de l’eau douce

 

Description

Visuel

Visuel

Figure 5 : Croquie de TRAITEMENT DE L'EAU

Fonctionnalité

Bouton

Action / Contenu

1 - Démarrer la simulation

L’utilisateur est invité à visualiser une simulation du processus de traitement d’eau dans ses différentes phases, avec des informations et messages explicatifs.

Scénographie sur le thème " Alimentation en eau potable "

Ressources (eau souterrain / eau de surface )--->Traitement--->Control de qualité---> Stockage--> Distribution

2 - Exemple de station similaire au Maroc

Affichage des informations et illustrations de quelques principales stations existantes au Maroc (différents coins du pays), avec quelques données liées à la quantité de production et le coût de traitement.

Messages

Message1 : Mettre en valeur le coût de l’opération de traitement d’eau douce (dans différentes régions, et notamment celles qui souffrent d’un déficit naturel)

Message2 : Insister sur la préservation des sources d’eau douce, pour éviter un traitement plus complexe et plus onéreux.

72
72

Conclusion

A travers ce chapitre, nous avons présenté les différentes fonctionnalités de l’application Web et l’application Jeu 3D. Tout d’abord, nous avons commencé par délimiter le périmètre fonctionnel, ensuite nous avons procédé à l’explication et à l’utilisation et à l’illustration de chaque fonctionnalité, en se basent sur les diagrammes de use cases. Et enfin nous avons présenté le story board du jeu, qui décrit les interfaces et les interactions.

73
73

4. Etude technique et réalisation

Réalisation Ce chapitre vient concrétiser les résultats des phases précédentes d’analyse et de conception. Apres
Réalisation
Ce chapitre vient concrétiser les résultats des phases précédentes
d’analyse et de conception. Apres qu’on a vu les spécifications techniques
du projet dans les deux applications Web et Jeu 3D, on va entamer la
phase de réalisation en montrant quelque captures d’écran de chaque
74

4.1

Structure d’une application MVC :

MVC est un patron de conception qui vise à simplifier le développement et la maintenance d’une application avec interface graphique. En effet, ce cadre normalisé permet de bien séparer la gestion des données, la présentation de l’interface et les traitements à effectuer. Ainsi par exemple, un développeur spécialisé dans le Web Design pourra s’occuper de la mise en page de l’application sans toucher aux fichiers correspondant aux traitements, réalisés par un autre développeur. [w3]

a. Le rôle de chaque partie :

Le Modèle : Le Modèle est chargé du traitement des données de l’application. A cet effet, il contient plusieurs méthodes permettant de récupérer et de modifier la valeur de chaque variable associée à une donnée. Si l’application utilise une base de données (ce qui n’est pas le cas ici), c’est également le rôle du Modèle de gérer les accès vers la base (insertion, suppression, mise à jour de champs).

La Vue : La Vue correspond spécifiquement à ce qui est affichée par le navigateur web de l’utilisateur. Cette page est dynamique, c’est-à-dire que la valeur de certaines des informations affichées est obtenue à partir des données du modèle. Dans la plupart des cas, une vue contient également un formulaire permettant à l’utilisateur de rentrer des informations grâce à divers contrôles graphiques : champs de textes, cases à cocher, sliders

Le Contrôleur : Le Contrôleur réagit aux évènements déclenchés par la vue (typiquement le clic sur un lien ou la validation d’un formulaire par exemple). Il peut ensuite mettre ` a jour les données du Modèle avec les informations entrées dans la Vue, et ensuite actualiser cette vue ou en afficher une autre.

75
75

b. Les flux de données :

Les interactions entre le modèle, la vue et le contrôleur sont synthétisés dans le diagramme suivant :

contrôleur sont synthétisés dans le diagramme suivant : Figure 23 : L’architecture MVC [w4] 4.2 Technologies

Figure 23 : L’architecture MVC [w4]

4.2 Technologies et outils utilisés :

La phase réalisation du projet consiste, d’une part, à mettre en place la base de données de l’application, et d’autre part, à développer la partie Web, mobile et jeu. Pour cela, plusieurs outils et technologies ont été utilisés facilitant l’implémentation de l’application, tout en respectant les modèles d’architectures adoptés.

Pour ce projet les spécifications techniques n’étaient pas réellement définies. Nous avons ainsi pu proposer une architecture que nous pensions à même de répondre au besoin défini. Notre choix s’est porté sur une architecture en couches de type MEAN. Ce chapitre expliquera les spécificités de celle-ci, et les technologies/librairies que nous avons utilisées en complément.

A. Architecture globale :

L’architecture utilisée est de type MEAN, ce qui veut dire MongoDB, AngularJS, Express, NodeJS. On parle de “stack” (pile, architecture) MEAN par opposition au “stack” LAMP classique : Linux Apache MySQL PHP.

76
76

L’architecture MEAN a pour spécificité d’utiliser du JavaScript tout au long de la chaîne. Ceci a plusieurs avantages :

- Si un développeur connaît le JavaScript, il peut comprendre du code aussi bien côté client que côté serveur, ce qui rend le code global plus compréhensible par n’importe quel membre d’une équipe.

- Les informations transmises par la base de données gardent le même format jusqu’à la couche présentation, ici du JSON, ce qui évite d’avoir à manipuler ces données.

- Pour des applications de petite à moyenne taille, MEAN est réputé pour être plus rapide et plus réactif que LAMP.

Dans notre cas, nous avons choisi une implémentation de MEAN baptisée MEAN.js. MEAN est une architecture en couches 3-tiers. On distingue donc 3 couches :

- une couche base de données qui est MongoDB

- une couche serveur gérée par NodeJS/Express/Mongoose

- une couche client / présentation gérée par HTML 5 / CSS 3 / AngularJS / Bootstrap

Ces couches sont organisées comme ceci :

/ AngularJS / Bootstrap Ces couches sont organisées comme ceci : Figure 24 : Architecture en

Figure 24 : Architecture en couche 3-tiers «MEAN »

77
77

Flux de données provenant de la base de données :

MongoDB transfère ses informations en JSON à NodeJS, en passant par l’ORM (Object- Relational Mapping) Mongoose. Node.JS fournit alors des services web REST permettant à n’importe quel client de récupérer ces données.

à n’importe quel client de récupérer ces d onnées. Figure 25 : Schéma de flux de

Figure 25 : Schéma de flux de données provenant de la base de données [w5]

Ainsi l’approche service web permet de développer la couche serveur une seule fois, et de la réutiliser sur n’importe quel type de site web ou application. Pour jouer au quizz de la plateforme dans notre application Android, il n’est pas nécessaire pour l’application de tout refaire vu que Node.JS fournit des services web.

Par exemple, un appel GET à la page du quizz pourra renvoyer directement les informations d’un quizz en JSON.

Flux des pages web :

Node.JS utilise Express, qui est une implémentation de serveur web. Express s’occupe d’envoyer les pages demandées au client. Celles-ci sont alors affichées grâce à HTML5 et CSS3. On utilise également un Framework CSS3 : Bootstrap. Celui-ci permet de rendre le site responsive et accélère l’intégration CSS (voir partie II.4). AngularJS et JQuerry sert pour le rendu dynamique et les appels aux services web. Il permet de faire des appels asynchrones, ce qui évite de devoir rafraîchir la page.

78
78

B. Couche base de données : MongoDB

MongoDB (de l'anglais humongous qui peut être traduit par « énorme ») est une base de données NoSQL, et qui n’est donc pas relationnelle. Elle est composée de collections et non pas de tables. Chaque entrée est appelée document et a une syntaxe JSON et un identifiant.

C’est un système de gestion de base de données orientée documents, répartissable sur un nombre quelconque d'ordinateurs et ne nécessitant pas de schéma prédéfini des données. Il est écrit en C++. Le serveur et les outils sont distribués sous licence AGPL, les pilotes sous licence Apache et la documentation sous licence Creative Commons. Il fait partie de la mouvance NoSQL[w6]

Creative Commons. Il fait partie de la mouvance NoSQL[w6] Tableau 5 : Tableau comparatif entre les

Tableau 5 : Tableau comparatif entre les bases de données relationnelles et non relationnelles

79
79

C. Couche serveur : NodeJS / Express / Mongoose

Node.js et npm :

Node.js est une plateforme logicielle libre et éventuellement en JavaScript orientée vers les applications réseau qui doivent pouvoir monter en charge. Elle utilise la machine virtuelle V8 et implémente sous licence MIT les spécifications CommonJS. Node.js contient une bibliothèque de serveur HTTP intégrée, ce qui rend possible de faire tourner un serveur web sans avoir besoin d'un logiciel externe comme Apache ou Lighttpd, et permettant de mieux contrôler la façon dont le serveur web fonctionne.

mieux contrôler la façon dont le serveur web fonctionne. Node.js est de plus en plus populaire

Node.js est de plus en plus populaire comme plateforme serveur, elle est utilisée par Groupon, SAP, LinkedIn ,Microsoft , Yahoo!, Walmart, Rakuten et PayPal.

Elle permet d’exécuter du code JavaScript en étant non-bloquant. Plusieurs tâches peuvent ainsi être effectuées en parallèles. Voici un schéma explicatif :

effectuées en parallèles. Voici un schéma explicatif : Figure 26 : Schéma non bloquant de node.js

Figure 26 : Schéma non bloquant de node.js

EXPRESS JS :

Express.js est un framework pour construire des application web en Node.js. C'est de fait le framework standard pour le développement de serveur en Node.js. L'auteur original, TJ Holowaychuck, le décrit comme un serveur inspiré de Sinatra dans le sens qu'il est relativement minimaliste tout en permettant d'étendre ses fonctionnalités via des plugins.[w7]

sens qu'il est relativement minimaliste tout en permettant d'étendre ses fonctionnalités via des plugins.[w7] 80
80
80

PassportJS

Une grande partie du projet consiste à gérer des membres et leurs connexions. J’ai donc recherché un module qui permettait d’avoir un large panel de modes de connexion. Ainsi, PassportJS permet aisément de se connecter via OAuth (1.0 & 2.0), OpenID, possède des extensions pour s’adapter à l’ORM (Object-Relational Mapping) que l’on souhaite ou encore de gérer la connexion via des services tiers tels que Facebook, Twitter et Google.

Mongoose :

Mongoose est un ORM (Object-Relational Mapping), mais pour une base NoSQL, on appelle donc cela un ODM (Object- Document Mapping). Mongoose fonctionne par “Schemas”. On donne à Mongoose la forme que doit avoir notre document, les conditions à respecter, les conditions par défaut, et Mongoose se chargera de faire les vérifications.

D. Couche client/présentation :

faire les vérifications. D. Couche client/présentation : Le côté client ayant pour but d’être modulable et

Le côté client ayant pour but d’être modulable et orienté composant, il m’a fallu utiliser des outils relativement imposants et puissants.

Pour l’application web l’affichage se fait donc classiquement en HTML 5/CSS 3. Afin de simplifier le développement CSS, on utilise SASS qui permet d’utiliser entres autres des variables dans un fichier que l’on compilera en CSS.

On utilise également un Framework CSS permettant d’accélérer l’intégration et de faciliter le Responsiveness. Ce Framework s’appelle Bootstrap et est développé par Twitter.

Bootstrap :

Bootstrap propose tout d’abord un système de grille qui permet de positionner les éléments CSS par rapport à celle-ci. La grille s’adapte ensuite automatiquement à l’écran utilisé. Bootstrap fournit aussi des composants prédéfinis qui sont ensuite modifiables, comme des onglets, des barres de menus, des listes, etc

des composants prédéfinis qui sont ensuite modifiables, comme des onglets, des barres de menus, des listes,
des composants prédéfinis qui sont ensuite modifiables, comme des onglets, des barres de menus, des listes,
81
81

Nous utilisons également la librairie UI-Bootstrap qui permet de gérer des composants Bootstrap en AngularJS au lieu de JQuery par défaut.

Angular js :

AngularJS est un framework JavaScript libre et open-source développé par Google.

AngularJS est fondé sur l’extension du langage HTML par de nouvelles balises (tags) et attributs pour aboutir à une définition déclarative des pages web, par opposition à l’utilisation systématique de l’élément div et à la définition des éléments de présentation en javascript.

définition des éléments de présentation en javascript. Le code HTML étendu représente alors la partie «

Le code HTML étendu représente alors la partie « vue » du patron de conception MVC (modèle-vue-contrôleur) auquel AngularJS adhère, avec des modèles appelés « scopes » et des contrôleurs permettant de définir des actions en code javascript impératif. AngularJS utilise une boucle de dirty-checking (qui consiste à surveiller et à détecter des modifications sur un objet JavaScript) pour réaliser un data-binding bidirectionnel permettant la

synchronisation automatique des modèles et des vues

[w8]

AngularJS embarque un sous-ensemble de la bibliothèque open source jQuery appelé jQLite, mais peut aussi utiliser jQuery si elle est chargée.

Outre le patron logiciel MVC et le code HTML étendu déclaratif, AngularJS est fondé sur un certain nombre de patrons et principes de conception qu’il convient de relever :

séparation des préoccupations avec le découplage des manipulations du DOM et du logique métier ;

injection de dépendances ;

promises, reprises du langage Q.

AngularJS ajoute des balises ou des attributs au HTML, et interprète ensuite ceux-ci. Il est doté d’un système de double data-binding. C’est à dire que lorsque le contrôleur AngularJS modifie une variable, la variable est modifiée en direct sur la page web. Et si par exemple la variable est un champ texte, si l’utilisateur le modifie, la variable est modifiée côté contrôleur

82
82

instantanément. De plus, AngularJS est un des Frameworks les plus en vogue de ces dernières années. Porté par Google, beaucoup d’entreprises s’y sont intéressé.

AngularUI Router

Tout comme pour le côté serveur, le routage côté client de base n’est pas nommé. J’ai opté pour le routeur avancé proposé par AngularUI qui offre davantage de possibilités que la directivengRouter proposée de base.

Three JS :

Three.js est une bibliothèque JavaScript pour créer des scènes 3D dans un navigateur web. Elle peut être utilisée avec la balise canvas du HTML5 sans avoir besoin d'un plugin. Le code source est hébergé sur le GitHub de son créateur mrDoob. [w9]

Son principe est d'être accessible à tout le monde, elle permet des rendus en webGL, CSS3D et SVG. La bibliothèque contient par exemple les fonctionnalités suivantes :

Animation par squelette

LOD (niveau de détails pour les objets)

Chargement de fichiers aux formats .OBJ, .JSON, .FBX

Système de particules (pour par exemple simuler la neige, le feu, etc.)

Three. js accélère le développement de rendu en 3 dimension grâce à ses fonctionnalités avancées :

Support des Canvas, SVG et WebGL

Création d’une scène

Brancher des événements JavaScript clavier/souris (onclick, onkeypress ) pour piloter la vue 3D

Ajout/suppression d’objets à la volée

Gestion des animations

Gestion des lumières

Un ensemble de fonctions mathématiques pour la manipulation des données

83
83
Figure 27 : Positionnement de Three.js par rapport aux autres composants HTML5 de dessin [w17]

Figure 27 : Positionnement de Three.js par rapport aux autres composants HTML5 de dessin [w17]

Three js emploie des concepts scénographiques. Ainsi dans chaque projet d’animation 3D, il faut avoir une scène contenant les composants 3D suivant :

Initialiser la scène

Initialiser la camera

Initialiser l’objet

Implémenter le rendu

Ray Casting :

Après avoir modélisé plusieurs objets 3D dans notre scène, il est difficile de sélectionner un seul objet parmi plusieurs. C’est pourquoi on a recours au Ray casting qui permet de récupérer un objet en cliquant sur notre écran. L’exemple ci-dessous montre comment on peut projeter une scène 3D à une scène 2D.

84
84
Figure 28: Exemple illustrant le Ray Casting Dans cet exemple nous avons essayé de modéliser

Figure 28: Exemple illustrant le Ray Casting

Dans cet exemple nous avons essayé de modéliser une scène abstraite avec 3 objets. A droite nous avons une représentation de notre écran. Ensuite, nous avons le curseur de la souris sur notre écran qui est dans la direction de notre objet rouge. A droite, il y a la caméra, qui est notre angle de vue et en bleue le rayon qui nous permet de sélectionner notre objet.

En appliquant le principe de Ray Casting, nous allons tracer un rayon depuis la position du curseur dans l’espace 3D, en suivant la direction du camera et nous allons voir si nous avons intercepté un objet au cours de notre chemin. Si oui on a trouvé notre objet. Sinon, il n’y a rien au-delà du curseur.

WebGL

WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d'un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d'où le fait que cette technologie reste assez méconnue du grand public.

Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. La bibliothèque WebGL appelle à son tour le pilote OpenGL ES du système d'exploitation qui se chargera de faire les calculs nécessaires à l'affichage sur l'écran, en exploitant si possible l'accélération matérielle du ou des processeurs graphiques du terminal.

85
85

jQuery :

jQuery est une bibliothèque JavaScript gratuite qui évolue constamment, et qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML. Elle permet de simplifier un nombre de commandes communes de JavaScript et offre des facilités de programmation et de navigation. En plus, les modules qu’il permet de développer peuvent être intégrés facilement dans des pages HTML. De nombreux modules spécifiques, développés en jQuery, et offrant des possibilités graphiques ou d’animations avancées sont disponibles sur internet jQuery, et offrant des possibilités graphiques ou d’animations avancées sont disponibles sur internet.

[w13]

Les fichiers Javascript et CSS de l’application Web sont regroupés selon l‘arborescence visible ci-dessous :

sont regroupés selon l‘arborescence visible ci-dessous : Figure 28: Arborescence des fichiers de l’application Web

Figure 28: Arborescence des fichiers de l’application Web

86
86

E. Outils de développement du jeu 3D

Dans ce paragraphe, nous exposons les outils et frameworks utilisés pour le développement de l’application Jeu 3D.

Moteur de jeu 3D Unity :

Unity est un moteur de jeu multi-plateforme (smartphone, Mac, PC, consoles de jeux vidéo et web) développé par Unity Technologies. Il est l'un des plus répandus dans l'industrie du jeu vidéo, du fait de sa rapidité aux prototypages pour les très gros studios, aussi pour la sphère du jeu indépendant qui développe directement dessus pour sortir leurs applications sur tout support. Il a la particularité de proposer une licence gratuite sans limitation au niveau du moteur.

une licence gratuite sans limitation au niveau du moteur. Unity est un moteur 3D et physique

Unity est un moteur 3D et physique conçu pour la création de jeux et dispose d’une gestion de vidéo, d’audio et des objets 3D. Il possède comme interface graphique un éditeur de scène 3D et comme langages de script le C#, JavaScript et Boo au lieu du Lua très utilisé dans les jeux vidéo. Son approche orientée assets 3 , par le biais d'un EDI 4 dédié, le différencie des moteurs comme le Quake engine dont les éléments centraux sont les codes sources. Parmi les logiciels d'animations, il ne permet pas la modélisation mais permet de créer des scènes supportant des éclairages, des terrains, des caméras, des textures. [w10]

Le logiciel a la particularité d'utiliser un éditeur de script compatible mono (C#), UnityScript (un langage proche du JavaScript et inspiré d'ECMAScript) et Boo au lieu de Lua très utilisé dans les jeux vidéo. Son approche orientée asset, par le biais d'un EDI dédié, le différencie des moteurs comme le Quake engine dont les éléments centraux sont les codes sources. Il est l'équivalent du logiciel de création Director la 2D qui utilise Lingo. Il se rapproche plus pour la 3D des logiciels tels que Shiva, Virtools, Cheetah3D. Parmi les logiciels d'animations, il ne permet pas la modélisation mais permet de créer des scènes supportant des éclairages, des terrains, des caméras, des textures, la musique et les vidéos (version pro). Il est par ces fonctionnalités un mélange de VRML et de QuickTime.

Le logiciel de conception développé d'abord pour la plate-forme Mac a été porté sous Windows et permet d'obtenir des applications compatibles Windows, Mac OS X, iOS,

87
87

Android, Wii, PlayStation 3, PlayStation Vita, PlayStation 4, Xbox 360, Xbox One, Windows Phone 8, PlayStation Mobile, Tizen, Oculus Rift, Wii U, Nintendo 3DS, dans une page web grâce à un plugin, ou depuis la version 3.5 le format Flash d'Adobe, bien que cette dernière option ait été retirée fin avril 2013.

Il est capable d'importer de nombreux formats 3D (Blender, Maya, Cinema 4D, Cheetah3D, FBX), des ressources variées : (des textures Photoshop, PNG, TIFF, audios, vidéos) qu'il optimise par l'utilisation de filtres. [w11]

Unity possède une large palette de déploiement :

il est compatible avec les API graphiques Direct3D, OpenGL et Wii ;

les navigateurs web peuvent, grâce au plugin Unity Web Player, afficher les productions du moteur ;

il est compatible avec QuickTime et utilise en interne le format Ogg Vorbis.

Fonctionnement d’Unity :

Unity s’ouvre en chargeant un projet et une scène. Si ces derniers n’existent pas, ils seront proposés d’être créés. L’éditeur dispose de en plusieurs fenêtres dont leurs affichages et positionnements est personnalisable. Parmi les fenêtres, on y trouve :

Scene : La scène du jeu rendu côté éditeur. On peut sélectionner et positionner les objets à partir de cette fenêtre.

Game : La scène du jeu rendu par la camera, il permet de visualiser ce que verra le joueur lors de l’exécution du jeu.

Hierarchie : Le graphe de scène, répertoriant tous les objets de la scène ainsi que leur hiérarchie.

Project : Le gestionnaire des assets, répertoriant toutes les données du jeu (images, sons, scripts, fichier textes, objets 3D, scènes…)

Inspector : L’inspecteur de l’objet/asset sélectionné, permettant de modifier les composants d’un objet ou les propriétés d’un asset (voir les explications ci-dessous).

Les objets des scènes sous Unity sont appelé GameObject. Chaque GameObject possède d’une liste de composant. Parmi ces composants, on y trouve obligatoirement une Transform, qui correspond à la matrice 4x4 de transformation, combinaison d’une position (vecteur) et

88
88