TP 8 : Manipulation des outils pour le design adaptatif

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Les exercices du TP sont très 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. Le troisième est une reproduction d'un site réel simplifié, pour continuer à vous entraîner.

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/TP08/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 rouge si la fenêtre fait moins de 800px de large, et bleue sinon.
  2. Le paragraphe doit respecter les contraintes suivantes :
    • il doit faire 700 pixels de largeur et être centré horizontalement
    • mais si la fenêtre est trop étroite (moins de 700 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 (non italique) si la fenêtre fait moins de 500px de large, en italique (non gras) si elle fait plus de 1000px de large, et en gras italique 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 titre 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/TP08/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 de la page est le même que dans un précédent exercice, 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

Exercice 3 (optionnel) — Reproduction d’une page simple avec des images #

On vous donne une image d'une page web, version très simplifiée d'une page du site du fabricant d'instruments de musique Fender.

Capture d'écran de la page Fender Stratocaster
Capture d'écran de la page à reproduire

On vous demande de créer le code HTML et CSS permettant de reproduire ce modèle, en portant une attention particulière à la catégorisation des images : quelles sont celles qui font partie du contenu (et vont donc dans le HTML) celles qui sont purement présentationnelles (et vont donc dans le CSS), et celles pour qui c'est ambigu (et vous avez donc le choix) ?

N.B. : les choix faits sur la page originale ne sont pas forcément les bons choix ! (En l'occurrence, le code n'étant à première vue pas de toute première qualité, il est particulièrement déconseillé de s'en inspirer…)

Les images nécessaires et les textes sont dans cette archive. Informations complémentaires :

  • La colonne principale fait 970 pixels de largeur.
  • La couleur du texte est #333, sauf dans le pied de page où c'est #999.
  • Les bordures sont toutes de couleur #e5e5e5.
  • La couleur de fond des colonnes de détails est #f5f5f5, et elles font 180 pixels de largeur.
  • L'image de fond de la page est GlobalBackground.gif.

Il est recommandé d'utiliser l'architecture de fichiers suivante, qui permet de bien séparer le contenu et la présentation tout en restant pratique d'utilisation :

--./
  |--index.html
  |--images/
  |  |-- …
  |  `-- …
  `--skin/
     |--screen.css
     `--images/
        |-- …
        `-- …

Efforcez-vous d'écrire du code propre, c'est-à-dire bien structuré et sémantique. D'autre part, la priorité est d'obtenir un résultat fonctionnel minimal, c'est-à-dire d'avoir une page lisible même si tous les détails de la présentation ne sont pas mis en place.