Détails des interfaces Web
Ce TP a pour vocation de mettre en avant certains usages de CSS, dans le cadre de la conception d'une interface Web.
Dans le premier cas d'usage, vous mettrez en pratique le centrage vertical et horizontal d'un élément dans son conteneur, en réalisant un formulaire de connexion. Ce faisant, vous verrez comment utiliser des icônes dans une page Web.
S'il vous reste du temps, les cas suivants proposent de gérer une interaction simpliste avec l'utilisateur exclusivement en CSS, en gérant un menu pouvant se replier. Vous pourrez ainsi pratiquer le positionnement CSS et la gestion des barres de défilements.
Objectifs de la séance ¶
- Centrage d'un élément verticalement et horizontalement
- Utilisation de polices d'icônes
- Gestion de l'interaction en CSS
- Approfondissement du positionnement CSS
- Gestion des barres de défilements
Mise en place du projet ¶
Comme nous avons vu précédemment, vous continuerez d'utiliser le dépôt Git du TP précédent.
Vous commencerez par créer un sous-répertoire pour ce projet (r202-ui/complements)
De manière similaire au TP précédent, vous ajouterez ensuite une nouvelle section dans le fichier README.md du projet contenant un lien vers le sujet de TP, par exemple :
Vous penserez à vérifier le bon état de votre dépôt distant sur GitLab.
- Créer un répertoire
r202-ui/complementspour tout le TP. - Ajouter d'une section pour le TP dans le fichier
README.mddu projet. - Vérifier l'état du dépôt distant.
Un formulaire de connexion ¶
Dans le sous-répertoire du TP (r202-ui/complements), vous réaliserez une page HTML avec le code CSS nécessaire pour obtenir des rendus similaires aux illustrations suivantes. Comme précédemment, vous commencerez par le plus petit (mobile-first), puis vous le modifierez à l'aide de « media queries ».
Vous penserez à ajouter un lien vers cette page dans la page d'accueil du serveur local.
L'idée générale est de centrer le formulaire dans la page. Pour cela, vous pourrez utiliser la propriété margin avec la valeur auto sur un élément fils d'un conteneur en flexbox.
Les icônes sont obtenues à l'aide de la bibliothèque « Material Symbols ». Elles ne sont visibles que sur les petits écrans et remplacé par du texte à l'aide du pseudo-élément before.
Vous ajouterez et versionnerez les nouveaux fichiers dans votre dépôt Git local et pousserez sur le serveur GitLab vos modifications. Vous prendrez le temps de vérifier que tout est bien fonctionnel.
- Centrage horizontal et vertical du formulaire dans la page.
- Structuration du formulaire.
- Utilisation d'icônes Material Symbols.
- Utilisation de pseudo-éléments
beforedans une « media query ». - Archivage des travaux à l'aide de Git.
Le menu « hamburger », pour ceux qui ont le temps ¶
Comme précédemment, dans le sous répertoire du TP (r202-ui/complements), vous récupérerez le fichier html suivant :
menu-burger.html (télécharger)
Vous penserez à ajouter un lien vers cette page dans la page d'accueil du serveur local.
Vous lui ajouterez le code CSS nécessaire pour obtenir un rendu similaire à l'illustration suivante :
Le bouton du menu et le menu sont sortis du flux d'affichage de la page et placés dans l'interface à l'aide du positionnement CSS.
Le menu pourra être caché ou affiché en modifiant sa hauteur, dans l'optique de l'afficher par la suite. Une autre solution plus rapide peut être d'utiliser la propriété CSS display.
Pour obtenir l'état du menu, affiché ou caché, vous utiliserez le pseudo-sélecteur :focus-within qui sera actif lorsque le bouton du menu aura le focus et inactif lorsqu'il aura perdu le focus.
Vous noterez que l'en-tête et le pied de page sont toujours visibles dans la page et que c'est la partie principale de la page qui peut défiler.
Ceux qui le souhaitent peuvent animer leur menu à l'aide de la propriété CSS transition.
Vous ajouterez et versionnerez les nouveaux fichiers dans votre dépôt Git local et pousserez sur le serveur GitLab vos modifications. Vous prendrez le temps de vérifier que tout est bien fonctionnel.
- Structuration de la page HTML.
- Archivage des travaux à l'aide de Git.
Le menu « coulissant », pour ceux qui ont le temps ¶
Comme précédemment, dans le sous répertoire du TP (r202-ui/complements), vous récupérerez le fichier html suivant :
menu-slide-panel.html (télécharger)
Vous penserez à ajouter un lien vers cette page dans la page d'accueil du serveur local.
Vous lui ajouterez le code CSS nécessaire pour obtenir un rendu similaire à l'illustration suivante :
Une zone à gauche de la page est cliquable, permettant d'ouvrir le menu. Les mêmes solutions que pour l'exercice précédent sont mises en application.
Vous ajouterez et versionnerez les nouveaux fichiers dans votre dépôt Git local et pousserez sur le serveur GitLab vos modifications. Vous prendrez le temps de vérifier que tout est bien fonctionnel.
- Structuration de la page HTML.
- Archivage des travaux à l'aide de Git.