Rapport Final 3

1.
Introduction
Objectif du Rapport
Ce rapport présente le développement d'un site web conçu par notre groupe pour une
petite entreprise, dans le cadre de notre projet universitaire à l'ISIPA. Ce document a
pour but de décrire le processus de création du site, les choix techniques effectués,
ainsi que les défis rencontrés et les solutions apportées.
Contexte
Dans le cadre de notre formation en développement web, notre groupe a été chargé de
concevoir et de réaliser un site web pour une petite entreprise de pharmaceutique. Ce
projet avait pour objectif principal de créer une application web fonctionnelle, en
utilisant exclusivement les langages HTML et CSS. Le site devait répondre à des
exigences spécifiques : offrir une présentation claire et attrayante des informations de
l’entreprise et inclure un total de cinq pages.
Cette mission visait non seulement à mettre en pratique nos compétences en

développement web, mais aussi à développer une solution adaptée aux besoins réels
d'une entreprise, tout en respectant des contraintes techniques définies.
Dans les points qui suivront nous verront comment notre site web a ete concu, nous
expliquerons nos choix et les defsi que nous avons rencontres pendant notre travail.
2.Conception pour les Pages Web Wewatoo

Notre projet se résume en 5 pages principales qui sont:
a. Accueil (Page principale)

b. Listes des medicaments (Repertoire de nos produits pharmaceutiques)
c. Ajouter un medicament (Zone permettant de rajouter un medicament)
d. Qui sommes nous? (Description des membres du groupe)
e. Contact (Zone d’echange entre l’utlisateur et notre l’equipe)
N.B: Dans la description du site nous avons omis volontairement les structures
fondamentales du HTML (Doctype, head...) pour nous concentrez sur les points
important du projet.
A. Accueil (Page principales)

Dans cette premiere pages nous avons deux elements qui constituent notre page
d’accueil :
1. Barre de navigation dynamique et interactive : Qui permet a l’utilisateur de

naviguer a travers les differents panels du site.
STRUCTURE HTML


<header>
<div class="container">
<p class="message">BIENVENUE A LA PHARMACIE EN LIGNE WEWATOO
!</p>
<nav>
<ul>
<li><a href="wewatoo.html">Accueil</a></li>
<li><a href="vetements.html">Liste des
medicaments</a></li>
<li><a href="ajouter.html">Ajouter un
medicament</a></li>
<li><a href="membres.html">Qui sommes-nous ?</a></li>
<li><a href="contact.html">Contacts</a></li>
</ul>
</nav>
</div>
</header>
CODE HTML
/* Réinitialisation des marges et des paddings */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style général du corps */

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Conteneur principal */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* En-tête */
header {
background: #333;
color: #fff;
padding: 20px 0;
}
header .site-name {
font-size: 2em;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
header .message {
font-size: 1.2em;
display: flex;
}
header .search-form {
display: flex;
}
header .search-form input[type="text"] {

padding: 10px;
border: none;
border-radius: 5px;
width: 220px;
}
header nav ul {
list-style: none;
padding: 0;
display: flex;
}
header nav ul li {
display: inline;
border-radius: 15px;
margin-right: 15px;
display: flex;
cursor: pointer;
transition-duration: 0.8s all ease;
}
header nav ul li :hover{

background-color: white;
color: black;
}
header nav ul li a {
color: #fff;
text-decoration: none;
display: flex;
}
2. Message d’accueil : Les messages d'accueil orientent les utilisateurs et leur

donnent une première impression du site. Ils fournissent aussi des informations clés et
incitent à l'engagement. D'ou notre volonte de mettre en fond l’image d’une famille en
bonne sante et une pharse accrocheuse pour donner une bonne image du site et de
nos produits
STRUCTURE HTML


<section class="home-section">
<h2>Votre bien etre est notre priorite</h2>
<p>Accédez à des médicaments sans ordonnance de qualité en un
clic – rapide, sûr et à votre service 24/7.</p>
<img src="c:\Users\HP\Downloads\ecran.jfif" alt="Image
d'accueil" class="home-image">
</div>
</section>
CODE CSS
/* Section Accueil */
.home-section {
padding: 20px 0;
text-align: center;
}
.home-section .home-image {
width: 100%;
height: auto;
}
3.footer
STRUCTURE HTML


<footer>
<p>© 2024 Wewatoo. Tous droits réservés.</p>
</footer>
CODE CSS
footer {
background-color: #333; /* Couleur de fond sombre pour le footer */
color: #fff; /* Couleur du texte en blanc pour le contraste */
padding: 20px 0; /* Espacement vertical */
text-align: center; /* Alignement du texte au centre */
}
B. Listes des medicaments (Repertoire de nos produits

pharmaceutiques)
Cette 2e page contient les produits pharmaceutique de notre site internet. Dans
cette section nous avons deux catégories de médicaments ( les médicaments en
comprimes, et les crèmes pharmaceutique).
Chaque medicament est presente individuellement dans une carte dans laquelle on
retrouve l’image du medicament le nom du medicament et l’utilité du medicament .
En appuyant sur le bouton “Plus d’infos ” l’utilisateur a accès a plus d’informations

concernant le médicament selectionne (la quantité disponible en stock, le nombre de
commandes pour ce produit...)
STRUCTURE HTML
<div class="carte">
<img src="c:\Users\HP\Downloads\paracetamol.jfif" alt="Nom Médicament
1">
<h3>Paracétamol 500mg</h3>
<p>Utilisé pour soulager la douleur légère à modérée et réduire la
fièvre.</p>
<p class="prix">€5.00</p>
<a href="info-gelule1.html" class="bouton">Plus d'Infos</a>
</div>
CODE CSS
.medicaments {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.categories {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 20px;
}
.categorie {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
h2 {
border-top: none;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
.carte {
width: 40%;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 10px 0;
padding: 15px;
text-align: center;
}
.carte img {
max-width: 100%;
border-radius: 8px;
}
.carte h3 {
margin: 10px 0;
}
.prix {
color: #4CAF50;
font-size: 18px;
margin: 10px 0;
}
.bouton {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
}
.bouton:hover {
background-color: #45a049;
}
C. Ajouter un medicament (Zone permettant de rajouter un

medicament)
La page “Ajouter un vêtement” nous permet d’enregistrer un médicament que l’on
veut voir apparaitre dans le site au moyen d’un formulaire. Le processus est simple et
compréhensible pour n’importe qui.
Les étapes pour rajouter un médicament sont les suivantes:
1. Mettre le Nom du médicament
STRUCTURE HTML
<div class="form-group">
<label for="nom">Nom du medicament :</label>
<input type="text" id="nom" name="nom" required>
</div>
2. Mentionner la Categorie du medicament
<label for="categorie">Catégorie :</label>
<select id="categorie" name="categorie" required>
<option value="hommes">Medicament en comprime</option>
<option value="femmes">Creme pharmaceutique</option>
</select>
</div>
3. Indiquer la quantité qui est en réserve
<label for="quantite">Quantité :</label>
<input type="number" id="quantite" name="quantite" required>
</div>
4. La description du médicament ou l’utilité du médicament
<label for="description">Description :</label>
<textarea id="description" name="description" required></textarea>
</div>
5. Copier l'URL de l’image du médicament
<label for="image">Image (URL) :</label>
<input type="url" id="image" name="image" required>
</div>
6. Appuyer sur le bouton “Ajouter” pour enregistrer le nouveau médicament

dans le site
<input class="submit" type="submit" value="Ajouter" />
STRUCTURE CSS
/* Section Ajouter */
.ajouter-section {
padding: 20px 0;
}
.ajouter-form {
display: flex;
gap: 15px;
}
.ajouter-form .form-group {
display: flex;
}
.ajouter-form .form-group label {

margin-bottom: 5px;
}
.ajouter-form .form-group input,

.ajouter-form .form-group select,
.ajouter-form .form-group textarea {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.submit {
padding: 1rem 0.75rem;
width: 100%;
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 3rem;
background-color: gray;
color: white;
border: none;
cursor: pointer;
transition: all 300ms;
font-weight: 600;
font-size: 0.9rem;
}
.submit:hover {
background-color: rgb(99, 219, 99);
color: gray;
}
D. Qui sommes-nous? (Description des membres du groupe)

Cette page est dédier a la présentation et la description de toutes les personnes ayant
contribuer d’une manier ou d’une autre a la réalisation de ce site du début jusqu’a la fin
Pour ce faire nous avons utiliser le même système de carte que dans la liste des
médicaments , le code est légèrement ajuster parce que les exigences sont moins ici et
c’est ce qui nous permet d’obtenir ce résultat.
STRUCTURE HTML
<section class="container">
<h2>Qui sommes-nous ?</h2>
<div class="membres">
<div class="membre">
<img src="c:\Users\HP\Pictures\grace.JPG" alt="Personne 1">
<div class="info">
<h3>NSENGA UMBA GRACE</h3>
<p>08 12 34 56 78</p>
</div>
</div>
</section>
CODE CSS
.membres {
display: flex;
flex-wrap: wrap;
margin-left: 0px;
margin-bottom: 8px;
}
.membre {
width: 210px;
height: 320px;
background: #fff;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
margin-right: 15px;
margin-top: 8px;
}
.membre img {
width: 200px;
height: 220px;
}
.info {
padding: 15px;
}
.info h3 {
margin: 1px 0;
font-size: 1em;
color: #333;
}
.info p {
margin: 0;
color: #666;
font-size: 1em;
}
E. Contact (zone d’echange entre l’utilisateur et nous)

Comme indiquer au titre d’entré cette page est une zone de dialogue entre l’utilisateur
et nous. A travers cette page l’utilisateur peut nous faire parvenir son expérience
utilisateur du site, posez des questions de renseignement sur les médicaments qu’il a
acheté. Cette section est très importante nous permet d’être à l’écouter de nos
utilisateurs ce qui renforcera l’expérience utilisateur
Elle comprend 3 champs de remplissage et un bouton pour envoyer le commentaire .

Dans le tableau HTML ci-dessous nous pouvons voir la structure principale de notre
formulaire de contact.
CODE HTML
<form class="contact-form">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" >
</div>
<label for="email">Email :</label>
<input type="email" id="email" name="email" >
</div>
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea>
</div>
<input class="submit" type="submit" value="Envoyer" />

</form>
CODE CSS
.form-group {
margin-bottom: 15px; /* Espacement en bas des groupes de champs */
width: 100%; /* Largeur complète des groupes de champs */
max-width: 600px; /* Largeur maximale des groupes de champs */
}
.form-group label {
display: block; /* Affichage en bloc pour les étiquettes */
margin-bottom: 5px; /* Espacement en bas des étiquettes */
font-weight: bold; /* Poids de la police pour les étiquettes */
}
.form-group input,
.form-group textarea {
width: 100%; /* Largeur complète des champs de saisie */
padding: 10px; /* Espacement interne */
border: 1px solid #ddd; /* Bordure claire pour les champs */
border-radius: 5px; /* Bords arrondis pour les champs */
}
resize: vertical; /* Permet de redimensionner le champ de texte
uniquement verticalement */
min-height: 100px; /* Hauteur minimale pour le champ de texte */
}
.submit {
width: 60%;
display: flex;
gap: 0.5rem;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
}
.submit:hover {
color: gray;
}
3. Défis rencontres pendant la conception du projet

En travaillant sur des projets web comme ceux que vous avez partagés, vous pouvez
rencontrer plusieurs défis, qu'ils soient techniques, de conception, ou liés à
l'accessibilité. Voici une vue d'ensemble des défis typiques et des considérations pour
ce type de travail :
3.1. Défis Techniques
3.1.1. Problèmes de Compatibilité entre Navigateurs :
• Les différents navigateurs (Chrome, Firefox, Safari, Edge) peuvent rendre le

HTML et le CSS de manière légèrement différente. Il est crucial de tester la page
sur plusieurs navigateurs pour garantir une apparence et un comportement
cohérents.
3.1.2. Problèmes de Responsivité :
• Assurer que le site est responsive et s’affiche correctement sur différents

appareils (ordinateurs, tablettes, smartphones) peut être complexe. Vous
devrez utiliser des media queries et tester les tailles d'écran variées.
3.1.3. Erreurs dans le Code CSS :
• Les erreurs de syntaxe, comme le sélecteur :hover mal écrit (header nav ul
li :hover au lieu de header nav ul li:hover), peuvent empêcher le style
de s’appliquer correctement. Le débogage des styles CSS et l’utilisation des
outils de développement des navigateurs peuvent aider à résoudre ces
problèmes.
3.1.4. Performance du Chargement des Pages :
• Les grandes images ou des fichiers CSS non optimisés peuvent ralentir le temps
de chargement de la page. Il est important d’optimiser les images et de
minimiser les fichiers CSS et JavaScript.
3.2. Défis de Conception
3.2.1. Cohérence Visuelle :
• Assurer une apparence cohérente avec les autres pages du site, en termes de
couleurs, typographie et mise en page. Des incohérences peuvent nuire à
l'expérience utilisateur.
3.2.2. Conception Adaptée à l’Utilisateur :
• Créer une interface utilisateur qui est intuitive et facile à utiliser. Par exemple,
les formulaires doivent être clairs et faciles à remplir, avec des instructions
appropriées.
3.2.3. Alignement et Espacement :
• Les éléments doivent être correctement alignés et espacés pour éviter un

aspect désordonné ou encombré. Cela implique souvent un ajustement
minutieux des marges, paddings et largeurs.
3.3. Défis liés au Contenu
3.3.1. Gestion des Images :
• Utiliser des chemins d'accès absolus pour les images

(c:\Users\HP\Pictures\...) peut poser des problèmes lorsqu’on déploie le
site sur un serveur. Utilisez des chemins relatifs ou hébergez les images sur le
serveur.
3.3.2. Validité du Contenu :
• S’assurer que le contenu du formulaire est correctement validé avant l’envoi. Le

formulaire devrait aussi offrir des messages d'erreur clairs pour les utilisateurs.
3.4. Défis d’Intégration
3.4.1. Intégration avec Backend :
• Si le formulaire de contact doit être intégré avec un système backend pour

l’envoi des données, assurez-vous que l’intégration fonctionne correctement et
que les données sont traitées en toute sécurité.
3.4.2. Gestion des Erreurs et Feedback :
• Offrir des messages d’erreur et des confirmations appropriés en cas de

soumission réussie ou échouée du formulaire. Assurez-vous que les utilisateurs
reçoivent un retour d'information clair.
3.4.3. Test et Débogage :
• Tester toutes les fonctionnalités du site pour vérifier qu’elles fonctionnent

comme prévu et résoudre les bogues éventuels. L’utilisation d’outils de test et
de débogage est essentielle.
Les défis rencontrés dans le développement web peuvent être divers et nécessitent
une approche méthodique pour garantir une expérience utilisateur fluide et cohérente.
La clé est de tester régulièrement, de suivre les meilleures pratiques en matière de
conception et de sécurité, et d’être prêt à résoudre les problèmes au fur et à mesure
qu’ils se présentent.
4. CODE HTML ET CSS
1. ACCUEIL HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wewatoo</title>
<link rel="stylesheet" href="wewatoo.css">
</head>
<body>

<header>
<p class="message">BIENVENUE A LA PHARMACIE EN LIGNE WEWATOO
!</p>
<nav>
<ul>
medicament</a></li>
</ul>
</nav>
</div>
</header>


<section class="home-section">
<h2>Votre bien etre est notre priorite</h2>
<p>Accédez à des médicaments sans ordonnance de qualité en un
clic – rapide, sûr et à votre service 24/7.</p>
<img src="c:\Users\HP\Downloads\ecran.jfif" alt="Image
d'accueil" class="home-image">
</div>
</section>

<footer>
</footer>
</body>
</html>
2. Liste des médicaments HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="vetements.css">
</head>
<body>

<header>
<p class="welcome-message">BIENVENUE A LA BOUTIQUE WEWATOO !</p>
<nav>
<ul>
medicament</a></li>
</ul>
</nav>
</div>
</header>
<section class="vetements-section" id="clothes">

<h1 class="titre-section">PRODUITS PHARMACEUTIQUE</h1>
<section class="categories">
<h2>Médicaments en Gélules</h2>
<div class="categorie" id="gellules">
<div class="carte">
<img src="c:\Users\HP\Downloads\paracetamol.jfif"
alt="Nom Médicament 1">
<h3>Paracétamol 500mg</h3>
<p>Utilisé pour soulager la douleur légère à modérée
et réduire la fièvre.</p>
<a href="info-gelule1.html" class="bouton">Plus
d'Infos</a>
</div>
<div class="carte">
<img src="c:\Users\HP\Downloads\ibuprofene.jfif"
alt="Nom Médicament 2">
<h3>Ibuprofène 400mg</h3>
<p>Anti-inflammatoire utilisé pour traiter la
douleur, l'inflammation et la fièvre.</p>
d'Infos</a>
</div>
<div class="carte">
<img src="c:\Users\HP\Downloads\Acide
Acétylsalicylique 100mg.jfif" alt="Nom Médicament 3">
<h3>Acide Acétylsalicylique 100mg</h3>
<p>Utilisé pour soulager la douleur et comme anti-
inflammatoire.</p>
d'Infos</a>
</div>
<div class="carte">
<img src="c:\Users\HP\Downloads\Diphenhydramine
25mg.jfif" alt="Nom Médicament 4">
<h3>Diphenhydramine 25mg</h3>
<p>Antihistaminique utilisé pour traiter les
allergies et l'insomnie.</p>
d'Infos</a>
</div>
</div>
<h2>Crèmes Médicales</h2>
<div class="categorie" id="cremes">
<div class="carte">
<img src="c:\Users\HP\Downloads\Crème
Hydratante.jfif" alt="Nom Crème 1">
<h3>Crème Hydratante </h3>
<p>Utilisée pour hydrater et apaiser les peaux
sèches et sensibles.</p>
<a href="info-creme1.html" class="bouton">Plus
d'Infos</a>
</div>
<div class="carte">
Antirides.jfif" alt="Nom Crème 2">
<h3>Crème Antirides</h3>
<p>Crème destinée à réduire l'apparence des rides et
des ridules.</p>
d'Infos</a>
</div>
<div class="carte">
Apaisante.jfif" alt="Nom Crème 3">
<h3>Crème Apaisante</h3>
<p>Crème pour apaiser les irritations cutanées et
les rougeurs.</p>
d'Infos</a>
</div>
<div class="carte">
reparatrice.jfif" alt="Nom Crème 4">
<h3>Crème Réparatrice</h3>
<p>Crème réparatrice pour les zones sèches et
abîmées de la peau.</p>
d'Infos</a>
</div>
</div>
</section>
</div>
</section>
<footer>
</footer>
</body>
</html>
3. Ajouter un medicament HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="ajouter.css">
</head>
<body>

<header>
<nav>
<ul>
medicament</a></li>
</ul>
</nav>
</div>
</header>
<section class="ajouter-section">
<h2>Ajouter un Vêtement</h2>
<form class="ajouter-form">
<label for="nom">Nom du vêtement :</label>
</div>
<label for="categorie">Catégorie :</label>
<select id="categorie" name="categorie" required>
<option value="hommes">Medicament en
comprime</option>
<option value="femmes">Creme pharmaceutique</option>
</select>
</div>
<label for="quantite">Quantité :</label>
<input type="number" id="quantite" name="quantite"
required>
</div>
<label for="description">Description :</label>
<textarea id="description" name="description"
required></textarea>
</div>
<label for="image">Image (URL) :</label>
<input type="url" id="image" name="image" required>
</div>
<input class="submit" type="submit" value="Ajouter" />

</form>
</div>
</section>
<footer>
</footer>
</body>
</html>
4. Membres HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="membres.css">
</head>
<body>
<header>
<nav>
<ul>
medicament</a></li>
</ul>
</nav>
</div>
</header>
<section class="membredugroupe"></section>
<h2>Qui sommes-nous ?</h2>
<div class="membres">
<img src="c:\Users\HP\Pictures\grace.JPG" alt="Personne 1">
<div class="info">
<h3>NSENGA UMBA GRACE</h3>
<p>08 12 34 56 78</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\nicole.JPG" alt="Personne 2">
<div class="info">
<h3>NDAYA MUTOMBO NICOLE</h3>
<p>08 23 45 67 89</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\bienelle.JPG" alt="Personne
3">
<div class="info">
<h3>AKOTSHI MARIE BIENELLE</h3>
<p>08 34 56 78 90</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\vanessa.JPG" alt="Personne
4">
<div class="info">
<h3>MONDONGI EGLANTINE VANESSA</h3>
<p>08 45 67 89 01</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\mervedi.JPG" alt="Personne
5">
<div class="info">
<h3>MBADU MONZOTO MERVEDI</h3>
<p>08 56 78 90 12</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\judith.JPG" alt="Personne 6">
<div class="info">
<h3>MPEMBE BAFUMA JUDITH</h3>
<p>08 67 89 01 23</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\guy.JPG" alt="Personne 7">
<div class="info">
<h3>LOKWA LAMANGA GUY</h3>
<p>08 78 90 12 34</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\naomie.JPG" alt="Personne 8">
<div class="info">
<h3>NGYAMBA ODRADE NAOMIE</h3>
<p>08 89 01 23 45</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\chris.JPG" alt="Personne 9">
<div class="info">
<h3>ELONGA VANGU CHRIS</h3>
<p>08 90 12 34 56</p>
</div>
</div>
<img src="c:\Users\HP\Pictures\peter.JPG" alt="Personne 10">
<div class="info">
<h3>BANGAKYA MANDZUNEY PETER</h3>
<p>08 01 23 45 67</p>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
5. Contact HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="contact.css">
</head>
<body>
<header>
<nav>
<ul>
medicament</a></li>
</ul>
</nav>
</div>
</header>
<div class="contact-section" id="contact">
<h2>Contact</h2>
<p>Pour toute question ou information, n'hésitez pas à nous
contacter :</p>
<form class="contact-form">
<label for="nom">Nom :</label>
</div>
<label for="email">Email :</label>
<input type="email" id="email" name="email"
required>
</div>
<label for="message">Message :</label>
<textarea id="message" name="message"
required></textarea>
</div>
<input class="submit" type="submit" value="Envoyer" />

</form>
</div>
<footer>
</footer>
</body>
</html>
CODE HTML (tout le code HTML est stylises ici)
/* Réinitialisation des marges et des paddings */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style général du corps */

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Conteneur principal */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* En-tête */
header {
background: #333;
color: #fff;
padding: 20px 0;
}
header .site-name {
font-size: 2em;
display: flex;
}
header .message {
font-size: 1.2em;
display: flex;
}
header .search-form {
display: flex;
}
header .search-form input[type="text"] {

padding: 10px;
border: none;
border-radius: 5px;
width: 220px;
}
header nav ul {
list-style: none;
padding: 0;
display: flex;
}
header nav ul li {
display: inline;
margin-right: 15px;
display: flex;
cursor: pointer;
transition-duration: 0.8s all ease;
}
header nav ul li :hover{

background-color: white;
color: black;
}
header nav ul li a {
color: #fff;
display: flex;
}
/* Section Accueil */
.home-section {
padding: 20px 0;
text-align: center;
}
.home-section .home-image {
width: 100%;
height: auto;
}
/* Liste des medicaments */
.medicaments {
display: flex;
flex-wrap: wrap;
}
.categories {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.categorie {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
h2 {
border-top: none;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
.carte {
width: 40%;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 10px 0;
padding: 15px;
text-align: center;
}
.carte img {
max-width: 100%;
border-radius: 8px;
}
.carte h3 {
margin: 10px 0;
}
.prix {
color: #4CAF50;
font-size: 18px;
margin: 10px 0;
}
.bouton {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
}
.bouton:hover {
background-color: #45a049;
}
/* Section Ajouter */
.ajouter-section {
padding: 20px 0;
}
.ajouter-form {
display: flex;
gap: 15px;
}
.ajouter-form .form-group {
display: flex;
}
.ajouter-form .form-group label {

margin-bottom: 5px;
}
.ajouter-form .form-group input,

.ajouter-form .form-group select,
.ajouter-form .form-group textarea {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.submit {
width: 100%;
display: flex;
gap: 0.5rem;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
}
.submit:hover {
color: gray;
}
/* Section membres */
.membres {
display: flex;
flex-wrap: wrap;
margin-left: 0px;
margin-bottom: 8px;
}
.membre {
width: 210px;
height: 320px;
background: #fff;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
margin-right: 15px;
margin-top: 8px;
}
.membre img {
width: 200px;
height: 220px;
}
.info {
padding: 15px;
}
.info h3 {
margin: 1px 0;
font-size: 1em;
color: #333;
}
.info p {
margin: 0;
color: #666;
font-size: 1em;
}
/* Section contact */
.contact-section {
margin-bottom: 20px; /* Espacement en bas de la section contact */
}
.contact-section h2 {
font-size: 1.8em; /* Taille de la police pour le titre */
margin-bottom: 10px; /* Espacement en bas du titre */
}
.contact-section p {
margin-bottom: 20px; /* Espacement en bas du paragraphe */
font-size: 1.1em; /* Taille de la police pour le texte */
}
.contact-form {
display: flex;
flex-direction: column; /* Disposition verticale des éléments du
formulaire */
align-items: center; /* Alignement des éléments au centre */
}
.form-group {
margin-bottom: 15px; /* Espacement en bas des groupes de champs */
width: 100%; /* Largeur complète des groupes de champs */
max-width: 600px; /* Largeur maximale des groupes de champs */
}
.form-group label {
display: block; /* Affichage en bloc pour les étiquettes */
margin-bottom: 5px; /* Espacement en bas des étiquettes */
font-weight: bold; /* Poids de la police pour les étiquettes */
}
.form-group input,
width: 100%; /* Largeur complète des champs de saisie */
padding: 10px; /* Espacement interne */
border: 1px solid #ddd; /* Bordure claire pour les champs */
border-radius: 5px; /* Bords arrondis pour les champs */
}
resize: vertical; /* Permet de redimensionner le champ de texte
uniquement verticalement */
min-height: 100px; /* Hauteur minimale pour le champ de texte */
}
.submit {
width: 60%;
display: flex;
gap: 0.5rem;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
}
.submit:hover {
color: gray;
}
footer {
background-color: #333; /* Couleur de fond sombre pour le footer */
color: #fff; /* Couleur du texte en blanc pour le contraste */
padding: 20px 0; /* Espacement vertical */
text-align: center; /* Alignement du texte au centre */
}
Conclusion
Ce projet de développement d’un site web de vente en ligne de médicaments sans

ordonnance a permis à notre groupe d’étudiants en informatique d'appliquer nos
connaissances en HTML et CSS. Nous avons conçu une interface statique qui met en
avant les produits, avec une navigation intuitive et un design soigné. Bien que le site ne
soit pas destiné à être mis en ligne, nous avons réussi à atteindre nos objectifs de
création d’un prototype fonctionnel.
Recommandations
Pour de futurs projets, nous recommandons d'explorer l'intégration d’autres langages

de programmation pour dynamiser l'expérience utilisateur, notamment en ajoutant des
fonctionnalités interactives telles que des filtres de produits et des formulaires de
contact. Il serait également bénéfique d'adopter des pratiques de responsive design
pour garantir une bonne accessibilité sur différents appareils.
Perspectives
Nous pourrions envisager d’ajouter des éléments tels que des animations CSS pour
améliorer l'esthétique du site et attirer davantage l'attention des utilisateurs pourrait
également faciliter la gestion des styles, surtout pour des projets plus complexes.
Annexes
Les annexes comprennent des maquettes de l’interface, des extraits de code, ainsi que
des diagrammes illustrant la structure du site.
Remerciements
Nous tenons à remercier nos enseignants pour leurs conseils précieux et nos
coéquipiers pour leur collaboration et leur engagement durant ce projet.

Rapport Final 3

Transféré par

Informations du documentcliquez pour développer les informations du document

Informations du documentcliquez pour développer les informations du document

Droits d'auteur :

Formats disponibles

Rapport Final 3

Transféré par

Informations du document

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 Final 3

Transféré par

Droits d'auteur :

Formats disponibles

1.

Cette mission visait non seulement à mettre en pratique nos compétences en

2.Conception pour les Pages Web Wewatoo

a. Accueil (Page principale)

A. Accueil (Page principales)

1. Barre de navigation dynamique et interactive : Qui permet a l’utilisateur de

/* Réinitialisation des marges et des paddings */

/* Style général du corps */

header .search-form input[type="text"] {

header nav ul li :hover{

2. Message d’accueil : Les messages d'accueil orientent les utilisateurs et leur

B. Listes des medicaments (Repertoire de nos produits

En appuyant sur le bouton “Plus d’infos ” l’utilisateur a accès a plus d’informations

C. Ajouter un medicament (Zone permettant de rajouter un

Les étapes pour rajouter un médicament sont les suivantes:

1. Mettre le Nom du médicament

2. Mentionner la Categorie du medicament

3. Indiquer la quantité qui est en réserve

5. Copier l'URL de l’image du médicament

6. Appuyer sur le bouton “Ajouter” pour enregistrer le nouveau médicament

<input class="submit" type="submit" value="Ajouter" />

.ajouter-form .form-group label {

.ajouter-form .form-group input,

D. Qui sommes-nous? (Description des membres du groupe)

E. Contact (zone d’echange entre l’utilisateur et nous)

Elle comprend 3 champs de remplissage et un bouton pour envoyer le commentaire .

<input class="submit" type="submit" value="Envoyer" />

3. Défis rencontres pendant la conception du projet

3.1.1. Problèmes de Compatibilité entre Navigateurs :

• Les différents navigateurs (Chrome, Firefox, Safari, Edge) peuvent rendre le

3.1.2. Problèmes de Responsivité :

• Assurer que le site est responsive et s’affiche correctement sur différents

3.1.3. Erreurs dans le Code CSS :

3.1.4. Performance du Chargement des Pages :

3.2. Défis de Conception

3.2.1. Cohérence Visuelle :

3.2.2. Conception Adaptée à l’Utilisateur :

3.2.3. Alignement et Espacement :

• Les éléments doivent être correctement alignés et espacés pour éviter un

3.3.1. Gestion des Images :

• Utiliser des chemins d'accès absolus pour les images

3.3.2. Validité du Contenu :

• S’assurer que le contenu du formulaire est correctement validé avant l’envoi. Le

3.4. Défis d’Intégration

3.4.1. Intégration avec Backend :

• Si le formulaire de contact doit être intégré avec un système backend pour

3.4.2. Gestion des Erreurs et Feedback :

• Offrir des messages d’erreur et des confirmations appropriés en cas de

3.4.3. Test et Débogage :

• Tester toutes les fonctionnalités du site pour vérifier qu’elles fonctionnent

4. CODE HTML ET CSS

2. Liste des médicaments HTML

<section class="vetements-section" id="clothes">

3. Ajouter un medicament HTML