0. Préparatifs
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".
Ouvrez ces trois versions dans des fenêtres côte à côte :
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é).
Rappel : les spécifications de nommage de vos fichiers
sont indiquées dans les modèles HTML et CSS fournis.
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 CSS 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 pas à adapter+insérer le commentaire du
modèle pour CSS.
Vérifiez vos copies avec le "HTML+CSS validator".
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
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.
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) :
- celui présentant le contenu de votre fichier HTML (→ son rendu, pas le source lui-même) ;
- 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 ;
- 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.