Ce TP a pour objectif d'apporter une introduction aux réponses apportées à la problématique de l'hétérogénéité des périphériques de rendu des applications Web.
Plusieurs solutions ont été envisagées, mais l'essor de CSS3 a rendu l'approche visant à adapter l'interface de la page HTML à la résolution du périphérique d'affichage, comme la plus viable et répandue.
Dans le cadre de ce TP, nous nous intéresserons principalement à l'usage du module CSS3 « media queries ».
Vous maitrisez maintenant la structuration d'interfaces à l'aide du module CSS « flexbox ». Ces interfaces peuvent un peu s'adapter aux dimensions de l'affichage, mais compte tenu de l'hétérogénéité des périphériques dans le monde du Web, il est souvent nécessaire de réaliser des adaptations de l'organisation de la page, afin d'optimiser l'affichage en fonction de la surface d'affichage.
Pour réaliser ces adaptations, on a généralement recours aux media queries ». Cette fois encore, vous pourrez trouver de nombreuses ressources sur le Web, comme par exemple :
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/media-queries)
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 à verifier le bon état de votre dépôt distant sur GitLab.
r202-ui/media-queries
pour tout le TP.
README.md
du projet.
Vous ajouterez dans le sous répertoire du TP (r202-ui/media-queries
) le fichier HTML suivant :
1.html
(télécharger)
Vous ajouterez un lien vers cette page dans la page d'accueil du serveur local.
Puis toujours sans modifier le code HTML, vous lui ajouterez le code CSS nécessaire afin d'obtenir les rendus suivants pour la page HTML dans les différentes résolutions. Vous commencerez par le rendu le plus petit (mobile-first), puis vous le modifierez à l'aide de media queries.
Vous utiliserez exclusivement les modules CSS « flexbox » et « media queries » pour la structuration de la page et vous noterez que :
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.
Vous réaliserez une page HTML avec le code CSS nécessaire pour obtenir des rendus similaires aux illustrations suivantes. Vous commencerez par le rendu 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.
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.