TP 10 : Manipulation des outils pour le design adaptatif

Licence Informatique/Maths 1<sup>e</sup> année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Les exercices du TP sont progressifs : le premier permet de se familiariser avec les principaux outils du responsive, et le second vise à appliquer ces outils pour faire une mise en page simple.

Notes de cours

Exercice 1 — Manipulation des outils pour le responsive #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW1/TP10/ex1/index.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Créer une page HTML avec un titre et du texte dans un paragraphe, puis modifier le CSS pour remplir les conditions suivantes ; tester en redimensionnant la fenêtre. Attention, cet exercice utilise plusieurs techniques différentes (vues en cours), pas seulement des media queries !

  1. La couleur de fond doit être verte si la fenêtre fait plus de 1000px de large, et rose sinon.
  2. Le paragraphe doit respecter les contraintes suivantes :
    • le texte doit être justifié dans tous les cas
    • il doit faire 800 pixels de largeur et sa boîte doit être centrée horizontalement
    • mais si la fenêtre est trop étroite (moins de 800 pixels), il ne doit pas dépasser : les ascenseurs horizontaux sont à éviter à tout prix ! Sa largeur doit donc être celle de la fenêtre.
  3. Le titre doit être en gras (minuscules) si la fenêtre fait moins de 600px de large, en majuscules (non gras) si elle fait plus de 1200px de large, et en majuscules et en gras entre les deux.
  4. La police du titre doit prendre 10% de la hauteur de la fenêtre, quelle qu'elle soit.
  5. Si la fenêtre fait moins de 400px de largeur, le paragraphe ne doit pas apparaître.

Exercice 2 — Mise en page classique, version responsive #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW1/TP10/ex2/index.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Récupérer cette archive qui contient une page HTML, une feuille de style base.css déjà écrite qui règle certains détails de présentation (on peut voir le résultat ici), et une feuille de style responsive-layout.css vide, que vous allez devoir remplir pour faire la mise en page et gérer le responsive. Attention, vous n'avez le droit de modifier que responsive-layout.css (sauf pour l'ajout des numétus dans la balise meta du HTML).

NB : le contenu textuel de la page est le même que dans un exercice d'un précédent TP, mais le HTML est structuré différemment (il y a notamment une division de classe wrapper autour des trois zones centrales). Prenez le temps de regarder comment la page est organisée dans le code.

On va partir de la mise en page sur un grand écran, et adapter pour des écrans de plus en plus petits.

Mise en page par défaut (grand écran)

Au départ, la page doit avoir trois colonnes, comme sur l'image suivante, qui doivent respecter des contraintes spécifiques :

  • le menu de gauche doit faire 180 pixels de largeur,
  • la colonne de droite doit faire 20em pixels de largeur,
  • la colonne centrale doit prendre toute la largeur restante.
Modèle de page à réaliser

Une nouvelle propriété sur les grilles CSS

Avant de passer à la suite, expérimentez la propriété CSS suivante :

grid-column: span 2

Appliquée à un élément situé dans une grille CSS, elle a pour effet que l'élément s'étend sur 2 colonnes au lieu d'une. Essayez sur divers éléments.

Mise en page sur les écrans plus petits

À présent, modifier votre CSS afin que la page se comporte de manière responsive en respectant les contraintes suivantes.

  • La page (c'est-à-dire le body) ne doit pas dépasser 1000 pixels de largeur ; si l'écran est plus grand, des marges doivent apparaître autour de l'ensemble.
  • En-dessous de 1000 pixels de largeur, la colonne rose de droite passe sous les deux autres, comme sur l'image suivante.
    Modèle de page dézoomée
  • En-dessous de 768 pixels de largeur, le menu doit être affiché horizontalement, juste sous la bannière.
  • En-dessous de 400 pixels de largeur, le menu disparaît. Optionnel : faire en sorte que le menu devienne une icône (on pourra prendre la lettre « M » ou une image) tout en haut à gauche de l'écran.
  • Optionnel : dans tous les cas, le pied de page doit être en bas de la fenêtre, même si le contenu est trop court, comme sur l'image suivante (tester en dézoomant). Il doit cependant toujours suivre le contenu (pas de position:fixed).
Modèle de page dézoomée
Résultat obtenu en dézoomant au maximum : les colonnes centrales s'allongent et le pied de page reste en bas