TD 02 (Introduction à CSS)

Tout ajout à cette page après le mercredi 6 mars 2024 sera sans conséquence sur le travail de préparation à réaliser pour ce TD.  E.g., un point relatif au QCM pour ce TD (comme celui pour le TD 01) sera peut-être ajouté. Comme pour le TD 01, le QCM pourra contenir des questions de compréhension sur les fichiers sur lesquels se focalise le TD (ici, les fichiers HTML et CSS du site CSS Zen Garden), et comme pour le CM3, le QCM pourra aussi porter sur tous les documents pointés par la page centrale du cours pour le CM1 et le CM2. Concernant les tutoriaux W3Schools (HTML et CSS), cela concerne leurs premières sections en entier (→ jusqu'à "HTML Forms" non inclus pour HTML et jusqu'à "CSS Advanced" non inclus pour CSS).
Ajout effectué le 9/03/2024 : pour ce TD, l'évaluation par binôme est autorisée.
Ajout effectué le 14/03/2024 : i) il n'y aura pas de QCM durant ce TD ; ii) votre fichier CSS est maintenant à intégrer dans votre fichier HTML et c'est votre fichier HTML qui est à rendre ; voir ci-dessous les points en vert qui ne sont pas datés du 10/03/2024 ; l'intégration en question n'est essentiellement qu'un copier-coller à effectuer donc sans conséquence sur le travail réel à effectuer, et il n'y a même plus à utiliser le modèle pour le CSS.

0.  Préparatifs

1.   Lisez la page Wikipedia à propos de csszengarden.com et relisez le paragraphe à propos de ce site
     dans la section "Limite de CSS" de la page Wikipedia sur les "feuilles de style en cascade".

2.   Ouvrez ces trois versions dans des fenêtres côte à côte :

   • CSS Zen Garden avec cette feuille de style particulière
     (notez la différence de présentation avec la version actuelle)
   • ces 2 versions où les éléments DIV ont été colorés pour montrer leurs imbrications :
     • cette version colorée utilisant la feuille de style particulière du point ci-dessus
     • cette version colorée mais sans lien (correct) à une feuille de style.

3.  Copiez sur votre machine (dans le répertoire pour ce TD 02)

   • le fichier HTML de la page centrale du site CSS Zen Garden (csszengarden.com),
     soit en utilisant le lien fourni dans la page de ce site,
     soit en utilisant les menus "Fichier – Sauvegardez sous" de votre navigateur
       depuis la page ou, préférablement, depuis celle de sa source HTML (même si ici
       cela ne fait pas de différence vu les chemins absolus utilisés dans les liens) ;
   • un fichier CSS associé à ce fichier HTML
     • soit en utilisant un lien (celui fourni pour "exemple" ou,
       si vous êtes aventureux, un lien vers un des autres modèles pointés),
       
     • soit en accédant au fichier CSS réellement utilisé par la page centrale de ce site et
       en le sauvegardant (il est similaire au fichier CSS "exemple", légèrement plus compliqué).
   Ajout pour 2025. Rappel : les spécifications de nommage de vos fichiers sont indiquées dans les modèles HTML et CSS fournis.

4.  Dans votre fichier HTML, intégrez (aux bonnes places !) toutes les lignes/informations du modèle suivant (lignes/informations qui ne sont pas déjà dans ces fichiers, commentaires inclus) : modèle pour HTML (pour ce TD).
   Ainsi, par exemple, votre nom et prénom doit apparaître lorsque votre navigateur affiche votre version locale.
   Faite un copier-coller du contenu de votre fichier HTML dans l'élément "style" (qui est maintenant dans l'entête du modèle HTML) puis travaillez seulement sur ce fichier HTML.
   Vous n'avez plus à adapter+insérer le commentaire du modèle pour CSS.

5.  Vérifiez vos copies avec le "HTML+CSS validator".
   Ajout pour 2025. Enlevez les "warnings" du type "unnecessary for element" en documentant l'opération avec un commentaire, e.g., remplacer '<header role="banner">' par '<header><!--pm: out: role="banner"-->'. En effet, comme indiqué dans le modèle HTML fourni, vos ajouts ou modifications doivent être documentés (et donc commencer par vos initiales, "pm" dans l'exemple précédent).
   Utiliser aussi le bouton "BP check" qui effectuera certaines vérifications sur votre code CSS. D'autres BPs seront manuellement vérifiées. Ainsi, entre autres, vous devez (sauf si vous voulez perdre des points)

   • compacter le source CSS, par exemple,
     • dans une règle, les attributs de même nature (e.g., ceux pour les couleurs ou ceux pour le positionnement) doivent être (lorsque possible) sur la même ligne ; réordonnez-les si cela vous permet de grouper les attributs de même nature ; soyez prudent dans vos modifications (et en particulier si vous réordonnez des règles) : vérifiez après chaque modification que celle-ci n'a pas eu un effet inattendu sur la présentation du document ;
     • les lignes blanches ne doivent être utilisées que pour délimiter des règles de nature similaires (e.g., celles pour les titres de sections, celles pour le footer, ...)
   • remplacer les tabulations (certaines modèles CSS du site en ont, d'autres non) par des espaces, vérifier que votre indentation est correcte et que vos '{' et '}' sont sur une même ligne ou bien sur une même colonne.

1.  Remplacez les spécifications "absolues" par des "relatives"

Remplacez toutes les spécifications "absolues" ("px", "absolute", ...)
par leurs contreparties "relatives" ("%", "rem", ...) en conservant à peu près la même présentation
(e.g., conservation de la position et la taille des éléments textuels et des images).
Quand vous modifiez,

• faites-le ligne par ligne (et testez à chaque fois)
• commentez ce qu'il y avait avant au lieu de le supprimer !

Vérifiez régulièrement avec le "HTML+CSS validator" que votre CSS n'a pas d'erreur. Il ne marchera pas correctement s'il y a des erreurs. Vérifier aussi (manuellement et avec le bouton "BP check") que vous suivez (au moins) les BPs listées pour ce cours.

2.  Prise en compte de différents médias

1. Ajoutez des règles "@media" – voir aussi ici – afin que votre page s'adapte bien à plusieurs tailles d'écran (desktop / mobile / ...).  Ajout effectué le 10/03/2024 : vous avez le droit de d'utiliser des fontes différentes dans différents "media" (comme par exemple expliqué ici), notamment si vous êtes en panne d'idées pour montrer des différences entre les présentations pour différents médias, mais l'adaptation à différentes tailles d'écran est prioritaire.

2. Adaptez de manière explicite+conservative votre fichier CSS pour une approche "mobile en premier" [mobile first] ;  "de manière explicite+conservative" veut dire que

   • pour une modification qui est un ajout, faites-le sur une ligne séparée et ajoutez en fin de cette ligne un commentaire indiquant que cet ajout est pour tel but : ici, utilisez le commentaire
     "/*mob_1st*/" ;
   • pour une modification qui n'est pas un ajout, ajoutez un passage à la ligne pour que le passage modifié soit isolé sur une ligne à lui et ajoutez en fin de cette ligne un commentaire indiquant l'ancienne version du passage modifié et que le changement est pour tel but : ici, utilisez un commentaire du type "/*bef.mob_1st: ...ancienneVersion...*/".

Pour vérifier que votre CSS est adapté aux smartphones, vous pouvez utiliser la visualisation "Responsive Design Mode" de votre navigateur, e.g. via les sous-menus "Tools" - "Web Developer" - "Responsive Design Mode" ou via l'icône du smartphone dans les "Web Developer Tools".

Vérifiez régulièrement avec le "HTML+CSS validator" que votre CSS n'a pas d'erreur. Il ne marchera pas correctement s'il en a. Vérifier aussi (manuellement et avec le bouton "BP check") que vous suivez (au moins) les BPs listées pour ce cours.

Au plus tôt lors de votre séance de TD 02 et avant sa fin  (cf. grille d'évaluation)

• faites évaluer votre travail par l'enseignant responsable de votre (groupe de) TD ;
  pour cela, la fenêtre de votre éditeur doit contenir 2 vues horizontales – une vue de faible hauteur sur le fichier HTML et une vue de hauteur plus importante sur votre fichier CSS – et la fenêtre de votre navigateur doit contenir au moins 3 onglets (côte à côte) :
  1. celui présentant le contenu de votre fichier HTML (→ son rendu, pas le source lui-même) ;
  2. celui affichant le résultat de la validation de votre source HTML par
     https://validator.w3.org/#validate_by_upload+with_options ;
     préparez cette page AVANT de venir au bureau de votre responsable de TD pour vous faire
     évaluer (vu le nombre d'étudiants par groupe, chaque évaluation doit être courte) ;
     n'essayez pas de montrer une évaluation par un validateur sur votre machine ou un
     validateur à une autre adresse que celle ci-dessus, vous perdriez au moins 1 point ;
     
  3. le Google Sheet temporaire ici pointé ;  lorsque votre responsable de TD vous le demandera,
     vous y copierez (dans la 1ère case libre) les deux dernières lignes du
     rapport qui s'affiche dans la console de votre navigateur
     lorsque vous aurez appuyé sur le bouton "BP check" (dans le 1er onglet cité ci-dessus) ; ces
     deux dernières lignes sont précédées de "Summary for a copy/paste into the evaluation grid:" ;
• lorsque ne souhaitez/pouvez plus être ré-évalué durant ce TD
  (→ lorsque vous avez effectué votre dernière évaluation ; avant la fin du TD),
  soumettez via Moodle le fichier HTML que vous avez fait évaluer (pour cela, recherchez votre groupe dans la section "TD 02" ;
  attention, vous ne pourrez pas re-soumettre votre travail ultérieurement).
  Note : inutile de soumettre si vous n'êtes pas venu au bureau de votre responsable de TD
      et qu'il y a eu durant ce TD un moment durant lequel ce responsable de TD n'avait
      personne à évaluer (vous avez alors 0/20 et il est donc inutile de soumettre).
      Toutefois, si vous n'avez pu être évalués parce que, durant ce TD, le responsable de TD a
      toujours eu une personne à évaluer qui était prioritaire par rapport à vous (ceux qui
      repassent pour être ré-évalués ne sont pas prioritaires), signalez-le à votre responsable de TD,
      puis, si celui-ci confirme ce que vous signalez, soumettez.