REMERCIEMENT.docx

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 : 2
nde
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é par Géovanny HOUNTONHADJA

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é par Géovanny HOUNTONHADJA


REMERCIEMENT S
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é par Géovanny HOUNTONHADJA

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é par Géovanny HOUNTONHADJA


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 Mme Reine GOLLO qui s’occupe de la 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 du numérique au
Bénin et les apprenants ;
- développer le code-working.

6. RAPPORT DE STAGE
Réalisé par Géovanny HOUNTONHADJA

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é par Géovanny HOUNTONHADJA

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é par Géovanny HOUNTONHADJA

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 code HTML 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
code et 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">
On retrouvera donc très souvent ce codage de caractères, par contre il faut toujours
veiller à ce que l'éditeur permettant de coder en 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é par Géovanny HOUNTONHADJA

On retrouvera donc très souvent ce codage de caractères, par contre il faut toujours
veiller à ce que l'éditeur permettant de coder en 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 aussi de
servir de vitrine au travail dont on est capable. Il doit prévoir d’y inté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é par Géovanny HOUNTONHADJA

et le comparateur de fichiers, l'enregistrement de macros. Pour la mise en page et
le style j’ai utilisé le framework CSS de Bootstrap, il offre du code CSS 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 pour le 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é par Géovanny HOUNTONHADJA















Deuxième template réalisé
Doit également faire avec html et css uniquement

12. RAPPORT DE STAGE
Réalisé par Géovanny HOUNTONHADJA


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é par Géovanny HOUNTONHADJA

14. RAPPORT DE STAGE
Réalisé par Géovanny HOUNTONHADJA


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 sont agencés en mode Flexbox (horizontalement, par dé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 code HTML !). 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é par Géovanny HOUNTONHADJA

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é par Géovanny HOUNTONHADJA

CONCLUSION
Le stage en Développement Web et Mobile effectué au sein de Etrilabs Parakou
dans l’équipe de programmation, 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é par Géovanny HOUNTONHADJA

ANNEXE

18. RAPPORT DE STAGE
Réalisé par Géovanny HOUNTONHADJA

19. RAPPORT DE STAGE
Réalisé par Géovanny HOUNTONHADJA