# Projet Web : Site pour NDP
###### tags: `HTML`
Arwen LEGAL 1-3
## Partie 1 : Définition du projet
**Texte pour les différentes pages**
### Page d'accueil
Bienvenue sur le site de Notre Dame !

C'est quoi, Notre Dame Providence ?

Notre Dame Providence est un collège-lycée privé catholique situé à Enghien-les Bains.

Un peu d'histoire...
* **1903** ; Création de la Société d'Enseignement Moderne
* **1907** ; Directeur laïque (Monsieur Laverhne) → religieux (Abbé Hansz, Abbé Laurent, Abbé Palhories)
* **1926** ; Abbé Fournel
* **1944** ;
* Décès de l'abbé Fournel
* Pères Maristes de Bury prennent la direction
* Nouveau nom : <u>Cours Notre Dame</u>
* **1973** ; Confié à l'Association Notre-Dame Providence → devient mixte
* **1975** ; Nouveau directeur laïque (Monsieur Garcia)
A la suite de cela se succèderont de nombreux directeurs qui feront croitre Notre Dame, jusqu'à Monsieur Ronsmans aujourd'hui ! ;)

Notre Dame en quelques chiffres...

1600+ élèves
105 professeurs
5 associations

Les valeurs de l'établissement...

Donner aux élèves une formation de qualité
Assurer le suivi pédagogique des élèves
Permettre à l'élève de vivre ses choix d'orientation
Conduire chaque élève à sa propre réussite

## Partie 2 : Bases de la conception
1. Un ***header*** est la partie supérieure de la page, où se trouve généralement le nom du site, un logo, un menu de navigation, une barre de recherche...
2. Un ***footer*** est la partie inférieure de la page, où se trouvent généralement les crédits, les mentions légales, les liens vers différentes plateformes...
3. La balise ***nav*** est utilisée pour pouvoir naviguer entre les différentes pages d'un site web. Elle est donc indispensable pour un site web interactif.
4. La balise ***div*** est utilisée pour la mise en page et l'agencement de différents éléments. La balise ***span*** sert plutôt à changer la forme du texte, à l'interieure de la ligne elle-même.

## Partie 3 : Structure des pages HTML
Voici quelques maquettes :

## Partie 4
### Les difficultés
La plus grosse difficulté que j'ai rencontrée est probablement la mise en page avec la balise `div`. J'avais beaucoup de mal à comprendre les notions de padding, et mes colonnes se confondaient entre elles...
De manière générale, la disposition des différents éléments au sein d'une page a été une notion compliquée à maitriser pour moi.
Mais une fois que j'avais compris le principe je m'en suis sortie.
Voici un exemple de balise div qui m'a donné du fil à retordre :

  <div class="row" style="padding-bottom: 400px;">
  	<div class="column" style="width:25%;">
		  <div class="flip-card" style="padding-bottom:10px;">
			<div class="flip-card-inner">
				<div class="flip-card-front">
					<img src="images/ndp-lycee-cour.jfif" alt="Avatar" style="width:300px;height:300px;">
				</div>
				<div class="flip-card-back">
				  <h1>La cour</h1>
				  <p class="white">Elle accueille les élèves des trois niveaux.</p>
				</div>
			  </div>
			</div>
		</div>
  	<div class="column" style="width:25%;">
		  <div class="flip-card" style="padding-bottom:10px;">
			<div class="flip-card-inner">
				<div class="flip-card-front">
					<img src="images/ndp-lycee-salle-info.jfif" alt="Avatar" style="width:300px;height:300px;">
				</div>
				<div class="flip-card-back">
				  <h1>Les salles informatiques</h1>
				  <p class="white">Deux salles équipées de PC pour les travaux en NSI par exemple.</p>
				  <p class="white" style="font-size: 10px;">Quelle formidable matière !</p>
				</div>
			  </div>
			</div>
		</div>

C'est le code que j'ai utilisé pour mes "flip cards" de la page du lycée.
J'ai emprunté la technique au site [W3Schools](https://www.w3schools.com) en la combinant avec mes propres connaissances.
### Ce que j'ai appris
#### D'un point de vue technique
J'ai appris à utiliser les éléments "class" et "id", qui permettent une meilleure personalisation des balises.
Ayant rapidement vu le HTML l'année dernière, ainsi que cette année avec le devoir sur les pionniers de l'informatique, mon apprentissage s'est principalement basé sur le CSS.
Etant une grande appréciatrice de mise en page et de visuels, j'ai trouvé très amusant de voir le projet ressembler de plus en plus à mes maquettes, pour faire quelque chose de beau !
J'ai appris à ajouter différentes polices, via Google Fonts, en ajoutant le code suivant dans mon CSS :

body{
	font-family: 'Poppins', sans-serif;
}

J'ai aussi appris, en CSS, à manier le `hover`, qui permet de changer l'aspect d'un élément lorsque l'on passe la souris dessus.
Par exemple, je l'ai utilisé pour changer la couleur de mes liens de menu de navigation lorsque je passe ma souris dessus :

nav.menu-nav ul li.btn1:hover a{
	color: #fe6d73;
	transition: 0.3s all;
}

#### D'un point de vue méthodologique
A travers cette séance, j'ai appris à chercher précisément une balise dont on aurait besoin pour la conception du site, sur des sites ou blogs spécialisés en HTML, ou bien en analysant la conception d'autres sites Internet.
J'ai également gagné en connaissances concernant la conception d'une maquette : il y a des codes couleur, des polices, des icônes à respecter.
J'ai aussi appris comment gérer la reproduction d'une maquette, ce qui est moins évident qu'il n'y parait ! C'est une grande partie de la gestion du projet, qui est primordiale pour avoir un rendu convenable.

## Partie 5
* Compte rendu vidéo : https://youtu.be/pmjMLQCtXKo

### Script de la vidéo
#### INTRODUCTION
Notre devoir était de créer un site web présentant le collège-lycée Notre Dame Providence. Je n’ai fait que la page d’accueil, une partie de celle du collège, et une partie de celle du lycée, comme vous aviez dit que la page d’accueil était suffisante. J’ai commencé par faire mes maquettes, en voici quelques-unes (je les ai réalisées avec PowerPoint).
_[Montrer les maquettes]_
Pour mon site, je voulais un design assez moderne, en accord avec le logo de l’établissement. J’ai pris une palette de couleurs depuis le site Internet « Coolors » de manière à avoir des couleurs unifiées. Pour la police, j’ai utilisé « Poppins », que j’ai trouvé sur Google Fonts. J’ai ainsi appris à ajouter une nouvelle police dans la page, en mettant ce code _[font-family: 'Poppins', sans-serif;]_ dans le CSS et celui-ci _[@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');]_ dans le HTML.
#### MENU NAV
Mon premier enjeu fut de construire le menu de navigation, avec la balise `<nav>`.
Mon site est constitué de 3 pages, une pour l’accueil, une pour le collège, et une pour le lycée. Chacune de ses pages est accessible depuis le menu de navigation situé dans le header. Comme vous pouvez le voir il s’agit de différents liens sous forme de puces, où j’ai changé les puces de base par des icônes que j’ai tirées de Power Point.
_[Montrer menu de navigation]_
Pour cela j’ai créé une balise `<ul>`, avec une classe de `<li>` différente pour chaque bouton correspondant aux différentes pages. J’ai donc pu, pour chaque balise `<li>`, changer la puce et la remplacer par une icône avec « list-style-image ». Après avoir reproduit cette opération pour les trois pages, il ne me reste plus qu’à faire en sorte que, lorsque je passe ma souris sur l’un des boutons, il devienne rouge. Ici j’utilise « hover » *[Montrer le bout de code]* en définissant que la couleur est rouge avec une transition de 0,3 secondes.
#### BALISES `<DIV>`
Pour ce qui est des balises `<div>`, j’ai eu plus de mal. En effet, sur ma maquette, la partie « Notre Dame en quelques chiffres » se trouve au-dessus de la partie « Les valeurs de l’établissement ». Cependant, lorsque j’ai essayé de le mettre en œuvre, les icônes de « Notre Dame en quelques chiffres » se superposaient avec le texte de « Les valeurs de l’établissement ». J’ai donc dû inverser leurs positions afin que les éléments ne se superposent pas.
Aussi, par rapport à mes maquettes, j’ai choisi de faire une disposition en quinconce, alternant entre éléments de texte et images, pour un rendu plus esthétique.
#### FLIPCARDS
En me promenant sur le site de W3Schools, j’ai trouvé un tutoriel pour faire des images avec du texte derrière, qui se retournent comme des cartes. Cela m’a semblé très beau et créatif, j’ai alors décidé d’en utiliser pour la page du lycée. J’ai pris quatre lieux du site du lycée que j’ai présenté à travers ces cartes.
Ces cartes sont d’énormes combinaisons de balises `<div>` : une première pour la déclarer, une seconde pour créer une première colonne, une troisième et une quatrième pour déclarer la flipcard, une cinquième pour l’avant de la carte (la photo), et une sixième pour l’arrière de la carte (le texte), et ainsi de suite quatre fois.
Compilé avec le CSS, on obtient ces petites cartes qui se retournent, pour présenter les équipements du lycée.
#### LES APPRENTISSAGES / BILAN
Au final, j’ai appris de nombreuses notions, tant bien en HTML qu’en CSS, comme les notions de « class » et « id », ou bien la notion de « hover ». Mais mon apprentissage se fut aussi d’un point de vue méthodologique : c’était la première fois d’un tel projet m’était confié, ce qui a permis d’améliorer mes capacités à gérer mon temps, à organiser mes ressources…
J’ai aussi eu l’occasion de m’améliorer en conception de maquette, ce qui a pu m’approcher de notions telles que le choix et la concordance des couleurs, des polices… C’est une partie non négligeable de la création du projet.
En somme, ce projet m’a permis d’apprendre beaucoup en termes aussi bien techniques que méthodologiques.