Le but de ce TP est de servir d'introduction à la structuration moderne des interfaces des applications Web.
Historiquement, la structuration des pages Web repose sur des techniques provenant du monde de l'édition. Pendant de nombreuses années, les applications Web devaient composer avec des solutions peu adaptées.
Mais l'essor du HTML5 et du CSS3 et l'engouement pour les applications Web ont fait émerger des solutions plus pertinentes issues du monde du développement d'applications plus traditionnelles, amenant à des solutions mêlant le meilleur des deux mondes.
Pour le cas qui nous intéresse, la création d'interfaces graphiques, nous nous pencherons sur l'utilisation du module flexbox.
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 :
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.
r202-ui
pour toute la ressource.
r202-ui
.
README.md
.
index.html
.
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 :
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 :
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.
r202-ui/flexbox
pour ce TP.
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 :
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.