Comme nous venons de le voir, le modèle flexbox est une technique de structuration des pages similaire aux solutions que l'on peut rencontrer dans le monde des applications plus classiques.

Elle repose sur l'organisation d'éléments dans un conteneur selon un axe principal. La force du système repose sur le fait qu'un élément peut lui-même être un conteneur organisant des éléments sur un axe principal quelconque. Cette structure hiérarchique permet une grande souplesse dans l'organisation de l'interface.

Un autre gros intérêt du module flexbox est qu'il permet de gérer assez finement la taille relative des éléments dans leur conteneur, en spécifiant notamment qui doit prendre ou fournir l'espace disponible ou manquant.

Pour vous familiariser avec le module flexbox, vous disposez de nombreuses ressources sur le Web :

• un cours avec des exemples éditables sur le site du Mozilla Developer Network,
• une documentation avec des exemples éditables sur le site du w3schools,
• une fiche de références avec les propriétés du conteneur à gauche et des éléments à droite, sur le site css-tricks.

Après avoir fait le tour des possibilités offertes par le module CSS flexbox, vous experimenterez les différentes options de positionnement en finalisant le jeu « Flexbox Froggy ».

Si vous souhaitez poursuivre, vous pourrez continuer avec le jeu « Flexbox Defense ».

La gestion de versions et l'archivage seront réalisés à l'aide de Git. Pour un rapide tour d'horizon de Git, vous pouvez vous référerez au site de monsieur Nourrit.

Dans un cadre professionnel, il est plutôt conseillé d'avoir un dépôt Git par projet, mais pour simplifier l'évaluation de votre travail par votre intervenant de TP, vous allez réaliser un seul dépôt pour la ressource.

Vous commencerez par créer un répertoire pour la ressource : r202-ui.

Puis dans ce répertoire (r202-ui), vous créerez un dépôt local à l'aide de la commande : git init. Cette commande provoque la création d'un répertoire « caché » .git contenant les données du dépôt local.

Vous ajouterez le fichier README.md contenant le code suivant :

Ce fichier est écrit en markdown, vous l'utiliserez comme rapport lors de vos TP de cette ressource.

Vous pouvez ensuite indiquer à Git de suivre tous les fichiers actuellement dans votre répertoire :git add ..

À tout moment, vous pouvez consulter l'état du suivi de version, à l'aide de la commande git status. C'est généralement une bonne idée avant de réaliser un « commit ».

Vous pourrez réaliser le premier « commit » de votre dépôt : git commit -m "Initial commit".

Pour archiver votre dépôt local, ainsi que pour facilité un travail collaboratif en centralisant vos sources, vous pouvez associer votre dépôt local à un dépôt distant. Nous utilisons dans le cadre des cours le dépôt GitLab public interne au département. Après vous être authentifié, vous créerez un dépôt distant, nommé « r202-ui », en pensant à ajouter votre intervenant de TP comme membre et à modifier son rôle comme « reviewer » au minimum.

Vous pourrez ensuite associer votre dépôt local au dépôt distant à l'aide de la commande :git remote add origin URL_DU_DÉPÔT, puis pousser la réplication de votre dépôt local grâce à la commande : git push.

Vous penserez à vérifier régulièrement le bon état de votre dépôt distant sur GitLab.

Bien qu'il soit possible de travailler directement sur les fichiers statiques, vous êtes encouragés à prendre l'habitude de vous mettre dans un environnement de travail local, en lançant un serveur local servant vos fichiers, comme indiqué dans le TP M. Cutrona.

Pour vous simplifier la vie, lors de l'utilisation du serveur local, vous allez créer un simple fichier HTML index.html qui sera la page d'accueil de votre serveur local. Cette page proposera une liste de lien vers vos différentes réalisations.

Vous ajouterez dans le sous-répertoire du TP (r202-ui/flexbox) 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 sans en 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 :

600×600

300×600

600×300

300×300

Pour tester les différentes résolutions, vous utiliserez la « vue adaptative » des « outils de développement » du navigateur.

Vous utiliserez exclusivement le module CSS flexbox pour la structuration de la page et vous noterez que :

• l'ensemble de la zone d'affichage est occupée,
• il n'y a pas de barre de défilement,
• les éléments occupent toute la largeur de la zone d'affichage,
• la zone de pied de page se trouve toujours en bas de la zone d'affichage,
• l'espace supplémentaire est occupé par le contenu principal.

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.

Comme précédemment, vous ajouterez dans le sous répertoire du TP (r202-ui/flexbox) le fichier HTML suivant : 2.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 :

600×600

320×600

600×320

320×320

Vous noterez que :

• l'ensemble de la zone d'affichage est occupé,
• il n'y a pas de barre de défilement,
• le contenu principal et la zone des sous-contenus occupe la même hauteur,
• le sous-contenu principal et le sous-contenu secondaire occupent la même largeur,
• c'est le sous-contenu secondaire qui réduit lorsque la largeur est trop petite.

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.