Projet de Clara Goldnadel 1e6

Voici mon site pour le collège-lycée Notre-Dame Providence

Sommaire

• Projet de Clara Goldnadel 1e6
  • Sommaire
• Partie 1 :
  • Structure du projet
• Partie 2 :
  • Questions
• Partie 3:
  • Maquettes
• Partie 4 :
  • Compte-rendu
• Partie 5 :
  • Script :
  • Vidéo : https://youtu.be/U1L60RKEDDA

Partie 1 :

Structure du projet

├── GOLDNADEL_Clara_Site_NDP –> répertoire
│ ├── index.html –> fichier HTML
│ ├── pages –> répertoire contenent les pages
│ ├─├── lycee.html –> fichier HTML
│ ├─├── 3e.html –> fichier HTML
│ ├─├── college.html –> fichier HTML
│ ├── IMG –> répertoire contentant les images
│ └── CSS –> répertoire contenant les feuilles de style

Partie 2 :

Questions

Qu’est-ce qu’un header dans une page HTML ?

L'élément HTML header représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments.
exemple :

<header class="page-header">
    <h1>Exemple</h1>
</header>
<main>
    <p>Voici un exemple.</p>
</main>

Qu’est-ce qu’un footer dans une page HTML ?

Le footer indique la fin d’une page Web. Son apparition implique que l’utilisateur ne peut pas faire défiler plus bas et donc qu’il n’y a plus de contenu à visualiser.

À quoi sert la balise nav ?

L'élément HTML "nav" représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, …).

<nav>
    <a href="index.html">Page d'accueil</a> 

    <a href="college.html">Page collège</a> 

    <a href="3e.html">Page 3e</a> 

    <a href="lycee.html">Page lycée</a>
  </nav> 

Quelle est la différence entre la balise span et la balise div ?

Ces deux balises sont des conteneurs qui servent à structurer le contenu, mais ils ont un rôle complémentaire et des règles de rendu différentes.
Span sert surtout à associer un style à une partie d'un texte tandis que div sert à agencer le contenu de la page.
exemple span :

<p>Ce tableau est <span class="textRouge">rouge</span>.</p>

Exemple div :

<div><p>Les deux langages qui permettent de créer des pages web sont :</p>
<ul><li>XHTML ;</li>
<li>CSS.</li></ul>
</div>

Partie 3:

Maquettes

Partie 4 :

Compte-rendu

J'ai décidé d'opter pour une mise en page assez simple et sobre au niveau des couleurs. La seule couleur que j'ai choisie est un beige pâle. En haut de chaque page, l'utilisteur peut retrouver un moyen de naviguer de pages en pages avec un menu latéral avec des liens hypertexte.

<nav class="menu">
      <div class="flex" id="f1"> <a href="index.html"> Accueil </a> </div>
      <div class="flex" id="f2"> <a href="pages/lycee.html"> Le lycée </a> </div>
      <div class="flex" id="f3"> <a href="pages/3e.html"> Les 3e </a> </div>
      <div class="flex" id="f4"> <a href="pages/college.html"> Le collège </a> </div>
</nav>

J'ai ajouté une petite vidéo et un bouton cliquable. Pour réussir ceci, je me suis renseignée sur l'utilisation du bouton dans javascript et j'ai utilisé des sections à l'intérieur d'une balise div :

<div class="container">
        <section id="left">
        texte
        </section>
</div>

.container {
    display: table;
}

section {
    display: table-cell;
}

#left {
    text-align: center;
}

J'ai aussi découvert les animations css. Après avoir compris leur fonctionnement grâce au site W3school. J'en ai donc ajouté dès le début avec une animation avec un délai.
Mais aussi, lorsque l'on passe le curseur sur les différentes pages du menu latéral, les liens hypertexte deviennent bleus.
Lorsque l'utilisateur clique sur le bouton "en savoir plus", s'affichent alors des informations sur les différents sites Notre Dame Providence ainsi que les contacts et accès. Par la suite, l'utilisateur peut choisir d'en apprendre davantage sur soit sur le lycée, soit sur les 3e ou encore sur le collège. Une fois de plus j'ai utilisé une balise div avec des sections en affichant en quinconce du texte et des images pour illustrer chaque texte, avec également une alternance entre le beige pâle et le blanc. Chaque petit paragraphe est finalement un élément d'une liste à puces. A chaque page, pour signaler la fin de celle-ci, j'ai mis un footer, "Site publié par Clara Goldnadel. Tous droits réservés".
J'ai dû faire face à de nombreux problèmes tout au long de la mise en page, notamment le placement des textes et des images. Le fait de faire trois sections afin d'aligner trois images ou textes horizontalement, a été difficile à faire. C'est en m'informant sur des sites comme W3school mais aussi des sites html d'étudiants, que j'ai réussi à faire ce que je voulais.
Tout au long de la conception de mon site, j'en ai appris énormément sur les langages HTML, CSS mais aussi et surtout un début de javascript. Ces deux premiers langages, j'avais déjà dû m'en servir notamment l'année dernière mais j'ai pu apprendre à lier une page javascript avec une page HTML mais aussi et surtout à mettre en place un bouton permettant de découvrir des informations.

function myfunction() {
    document.getElementById("left").style.visibility = "visible";
    document.getElementById("right").style.visibility = "visible";
    document.getElementById("b1").style.visibility = "hidden";
    document.getElementById("image_to_hide").style.visibility = "visible";
}

<script src="scripts/script.js" async=false defer=false></script>

<input id="b1" type="button" value="En savoir plus" onclick="myfunction()">

input {
    margin-top: 50px;
}

De plus, les animations CSS sont également des compétences que j'ai acquises durant la conception du site. Je n'en avais jamais utilisé et lorsque j'ai découvert leur existence, j'ai trouvé que cela rendait le site plus vivant et plus dynamique.

.titre {
    text-align: center;
    color:rgba(150, 127, 98, 0.89);
    animation: 1s linear apparait;
}

#f1 {
    opacity: 0;
    animation: 2s linear forwards apparait;
    animation-delay: 500ms;
}

@keyframes apparait {
    from {
        opacity: 0;
    }
    to {
        opacity: 100;
    }
}

.flex a:hover {
    color: aqua;
}

Partie 5 :

Script :

Bonjour je vais vous présenter mon site sur le collège, lycée Notre Dame providence à Enghien-les-Bains.
Lors de votre première arrivée sur le site, vous pouvez voir apparaitre un menu de navigation ainsi qu’une image, qui est le logo de notre école, et une petite vidéo qui anime le site internet et le rend plus vivant. L’objectif du menu est de laisser le choix à l’utilisateur de pouvoir naviguer à travers toutes les pages. Il rend également le site plus esthétique avec son beige pâle et le fait que lorsque le curseur est sur une des cases du menu, le lien hypertexte devient bleu clair. Si vous désirez en savoir davantage sur le collège lycée Notre Dame Providence, vous pouvez cliquer sur le bouton au centre de la page. Le but de ce bouton est de ne pas “agresser” l’utilisateur dès son arrivée avec tout un tas d’informations mais aussi “d’aérer” la page d’accueil au début. Après avoir cliqué sur le bouton, vous découvrez quelques images et quelques informations générales sur l’établissement comme l’équipe, les langues que les élèves peuvent apprendre ou encore les sorties et voyages. Enfin, vous obtenez des informations de contact et sur l’accès de nos sites.
Par la suite, vous avez le choix d’en apprendre davantage soit sur le lycée, les 3e ou encore le collège. Grâce au menu de navigation vous pouvez accéder aux quatre pages depuis n’importe quelle page.
Pour continuer notre visite commençons par nous rendre sur la page dédiée à en apprendre sur le collège.
Lorsque vous arrivez sur la page, vous découvrez quatre “parties”, les images et les textes sont en quinconce afin de rendre la page plus harmonieuse avec une alternance de couleurs pour bien séparer ces “parties”. Vous en apprenez d’abord sur les différentes classes, sur la disposition des bâtiments et des salles autres que les classes. Enfin, vous avez quelques informations sur l’enseignement pastoral et les associations que les élèves aident avec le cross solidaire organisé chaque année.
Dirigeons-nous ensuite vers la page dédiée aux 3e.
Là aussi, vous pouvez retrouver une alternance d’images et de textes groupant des informations relatives aux 3e. Vous pouvez en apprendre sur les classes, les salles autres que les classes, les services que l’établissement offre aux élèves comme l’ASSR ou encore la possibilité de découvrir le monde du travail avec un stage. Mais cette année est aussi et surtout l’année du premier examen des élèves : le brevet des collèges.
Enfin, vous pouvez en apprendre sur le lycée en décidant de cliquer sur la page dédiée.
Vous restez sur la même mise en page, la sobriété permet un style plus épuré et un rendu plus professionnel. Cette mise en page permet aussi d’éviter que le texte contenant les informations ne soit qu’un paragraphe énorme qui ne donne pas envie que l’on s’y intéresse. C’est pour cela que seules les informations changent et non la mise en page. Vous découvrez d’abord les classes de seconde, première et terminale avec les options, également un second stage. A la fin de toutes les pages se trouve un footer afin de délimiter la fin de chacune.
J’ai décidé de couper toutes les informations utiles sur quatre pages afin d’aérer mais aussi d’organiser les informations. Ce choix s’explique aussi par la participation de l’utilisateur dans les choix du site. S’il souhaite s’informer sur un site en particulier c’est à lui de cliquer. Cela lui permet d’être actif lors de sa navigation.
La mise en place des textes et des images a été compliquée pour moi. Le fait d’avoir recours à trois sections afin d’aligner trois images ou textes horizontalement, a été difficile à faire. Mais après de nombreuses recherches, j’ai fini par réussir à comprendre.
J’ai pu en apprendre beaucoup sur les langages HTML, CSS et un début de javascript. Concernant les deux premiers langages, j’avais déjà dû m’en servir notamment l’année dernière, cependant les animations CSS sont des compétences que j’ai acquises durant la conception du site. Je n’en avais jamais utilisées et lorsque j’ai découvert leur existence, j’ai trouvé que ça rendait le site plus vivant et plus dynamique. Mais j’ai pu également apprendre à lier une page javascript avec une page HTML mais aussi et surtout à mettre en place un bouton permettant de découvrir des informations. Cette apparition grâce à un bouton est très utile et le fait d’avoir réussi à en ajouter un me servira certainement dans d’autres projets.
Afin de régler les problèmes auxquels j’ai dû faire faire mais aussi en apprendre sur les possibilités qui s’offrent à un créateur de site afin de dynamiser et d’harmoniser son site, j’ai exécuté de nombreuses recherches sur internet et utilisé de nombreux sites comme W3school ou encore Openclassrooms, je me suis également renseignée auprès de sites déjà finalisés d’html par des étudiants, en inspectant leur code source.
Merci de m'avoir écoutée.

Vidéo : https://youtu.be/U1L60RKEDDA