{"id":132,"date":"2025-07-09T10:24:55","date_gmt":"2025-07-09T08:24:55","guid":{"rendered":"https:\/\/e-publish.uliege.be\/md2\/?post_type=chapter&#038;p=132"},"modified":"2025-11-13T08:45:58","modified_gmt":"2025-11-13T07:45:58","slug":"faire-un-diaporama","status":"publish","type":"chapter","link":"https:\/\/e-publish.uliege.be\/md2\/chapter\/faire-un-diaporama\/","title":{"raw":"Un diaporama","rendered":"Un diaporama"},"content":{"raw":"<span class=\"firstcharacter\"> C<\/span>ette page compl\u00e8te la page du manuel consacr\u00e9e \u00e0 <strong>Beamer<\/strong>. Vous trouverez ci-dessous deux exemples complets avec <strong>Beamer<\/strong> (une classe <em>LaTeX<\/em>) et <em>Remark.js<\/em> (une page web avec du code <em>javascript<\/em>).\r\n\r\nLes deux exemples proposent le m\u00eame contenu mais avec des technologies diff\u00e9rentes. Avec <em>Remark.js<\/em>, il n\u2019est pas n\u00e9cessaire d\u2019installer <em>Pandoc<\/em>, un simple \u00e9diteur de texte (pour \u00e9diter un fichier HTML) suffit.\r\n<div id=\"beamer-1\" class=\"level3\" data-number=\"4.2.1\">\r\n<h1 data-number=\"4.2.1\">Beamer<\/h1>\r\nLa cr\u00e9ation de documents avec <strong>Beamer<\/strong> va se faire comme avec les documents pr\u00e9sent\u00e9s dans les deux mod\u00e8les pr\u00e9c\u00e9dents. Voici un exemple\u00a0\u00a0: <a href=\"https:\/\/opensolution.be\/docs\/Friday.pdf\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/docs\/Friday.pdf<\/a>.\r\n<div id=\"mod\u00e8le-1\" class=\"level4\" data-number=\"4.2.1.1\">\r\n<h2 data-number=\"4.2.1.1\">Mod\u00e8le<\/h2>\r\nCi-dessous un mod\u00e8le \u00e9l\u00e9mentaire que vous pouvez copier-coller dans votre \u00e9diteur de texte pour d\u00e9buter la cr\u00e9ation de diapositives. Dans ce mod\u00e8le :\r\n<ul>\r\n \t<li>on choisit la <em>classe<\/em> (<strong>output: beamer_presentation<\/strong>)\u00a0;<\/li>\r\n \t<li>on choisit un <em>theme<\/em>[footnote]<a href=\"https:\/\/hartwork.org\/beamer-theme-matrix\/\" target=\"_blank\" rel=\"noopener\">https:\/\/hartwork.org\/beamer-theme-matrix\/<\/a>[\/footnote], ici <strong>Madrid<\/strong> et un <em>colortheme<\/em>, ici <strong>seahorse<\/strong>\u00a0;<\/li>\r\n \t<li>on pr\u00e9cise le format, ici <strong>16*9<\/strong> pour correspondre aux \u00e9crans actuels\u00a0;<\/li>\r\n \t<li>on pr\u00e9cise le logo qui appara\u00eetra sur la premi\u00e8re diapositive (<strong>titlegraphic: logo.png<\/strong>) et celui qui servira de fond d\u2019\u00e9cran sur toutes les diapositives (<strong>logo: fond.png<\/strong>).<\/li>\r\n<\/ul>\r\nLes m\u00e9tadonn\u00e9es (title, subtitle, author et date), avec le th\u00e8me choisi, appara\u00eetront sur la premi\u00e8re diapositive et en pied de page pour toutes les diapositives (sauf subtitle)[footnote]Il faut veiller \u00e0 ne pas choisir un titre trop long.[\/footnote].\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\n---\r\n\r\n# Diapositive 1\r\n\r\nListe\u00a0:\r\n\r\n- un\r\n- deux\r\n- trois\r\n\r\n![Une image](image.jpg)\r\n\r\n# Diapositive 2\r\n\r\n## Premier cadre\r\n\r\ntexte\r\n\r\n## Deuxi\u00e8me cadre\r\n\r\ntexte<\/pre>\r\n<\/div>\r\n<\/div>\r\n<div id=\"cr\u00e9ation-du-fichier-pdf\" class=\"level4\" data-number=\"4.2.1.2\">\r\n<h2 data-number=\"4.2.1.2\">Cr\u00e9ation du fichier pdf<\/h2>\r\nPour produire le fichier pdf, on va utiliser la commande\u00a0:\r\n<div class=\"textbox shaded\">\r\n<pre>pandoc -t beamer votrefichier.md -o votrefichier.pdf<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div id=\"remark.js\" class=\"level3\" data-number=\"4.2.2\">\r\n<h1 data-number=\"4.2.2\">Remark.js<\/h1>\r\nAvec Remark.js[footnote]<a href=\"https:\/\/remarkjs.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/remarkjs.com\/<\/a>[\/footnote], 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 est directement interpr\u00e9t\u00e9 par le navigateur. Voici un exemple\u00a0: <a href=\"https:\/\/opensolution.be\/fooa\/\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/fooa\/<\/a>\u00a0(pressez CTRL-u pour voir le contenu du fichier).\r\n<div id=\"mod\u00e8le-2\" class=\"level4\" data-number=\"4.2.2.1\">\r\n<h2 data-number=\"4.2.2.1\">Mod\u00e8le<\/h2>\r\nVous pouvez copier le code ci-dessous dans un fichier texte et le sauver comme une page web (typiquement\u00a0: <strong>diapo.html<\/strong>).\r\n\r\nAttention \u00e0 ne pas toucher au d\u00e9but, ni \u00e0 la fin du code. Vous \u00e9crivez entre <strong>&lt;textarea id=\u201csource\u201d&gt;<\/strong> et <strong>&lt;\/textarea&gt;<\/strong>. Vous pouvez n\u00e9anmoins changer le nom de la \"page\" HTML (entre <strong>&lt;title&gt;<\/strong> et <strong>&lt;\/title&gt;<\/strong>).\r\n\r\nOn peut introduire des images (<strong>![](logo.png)<\/strong>), des fonds d\u2019\u00e9cran (<strong>background-image: url(image.jpg)<\/strong>), des liens, des listes ou des tableaux.\r\n\r\nL\u2019ensemble des commandes possibles est d\u00e9crit sur le wiki du projet[footnote]<a href=\"https:\/\/github.com\/gnab\/remark\/wiki\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/gnab\/remark\/wiki<\/a>[\/footnote].\r\n<div class=\"textbox shaded\">\r\n<div id=\"mod\u00e8le-2\" class=\"level4\" data-number=\"4.2.2.1\">\r\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Titre&lt;\/title&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;style&gt;\r\n      body { font-family: \"Noto Sans\", \"Arial\", \"Helvetica\", sans-serif; }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;textarea id=\"source\"&gt;\r\n\r\nclass: center, middle\r\n\r\n# Titre\r\n## Sous-titre\r\n\r\ndate\r\n\r\n---\r\n\r\n# Diapositive 1\r\n\r\nListe :\r\n\r\n- un\r\n- deux\r\n- trois\r\n\r\n![Une image](image.jpg)\r\n\r\n# Diapositive 2\r\n\r\n## Premier sous-titre\r\n\r\ntexte\r\n\r\n## Deuxi\u00e8me sous-titre\r\n\r\ntexte\r\n\r\n   &lt;\/textarea&gt;\r\n   &lt;script src=\"https:\/\/remarkjs.com\/downloads\/remark-latest.min.js\"&gt;\r\n   &lt;\/script&gt;\r\n   &lt;script&gt;\r\n     var slideshow = remark.create({ratio: '16:9'});\r\n   &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\r\n<\/div>\r\n<\/div>\r\n<h2>Utilisation<\/h2>\r\n<div id=\"utilisation\" class=\"level4\" data-number=\"4.2.2.2\">\r\n\r\nUne fois le fichier HTML cr\u00e9\u00e9, compl\u00e9t\u00e9 et sauv\u00e9, il est ouvert avec un navigateur web (<em>Firefox<\/em> ou autre).\r\n\r\nSi on dispose d\u2019un espace web, on peut l\u2019y copier (attention \u00e0 joindre les images utilis\u00e9es).\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>","rendered":"<p><span class=\"firstcharacter\"> C<\/span>ette page compl\u00e8te la page du manuel consacr\u00e9e \u00e0 <strong>Beamer<\/strong>. Vous trouverez ci-dessous deux exemples complets avec <strong>Beamer<\/strong> (une classe <em>LaTeX<\/em>) et <em>Remark.js<\/em> (une page web avec du code <em>javascript<\/em>).<\/p>\n<p>Les deux exemples proposent le m\u00eame contenu mais avec des technologies diff\u00e9rentes. Avec <em>Remark.js<\/em>, il n\u2019est pas n\u00e9cessaire d\u2019installer <em>Pandoc<\/em>, un simple \u00e9diteur de texte (pour \u00e9diter un fichier HTML) suffit.<\/p>\n<div id=\"beamer-1\" class=\"level3\" data-number=\"4.2.1\">\n<h1 data-number=\"4.2.1\">Beamer<\/h1>\n<p>La cr\u00e9ation de documents avec <strong>Beamer<\/strong> va se faire comme avec les documents pr\u00e9sent\u00e9s dans les deux mod\u00e8les pr\u00e9c\u00e9dents. Voici un exemple\u00a0\u00a0: <a href=\"https:\/\/opensolution.be\/docs\/Friday.pdf\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/docs\/Friday.pdf<\/a>.<\/p>\n<div id=\"mod\u00e8le-1\" class=\"level4\" data-number=\"4.2.1.1\">\n<h2 data-number=\"4.2.1.1\">Mod\u00e8le<\/h2>\n<p>Ci-dessous un mod\u00e8le \u00e9l\u00e9mentaire que vous pouvez copier-coller dans votre \u00e9diteur de texte pour d\u00e9buter la cr\u00e9ation de diapositives. Dans ce mod\u00e8le :<\/p>\n<ul>\n<li>on choisit la <em>classe<\/em> (<strong>output: beamer_presentation<\/strong>)\u00a0;<\/li>\n<li>on choisit un <em>theme<\/em><a class=\"footnote\" title=\"https:\/\/hartwork.org\/beamer-theme-matrix\/\" id=\"return-footnote-132-1\" href=\"#footnote-132-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a>, ici <strong>Madrid<\/strong> et un <em>colortheme<\/em>, ici <strong>seahorse<\/strong>\u00a0;<\/li>\n<li>on pr\u00e9cise le format, ici <strong>16*9<\/strong> pour correspondre aux \u00e9crans actuels\u00a0;<\/li>\n<li>on pr\u00e9cise le logo qui appara\u00eetra sur la premi\u00e8re diapositive (<strong>titlegraphic: logo.png<\/strong>) et celui qui servira de fond d\u2019\u00e9cran sur toutes les diapositives (<strong>logo: fond.png<\/strong>).<\/li>\n<\/ul>\n<p>Les m\u00e9tadonn\u00e9es (title, subtitle, author et date), avec le th\u00e8me choisi, appara\u00eetront sur la premi\u00e8re diapositive et en pied de page pour toutes les diapositives (sauf subtitle)<a class=\"footnote\" title=\"Il faut veiller \u00e0 ne pas choisir un titre trop long.\" id=\"return-footnote-132-2\" href=\"#footnote-132-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a>.<\/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\n---\r\n\r\n# Diapositive 1\r\n\r\nListe\u00a0:\r\n\r\n- un\r\n- deux\r\n- trois\r\n\r\n![Une image](image.jpg)\r\n\r\n# Diapositive 2\r\n\r\n## Premier cadre\r\n\r\ntexte\r\n\r\n## Deuxi\u00e8me cadre\r\n\r\ntexte<\/pre>\n<\/div>\n<\/div>\n<div id=\"cr\u00e9ation-du-fichier-pdf\" class=\"level4\" data-number=\"4.2.1.2\">\n<h2 data-number=\"4.2.1.2\">Cr\u00e9ation du fichier pdf<\/h2>\n<p>Pour produire le fichier pdf, on va utiliser la commande\u00a0:<\/p>\n<div class=\"textbox shaded\">\n<pre>pandoc -t beamer votrefichier.md -o votrefichier.pdf<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"remark.js\" class=\"level3\" data-number=\"4.2.2\">\n<h1 data-number=\"4.2.2\">Remark.js<\/h1>\n<p>Avec Remark.js<a class=\"footnote\" title=\"https:\/\/remarkjs.com\/\" id=\"return-footnote-132-3\" href=\"#footnote-132-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a>, 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 est directement interpr\u00e9t\u00e9 par le navigateur. Voici un exemple\u00a0: <a href=\"https:\/\/opensolution.be\/fooa\/\" target=\"_blank\" rel=\"noopener\">https:\/\/opensolution.be\/fooa\/<\/a>\u00a0(pressez CTRL-u pour voir le contenu du fichier).<\/p>\n<div id=\"mod\u00e8le-2\" class=\"level4\" data-number=\"4.2.2.1\">\n<h2 data-number=\"4.2.2.1\">Mod\u00e8le<\/h2>\n<p>Vous pouvez copier le code ci-dessous dans un fichier texte et le sauver comme une page web (typiquement\u00a0: <strong>diapo.html<\/strong>).<\/p>\n<p>Attention \u00e0 ne pas toucher au d\u00e9but, ni \u00e0 la fin du code. Vous \u00e9crivez entre <strong>&lt;textarea id=\u201csource\u201d&gt;<\/strong> et <strong>&lt;\/textarea&gt;<\/strong>. Vous pouvez n\u00e9anmoins changer le nom de la \u00ab\u00a0page\u00a0\u00bb HTML (entre <strong>&lt;title&gt;<\/strong> et <strong>&lt;\/title&gt;<\/strong>).<\/p>\n<p>On peut introduire des images (<strong>![](logo.png)<\/strong>), des fonds d\u2019\u00e9cran (<strong>background-image: url(image.jpg)<\/strong>), des liens, des listes ou des tableaux.<\/p>\n<p>L\u2019ensemble des commandes possibles est d\u00e9crit sur le wiki du projet<a class=\"footnote\" title=\"https:\/\/github.com\/gnab\/remark\/wiki\" id=\"return-footnote-132-4\" href=\"#footnote-132-4\" aria-label=\"Footnote 4\"><sup class=\"footnote\">[4]<\/sup><\/a>.<\/p>\n<div class=\"textbox shaded\">\n<div class=\"level4\" data-number=\"4.2.2.1\">\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Titre&lt;\/title&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;style&gt;\r\n      body { font-family: \"Noto Sans\", \"Arial\", \"Helvetica\", sans-serif; }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;textarea id=\"source\"&gt;\r\n\r\nclass: center, middle\r\n\r\n# Titre\r\n## Sous-titre\r\n\r\ndate\r\n\r\n---\r\n\r\n# Diapositive 1\r\n\r\nListe :\r\n\r\n- un\r\n- deux\r\n- trois\r\n\r\n![Une image](image.jpg)\r\n\r\n# Diapositive 2\r\n\r\n## Premier sous-titre\r\n\r\ntexte\r\n\r\n## Deuxi\u00e8me sous-titre\r\n\r\ntexte\r\n\r\n   &lt;\/textarea&gt;\r\n   &lt;script src=\"https:\/\/remarkjs.com\/downloads\/remark-latest.min.js\"&gt;\r\n   &lt;\/script&gt;\r\n   &lt;script&gt;\r\n     var slideshow = remark.create({ratio: '16:9'});\r\n   &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<\/div>\n<h2>Utilisation<\/h2>\n<div id=\"utilisation\" class=\"level4\" data-number=\"4.2.2.2\">\n<p>Une fois le fichier HTML cr\u00e9\u00e9, compl\u00e9t\u00e9 et sauv\u00e9, il est ouvert avec un navigateur web (<em>Firefox<\/em> ou autre).<\/p>\n<p>Si on dispose d\u2019un espace web, on peut l\u2019y copier (attention \u00e0 joindre les images utilis\u00e9es).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-132-1\"><a href=\"https:\/\/hartwork.org\/beamer-theme-matrix\/\" target=\"_blank\" rel=\"noopener\">https:\/\/hartwork.org\/beamer-theme-matrix\/<\/a> <a href=\"#return-footnote-132-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-132-2\">Il faut veiller \u00e0 ne pas choisir un titre trop long. <a href=\"#return-footnote-132-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-132-3\"><a href=\"https:\/\/remarkjs.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/remarkjs.com\/<\/a> <a href=\"#return-footnote-132-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><li id=\"footnote-132-4\"><a href=\"https:\/\/github.com\/gnab\/remark\/wiki\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/gnab\/remark\/wiki<\/a> <a href=\"#return-footnote-132-4\" class=\"return-footnote\" aria-label=\"Return to footnote 4\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":2,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-132","chapter","type-chapter","status-publish","hentry"],"part":72,"_links":{"self":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/132"}],"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":19,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/132\/revisions"}],"predecessor-version":[{"id":1367,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/132\/revisions\/1367"}],"part":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/parts\/72"}],"metadata":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapters\/132\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/pressbooks\/v2\/chapter-type?post=132"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/contributor?post=132"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/e-publish.uliege.be\/md2\/wp-json\/wp\/v2\/license?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}