RAPPORT DE PROJET :

Réalisation d’un site web statique d’une

région touristique

Réalisé par : Encadré par :

- ESSAKHI Aimrane - AIT LMAATI Elmustapha

NOVRMBRE 2020
 Table des matières

Introduction ................................................................................................................................. 3

Présentation du projet ................................................................................................................. 4

1-Objectif de l’application : ................................................................................................................. 5

2-Présentation de l’application : ......................................................................................................... 5

3-Navigation ........................................................................................................................................ 5

Présentation d’environnement de travail ...................................................................................... 6

1-Langages de programmation : ......................................................................................................... 6

2-Editeur de texte : ............................................................................................................................ 10

Réalisation du projet .................................................................................................................. 10

1-Page d’accueil : .............................................................................................................................. 11

2-Le Menu de navigation sur le site :................................................................................................. 13

3-Partie contact et réseaux sociaux :................................................................................................. 18

Conclusion ................................................................................................................................. 20

Références ................................................................................................................................. 21

2|Page
 Table de figures

Figure 1 : Niveaux de navigation sur le site ............................................................................................. 6

Figure 2 : Structure de code d'une page html ......................................................................................... 8

Figure 3 : Code d'une page CSS ............................................................................................................... 9

Figure 4 : L'interface de l'éditeur de code ............................................................................................. 10

Figure 5 : Ecran d'accueil du site ........................................................................................................... 11

Figure 6 : Menu de la page d'accueil au format mobile ........................................................................ 12

Figure 7 : Page d'accueil au format mobile ........................................................................................... 12

Figure 8 : Footer du site ........................................................................................................................ 13

Figure 9 : La barre de menu................................................................................................................... 13

Figure 10 : Page activités ....................................................................................................................... 14

Figure 11 : page d'activités et hôtels ..................................................................................................... 14

Figure 12 : Page activités sur un mobile ................................................................................................ 15

Figure 13 : Page de monuments de Marrakech .................................................................................... 16

Figure 14 : Menu catégories .................................................................................................................. 16

Figure 15 : Monument de Palais de Bahia............................................................................................. 17

Figure 16 : Page monuments sur mobile............................................................................................... 18

Figure 17 : Page contact ........................................................................................................................ 19

Figure 18 : Formulaire contact sur mobile ............................................................................................ 19

3|Page
 Introduction

Dans le cadre de nos études à l’école Supérieure de Technologie d’Essaouira, nous

sommes amenés à réaliser un stage d’initiation pour la validation de notre première année DUT.
En raison de la situation actuelle et à cause du Covid-19, nous n’avons pas pu passer nos stages
comme prévu et se sont remplacés par des projets individuels.

Dans ce contexte, mon rapport est la présentation de mon travail de projet qui s’articule
autour de la réalisation d’un site web statique qui présente la région de Marrakech, et qui met
l’accent sur les places touristiques de la région, les monuments historiques, les hôtels de la
région et les activités sociales concernant la région tels que les festivals et les activités sportives.

Le présent rapport trace les phases du déroulement de mon projet de site web et sera
présenté en trois parties. Dans un premier lieu, je vais mettre le point sur la présentation de la
région de Marrakech. La deuxième partie sera consacrée à la présentation des technologies
utilisées pour la réalisation du site. La troisième partie va mettre le point sur la partie de
développement du projet en expliquant les différentes phases de sa réalisation technique.

Finalement, la dernière partie sera dédiée à la présentation des apports et bilan

personnel.

4|Page
 Présentation du projet

Située dans le sud du royaume du Maroc, la ville de Marrakech encore appelée ville rouge est
l’une des villes les plus diversifiées du Maghreb. Marrakech fait partie des destinations les plus
prisées par les touristes au Maroc, en effet chaque année plusieurs touristes de tous les horizons
y affluent pour tirer profit des différentes attractions.

Dans ce chapitre je vais présenter le projet de site web statique que j’ai réalisé pour présenter
cette région.

1- Objectif de l’application :

Le projet est une application web (site intranet) qui a pour objectif de présenter toutes les places
touristiques de la région, les monuments historiques, les hôtels de la région, toutes activités
sociales concernant la région tels que les festivals et les activités sportifs etc.

Afin de bien présenter la région on doit utiliser différents types de média (texte, image, vidéo
et même des vidéos 360°).

L’application doit avoir un « design » épuré, c’est-à-dire une présentation simple qui permet à
l’utilisateur de bien navigué sur le site web.

2- Présentation de l’application :

Afin de bien respecter la réalisation du sujet du projet, la page d’accueil du site doit contenir un
header, un menu, des sections et un Footer et toutes les pages web doivent être codées juste en
HTML et CSS. A titre de valeur ajoutée, j’ai intégré dans le site une carte Google Map dont j’ai
localisé les sites touristiques et les hôtels de la région en utilisant JavaScript.

L’application doit contenir des animations sur ses pages web toujours en utilisant le langage
JavaScript.

5|Page
 3- Navigation

La navigation du site doit être très aisée. L’accent est toujours mis sur le design du site web qui
doit être simple et attractif.

Le site web va être composé des pages suivantes :

▪ Une page d’accueil dont le but est de présenter d’une manière générale la ville de
Marrakech ;

▪ Une page qui présente les monuments de Marrakech

▪ Une page qui présente les activités à faire à Marrakech

▪ Une page contact avec les coordonnées du responsable de site web.

Figure 1 : Niveaux de navigation sur le site

6|Page
 Présentation d’environnement de travail

Pour le développement de mon site web, j’ai utilisé HTML, CSS et le JavaScript. Le site est
statique car nous n’avons pas encore vu le cours de la programmation web. La décision des
choix technologiques n’était donc pas compliquée pour moi.

1- Langages de programmation :

➢ Langage HTML :
Le HyperText Markup Language, généralement abrégé HTML ou
dans sa dernière version HTML5, est le langage de balisage conçu
pour représenter les pages web. C’est un langage permettant d’écrire de
l’hypertexte, d’où son nom. HTML permet également de
structurer sémantiquement la page, de mettre en forme le contenu, de
créer des formulaires de saisie, d’inclure des ressources multimédias dont des images,
des vidéos, et des programmes informatiques. Il permet de créer des
documents interopérables avec des équipements très variés de manière conforme aux exigences
de l’accessibilité du web. Il est souvent utilisé conjointement avec le langage de
programmation JavaScript et des feuilles de style en cascade (CSS). HTML est inspiré
du Standard Generalized Markup Language (SGML). Il s'agit d'un format ouvert.

➢ Langage CSS :
Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS)
sont un langage qui permet de gérer la présentation d'une page Web. Le
langage CSS est une recommandation du World Wide Web Consortium
(W3C), au même titre que HTML ou XML.
Les styles permettent de définir des règles appliquées à un ou plusieurs documents HTML. Ces
règles portent sur le positionnement des éléments, l'alignement, les polices de caractères,
les couleurs, les marges et espacements, les bordures, les images de fond, etc.
Le but de CSS est de séparer la structure d'un document HTML et sa présentation.

7|Page
En effet, avec HTML, on peut définir à la fois la structure (le contenu et la hiérarchie entre les
différentes parties d'un document) et la présentation. Mais cela pose quelques problèmes. Avec
le couple HTML/CSS, on peut créer des pages web où la structure du document se trouve dans
le fichier HTML tandis que la présentation se situe dans un fichier CSS.
Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à toutes
les pages d'un site internet. Cela facilite ainsi la modification de la présentation d'un site entier.
CSS permet aussi de définir des règles différentes pour chaque support d'affichage (une navi-
gateur classique, une télévision, un support mobile, un lecteur braille...). CSS permet aussi
d'améliorer l'accessibilité des documents web.

Figure 2:Structure de code d'une page html

8|Page
La figure suivante est un exemple d’une page CSS liée à une page Html et qui permet
d’organiser les éléments de la page et leur donner un style qui facilite à l’utilisateur la navigation
entre les pages web.

Figure 3:Code d'une page CSS

➢ Langage JavaScript :
JavaScript est un langage de programmation de scripts principale-

ment employé dans les pages web interactives et à ce titre est une partie

essentielle des applications web. Avec les technologies HTML et CSS,

JavaScript est parfois considéré comme l'une des technologies cœur du World Wide Web. Une

grande majorité des sites web l'utilisent, et la majorité des navigateurs web disposent d'un mo-

teur JavaScript dédié pour l'interpréter, indépendamment des considérations de sécurité qui

peuvent se poser le cas échéant.

9|Page
C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses princi-

pales interfaces sont fournies par des objets qui ne sont pas des instances de classes.

2- Editeur de texte :

➢ Visual Studio Code :

C’est un éditeur de code extensible développé par Microsoft pour Windows, Linux et MacOS.
Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe,
la complétion intelligente du code, les snippets, la refactorisation du code et Git intégrer.

Figure 4:L'interface de l'éditeur de code

10 | P a g e
 Réalisation du projet

Cette partie contient le dernier volet de ce rapport, elle a comme but d’exposer mon travail
achevé. Je vais débuter par la présentation de l’interface qui est la page principale et la première
qu’aperçoit l’utilisateur en lançant l’application.

1- Page d’accueil :

Cette page contient un menu qui permet à l’utilisateur de naviguer aisément sur le site web et
découvrir la ville de Marrakech, la figue suivante est une illustration de cette interface :

Figure 5:Ecran d'accueil du site

11 | P a g e
Un nombre continu de personne se connecte à l’internet grâce à leur mobile, c’est pourquoi, il
a fallu que mon site web soit responsive qui s’adapte parfaitement au format téléphone afin de
garantir aux utilisateurs une expérience de navigation optimisée.

Les figures suivantes montrent la page d’accueil de mon site web adapté au format mobile :

Figure 7:Page d'accueil au format mobile Figure 6:Menu de la page d'accueil au format mobile

L’image suivante représente le Footer du site qui permet à l’utilisateur d’avoir une idée globale
à propos du site, ce Footer offre également une fonctionnalité qui permet à l’utilisateur de rester
informé par les dernières infos de la ville par mail :

12 | P a g e
 Figure 8:Footer du site

2- Le Menu de navigation sur le site :

Le menu de navigation placé sur la page d’accueil, permet à l’utilisateur de consulter les
activités, les monuments et les hôtels de la ville de Marrakech, chaque catégorie donne un tat
d’informations et d’explications à l’utilisateur afin de bien connaitre la région, cela lui permet
de découvrir également les bons plans proposés par le site.

L’image suivante est la barre de menu de navigation du site qui présente la ville de Marrakech
et sa région :

Figure 9 : La barre de menu

13 | P a g e
Après avoir présenté la région de Marrakech d’une manière globale, l’utilisateur peut découvrir

toutes les activités qu’il peut faire lors de son séjour à la région et même se rediriger vers les

sites officiels qui lui permette de faire la réservation.

La figure suivante est une partie de la page d’activités représenté sur mon site web :

Figure 10: Page activités

En consultant les activités de la ville de Marrakech, l’utilisateur a la possibilité d’avoir sous ses
yeux les offres d’hôtels de la région ainsi que de pouvoir réserver s’il le souhaite.

La figure suivante illustre le

visuel de cette fonctionnalité :

Figure 11 : page d'activités et hôtels

14 | P a g e
Comme j’ai mentionné au début mon site est responsive, la figure suivante présente l’affichage
de la page activités adapté à l’écran d’un smartphone :

Figure 12: Page activités sur un mobile

Après avoir consulter les activités de la ville, l’utilisateur peut également continuer sa vite par
découvrir tous les monuments de la ville ainsi que leur localisation et le plan d’accès à ces
derniers.

15 | P a g e
L’image suivante est l’écran d’affichage de l’ensemble des monuments de la ville :

Figure 13: Page de monuments de Marrakech

Les images sur mon site s’agrandissent et se remettent à leur taille normale selon la position du
curseur, cela permet à l’utilisateur d’avoir un bon affichage sur son écran.

Les images des monuments se défilent sur la page ainsi qu’une barre à droite qui permet à
l’utilisateur de consulter
toutes les autres
catégories du site sans
devoir aller en haut de
page, cette option
permet de faciliter à
l’utilisateur la tâche de
navigation, l’image à
coté est une illustration
de cet affichage :

Figure 14 : Menu catégories

16 | P a g e
L’image ci-dessous est une autre partie de la page monuments qui présente le défilement des
publications :

Figure 15: Monument de Palais de Bahia

L’écran ci-dessous affiche une partie de la page monuments adapté aux autres écrans que
l’affichage desktop :

17 | P a g e
 Figure 16 : Page monuments sur mobile

3- Partie contact et réseaux sociaux :

La partie contact permet à l’utilisateur de contacter l’administrateur du site afin de pouvoir

demander des renseignements ou bien donner son avis, via un formulaire qui lui permet d’écrire
son message, sans oublier que mon site web offre la possibilité de suivre tous les comptes
officiels sur les réseaux sociaux : Facebook, Instagram, Twitter...

L’image suivante est la partie contact du site ainsi que partie réseaux sociaux :

18 | P a g e
 Figure 17 : Page contact

✓ Affichage mobile :

Figure 18 : Formulaire contact sur mobile

Actuellement mon site web est statique, mon objectif est de le rendre dynamique avec PHP et
une base de données et qui peut devenir un vrai projet web.

19 | P a g e
 Conclusion

Ce projet a été pour moi l’occasion de mettre en œuvre et d’approfondir mes

connaissances en termes de conception et développement web. Cela m’a permis de mettre en

place un site web et d’utiliser des langages de programmation tel que JavaScript.

En fait, la réalisation de ce projet, m’a donné une véritable occasion pour rencontrer les

difficultés et l’environnement du travail qu’un développeur devra affronter pour la réalisation

d’une application. Ce projet m’a demandé beaucoup d’efforts afin d’apprendre HTML, CSS et

JavaScript, et leur méthodes très singulière de programmation.

Finalement, ce projet de stage m’a offert l’opportunité de dénicher les merveilles de la

programmation web, et de découvrir d’autres langages dynamiques tel que PHP et d’autres

Framework qui utilisent les langages du développement web.

20 | P a g e
 Références

www.google.com
www.openclassroom.com
http://www.wikipedia.fr
http://css3generator.com/

21 | P a g e