TD 02 (Introduction à 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
       (note : dans la version du précédent point, si vous effectuez un "middle-click" sur un élément, vous pourrez i. voir la structure de cet élément via des couleurs, puis ii. naviguer d'élément en élément en utilisant les flèches de votre clavier).
     • 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 pointé par la page centrale du site CSS Zen Garden (csszengarden.com),
     en utilisant le lien fourni dans la page de ce site ;
   • un fichier CSS associé à ce fichier HTML en utilisant le 1er lien donné pour exemple dans la page centrale du site (ou, si vous êtes aventureux, un lien vers un des autres modèles pointés).
   Rappel : 1) les spécifications de nommage de vos fichiers sont indiquées dans les modèles HTML et CSS fournis, 2) le travail en binôme est obligatoire.

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 HTML pour le TD 02. Il s'agit donc de "fusionner" (intelligemment) les deux fichiers HTML.
   Ainsi, par exemple, votre nom et prénom doit apparaître lorsque votre navigateur affiche votre
   version locale.
   Faite ensuite un copier-coller du contenu de votre fichier CSS dans l'élément "style" (provenant de
   l'entête du modèle HTML) puis travaillez seulement sur ce fichier HTML.

5.  Vérifiez vos copies avec le "HTML+CSS validator" (lien en haut de votre fichier).
   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). Vous n'avez pas le droit d'enlever (commenter) des éléments entiers HTML pour résoudre d'autres warnings/erreurs HTML : si vous avez de telles erreurs, e.g. à propos d'éléments "h1", "aside" ou "nav", c'est que votre fusion du "fichier HTML de Zen Garden" et du "modèle HTML pour le TD 02 est incorrecte.
   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 sur une même colonne.

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

Remplacez toutes les spécifications "absolues" ("px", "absolute", ... ; dans une moinde mesure, "pt")
par leurs contreparties "relatives" ("%" et, dans une moindre mesure, "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).
Lorsque possible, minimisez l'usage de "rem" et de "pt", car ils ont des côtés "absolus" ; une règle de BPs_check.js vérifie que vous n'en utilisez pas trop.

Quand vous modifiez,

• faites-le ligne par ligne (et testez à chaque fois)
• commentez ce qu'il y avait avant au lieu de le supprimer !
  Dans un tel commentaire, comme illustré ci-dessus, n'oubliez pas vos initiales et le "out: ".

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érifiez aussi (manuellement et avec le bouton "BP check") que vous suivez (au moins) les BPs listées pour ce cours.

La suppression des "position: absolute" qui existent dans les feuilles de style de Zen Garden (suppression obligatoire ; 0/20 si vous "oubliez") entraîne des déplacements majeurs dans l'affichage de certains éléments. En effet, "position: absolute" sort un élément (celui auquel il est associé) du "flux normal" ["normal flow"] du document. Vous devez donc rechercher et lire des pages du site de MDN relatif au "flux normal" en CSS, au minimum celle-ci relative à "position" et celle-ci relative à "float". Notez aussi que si vous n'arrivez pas à ajuster directement la position d'un élément particulier, vous pouvez essayer d'ajuster la position de son parent direct (ou d'un de ses parents indirects).

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 / ...).  Vous avez le droit 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+additive" (cf. ci-dessous) votre fichier CSS pour une approche "mobile en premier" [mobile first] ;  "de manière explicite+additive" veut dire que

   • pour une modification qui est déjà un ajout, faites-le sur une ligne séparée et, en fin de cette ligne, mettez un commentaire indiquant que cet ajout a ce 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 ce 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.