Outils pour utilisateurs

Outils du site


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/12 10:24] d52frissue146:c_c [2019/07/12 13:59] (Version actuelle) andre_domenech
Ligne 9: Ligne 9:
 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 de projet+Fichiers du projet
  
 Tous les fichiers du projet sont sur github. https://github.com/lswest/fcm-146-hugo-reveal 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 **Setup
Ligne 29: Ligne 29:
 Les quelques premières étapes pour l'installation et le lancement sont simples : Les quelques premières étapes pour l'installation et le lancement sont simples :
 ••Installer git ••Installer git
-••Installer hugo (vous avez des chances de trouver une version dans vos dépôts locaux autrement, regardez 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 ••Lancer : hugo new site nom-de-la-présentation
 ••Ensuite, vous pouvez prendre l'une des options suivantes : ••Ensuite, vous pouvez prendre l'une des options suivantes :
Ligne 54: Ligne 54:
 Configuration de Hugo Configuration de Hugo
  
-Vous devrez vraiment 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 projet de reveal-hugo. J'ai mis le code sur GitHubainsi, 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 Fichier : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/config.toml
Ligne 73: Ligne 73:
 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
  
-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 : 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 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 **Image shortcode
Ligne 93: Ligne 93:
 Shortcode 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 de 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 File: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/layouts/shortcodes/image.html
Ligne 99: Ligne 99:
 Usage: {{<image file Resize 400x >}} (notez l'absence d'extension). 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à.+Le fichier image devra être dans le même niveau de dossier de contenu que le fichier du markdownvous appelez le « shortcode » à partir de là.
  
 **Syntax **Syntax
Ligne 121: Ligne 121:
 hugo-reveal met quelques fonctionnalités de Reveal.js derrière des shortcodes et ils sont comme ceci : 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)+{{% 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+{{% 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. {{% section %}}Les diapos vont ici{{% section %}} - Crée une série de diapos verticales.
Ligne 131: Ligne 131:
 ~~~ - Commence/termine un fragment de code. Vous pouvez fournir un langage de programmation sur la même ligne que votre « ~~~ » d'ouverture (exemple : « ~~~python ») ~~~ - 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 « {{%%}} » and « {{<>}} » - le symbole du pourcentage signifie que le markdown contenu dansn le shortcode sera compilé et le caractère plus petit/plus grand indique que le texte à l'intérieur n'est que du texte.+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
Ligne 139: Ligne 139:
 Lancement de la présentation Lancement de la présentation
  
-Ouvrez simplement une console, changez de répertoire pour celui où est votre projet hugo et lancez hugo serve. Ceci lancera le site d'hugo à  http://localhost:1313 (par défaut, au minimum). 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).+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 149: Ligne 149:
 Notes du présentateur 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é. Ceci 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.+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
Ligne 157: Ligne 157:
 Partager votre présentation 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 - ceci active une feuille de style spéciale pour l'impression. Après cela, imprimez simplement 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+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
Ligne 165: Ligne 165:
 Conclusion 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é. De même, si vous avez des questions ou des demandes de nouveaux articles, n'hésitez pas à me joindre à lswest34+fcm@gmail.com.+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.
  
  
issue146/c_c.txt · Dernière modification : 2019/07/12 13:59 de andre_domenech