Création de captures d’écran

À propos des captures d’écran dans GitHub Docs

Il existe des avantages et des inconvénients à ajouter une capture d’écran. Les captures d’écran améliorent la lisibilité des articles et facilitent la compréhension des instructions, en particulier pour les personnes qui ont des difficultés à lire. Quand elles sont fournies avec du texte de remplacement, les captures d’écran permettent aux utilisateurs aveugles et malvoyants de collaborer avec des collègues voyants.

D’un autre côté, les captures d’écran privilégient les utilisateurs voyants, impactent le temps de chargement des articles, et augmentent le volume de contenu à conserver. Quand elles sont capturées avec des dimensions en pixels et des degrés de zoom différents de ceux utilisés par le lecteur, les images des captures d’écran peuvent prêter à confusion.

Par conséquent, nous ajoutons uniquement des captures d’écran lorsqu’elles répondent à GitHub Docs nos critères d’inclusion.

Critères d’inclusion d’une capture d’écran

Utilisez une capture d’écran pour compléter les instructions textuelles quand un élément de l’interface utilisateur (IU) est difficile à trouver :

• L’élément est petit ou visuellement subtil.
• L’élément n’est pas immédiatement visible. Par exemple, l’élément est contenu dans un menu déroulant.
• L’interface propose plusieurs choix possibles qui peuvent prêter à confusion.

N’utilisez pas de captures d’écran pour les étapes de procédure où le texte seul est clair, ou pour afficher des commandes ou des sorties de code.

Exemples de critères d’inclusion

Pour déterminer plus facilement s’il est préférable d’ajouter une capture d’écran spécifique, examinez les exemples suivants de captures d’écran. Certains répondent à nos critères d’inclusion, et d’autres non.

Captures d’écran répondant aux critères

Les captures d’écran suivantes répondent à nos critères d’inclusion.

L’élément d’IU est petit ou visuellement subtil

Le bouton de modification de l’image d’aperçu de réseau social d’un dépôt est petit et visuellement discret. Il est parfois difficile à trouver parmi les autres paramètres du dépôt.

La capture d’écran fournit également une référence visuelle des proportions nécessaires.

L’élément d’IU n’est pas immédiatement visible

Les options de clonage d’un Gist sont contenues dans un menu déroulant intitulé « Incorporer ».

La capture d’écran permet de localiser l’option appropriée dans le menu, qui n’est pas visible tant que la liste déroulante n’est pas ouverte.

L’interface propose plusieurs choix qui peuvent prêter à confusion

Trois éléments peuvent être interprétés comme des « paramètres » dans la page principale d’un dépôt : l’onglet « Paramètres », l’icône d’engrenage dans la section « À propos » de la barre latérale droite et les paramètres de compte accessibles via la photo de profil.

La capture d’écran permet de trouver l’option appropriée.

Captures d’écran qui ne répondent pas aux critères

Les captures d’écran suivantes ne répondent pas à nos critères d’inclusion.

L’élément IU est facile à trouver

Le bouton « Créer un dépôt » est bien visible par sa taille, sa couleur et son emplacement. Il existe peu de choix possibles.

Les instructions textuelles sont suffisantes pour aider l’utilisateur à suivre l’étape.

L'interface utilisateur propose peu de choix, qui sont simples.

Les options simples et directes, par exemple l’activation ou la désactivation d’une case à cocher, n’ont pas besoin d’un support visuel.

Les instructions textuelles sont suffisantes pour aider l’utilisateur à suivre l’étape.

L’ajout de la phrase de texte complète sous la case à cocher dans la capture d’écran a également deux implications sur l’accessibilité :

• La phrase est difficile à lire pour les utilisateurs malvoyants, car elle est petite et moins nette que du texte HTML.
• Une personne qui utilise un lecteur d’écran n’a pas accès aux informations, car elles dépassent les limites relatives au nombre de caractères du texte de remplacement. L’ajout de texte dans les instructions permet de résoudre le problème, mais donne un résultat inutilement verbeux.

Conditions relatives aux captures d’écran

En plus des critères d’inclusion, les captures d’écran doivent répondre aux impératifs suivants.

Spécifications techniques

• Format de fichier PNG
• Images statiques uniquement (pas de GIF)
• 144 ppp
• De 750 à 1 000 pixels de large pour les images pleine colonne
• Taille de fichier inférieure ou égale à 250 Ko
• Noms de fichiers descriptifs, par exemple gist-embed-link.png au lieu de right_side_page_03.png
• Les images capturées sur macOS doivent être des images Retina
  • Dans Snagit, sélectionnez Préférences > Avancées > Snagit et désélectionnez « Effectuer un scale-down des images Retina lors du partage »

Accessibilité

Pour répondre aux besoins d’un plus grand nombre d’utilisateurs, les captures d’écran doivent :

• Être accompagnées d’instructions complètes au cours de l’étape procédurale, sans qu’aucune information ne soit transmise entièrement sous forme visuelle.
• Offrir un contraste maximal, comme dans l’interface elle-même, sans obscurcissement ou réduction au niveau de l’opacité ou du contraste des couleurs.
• Comporter du texte de remplacement décrivant le contenu de l’image et l’apparence de sa mise en évidence, le cas échéant. Pour plus d’informations, consultez « Guide de style ».
• Être clair et net, avec du texte et des éléments d’IU aussi lisibles que possible.

Style de visuel

• Affichez un élément d’IU avec juste assez de contexte environnant pour aider les utilisateurs à savoir où trouver l’élément à l’écran.
• Réduisez l’espace négatif en redimensionnant la fenêtre de votre navigateur jusqu’à ce que le résultat soit optimal.
• Affichez les interfaces dans un thème clair dans la mesure du possible.
  • Pour GitHub, sélectionnez « Light default » dans vos paramètres d’apparence. Pour plus d’informations, consultez « Gestion de vos paramètres de thème ».
  • Pour VS Code, sélectionnez « GitHub - Clair par défaut » dans l’extension gratuite Thème GitHub.
  • Si le logiciel dont vous devez effectuer une capture d’écran est disponible uniquement en mode sombre, vous pouvez utiliser le mode sombre.
• Si votre nom d'utilisateur et votre avatar s'affichent, remplacez-les par le nom d'utilisateur de @octocat et l'avatar de . Utilisez les outils de développement de votre navigateur pour remplacer votre nom d’utilisateur par @octocat, et pour remplacer l’URL de votre avatar par https://avatars.githubusercontent.com/u/583231?v=4.
• N’incluez pas de curseur.

Style visuel des menus déroulants

Si l’objectif principal de l’affichage d’un menu déroulant est d’aider le lecteur à localiser le menu lui-même, affichez le menu fermé.

Si l’objectif principal de l’affichage d’un menu déroulant est d’aider le lecteur à distinguer les options du menu, affichez le menu ouvert. Capturez les menus ouverts sans focus (curseur ou état de survol). L’affichage des éléments de menu avec un arrière-plan blanc permet de garantir un contraste par rapport au contour orange foncé, le cas échéant.

Mise en évidence d’éléments dans les captures d’écran

Pour mettre en évidence un élément d’IU spécifique dans une capture d’écran, utilisez notre thème spécial pour Snagit afin d’appliquer un contour contrasté à l’élément.

La couleur du trait est fg.severe, qui est la couleur utilisée dans le Système de conception Primer (HEX #BC4C00 ou RVB 188, 76, 0). Cet orange foncé présente un bon contraste de couleurs sur le blanc et le noir. Pour vérifier le contraste par rapport à d’autres couleurs d’arrière-plan, utilisez l’Analyseur de contraste des couleurs.

Importation du GitHub Docs thème dans Snagit

1. Pour télécharger le thème Snagit, accédez au snagit-theme-github-docs.snagthemegithub/docs référentiel, puis cliquez sur .

   

2. Ouvrez Snagit, puis sélectionnez l’outil Forme.

3. Sous « Styles rapides », sélectionnez Importer.

4. Sélectionnez le thème Snagit dans les fichiers de votre ordinateur. Cela entraîne l’installation des formes prédéfinies.

5. Le cas échéant, pour ajouter le thème à vos favoris, marquez le rectangle orange foncé d'une étoile.

Ajout d’une mise en évidence à une capture d’écran

1. Ouvrez une capture d’écran dans Snagit.

2. Pour définir la profondeur (résolution) et la largeur en pixels, sous le canevas de l’image, ouvrez la boîte de dialogue « Redimensionner l’image ».

   • Profondeur en pixels : 144 dpi (équivaut à « x2 » sur Snagit pour Mac)

   • Largeur en pixels : 1 000 pixels au maximum

   Remarque

   Sur Windows, vous devrez peut-être sélectionner Avancé pour changer la résolution. Vérifiez que l’option Utiliser le rééchantillonnage est désactivée.

3. Avec le GitHub Docs thème ouvert dans la barre latérale Formes, sélectionnez le rectangle orange foncé.

4. Effectuez un glisser-déposer sur l’image pour créer un rectangle.

5. Ajustez la hauteur et la largeur du rectangle en faisant glisser les bords. N’ajustez pas l’arrondi d’angle, qui doit rester de 4 px. Ajustez l’espace entre l’élément d’IU et le contour pour qu’il corresponde à peu près à la largeur du contour lui-même.

6. Exportez l’image au format PNG.

Remplacement des captures d’écran

Quand vous remplacez une image existante, la bonne pratique consiste à conserver le nom de fichier de l’image.

Si vous devez changer un nom de fichier image, recherchez dans le dépôt d’autres références à cette image, puis mettez à jour toutes les références au nom de fichier d’origine.

Si l’image est utilisée dans la documentation pour les versions de GitHub Enterprise Server ce type fermeture, ne modifiez pas le nom de fichier.

Gestion de version des images dans du contenu Markdown

Certaines images s’appliquent à tous les GitHub plans (GitHub Free, GitHub Pro, GitHub Team, GitHub Enterprise Cloudet GitHub Enterprise Server). Dans ce cas, aucun versioning n’est nécessaire.

Lorsqu’une image diffère du plan à la planification ou des modifications apportées à une version plus récente, GitHub Enterprise Serverl’image doit être versionnée avec des instructions conditionnelles Liquid. Vous devrez peut-être ajouter ce contrôle de version lorsque le contenu est créé initialement, ou vous devrez peut-être l’ajouter lorsque le contenu est mis à jour pour une mise à jour ou GitHub Enterprise Server une mise à jour des fonctionnalités.

Emplacements des images

Les images se trouvent dans le répertoire /assets/images. Ce répertoire comporte des sous-répertoires qui peuvent être utilisés pour organiser le contenu par plan et par numéro de version.

Répertoire	Utilisation
/assets/images	Images qui ne sont pas spécifiques à un GitHub Enterprise produit.
/assets/images/enterprise/enterprise-server	Images applicables à toutes les versions de GitHub Enterprise Server (GHES) ou applicables à la version actuelle et aux versions ultérieures.

/assets/images/enterprise/<release number>, par exemple /assets/images/enterprise/3.0/ | En cas de changements apportés à une image dans une nouvelle version de GHES, ajoutez la nouvelle image à l’emplacement d’origine, puis déplacez l’ancienne image vers le répertoire correspondant à la dernière version à laquelle l’image s’applique.

Exemple : Une image diffère d’un plan à l’autre

Quand il existe des différences entre les plans, vous pouvez utiliser des instructions conditionnelles Liquid pour versionner les deux images.

{% ifversion fpt or ghec %}
![An image of foo bar for GitHub Free, GitHub Pro, GitHub Team, and GitHub Enterprise Cloud](/assets/images/foo/bar.png)
{% else %}
![An image of foo bar for GHES](/assets/images/enterprise/foo/bar.png)
{% endif %}

Exemple : une image est mise à jour dans une nouvelle GitHub Enterprise Server version

Si une image change pour GitHub Enterprise Server la version 3.10 et que l’image mise à jour sera utilisée pour toutes les versions ultérieures de GitHub Enterprise Server, déplacez l’image /assets/images/enterprise/3.10existante vers , puis ajoutez la nouvelle image à l’emplacement d’origine. /assets/images/enterprise/foo/bar.png

Votre bloc d’instructions conditionnelles Liquid ressemble à ceci :

{% ifversion fpt or ghec %}
![An image of foo bar](/assets/images/foo/bar.png)
{% elsif ghes < 3.10 %}
![An image of foo bar for GHES 3.9 and lower](/assets/images/enterprise/3.5/foo/bar.png)
{% else %}
![An image of foo bar for GHES 3.10+](/assets/images/enterprise/foo/bar.png)
{% endif %}

Lorsque la version 3.10 est fermeture, le /assets/images/enterprise/3.10 répertoire est supprimé.

Le répertoire de versions numérotées doit contenir des images qui s’appliquent uniquement à ce numéro de version ou à ce numéro de version et aux versions antérieures. Par exemple, les images dans /assets/images/enterprise/2.22 doivent contenir des images qui s’appliquent à la version 2.22 uniquement, ou à la version 2.22 et aux versions antérieures.