diff --git a/files/fr/mdn/writing_guidelines/howto/creating_moving_deleting/index.md b/files/fr/mdn/writing_guidelines/howto/creating_moving_deleting/index.md index 5f3915af49382d..795dda71a85f92 100644 --- a/files/fr/mdn/writing_guidelines/howto/creating_moving_deleting/index.md +++ b/files/fr/mdn/writing_guidelines/howto/creating_moving_deleting/index.md @@ -1,47 +1,75 @@ --- title: Créer et modifier des pages slug: MDN/Writing_guidelines/Howto/Creating_moving_deleting +l10n: + sourceCommit: 6b01400b286e8bdfa7060d56af84757dd4b8de48 --- {{MDNSidebar}} -Cet article est destiné à présenter aux personnes souhaitant contribuer à MDN le processus de modification de pages existantes et de création de nouvelles pages. +Cet article décrit comment créer, déplacer, supprimer ou modifier une page. Dans tous ces cas, il est conseillé de consulter nos directives concernant [ce que nous écrivons](/fr/docs/MDN/Writing_guidelines/What_we_write) pour confirmer si l'une de ces actions doit être entreprise et d'en discuter avec l'équipe sur le [canal de discussion du MDN Web Docs](/fr/docs/MDN/Community/Communication_channels#salons_de_discussions) avant de procéder. -> **Note :** Le contenu de MDN s'organise au sein de deux dépôts Git : [`mdn/content`](https://github.com/mdn/content) avec le contenu en anglais et [`mdn/translated-content`](https://github.com/mdn/translated-content) avec le contenu traduit (y compris en français). C'est le dépôt `mdn/content` qui constitue la référence. Si vous souhaitez créer une page en français, celle-ci devra au préalable avoir été créée en anglais. +## Créer de nouvelles pages -## Modifier une page existante +Toutes les pages du MDN Web Docs sont rédigées au format Markdown. Le contenu est écrit dans un fichier nommé `index.md`, qui est stocké dans un répertoire unique. Le nom du répertoire représente le nom de la page. -Pour modifier une page, vous devez trouver la page source : +C'est le contenu anglais (du dépôt `mdn/content`) qui est la référence du contenu disponible en français. Si vous souhaitez créer une page qui n'existe pas (ni en anglais ni en français), il vous faudra d'abord créer la page en anglais. N'hésitez pas à [consulter la documentation à ce sujet](/fr/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting#creating_pages). -- Si elle est en anglais : [sur notre dépôt content](https://github.com/mdn/content) +Si vous souhaitez créer une traduction d'une page qui existe en anglais, mais pas en français, vous devez créer un répertoire correspondant dans votre arborescence de `mdn/translated-content`. Par exemple, si vous souhaitez traduire la page documentant la propriété CSS `align-content` : - content +1. Dans votre copie locale de `mdn/translated-content`, créez un répertoire `align-content` sous `./files/fr/web/css` +2. Dans votre copie locale de `mdn/content`, copiez le fichier `./files/en-us/web/css/align-content/index.md` +3. Collez ce fichier dans `./files/fr/web/css/align-content`. -- Si elle est en français ou dans une autre langue : [sur notre dépôt translated-content](https://github.com/mdn/translated-content) +> **Note :** Le nom du répertoire diffère légèrement de l'intitulé de la page. En particulier, le slug suit la casse de la phrase, alors que le chemin sur le système de fichiers est exclusivement en minuscules. - translated-content +Le fichier `index.md` d'un document doit commencer par des informations préliminaires qui définissent le `titre`, le `slug` (les autres métadonnées comme `page-type` sont réservées à la version anglaise). -. +Le processus général de création d'une page, étape par étape, est le suivant : -La façon la plus rapide de la trouver est d'aller sur la page que vous souhaitez modifier, puis de vous rendre en bas de cette page et enfin de cliquer sur le lien « Source on GitHub ». +1. Démarrez une nouvelle branche, actualisée, pour y travailler. -Une fois que vous avez trouvé la source à modifier, rendez-vous sur notre fichier README et parcourez notre [guide sur la contribution (en anglais)](https://github.com/mdn/translated-content/#making-contributions). Vous pouvez également consulter [ce billet en français](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) pour savoir comment contribuer. + ```bash + cd ~/repos/mdn/translated-content + git checkout main + git pull translated-content main + # Exécutez à nouveau « yarn » pour vous assurer que vous avez + # installé la dernière dépendance de Yari. + yarn + git checkout -b mon-ajout + ``` -### Prévisualiser vos modifications +2. Créez un ou plusieurs nouveaux dossiers, chacun avec ses propres fichiers `index.md`. -SI vous modifiez la page en local, vous pouvez voir à quoi ressembleront vos modifications en allant sur le dossier du dépôt nommé content, en exécutant la commande CLI `yarn start`, puis en vous rendant à l'URL `localhost:5042` dans votre navigateur, et enfin en retrouvant la page sur laquelle vous travaillez. Pour la trouver plus facilement, utilisez la boîte de recherche. La page que vous prévisualisez sera rafraîchie automatiquement au fur et à mesure que vous modifiez son code source. +3. Ajoutez et livrez (commit en anglais) vos nouveaux fichiers et poussez votre nouvelle branche sur votre fork. -### Ajouter des pièces jointes + ```bash + git add files/fr/dossier/cree + git commit -m "un message approprié des changements" + git push -u origin mon-ajout + ``` -Pour ajouter un fichier en pièce jointe à votre article, vous avez simplement besoin de l'inclure dans le même répertoire du fichier `index.html` de votre article, puis de l'ajouter dans votre page, typiquement à l'aide d'un élément ``. +4. Créez votre requête de tirage (pull request en anglais) sur `mdn/translated-content`. -## Créer une nouvelle page +## Déplacer et supprimer des pages -Pour créer une nouvelle page, consultez les instructions fournies sur la [documentation concernant l'ajout de nouveaux documents (en anglais)](https://github.com/mdn/content#adding-a-new-document). +Le contenu francophone suit la structure du contenu anglophone (situé sur `mdn/content`). Aussi, si vous souhaitez déplacer ou supprimer des pages, il faudra le faire sur la version anglophone en premier lieu. Nous vous invitons donc à lire [la documentation associée](/fr/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting#moving_pages). -> **Attention :** Pour créer une page en français (ou dans une autre langue), celle-ci devra préalablement exister/avoir été créée en anglais. +Une fois ces modifications apportées sur la version anglaise, un processus automatique déclenchera des pull requests pour que l'équivalent soit appliqué sur les différentes locales dont le français. -## Voir aussi +## Modifier des pages existantes -- [Guide stylistique de MDN](/fr/docs/MDN/Guidelines/Writing_style_guide) -- [MDN sur GitHub : comment contribuer ?](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) +Pour modifier une page, vous devez trouver la source de la page dans nos dépôts [`mdn/content`](https://github.com/mdn/content) (fichiers anglais) et [`mdn/translated-content`](https://github.com/mdn/translated-content) (fichiers traduits). La façon la plus simple de la trouver est d'utiliser votre navigateur pour accéder à la page que vous voulez éditer, d'aller en bas de la page et de cliquer sur le lien « View the source on GitHub » (Voir la source sur GitHub pour son équivalent Français). + +### Prévisualiser les modifications + +- **Si vous éditez la version anglaise** + - : Si vous éditez la page localement, pour voir à quoi ressemblent vos changements, vous pouvez aller dans le dossier `content` du dépôt, exécuter la commande CLI `yarn start`, aller à `localhost:5042` dans votre navigateur, et naviguer jusqu'à la page et la voir. +- **Si vous éditez une version traduite** + - : Pour éditer la page localement et voir à quoi ressemblent vos modifications, il vous faut aller dans le dossier `yari` (Vous devez préalablement avoir paramétré votre environnement et avoir au même niveau que `yari` les dossiers `content` et `translated-content`), exécuter la commande CLI `yarn start`, aller à `localhost:5042` dans votre navigateur, et naviguer jusqu'à la page et la voir. + +Entrez le titre dans la barre de recherche pour la trouver facilement. La page prévisualisée se mettra à jour dans le navigateur au fur et à mesure que vous modifierez la source. + +### Joindre des fichiers + +Pour joindre un fichier à votre article, il vous suffit de l'inclure dans le même répertoire que le fichier `index.md` de l'article. Incluez le fichier dans votre page, généralement via un élément [``](/fr/docs/Web/HTML/Element/a). Pour la traduction française, il est uniquement nécessaire de le faire si le fichier doit être traduit (exemple pour les images) ; les fichiers qui n'ont pas à être traduits sont automatiquement récupérés depuis le dépôt anglais. diff --git a/files/fr/mdn/writing_guidelines/howto/images_media/index.md b/files/fr/mdn/writing_guidelines/howto/images_media/index.md index 0c8b9ca756ef8e..766a8c193358db 100644 --- a/files/fr/mdn/writing_guidelines/howto/images_media/index.md +++ b/files/fr/mdn/writing_guidelines/howto/images_media/index.md @@ -1,23 +1,108 @@ --- -title: Contenu vidéo sur MDN +title: Comment ajouter des images et des médias slug: MDN/Writing_guidelines/Howto/Images_media +l10n: + sourceCommit: 8d0cbeacdc1872f7e4d966177151585c58fb879e --- {{MDNSidebar}} -MDN n'est pas un site contenant beaucoup de vidéos. Toutefois, certaines documentations sont propices à ce type de média. Dans cet article, nous verrons quand inclure des vidéos sur MDN et quelques conseils permettant de créer des vidéos simples et efficaces. +## Ajouter des images -## Quand utiliser des vidéos sur MDN +Pour ajouter une image à un document, ajoutez le fichier image dans le dossier du document puis référencez l'image dans le fichier `index.md` du document en utilisant un élément `` ou [la syntaxe Markdown équivalente](https://github.github.com/gfm/#images). -L'utilisation de vidéo pour de la documentation technique n'est pas indiquée par défaut pour plusieurs raisons : +Prenons un exemple : -- Une vidéo est linéaire. Les personnes ne consultent pas la documentation de façon linéaire, du début à la fin : [ils scannent la documentation](https://www.sensible.com/chapter.html). Faire de même pour une vidéo est quasi impossible et cela force à visualiser le contenu de A à Z. -- Une vidéo possède une densité d'information plus faible que le texte. Il faut plus de temps pour regarder une vidéo expliquant une notion que de lire un article texte équivalent. -- Une vidéo a un poids numérique plus élevé et est donc plus coûteuse et moins performante que le texte. -- Une vidéo peut poser des problèmes d'accessibilité : elle est plus coûteuse à réaliser, à localiser ou à rendre accessible aux personnes qui utilisent des lecteurs d'écran. -- Enfin, une vidéo est beaucoup plus difficile à éditer/mettre à jour/maintenir que du texte. +1. Commencez avec une branche de travail fraîche avec le contenu le plus récent de la branche `main` du dépôt distant du `translated-content`. -> **Note :** Il est important de garder ces limitations en tête lorsqu'on réalise des vidéos afin de les minimiser autant que possible. + ```bash + cd ~/chemin/vers/mdn/translated-content + git checkout main + git pull translated-content main + # Exécutez "yarn" à nouveau pour vous assurer + # que vous avez installé la dernière dépendance Yari. + yarn + git checkout -b mes-images + ``` + +2. Ajoutez votre image au dossier du document. Pour cet exemple, supposons que nous ajoutons une nouvelle image au document `files/fr/web/css`. + + ```bash + cd ~/chemin/vers/mdn/translated-content + cp ../un/chemin/vers/ma-superbe-image.png files/fr/web/css/ + ``` + +3. **Dans le répertoire de votre copie locale de `mdn/content`**, exécutez `filecheck` sur chaque image, ce dernier vous alerte si quelque chose ne va pas. Pour plus de détails, consultez la section [Compression des images](#compression-des-images). + + ```bash + yarn filecheck /chemin/vers/translated-content/files/fr/web/css/ma-superbe-image.png + ``` + +4. Référencez votre image dans le document avec un élément `` et un attribut `alt` dans `files/fr/web/css/index.md` : + + ```html + Ma superbe image + ``` + +5. Ajoutez et livrez (commit en anglais) tous les fichiers supprimés, créés et modifiés, puis poussez votre branche vers votre fork : + + ```bash + git add files/fr/web/css/ma-superbe-image.png files/fr/web/css/index.html + git commit + git push -u origin mes-images + ``` + +6. Vous êtes maintenant prêt à créer votre [requête de tirage (pull request en anglais)](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request). + +## Ajouter les textes alternatifs aux images + +Chaque image, `![]` et ``, doit inclure un texte alternatif. Les attributs `alt` doivent être courts et fournir toutes les informations pertinentes que l'image transmet. Lorsque vous écrivez la description de l'image, réfléchissez aux informations précieuses de l'image et à la façon dont vous les transmettriez à quelqu'un qui peut lire le contenu de la page mais ne peut pas charger les images. + +> **Note :** Voir [la documentation sur l'attribut `alt` de `` et notamment la façon d'écrire des textes alternatifs pertinents](/fr/docs/Web/HTML/Element/img#écrire_des_descriptions_alternatives_significatives). + +Soyez sûr que le texte alternatif de l'image est basé sur son contexte. Si la photo de Fluffy le chien est un avatar à côté d'un avis pour la nourriture pour chien Yuckymeat, `alt="Fluffy"` est approprié. Si la même photo fait partie de la page d'adoption de Fluffy, les informations transmises dans l'image sont pertinentes pour les futurs parents de chiens, telles que `alt="Fluffy, un terrier tricolore à poil très court, avec une balle de tennis dans la bouche."`. Le texte environnant indique probablement la taille et la race de Fluffy, il serait donc redondant de l'inclure. Évitez de décrire l'image avec trop de détails : le futur parent n'a pas besoin de savoir si le chien est à l'intérieur ou à l'extérieur, ou s'il a un collier rouge et une laisse bleue. + +Avec les captures d'écran, écrivez ce que vous apprenez de l'image, ne détaillez pas le contenu de la capture d'écran et omettez les informations dont les lecteurs n'ont pas besoin ou qu'ils connaissent déjà. Par exemple, si vous êtes sur une page expliquant comment modifier les paramètres de Bing, si vous avez une capture d'écran d'un résultat de recherche Bing, n'incluez pas le terme de recherche ou le nombre de résultats, etc., car ce ne sont pas le but de l'image. Limitez l'attribut `alt` au sujet en question : comment modifier les paramètres dans Bing. L'attribut `alt` pourrait être `alt="L'icône des paramètres se trouve dans la barre de navigation sous le champ de recherche."`. N'incluez pas « capture d'écran » ou « Bing » car l'utilisateur n'a pas besoin de savoir qu'il s'agit d'une capture d'écran et il sait déjà que c'est Bing, car il est sur une page expliquant comment modifier les paramètres de Bing. + +La syntaxe en markdown et HTML : + +```html-nolint +![]() +<texte-alternatif> +``` + +Exemples : + +```html +![Logo OpenWebDocs : Carle la chenille](carle.png) +Logo OpenWebDocs : Carle la chenille +``` + +Alors que les images purement décoratives doivent avoir un attribut `alt` vide, les images ajoutées à la documentation MDN doivent avoir une raison d'être, et nécessitent donc une description sous forme de chaîne non vide. + +## Compression des images + +Lorsque vous ajoutez des images à une page du MDN Web Docs, vous devez vous assurer qu'elles sont compressées autant que possible (sans dégradation de la qualité) afin de réduire la taille du téléchargement pour nos lectrices et lecteurs. L'absence de compression entraînera l'échec de l'intégration continue, qui vous avertira que certaines de vos images sont trop volumineuses. + +La meilleure façon de compresser les images est d'utiliser l'outil de compression intégré. Vous pouvez compresser une image de manière appropriée en utilisant la commande `filecheck` avec l'option `--save-compression`. Cette option compresse l'image autant que possible et remplace l'original par la version compressée. Par exemple, **depuis le répertoire de votre copie locale de `mdn/content`** : + +```bash +yarn filecheck /chemin/vers/translated-content/files/fr/web/css/ma-superbe-image.png --save-compression +``` + +## Ajouter des vidéos + +MDN Web Docs n'est pas un site très riche en vidéos, mais il y a certains endroits où il est judicieux d'utiliser du contenu vidéo dans un article. Cet article examine les cas où il est approprié d'inclure des vidéos dans les articles et donne des conseils sur la façon de créer des vidéos simples mais efficaces avec un budget limité. + +Plusieurs arguments s'opposent à l'utilisation de vidéos dans la documentation technique, en particulier dans les documents de référence et les guides de niveau avancé. Certains d'entre eux sont énumérés ci-dessous : + +- La vidéo est linéaire. Les gens n'ont pas tendance à lire la documentation en ligne de manière linéaire, en commençant par le début et en lisant jusqu'à la fin. _Ils scannent_. La vidéo est vraiment difficile à scanner ainsi : elle oblige la personne à consommer le contenu du début à la fin. +- La vidéo est moins dense en informations que le texte. Il faut plus de temps pour consommer une vidéo expliquant quelque chose que pour lire les instructions équivalentes. +- La vidéo est volumineuse en termes de taille de fichier et, par conséquent, plus coûteuse et moins performante que le texte. +- La vidéo pose des problèmes d'accessibilité : elle est généralement plus coûteuse à produire que le texte, mais surtout à traduire ou à rendre utilisable par les utilisateurs de lecteurs d'écran. +- Dans le prolongement du dernier point, la vidéo est beaucoup plus difficile à éditer/mettre à jour/maintenir que le contenu textuel. + +> **Note :** Il est utile de garder à l'esprit cette problématique, même lorsque vous réalisez des vidéos, afin d'essayer d'en atténuer certains aspects. Il existe de nombreux sites populaires qui fournissent de nombreux tutoriels vidéo. MDN n'est pas un site dont la majorité du contenu est de la vidéo, toutefois, il est possible d'intégrer des vidéos dans certains articles MDN selon le contexte. @@ -25,15 +110,18 @@ Sur MDN, les vidéos sont particulièrement utilisées lorsqu'on souhaite décri Dans de telles situations, il est souvent plus pratique de **montrer** ce qu'on indique. -## À quoi doit ressembler une vidéo sur MDN ? +### Lignes de conduite pour les vidéos Une vidéo à destination de MDN devrait être : -- **Courte** : On essaiera d'avoir des vidéos dont la durée est inférieure à 30 secondes, idéalement inférieure à 20 secondes. Elle sera ainsi suffisamment courte pour ne pas demander un temps d'attention trop long au spectateur ou à la spectatrice. -- **Simple** : On essaiera de garder un cheminement simple avec 2 à 4 fragments distincts pour que les étapes soient faciles à suivre. -- **Silencieuse** : Le son permet d'avoir des vidéos plus impactantes mais demande également plus de temps pour la réalisation et l'implication d'un spectateur ou d'une spectatrice qui peut ne pas pouvoir écouter au moment où il/elle regarde la vidéo. Cela peut également rallonger la vidéo et rajoute des coûts de maintenance et de localisation. +- Courte + - : On essaiera d'avoir des vidéos dont la durée est inférieure à 30 secondes, idéalement inférieure à 20 secondes. Elle sera ainsi suffisamment courte pour ne pas demander un temps d'attention trop long au spectateur ou à la spectatrice. +- Simple + - : On essaiera de garder un cheminement simple avec 2 à 4 fragments distincts pour que les étapes soient faciles à suivre. +- Silencieuse + - : Le son permet d'avoir des vidéos plus impactantes mais demande également plus de temps pour la réalisation et l'implication d'un spectateur ou d'une spectatrice qui peut ne pas pouvoir écouter au moment où il/elle regarde la vidéo. Cela peut également rallonger la vidéo et rajoute des coûts de maintenance et de localisation. -Pour expliquer quelque chose de complexes, on pourra utiliser un ensemble de vidéos courtes et de captures d'écran avec du texte. Le texte permettra ainsi d'insister sur les notions vues dans les vidéos et la personne qui consulte le contenu pourra alors choisir de suivre le texte et/ou la vidéo. +Pour expliquer quelque chose de complexe, on pourra utiliser un ensemble de vidéos courtes et de captures d'écran avec du texte. Le texte permettra ainsi d'insister sur les notions vues dans les vidéos et la personne qui consulte le contenu pourra alors choisir de suivre le texte et/ou la vidéo. De plus, on fera attention aux conseils suivants : @@ -42,9 +130,9 @@ De plus, on fera attention aux conseils suivants : - Le curseur de la souris ne doit pas couvrir les éléments qu'on souhaite indiquer. - Si c'est utile, on configurera l'outil d'enregistrement afin d'enregistrer les clics et/ou le pointeur de la souris. -## Outils +### Lignes de conduite pour les outils de vidéo -Il vous faudra un outil pour enregistrer la vidéo. Il en existe une variété allant d'outils gratuits à payants, de simples à complexes. Si vous avez déjà créé du contenu vidéo : parfait. Sinon, nous vous conseillons de commencer avec un outil simple puis de choisir ensuite quelque chose de plus complexe si besoin. +Il vous faudra un outil pour enregistrer la vidéo. Il en existe une variété allant d'outils gratuits à payants, de simples à complexes. Si vous avez déjà créé du contenu vidéo : parfait. Sinon, nous vous conseillons de commencer avec un outil simple, puis de choisir ensuite quelque chose de plus complexe si besoin. Le tableau qui suit fournit quelques recommandations d'outils pour commencer. @@ -57,7 +145,7 @@ Le tableau qui suit fournit quelques recommandations d'outils pour commencer. | ScreenFlow | macOS | Intermédiaire | Oui | | Kazam | Linux | Gratuit | Minimales | -### Conseils pour QuickTime +#### Conseils pour QuickTime Si vous utilisez macOS, Quicktime Player est disponible et dispose de quelques fonctionnalités pour l'enregistrement : @@ -69,15 +157,15 @@ Si vous utilisez macOS, Quicktime Player est disponible et dispose de quelques f 6. Appuyez sur le bouton _Stop_. 7. Choisissez _Fichier_ > _Exporter en tant que…_ > _1080p_ à partir du menu principal afin d'avoir une définition suffisamment élevée. -### Autres ressources +#### Autres ressources - [Comment ajouter des boîtes de légende personnalisées aux screencasts dans Screenflow (en anglais)](https://photography.tutsplus.com/tutorials/how-to-add-custom-callouts-to-screencast-videos-in-screenflow--cms-27122) -## Étapes de création d'une vidéo +### Étapes de création d'une vidéo Les sections qui suivent décrivent les étapes principales à suivre pour créer une vidéo et l'intégrer à une page MDN. -### Préparation +#### Préparation Tout d'abord, planifiez la suite d'actions que vous souhaitez enregistrer et choisissez les meilleures façons de commencer et de finir. @@ -85,19 +173,19 @@ Assurez-vous que votre arrière-plan de bureau et votre profil de navigateur soi Planifiez soigneusement les étapes que vous allez enregistrer et pratiquez cette séquence d'actions plusieurs fois avant d'enregistrer : -- Ne commencez pas une vidéo au milieu d'une suite d'étape. Veillez à ce que le spectateur ait suffisamment de contexte pour que les actions illustrées aient du sens. +- Ne commencez pas une vidéo au milieu d'une suite d'étape. Veillez à ce qu'il y ait suffisamment de contexte pour que les actions illustrées aient du sens. - Pour chacune de vos actions, assurez-vous de les réaliser suffisamment lentement et de les mettre en évidence. Par exemple, lorsqu'on doit cliquer quelque part on pourra : - 1. Déplacer la souris sur l'icône - 2. Mettre en évidence ou zoomer (selon ce qui est le plus pertinent) - 3. Suspendre le mouvement pendant un instant - 4. Cliquer sur l'icône + - Déplacer la souris sur l'icône + - Mettre en évidence ou zoomer (selon ce qui est le plus pertinent) + - Suspendre le mouvement pendant un instant + - Cliquer sur l'icône - Planifiez les niveaux de zoom pour les portions de l'interface utilisateur que vous afficherez. Tout le monde ne pourra pas forcément consulter la vidéo en haute définition. Vous pourrez également zoomer sur certaines parties en post-production mais ça peut être une bonne idée de zoomer dès l'enregistrement. > **Note :** Ne zoomez pas au point que les éléments d'interfaces soient déformés ou semblent étranges. -### Enregistrement +#### Enregistrement Lorsque vous enregistrez, avancez dans les étapes de façon calme et régulière. Effectuez des pauses d'une seconde ou deux aux moments importants (lorsqu'il faut cliquer sur un bouton par exemple) et assurez-vous que le pointeur de la souris n'occulte pas d'icône ou de texte important. @@ -105,7 +193,7 @@ N'oubliez pas de faire une pause d'une ou deux secondes à la fin pour montrer l > **Note :** Si vous utilisez un outil simple comme QuickTime Player ou que vous ne pouvez pas effectuer de post-production, veillez à ce que la fenêtre soit de la bonne taille pour ce que vous voulez montrer. -### Post-production +#### Post-production En post-production, vous pourrez mettre en avant certains éléments notamment grâce à : @@ -118,22 +206,22 @@ Attention à ne pas abuser de ces effets, on ne veut pas que les spectateurs aie Si besoin, redimensionnez la vidéo aux proportions souhaitées. -### Upload +#### Upload -Actuellement, les vidéos doivent être uploadées sur YouTube afin d'être affichées sur MDN. +Actuellement, les vidéos doivent être uploadées sur YouTube afin d'être affichées sur MDN, par exemple sur la chaîne [mozhacks](https://www.youtube.com/user/mozhacks/videos). Demandez à un membre de l'équipe MDN de téléverser la vidéo si vous n'avez pas un meilleur endroit où la stocker. > **Note :** Marquez la vidéo en « non répertoriée » si celle-ci n'a pas de sens particulier en dehors du contexte de la page MDN. -### Intégration +#### Intégration Une fois la vidéo uploadée, vous pouvez intégrer la vidéo à la page avec la macro [`EmbedYouTube`](https://github.com/mdn/yari/blob/main/kumascript/macros/EmbedYouTube.ejs). Elle permet d'insérer la vidéo à l'emplacement de la macro : -``` +```plain \{{EmbedYouTube("you-tube-url-slug")}} ``` Cette macro utilise un seul argument qui correspond à la fin de l'URL de la vidéo. Ainsi, pour afficher la vidéo disponible à l'URL `https://www.youtube.com/watch?v=ELS2OOUvxIw`, on appellera la macro ainsi : -``` +```plain \{{EmbedYouTube("ELS2OOUvxIw")}} ``` diff --git a/files/fr/mdn/writing_guidelines/howto/index.md b/files/fr/mdn/writing_guidelines/howto/index.md new file mode 100644 index 00000000000000..f44d13530e09ef --- /dev/null +++ b/files/fr/mdn/writing_guidelines/howto/index.md @@ -0,0 +1,14 @@ +--- +title: Guides des bonnes pratiques +slug: MDN/Writing_guidelines/Howto +l10n: + sourceCommit: aa66311219951396e7305df61eb31831360d2c79 +--- + +{{MDNSidebar}} + +Cette section porte sur les règles d'écriture sur MDN Web Docs et contient toutes les informations détaillées pour accomplir des tâches spécifiques lors d'une contribution à MDN Web Docs : comment utiliser Markdown, comment ajouter une entrée au glossaire, comment déplacer ou supprimer des pages, et plus encore. Pour en savoir plus sur _comment contribuer_ (via GitHub), consultez nos [directives de contribution](/fr/docs/MDN/Community/Contributing). + +> **Note :** Tout au long de cette section, nous supposons que vous avez lu les directives de contribution, que vous connaissez les dépôts `mdn/content` et `mdn/translated-content`, et que vous savez comment utiliser Git et GitHub. + +{{LandingPageListSubpages}} diff --git a/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md b/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md index 08cfac742d4565..ee6a475ab6ac0a 100644 --- a/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md +++ b/files/fr/mdn/writing_guidelines/howto/write_a_new_entry_in_the_glossary/index.md @@ -1,6 +1,8 @@ --- title: Écrire et référencer une entrée de glossaire slug: MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary +l10n: + sourceCommit: aa66311219951396e7305df61eb31831360d2c79 --- {{MDNSidebar}} @@ -11,7 +13,7 @@ Le glossaire ne sera potentiellement jamais complet, car le Web est en perpétue Contribuer au glossaire est une façon simple de rendre le Web plus compréhensible pour tout le monde. Il n'est pas nécessaire d'avoir des compétences techniques approfondies pour le faire. Les entrées du glossaire sont conçues pour être simples et concises. -> **Note :** La suite de cet article explique comment créer une entrée du glossaire. Toutefois, la structure du contenu de MDN utilise le contenu anglophone comme référence. Aussi, toute page devra d'abord être créée en anglais avant d'être localisée en français. Vous pouvez également aider à la traduction du glossaire en français, voir [Localiser MDN](/fr/docs/MDN/Contribute/Localize). +> **Note :** La suite de cet article explique comment créer une entrée du glossaire. Toutefois, la structure du contenu de MDN utilise le contenu anglophone comme référence. Aussi, toute page devra d'abord être créée en anglais avant d'être localisée en français. Vous pouvez également aider à la traduction du glossaire en français, voir [Localiser MDN](/fr/docs/MDN/Community/Contributing/Translated_content). ## Comment rédiger une entrée @@ -27,7 +29,7 @@ Pour toute page du glossaire, le premier paragraphe consiste en une description #### Rédiger une bonne entrée dans le glossaire -Ajoutez quelques paragraphes si nécessaire, mais attention au risque d'écrire un article complet. Un article complet est intéressant mais n'a pas sa place dans le glossaire. Si vous n'êtes pas certaine ou certain de l'emplacement de votre page, n'hésitez pas à [nous contacter pour en discuter](/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help). +Ajoutez quelques paragraphes si nécessaire, mais attention au risque d'écrire un article complet. Un article complet est intéressant mais n'a pas sa place dans le glossaire. Si vous n'êtes pas certaine ou certain de l'emplacement de votre page, n'hésitez pas à [nous contacter pour en discuter](/fr/docs/MDN/Community/Discussions). Voici quelques lignes directrices à garder à l'esprit pour écrire une bonne entrée de glossaire : @@ -37,12 +39,12 @@ Voici quelques lignes directrices à garder à l'esprit pour écrire une bonne e ### Ajouter des liens -Une entrée du glossaire devrait toujours finir par une section _En savoir plus_. Dans cette section, on devrait trouver des liens qui aident la lectrice ou le lecteur à aller plus loin en découvrant plus de détails, ou en apprenant à utiliser la technologie associée. +Une entrée du glossaire devrait toujours finir par une section _Voir aussi_. Dans cette section, on devrait trouver des liens qui aident la lectrice ou le lecteur à aller plus loin en découvrant plus de détails, ou en apprenant à utiliser la technologie associée. Une bonne pratique consiste à organiser ces liens en trois groupes : - Connaissances générales - - : Ces liens fournissent des informations généralistes à propos du terme ou du sujet. Il peut par exemple s'agir d'un lien vers une page [Wikipédia](https://www.wikipedia.org/) correspondante. + - : Ces liens fournissent des informations généralistes à propos du terme ou du sujet. Il peut par exemple s'agir d'un lien vers une page [Wikipédia](https://fr.wikipedia.org/) correspondante. - Référence technique - : Ces liens fournissent des ressources avec des informations techniques détaillées, sur MDN ou d'autres sites. - En apprendre plus