Rapp

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.
Introduction
Dans le cadre du programme de stage technique, on avait comme

mission de concevoir et de mettre en œuvre une application web
« landing page ».
L’application s’impose de plus en plus d’un modèle de landing de
page de la société EVELYN, cette dernière est une société de
cosmétiques et ils ont demandé une landing page qui permet de
présenter leur marque et leurs produits.
Ce présent rapport, résumera le déroulement de toutes les étapes de
la réalisation du projet.
La première partie est consacrée pour la présentation générale du
projet, l’étude et spécification des besoins. La deuxième partie
présente les technologies utilisées dans le projet. Enfin la dernière
partie conçue pour la conception puis la réalisation de l’application.
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
Conclusion
Dans le cadre de mes études de 2 ème année, on a eu la chance

d’effectuer ce projet qui nous a permis de découvrir en contexte le
secteur de développement, ainsi que les différentes missions qui
contribuent à son développement.
Dans Ce projet, on a pu mettre en pratique les notions théoriques
acquises lors de nos deux années passées à l’école supérieure de
technologie de Sidi Bennour que je tiens à remercier encore une fois,
et assimiler de nouvelles connaissances et notions dans ce domaine.
On a aussi eu l’aide d’un encadrant très professionnel, mais aussi très

sympathique, chose qui a rendu cette expérience encore plus
passionnante et enrichissante pour nous. On a pu créer une
application web. Tout cela nous procure une sensation de satisfaction
et d’accomplissement.

Rapp

Transféré par

Droits d'auteur :

Formats disponibles

Rapp

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapp

Transféré par

Droits d'auteur :

Formats disponibles

Développement D’une Application Web

RAPPORT DE STAGE TECHNIQUE

Effectué par : SABAHI Rim & RAMI Rajae

Avant tout il apparait opportun de commencer ce rapport de projet

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

On souhaitait remercier tout particulièrement nos familles. Leur

Dans le cadre du programme de stage technique, on avait comme

Figure 1 : Bootstrap logo

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

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

Figure 2 : JavaScript logo

3- Hypertext Markup Language

Figure 3 : HyperText Markup Language logo

4- Cascading Style Sheets (CSS) :

Figure 4 : Cascading Style Sheets logo

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

5- Visual Studio Code (VS) :

Figure 5 : Visual Studio Code logo

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

Dans le cadre de mes études de 2 ème année, on a eu la chance

On a aussi eu l’aide d’un encadrant très professionnel, mais aussi très

Vous aimerez peut-être aussi