Rapport de Stage Technicien

Rapport d’expérience professionnelle de
type « Technicien » : Assistant en

développement web
Tuteur Entreprise Tuteur EIGSI Étudiant
TEKOUABOU Stéphane EL ATMANI Yassine NGOMA Christopher
00212(0)7 71 51 59 63 00212(0)621730050
ctekouaboukoumetio@gmail.com Yassine.elatmani@eigsica.ma Cngoma312@gmail.com
Septembre 2022
TEXEFA SARL Rapport d’expérience professionnelle de type
« Technicien » : Assistant en développement web
REMERCIEMENTS
Mes remerciements vont à l’endroit de toutes les personnes qui, de près comme de loin,
ont participé, au bon déroulement de mon expérience et à la rédaction de ce rapport de
stage.
Je remercie également mon maitre de stage, M. Tekouabou Stéphane et chef de

l’entreprise TEXEFA SARL, pour le temps consacré à ma formation et le soutien dans la
réalisation des tâches qui m’ont été confiées. Bien que très occupé, il a su me transmettre
de ses connaissances et de son expertise durant le temps passé ensemble pendant et en
dehors du lieu de travail.
Mes remerciements finaux vont à l’endroit des personnes qui m'ont conseillé et soutenu
physiquement et moralement durant cette période notamment les membres de ma famille,
mes amis et camarades de promotion Bimbounza Fred et Akpovi Georges Maxwell.
2
TABLE DES ILLUSTRATIONS
Figure 1 : Logo TEXEFA Academy ................................................................................. 9

Figure 2 : Menu déroulant ............................................................................................... 10
Figure 3 : Menu linéaire .................................................................................................. 10
Figure 4 : Code de contenu et aperçu .............................................................................. 11
Figure 5 : Parts de marché CMS 2022 ............................................................................ 14
Figure 6 : Top 10 des concepteurs de logo ..................................................................... 15
3
TABLE DES MATIÈRES

Remerciements .................................................................................................................. 2
Table des illustrations ....................................................................................................... 3
Introduction ....................................................................................................................... 5
1. Présentation de l’entreprise........................................................................................ 6
1.1. Organisation et fonctionnement ......................................................................... 6
1.2. Activités.............................................................................................................. 6
2. Déroulement .............................................................................................................. 7
2.1. Cadre de travail................................................................................................... 7
2.2. Difficultés rencontrées........................................................................................ 7
3. Réalisations ................................................................................................................ 9
3.1. Programmation des sites ..................................................................................... 9
3.2. Outils utilisés .................................................................................................... 12
4. Etude comparative ................................................................................................... 14
4.1. Les outils sur le marché .................................................................................... 14
4.2. Notre choix ....................................................................................................... 16
Conclusion ...................................................................................................................... 17
Webographie ................................................................................................................... 18
4
INTRODUCTION
En vue de notre insertion professionnelle prochaine, nous sommes une nouvelle fois allés
à la recherche d’expérience en entreprise. C’est dans ce contexte que nous nous sommes
orientés vers la startup TEXEFA.
Dans le cadre de notre stage technicien, nous avons mis en avant nos compétences
techniques auprès de cette startup durant la période du 13 juillet au 14 août en la qualité
de technicien en développement web. En accord avec notre ambition prochaine de monter
une entreprise, il était intéressant de participer à l’établissement sur internet de
l’entreprise en lui concevant un site web. Quels sont alors les mécanismes de conception
d’un site web ? Et jusqu’à quel niveau avons-nous pu répondre à la concurrence ?
À travers les lignes qui vont suivre, nous expliquerons les étapes de la création d’un site
internet, présenterons les outils avec lesquels nous avons pu atteindre nos objectifs et
ainsi, nous ferons une comparaison avec les différentes offres sur le marché, la qualité de
notre rendu.
5
1. PRÉSENTATION DE L’ENTREPRISE
1.1. ORGANISATION ET FONCTIONNEMENT
TEXEFA SARL est une startup basée à Casablanca au Maroc. L’entreprise a un capital
de 100 000 Dirhams marocains, dispose d’un statut juridique de société à responsabilité
limitée à associé unique. Fondée en 2021 par Cédric Stéphane TEKOUABOU
KOUMETIO, docteur et ingénieur en systèmes d’informations, l’entreprise en est encore
à ses débuts.
1.2. ACTIVITÉS
Les activités principales de l’entreprise sont de fournir des services et de faire de

l’accompagnement dans :
• La formation professionnelle ;
• Le conseil ;
• Le coaching ;
• La formation continue ;
• La conception et le développement informatique ;
• L’import/export.
Et dans le cadre de son installation sur le net, l’entreprise projetait de lancer une
plateforme d’orientation et un site web. C’est donc pour l’élaboration de ce dernier que
nous avons été recrutés.
6
2. DÉROULEMENT
Sur cette période de quatre semaines, nous avons été confrontés à des situations qui ont
permis de développer notre esprit de gestion et notre autonomie. Notre évolution s’étant
faite dans un cadre autre que celui de l’entreprise, de ses locaux, nous avons ainsi fait
l’expérience du télétravail.
2.1. CADRE DE TRAVAIL
Notre expérience a la particularité de nous avoir fait expérimenter du travail à distance.

En effet, pour des raisons particulières, nous avons obtenu de notre entreprise d’accueil
la permission de travailler depuis notre domicile. C’était une situation non sans difficultés
car il fallait tout de même tenir des délais, apprendre à être autonome et arriver à un
résultat satisfaisant à la fois pour l’entreprise que pour nous-même. Il fallait donc dans un
premier temps transformer notre espace domestique habituel en un espace plus propice
au travail. Cela s’inscrivait dans une logique de travail de groupe car nous avons pu
réaliser notre expérience en tant que collègue de nos colocataires, eux-aussi participants
au projet de TEXEFA.
Nous étions donc dans un cadre familier, avec des personnes que nous connaissons et que
nous côtoyons au quotidien. Cela a le mérite de faciliter la communication de groupe, ce
qui n’est pas toujours le cas au début des nouvelles expériences avec des équipes
inconnues au premier contact. Pour faire comparaison avec les interactions dans notre
entreprise d’accueil lors du stage ouvrier, nous nous sommes sentis plus libre d’exprimer
un désaccord par rapport aux situations de divergences de points de vue.
2.2. DIFFICULTÉS RENCONTRÉES
Les difficultés que nous avons pu rencontrer se sont généralement articulées autour de la
communication avec le responsable en déplacement et les soucis logiciel. Elles n’ont pas
été des freins majeurs à notre évolution, mais elles ont tout de même à certains moments
ralenti notre avancement.
Le responsable de l’entreprise se trouvant momentanément dans une zone non couverte,

la chaine d’information s’en est retrouvée rallongée. Les discussions s’effectuaient
7
désormais par personnes interposées. En soi cela ne représente pas une difficulté car elle
nous a permis de devenir plus autonomes.
Pour ce qui est des problèmes logiciels, nous en avons rencontré peu fréquemment. Il
s’agissait essentiellement de bugs informatiques relevant de l’installation de l’application
locale Wordpress. En effet, cette installation locale requiert la présence d’une autre
application mais pour la gestion de bases de données. C’est dans ce but que nous avons
installé l’application WampServer. Malheureusement, pour d’autres raison logiciel, nous
n’avons pas pu bénéficier pleinement des services du serveur. C’est donc ce qui nous a
motivé à exploiter la solution en ligne.
8
3. RÉALISATIONS
De manière globale, nous avons eu à réaliser trois sites internet qui serviront de
plateforme d’apprentissage, d’orientation et de conseil pour l’association TEXEFA
Academy, un projet interne de notre entreprise d’accueil. L’objet n’était pas en lui-même
d’avoir trois sites, mais de faire plusieurs propositions utilisant différents styles, et
différentes méthodes de conception. Nous avons ainsi utilisé une méthode de codage
classique (HTML, CSS) et deux CMS1 Ceci nous a donc permis de diversifier notre
palette de connaissances et de compétences en ce qui concerne les outils sur le marché.
3.1. PROGRAMMATION DES SITES
Dans un premier temps, nous avons tenté de réaliser un essai de site en HTML et CSS à
partir du logiciel de développement Visual Studio Code. Cela constituait la réalisation la
plus technique car elle repose sur une base solide en programmation web. Le travail
s’est donc articulé en quatre étapes : réaliser un logo, dresser la barre de navigation,
déployer les pages annexes et remplir le contenu.
• Réalisation du logo
La diversification des designs des sites passait par la multiplication des essais de logo.
Au total, nous avons essayé cinq logos différents avant de retenir les deux qu’il est
possible d’observer ci-dessous.
Figure 1 : Logo TEXEFA Academy
1
CMS : Système de gestion de contenu (Content Management System)
9
Nous les avons conçus à l’aide de l’éditeur en ligne Canva sur sa version professionnelle.
Cela nous a permis de modifier les dimensions de ces images en les adaptant au format
souhaité et requis pour les bannières des sites.
• Dressage de la barre de navigation

La barre de navigation du site est un petit espace flottant sur lequel les utilisateurs peuvent
trouver un menu des rubriques contenues dans le site. Parmi les styles les plus utilisés,
nous nous sommes penchés sur deux en particulier : un menu déroulant et un menu
linéaire. Pourquoi ces choix ? Parce qu’ils permettent à l’utilisateur d’avoir une vision
aérée du site et également parce que ce style d’affichage est plus ergonomique lorsqu’on
passe à une version mobile sur smartphone.
Icone de
recherche
Icone de menu
déroulable au
Logo pointage de la
souris
Pages connexes
Figure 2 : Menu déroulant
L’image ci-dessus nous montre un aperçu annoté du menu déroulant du site programmé
en HTML et CSS. Son élaboration n’a pas nécessité la conception préalable des pages
connexes car celles-ci peuvent être ajoutées au fur et à mesure du code. Mais afin de
capitaliser notre temps, nous n’avons inséré les pages dans le menu qu’après la création
des pages.
Figure 3 : Menu linéaire
10
La figure 3 présente l’aperçu du menu utilisé dans sur le second site. Une affiche plus
classique avec un style sobre mais riche en couleur. Ceci nous amène donc à traiter du
déploiement des pages connexes.
• Déploiement des pages connexes

Le déploiement de ses pages se définit comme leur élaboration. Partant du code qui leur
est singulier, à celui qui leur est commun. En effet, en termes de présentation et
d’esthétique, toutes les pages sont les mêmes ; elles portent toutes un menu déroulant
avec un bas de page contenant les informations de contacts et un logo. La différence réside
dans le contenu. Il devait ainsi être codé individuellement.
Figure 4 : Code de contenu et aperçu
La figure 4 nous montre un aperçu de code HTML ayant servi à produire du contenu web
sur une page. C’est donc l’envers du décor de toutes les pages que nous consultons
quotidiennement.
Par la suite, nous avons ainsi procédé à la création de deux autres sites en utilisant des
logiciels de création de sites (CMS) Google sites et Wordpress. Le premier a permis de
réaliser un site utilisant une pluralité d’applications Google et le second était plutôt inspiré
du site n HTML et CSS. La portabilité du site créé via Google Sites est de loin la plus
11
optimale que ce soit pour mobile ou pour PC. Elle a été assurée directement par la
plateforme et on peut le consulter depuis l’adresse https://sites.google.com/view/texefa-
academy.
Voyons donc par la suite quelques détails sur les outils utilisés pour notre réalisation.
3.2. OUTILS UTILISÉS
Pour atteindre nos objectifs, nous nous sommes appuyés sur plusieurs logiciels et
solutions web et graphiques. Entre autres, il s’agissait de CMS, de logiciels de création
de sites, d’outils graphique, de logiciel de codage et d’hébergeurs web lesquels sont :
Canva, Visual studio code, Google sites, Wordpress, Netlify.
• Canva, outil de design graphique

Canva est un produit de l’entreprise Canva Pty Ltd. C’est un logiciel qui permet de
réaliser des illustrations, des affiches ainsi que des présentations et des documents
téléchargeables et imprimables qui peuvent également être diffusés directement par voie
électronique.
L’application en ligne dispose d’un catalogue d’images, de supports visuels et sonores
libres de droits et simples à intégrer. Fonctionnant d’après le très populaire système de
glisser-déposer, le rendu esthétique est donc manipulable par les novices dans le domaine.
La plateforme st distribuée sous deux versions : une gratuite pour réaliser des designs
simples et une payante plus flexible et riche en contenu. C’est un outil que nous
recommanderions volontiers à d’autres étudiants.
Durant notre élaboration du site, nous avons opté pour un essai de quelques jours de la
version pro, ce qui a été plus intuitif quant au style de logo et à la modification des
dimensions. Ce qu’il n’est pas possible d’effectuer avec la version de base.
• Visual studio code

Visual Studio Code est un éditeur de texte, plus précisément un logiciel de programmation
supportant une grande diversité de langages à savoir Java, Javascript, C++, HTML et
Node.js pour ne citer que ceux-là. C’est une application open-source très prisée en raison
de son aspect de coloration du texte et d’auto-complétions. Il est donc très intuitif et
permet de s’améliorer au fur et à mesure comme lorsqu’on est guidé par un enseignant.
12
• Google sites
Google Sites est une application de la firme Google, ajoutée en 2008 à la G suit comptant
Drive, Play, Gmail et autres. Permettant la création de sites web, sa version précédente
s'appelait Google Page Creator.
Son accessibilité se fait à partir d'un compte Google. Tous les utilisateurs sont donc aptes
à faire des sites vitrines en intégrant les éléments proposés par le catalogue de
l’application. Et le plus intéressant est la liaison avec les autres applications de la suite
Google. Il
• Wordpress
Wordpress est un CMS gratuit et open-source permettant la conception, la réalisation et
l’hébergement de sites web. C’est l’un des plus populaires du domaine avec plus de 500
sites mis en ligne quotidiennement durant cette année 2022. L’outil est disponible à
l’installation locale (pour peu que l’on dispose d’un logiciel de gestion de base de
données) et d’une version d’édition en ligne.
Nous sous sommes servis de la version online, mais le rendu n’était pas encore au niveau
d’un professionnel confirmé. Bien que cela ait pu nous faire gagner en connaissances sur
l’application.
• Netlify
Netlify est à la base une entreprise proposant des hébergements pour les sites web
statiques. Ayant codé un site en HTML et CSS, afin de faire la présentation du site pour
validation, nous avons proposé une exposition en ligne du site. Celle-ci a ainsi été mise
sur le web par téléchargement du dossier de codage sur le serveur Netlify.
13
4. ETUDE COMPARATIVE
4.1. LES OUTILS SUR LE MARCHÉ
➢ Outils de développement Web

Les solutions de développement web sont multiples sur le marché. Parmi elles, on
retrouve de grands noms tels que Wordpress, Wix ou Drupal qui fait d’ailleurs partie des
plus anciens, arrivé en 2001, peu après l’essor des CMS. À eux seuls, ces trois outils
représentent 70% des parts de marché en 2022 comme on peut le voir sur le graphe ci-
dessous.
Parts de marché des CMS 2022

Autres
19%
Drupal
2%
Wix
Squarespace 3%
3%
Joomla
3% Wordpress
Shopify 65%
6%
Wordpress Shopify Joomla Squarespace Wix Drupal Autres
Figure 5 : Parts de marché CMS 2022
On peut remarquer sur ce graphe que le CMS le plus utilisé est Wordpress avec 65% de
parts. Il est aussi bien utilisé par les professionnels que les étudiants et grâce à son
hébergement intégré, il bénéficie du double statut de CMS et de logiciel de
développement web. Les éléments cités précédemment font partie des raisons du succès
de Wordpress et à celles-là se rajoute le fait que l’outils soit léger à déployer et son large
catalogue d’extensions parmi les plus appréciées. Notons également qu’il ne sélectionne
que l’essentiel afin d’être plus maniable et optimal pour les utilisateurs.
14
➢ Outils graphiques
En ce qui concerne les outils graphiques, les propositions sont nombreuses et on peut en
trouver un classement des 10 meilleurs en 2022 réalisé par la plateforme 99design.fr.
Résultat Facilité
Personnalisation final Prix d’utilisation
1. TailorBrands Moyenne Moyenne $$$ ★★★½
2. Logo Makr Difficile Forte $ ★★★½
3. Looka Facile Moyenne $$ ★★★
4. Brandmark Facile Faible $$ ★★★
5. Designhill Facile Faible $$ ★★★
6. Namecheap Facile Moyenne Gratuit ★★½
7. Ucraft Facile Forte $ ★★½
8. Logaster Facile Moyenne $$ ★★
9. Canva Facile Faible Gratuit ★★
10. Hatchful Facile Moyenne Gratuit ★★

©99design.fr 2022
Figure 6 : Top 10 des concepteurs de logo
On retrouve donc dans la figure 6 un classement avec l’évaluation de la simplicité

d’utilisation des outils, le prix, la qualité du résultat et le niveau de personnalisation. En
tête, nous retrouvons TailorBrands qui est une plateforme de création d’entreprise dont
les services contiennent la conception d’un logo. Et à la neuvième place, se trouve notre
outils Canva mais en sa version gratuite. Sans aucun doute, sa version pro serait mieux
classée.
15
4.2. NOTRE CHOIX
Quels ont été nos critères de sélection lors du choix des applications que nous avons
utilisées ?
Notre expérience se déroulant dans le cadre de la mise en lumière d’une entreprise

naissante, les critères principaux qui ont guidé notre réflexion étaient : le coût, la
maniabilité et la qualité du rendu. La qualité n’est pas immédiatement définie à partir du
matériel utilisé, mais plutôt par les possibilités que permettent ce dernier.
Nous avons dans un premier temps sélectionné des outils libres d’utilisation, à bas prix
voir même gratuit afin de minimiser la dépense en ressources. Seule la version pro de
Canva était payante à raison de 6,49 US$ par mois. Mais en bénéficiant d’un essai gratuit
de trois jours, nous avons pu en exploiter les possibilités à moindre coût. Avec un budget
similaire, nous aurions pu utiliser un outil aussi intéressant que Logo Makr pour un rendu
quasiment similaire. Il serait donc avantageux pour la suite d’investir sur une courte
période et de capitaliser en termes de temps pour en profiter au maximum.
En ce qui concerne l’aspect maniabilité des logiciels que nous avons utilisés, ils sont tous
simples d’utilisation dès le départ et il existe une base de données fournie de supports
d’aide à l’apprentissage. Pour peu que l’on lance la recherche sur YouTube du sujet de
notre blocage, nous aurons un large choix de solutions adaptées. L’avantage se trouve au
niveau de la simplicité des manipulations. La difficulté peut alors résider dans le cas de
Visual Studio, dans nos connaissances en programmation car les erreurs sont directement
signalées par l’interface.
Enfin, la qualité du rendu a été déterminante dans la sélection finale de l’outil. En effet,
il était important d’observer un rendu satisfaisant après quelques manipulations pour
pouvoir nous rassurer quant à nos possibilités. Globalement, nous avons été assez
satisfaits du résultat final et particulièrement de celui produit par Google Sites qui est le
plus aboutit.
16
CONCLUSION
Au terme de ces quelques semaines en tant que technicien au sein de TEXEFA, nous nous
trouvons enrichis de connaissances et de compétences.
Cette expérience fut riche en enseignements et en apports sur le plan technique et
organisationnel. Nous avons beaucoup appris en autodidacte mais également des
recommandations de nos ainés. En termes de collaboration, nous nous sommes bin sentis
dans l’environnement d’une startup naissante et cela nous a donné un aperçu de l’état
d’esprit dans lequel in se trouve dans la peau d’un entrepreneur. Grande fut donc la joie
d’avoir eu l’opportunité de participer au projet TEXEFA Academy.
Nous ne sommes plus qu’à quelques pas de la diplomation, mais les enseignements seront
encore nombreux et enrichissants. Nous avons pu améliorer certaines de nos lacunes et
prochainement, nous irons renforcer au près d’une autre entreprise, nos acquis, en tant
qu’élèves ingénieurs.
17
WEBOGRAPHIE
• Tutoriels CSS
https://www.w3schools.com/css/default.asp
• Parts de marchés des CMS en 2022
https://www.leptidigital.fr/webdesign/parts-marche-cms-web-e-commerce-20255/
• Comparatif des meilleurs CMS 2022
https://www.journaldugeek.com/hebergeur/faq/cms/
• Histoire de Drupal
https://www.adimeo.com/blog/la-merveilleuse-petite-histoire-de-drupal
18

Rapport de Stage Technicien

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport de Stage Technicien

Transféré par

Droits d'auteur :

Formats disponibles

Rapport d’expérience professionnelle de

type « Technicien » : Assistant en

Tuteur Entreprise Tuteur EIGSI Étudiant

TEKOUABOU Stéphane EL ATMANI Yassine NGOMA Christopher

ctekouaboukoumetio@gmail.com Yassine.elatmani@eigsica.ma Cngoma312@gmail.com

Je remercie également mon maitre de stage, M. Tekouabou Stéphane et chef de

TABLE DES ILLUSTRATIONS

Figure 1 : Logo TEXEFA Academy ................................................................................. 9

TABLE DES MATIÈRES

1.1. ORGANISATION ET FONCTIONNEMENT

Les activités principales de l’entreprise sont de fournir des services et de faire de

2.1. CADRE DE TRAVAIL

Notre expérience a la particularité de nous avoir fait expérimenter du travail à distance.

2.2. DIFFICULTÉS RENCONTRÉES

Le responsable de l’entreprise se trouvant momentanément dans une zone non couverte,

3.1. PROGRAMMATION DES SITES

Figure 1 : Logo TEXEFA Academy

• Dressage de la barre de navigation

Figure 2 : Menu déroulant

Figure 3 : Menu linéaire

• Déploiement des pages connexes

Figure 4 : Code de contenu et aperçu

3.2. OUTILS UTILISÉS

• Canva, outil de design graphique

• Visual studio code

4.1. LES OUTILS SUR LE MARCHÉ

➢ Outils de développement Web

Parts de marché des CMS 2022

Wordpress Shopify Joomla Squarespace Wix Drupal Autres

Figure 5 : Parts de marché CMS 2022

1. TailorBrands Moyenne Moyenne $$$ ★★★½

2. Logo Makr Difficile Forte $ ★★★½

3. Looka Facile Moyenne $$ ★★★

4. Brandmark Facile Faible $$ ★★★

5. Designhill Facile Faible $$ ★★★

6. Namecheap Facile Moyenne Gratuit ★★½

7. Ucraft Facile Forte $ ★★½

8. Logaster Facile Moyenne $$ ★★

9. Canva Facile Faible Gratuit ★★

10. Hatchful Facile Moyenne Gratuit ★★

Figure 6 : Top 10 des concepteurs de logo

On retrouve donc dans la figure 6 un classement avec l’évaluation de la simplicité

4.2. NOTRE CHOIX

Notre expérience se déroulant dans le cadre de la mise en lumière d’une entreprise

• Parts de marchés des CMS en 2022

• Comparatif des meilleurs CMS 2022

Vous aimerez peut-être aussi