Des interfaces Web adaptatives
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 ».
Objectifs de la séance ¶
- Utilisation des dépôts Git/GitLab
- Structuration de pages Web
- Utilisation du module « flexbox »
- Gestion réactive de page
- Utilisation des « media queries »
Introduction au 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 :
- le site du Mozilla Developer Network
- ou le site du w3schools.
- Faire le tour des propriétés/fonctionnalités offertes par le module CSS « media queries ».
- Prendre en main succinctement le fonctionnement du module CSS « flexbox » au travers des exemples.
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/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.
- Créer un répertoire
r202-ui/media-queriespour 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.
Une première interface réactive ¶
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 :
- la largeur de la page ne dépasse pas 1000px, même si la zone d'affichage est plus grande,
- il n'y a pas de barre de défilement,
- le contenu principal et le contenu secondaire sont de même hauteur lorsqu'ils sont organisés en colonne,
- le contenu principal occupe l'espace supplémentaire lorsqu'ils sont organisés en ligne avec le contenu secondaire.
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 à l'aide de « flexbox ».
- Modification de la structure de la page à l'aide de « media query » et de « flexbox ».
- Archivage des travaux à l'aide de Git.
Une seconde interface réactive ¶
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.
- Structuration de la page HTML à l'aide de flexbox.
- Modification de la structure de la page à l'aide de media query et de flexbox.
- Archivage des travaux à l'aide de Git.