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é".
L'examen de rattrapage sera par QCM (1h30 + 1/3 temps) : questions semblables
à celles posées via Moodle durant le cours, mais via des grilles papier.
Ce sera le mercredi 12 juin 2024 à partir de 14:00, en Amphi B uniquement
(→ non pas aussi en S2-0-S6, contrairement à ce qui est encore pour
l'instant affiché dans l'emploi du temps en ligne).
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 !
Rappel : pour cette préparation, vous avez 7 à 10 jours entre un CM et le TD qui lui
correspond, et donc un CM intermédiaire durant lequel vous devez poser
vos questions : pas de question pertinente sans préparation.
Pas de temps pour vous de prendre en compte les réponses à temps si posées lors du TD.
De plus, votre responsable de TD sera déjà bien occupé par les évaluations des rendus.
Des solutions de TDs sont données uniquement lorsque le TD ne consiste pas seulement à
vous inspirer d'exemples sur le Web (typiquement, dans des pages
pointées par ce cours). Dans ce dernier cas, le plus commun, la
source d'inspiration est déjà une solution (qu'il vous faut adapter en
fonction de votre projet et des bonnes pratiques données).
Les revues (→ corrections orales) des pré-TDs – et, au final, votre responsable
de TD – signalent également ce qui est problématique.
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 ; 2/04/2024) :
revue de vos pré-travaux pour le TD 5 ;
ceux qui n'auront pas soumis de
pré-travail au moins 24 heures avant le CM 6 auront une pénalité de
3 points au 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 ; mercredi 10/04/2024) :
é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 ;
ceux qui n'auront pas soumis de
pré-travail au moins 24 heures avant le CM 7 auront une pénalité de
3 points au 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 ; 19/04/2024) :
é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 (15/04/2024) :
revue de vos pré-travaux pour le TD 7 ;
ceux qui n'auront pas soumis de
pré-travail au moins 24 heures avant le CM 8 auront une pénalité de
3 points au 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 ; 26/04/2024) :
é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
