Projet HTML

http(s)://www.phmartin.info/cours/pHtml/       (4 ECTS ; 15h de CMs ;  15h de TDs * 3 groupes)

      Objectif : savoir utiliser HTML et CSS (+ peut-être : introduction à Javascript) en suivant des bonnes pratiques !

Enseignant : Philippe Martin  (Prenom.Nom @ univ-reunion.fr)

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 !

Plus généralement, relisez les rôles/devoirs de l'enseignant et de l'étudiant.   


Dans ce document, pour naviguer vers une autre page, utilisez les flèches de votre clavier
(ou la barre d'espace pour la page suivante). L'aide en bas à gauche de cette fenêtre donne plus de détails.

 

Évaluations - page Moodle

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).

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 pour toute page Web ou fichier PDF, vous pouvez associer vos annotations à des parties de cette page Web.

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 :

Les TDs consistent essentiellement à vous inspirer d'exemples sur le Web (typiquement, dans des pages pointées par ce cours). C'est pourquoi,

  1. 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
  2. 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


CM 1 :


TD 1

 

Introduction à CSS


CM 2 :  introduction à CSS                                                            catégorisation d'objets HTML/CSS

Avant le 2nd CM (le 11/03), étudiez
  1. https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade
  2. les 13 premières pages de https://www.w3schools.com/css/
    (→ jusqu'à la page "CSS Box Model" incluse),
  3. les documents que nous verrons lors du 1er CM.


TD 2

 

Modélisation et requêtes


CM 4 :



TD 4  (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"

 

Mode réactif/adaptatif, position, float, display, flex, grid

CM 5 :


TD 5 :  évaluation de (l'inclusion/illustration dans le projet) des types d'éléments cités dans ces 4 points
      (sauf "select-like via ul" qui fera plutôt l'objet d'une question via Wooclap).
          Remarques : 1. à partir du TD 5, lors 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'a pas été effectué ; 2. 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).
      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 5 (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, numéros dans certaines cellules) :
i. tout cela doit pouvoir être changé SANS QUE vous deviez changer de règles CSS (→ PAS de solution "ad hoc"),
ii. pour adapter l'affichage des lignes et colonnes, ces règles CSS doivent prendre en compte la largeur de la fenêtre et la
    largeur que prennent les éléments (ainsi, encore une fois, ajouter du texte à un élément ne doit PAS nécessiter de
    changer les règles CSS pour maintenir une présentation adéquate). Votre solution doit avoir des cellules (normales,
titres de lignes/colonnes) ayant plus ou moins de texte dedans afin d'avoir différentes tailles en largeur et hauteur
permettant à votre travail d'être directement évaluable : votre évaluateur ne doit PAS avoir à rajouter du texte
dans votre fichier pour voir si votre CSS marche correctement !  Enfin, vous aurez un bonus si vous réussissez à
effectuer cet exercice sans utiliser de requête 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).
 Grande fenêtre
 A B C D
1a  A1 B1 C1 D1
2b  A2 B2 C2 D2
             
Petite fenêtre
option 1       
A B
1a  A1 B1
2b  A2 B2
C D
1a  C1 D1
2b  C2 D2
       
Petite fenêtre
option 2       
A   B
    C     D
1a   A1 B1
    C1    D1
2b   A2 B2
    C2    D2
             
Très petite fenêtre
option 1                
 A
1a  A1
2b A2
 B
1a  B1
2b B2
 C
1a  C1
2b C2
 D
1a  D1
2b D2
       
Très petite fenêtre
option 2                
 A
      B
           C
               D
1a  A1
    B1
        C1
            D1
2b   A2
    B2
        C2
            D2
               

 

Rollover, variable, pseudo-classe, pseudo-élément, CSS specificity


CM 7 :


TD 7 :  évaluation de l'usage des 6 types d'éléments cités ci-dessus

 

Transition, transformation, animation et autres effets CSS


CM 8 :


TD 8 : évaluation de l'usage des cinq types d'effet cités dans le second point ci-dessus.