RAPPORT DE PROJET

DE FIN D’ETUDE

DÉVELOPPEMENT
FRONT-END

Réalisé par :
MAAROUF Marwa

encadré par :
MESKAOUI Zineb (professionnelle )
SAIDI Abdelali (universitaire)

El Jadida
Année universitaire 2020/2021
 Remercient
Tout d’abord on tient à remercier très châle au l’équipe d’GRANDECHARTE qui m’a
offert cette opportunité d’effectuer notre stage au sein du l’entreprise, chose qui nous
mène qu’à bien croire à nos cadres supérieurs qui aident au développement et au progrès
de notre cher pays à travers l’encadrement des jeunes compétences, les dirigeants du
futur.
Mon encadrent universitaire Mr. SAIDI, pour ses conseils, son soutien et son aide.

J’aimerais aussi remercier la direction de l’Ecole Supérieur de Technologie (EST) Sidi

Bennour et tous les professeurs sans exception, lesquels faisaient de leur mieux pour
qu’on ait une meilleure formation.

Sans oublier mes amis qui m’ont aidé spirituellement et moralement. Enfin je tiens à
remercier également les membres du jury qui ont accepté d’évaluer mon travail.

1
 Dédicaces
Toutes les lettres ne sauraient trouver les mots qu’il faut…

C’est tout simplement qu’on dédie ce travail…

A nos très chers parents, Nos mères pour ses sacrifices, leurs amours inconditionnels, la
sollicitude qu’elles ont à nos égards et pour avoir toujours cru en nous. Nos pères, ceux
qui nous ont indiqué la bonne voie en nous rappelant que la volonté fait toujours les
grandes personnes qui marquent le monde.

Merci à vous d’être toujours présents pour faire nos bonheurs, on ne trouvera assez de
mots pour vous exprimer nos amours et nos gratitudes. Sans vos efforts, on n’aura jamais
pu arriver là où on est maintenant.

A nos amis, merci d’être toujours à nos côtés, par votre présence, par votre amour, pour
donner du out et du sens à notre vie. Que ce travail vous témoigne de ma sincère
affection.

Que ce travail soit l’aboutissement de vos innocentes prières et vos innombrables

sacrifices

2
 Table des matières
Remercient ........................................................................................................................................................ 1
Dédicaces ......................................................................................................................................................... 2
Table des matières ............................................................................................................................................ 3
Liste des figures ................................................................................................................................................ 5
Liste des tableaux ............................................................................................................................................. 6
Liste des acronymes ......................................................................................................................................... 7
INTRODUCTION ............................................................................................................................................ 8
1-CADRE ET CONTEXTE DE STAGE ............................................................................................................. 9
1-1 Présentation de l’entreprise : .................................................................................................................. 9
1-2 les services d’entreprise: ......................................................................................................................... 9
1-3 Conclusion : ............................................................................................................................................ 12
2-DEVLOPPMENT WEB ................................................................................................................................ 13
2-1 Bref survol : ............................................................................................................................................ 13
2-2 Programmation back-end : ................................................................................................................... 14
2-2-1 bref survol : ....................................................................................................................................... 14
2-2-2 Les langages de programmation back-end: ..................................................................................... 14
2-3 développement Front-End : .................................................................................................................. 16
2-3-2 bref survol :....................................................................................................................................... 16
2-3-1 Les langages de programmation front-end : .................................................................................... 16
2-4 Différences entre le frontend et le backend : ..................................................................................... 23
2-5 Full Stack développement : .................................................................................................................. 25
2-6 Le back-end et le front-end dans la Data :.......................................................................................... 25
3-EVOLUTION DE STAGE ........................................................................................................................... 27
3-1 - Les aspects techniques : ..................................................................................................................... 27
3-1-1 Environnement de développement : ................................................................................................. 27
3-1-2 Les languages utilisées : .................................................................................................................. 28
3-2 - Gestion de projet: ............................................................................................................................... 30
3-2-1 Les méthodes agiles: ........................................................................................................................ 30
3-2-2 Outils de gestion de projet: ............................................................................................................. 30
3
 3-2-3 le diagramme de Gantt :................................................................................................................... 31
3-3 - Critères importants: ........................................................................................................................... 32
3-3-1 UX/UI :............................................................................................................................................. 32
3-3-2 les maquettes : ................................................................................................................................ 32
3-3-3 La sémantique des balises : ............................................................................................................. 32
3-3-4 Un code organisé et réutilisable ..................................................................................................... 32
3-3-5 Compatibilité cross-browser : ......................................................................................................... 33
3-3-6 Responsive design : ......................................................................................................................... 33
3-3-7 Accessibilité : .................................................................................................................................. 33
3-3-8 Référencement ................................................................................................................................ 33
4-DEVLOPPMENT DES PROJETS ................................................................................................................ 34
4-1 Introduction : ........................................................................................................................................ 34
4-2 créations d’un landing page :............................................................................................................... 34
4-2-1 Bref survol :...................................................................................................................................... 34
4-2-2 La maquette (Storyboard) : ............................................................................................................ 35
4-3 Création d'un portfolio personnelle : .................................................................................................. 38
4-3-1 Bref survol :...................................................................................................................................... 38
4-3-2 la réalisation : ................................................................................................................................. 38
4-3-2-1 Cahier des charges : ................................................................................................................. 38
4-3-2-2 Développement : ..................................................................................................................... 39
4-3-3 les interfaces du site web : .............................................................................................................. 39
4.4 Création d'un site Web pour Zeta Hôtel : ........................................................................................... 42
4-4-2 bref survol ...................................................................................................................................... 42
4-4-1 les interfaces du site web : ............................................................................................................... 42
5-Bilan et conclusion ..................................................................................................................................... 47
5-1 Bilan professional ............................................................................................................................... 47
5-2 Bilan personnel................................................................................................................................... 47
5-3 Conclusion ......................................................................................................................................... 48
Bibliographie .................................................................................................................................................. 49

4
 Liste des figures
Figure 1: development web ............................................................................................................................. 13
Figure 2:Les langages de programmation back-end ..................................................................................... 15
Figure 3: Web Front End ................................................................................................................................ 21
Figure 4: Différences entre le frontend et le backend ................................................................................. 23
Figure 5:Le rôle du Full Stack Developer ..................................................................................................... 25
Figure 6 : visual code logo ............................................................................................................................. 27
Figure 7: Adobe photoshop ........................................................................................................................... 27
Figure 8: HTML logo ..................................................................................................................................... 28
Figure 9: css logo ........................................................................................................................................... 28
Figure 10: JavaScript logo .............................................................................................................................. 28
Figure 11: bootstrap logo ................................................................................................................................ 29
Figure 12: react JS logo ................................................................................................................................... 29
Figure 13: Scrum Framwork ........................................................................................................................... 30
Figure 14 : diagramme de gantt ...................................................................................................................... 31
Figure 15: desktop view .................................................................................................................................. 36
Figure 16: mobile view ................................................................................................................................... 37
Figure 17: color scheme ................................................................................................................................. 38
Figure 18:Les différents étapes pour réaliser le site web .............................................................................. 39
Figure 19 : portfolio home page 1 .................................................................................................................. 39
Figure 20: portfolio about page..................................................................................................................... 40
Figure 21: portfolio projects page ................................................................................................................... 41
Figure 22: zetta hotel home page .................................................................................................................. 42
Figure 23: zetta hotel rooms page ................................................................................................................. 43
Figure 24: zetta hotel restaurant page .......................................................................................................... 44
Figure 25: zetta hotel about us page ............................................................................................................. 45
Figure 26: zetta hotel blog page .................................................................................................................... 45
Figure 27: zetta hotel contact us page .......................................................................................................... 46

5
 Liste des tableaux
Tableau 1: les langages de front-end ............................................................................................................. 22

6
 Liste des acronyms

HTML Hypertext Markup Language

CSS Cascading Style Sheets

JS Javascript

UX / UI User interface / user expérience

IHM Human computer-interaction

SEO Search Engine Optimization

CMS Content management system

SQL Structured Query Language

PHP Hypertext Preprocessor

DOM Document Object Model

SASS syntactically awesome style sheets

LESS Leaner Style Sheets

MVC model view controller

7
 INTRODUCTION
Être présent sur Internet est devenue une réalité fréquente de nos jours. De ce fait, toute entreprise qui
se respecte cherche à assurer sa présence sur le réseau mondial. Pour cela, une entreprise pet assurer
cette présence par ses propres moyens ou sous-traiter chez une Agence de Webmarketing.

La création d'un site web nécessite aussi bien des professionnels en communication que des experts en
création de sites et ce pour avoir un message communicationnel bien élaboré au risque de se trouver
présente sur Internet sans pour autant réaliser le profit escompté.

L'objectif de ce stage effectué à l'Agence de GRANDECHARTE digitale, du 8 avril au 8 juin 2022, j’ai
souhaité réaliser mon stage dans cette entreprise répondant aux enjeux des nouvelles technologies, avec
la recherche visuelle. Les missions de développement d’un site web responsive et de développement
d’un plug-in navigator m’ont attiré particulièrement car j’ai pu améliorer mes connaissances techniques
en développement web front-end et mon esprit créatif avec le design (UX/UI user expérience et user
interface expérience).

Nous verrons ainsi, au travers de ce rapport, la présentation de l’entreprise et de son secteur. Puis, nous
aborderons les méthodes que j’ai pu utiliser pour réaliser et gérer nos projets ainsi que les concepts
nécessaires à acquérir afin d’atteindre les objectifs de chaque mission. Ensuite, nous décrirons les
différents projets auxquels j’ai participé lors de ce stage avant de dresser un bilan professionnel et
personnel dans le dernier chapitre.

8
 1-CADRE ET CONTEXTE DE
STAGE
1-1 Présentation de l’entreprise :
GRANDECHARTE est une agence fondée en 2014 , spécialisée en design d’interaction et en production
digitale. Composée d’une équipe full-stack d’experts chevronnés dans la production web, design et
marketing digital. The Grandecharte a pu servir plusieurs clients tant au niveau national
qu’international, à savoir : Nikon Lenswear au Japon, Essilor Singapour, Transition Optical USA, Kodak
Lens Mena, Mienza Paris, en passant par Transat Telecom Canada. L’expérience utilisateur, le
raffinement du design et la conformité aux standards sont placés au centre de notre production digitale.

1-2 les services d’entreprise :

GRANDECHARTE a une équipe de spécialistes dans le web délivre des résultats exceptionnels et ce
n'est qu'une combinaison d'idées créative et notre vaste expérience. Nous aidons nos clients à
construire une relation durable avec les leurs en les engageant via le web et les réseaux sociaux, avec
des rapports en temps réel.

Nous travaillions dans des zones diverses comme la création des sites web, le marketing au sein des
réseaux sociaux, l'e-mail marketing et le digital marketing. Nous sommes aussi une agence créative qui
aide les nouveaux dans le business à construire leur image de marque et leurs supports de
communication.

GRANDECHARTE agence offert plusieurs service :

• Intégration web :
L’intégration est une phase qui permet de réaliser la maquette définitive d’un site
ou d’une application web. En fonction des besoins du client, mais aussi de
l’identité qu’il souhaite afficher, une agence web est chargé de donner vie à
l’interface utilisateur de l’application. À l’aide bien sûr de certains outils comme les
langages HTML5 et CSS3, il entreprend le graphique pour respecter la charte
graphique définie. Mais encore pour rendre l’expérience utilisateur le plus optimal
que possible.

9
• La gestion des médias sociaux :
La gestion des médias sociaux est le processus de gestion de vos interactions et de
votre contenu en ligne sur des canaux de médias sociaux comme Facebook,
Instagram, Twitter, LinkedIn, YouTube et Pinterest. La gestion des médias sociaux
va au-delà de la simple mise à jour des profils des médias sociaux de votre entreprise.
Cela comprend également l'engagement avec votre auditoire et la recherche de
nouvelles occasions d'accroître la portée et la visibilité.

• Le design graphique :

Le design graphique est une activité de conception visant à mettre en oeuvre et

coordonner la réalisation d’une communication visuelle combinant image et texte, sur
imprimé ou sur écran. Le concepteur / designer graphique et multimédia a pour
mission de concevoir, mettre en oeuvre et coordonner la réalisation d’un processus de
communication visuelle, pour des destinations variées.

• UX / UI :

L’UX et l’UI, appelés aussi expérience utilisateur (User Experience) et interface

utilisateur (User Interface). Pourtant, différents, l’UX design et l’UI design sont souvent
confondus, et leur récent statut de métier n’aide pas à la compréhension. Notre agence
digitale Esokia vous apporte son éclairage sur leur signification et surtout leur
fonctionnement.

• Le motion design :

Le motion design (ou design d’animation) est une technique qui consiste à animer des
éléments graphiques. Sa particularité est d’utiliser le potentiel du mouvement comme
principal outil d’animation. Depuis plusieurs années, le motion design a le vent en
poupe : c’est la nouvelle tendance vidéo en Content Marketing et Brand Content.
L’attrait croissant du public pour les contenus audiovisuels fait du motion design une
véritable opportunité pour les marques.

10
• La stratégie digitale :

La stratégie digitale est un plan d’action mené sur les différents supports digitaux
d’une entreprise, à savoir le web (site, webmarketing, réseaux sociaux…) et le mobile
(application, méthodes de contact) dans le but d’atteindre les objectifs globaux de la
marque, qu’il s’agisse des objectifs commerciaux ou de la notoriété.
Le marketing digital s’inscrit donc dans le plan de communication d’une entreprise.

• La tierce maintenance applicative :

La tierce maintenance applicative on désigne les prestations qui consistent à

conserver un programme informatique dans un état lui permettant de remplir sa
fonction. Ces prestations de maintien en condition opérationnelle s’exécutent à titre
préventif ou correctif. Elles peuvent également concerner des prestations d’évolution
des logiciels. Ces services peuvent être rendus sur le site du pouvoir adjudicateur ou à
distance dans les locaux du titulaire.

• Le référencement naturel :

Le référencement naturel, ou SEO (Search Engine Optimization), englobe l’ensemble

des méthodes et techniques qui visent à positionner les pages web de votre site
internet dans les premiers résultats naturels des moteurs de recherche (notamment
Google, mais aussi Bing, Yahoo et consorts).

Cela dans le but d’améliorer la visibilité des pages en question, en appliquant une
série de « règles » édictées par les moteurs de recherche.

• Achat média :

Un achat média est l’achat de publicité auprès d’une entreprise de médias telle
qu’une chaîne de télévision, un journal, un magazine, un blog ou un site web. Il
implique également la négociation du prix et du placement des annonces, ainsi
que la recherche des meilleurs nouveaux lieux de placement des annonces.

11
• Print design :

un sous-ensemble de la conception graphique , est une forme de communication

visuelle utilisée pour transmettre des informations à un public grâce à une
conception esthétique intentionnelle imprimée sur une surface tangible, conçue
pour être imprimée sur papier, par opposition à présentée sur une plateforme
numérique. Un dessin peut être considéré comme un dessin imprimé si sa forme
finale a été créée par une empreinte faite par l'impact d'un tampon, d'un sceau ou
d'un colorant sur la surface du papier.

1-3 Conclusion :
L’objectif du stage était de finaliser le développement différents types de site web et de maitriser à les
étapes de les créer d'après des maquette données, J’étais en charge de la maquette des sites Web et de
l’uniformisation des différentes IHM. Attentif à la question du responsive design, j’ai amélioré et vérifié
le bon fonctionnement des interactions proposées sur différents appareils (ordinateur, tablette,
téléphone portable...) et différents navigateurs.

12
 2-DEVLOPPMENT WEB
2-1 Bref survol :
Le développement web est une discipline qui consiste, par l’usage de langages de programmation web, à
programmer des sites web ou applications web (ou web mobile) destinés à être publiés sur des serveurs.
Le métier de développeur web demande de savoir manier des outils tels que les CMS ou les frameworks
(comme Bootstrap ou bien le framework Symfony par exemple). De plus, maîtriser les langages tels que
le HTML et CSS, le JavaScript ou bien le PHP est nécessaire pour être en mesure de répondre aux
besoins du client d'une agence web comme Linkweb à Toulouse. Coder fait partie du quotidien d’un
développeur. Également, le rôle de concepteur du développeur fait de lui une pièce incontournable
dans la création de site internet à Toulouse.

Il est possible de scinder le métier de développeur en deux parties bien distinctes, à savoir le back-end
et le front-end :

• Back-End : le développeur back-end est chargé de fournir des solutions techniques concernant le
travail relevant de la partie back office. Il s’agit d’un travail de l’ombre qui doit développer des
interfaces fonctionnelles pour l’administration d’un site internet. Un développeur back-end peut
être amené à réaliser un intranet par exemple.
• Front-End : le développeur front-end, ou développeur intégrateur web, est chargé de définir le web
design du site internet. En somme, il réalise tout le travail inhérent à l’interface utilisateur avec
également une réflexion portée sur l’expérience utilisateur, le responsive design ou encore
l’ergonomie.

Dans la création d’un projet web, il est parfois nécessaire de faire appel à la complémentarité des
compétences techniques des deux types de développeurs web. Ceci est particulièrement pertinent
lorsqu’il s’agit de développer un projet portant des spécifications techniques en vue de mettre en place
une plateforme sur-mesure. Le travail de développement web possède une place considérable dans le
contexte d’une agence web. Le développement, de part le maniement du langage de programmation,
permet de créer un site internet ou une application web sur-mesure et qui colle parfaitement aux
besoins des professionnels.

Figure 1: development
13 web
2-2 Programmation back-end :

2-2-1 bref survol :

Le back-end est une partie importante du développement, sans laquelle un site web ou une application
ne pourrait marcher. Même s'il est indispensable, le back-end est un ensemble d'opérations qui ne sont
pas visibles pour les visiteurs. Le back-end est hiérarchisé en trois parties, à savoir le serveur ou
hébergeur, l'application et la base de données.

Le développeur back-end utilise des langages de programmation comme Python, PHP, Ruby pour
mettre en place et configurer le serveur. Ces outils vont lui permettre de conserver, traiter et modifier
des informations. Il doit s'assurer que ces dernières soient toujours à jour. Pour rendre ces langages de
programmation encore plus pratiques, les développeurs vont les améliorer par des frameworks comme
Symfony, Ruby on Rails, CakePHP ou encore CodeIgniter. Ces outils vont rendre le développement plus
rapide et plus sécurisé.

Le développeur back-end a ainsi pour mission de se charger de la création et de la gestion de tous les
éléments invisibles pour l'utilisateur final. C'est donc lui qui est responsable de toutes les
fonctionnalités du site ou de l'application. Il est également responsable de la création de la base de
données qui va permettre, entre autres, de retenir les informations fournies par les utilisateurs. Par
exemple, le développeur back-end va utiliser les bases de données pour retrouver les identifiants et les
mots de passe utilisés par les clients pour se connecter. Il est possible de se former à ce métier en
passant par une formation en web développement voire même par une formation à Python.

2-2-2 Les langages de programmation back-end:

Le développeur back-end va exploiter des langages comme Python, Ruby, PHP, ou SQL. Pour rendre le
codage plus facile, des frameworks sont disponibles. Parmi les plus utilisés figurent Cake PHP, Ruby on
Rails ou encore Symphony. Ces frameworks vont permettre au développeur d'être plus réactif dans la
mise en place et les modifications de sa plateforme.

• Python

Python est l'un des langages de programmation les plus populaires. Très puissant, mais facile à
apprendre, Python dispose de structures de données de haut niveau. Il permet une approche efficace de
la programmation orientée objet. Ce langage est parfait pour l'écriture de scripts et le développement
d'applications sur la plupart des plateformes. Avec sa syntaxe simple, sa large bibliothèque de normes et
sa grande boîte à outils, Python est un langage de programmation facile à utiliser et à apprendre. Il est
également possible de l'intégrer avec d'autres langages de programmation connus tels que C et C++.

Python est tellement complet qu'il est le premier langage que les étudiants apprennent. C'est le
langage que tout jeune développeur doit maîtriser à la perfection. En effet, il permet de couvrir

14
rapidement plusieurs concepts tout en restant facile à utiliser. C'est pourquoi de nombreux étudiants
passent par une formation Python afin de se perfectionner dans le web development.

Python n'est cependant pas adapté pour réaliser le développement d'applications mobiles. Dans les faits,
les utilisations les plus courantes de Python sont vastes. En effet, ce langage est utilisé dans une large
variété d'applications, dont l'intelligence artificielle, les données scientifiques, les services financiers, les
sites de médias sociaux comme Instagram et YouTube.

• Java
Java est un langage de programmation utilisé dans le développement d'applications client-serveur. Il est
ce qu'on appelle un loosely coupled programming language (langage de programmation à couplage
lâche), ce qui signifie qu'une application écrite en Java va pouvoir s'exécuter sur toutes les plateformes
qui peuvent supporter ce langage de programmation.

• PHP
Il s'agit d'un langage de script côté serveur utilisé dans le développement web. Comme le code PHP est
exécuté côté serveur, il est ce qu'on appelle un langage de script côté serveur. Il fait partie des langages
appris lors d'une formation en web development.

• C++
Ce langage de programmation est aussi très utilisé actuellement. Il s'agit d'un langage à usage
général utilisé pour la programmation concurrentielle et en tant que langage back-end.

Figure 2:Les langages de programmation back-end

15
2-3 développement Front-End :

2-3-2 bref survol :

Le terme front-end désigne les éléments d'un site ou d'une application que les utilisateurs voient à
l'écran et avec lesquels ils vont interagir. À titre d'exemple, tout ce que les internautes vont voir sur un
site internet, c'est une combinaison de HTML, CSS et JavaScript. Ce sont ces langages de
programmation front-end qui seront interprétés par le navigateur.

En général, le front-end se compose d'un design et d'un code HTML, CSS JavaScript et jQuery. Le
design est créé par le web designer qui va réaliser des maquettes graphiques avec des outils dédiés,
comme Photoshop ou Fireworks.

2-3-1 Les langages de programmation front-end :

Dans le cadre de son métier, le développeur front-end doit quant à lui maîtriser trois langages, à savoir
le langage HTML, Javascript et CSS. Il apprend ces langages lors d'une formation en web development.

• HTML
Le HTML est le langage fondamental qui permet de créer et d'organiser le contenu web. C'est ce
langage qui va permettre au contenu web d'être affiché sur un navigateur. HTML est un langage de
balisage, c'est-à-dire qu'il permet de définir les polices, les couleurs et la structure du site.

Fonctionnalités principals:

Largement compris – Le HTML est toujours préféré à un autre programme pour le développement
d’un code backend. C’est simplement parce qu’elle est simple, petite et largement comprise.

Facile à apprendre et à mettre en œuvre – Il s’agit d’un langage gratuit et facile à comprendre. Il
n’est pas difficile d’utiliser ce langage avec une implémentation donnée. Plus important encore, il est
directement compris par tout navigateur sans qu’il soit nécessaire de le masquer avec un autre langage
frontend.

Intégration transparente avec d’autres langues – Il est possible d’éditer sans effort le code d’une
autre langue. Il peut être intégré rapidement à tout autre code ou formulaire. De nombreux
programmeurs qui ont une connaissance de n’importe quel langage frontend ou backend ont utilisé le
HTML.

Test et débogage faciles – Il est convivial et facilement compréhensible par un utilisateur, même si
une erreur est commise dans la mise en page ou le formatage. C’est également l’un des langages
frontend les plus légers actuellement disponibles.

16
 • CSS
Le CSS est un langage front-end qui vient compléter les fonctions du HTML. Il a pour rôle de définir le
style du contenu du site internet : mise en page, couleurs, polices... C'est ainsi le CSS qui permet
d'organiser la présentation de la plateforme. Il tient un rôle important dans la création d'une bonne
expérience utilisateur.

Fonctionnalités principales :

Framework de style en cascade – Cela peut être avantageux pour les différentes pages Web qui ont
beaucoup de types différents de contenu ou de charge de conteneur.

Moins de charge sur le fichier HTML – Ceci peut être utilisé avec le code HTML pour mettre en
cascade le fichier HTML et son contenu afin de permettre une moins grande charge sur le code HTML.

Richesse fonctionnelle – Les CSS offrent de nombreuses fonctions en matière de style de texte, de
polices et de couleurs. Il peut contrôler l’aspect et la convivialité de l’ensemble de votre page Web à
l’aide d’une simple taille et d’une couleur de police.

Prise en charge par plusieurs navigateurs – CSS assure la prise en charge par plusieurs navigateurs
et permet au navigateur de comprendre le placement et l’exécution efficace du code.

Favorise l’uniformité à travers les plateformes – Ce langage de programmation frontal garantit que
le contenu et les données sont dans la bonne syntaxe. Il y a donc moins de place pour les erreurs dans le
contenu et la lisibilité.

• JavaScript
Le développeur front-end va également utiliser JavaScript. Il s'agit d'un langage de programmation qui
permet de rendre les pages web interactives. JavaScript est un langage de programmation utilisé pour
les éléments plus interactifs tels que les menus déroulants et les formulaires de contact. Ce sont ces
éléments qui créent tout ce qui est présenté sur une page web.

Mis à part les langages de base en front-end, les développeurs utilisent des frameworks (Bootstrap,
Angular…), des bibliothèques JavaScript (jQuery…) et des extensions CSS (Sass et LESS…). Il y a
plusieurs ressources comme ces dernières. Ces outils qui prennent en charge HTML, CSS et JavaScript
ont pour objectif de rendre le code plus facile à gérer grâce à divers outils et modèles compatibles avec
les langages courants. Il est possible de les découvrir lors d'une formation en web development.

Selon une enquête de WP Engine, le HTML est le langage frontend le plus facile à ajouter aux
compétences d’un développeur. Cependant, si vous êtes un débutant, un développeur ou une entreprise,
vous devriez voir ces 10 principaux langages frontend avec leurs caractéristiques.

17
Fonctionnalités principales :

Architecture côté client – Elle utilise un modèle « côté client », ce qui signifie qu’elle réduit la charge
sur le serveur et est très rapide en fonction des ressources du client.

Conception riche en fonctionnalités – Elle peut être utilisée pour créer des interfaces très intrigantes
et attrayantes. Il prend en charge plusieurs bibliothèques externes, ce qui ajoute à ses fonctionnalités.

Prise en charge d’un large éventail de langues – Elle prend en charge le langage HTML et peut
facilement être utilisé en cascade pour gérer le contenu. De plus, il peut être programmé pour
récupérer des données à partir de sources ou de moyens multiples.

Contrôles de sécurité – JavaScript nécessite un cryptage et des contrôles de sécurité appropriés dans
le code en tant qu’architecture « côté client ». Il indique que le code va au client, ce qui peut facilement
être violé si le code n’est pas correctement crypté.

• Angular
Angular est un outil moderne de développement frontend qui est de plus en plus populaire dans de
nombreuses applications avec la disposition « feed ». Il devient de plus en plus populaire après sa sortie
initiale en 2016.

De grands noms comme Microsoft et Autodesk font actuellement appel à cette technologie. Angular
vous aide à créer des applications dynamiques à page unique (SPAS) et interactives grâce à ses
caractéristiques étonnantes.

Fonctionnalités principales

Ce langage frontal répartit la charge à la fois sur le client et sur le serveur pour s’assurer que tous les
composants sont chargés spontanément.

Restful API – Les concepteurs peuvent utiliser le langage HTML comme modèle et étendre la syntaxe
HTML pour fournir simplement les composants logiciels. Angular n’oblige pas le concepteur à
s’appuyer sur des bibliothèques tierces pour créer des applications utilisant Angular.

Gestion d’AJAX – Angular offre un moyen simple et efficace d’utiliser et de gérer les problèmes liés à
AJAX.

Emploie les modèles MVC – Cet outil utilise le HTML en arrière-plan pour faciliter la prise en main
par les programmeurs. Il est capable de simplifier facilement les modèles MVC en ayant simplement
une structure de base à 3 composants.

Structure orientée objet – Angular intègre la plupart des fonctionnalités de codage car il utilise une
structure objet simple et directe. Il permet même d’appeler des objets sans fonctions getter ou setter.

Tests et débogage faciles – Les caractéristiques d’Angular permettent également des tests faciles, car
le code peut être exécuté à tout moment pour tester les fonctionnalités.
18
• Vue
Vue est l’un des principaux langages frontend dynamiques pour la création d’une interface spécifique.
Pour la liaison de données active, Vue a été initialement publié en 2014. De plus, ce framework pourrait
être exploité sur un constructeur d’électrons. Il prend également en charge les applications de bureau et
les applications mobiles.

Vue s’inspire d’Angular et de React, qui sont tous deux très bien établis sur le marché. Cela signifie qu’il
peut soutenir et permettre une compréhension plus facile pour les nouveaux développeurs qui
cherchent à mettre en œuvre cette technologie.

Fonctionnalités principals:

Intégration frontend – La bibliothèque centrale ne se contente pas de prêter attention à la facilité

d’utilisation de la couche de présentation pour l’utilisateur. Il s’intègre également à d’autres
bibliothèques ou projets existants.

Idéal pour les conceptions à page unique – Vue est l’élément idéal pour les applications
compliquées à page unique, associé à des outils modernes et à des bibliothèques de soutien. Vue
s’intègre facilement au code dorsal, car il ne nécessite pas de grands changements dans les applications
existantes.

Nombreux plugins disponibles – Il peut également être construit sur des applications JavaScript. De
nombreux plugins tiers sont disponibles pour aider les développeurs à créer une application sonore.

Fichiers légers – Les fichiers sont légers et flexibles en termes de support pour les nouveaux
programmeurs. Il est populaire parce qu’il est facilement compréhensible pour les développeurs
React.JS également.

• JQuery
jQuery est une petite bibliothèque qui peut être intégrée dans un fichier JavaScript. Cela modifie le
comportement de JavaScript et sa fonctionnalité. En effet, cet outil peut également être utilisé pour des
projets de programmation de bout en bout.

Fonctionnalités principales :

Prise en charge du DOM — Cela permet de nombreuses manipulations dans les modèles d’objets de
document (DOM). Cette bibliothèque permet non seulement de choisir entre les modèles d’objets, mais
aussi d’ajouter ou de supprimer des éléments CSS.

Prise en charge de l’animation — Il offre une excellente prise en charge des animations telles que le
carrousel et le fade in. Il est facile à apprendre car il est basé directement sur JavaScript et la façon dont
nous codons pour lui.

19
Effets spéciaux sur le texte – jQuery permet à l’utilisateur d’ajouter des effets spéciaux à un simple
fichier JavaScript. Cela peut rendre la page Web intrigante et plus attrayante pour le lecteur. Ainsi, il
peut constituer un avantage majeur pour quiconque cherche à rendre le programme attractif.

Bien documenté – Il dispose d’une grande variété de supports et permet à toute personne qui s’y met
d’apprendre facilement la mise en œuvre. Il dispose également d’un support API, de sorte que si vous
rencontrez une erreur, vous pouvez être sûr de trouver des solutions.

Prise en charge universelle des navigateurs – jQuery prend en charge un large éventail de
navigateurs. Il peut également être exécuté sur des systèmes plus anciens.

Prise en charge d’AJAX — Il peut également prendre en charge les fonctions Ajax, ce qui vous permet
de créer des pages Web constamment mises à jour.

• Swift
Swift est un autre langage frontend puissant et pur. Il a été développé par Apple Inc. en 2014. Depuis
lors, il est devenu de plus en plus populaire. Il n’a obtenu que récemment la prise en charge de
Windows, depuis la version de septembre 2020.

Fonctionnalités principales

Facile à apprendre – Swift est facile à lire et à écrire. À cet égard, les codeurs devraient être
reconnaissants pour son orthographe, sa grammaire et sa syntaxe simplifiées. Même un novice peut
écrire un code parfait.

Idéal pour les logiciels Apple – Ses performances actuelles sont très impressionnantes. Il pourrait
constituer une option parfaite pour les appareils iOS, macOS, watchOS et tvOS.

Réseau de support — Vous trouverez rapidement le développement Swift du projet en fonction de vos

besoins. Cela inclura le développement ultérieur de cet outil. En règle générale, le Swift vous permettra
d’étendre ses fonctionnalités grâce à un excellent support réseau.

Passage immédiat à Swift – Avec une base de code courte et simple, le processus d’adaptation est plus
rapide. Le codage de Swift est facile à lire pour un débutant car il est principalement en anglais et
simple.

Beaucoup plus rapide que ses concurrents – Il est principalement utilisé dans le cadre du
développement d’Apple iOS, car Apple le prend en charge, contrairement à Object-C ou à tout autre
concurrent. Swift a d’excellentes performances et est assez rapide, ce qui est démontré comme étant
supérieur au langage précédent. Le code Swift est 2,6 fois plus rapide qu’Objective-C, selon une
affirmation du site officiel d’Apple.

Gestion des erreurs – Swift possède une bonne capacité de gestion des erreurs, un typage fort et des
propriétés de sécurité. De cette façon, la probabilité d’erreur et de plantage du code diminue. Il peut
facilement identifier les bogues et a la capacité de les corriger. Il est plus efficace et plus facile à intégrer.
20
• SASS
SASS ou Syntactically Awesome Stylesheets est un préprocesseur CSS. En un sens, SASS peut être
considéré comme un langage d’extension de feuille de style. Il est apparu en 2006 pour simplifier CSS et
maximiser ses capacités.

Fonctionnalités principales :

Fonctions de personnalisation – Il vous permet d’utiliser des variables, des opérations

mathématiques, des mixins, des boucles, des fonctions d’importation et d’autres fonctions intéressantes
qui rendent le CSS beaucoup plus puissant.

Utilise les fonctions Windows – Il étend les fonctions standard de Windows qui représentent les
principaux avantages du langage de programmation.

Variables d’offres – SASS propose des variables d’offres. Il s’agit d’un avantage considérable par
rapport à quelque chose comme CSS, qui devient plus difficile à reporter les données. Les variables
facilitent la compréhension des données et des valeurs sur une longue partie du code.

Peut être codé à la fois en CSS et en SASS – SASS peut être codé à la fois en CSS et en SASS. Oui, les
deux sont supportés. Cela signifie qu’un programmeur qui maîtrise le codage CSS présente de
nombreux avantages.

Passage simple de CSS à SASS – L’une des plus courantes est la fonction SCSS qui vous demande de
renommer l’extension de votre fichier CSS en ‘.scss’ simplement, et il disposera immédiatement de
toutes les fonctionnalités de SASS.

Figure 3: Web Front End

21
Langage de programmation frontend Applications connues

Facebook
React
Instagram

Google
JavaScript Wikipedia
Yahoo

Publicis90
CSS RollPark
Angry Birds Space

Le projet WWW
HTML
X.COM

Lego
Angular Forbes
Autodesk

Behance
Vue Nintendo
Gitlab

Upwork
jQuery LinkedIn
Udemy

Uber
Swift Slack
WhatsApp

StackShare
SASS AlibabaTravels
Trivago

Tableau 1: les langages de front-end

22
2-4 Différences entre le frontend et le backend :
Frontend et backend sont deux termes très célèbres qui sont couramment utilisés dans le secteur du
développement de logiciels. Tout d’abord, si nous parlons de frontend, vous pouvez l’appeler la peau du
logiciel.

En effet, le frontend est le « côté client » d’une application qui peut être touché, vu et expérimenté. En
d’autres termes, tout ce que l’utilisateur d’une application voit est le frontend, comme les menus de
navigation, le modèle d’application et les boutons, etc. JavaScript, CSS, React et HTML sont des
langages frontend largement reconnus.

D’autre part, toutes les opérations qui sont liées au « côté serveur » font référence au backend. Ces
opérations de backend peuvent concerner la mise à jour des bases de données, les codes de script et les
API, la création de bibliothèques, etc.

En d’autres termes, un backend concerne toutes les fonctions qui se déroulent derrière la scène et dont
l’utilisateur de l’application ne peut être témoin. Python, JavaScript, Ruby et Java sont les langages
backend les plus utilisés.

Figure 4: Différences entre le frontend et le backend

23
Le frontend est le « côté client » d’une application qui peut être touché. D’autre part, toutes les
opérations qui sont liées au « côté serveur » font référence au backend.

• La partie frontend d’un site web

Lorsque l’on atterrit sur la page d’un site et/ou d’une application web, on peut
directement interagir avec ce que l’on appelle l’“interface utilisateur”* : on va pouvoir cliquer sur des
liens, faire défiler la page de haut en bas avec notre souris, remplir des formulaires, naviguer entre les
onglets... Toutes ces actions effectuées par l’utilisateur représentent une interaction directe de l’homme
à la machine. Et toute cette partie visuelle, c’est le frontend.

• La partie backend d’un site web

Une fois que l’on a cliqué quelque part, cette action de “clic” est perçue comme une demande par le site
ou l’application, qui va donc travailler en autonomie : la “demande” envoyée par l’utilisateur est reçue
par le site ou l’application, qui va chercher l’information demandée, et va la renvoyer à l’utilisateur. Et
ça, c’est le backend.

Par exemple, un utilisateur veut s’abonner à la newsletter d’un site. Pour se faire, il se dirige sur l’onglet
“Newsletter” et clique dessus. Cette action de “clic” va alors soumettre la demande suivante : “rediriger
l’utilsateur vers la page newsletter du site”. Une fois reçue et analysée par le site, ce dernier va renvoyer
à l’utilisateur la réponse attendue - qui est ici : aller sur la page newsletter.

En résumé, le backend, c’est toute la partie que l’utilisateur ne voit pas, mais qui lui permet de
réaliser des actions sur un site ou une application.

Et une fois que le backend a renvoyé l’information, je peux de nouveau la consulter et interagir avec, je
suis de nouveau sur le frontend. Et si tout s’est bien déroulé, j’ai donc témoigné d’une expérience
utilisateur réussie !

On se rend bien compte ici que ces deux facettes d’un site web ou d’une application mobile sont
essentielles (au même titre que le centre de tri et le facteur dans les services postaux). L’un ne peut aller
sans l’autre et, comme dans les services postaux, ce n’est pas la même personne qui distribue le courrier
et qui trie ce dernier.

De la même façon, lorsque l’on lance un projet qui nécessite le développement d’une application ou
d’un site internet, nous avons besoin d’un développeur “front” et d’un développeur “back”, ou alors
d’un développeur fullstack (c’est un développeur qui a des compétences frontend et backend, et qui
justifie donc d’une certaine expertise dans le domaine du développement).

24
2-5 Full Stack développement :
Un Full Stack Developer désigne un spécialiste qui maîtrise toutes les compétences du front-end et
du back-end. Très recherché par les entreprises et surtout les startups, ce professionnel a une
connaissance sur divers éléments. Il doit maîtriser, entre autres, la prise en compte de l'expérience
utilisateur, l'intégration HTML ou encore la construction de l'architecture d'un site. Bien entendu, il
doit également avoir une parfaite maîtrise des différents langages de programmation front-end et back-
end.

Figure 5:Le rôle du Full Stack Developer

2-6 Le back-end et le front-end dans la Data :

Même si le back-end et le front-end sont des compétences de base en développement web, elles sont
également appréciées pour un professionnel de la data. En effet, elles sont très utiles dans différents cas,
pour implémenter un algorithme dans une application par exemple. Pour un Data Scientist, la maîtrise
du back-end ou du front-end, ou bien idéalement des deux, représente une plus-value
considérable qui fera toute la différence aux yeux des recruteurs.

Dans le monde de la Data, nous parlons ainsi de Full Stack Data Scientist. C'est un expert touche-à-tout
qui intervient à chaque étape du cycle de vie de la science des données, et qui maîtrise le back-end et le
front-end. Un Full Stack Data Scientist va couvrir tous les composants d'une initiative commerciale en
data science. Il intervient dès l'identification à la formation en passant par le déploiement de modèles
d'apprentissage.

25
Le Full Stack Data Scientist peut ainsi intervenir dans :

• La collecte ou l'identification des données ;

• La résolution de problèmes, car les projets de science des données consistent à donner des
solutions qui ajoutent de la valeur à une entreprise (gains d'efficacité, automatisation,
nouvelles capacités…) ;

• L'exploration et l'analyse des données pour construire des modèles ;

• L'apprentissage automatique pour résoudre le problème métier par la gestion des données ;

• Le déploiement du modèle pour le rendre accessible aux utilisateurs finaux ;

• Le suivi du modèle pour s'assurer qu'il se comporte comme prévu à l'avenir.

Afin qu'un développeur maîtrise toutes ces compétences, il se doit de passer par une formation en
web development.

26
 3-EVOLUTION DE STAGE
3-1 - Les aspects techniques :
3-1-1 Environnement de développement :
• Visual studio code : Pour le développement web front-end, j’ai utilisé Visual studio code qui est
un IDE pour les langages Web (HTML, CSS et JavaScript ) développé par l’entreprise Microsoft et
aussi pour le web design et le développement sur des technologies Web et qui fournit un future,
Quick edit, une fonctionnalité offrant aux développeurs de modéifier, directement en ligne, du code
CSS, JavaScript :
− Mise à jour du code HTML et CSS, dans le navigateur web, en temps réel sans rechargement ;
− Surbrillance des éléments : le ou les éléments sélectionnés sur vs code sont affichés en
surbrillance dans le navigateur web.

Figure 6 : visual code logo

• Photoshop : est un outil de création graphique puissant. Très flexible, avec ses nombreux outils
adaptés, il nous permet de créer ensemble tous les éléments d’un site responsive. J’utilise des
maquettes graphiques pour me donner une idée très précise de l’aspect qu’aura mon site à la fin du
projet, avant de commencer le code. C’est la réalisation de ces maquettes que nous allons
maintenant aborder ensemble dans le paragraphe 4.2.5.

Figure 7: Adobe photoshop

27
3-1-2 Les langages utilisées :
Dans cette partie nous allons commencer tout d’abord par l’identification des langages et des outils de
développement. :

HTML signifie « HyperText Markup Language » que l’on peut traduire par « langage de balises pour
l’hypertexte ». Il est utilisé afin de créer et de représenter le contenu d’une page web.

Figure 8: HTML logo

• CSS Cascading Style Sheets est un langage de feuille de style utilisé pour décrire la présentation
d’un document écrit en HTML ou en XML. CSS décrit la façon dont les éléments doivent être
affichés, à l’écran, sur du papier ou sur un autre support.

Figure 9: css logo

• Javascript est un langage de script léger, orienté objet et interprété, principalement connu comme
le langage de script des pages web, mais il est aussi utilisé dans de nombreux environnements
extérieurs aux navigateurs web, tel que Node.js. JavaScript est principalement utile lorsqu’il s’agit
d’améliorer et d’étendre le comportement des pages. Ce langage vient compléter le HTML et le CSS,
en y ajoutant une couche d’interactivité.

Figure 10: JavaScript logo

• JQuery est une bibliothèque JavaScript créée pour faciliter l’écriture de scripts côté client et permet
de profiter d’une plus grande compatibilité avec les différents navigateurs. Il est à l’heure actuelle le
framework front-end le plus utilisé au monde.
28
• Framework (Bootstrap) Le mot Framework est un mot anglais signifiant « cadre de travail ». Il
s’agit en quelque sorte d’une boîte à outils qui a été conçue par d’autres programmeurs qui ont déjà
travaillé sur des projets similaires, en vue de faciliter la tâche aux autres programmeurs afin qu’ils
puissent se concentrer sur l’essentiel, leur logique métier. Un framework web est donc un ensemble
d’outils qui forme un tout cohérent que l’on a juste à assembler selon nos besoins pour faire un site
robuste, maintenable et durable. L’intégrateur pourra, par exemple, décider de démarrer un projet
avec un framework front-end comme Bootstrap ou Foundation.

Figure 11: bootstrap logo

React (aussi appelé React.js ou ReactJS) est une bibliothèque JavaScript libre développée par Facebook
depuis 2013. Le but principal de cette bibliothèque est de faciliter la création d'application web
monopage, via la création de composants dépendant d'un état et générant une page (ou portion) HTML
à chaque changement d’état.

Figure 12: react JS logo

29
3-2 - Gestion de projet:
3-2-1 Les méthodes agiles:

Figure 13: Scrum Framwork

Les méthodes agiles décrivent un ensemble de pratiques dans la gestion d’un projet. Elles impliquent au
maximum le client et permettent une grande réactivité à ses demandes. Elles reposent sur un cycle de
développement itératif, incrémental et adaptatif et doivent respecter une base de pratiques communes
ou complémentaires. La société grandecharte travaille en agilité en appliquant la méthode Scrum
[ figure 13 ]. La durée d’un sprint est fixée à 2 semaines dans le cadre de projet. L’objectif générique
associé à chaque sprint consiste à transformer les exigences constituant le périmètre de ce dernier en
fonctionnalités utilisables. Avant de démarrer un sprint, nous sélectionnons les éléments de la liste
ordonnancée des exigences) qu’elle pense pouvoir réaliser dans le délai associé au sprint. Au cours de ce
dernier, le Product Owner et l’équipe de développement collaborent étroitement pour atteindre les
objectifs fixés. A la fin du Sprint, nous présentons les résultats de nos travaux sous la forme d’une
démonstration des nouvelles fonctionnalités réalisées. Les feedbacks sont recueillis. Chaque jour, nous
faisons un « stand-up meeting » d’une durée maximum de 15 minutes en utilisant appear.in, l’équipe
étant répartie sur deux sites. Cette réunion, se faisant debout, permettant ainsi d’éviter de s’éterniser et
d’aller directement à l’essentiel, est très importante. Elle nous permet quotidiennement de se
synchroniser, de remonter les obstacles rencontrés, de s’entraider, de vérifier l’avancement du sprint.
Elle contribue également à faire naître l’esprit d’équipe.

3-2-2 Outils de gestion de projet:

Le terme logiciel de gestion de projet peut désigner différents types de logiciel ayant pour objectif de
faciliter le travail de gestion de projet. Le travail des logiciels de gestion de projet est généralement
d’automatiser des tâches de sauvegarde et/ou de la gestion du temps. Il y a plusieurs méthodes utilisées
pour la gestion de projets. Au sein de la société Grandecharte nous avons utilisé :

30
• GitLab qui permet d’héberger et de gérer des projets web de A à Z. Présentée comme la plateforme
des développeurs modernes, elle offre la possibilité de gérer nos dépôts Git et ainsi de mieux
appréhender la gestion des versions de nos codes sources. Github est payant pour les projets qui ne
sont pas open source, et l’on ne peut bien évidemment pas modifier le code.
• Git où l’on « committe » (c’est-à-dire où l’on supervise) tous les nouveaux fichiers que l’on ajoute
ou supprime, ainsi que les lignes modifiées dans le code. Les logiciels de gestion de version, comme
Git, permettent de sauvegarder ses travaux sur le serveur, mais aussi de garder les informations liées
à chaque modification du code et de pouvoir ainsi travailler à plusieurs sur le même projet.
• Slack qui est une plate-forme de communication collaborative propriétaire ainsi qu’un logiciel de
gestion de projets. Nous utilisons Slack quotidiennement pour gérer nos projets et communiquer
entre nous. Cette plateforme permet également de conserver une trace de tous les échanges et
partager de fichiers au sein des conversations. Elle intègre aussi des services externes comme Gitlab,
Dropbox, Google Drive ou Trello pour centraliser le suivi et la gestion d’un projet.

3-2-3 le diagramme de Gantt :

En réalité, ce plan de travail à été relativement bien respecté, certaines tâches sont apparues plus
longues que prévu, mais d'autres ont été plus rapides. Au final, j'ai réussi à ne pas prendre de retard sur
ce plan initial jusqu'au moment où j'ai commencé la rédaction de mon rapport de stage. A ce jour, je
pense qu'il est toujours possible que je finisse le projet avant le 31 mai autant que ce projet et se
compose de plusieurs tâches, chaque tâche se présente par la réalisation d'un site web différent.

Figure 14 : diagramme de gantt

31
3-3 - Critères importants :
3-3-1 UX/UI :
Le terme UI est l’abréviation d’user interface qui désigne l’interface utilisateur. Le rôle de l’UI designer
consiste à concevoir une interface agréable par le biais duquel l’homme entre en contact avec le produit.
Ce professionnel du design prend part aux discussions initiales avec l’UX designer et le client afin de
déterminer les attentes de ce dernier, ses objectifs de communication et les besoins de l’utilisateur ciblé.
Le terme UX vient d’user expérience ou expérience utilisateur. Le travail de l’UX designer consiste donc
à concevoir une interface accessible et facile à prendre en main pour tout type de support. D’ailleurs, ce
professionnel est parfois désigné sous l’appellation ergonome en raison de la nature de sa mission. Pour
ce faire, il analyse les souhaits du client et les besoins des cibles afin de concilier les deux. À partir des
résultats, il conçoit l’architecture du site et les différentes fonctionnalités disponibles.

3-3-2 les maquettes :

La création d’une maquette est une des étapes primordiales du développement d’un site Internet. Elle
est nécessaire pour la gestion du projet et plus particulièrement pour la validation de l’avancée de la
part du client. En effet, sa mise en place permet avant tout de visualiser le « schéma » du projet,
autrement dit, du site web.

En général, elle est réalisée par un graphiste qui maîtrise les outils de PAO et qui a de bonnes
connaissances en design pour le Web. Elle peut aussi être réalisée par les designers d’interface (UI
designer). Les outils les plus connus sont Photoshop, InDesign ou Sketch. Ayant une facilité pour le
design et maîtrisant bien le photoshop.

D’autre part, elle permet d’intégrer l’ensemble des éléments tout en respectant la charte graphique,
d’optimiser l’ergonomie, de travailler l’ensemble du zoning et des wireframes. Enfin, elle permet de
procéder à la création de mockups dynamique à intégrer en HTML ou CSS. Ces derniers serviront
notamment à tester l’intuitivité de la navigation générale du site web.

3-3-3 La sémantique des balises :

La sémantique des balises permet de donner du sens et une structure à la page en utilisant les éléments
(balises) appropriés. La sémantique décrit la valeur du contenu de la page, sans tenir compte de
l’apparence ou de la mise en forme des informations. Le HTML sémantique est traité par les navigateurs
courants et il est également beaucoup plus simple de travailler et de maintenir un code HTML
sémantiquement correct puisque le document est découpé en parties claires et logiques. 3.3.3 La
séparation entre la structure et la présentation L’un des objectifs majeurs des CSS est de permettre la
mise en forme hors du document. Cette séparation fournit un certain nombre de bénéfices permettant
d’améliorer l’accessibilité, de changer plus facilement de présentation et de réduire la complexité de
l’architecture d’un document.

3-3-4 Un code organisé et réutilisable :

32
L’intégrateur doit produire un code propre, organisé et réutilisable, ceci afin de pouvoir être modifié
facilement par un autre intervenant. Cette démarche commence dès la conception en cherchant à
répondre aux besoins de l’utilisateur et uniquement aux besoins de l’utilisateur. Plusieurs techniques
peuvent aider l’intégrateur à agir ainsi.

3-3-5 Compatibilité cross-browser :

La compatibilité Cross-browser est la possibilité pour toute application web de supporter plusieurs
navigateurs web. C’est-à-dire qu’un site doit être identique visuellement et proposer une expérience
utilisateur égale sur tous les navigateurs. Il est donc nécessaire de tester et créer des correctifs
spécifiques si besoin. Nous pouvons également faire le choix de ne plus prendre en compte certains
navigateurs trop anciens ou obsolètes.

3-3-6 Responsive design :

Un site web adaptatif, ou responsive, est un site web dont la conception vise à offrir une consultation
confortable même pour des supports différents en s’adaptant au terminal du client [3]. L’utilisateur
peut ainsi, avec le même confort visuel, consulter le site à travers une large gamme d’appareils.
Aujourd’hui, il en existe trois principaux : l’ordinateur de bureau classique, la tablette mobile et le
smartphone. On peut, dans le cadre de la gestion de projet, décider de créer une version unique du site,
et donc responsive, où choisir de créer une version supplémentaire spécialement adaptée à un format
particulier.

3-3-7 Accessibilité :
L’accessibilité, c’est permettre au plus grand nombre de profiter pleinement de votre site, quel que soit
le matériel, les logiciels, les équipements particuliers ou le handicap de l’utilisateur. Il existe plusieurs
normes à respecter, mais d’une façon générale, le plus simple et le plus efficace est de séparer le
contenu du design dans des fichiers séparés. Les principales difficultés d’accessibilité sont :

− La liaison bas débit qui ralentit le chargement de la page.

− Le texte mal orthographié, utilisant des termes complexes ou pas adaptés au public visé.
− Les navigateurs trop anciens ou peu connus.
− Un Site mal pensé, peu ergonomique où la navigation n’est ni intuitive ni cohérente ou basée
uniquement sur des scripts.
− Un Site ne prenant pas en compte les utilisateurs ayant un handicap visuel ou sonore.

3-3-8 Référencement
Le référencement est un ensemble de techniques consistant à améliorer le positionnement et la
visibilité de sites dans les pages de résultats de moteurs de recherche ou d’annuaires et ainsi augmenter
le trafic du site. Il s’articule autour de deux stratégies distinctes et complémentaires : le référencement
naturel et le référencement payant. L’intégrateur web peut agir sur le référencement naturel en
produisant un code qui décrit au mieux le contenu de la page et permet ainsi aux moteurs de
recherches d’en parcourir l’intégralité avec facilité. On appelle cela de l’optimisation SEO
33
 4-DEVLOPPMENT DES PROJETS
4-1 Introduction :
Durant la période de mon stage, J'ai pu travailler sur différents projets qui ont été divisés durant les
semaines de mon stage et suite à la demande de mon encadrant.

Au début, les projets réalisés sont des sites Web permettant de se familiariser avec l'environnement du
front-end ; qui se différent selon le niveau de difficulté.

Par la suite, j'ai pu développer des projets complexes selon les maquettes données et durant un
intervalle de temps précis.

Ci-dessous, je vous présente les différents projets établis :

• Création landing page

• Création d'un portfolio personnelle
• Création d'un site Web pour Zetta Hôtel
• Développement d'un site web pour le client Riad Dar EL Malaika

4-2 créations d’un landing page :

4-2-1 Bref survol :

• Définition :
Une landing page, également appelée page de destination, est une page web qui a pour objectif unique
de convertir des visiteurs en leads. Pour cela, elle intègre un formulaire invitant les internautes à
renseigner certaines informations en l'échange d'un contenu gratuit à forte valeur ajoutée. Il peut par
exemple s'agir d'un livre blanc, d'un rapport ou d'un modèle de fichier.

• L'intérêt des landing pages

Pour mesurer tout l'intérêt des landing pages, il faut les opposer aux pages d'accueil : ces dernières
servent de vitrine à toute une marque, là où les landing pages permettent au contraire de mettre en
avant l'objet d'une campagne marketing.

Ainsi, les landing pages sont consultées par des internautes qui, en cliquant sur un lien présent dans
une publicité ou un e-mail, ont manifesté un intérêt pour un contenu clairement défini. Il peut s'agir
d'un livre blanc, d'un rapport, d'un modèle de fichier personnalisable, d'un essai gratuit ou bien encore
d'un entretien avec un expert. Les possibilités sont vastes, l'essentiel est que cette offre gratuite soit à

34
forte valeur ajoutée pour les clients. C'est cette pertinence du contenu qui poussera les internautes à
atterrir sur ces pages et à compléter le formulaire de capture de leads qui y figure.

Par ailleurs, les pages de destination constituent le dernier chaînon du parcours de conversion. C'est
donc sur elles que repose la concrétisation de tous vos efforts marketing. Par exemple, lorsqu'un
internaute consulte un article de blog, trouve le contenu pertinent et s'intéresse à un complément
d'information proposé au cours de l'article par le biais d'un call-to-action, il sera redirigé vers une page
de destination qui devra finir de le convaincre. Ainsi, chaque détail sur cette dernière est de la plus
haute importance, a fortiori quand 7 visiteurs sur 10 ne vont pas au bout de leur démarche après être
arrivés sur une landing page.

Enfin, ces pages revêtent un intérêt non négligeable en matière de référencement, car elles permettent
de cibler un mot-clé très précis. Par exemple, si une agence immobilière souhaite proposer
gratuitement une étude sur son secteur d'activité en l'échange d'une prise de contact, elle pourra axer
ses efforts SEO autour du mot-clé de longue traîne « Rapport 2019 sur les tendances du secteur
immobilier ». Ainsi, il capte les internautes en quête d'un tel contenu et assoit son autorité dans ce
domaine auprès des algorithmes des moteurs de recherche.

Réussir le design de votre landing page

Pour optimiser les chances de réussite, certaines lignes directrices doivent impérativement être
appliquées lors de la création des pages de destination. Ces pratiques éprouvées concernent aussi bien
la structure même des pages que le contenu du texte qui y figurera. Bien entendu, en matière de
marketing, la créativité est de rigueur : les règles qui suivent sont une trame que chacun pourra
personnaliser à sa guise.

• Structure d'une landing page

Une page de destination efficace se compose de cinq éléments :

• Un titre qui capte l'attention des lecteurs ;

• Une image pertinente qui résonnera avec votre public ;

• Un formulaire visant à générer des leads ;

• Un call-to-action engageant et bien identifiable ;

• Un corps de texte qui informe les visiteurs et invite à compléter le formulaire.

4-2-2 La maquette (Storyboard) :

Une maquette est l’équivalent d’un site web en version imprimée. À propos la maquette avec lequel j'ai
travaillé dans cette tâche , a été donné par "front end mentor challenge" .

"front-end mentor" est une plate-forme d’apprentissage en ligne qui fournit des mauettes afin que vous
puissiez mettre vos compétences en développement front-end en pratique en utilisant un vrai flux de
travail.

35
Les défis comprennent la conception des appareils mobiles et de bureau, le code de démarrage (y
compris les assets optimisés). Un guide de style frontal est également fourni, qui comprend les couleurs,
les polices, etc.

Voici une capture d’écran de l’aperçu du bureau pour le défi sur lequel j’ai travaillé :

Figure 15: desktop view

36
Et l’aperçu mobile :

Figure 16: mobile view

37
4-3 Création d'un portfolio personnelle :
4-3-1 Bref survol :
Portfolio site web est une extension dans Freelancer cv (ou l 'entreprise). Il fournit un moyen pratique
pour les clients potentiels de voir votre travail tout en vous permettant également de développer vos
compétences et services. Ceci, cependant, n’est pas le but ultime d’un site Web de portefeuille.

Le but ultime d’un portfolio site Web est de fournir un moyen pour vous d’atterrir plus de clients, si
cela signifie travail indépendant, plus de clients pour votre agence ou emploi dans une entreprise. Vous
devriez décider ce que vous voulez accomplir avec votre site Web avant d’y ajouter du contenu.

4-3-2 la réalisation :
Dans se projet j’ai permet de crée un portfolio site web contenant des exemples de mes réalisations. En
principe ce portfolio vise à démontrer mes compétences par rapport à mes objectif professionnel.

4-3-2-1 Cahier des charges :

Un cahier des charges est un document qui liste les besoins du projet ainsi que les différentes étapes de
réalisation jusqu’à la mise en ligne finale. Il est extrêmement important d’en avoir un pour être certain
que l’entreprise ainsi qu’un projet et moi partageons les mêmes objectifs. Après avoir rendu mon
rapport, mon encadrant a accepté presque toutes mes propositions, Donc nous avons écrit ensemble le
cahier des charges. Voici un résumé des contraintes présentes dans le cahier des charges :

• Le website doit être responsive pour s’adapter à toutes les tailles d’écran (PC, Netbook, Tablette,
Mobile).
• Pour la famille de polices, nous utiliserons : Fire Code – titres et texte de code / Nunito – texte
normale
• Pour la charte graphique, on doit respecter un le colore schème :
− White - all normal text color
− Oxford Blue - page background color, text color on white background
− Charm Pink - links, nav bar item hover, icon hover color
− Shamrock Green - Charm Pink links hover color
− Viridian Green - project skill text color
− Slate Gray - mobile navbar background color

Figure 17: color scheme

• Le site sera rédigé dans un premier temps en anglais, la version française sera développée dans un
deuxième temps.

38
4-3-2-2 Développement :

Figure 18:Les différents étapes pour réaliser le site web

J’ai créé un design minimal sans maquette initial la mis en place le cahier des charges et à partir de la
recherche, de l’élaboration du contenu et du design, je suis arrivé à l’étape du développement dans les
délais imposés. En effet, mon premier travail était de traduire le design en langage web, c’est à dire en
HTML, CSS et JS [5]. Ayant été le graphiste, je connaissais déjà les éléments interactifs qui nécessitaient
du Javascript. J’ai aussi utilise Flaticon et FontAwesome pour les icones.

J’ai fait un mélange de wireframes basse et haute-fidélité pour les pages de mon site. Le produit final
ressemble à ça, mais j’ai fait quelques petits changements.

4-3-3 les interfaces du site web :

Voici le plan actuel et les progrès des diverses composantes de ce projet
home : Nous avons une brève présentation là-bas avec certains des projets sur lesquels j’ai travaillé :

Figure 19 : portfolio home page 1

39
about : Qui je suis : Dans cette section, j’ai une description de qui je suis, de mes études et de mon
expérience de travail.

Figure 20: portfolio about page

40
Projets : présente quelques projets développés et directement reliés aux codes correspondants dans
Github;

Figure 21: portfolio projects page

41
4.4 Création d'un site Web pour Zeta Hôtel :
4-4-2 bref survol
Dans ce projet, Jai permet de crée web site de zêta hôtel , c’est un site web de réservation avec multi
pages afin de gérer un ensemble de taches sur les client et promouvoir hôtel , Pour réaliser cette
application web, plusieurs technologies ont été utilisées : HTML, CSS3, , JavaScript et Bootstrap etc ..

4-4-1 les interfaces du site web :

Home page est simple et représente la mission du site, et la commercialisation des facilites offert par
hôtel. Elle se compose d’un entête, slider, newslatter, nos catégories et les meilleures chambres par
l’hôtel .

Figure 22: zetta hotel home page

42
Rooms page fournit à l’utilisateur des détails seront affichées pour mieux connaitre les chambres, tels
que la description des chambres et ses caractéristiques, son prix, des détails sur sa dimension etc…

Figure 23: zetta hotel rooms page

43
Restaurants page vous fournir des détails avec l’une des facilites de l’hôtel ‘‘ la restauration’’ ,
présentant les spécialisations de l’hôtel en terme de nourriture .

Figure 24: zetta hotel restaurant page

44
About us page vous fournir des informations plus détaillées sur zetta hôtel .

Figure 25: zetta hotel about us page

Blog page fournit un contenu sur note hôtel qui répond aux questions de nos client potentiels et les
aides a en savoir plus sur notre hôtel et les services qui nous offrants .

Figure 26: zetta hotel blog page

45
contact us page : fournit des conseils pour les clients existants et offres un aperçu de notre hôtel pour
les nouveaux visiteurs avec un formulaire pour adresser directement au l’administration de l’hôtel ainsi
des numéros pour le contacter ainsi des information sur localisation .

Figure 27: zetta hotel contact us page

46
 5-Bilan et conclusion
5-1 Bilan professional
Ce stage m’a apporté une nouvelle expérience professionnelle enrichissante. Grâce à ces deux mois
passés au sein de la société grantecharte, j’ai acquis de nouvelles connaissances autant sur le milieu de
l’entreprise que sur les langages informatiques. Le stage dans un milieu professionnel est constructif. En
effet, j’ai pu développer mes compétences professionnelles grâce à l’environnement dans lequel j’ai
effectué mon stage. J’ai eu la charge de la conception d’un site, du cahier des charges à la réalisation
tout en respectant les éléments et les souhaits formulés par les responsables de la société. Tous les
objectifs du cahier des charges ont été respectés. J’ai pu développer mes connaissances des langages JS,
HTML et CSS ainsi que mes connaissances en gestion. J’ai bien entendu rencontré quelques problèmes
lors de la conception du site tels que le mauvais encodage de certains fichiers, les erreurs générées par
le JavaScript ou ceux liés au responsive design. Ces problèmes ont tous été résolus et m’ont également
apporté de nouveaux savoirs.

5-2 Bilan personnel

Ce stage a été très enrichissant pour moi car il m’a permis de découvrir dans le détail le développement
web front-end. Il m’a permis de participer concrètement aux enjeux de la société garntecharte au
travers de mes missions variées .Ce stage m’a aussi permis de relever un réel défis pour moi en
travaillant sur la généralisation d’un code que je n’ai pas créé initialement. Ceci m’a demandé de lire
attentivement le code, comprendre toutes les fonctions et les variables. J’ai aussi appris beaucoup de
l’expérience des autres, appris à mieux travailler en équipe en partageant les tâches, les ressources de
travail, les connaissances, les opinions et les expériences personnelles. J’ai amélioré mon expression
orale en participant aux stand-ups quotidiens où je devais décrire ce que j’ai fait, ce qui me restait à
faire et les problèmes rencontrés lors de la réalisation d’une tâche. J’ai aussi pu découvrir la vie au sein
d’une entreprise. Le fait de se référer à un tuteur constitue une aide dont je n’aurais pu me passer et
s’adresser à un supérieur hiérarchique en construisant une explication et une argumentation a été
instructif

47
5-3 Conclusion
En conclusion, la société garntecharte dispose maintenant d’un site fonctionnel répondant à toutes
leurs attentes et actuellement en ligne. Ce stage m’a énormément appris. J’ai ainsi amélioré ma capacité
à apprendre rapidement un nouveau langage informatique et j’ai augmenté ma capacité d’analyse face à
un problème à résoudre. La principale difficulté de ce stage a été pour moi la communication orale à
laquelle j’ai consacré beaucoup d’efforts. L’entreprise Grandecharte qui m’a accueilli pendant ce stage
fait face à une période charnière sur la promotion de leur produit, et je suis très fier d’avoir pu
contribuer et participer à cette révolution. Fort de cette expérience, j’aimerai beaucoup par la suite
essayer de m’orienter via un prochain stage, vers le développement web back-end afin d’avoir une
vision globale de la création d’un projet web.

48
 Bibliographie
[1] Bérangère D’Henry. La recherche visuelle de produits . https://blog.sensefuel.com/, [2018].

[2] Laurène Castor. UX design : découvrez les fondamentaux . OpenClassRoom, [2018].

[3] Benoit Gaillat. Devenir mobile first doit être votre objectif en 2018. http://mobibot.io , [2017].

[4] Emily Reese. Découper et intégrer une maquette. https://openclassrooms.com/courses, [2017].

[5] Mathieu Nebar. Apprenez à créer votre site web avec HTML5 et CSS3 . OpenClassRoom,[2018].

[6] Bootstrap. Bootstrap Documentation https://getbootstrap.com/ , [2018].

[7] W3schools. JavaScript tutoriel, https://www.w3schools.com/jS , [2018].

[8] jQuery. La bibliothèque jQueryhttps://jquery.com/, [2018].

49