Étape 1
À compléter et remettre dans Teams/Devoirs.
Groupe 1 et 2 avant le 2 3 mai 23h59.
Groupe 3 avant le 5 6 mai à 23h59.
1-Choix
Si vous êtes deux personnes et que chacun a créé un design différent dans le cours de design graphique, vous devez choisir l’un des deux.
S’il n’y a qu’un seul design disponible, utilisez simplement celui-là.
Ensuite, retournez dans le document Excel et, dans la colonne D, inscrivez l’URL du site original que vous avez choisi.
Dans la colonne E, inscrivez les noms des étudiants qui ont fait le design de ce site dans le cadre du cours de design graphique.
2-Préparation et partage du fichier Figma
Très important : ne travaillez pas directement sur la version que vous avez remise dans le cours de design graphique.
Pour le Web2, vous devez dupliquer le fichier Figma correspondant à votre design final.
Renomme le fichier Figma dupliqué en suivant cette nomenclature: Web2_Prenom1_Prenom2_582-211.
Activez le lien de partage qui permettra à tous les membres de votre équipe d’éditer le fichier. (Voir la capsule vidéo plus bas. Utilisez le même mot de passe que celui montré dans la vidéo.)
Copiez le lien éditable (comme démontré dans la capsule vidéo) et envoyez-le dans le devoir sur Teams, pour que je puisse y accéder et avoir les droits d’édition.
▶️ Capsule vidéo explicative sur le partage du fichier Figma pour le projet actuel.
3-Échafaudage du projet
L’échafaudage, plus connu sous son nom anglophone “scaffolding”, consiste à créer une arborescence de dossiers et de fichiers qui seront utilisés afin de créer un site web. Le terme a été emprunté au domaine de la construction, où avant même de poser la première brique, un échafaudage est monté afin de simplifier la tâche à accomplir.
Créez un dossier de projet commun (ce dossier sera poussé sur github à la prochaine étape).
À la racine du dossier de projet, ajoutez le fichier index.html qui correspond à la page d'accueil du site.
Dans le fichier de l'accueil index.html, ajoutez les balises de base d'une page HTML et n'oubliez pas d'inscrire le nom du site dans la balise title et de changer la langue pour fr.
Dans le head d'index.html, ajoutez la balise meta suivante: meta name="robots" content="noindex, nofollow" en ajoutant les symbole < et > au début et à la fin de la balise (voir sous ls liste des requis actuels pour copier/coller la balise complète). Ceci est important pour que Google ne référence pas votre site web puisque c'est un projet scolaire et non un véritable site promotionnel.
Copier le fichier index.html trois fois pour les trois autres pages, en les nommant de façon appropriée (sans espace, sans accent et avec l'extension de fichier .html).
Créez à la racine du dossier de votre projet les sous-dossiers suivant 📁: assets, css, js.
À l'intérieur de votre dossier css, ajoutez un fichier nommé main.css.
Liez la feuille de style main.css à chacune des pages HTML.
À l'intérieur de votre dossier assets, créez ces sous-dossiers: images, videos, polices. Ces sous-dossiers contiendront les fichiers images, vidéos et polices de caractères (si applicable) de votre site web.
Balise meta à ajouter dans le head de votre page HTML (requis #4 de la section échaffaudage):
<meta name="meta" name="robots" content="noindex, nofollow">
4-Requis Git
Création du repo GitHub (à faire en équipe)
Avec un de vos compte GitHub, vous devez créer un répertoire GitHub intitulé Prenom1_Prenom2_Web2final_582-211.
Par exemple, si Bob et moi sommes coéquipiers, notre répertoire GitHub s'intitulera: Bob_MarieMichelle_Web2final_582-211
Attention, celui-ci devra être en mode public et non privé 🚫. De plus, n'oubliez pas de cocher pour créer fichier README.
La personne ayant créé le répertoire avec son propre compte GitHub doit inviter son coéquipier afin que celui-ci puisse y avoir accès.
Vous devez ensuite cloner localement (sur son ordinateur) le répertoire du projet (clonez sur votre disque dur externe ou sur votre OneDrive et assurez-vous de toujours travailler au même endroit, peu importe l'ordi sur lequel vous travaillez). Via l'explorateur de Windows, vous devez déposer dans ce répertoire les fichiers créés lors du requis précédent #3-echafaudage-du-projet. On devrait voir notamment les 4 fichiers .html à la racine du répertoire (pas dans un sous-dossier).
Éditez le fichier README à la racine de votre dossier de projet. N'utilisez que le langage MARKDOWN.
- Affichez le nom de votre site web (heading niveau 1)
- Ajoutez un sous-titre nommé "Projet scolaire".
- Sur la ligne suivante, nom de ce cours suivi de - Projet Final et d'un lien vers la page des instructions du projet.
Exemple: Web 2 - Projet final
- Sur la ligne suivante, inscrivez le nom du collège
- Ajoutez un sous-titre nommé "Équipe".
- Le sous titre "Équipe" sera suivi d'une liste à puce avec chacun des membres de l'équipe.
Faites un commit (bien nommé), un pull et push vers GitHub.
Le 2e coéquipier, devra à son tour faire un clone du répertoire giy sur son ordinateur (clonez sur votre disque dur externe ou sur votre OneDrive et assurez-vous de toujours travailler au même endroit, peu importe l'ordi sur lequel vous travaillez).
Vous êtes maintenant prêts à faire un pull à nouveau, chacun de votre côté et vous assurer que vous partez tous du même pied.
5.1-Requis CSS+HTML en équipe
Les commentaires CSS
- Vous devez commenter l’ensemble de votre code CSS afin de démontrer votre compréhension.
- Ajoutez également des séparateurs visuels (sous forme de commentaires) pour organiser vos styles en sections claires et structurées.
Exemple de commentaires CSS auquel je m'attends:
/*---------------------------------------------------------
# SECTION : Styles généraux
---------------------------------------------------------*/
body{
...
}
/* Conteneur en flex permettant d'aligner le contenu sur une ligne (row) et donc l'espace restant sera divisé entre chaque élément enfant du .container */
.container {
display: flex;
justify-content: space-between;
}
/* Titre principal de la page avec une transition d'agrandissement d'échelle au survol */
h1 {
font-size: 1.3rem;
transition: transform 0.3s ease;
}
h1:hover {
transform: scale(1.1);
}
/*----------------------------------------------------------
# SECTION : En-tête (nav, log etc)
----------------------------------------------------------*/
header{
...
}
/*----------------------------------------------------------
# SECTION : Héros
----------------------------------------------------------*/
section.hero{
...
}
/*----------------------------------------------------------------
# ADAPTATION PAR MEDIA QUERIES (Responsiveness) pour grands écrans
Car ce qui précède les media queries est stylisé pour mobile
en premier (mobile first).
----------------------------------------------------------------*/
/* Styles d'exception pour les écrans d'une largeur de minimum 778px et plus */
@media screen and (min-width: 778px) {
/* Adapter la taille fixe du titre principal qui était de 1.3rem et le changer pour 4vw qui équivaut à 4% de la largeur du viewport (de la fenêtre) . */
h1{
font-size: 4vw;
}
}
N'oubliez pas de styliser mobile first. Par la suite, ajouter les styles pour plus grands écrans via des @media queries.
N'oubliez pas de faire un commit et un push vers GitHub après chaque modification importante. Vous devez aussi faire un pull avant de commencer à travailler sur votre projet, afin d'être certain d'avoir la version la plus récente du projet.
En équipe
Ouvrez votre fichier main.css, ce sera le fichier qui contiendra tous les styles communs aux 4 pages (les styles pour l'entête et le pied de page notamment).
Créez des variables CSS qui représentent chacunes des couleurs de votre palette de couleur.
Ajoutez vos polices de caractères avec la techniques appropriées (dépendemment si c'est sur une police Google Font ou un fichier à ajouter dans vos assets avec @font-face).
Créez des variables pour le nom de vos différentes polices de caractères.
Comme mentionné juste avant cette liste de requis, préparez des groupes de commentaires CSS qui vont séparer les sections de vos styles. Par exemple, tous les styles généraux vont se trouver sous le commentaire
/*----- Styles Généraux -----*/
et les styles de la section Hero, se retrouveront sous le commentaire
/*------ Section Hero ------*/
Copiez-collez le fichier main.css 2 fois et renommez ces nouveaux fichiers styles-initialesEtudiant1.css et styles-initialesEtudiant2.css (changez initialesEtudiant pour vos initiales). Ces fichiers contiendront les styles spécifiques à chacune des pages qui vous sont attribué (2 chacunes). Importez ces feuilles de styles dans les pages HTML respectives, après main.css.
N'oubliez pas de lier les 2 nouvelles feuilles de styles aux pages HTML appropriées.
Retournez maintenant dans main.css, les étapes suivantes devront être faites dans ce fichier.
Appliquez la ou les polices de caractères si applicable. Ces styles seront appliqués sur les 4 pages.
Stylisez vos niveaux de titre (headings), minimalement h1, h2 et h3. Vous pouvez aussi styliser les autres niveaux de titres si vous en avez besoin. Ces styles seront appliqués sur les 4 pages.
Stylisez tout ce qui vous semble être commun à toutes les pages de votre site: les ancres (liens), les styles de boutons, les listes à puce s'il y a lieu etc. Ces styles seront appliqués sur les 4 pages.
N'oubliez pas de faire un commit et un push vers GitHub après chaque modification importante. Vous devez aussi faire un pull avant de commencer à travailler sur votre projet, afin d'être certain d'avoir la version la plus récente du projet.
5.2-Requis HTML+CSS individuel
Vous éviter des conflits git, comme vous travaillez sur les même fichiers pour cette étape, vous pouvez considérer travailler avec l'extension de VS Code nommée: Live Share. Voici quelques diapositives qui peuvent vous être utiles pour utiliser Live Share.
Vous devriez avoir fait un push vesr gitHub après avoir terminé les requis précédents.
Faites un choix entre vous: qui fait l'entête et qui fait le pied de page?
Chacun sur vos ordis faites un pull de gitHub pour récupérer la dernière version du projet.
Pour celui qui fait l'entête
Dans index.html, ajoutez les balises et le contenu pour l'entête header. L'entête contient probablement le logo, la navigation principale, etc, selon votre design.
N'oubliez pas de regrouper certains éléments ensemble avec des div si vous avez à placer les éléments avec flexbox les uns par rapports au autres.
Dans le fichier css main.css, ajoutez les styles pour l'entête afin de les rendre conformes au design de votre site.
Lorsque vous serez satisfait du résultat pour l'entête, et ce en mobile et en desktop, vous pourrez dupliquer la structure de ces sections dans les autres pages HTML. Vous n'avez pas besoin de dupliquer le code CSS, car il est déjà dans main.css.
Pour celui qui fait le pied de page
Dans index.html, ajoutez les balises et le contenu pour le pied de page footer.
N'oubliez pas de regrouper certains éléments ensemble avec des div si vous avez à placer les éléments avec flexbox les uns par rapports au autres.
Dans le fichier css main.css, ajoutez les styles pour le pied de page afin de les rendre conformes au design de votre site.
Lorsque vous serez satisfait du résultat le pied de page, et ce en mobile et en desktop, vous pourrez dupliquer la structure de ces sections dans les autres pages HTML. Vous n'avez pas besoin de dupliquer le code CSS, car il est déjà dans main.css.
N'oubliez pas de faire un commit et un push vers GitHub après chaque modification importante. Vous devez aussi faire un pull avant de commencer à travailler sur votre projet, afin d'être certain d'avoir la version la plus récente du projet.
Remise: étape 1
Date de remise de l'étape 1:
Groupe 1 et 2 avant le 2 3 mai 23h59.
Groupe 3 avant le 5 6 mai à 23h59.
Vous devez déposer ceci dans Teams/Devoirs:
- Le lien vers votre Figma (je dois avoir les droits d'éditions).
- Le lien vers votre répertoire publique sur gitHub (tous les fichiers complétés devront y être poussés).
- Un document Word dans lequel il est spécifié qui fait quoi?
- Qui a fait l'entête et qui a fait le pied de page?
- Qui intégrera quelle page parmis les 4 pages à intégrer?
Projet final-Étape 1