Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue146:c_c [2019/07/11 18:13] – d52fr
+++ issue146:c_c [2019/07/12 13:59] (Version actuelle) – andre_domenech
@@ Ligne 1: / Ligne 1: @@
 **This last month I’ve been looking at the hugo-reveal theme more and more often as a method to create quick and functional slide decks using Reveal.js. Google Slides and Powerpoint/LibreOffice Impress (or Keynote on macOS) are functional, and what people generally think of when you say presentation or keynote. However, if you’re planning to present something to do with code, and want to use something like carbon.now.sh to make nicely formatted screenshots of your code, I highly recommend you take a look at this article before you make your final decision.**
-Pendant ce dernier mois, j'ai regardé de plus en plus souvent le thème hugo-reveal comme une méthode pour créer des jeux de diapositives rapides et fonctionnels en utilisant Reveal.js. Google Slides et Powerpoint ou Impress de Libreoffice (ou Keynote sur macOS) sont fonctionnels, et c'est à eux que pensent généralement les gens quand vous parlez de présentation ou de conférence. Cependant, si vous prévoyez de présenter quelque chose à faire avec du code, et voulez utiliser quelque chose comme carbon.now.sh pour faire des copies d'écran de votre code joliment formatées, je vous recommande chaudement de jeter un œil à cet article avanrt de prendre votre décision.
+Pendant ce dernier mois, j'ai regardé de plus en plus souvent le thème hugo-reveal comme une méthode pour créer rapidement des jeux de diapositives fonctionnels en utilisant Reveal.js. Google Slides et Powerpoint ou Impress de LibreOffice (ou Keynote sur macOS) sont opérationnels, et c'est à eux que pensent généralement les gens quand vous parlez de présentation ou de conférence. Cependant, si vous prévoyez de présenter quelque chose à faire avec du code, et voulez utiliser quelque chose comme carbon.now.sh pour faire des copies d'écran de votre code joliment formatées, je vous recommande chaudement de jeter un œil à cet article avant de prendre votre décision.
 **Project files
@@ Ligne 9: / Ligne 9: @@
 If you prefer to download the files first, and simply follow along with the article, that’s fine.**
-Fichier de projet
+Fichiers du projet
 Tous les fichiers du projet sont sur github. https://github.com/lswest/fcm-146-hugo-reveal
-Si vous préférez d'abord télécharger les fichiers, et simplement poursuivre l'article, c'est bien.
+Si vous préférez commencer par télécharger les fichiers, et simplement suivre l'article, c'est bien aussi.
 **Setup
@@ Ligne 29: / Ligne 29: @@
 Les quelques premières étapes pour l'installation et le lancement sont simples :
 ••Installer git
-••Installer hugo (vous avez des chances de trouver une version dans vos dépôtslocaux - autrement regarder sur gohugo.io).
+••Installer hugo (vous avez des chances de trouver une version dans vos dépôts locaux ; autrement, regardez sur gohugo.io).
 ••Lancer : hugo new site nom-de-la-présentation
 ••Ensuite, vous pouvez prendre l'une des options suivantes :
@@ Ligne 41: / Ligne 41: @@
 Commencer votre présentation
-Habituellement, je fais quelques petites choses avant de commener à écrire mes diapos. J'en parlerai dans les paragraphes suivants. Si vous êtes complètement satisfait par l'apparence par défaut, faites seulement les étapes du prochain paragraphe.
+Habituellement, je fais quelques petites choses avant de commencer à écrire mes diapos. J'en parlerai dans les paragraphes suivants. Si vous êtes complètement satisfait de l'apparence par défaut, faites seulement les étapes du prochain paragraphe.
 **Configure Hugo
@@ Ligne 54: / Ligne 54: @@
 Configuration de Hugo
-Vous devrez vraiment définir le type e sortie et le thème à utiliser. Cette information est la même que celle que vous trouverez dans la page projet de reveal-hugo. J'ai mis le code sur GitHub ainsi, plutôt que de coller les lignes de code. je ferai référence au lien suivant et aux numéros de ligne correspondants.
+Vous devrez en fait définir le type de sortie et le thème à utiliser. Cette information est la même que celle que vous trouverez dans la page du projet reveal-hugo. J'ai mis le code sur GitHub ; ainsi, plutôt que de coller les lignes de code, je ferai référence au lien suivant et aux numéros de ligne correspondants.
 Fichier : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/config.toml
-lines: 5-10
+lignes : 5-10
-Je vous recommande fortement d'ajuster le fichier d'archetypes de sorte que vous n'ayez pas à mettre à jour constamment le préambule de vos fichiers si vous décidez de couper le contenu de la présentation en plusieurs fichiers.
+Je vous recommande fortement d'ajuster le fichier d’archétypes de sorte que vous n'ayez pas à mettre à jour constamment le préambule de vos fichiers si vous décidez de couper le contenu de la présentation en plusieurs fichiers.
 **File: https://raw.githubusercontent.com/lswest/fcm-146-hugo-reveal/master/archetypes/default.md?raw=True
@@ Ligne 73: / Ligne 73: @@
 File: https://raw.githubusercontent.com/lswest/fcm-146-hugo-reveal/master/archetypes/default.md?raw=True
-Dans ce fichier, je remplace « ---- » par « +++ » (pour passer à un « frontmatter » TOML), puis j'enlève le draft = true et paramètre le format de sortie.
+Dans ce fichier, je remplace « --- » par « +++ » (pour passer à un « frontmatter » TOML), puis j'enlève le draft = true et paramètre le format de sortie.
 Une fois les deux étapes ci-dessus réalisées, vous pouvez créer votre premier fichier :
@@ Ligne 79: / Ligne 79: @@
 hugo new _index.md
-Ceci créera un fichier sous content/_index.md. Dans la plupart des cas, ce fichier contiendra toute votre présentation. Si vous préférez la découper, vous aurez à regarder la documentation du projet pour les détails.
+Cela créera un fichier sous content/_index.md. Dans la plupart des cas, ce fichier contiendra toute votre présentation. Si vous préférez la découper, vous devrez regarder la documentation du projet pour les détails.
 **Image shortcode
@@ Ligne 91: / Ligne 91: @@
 The picture file should be in the same content folder level where the markdown file is – you’re calling the shortcode from.**
-Code réduit des images
+Shortcode des images
-Je préfère mettre à l'échelle mes images directement dans le Markdown, plutôt que les redimensionner à la main. Pour ce faire, j'ai édité un exemple officiel da la page de traitement des images d'Hugo pour les présentations.
+Je préfère mettre à l'échelle mes images directement dans le Markdown, plutôt que de les redimensionner à la main. Pour ce faire, j'ai édité un exemple officiel de la page de traitement des images d'Hugo pour les présentations.
 File: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/layouts/shortcodes/image.html
+Usage: {{<image file Resize 400x >}} (notez l'absence d'extension).
+Le fichier image devra être dans le même niveau de dossier de contenu que le fichier du markdown, vous appelez le « shortcode » à partir de là.
 **Syntax
@@ Ligne 112: / Ligne 116: @@
 For anyone wondering what the difference between “{{%%}}” and “{{<>}}” is - the percentage signs mean that markdown contained in the shortcode will be compiled, and the less than/greater than indicates that any inner text is just text.**
+Syntaxe
+hugo-reveal met quelques fonctionnalités de Reveal.js derrière des shortcodes et ils sont comme ceci :
+{{% fragment %>}}Le Markdown se place ici{{% /fragment %}} - Vous permet de passer des fragments un par un (par ex., pour dévoiler une liste point par point).
+{{% note %}}Le texte se place ici{{% /note %}} - Crée une note pour l'affichage du présentateur.
+{{% section %}}Les diapos vont ici{{% section %}} - Crée une série de diapos verticales.
+--- - Commence une nouvelle diapo
+~~~ - Commence/termine un fragment de code. Vous pouvez fournir un langage de programmation sur la même ligne que votre « ~~~ » d'ouverture (exemple : « ~~~python »)
+Pour tous ceux qui se demandent quelle est la différence entre « {{%%}} » et « {{<>}} » - le symbole du pourcentage signifie que le markdown contenu dans le shortcode sera compilé et le caractère plus petit/plus grand indique que le texte à l'intérieur n'est que du texte.
 **Running the slideshow
 Just open a console, cd to the directory your hugo project is in, and run hugo serve. This will run the hugo site on http://localhost:1313 (by default at least). You can also build straight up HTML with hugo build if you want to host the files somewhere. Bear in mind that building the HTML and just opening it in the browser will disable some features (such as speaker notes).**
+Lancement de la présentation
+Ouvrez simplement une console, changez de répertoire pour celui de votre projet hugo et lancez hugo serve. Ceci lancera le site d'hugo à  http://localhost:1313 (par défaut, du moins). Vous pouvez aussi construire le HTML directement avec hugo build si vous voulez que les fichiers soient hébergés quelque part. Gardez en tête que la construction du HTML et son ouverture dans un navigateur désactivera certaines fonctionnalités (telles que les notes du présentateur).
 **Speaker notes
@@ Ligne 122: / Ligne 146: @@
 You can control the slideshow from the presenter view as well, and it will be synchronized between the two views.**
+Notes du présentateur
+Parfois, vous voulez vous préparer de petites notes par diapo, qui ne sont pas visibles de l'auditoire. Vous pouvez aussi faire ça en utilisant le shorcode pour les notes (Voir la section Syntaxe). Pour ouvrir la vue du présentateur, appuyez simplement sur la touche « s » de votre clavier une fois que la présentation a démarré. Cela ouvrira une nouvelle fenêtre qui vous affiche la vue du présentateur. Je vous recommande de le faire au début de la présentation et de la déplacer sur votre écran, en laissant la présentation normale sur le projecteur.
 **Sharing your presentation
 After you’ve presented, you may want to put the slides up for anyone to look at, or to send it to your audience. While you can share the source code, it’s never going to be quite as convenient as a PDF. To create a PDF of the slides, you can visit http://localhost:1313/?print-pdf - this enables a special print stylesheet. After that, just print the page from your browser, and choose a PDF printer (or save to PDF). An example can be found here: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/FCM%20146%20Example%20Slide%20Deck.pdf**
+Partager votre présentation
+Une fois la présentation faite, vous pourriez vouloir rendre disponible la présentation pour que chacun la regarde, ou l'envoyer à votre auditoire. Bien que vous puissiez partager le code source, rien n'est plus pratique qu'un PDF. Pour créer un PDF des diapos, vous pouvez visiter http://localhost:1313/?print-pdf, cela active une feuille de style spéciale pour l'impression. Après cela, imprimez la page à partir de votre navigateur et choisissez l'imprimante PDF (ou sauvegardez en PDF). Un exemple peut être trouvé ici : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/FCM%20146%20Example%20Slide%20Deck.pdf
 **Conclusion
 Hopefully this article has adequately shown why Reveal.JS should be a valid consideration when creating code-heavy slideshows. If you have already used it, feel free to let me know about any bugs or issues you’ve run into. Also, if you have any questions or requests for new articles, feel free to reach out to me at lswest34+fcm@gmail.com. **
+Conclusion
+Avec un peu de chance, cet article a suffisamment montré pourquoi Reveal.JS serait une solution valable pour créer des présentations pleines de code. Si vous l'avez déjà utilisé, n'hésitez pas à m'informer des défauts et problèmes que vous avez rencontrés. De même, si vous avez des questions ou des demandes de nouveaux articles, n'hésitez pas à me joindre à lswest34+fcm@gmail.com.
@@ Ligne 137: / Ligne 173: @@
 https://github.com/lswest/fcm-146-hugo-reveal - The project demo I set up for this article. **
+Pour aller plus loin
+https://github.com/dzello/reveal-hugo - Projet reveal-hugo sur GitHub.
+https://github.com/lswest/fcm-146-hugo-reveal - La démo de projet que j'ai montée pour cet article.