{"id":127,"date":"2025-07-09T10:22:52","date_gmt":"2025-07-09T08:22:52","guid":{"rendered":"https:\/\/e-publish.uliege.be\/md2\/?post_type=chapter&#038;p=127"},"modified":"2025-12-05T08:46:58","modified_gmt":"2025-12-05T07:46:58","slug":"creer-un-diaporama","status":"publish","type":"chapter","link":"https:\/\/e-publish.uliege.be\/md2\/chapter\/creer-un-diaporama\/","title":{"raw":"Cr\u00e9er un diaporama","rendered":"Cr\u00e9er un diaporama"},"content":{"raw":"<span class=\"firstcharacter\"> L<\/span>es formats pdf, HTML (des pages Web) et ePub (un ensemble de pages HTML rassembl\u00e9es dans un fichier compress\u00e9 et destin\u00e9 aux liseuses) sont souvent utilis\u00e9s pour exporter des documents Markdown. C\u2019est cependant l\u2019utilisation, plus rarement \u00e9voqu\u00e9e, de Markdown pour cr\u00e9er des pr\u00e9sentations qui doit aussi retenir notre attention.\r\n\r\nDepuis l\u2019apparition des projecteurs d\u2019\u00e9crans, nous sommes habitu\u00e9s \u00e0 cr\u00e9er des pr\u00e9sentations, des <em>slides<\/em>, avec une suite bureautique, <em>Microsoft Office<\/em> ou, mieux, <em>LibreOffice<\/em>.\r\n\r\nLa question \"avez-vous une pr\u00e9sentation <em>PowerPoint<\/em> ?\" fait d\u2019ailleurs partie du langage courant et peu de personnes se posent la question d\u2019une \u00e9ventuelle alternative.\r\n\r\nMarkdown et <em>Pandoc<\/em>, associ\u00e9s \u00e0 <strong>Beamer<\/strong> (une classe particuli\u00e8re de <em>LaTeX<\/em> pour la cr\u00e9ation de diapositives), sont justement une alternative non seulement libre (ce que <em>LibreOffice<\/em> fait d\u00e9j\u00e0) mais \u00e9galement plus\u00a0:\r\n<ul>\r\n \t<li>simple et rapide\u00a0: aucune sophistication\u00a0;<\/li>\r\n \t<li>propre\u00a0: pas de codes cach\u00e9s\u00a0;<\/li>\r\n \t<li>ouverte\u00a0: source lisible avec un simple \u00e9diteur\u00a0;<\/li>\r\n \t<li>durable\u00a0: le fichier source est un fichier texte\u00a0;<\/li>\r\n \t<li>structur\u00e9e\u00a0: gr\u00e2ce \u00e0 la simplicit\u00e9 de Markdown\u00a0;<\/li>\r\n \t<li>esth\u00e9tique\u00a0: gr\u00e2ce aux nombreuses possibilit\u00e9s de <strong>Beamer<\/strong>.<\/li>\r\n<\/ul>\r\n<div id=\"beamer\" class=\"level3\" data-number=\"3.6.1\">\r\n<h1 data-number=\"3.6.1\">Beamer<\/h1>\r\nPour pouvoir produire une pr\u00e9sentation sous forme de diapositives, on doit activer <strong>Beamer<\/strong>[footnote]<a href=\"https:\/\/fr.wikipedia.org\/wiki\/Beamer\" target=\"_blank\" rel=\"noopener\">https:\/\/fr.wikipedia.org\/wiki\/Beamer<\/a>[\/footnote]. <strong>Beamer<\/strong> propose une s\u00e9rie de <strong>th\u00e8mes<\/strong>[footnote]<a href=\"https:\/\/hartwork.org\/beamer-theme-matrix\/\" target=\"_blank\" rel=\"noopener\">https:\/\/hartwork.org\/beamer-theme-matrix\/<\/a>[\/footnote] qui modifient la couleur, les styles et la disposition des informations sur la page. Les deux exemples ci-dessous utilisent le <em>theme<\/em> <strong>Madrid<\/strong> et le <em>colortheme<\/em> <strong>seahorse<\/strong>.\r\n<div class=\"bc-figure figure\">\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"2294\"]<img src=\"https:\/\/e-publish.uliege.be\/md2\/wp-content\/uploads\/sites\/34\/2025\/07\/file20.png\" alt=\"Quelques exemples de th\u00e8mes Beamer\" width=\"2294\" height=\"386\" \/> Quelques exemples de th\u00e8mes Beamer[\/caption]\r\n\r\n<\/div>\r\nIl y a de nombreuses autres possibilit\u00e9s.\r\n<div class=\"bc-figure figure\">\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"2826\"]<img src=\"https:\/\/e-publish.uliege.be\/md2\/wp-content\/uploads\/sites\/34\/2025\/07\/file21.png\" alt=\"La premi\u00e8re diapositive qui reprend les m\u00e9tadonn\u00e9es de l\u2019en-t\u00eate YAML\" width=\"2826\" height=\"1604\" \/> La premi\u00e8re diapositive qui reprend les m\u00e9tadonn\u00e9es de l\u2019en-t\u00eate YAML[\/caption]\r\n\r\n<\/div>\r\nLe code suivant\u00a0:\r\n<div class=\"textbox shaded\">\r\n<pre># What is the best way to ask a question?\r\n\r\nDoing a literature search is not \u00ab\u00a0looking for information about.\u00a0\u00bb\r\n\r\n## You must\u00a0:\r\n\r\n\u2013 start with a question (a sentence with a \u00ab\u00a0?\u00a0\u00bb)\r\n\u2013 to obtain an answer(s) to this question\r\n\r\n## Therefore\u00a0:\r\n\r\n\u2013 write a \u00ab\u00a0real question\u00a0\u00bb\r\n\u2013 identify the concepts present in this question\r\n\u2013 search for the keywords related to these concepts\r\n\u2013 write the documentary question<\/pre>\r\n<\/div>\r\ndonnera la diapositive ci-dessous (avec deux cadres).\r\n\r\n&nbsp;\r\n<div class=\"bc-figure figure\">\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"2822\"]<img src=\"https:\/\/e-publish.uliege.be\/md2\/wp-content\/uploads\/sites\/34\/2025\/07\/file22.png\" alt=\"Une diapositive avec deux cadres\" width=\"2822\" height=\"1614\" \/> Une diapositive avec deux cadres[\/caption]\r\n\r\n<\/div>\r\n<div id=\"les-commandes-de-base\" class=\"level4\" data-number=\"3.6.1.1\">\r\n<h2 data-number=\"3.6.1.1\">Les commandes de base<\/h2>\r\nLa majorit\u00e9 des commandes Markdown sont utilisables pour produire une pr\u00e9sentation <strong>beamer<\/strong>.\r\n\r\nLes commandes sp\u00e9cifiques les plus utiles sont\u00a0:\r\n<ul>\r\n \t<li>\"#\" pour cr\u00e9er une nouvelle page avec un titre courant (qui suit le signe \"#\" dans la source)\u00a0;<\/li>\r\n \t<li>\"-\u202f-\u202f-\" (trois tirets) pour cr\u00e9er une nouvelle page sans titre\u00a0;<\/li>\r\n \t<li>\"##\" pour cr\u00e9er un bloc (avec cadre pour certains th\u00e8mes) dans une diapositive\u00a0;<\/li>\r\n \t<li>\". . .\" (trois points s\u00e9par\u00e9s par une espace) pour cr\u00e9er une pause dans la pr\u00e9sentation. <strong>Beamer<\/strong> va cr\u00e9er autant de pages qu\u2019il y a de pauses (un \"clic\" pour afficher la suite de la page. C\u2019est la seule animation possible).<\/li>\r\n<\/ul>\r\nLe texte est align\u00e9 \u00e0 gauche.\r\n\r\nLes images sont align\u00e9es \u00e0 gauche et automatiquement redimensionn\u00e9es si elles d\u00e9passent le cadre. S\u2019il y a une l\u00e9gende (<strong>![l\u00e9gende](image.png)<\/strong>), l\u2019image est alors centr\u00e9e. Il est possible de r\u00e9duire la taille des images avec la commande <strong>{ width=50% }<\/strong>.\r\n\r\nLes tableaux sont bien reproduits. Les \u00e9quations \u00e9galement.\r\n\r\n<\/div>\r\n<div id=\"len-t\u00eate-yaml-1\" class=\"level4\" data-number=\"3.6.1.2\">\r\n<h2 data-number=\"3.6.1.2\">L\u2019en-t\u00eate YAML<\/h2>\r\nPour entrer les m\u00e9tadonn\u00e9es de votre pr\u00e9sentation (titre, sous-titre, auteur et date) et quelques instructions (le format, le th\u00e8me \u00e0 utiliser ou la taille des caract\u00e8res), vous devez cr\u00e9er un en-t\u00eate YAML sp\u00e9cifique.\r\n\r\nVoici un exemple d\u2019en-t\u00eate utilis\u00e9e pour une pr\u00e9sentation\u00a0:\r\n<div class=\"textbox shaded\">\r\n<pre>---\r\ntitle: Titre\r\nsubtitle: Sous-titre\r\nauthor: Nom, Pr\u00e9nom\r\ndate: 2021 (cc-by)\r\noutput: beamer_presentation\r\ntheme: Madrid\r\ncolortheme: seahorse\r\nfontsize: 10pt\r\naspectratio: 169\r\ntitlegraphic: logo.png\r\nlogo: fond.png\r\nlinkcolor: blue\r\n---<\/pre>\r\n<\/div>\r\nAvec le <em>th\u00e8me<\/em> <strong>Madrid<\/strong>, l\u2019auteur, le titre et la date apparaissent en pied de page de chacune des diapositives (voir exemples ci-dessus).\r\n\r\n\"<em>titlegraphic<\/em>\"\u00a0ajoute un logo sur la premi\u00e8re page. <em>\"logo:\"<\/em> ins\u00e8re une image en arri\u00e8re plan sur toutes les diapositives.\r\n\r\n<\/div>\r\n<div id=\"la-cr\u00e9ation-du-fichier-pdf\" class=\"level4\" data-number=\"3.6.1.3\">\r\n<h2 data-number=\"3.6.1.3\">La cr\u00e9ation du fichier pdf<\/h2>\r\nPour exporter la pr\u00e9sentation, qui est au format Markdown, dans le format pdf qui sera projet\u00e9 (mode \"pr\u00e9sentation\"), la commande <em>Pandoc<\/em> sera la suivante\u00a0:\r\n<div class=\"textbox shaded\">\r\n<pre>pandoc -t beamer votrefichier.md -o votrefichier.pdf<\/pre>\r\n<\/div>\r\nIl est bien \u00e9vident que les pr\u00e9sentations cr\u00e9\u00e9es avec cette m\u00e9thode, comme les textes vus plus haut, sont moins <em>\"funs\"<\/em> que celles cr\u00e9\u00e9es avec <em>PowerPoint<\/em> ou <em>Presentation<\/em> de <em>LibreOffice<\/em> ou directement avec <em>LaTeX<\/em>. Pour rappel, l\u2019objectif reste toujours de simplifier et d\u2019ouvrir la t\u00e2che.\r\n\r\nBeaucoup de fonctions (animations, mises en page compliqu\u00e9es\u2026) ne sont pas accessibles avec cette solution et c\u2019est donc un choix de rapidit\u00e9, d\u2019efficacit\u00e9, de propret\u00e9, de durabilit\u00e9 et d\u2019ouverture que l\u2019on fait en choisissant de cr\u00e9er des pr\u00e9sentations avec Markdown.\r\n\r\n<\/div>\r\n<\/div>\r\n<div id=\"autres-pistes\" class=\"level3\" data-number=\"3.6.2\">\r\n<h1 data-number=\"3.6.2\">Autres pistes<\/h1>\r\nAvec <em><a href=\"https:\/\/remarkjs.com\">Remarkjs<\/a><\/em>, la cr\u00e9ation de diaporamas est encore plus l\u00e9g\u00e8re et simple. Bas\u00e9 sur le format <em>GitHub flavor Markdown<\/em>, le fichier html est directement interpr\u00e9t\u00e9 par le navigateur et les diapositives sont visualis\u00e9es via le navigateur web.\r\n\r\nIl n\u2019est pas obligatoirement destin\u00e9 aux personnes connaissant les codes HTML et CSS. Il ne n\u00e9cessite qu\u2019un simple \u00e9diteur. Voir cet exemple\u00a0: <a href=\"https:\/\/opensolution.be\/slides\/Slides_rem.html\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/slides\/Slides_rem.html<\/a> (enregistrer le fichier ou presser CTRL+u (avec <em>Firefox<\/em>) pour voir le code de la pr\u00e9sentation que l\u2019on peut copier et sauver dans un fichier HTML puis modifier).\r\n\r\nUne autre solution simple est propos\u00e9e par l\u2019application <em>Marmota<\/em>[footnote]\u00c0 installer, voir\u00a0: <a href=\"https:\/\/marmota.app\/\" target=\"_blank\" rel=\"noopener\">https:\/\/marmota.app\/<\/a>.[\/footnote]<em>.<\/em>\r\n\r\nIl est \u00e9galement possible de cr\u00e9er des pr\u00e9sentations au format web avec <em>s5, slidy, slideous, dzslides<\/em> ou <em>revealjs<\/em>. La transformation se fait \u00e9galement avec <em>Pandoc<\/em>. Il faut indiquer <strong>\"-t FORMAT\"<\/strong> (un des cinq formats) dans la commande <em>Pandoc<\/em> et utiliser l\u2019extension .html en format de sortie.\r\n<div class=\"textbox shaded\">\r\n<pre>pandoc -t revealjs votrefichier.md -o votrefichier.html<\/pre>\r\n<\/div>\r\n<em>reveal.js<\/em> est un peu plus complexe que <em>remark.js<\/em> qui ne n\u00e9cessite qu\u2019un seul fichier HTML. Il y a plusieurs fa\u00e7ons de travailler avec <em>reveal.js<\/em>\u00a0:\r\n<ul>\r\n \t<li>en utilisant <em>Pandoc<\/em> comme ci-dessus (voir les instructions\u00a0: <a class=\"uri\" href=\"https:\/\/gist.github.com\/jsoma\/629b9564af5b1e7fa62d0a3a0a47c296\" target=\"_blank\" rel=\"noopener\">https:\/\/gist.github.com\/jsoma\/629b9564af5b1e7fa62d0a3a0a47c296<\/a>)\u00a0;<\/li>\r\n \t<li>en t\u00e9l\u00e9chargeant l\u2019ensemble des fichiers n\u00e9cessaires\u00a0: <a class=\"uri\" href=\"https:\/\/github.com\/hakimel\/reveal.js\/archive\/master.zip\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/hakimel\/reveal.js\/archive\/master.zip<\/a>. Ces fichiers, pour que les diapositives soient en ligne, doivent \u00eatre t\u00e9l\u00e9charg\u00e9s sur un serveur. C\u2019est le fichier index.html qui contient toutes les diapositives et qui doit \u00eatre modifi\u00e9 (voir exemple\u00a0: <a class=\"uri\" href=\"https:\/\/opensolution.be\/revslides\/\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/revslides\/<\/a>)\u00a0;<\/li>\r\n \t<li>en installant l\u2019application. Toutes les instructions sont pr\u00e9sent\u00e9es ici\u00a0: <a class=\"uri\" href=\"https:\/\/revealjs.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/revealjs.com\/<\/a>.<\/li>\r\n<\/ul>\r\n<\/div>","rendered":"<p><span class=\"firstcharacter\"> L<\/span>es formats pdf, HTML (des pages Web) et ePub (un ensemble de pages HTML rassembl\u00e9es dans un fichier compress\u00e9 et destin\u00e9 aux liseuses) sont souvent utilis\u00e9s pour exporter des documents Markdown. C\u2019est cependant l\u2019utilisation, plus rarement \u00e9voqu\u00e9e, de Markdown pour cr\u00e9er des pr\u00e9sentations qui doit aussi retenir notre attention.<\/p>\n<p>Depuis l\u2019apparition des projecteurs d\u2019\u00e9crans, nous sommes habitu\u00e9s \u00e0 cr\u00e9er des pr\u00e9sentations, des <em>slides<\/em>, avec une suite bureautique, <em>Microsoft Office<\/em> ou, mieux, <em>LibreOffice<\/em>.<\/p>\n<p>La question \u00ab\u00a0avez-vous une pr\u00e9sentation <em>PowerPoint<\/em> ?\u00a0\u00bb fait d\u2019ailleurs partie du langage courant et peu de personnes se posent la question d\u2019une \u00e9ventuelle alternative.<\/p>\n<p>Markdown et <em>Pandoc<\/em>, associ\u00e9s \u00e0 <strong>Beamer<\/strong> (une classe particuli\u00e8re de <em>LaTeX<\/em> pour la cr\u00e9ation de diapositives), sont justement une alternative non seulement libre (ce que <em>LibreOffice<\/em> fait d\u00e9j\u00e0) mais \u00e9galement plus\u00a0:<\/p>\n<ul>\n<li>simple et rapide\u00a0: aucune sophistication\u00a0;<\/li>\n<li>propre\u00a0: pas de codes cach\u00e9s\u00a0;<\/li>\n<li>ouverte\u00a0: source lisible avec un simple \u00e9diteur\u00a0;<\/li>\n<li>durable\u00a0: le fichier source est un fichier texte\u00a0;<\/li>\n<li>structur\u00e9e\u00a0: gr\u00e2ce \u00e0 la simplicit\u00e9 de Markdown\u00a0;<\/li>\n<li>esth\u00e9tique\u00a0: gr\u00e2ce aux nombreuses possibilit\u00e9s de <strong>Beamer<\/strong>.<\/li>\n<\/ul>\n<div id=\"beamer\" class=\"level3\" data-number=\"3.6.1\">\n<h1 data-number=\"3.6.1\">Beamer<\/h1>\n<p>Pour pouvoir produire une pr\u00e9sentation sous forme de diapositives, on doit activer <strong>Beamer<\/strong><a class=\"footnote\" title=\"https:\/\/fr.wikipedia.org\/wiki\/Beamer\" id=\"return-footnote-127-1\" href=\"#footnote-127-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a>. <strong>Beamer<\/strong> propose une s\u00e9rie de <strong>th\u00e8mes<\/strong><a class=\"footnote\" title=\"https:\/\/hartwork.org\/beamer-theme-matrix\/\" id=\"return-footnote-127-2\" href=\"#footnote-127-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a> qui modifient la couleur, les styles et la disposition des informations sur la page. Les deux exemples ci-dessous utilisent le <em>theme<\/em> <strong>Madrid<\/strong> et le <em>colortheme<\/em> <strong>seahorse<\/strong>.<\/p>\n<div class=\"bc-figure figure\">\n<figure style=\"width: 2294px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/e-publish.uliege.be\/md2\/wp-content\/uploads\/sites\/34\/2025\/07\/file20.png\" alt=\"Quelques exemples de th\u00e8mes Beamer\" width=\"2294\" height=\"386\" \/><figcaption class=\"wp-caption-text\">Quelques exemples de th\u00e8mes Beamer<\/figcaption><\/figure>\n<\/div>\n<p>Il y a de nombreuses autres possibilit\u00e9s.<\/p>\n<div class=\"bc-figure figure\">\n<figure style=\"width: 2826px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/e-publish.uliege.be\/md2\/wp-content\/uploads\/sites\/34\/2025\/07\/file21.png\" alt=\"La premi\u00e8re diapositive qui reprend les m\u00e9tadonn\u00e9es de l\u2019en-t\u00eate YAML\" width=\"2826\" height=\"1604\" \/><figcaption class=\"wp-caption-text\">La premi\u00e8re diapositive qui reprend les m\u00e9tadonn\u00e9es de l\u2019en-t\u00eate YAML<\/figcaption><\/figure>\n<\/div>\n<p>Le code suivant\u00a0:<\/p>\n<div class=\"textbox shaded\">\n<pre># What is the best way to ask a question?\r\n\r\nDoing a literature search is not \u00ab\u00a0looking for information about.\u00a0\u00bb\r\n\r\n## You must\u00a0:\r\n\r\n\u2013 start with a question (a sentence with a \u00ab\u00a0?\u00a0\u00bb)\r\n\u2013 to obtain an answer(s) to this question\r\n\r\n## Therefore\u00a0:\r\n\r\n\u2013 write a \u00ab\u00a0real question\u00a0\u00bb\r\n\u2013 identify the concepts present in this question\r\n\u2013 search for the keywords related to these concepts\r\n\u2013 write the documentary question<\/pre>\n<\/div>\n<p>donnera la diapositive ci-dessous (avec deux cadres).<\/p>\n<p>&nbsp;<\/p>\n<div class=\"bc-figure figure\">\n<figure style=\"width: 2822px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/e-publish.uliege.be\/md2\/wp-content\/uploads\/sites\/34\/2025\/07\/file22.png\" alt=\"Une diapositive avec deux cadres\" width=\"2822\" height=\"1614\" \/><figcaption class=\"wp-caption-text\">Une diapositive avec deux cadres<\/figcaption><\/figure>\n<\/div>\n<div id=\"les-commandes-de-base\" class=\"level4\" data-number=\"3.6.1.1\">\n<h2 data-number=\"3.6.1.1\">Les commandes de base<\/h2>\n<p>La majorit\u00e9 des commandes Markdown sont utilisables pour produire une pr\u00e9sentation <strong>beamer<\/strong>.<\/p>\n<p>Les commandes sp\u00e9cifiques les plus utiles sont\u00a0:<\/p>\n<ul>\n<li>\u00ab\u00a0#\u00a0\u00bb pour cr\u00e9er une nouvelle page avec un titre courant (qui suit le signe \u00ab\u00a0#\u00a0\u00bb dans la source)\u00a0;<\/li>\n<li>\u00ab\u00a0-\u202f-\u202f-\u00a0\u00bb (trois tirets) pour cr\u00e9er une nouvelle page sans titre\u00a0;<\/li>\n<li>\u00ab\u00a0##\u00a0\u00bb pour cr\u00e9er un bloc (avec cadre pour certains th\u00e8mes) dans une diapositive\u00a0;<\/li>\n<li>\u00ab\u00a0. . .\u00a0\u00bb (trois points s\u00e9par\u00e9s par une espace) pour cr\u00e9er une pause dans la pr\u00e9sentation. <strong>Beamer<\/strong> va cr\u00e9er autant de pages qu\u2019il y a de pauses (un \u00ab\u00a0clic\u00a0\u00bb pour afficher la suite de la page. C\u2019est la seule animation possible).<\/li>\n<\/ul>\n<p>Le texte est align\u00e9 \u00e0 gauche.<\/p>\n<p>Les images sont align\u00e9es \u00e0 gauche et automatiquement redimensionn\u00e9es si elles d\u00e9passent le cadre. S\u2019il y a une l\u00e9gende (<strong>![l\u00e9gende](image.png)<\/strong>), l\u2019image est alors centr\u00e9e. Il est possible de r\u00e9duire la taille des images avec la commande <strong>{ width=50% }<\/strong>.<\/p>\n<p>Les tableaux sont bien reproduits. Les \u00e9quations \u00e9galement.<\/p>\n<\/div>\n<div id=\"len-t\u00eate-yaml-1\" class=\"level4\" data-number=\"3.6.1.2\">\n<h2 data-number=\"3.6.1.2\">L\u2019en-t\u00eate YAML<\/h2>\n<p>Pour entrer les m\u00e9tadonn\u00e9es de votre pr\u00e9sentation (titre, sous-titre, auteur et date) et quelques instructions (le format, le th\u00e8me \u00e0 utiliser ou la taille des caract\u00e8res), vous devez cr\u00e9er un en-t\u00eate YAML sp\u00e9cifique.<\/p>\n<p>Voici un exemple d\u2019en-t\u00eate utilis\u00e9e pour une pr\u00e9sentation\u00a0:<\/p>\n<div class=\"textbox shaded\">\n<pre>---\r\ntitle: Titre\r\nsubtitle: Sous-titre\r\nauthor: Nom, Pr\u00e9nom\r\ndate: 2021 (cc-by)\r\noutput: beamer_presentation\r\ntheme: Madrid\r\ncolortheme: seahorse\r\nfontsize: 10pt\r\naspectratio: 169\r\ntitlegraphic: logo.png\r\nlogo: fond.png\r\nlinkcolor: blue\r\n---<\/pre>\n<\/div>\n<p>Avec le <em>th\u00e8me<\/em> <strong>Madrid<\/strong>, l\u2019auteur, le titre et la date apparaissent en pied de page de chacune des diapositives (voir exemples ci-dessus).<\/p>\n<p>\u00ab\u00a0<em>titlegraphic<\/em>\u00a0\u00bb\u00a0ajoute un logo sur la premi\u00e8re page. <em>\u00ab\u00a0logo:\u00a0\u00bb<\/em> ins\u00e8re une image en arri\u00e8re plan sur toutes les diapositives.<\/p>\n<\/div>\n<div id=\"la-cr\u00e9ation-du-fichier-pdf\" class=\"level4\" data-number=\"3.6.1.3\">\n<h2 data-number=\"3.6.1.3\">La cr\u00e9ation du fichier pdf<\/h2>\n<p>Pour exporter la pr\u00e9sentation, qui est au format Markdown, dans le format pdf qui sera projet\u00e9 (mode \u00ab\u00a0pr\u00e9sentation\u00a0\u00bb), la commande <em>Pandoc<\/em> sera la suivante\u00a0:<\/p>\n<div class=\"textbox shaded\">\n<pre>pandoc -t beamer votrefichier.md -o votrefichier.pdf<\/pre>\n<\/div>\n<p>Il est bien \u00e9vident que les pr\u00e9sentations cr\u00e9\u00e9es avec cette m\u00e9thode, comme les textes vus plus haut, sont moins <em>\u00ab\u00a0funs\u00a0\u00bb<\/em> que celles cr\u00e9\u00e9es avec <em>PowerPoint<\/em> ou <em>Presentation<\/em> de <em>LibreOffice<\/em> ou directement avec <em>LaTeX<\/em>. Pour rappel, l\u2019objectif reste toujours de simplifier et d\u2019ouvrir la t\u00e2che.<\/p>\n<p>Beaucoup de fonctions (animations, mises en page compliqu\u00e9es\u2026) ne sont pas accessibles avec cette solution et c\u2019est donc un choix de rapidit\u00e9, d\u2019efficacit\u00e9, de propret\u00e9, de durabilit\u00e9 et d\u2019ouverture que l\u2019on fait en choisissant de cr\u00e9er des pr\u00e9sentations avec Markdown.<\/p>\n<\/div>\n<\/div>\n<div id=\"autres-pistes\" class=\"level3\" data-number=\"3.6.2\">\n<h1 data-number=\"3.6.2\">Autres pistes<\/h1>\n<p>Avec <em><a href=\"https:\/\/remarkjs.com\">Remarkjs<\/a><\/em>, la cr\u00e9ation de diaporamas est encore plus l\u00e9g\u00e8re et simple. Bas\u00e9 sur le format <em>GitHub flavor Markdown<\/em>, le fichier html est directement interpr\u00e9t\u00e9 par le navigateur et les diapositives sont visualis\u00e9es via le navigateur web.<\/p>\n<p>Il n\u2019est pas obligatoirement destin\u00e9 aux personnes connaissant les codes HTML et CSS. Il ne n\u00e9cessite qu\u2019un simple \u00e9diteur. Voir cet exemple\u00a0: <a href=\"https:\/\/opensolution.be\/slides\/Slides_rem.html\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/slides\/Slides_rem.html<\/a> (enregistrer le fichier ou presser CTRL+u (avec <em>Firefox<\/em>) pour voir le code de la pr\u00e9sentation que l\u2019on peut copier et sauver dans un fichier HTML puis modifier).<\/p>\n<p>Une autre solution simple est propos\u00e9e par l\u2019application <em>Marmota<\/em><a class=\"footnote\" title=\"\u00c0 installer, voir\u00a0: https:\/\/marmota.app\/.\" id=\"return-footnote-127-3\" href=\"#footnote-127-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a><em>.<\/em><\/p>\n<p>Il est \u00e9galement possible de cr\u00e9er des pr\u00e9sentations au format web avec <em>s5, slidy, slideous, dzslides<\/em> ou <em>revealjs<\/em>. La transformation se fait \u00e9galement avec <em>Pandoc<\/em>. Il faut indiquer <strong>\u00ab\u00a0-t FORMAT\u00a0\u00bb<\/strong> (un des cinq formats) dans la commande <em>Pandoc<\/em> et utiliser l\u2019extension .html en format de sortie.<\/p>\n<div class=\"textbox shaded\">\n<pre>pandoc -t revealjs votrefichier.md -o votrefichier.html<\/pre>\n<\/div>\n<p><em>reveal.js<\/em> est un peu plus complexe que <em>remark.js<\/em> qui ne n\u00e9cessite qu\u2019un seul fichier HTML. Il y a plusieurs fa\u00e7ons de travailler avec <em>reveal.js<\/em>\u00a0:<\/p>\n<ul>\n<li>en utilisant <em>Pandoc<\/em> comme ci-dessus (voir les instructions\u00a0: <a class=\"uri\" href=\"https:\/\/gist.github.com\/jsoma\/629b9564af5b1e7fa62d0a3a0a47c296\" target=\"_blank\" rel=\"noopener\">https:\/\/gist.github.com\/jsoma\/629b9564af5b1e7fa62d0a3a0a47c296<\/a>)\u00a0;<\/li>\n<li>en t\u00e9l\u00e9chargeant l\u2019ensemble des fichiers n\u00e9cessaires\u00a0: <a class=\"uri\" href=\"https:\/\/github.com\/hakimel\/reveal.js\/archive\/master.zip\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/hakimel\/reveal.js\/archive\/master.zip<\/a>. Ces fichiers, pour que les diapositives soient en ligne, doivent \u00eatre t\u00e9l\u00e9charg\u00e9s sur un serveur. C\u2019est le fichier index.html qui contient toutes les diapositives et qui doit \u00eatre modifi\u00e9 (voir exemple\u00a0: <a class=\"uri\" href=\"https:\/\/opensolution.be\/revslides\/\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/revslides\/<\/a>)\u00a0;<\/li>\n<li>en installant l\u2019application. Toutes les instructions sont pr\u00e9sent\u00e9es ici\u00a0: <a class=\"uri\" href=\"https:\/\/revealjs.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/revealjs.com\/<\/a>.<\/li>\n<\/ul>\n<\/div>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-127-1\"><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Beamer\" target=\"_blank\" rel=\"noopener\">https:\/\/fr.wikipedia.org\/wiki\/Beamer<\/a> <a href=\"#return-footnote-127-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-127-2\"><a href=\"https:\/\/hartwork.org\/beamer-theme-matrix\/\" target=\"_blank\" rel=\"noopener\">https:\/\/hartwork.org\/beamer-theme-matrix\/<\/a> <a href=\"#return-footnote-127-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-127-3\">\u00c0 installer, voir\u00a0: <a href=\"https:\/\/marmota.app\/\" target=\"_blank\" rel=\"noopener\">https:\/\/marmota.app\/<\/a>. <a href=\"#return-footnote-127-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":2,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-127","chapter","type-chapter","status-publish","hentry"],"part":70,"_links":{"self":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/127"}],"collection":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":22,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/127\/revisions"}],"predecessor-version":[{"id":1373,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/127\/revisions\/1373"}],"part":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/parts\/70"}],"metadata":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/127\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapter-type?post=127"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/contributor?post=127"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/license?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}