Rapport de Projet Pfe
Rapport de Projet Pfe
Rapport de Projet Pfe
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.
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…
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.
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
JS Javascript
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.
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.
• 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 :
• UX / UI :
• 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.
• Le référencement naturel :
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 :
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 :
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.
• 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.
15
2-3 développement Front-End :
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.
• 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:
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.
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 :
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.
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
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.
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.
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 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'apprentissage automatique pour résoudre le problème métier par la gestion des données ;
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.
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.
• 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.
• 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é.
• 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.
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.
29
3-2 - Gestion de projet:
3-2-1 Les méthodes agiles:
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.
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.
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.
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-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 :
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.
• 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.
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.
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.
"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é :
36
Et l’aperçu mobile :
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.
• 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
38
4-3-2-2 Développement :
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.
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.
40
Projets : présente quelques projets développés et directement reliés aux codes correspondants dans
Github;
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 ..
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…
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 .
44
About us page vous fournir des informations plus détaillées sur zetta hôtel .
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 .
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 .
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.
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].
[3] Benoit Gaillat. Devenir mobile first doit être votre objectif en 2018. http://mobibot.io , [2017].
[5] Mathieu Nebar. Apprenez à créer votre site web avec HTML5 et CSS3 . OpenClassRoom,[2018].
49