Objectif : savoir utiliser HTML et CSS
(+ peut-être : introduction à Javascript)
en suivant des bonnes pratiques !
Enseignant principal (CMs + groupes 2 et 3) : Philippe Martin
(Prenom.Nom @ univ-reunion.fr)
Pour les TDs du groupe 1 : Nathan Aky (Prenom.Nom @ ...)
Pour des questions administratives (affichage de notes, ...),
adressez-vous à "scolarit @ univ-reunion.fr"
EN ME METTANT EN COPIE !
Pour les justificatifs d'absences, utilisez ce site et envoyez-les moi par e-mail. Vérifiez le
règlement général des études pour les motifs et délais autorisés.
Une demande de suivi de cours en distanciel (via Zoom ou les enregistrements audio
effectués via Zoom) doit s'accompagner d'un justificatif d'absence autorisé.
Si vous m'envoyez un e-mail, outre votre nom,
INDIQUEZ que vous êtes en L1 Info !
1 note de CC (Moodle et TD1+TD2 ; coeff. 1,5) et
1 note de projet (moyenne des 6 notes de TDs de projet ; coeff. 2,5).
TOUTE évaluation de ce cours (dont la création de code pour les TDs) est
i) "sans communication", et ii) à titre individuel
(pour les TDs, les binômes sont néanmoins autorisés).
Les évaluations via Moodle ou Wooclap sont
"sans document" (donc aussi sans réseau social) et "sans calculatrice".
La page Moodle de ce module ne sera utilisée que pour les évaluations
(→ dès le début du cours, cliquez sur ce lien ; la page Moodle
s'ouvrira dans un(e) autre fenêtre/onglet).
La majorité des cours (CMs/TDs) incluront une "petite évaluation écrite"
via Moodle.
Ces petites évaluations permettront de
vérifier que vous avez étudié vos précédents CMs et préparé vos TDs,
vérifier que vous suivez tout au long de chaque cours,
faire l'appel automatiquement.
Sauf cas exceptionnel (voir avec moi au prochain TD),
toute absence non administrativement justifiée par e-mail
(à moi, avec la scolarité
– jeannick.voulamale @ univ-reunion.fr –
en copie, et au moins un certificat en pièce jointe)
entraînera donc un 0 pour ces petites évaluations
(la présence aux CMs et TDs est officiellement obligatoire).
Certaines questions des petites évaluations
pourront éventuellement ne pas être comptées (à voir à la fin du cours).
Aucune évaluation de contrôle continu n'a besoin d'être rappelé par e-mail.
Une évaluation de contrôle continu peut être une évaluation surprise.
Il se peut donc qu'il y ait d'autres évaluations de contrôle continu
en plus des "petites évaluations" citées ci-dessus.
Vous devez venir à ce cours de "Projet HTML" avec un ordinateur portable
(pas juste un smartphone).
TOUTES les évaluations de ce cours sont "sans support de cours autorisé".
CMs et TDs
Des modifications/ajouts peuvent être effectués à n'importe quel moment dans tout
document de ce cours.
Pour être sûr d'afficher la dernière version, faites un
<shift>Reload
sur la page de votre navigateur affichant/accédant votre document.
Comme les années précédentes, ce cours suit en partie le modèle pédagogique de la
classe inversée → pour chaque CM, vous devez étudier les documents pointés
par ce cours pour ce CM, AVANT que ce CM ne soit présenté
(→ posez vos questions durant le CM).
Tous les TDs sont évalués → préparez-les ! Pour cela :
c'est en fin de CM, lors de la présentation du TD correspondant,
qu'il vous faut signaler vos éventuelles incompréhensions relatives à ce TD →
vous devez avoir préparé vos questions lors de votre préparation de ce CM ;
entre un CM et le TD qui lui correspond, il y a 7 à 10 jours et donc le CM suivant ;
au moins 24h avant ce CM suivant, vous devez avoir déposé vos travaux
pour ce TD dans la page Moodle "Pré-dépôt pour le TD ..." pertinente (vérifiez
les dates limites dans ces pages de pré-dépôt) :
si vous ne déposez pas ou si vous déposez un fichier contenant moins de 20%
des travaux demandés, vous aurez des points en moins sur votre rendu final ;
valeur par défaut initiale : 3 points en moins ;
si cela n'est pas suffisament incitatif, vous serez avertis que plus de points
(6 ou 12) seront enlevés ;
si vous déposez un fichier vide ou non pertinent par rapport à ce qui est
demandé, donc si vous tentez de tricher, vous aurez 0 à votre rendu final ;
lors de ce CM suivant :
si vous n'avez pas pu effectuer certaines tâches pour cause d'informations
manquantes, vous devez poser vos questions sur ces tâches ;
si votre rendu final lors du TD est différent de votre pré-rendu, et que
la différence n'est pas expliquée par vos questions et les réponses données,
vous aurez des points en moins pour cette différence
(valeur par défaut initiale : 3 points en moins) ;
une revue de certains travaux sera effectués ;
si vous ne prenez pas en compte les remarques (qui, statistiquement, seront
déjà des rappels) données durant cette revue, ceci sera pris en compte
dans l'évaluation de votre travail
(que ces remarques aient été effectuées sur vos propres travaux ou pas).
au début du TD, vous devez indiquer durant quel "quart de TD" vous souhaitez que vos
travaux soient évalués ; passé le 1er "quart de TD", vous perdez des points :
des détails sur ceci – et les raisons de ceci – sont donnés dans la
grille d'évaluation des TDs.
Les TDs consistent essentiellement à vous inspirer d'exemples
sur le Web (typiquement, dans des pages pointées par ce cours). C'est pourquoi,
si vous faîtes juste des "copier-collers", ou si vous répondez incorrectement
aux questions vérifiant que vous avez entièrement compris ce que vous avez rendu,
vous n'aurez pas de points, et
il n'est généralement pas nécessaire de donner des solutions aux TDs
(les pages pointées sont les solutions qu'il vous faut adapter en fonction de votre
projet et des bonnes pratiques fournies).
Introduction à HTML et aux bonnes pratiques de codage
TD 3 (1er TD du projet) :
évaluation de la "modélisation" et des "structures de fichier HTML"
de chaque étudiant/binôme,
et évaluation de ses "expansions/requêtes par CSS"
les propriétés/raccourcis
"flex"
[1] et
"grid"
[1]
(voir aussi "float")
(comme suggéré par Corentin R., utilisez
Flexbox Froggy si cela vous aide)
TD 4 :
évaluation de (l'inclusion/illustration dans le projet) de ces types d'éléments et fin d'évaluation des travaux du TD 3 ;
plus généralement, pour chaque TD de projet, il y aura des
pénalités supplémentaires si TOUT ce qui devait être fait
pour les "TDs de projet" précédents n'est pas effectué
(remarques :
après ce TD 4, il y a moins de travaux à effectuer pour chaque TD ;
si votre appartenance à un binôme change,
vous pouvez reprendre les parties que vous avez effectuées dans un précédent
binôme/monôme) ;
mettez-vous en binôme : les monômes ne sont pas autorisés pour ce TD 4 ;
n'oubliez pas
d'organiser votre document (→ au moins ses sections)
de manière sémantique
(→ de manière similaire à la hiérarchie que vous avez construite dans la phase de
modélisation)
et d'inclure un plan pour vos sections
(et donc toutes vos sous-sections) ; similairement, pour rappel,
toute illustration d'un nouveau type d'élément doit
être précédé d'une indication (e.g., "Voici un exemple d'utilisation de flex en tant que
valeur :", et doit visiblement fonctionner
(e.g., inutile d'illustrer "grid" si l'on ne voit pas que plusieurs éléments
sont organisés dans une grille).
À partir de ce TD 4 (inclus), vos tables doivent être converties en grilles.
Au moins l'une d'entre elles (→ indiquez
explicitement laquelle) doit suivre l'une des deux options d'adaptation d'affichage
illustrées ci-dessous pour le cas où la fenêtre devient petite ou très petite
(considérez ces 2 cas, pas juste un seul ; de plus, la grille doit avoir au moins
2 lignes – en plus de la ligne d'entête – et au moins 4 colonnes).
Votre solution ne doit pas seulement fonctionner que pour l'exemple ci-dessous
(2 lignes, 4 colonnes, petits éléments dans les cellules de la grille) : l'adaptation
de l'affichage des lignes et colonnes doit dépendre de règles CSS prenant en compte
la largeur de la fenêtre et la largeur que
prennent les éléments (→ ajouter du texte à un élément ne doit pas nécessiter de
changer vos règles CSS pour maintenir une présentation adéquate).
Enfin, des bonus seront donnés si vous réussissez à
effectuer cet exercice sans utiliser de requêtes média (→ pas de "@media" ;
mode adaptatif) : + 1 point pour l'option 1,
+ 3 points pour l'option 2 (il y a déjà 1 point
de bonus si vous utilisez l'option 2 même avec des requêtes média).
TD 5 (1h30) :
évaluation de l'usage des 6 types d'éléments cités ci-dessus
Transition, transformation, animation et autres effets CSS
CM 6 (1h30 ; 31/03/2025) :
revue de vos pré-travaux pour le TD 5 ;
pour chacun des 3 types éléments suivants qui n'est pas illustré pour ce pré-TD05
ou qui ne
fonctionne pas, il y aura 1 point de pénalité au TD 5 :
variable, pseudo-classe et pseudo-élément
transitions [1et 2],
transformations [1et 2],
animations [1et 2] et
autres effets CSS, e.g.
w3-opacity
(w3-css
doit être référé ; → violation de
CORS depuis BPs_check
mais il a été adapté
pour l'ignorer),
SVG clip/mask (un des deux ou les deux), ... ;
pour votre TD 6, vous illustrerez
au moins ces 5 types d'effet, mais pas de
réflection d'image
car cela ne fonctionne pas dans Firefox
TD 6 (1h30 ; jeudi 10/04/2025) :
évaluation de l'usage des cinq types d'effet cités dans
le second point ci-dessus
revue de vos pré-travaux pour le TD 6 ;
pour chacun des 3 types éléments suivants qui n'est pas inclus dans le travail
rendu ou qui ne fonctionne pas, il y aura 1 point de
pénalité au TD 6 : transition, transformation, animation ; comme toujours, avant
chaque illustration d'un nouveau type d'élément,
indiquez-la (e.g., "Voici un exemple de transition :").
les fonctions du module
Moveable :
importez ce module puis
- associez à vos éléments ("div", ...)
des attributs définis dans le module, e.g. "cdkDropList", ou
- appelez les fonctions importées avec les IDs de certains éléments,
afin de permettre à l'utilisateur de déplacer des éléments
(comme pour les 2 éléments encadrés ci-dessus)
, en plus de les agrandir grâce à
l'attribut CSS resize"
[1] ;
ne pas confondre cette possibilité de déplacer [move/drag] avec celle de
glisser/déposer [drag&drop] ;
si vous écrivez des fonctions (i.e., si vous ne faites pas qu'appeler des
fonctions déjà existantes), il vous
faudra respecter les
BPs relatives à la programmation, en particulier
ces BPs pour les noms de fonctions et
ces BPs pour la création des noms de constantes ou variables de programme (BPs_check.js, qui suit
ces BPs, fournit de nombreux exemples) ;
à partir de ce TD, vous avez dans ce cours
le droit de réutiliser du code JS (dont le code dans cette page)
;
si vous insérez du code JS dans votre fichier, celui-ci doit
respecter les BPs fournies et vous devez le
comprendre (et donc pouvoir expliquer comment/pourquoi ce code fonctionne) ;
si vous ne faites que référer (→ importer) du code JS, celui-ci peut ne pas
respecter les BPs fournies et
il ne vous est pas demandé de comprendre comment il fonctionne ;
lorsque vous avez le choix entre ces deux possibilités (comme
c'est le cas pour permettre à l'utilisateur
de bouger et agrandir des éléments), vous pouvez choisir l'alternative que
vous préférez mais vous devez savoir expliquer comment fonctionne
l'alternative utilisant l'insertion de code dans votre fichier
TD 7 (2h ; 17-18/04/2025) :
évaluation de l'usage
de ces types de fonctionnalités (move/drag + resize) sur un même élément
(et, dans cet élément,
n'oubliez de mentionner qu'il est bougeable et agrandissable) ;
de ces types d'éléments
(→ au moins 5 types d'éléments de formulaires différents, dont 1 "select",
1 "input" de type "nombre",
1 "input" de type "range", 1 "input" de type "text" et 1 "textarea")
;
de vérifications et d'affichage (via JS) des entrées dans ces formulaires ;
au moins 3 vérifications :
pour au moins un "input" de type "text", vérifiez que le texte/nom entré
ne contient pas d'espace et contient 1 (seule) majuscule : la 1ère
lettre du nom/texte ;
les messages d'erreur doivent être affichés via une fonction "putsErr"
que vous créerez pour afficher son paramètre
à la fois dans la console et via la fonction "alert" ;
chaque message d'erreur doit être explicite : précisez le formulaire
(ou la question) auquel le message est relatif, quelle valeur qui vient
d'être entrée est erronée et pourquoi (donnez la contrainte qui n'a
pas été suivie par l'utilisateur) ;
de l'affichage des valeurs changées dès qu'elles sont changées, sauf pour
les zones de texte : pour celles-ci, l'affichage ne doit avoir lieu que lorsque
des données sont soumises (→ vous donc devez avoir un
bouton "Soumettre" ou "Submit") ; les affichages doivent être effectués via une
fonction "puts" que vous créerez pour afficher son paramètre à la fois dans la
console et via la fonction "confirm" ;
de l'objet "location" : tout à la fin de votre page, insérez un lien vers
votre propre page (→ sans utiliser le nom de votre fichier) mais
avec un paramètre GET
tel que, lorsque ce lien est activé, votre page affiche juste
après ce lien une phrase qui est invisible lorsque ce lien n'est pas activé
(→ utilisez "Révèle phrase." pour le texte de l'ancre de ce lien,
utilisez "showHiddenFinalSentence" pour le nom de votre paramètre, et n'utilisez
surtout pas le sélecteur CSS ":target" pour effectuer cet exercice : comme
illustré durant le CM 7, cet exercice repose sur la détection de la présence
du paramètre "showHiddenFinalSentence")
APIs JS pour le DOM, le Web Storage, les cookies et les données du navigateur
CM 8 (14/04/2025) :
revue de vos pré-travaux pour le TD 7 ;
pour chacun des
3 points suivants qui n'est pas illustré ou qui ne fonctionne pas,
il y aura 1 point de pénalité au TD 7 :
1 élément de formulaire avec, à chaque changement, vérification+affichage
(en JS) de la valeur changée
1 élément déplaçable ou agrandissable (pour ce pré-TD, c'est un "ou" ;
pour le TD, c'est un "et")
1 exploitation de l'objet "location" :
voir ci-dessus (TD 7) pour les spécifications ;
TD 8 (2h ; 24/04/2025) :
évaluation de l'usage des quatre types de fonctionnalités cités dans le
2nd point ci-dessus
(pour la session 2024, l'illustration de la 4ème fonctionnalité a été transformé
en bonus) ;
pas de pré-TD pour ce TD final puisqu'il n'y a pas de CM intermédiaire
entre le CM 8 et ce TD
