Effectuer des captures d'écran ############################## Consignes ********* Effectuez des captures d'écran de `cette page `_, **dans son intégralité**, **menu replié**, en utilisant les fonctionnalités de capture d'écran de votre navigateur. Effectuez les captures au format suivant : * mobile portrait * tablette portrait * format 1200px de large ---- Comment ? ********* Vue adaptative ============== Pour simuler l'adaptation de la page à différents formats, vous pouvez utiliser la fonctionnalité de vue adaptative de votre navigateur. Firefox ------- Avec Firefox, rendez-vous dans la barre de menu : ``Outils`` → ``Développement Web`` → ``vue adaptative``. .. figure:: ../images/menu__vue-adaptative--firefox.png :alt: todo :align: center Accès à la vue adaptative avec Firefox Il est alors possible de choisir de simuler différents formats. .. figure:: ../images/vue-adaptative--firefox.png :alt: todo :align: center Chrome ------ Avec Chrome, il vous faut d'abord vous rendre dans le menu en haut à droite → ``Plus d'outils`` → ``Outils de développement``. .. figure:: ../images/menu__vue-adaptative--chrome--1.png :alt: todo :align: center La deuxième icône en haut à gauche des outils de développement (ici en bleu) figure une tablette et un téléphone. Si l'icône n'est pas active (bleue), cliquez dessus pour faire apparaître la *device toolbar* : .. figure:: ../images/menu__vue-adaptative--chrome--2.png :alt: todo :align: center :width: 50% Vous devez alors avoir accès à la *device toolbar* vous permettant de choisir votre format. .. figure:: ../images/vue-adaptative--chrome.png :alt: todo :align: center Capture d'écran =============== Une fois que vous êtes capables de modifier le format d'affichage, vous pouvez passer à la capture d'écran. Firefox ------- Sur firefox, la capture d'écran est accessible depuis le menu de la barre d'URL : ``Menu de la barre d'URL`` → ``Effectuer une capture d'écran`` .. figure:: ../images/capture-d-ecran--firefox--1.png :alt: todo :align: center Un menu contextuel apparaît alors. Choisissez alors ``capturer la page complète``. .. figure:: ../images/capture-d-ecran--firefox--2.png :alt: todo :align: center Vous pouvez alors télécharger votre capture d'écran : .. figure:: ../images/capture-d-ecran--firefox--3.png :alt: todo :align: center Chrome ------ Avec Chrome, il vous suffit de vous rendre dans le menu à droite de la *device toolbar* et de sélectionner ``capture full size screenshot``. .. figure:: ../images/capture-d-ecran--chrome.png :alt: todo :align: center ---- Auto-évaluation *************** Vous pouvez poursuivre le TD si : * vous avez réussi à utiliser le mode adaptatif de votre navigateur pour afficher le site aux formats mobile portrait, tablette portrait et 1200px de large. * vous avez réussi à utiliser la fonctionnalité de capture d'écran de votre navigateur pour faire des captures d'écran pleine page aux formats précités * vous avez en votre possession un dossier contenant 3 captures d'écran plein format de la page d'accueil du site onf.ca (les formats étant ceux précités).