Consignes TP

Contenu

Consignes TP#

Introduction#

Durant les premières séances de TP de cette année, vous allez mettre en pratique les connaissances et compétences acquises en HTML, en CSS et avec Bootstrap afin de créer votre propre site Web consacré à un sujet de votre choix.

Vos tâches seront :

Trouver un sujet adéquat et motivant
Créer un site Web avec HTML, CSS et Bootstrap sur ce sujet
Effectuer une recherche documentaire sur ce sujet pour compléter votre site

Choix du sujet#

Vous avez une grande liberté dans le choix de votre sujet. Prenez-en un qui vous intéresse, que vous aimez, qui vous motive : le travail n'en sera que plus facile et de meilleure qualité ! Voici quelques exemples de thématiques pour vous inspirer :

Site Web pour votre société locale (club de sport, groupe de musique, ...)
Blog de critiques (livres, jeux-vidéos, films, ...)
Blog de cuisine / voyage / ...
Site Web présentant quoi que ce soit (un hobby, un jeu-vidéo, un réalisateur, un mouvement musical, un évènement, ...)
Guide touristique pour une ville, un pays
Portfolio de créations personnelles (dessins, peinture, textes, photographies, ...)
...

Les thèmes tel que "un footballeur" ou "une chanteuse" ne sont pas autorisés.

Laissez cours à votre imagination. Veillez simplement à valider votre sujet auprès de l'enseignant avant de vous lancer dans la suite du processus.

Mise en place#

Sur votre ordinateur, idéalement sur OneDrive, créez un nouveau dossier qui contiendra tous les fichiers de votre site Web
Ouvrez Visual Studio Code et cliquez en haut à gauche sur File (ou Fichier en français)
Activez la sauvegarde automatique en cliquant sur File -> Auto save
Cliquez ensuite sur Open Folder (Ouvrir un dossier) et sélectionnez le dossier que vous avez créé

Une fois votre dossier ouvert, dans l'explorateur à gauche, cliquez sur l'icône New file.

Entrez le nom exact index.html : il s'agira de la page d'accueil de votre site Web. Vous répétrez ce processus à chaque fois que vous voudrez créer un nouveau fichier
Répétez donc tout de suite cette opération pour créer un fichier style.css
Dans le fichier HTML, collez le squelette ci-dessous. Il inclut déjà Bootstrap : laissez le lien vers style.css après celui de Bootstrap, pour que vos propres règles CSS restent prioritaires.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>TEST</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  </body>
</html>

Dans le fichier CSS, écrivez :

h1 {
  color : purple;
}

Faites un clic-droite dans l'explorateur de fichiers sur index.html et cliquez sur Open in File Explorer/Finder. Votre dossier avec les 2 fichiers créés doit apparaître. Double-cliquez sur index.html. Si une nouvelle fenêtre s'ouvre dans votre navigateur Web avec une page contenant le mot TEST en violet, la mise en place est terminée.

Recherche documentaire#

Lors de la visite de la bibliothécaire, vous effectuerez une recherche documentaire sur votre sujet. Celui-ci peut être élargi afin de trouver des documents pertinents. Durant ces 2 périodes, et durant les TP consacrés au projet vous êtes chargés de :

Trouver 3 sources pertinentes concernant votre sujet sur les plateformes présentées, dont au moins une présente à la biliothèque de STX
Rédiger une très courte bibliographie contenant ces 3 sources au format demandé dans le guide du Travail de Maturité
Présenter ces 3 sources à l'enseignant au plus tard durant le dernier TP consacré à ce projet. La source de la bibliothèque doit être présentée en "physique"
Pour chaque source, rédiger quelques phrases résumant les informations que vous y avez trouvées

Développement et objectifs#

Une fois la mise en place effectuée, développez votre site Web en respectant les conditions suivantes :

Le site Web contient au moins 3 pages HTML dont le contenu (images, textes, vidéos, ...) est pertinent dans le sujet choisi
Le site Web contient une autre page HTML contenant votre résultat de la recherche documentaire (bibliographie et résumés)
Le site Web utilise correctement au moins une fois toutes les balises HTML travaillées en cours (voir théorie HTML) de manière pertinente
Le site Web utilise correctement au moins 10 propriétés CSS différentes
Le site Web utilise des classes et des div de manière pertinente
Le site Web utilise la grille de Bootstrap (container, row, col) pour organiser le contenu de ses pages, avec au moins deux lignes à plusieurs colonnes
Le style visuel du site Web est soigné
L'orthographe et la grammaire du site Web sont irréprochables

Évaluation#

Le projet sera évalué avec un coefficient 0.5. Le tableau ci-dessous liste l'ensemble des critères et leur valeur. Chaque critère est évalué de 0 à la valeur maximale indiquée.

Critère	Points
Conception et organisation
Sujet pertinent (validé par l'enseignant) et plan des pages préparé	2
Organisation des fichiers conforme (dossier, `index.html`, `style.css`)	1
HTML
Le site comporte 3 pages reliées par un même menu de navigation fonctionnel, présent sur chaque page. `index.html` est la page d'accueil	3
Structure HTML complète sur chaque page (`<html>`, `<head>`, `<meta>`, `<title>`, `<body>`)	2
Les balises travaillées en cours (titres, paragraphes, listes, images, liens) sont utilisées de manière pertinente	4
Au moins un `<table>` pertinent et au moins une liste (`<ul>` ou `<ol>`) pertinente	2
CSS
Un unique fichier `style.css` est lié à toutes les pages	1
Au moins 10 propriétés CSS différentes sont utilisées correctement	3
Le sélecteur de classe est utilisé de manière pertinente au moins 3 fois (classes définies dans `style.css` ; les classes de Bootstrap ne comptent pas)	3
Les balises `<div>` sont utilisées au moins 2 fois de manière pertinente, en lien avec une classe et du CSS, pour styliser un groupe	2
Bootstrap
Bootstrap est installé correctement sur chaque page (`<link>` dans le `<head>`, avant celui de `style.css` ; `<script>` juste avant `</body>`)	1
Le contenu de chaque page est placé dans un `container`, et les `row` et `col` sont correctement imbriquées (`col` dans une `row`, `row` dans le `container`)	2
Au moins deux lignes à plusieurs colonnes sont utilisées de manière pertinente (par exemple une image et son texte côte à côte, une galerie)	2
Contenu et soin
Contenu informatif exact, suffisant et intéressant	3
Orthographe et grammaire correctes	2
Style visuel soigné et cohérent entre les 3 pages	3
Recherche documentaire
3 sources pertinentes trouvées, dont au moins une empruntée à la bibliothèque de STX et présentée physiquement	3
Bibliographie rédigée au format demandé dans le guide du Travail de Maturité	2
Résumé pertinent des informations trouvées pour chacune des 3 sources	3
La recherche documentaire est présentée sur une page dédiée du site	1
Total	45

Rendu#

[TODO]

Note sur le plagiat#

Important : ce TP doit être réalisé individuellement durant les 3 périodes mises à disposition. En aucun cas vous n'avez le droit de :

Copier/coller ou recopier manuellement du code provenant d'une source externe (intelligence artificielle, template ou tutoriel internet, autre projet, ...).
Faire appel à une aide externe au cours pour vous aider à avancer (intelligence artificielle, membre de la famille, ...).
Utiliser des concepts HTML ou CSS qui n'ont pas été travaillés en cours cette année (balises non vues en cours, JavaScript écrit par vous-même, frameworks autres que Bootstrap, éléments de Bootstrap autres que la grille container / row / col, pseudo-classes avancées, flexbox ou grid en CSS, ...).

L'entre-aide entre élèves est acceptée pour autant que cela n'implique pas de copier le code de quelqu'un d'autre. Tout manquement à ces règles entraînera automatiquement la note 1.