c'est un rapport de stage bien organisé que j'ai conçu moi mêmle

1. REPUBLIQUE DU BENIN
**********
MINISTERE DES ENSEIGNEMENTS
SECONDAIRETECHNIQUE ET DE LA FORMATION
PROFESSIONNELLE (MESTFP)
**********
DIRECTION DEPARTEMENTALE DES ENSEIGNEMENTS
SECONDAIRE TECHNIQUE ET DE LA FORMATION
PROFESSIONNELLLE DU BORGOU (DDESTFP/B)
**********
LYCEE TECHNIQUE ET PROFESSIONNEL DE
TCHAOUROU
FILLIERE : Développement Web Mobile (DWM)
Niveau : 2nde
DWM
Réalisée par :
Géovanny HOUNTONHADJA
Sous la direction de :
Maitre de stage : Enseignant (e) :
M. Nicodème CHANCOUIN Mme Colette ADEKOUN
Année Académique : 2021-2022
RAPPORT DE FIN STAGE DU 31 JANVIER AU 25
FEVRIER 2022

2. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
Sommaire
REMERCIERMENTS…………………………………………Page 02
INTRODUCTIONS……………………………………………Page 03
I-PRESENTATION DU LIEU DE STAGE
Historique et organigramme………………………………Page 04
Domaine d’intervention……………………………………Page 04
II-DEROULEMENT DE STAGE……………………… Page 05
Activités menées………………………………………page06-12
Acquis stage…………………………………………… page 13
III-DIFFICULTES RENCONTREES ET SUGGESTIONS
Difficultés rencontrées…………………………………… Page 15
Suggestions………………………………………………page 15
CONCLUSION………………………………………… page 15
ANNEXE……………………………………………… pages 16-18

3. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
REMERCIEMENTS
Au terme de notre stage, nous adressons nos sincères remerciement à :
- L’Eternel Dieu le Tout puissant pour son amour, sa riche
protection et sa grâce qu’il n’a cessé de nous combler depuis notre
arrivé sur terre ;
- Tout le corps administratif du Lycée Technique et Professionnel
de Tchaourou pour son savoir-faire ;
- Nos différents enseignants, Mme Collette ADEKOUN et M.
Venceslas SOGLO pour leur contribution dans notre maitrise des
bases de l’informatique ;
- Tout le personnel de l’établissement EtriLabs pour l’accueil
chaleureux qu’il nous a réservé à notre arrivé et pour les diverses
réponses trouvées à nos préoccupations relatives à ce vaste
domaine qu’est le Développement Web et Mobile ;
- Mes parents pour avoir toujours été là dans toutes mes besoins ;
- Toutes les personnes qui de loin ou de près ont contribuer au bon
déroulement de notre stage.

4. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
INTRODUCTION
Dans le cadre de la formation en Développement Web et Mobile, tous
les apprenants de la promotion seconde du lycée technique et
professionnel de Tchaourou doivent effectuer un stage académique
d’immersion dans une structure intervenant dans leur domaine de
formation. C’est dans ce cadre qu’un groupe six élèves, auquel
j’appartiens, a été envoyé à Etrilabs, sise au quartier Zongo de Parakou
pour une durée de quatre semaines allant du 31 janvier au 25 février
2022. L’objectif de ce premier stage est de permettre aux apprenants de
la seconde de mettre en place un site web en utilisant les langages
HTML et le CSS.
Poursuivant les études dans le domaine du développement web, ce
stage fut pour nous les apprenants une opportunité de mettre en
application les compétences acquises lors de la formation, d’acquérir de
nouvelles notions et d’avoir une première expérience concrète dans le
domaine.

5. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
I- PRESENTATION DU LIEU DE STAGE
Historique et Organigramme
A-Historique
EtriLabs est un écosystème d’entrepreneurs créateurs de solutions
innovantes. Il existe depuis 10 ans. EtriLabs offre plusieurs services : le co-
working, l’accompagnement aux entrepreneurs (incubation et l’accélération de
startups), des formations sur les métiers du numérique, le conseil en
marketing/communication, des solutions sur mesure aux entreprises. La
communauté comprend des entrepreneurs, des graphites, des développeurs webs
et mobiles, des spécialistes du marketing, et ils ont actuellement trois sites : un à
Cotonou (Bénin), un à Parakou et un à Dakar (Sénégal).
B-Organigramme
Toute société dispose d’une organisation interne lui permettant de remplir
ses fonctions. Bien qu’elle ne soit pas imposante, Etrilabs Parakou ne déroge pas
à cette règle. Elle a donc à sa tête M. Nicodème CHANCOUIN ADJOVI (Hub
coordinator).
Une Community Manager MmeReineGOLLO quis’occupedela communauté,
des évènements et de la communication.
Et un Lead Technique assuré encore par M. Nicodème CHANCOUIN
ADJOVI. Il est chargé de créer et de coordonner une communauté de
développeurs.
Domaine d’intervention
Pour atteindre ses objectifs, Etrilabs s’est donné pour mission entre autres de :
- promouvoir une culture de l'entrepreneuriat axée sur l'innovation, la créativité
et le partage ;
- instaurer un espace favorable à l'émergence de solutions d’envergure
mondiale ;
- organiser beaucoup plus de formation pour les jeunes et les enfants ;
- organiser des évènements regroupant les plus grands leaders dunumérique au
Bénin et les apprenants ;
- développer le code-working.

6. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
I- DEROULEMENT DU STAGE
Activités menées
MODULE 1 : Langage et structure de base d’un site web
HTML 5 : (HyperText Markup Language) : il a fait son apparition dès
1991 lors du lancement du Web. Son rôle est de gérer et organiser le
contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché
sur la page : du texte, des liens, des images. Vous direz par exemple : «
Ceci est mon titre, ceci est mon menu, voici le texte principal de la page,
voici une image à afficher, etc. ». C'est la dernière version. Encore assez
peu répandue, elle fait beaucoup parler d'elle car elle apporte de
nombreuses améliorations comme la possibilité d'inclure facilement des
vidéos, un meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc. C'est cette version que nous
allons découvrir ensemble.
CSS 3 : (Cascading Style Sheets, aussi appelées Feuilles de style) : le
rôle du CSS est de gérer l'apparence de la page web (Agencement,
positionnement, décoration, couleurs, taille du texte…). Ce langage est
venu compléter le HTML en 1996. C’est la dernière version, qui apporte
des fonctionnalités particulièrement attendues comme les bordures
arrondies, les dégradés, les ombres, etc.
Les catégories et différents sites qui existent
 La site « carte de visite » Il s'agit de la forme la plus basique de
site web. ...
 Le site vitrine. ...
 Le site de e-commerce. ...
 Le site mobile. ...
 L'application web. ...
 Le site communautaire. ...
 Le blog. ...
 Le site spécifique, sur mesure.

7. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
L’architecture d’un site web
Une architecture de site web est un document organisant la structure de
votre site internet elle met en avant la hiérarchisation de l'information
pour les moteurs de recherche.
Élaborer la structure de son site : les pages élémentaires
Globalement, un site internet professionnel classique va présenter les
pages suivantes :
Page d’accueil : c’est la plus importante. Il s’agit de la porte d’entrée
de votre site.
Page “Offres” : pour présenter vos produits ou services.
Page “Contact” : c’est la page qui vous permettra de faire le lien avec
vos visiteurs.
Page “À propos” : pour présenter votre structure.
Autres pages, selon vos besoins spécifiques
La base en html5
Les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à
l'aide des précédentes versions HTML 4 et XHTML 1.x.
Rétrocompatibilité oblige. On y retrouve donc un doctype suivi des
éléments les plus courants : <html>, <head>, <title>, <meta>, <link>,
<script> et <body>..
<!doctype html>
Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours -
pour les anciens navigateurs - de rester dans le mode d'interprétation
conforme aux standards et d'éviter le mode quirks. On peut remarquer
qu'il n'y a pas d'allusion à un quelconque numéro de version. Son rôle
est toujours de préciser quel est le type de document qui va suivre, afin
de permettre au navigateur de savoir quel langage de la vaste famille
SGML il devra interpréter.
L'élément racine <html >

8. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
C'est lui qui va recueillir les deux principaux éléments de la hiérarchie
: <head> et <body>.
Les fameux <head> et <body>
À ce niveau, le codeHTML peut être divisé en deux parties : l'en-tête située entre
les balises <head> et </head>, qui regroupe toutes les méta-informations, c'est-à-
dire les données qui ne sont pas représentées directement à l'écran dans le rendu
du document, mais qui lui sont tout de même liées : le titre dans <title>
(extrêmement recommandé), les autres méta-informations variées (facultatives :
mots-clés, description générale de la page) dans zéro ou plusieurs <meta>, et
éventuellement <link>, <script> ou <style>.
La deuxième partie comprend le corps à proprement parler, c'est-à-dire <body>.
On y retrouvera tout le reste du contenu HTML, structuré par des balises variées
- selon ce que l'on aura à y placer - et dont l'apparence sera affectée par les styles
CSS chargés dans <link> et/ou <style>
L'attribut charset (sur <meta>)
Préciser l'encodage des caractères est primordial pour exploiter la bonne page de
codeet ne pas se retrouver avec les caractères spéciaux ou accentués. Le choix de
l'UTF-8 est désormais préconisé par le W3C pour tous les protocoles échangeant
du texte sur internet (dont HTML).
<meta charset="utf-8">
Onretrouvera donc très souventcecodagedecaractères, par contre ilfaut toujours
veiller à ce que l'éditeur permettant de coderen HTML (que ce soit un IDE tout-
en-un ou un simple éditeur de texte) enregistre le fichier avec le bon encodage, et
non en Latin-1 (alias ISO-5589-1) ou ANSI si la balise <meta> in-dique UTF-8.

9. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
Onretrouvera donc très souventcecodagedecaractères, par contre ilfaut toujours
veiller à ce que l'éditeur permettant de coderen HTML (que ce soit un IDE tout-
en-un ou un simple éditeur de texte) enregistre le fichier avec le bon encodage, et
non en Latin-1 (alias ISO-5589-1) ou ANSI si la balise <meta> indique UTF-8.
<link rel="stylesheet" href="style.css">
Éléments de section <section>, <article>, <header>, <footer>, <nav> et <aside>
Éléments <figure> & <figcaption>
Éléments média <audio> et <video> complétés par <source>
Élément <canvas>
Éléments <meter>, <output> et <progress>
Élément <time> et <mark>
Et tous les autres, que l'on peut retrouver dans une liste complète maintenue par
le W3C : HTML :
La mise en forme avec css3
Le CSS pour Cascading Style Sheets, est un langage informatique utilisé sur
Internet pour la mise en forme de fichiers et de pages HTML. On le traduit en
français par feuilles de style en cascade.
Apparu dans les années 1990, le CSS se présente comme une alternative à la mise
en forme via des balises, notamment HTML. Un peu plus complexe à maîtriser,
il permet un gain de temps considérable dans la mise en forme d'une page web par
rapport à ces balises. Grâce au CSS, vous pouvez en effet appliquer des règles de
mise en forme (titrage, alignement, polices, couleurs, bordures, etc.) à plusieurs
documents simultanément
Déroulement du projet
La réalisation d’un site web en utilisant HTML 5 et en y incluant des pages
utilisant Bootstrap (Framework css). Le contenu du projet doit permettre de
présenter la formation ainsi que le contenu de la partie HTML/CSS mais ausside
servir devitrine au travail dontonestcapable. Il doitprévoir d’yintégrer les futurs
cours et travaux des autres langages ainsi qu’une présentation des logiciels et
technologies que l’on a utilisées. Le site devra contenir également un curriculum
vitae ainsi qu’un formulaire de contact. Description des logiciels utilisés : Le
projet a été réalisé sur sublime text 4 est un éditeur qui supporte de nombreux
langages dynamiques (Perl, PHP, Python, Ruby, TCL, JavaScript, CSS, 10
HTML et XML) et de nombreux modèles de programmation (Django, Template-
Toolkit, etc.). Basée sur la plateforme de développement Komodo IDE, cette
application comporte de nombreux outils d'édition très pratiques tels que la
complétion et l'indentation automatiques, le surlignage syntaxique, le vérifica-teur

10. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
et le comparateur de fichiers, l'enregistrement de macros. Pour la mise en page et
le style j’ai utilisé le framework CSS deBootstrap, il offre du codeCSS déjà bien
organisé et structuré ainsi que des plugins jquery pour enrichir les pages web, il
permet d’accélérer le développement «front-end». Charte gra-phique : Pour la
palette de couleur j’ai utilisé un fond blanc pourle contenu, un bleu pastel pour le
haut de page et un gris clair/blanc cassé pour le fond de page. J’ai choisi des
couleurs neutres et qui n agresse pas les yeux. Nuancier : Concernant la mise en
page du site, encore une fois j’ai choisi quelque chose de très simple, un entête
qui contient le nom de la formation, une partie latérale permettant la navigation,
une partie centrale pour le contenu du site et un bas de page avec les logos du
greta et de la région et permettant une navigation rapide ainsi que d’autres
informations.
MODULE 2 : Pratique (réalisation des tem plates)
Dans le but d’approfondir notre apprentissage en développement web et mobile,
au cours de notre stage, nous avons été amené à réaliser plusieurs templates en
guise de pratique.
Premier template réalisé
Comme instruction, nous devons réaliser ce premier template avec uniquement
que du html et css.

11. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
Deuxième template réalisé
Doit également faire avec html et css uniquement

12. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
Cela est une barre de recherche que j’ai faire avec le html et css
Troisième projet réalisé
Pour bien acquérir mes notions moi-même j’ai pu réaliser un site web
dans laquelle j’ai utilisé le html, css et le java script le site se présente
comme suit :

13. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA

14. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
Acquis du stage
Au cours de notre formation, nous avons beaucoup appris encore sur nos
connaissances antérieures. Ces nouvelles connaissances vont nous permettre
d’améliorer nos pages et sites web que nous allons développer. Voici présentées
ci-dessous quelques nouvelles connaissances :
Flexbox
Il existe plusieurs techniques pour positionner les blocs sur la page. Flexbox
est la technique la plus récente et de loin la plus puissante, que je vous
recommande d'utiliser. Le principe de Flexbox est d'avoir un conteneur, avec
plusieurs éléments à l'intérieur. Avec display : flex; sur le conteneur, les éléments
à l'intérieur sontagencés en modeFlexbox (horizontalement, pardéfaut). Flexbox
peut gérer toutes les directions. Avec flex-direction, on peut indiquer si les
éléments sont agencés horizontalement (par défaut) ou verticalement. Cela définit
ce qu'on appelle l'axe principal. L’alignement des éléments se fait sur l'axe
principal avec justify-content, et sur l'axe secondaire avec align-items. Avec flex-
wrap, on peut autoriser les éléments à revenir à la ligne s'ils n'ont plus d'espace.
S'il y a plusieurs lignes, on peut indiquer comment les lignes doivent se répartir
entre elles avec align-content. Chaque élément peut être ré agencé en CSS avec
ordre (pas besoin de toucher au codeHTML !). Avec la super-propriété Flex, on
peut autoriser nos éléments à occuper plus ou moins d'espace restant.

15. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
II- DIFFICULTES RENCONTREES ET SUGGESTIONS
Difficultés rencontrées
Au début des stages moi en particulier je me ne retrouvais dans les activités
comme : l’indentation des codes, je faisais la confusion entre les « class » et les
« id » je ne maitrisais pas aussi les codes de css. Mais au fil du temps, avec la
correction de mon maitre de stage qui m’a aidé à revoir mes erreurs et de les
respecter.
Suggestions
Nous suggèrerions que les responsables fixent aux stagiaires dans l’avenir des
horaires fixes d’arrivée afin de leur donner le pli de la ponctualité.

16. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
CONCLUSION
Le stage en Développement Web et Mobile effectué au sein de Etrilabs Parakou
dans l’équipe deprogrammation, nous a permis de nous familiariser avec la réalité
du terrain. Ainsi, nous avons pu au cœur de ce stage, améliorer notre niveau en
Html et css, en gros dans la réalisation d’un site web statice, nous avons pu aussi
acquérir des notions sur le travail en équipe, les bonnes manières pour faire des
recherches ponctuelles pour résoudre un problème et sur comment fonctionne un
Tech-hub. Ce fut une expérience exceptionnelle pour nous.

17. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA
ANNEXE

18. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA

19. RAPPORT DE STAGE
Réalisé parGéovannyHOUNTONHADJA