Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste :
issue146:c_c

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue146:c_c [2019/07/04 09:47] – d52frissue146: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.** **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 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 **Project files
Ligne 6: Ligne 8:
  
 If you prefer to download the files first, and simply follow along with the article, that’s fine.** If you prefer to download the files first, and simply follow along with the article, that’s fine.**
 +
 +Fichiers du projet
 +
 +Tous les fichiers du projet sont sur github. https://github.com/lswest/fcm-146-hugo-reveal
 +
 +Si vous préférez commencer par télécharger les fichiers, et simplement suivre l'article, c'est bien aussi.
  
 **Setup **Setup
Ligne 16: Ligne 24:
 • run: git init in the folder created above, followed by: git submodule add https://github.com/dzello/reveal-hugo.git themes/reveal-hugo • run: git init in the folder created above, followed by: git submodule add https://github.com/dzello/reveal-hugo.git themes/reveal-hugo
 • Just download a zip archive from their github page (see further reading).** • Just download a zip archive from their github page (see further reading).**
 +
 +Paramétrage
 +
 +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ô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 :
 +••lancer : git init dans le dossier créé ci-dessus, suivi de : git submodule add https://github.com/dzello/reveal-hugo.git themes/reveal-hugo 
 +••Simplement télécharger une archive zip depuis leur page github (voir Pour aller plus loin). 
  
 **Starting your presentation **Starting your presentation
  
 There are a few things I usually do before writing any of the slides. I’ll be covering them in the next few headings. If you’re completely satisfied with the default appearance, just do the steps in the first heading.** There are a few things I usually do before writing any of the slides. I’ll be covering them in the next few headings. If you’re completely satisfied with the default appearance, just do the steps in the first heading.**
 +
 +Commencer votre présentation
 +
 +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 **Configure Hugo
Ligne 29: Ligne 51:
  
 I also highly recommend adjusting the archetypes file so you don’t need to constantly update the preamble for your files if you decide to split the slideshow up into multiple content files.** I also highly recommend adjusting the archetypes file so you don’t need to constantly update the preamble for your files if you decide to split the slideshow up into multiple content files.**
 +
 +Configuration de Hugo
 +
 +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
 +lignes : 5-10
 +
 +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 **File: https://raw.githubusercontent.com/lswest/fcm-146-hugo-reveal/master/archetypes/default.md?raw=True
Ligne 39: Ligne 70:
  
 This will create a file under content/_index.md. In most cases, this file will contain your entire slideshow. If you prefer to split it up, you’ll want to check the project’s documentation for details.** This will create a file under content/_index.md. In most cases, this file will contain your entire slideshow. If you prefer to split it up, you’ll want to check the project’s documentation for details.**
 +
 +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.
 +
 +Une fois les deux étapes ci-dessus réalisées, vous pouvez créer votre premier fichier :
 +
 +hugo new _index.md
 +
 +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 **Image shortcode
Ligne 49: Ligne 90:
  
 The picture file should be in the same content folder level where the markdown file is – you’re calling the shortcode from.** The picture file should be in the same content folder level where the markdown file is – you’re calling the shortcode from.**
 +
 +Shortcode des images
 +
 +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 **Syntax
Ligne 65: 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.** 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 **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).** 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 **Speaker notes
Ligne 75: Ligne 146:
  
 You can control the slideshow from the presenter view as well, and it will be synchronized between the two views.** 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 **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** 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 **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. ** 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 90: Ligne 173:
  
 https://github.com/lswest/fcm-146-hugo-reveal - The project demo I set up for this article. ** 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.
issue146/c_c.1562226450.txt.gz · Dernière modification : 2019/07/04 09:47 de d52fr