Développement D’une Application Web

Landing Page

RAPPORT DE STAGE TECHNIQUE

Filière : Génie INFORMATIQUE

Effectué par : SABAHI Rim & RAMI Rajae

Encadré par : Mr SAIDI Abdelali
Année universitaire : 2022/2023
Établissement : Université Chouaib Doukalli EST SIDI BENNOUR
 Remerciements

Avant tout il apparait opportun de commencer ce rapport de projet

par des remerciements, a l’ensemble des amis qui ont, de près ou de
loin apporter leur soutien et leurs conseils qu’ils ont pu nous
prodiguer au cours de ce projet.

Aussi, on remercie notre encadrant Mr SAIDI Abdelali qui nous a

formé, aidé et accompagné tout au long de cette expérience
professionnelle avec beaucoup de patience et de pédagogie et pour le
temps qu’il a bien voulu consacrer l’encadrement et le suivi de ce
travail.

On souhaitait remercier tout particulièrement nos familles. Leur

soutien inconditionnel, surtout pendant ces deux années, ainsi leurs
encouragements ont été d’une grande aide.
Chapitre 1 :
.

Cahier De Charge
Chapitre 2 :

Technologies
Et
Outils
 1- Bootstrap (Framework) :

Figure 1 : Bootstrap logo

Bootstrap est une collection d'outils utiles à la création du design (graphisme,

animation et interactions avec la page dans le navigateur, etc.) de sites et d'applications web. C'est
un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation
et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets

les plus populaires sur la plate-forme de gestion de développement GitHub.

 2- JavaScript (JS) :

Figure 2 : JavaScript logo

JavaScript est un langage de programmation de scripts principalement employé dans les pages
web interactives et à ce titre est une partie essentielle des applications web. Avec les langages
HTML et CSS, JavaScript est au cœur des langages utilisés par les développeurs web3. Une
grande majorité des sites web l'utilisent4, et la majorité des navigateurs web disposent d'un
moteur JavaScript5 pour l'interpréter.

JavaScript est aussi employé pour les serveurs Web6 avec l'utilisation (par exemple) de Node.js7
ou de Deno8.

C'est un langage orienté objet à prototype : les bases du langage et ses principales interfaces sont
fournies par des objets. Cependant, à la différence d'un langage orienté objets, les objets de base
ne sont pas des instances de classes. En outre, les fonctions sont des objets de première classe. Le
langage supporte le paradigme objet, impératif et fonctionnel.
 3- Hypertext Markup Language
(HTML) :

Figure 3 : HyperText Markup Language logo

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.

Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une
page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure
des ressources multimédias dont des images, des vidéos, et des programmes informatiques.
L'HTML offre également la possibilité de créer des documents interopérables avec des
équipements très variés et conformément 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.
 4- Cascading Style Sheets (CSS) :

Figure 4 : Cascading Style Sheets logo

Les CSS, Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme des
documents web, type page HTML ou XML. Par l'intermédiaire de propriétés d'apparence
(couleurs, bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte, dessus-dessous,
etc.), le rendu d'une page web peut être intégralement modifié sans aucun code supplémentaire
dans la page web. Les feuilles de styles ont d'ailleurs pour objectif principal de dissocier le
contenu de la page de son apparence visuelle. Ceci permit:

 De ne pas répéter dans chaque page le même code de mise en forme ;

 D’utiliser des styles génériques, avec des noms explicites (par exemple un style encadré
pour du texte ou des images) ;
 De pouvoir changer l'apparence d'un site web complet en ne modifiant qu'un seul fichier ;
le site peut proposer plusieurs apparences en changeant le fichier (par exemple : thème
clair, thème sombre) ;
 De faciliter la lecture du code de la page.
 5- Visual Studio Code (VS) :

Figure 5 : Visual Studio Code logo

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et macOS3.

Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe, la

complétion intelligente du code (IntelliSense4.), les snippets, la refactorisation du code et Git
intégré. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences et
installer des extensions qui ajoutent des fonctionnalités supplémentaires.

Le code source de Visual Studio Code provient du projet logiciel libre et open source VS Code de
Microsoft publié sous la licence MIT permissive, mais les binaires compilés constituent un
freeware, c'est-à-dire un logiciel gratuit pour toute utilisation mais privateur.

Dans le sondage auprès des développeurs réalisés par Stack Overflow en 2021, Visual Studio
Code a été classé comme l'outil d'environnement de développement le plus populaire, avec
71,06 % des 82 277 répondants déclarant l'utiliser.
Chapitre 3 :
.

Réalisation