{"id":1991,"date":"2023-10-13T14:15:42","date_gmt":"2023-10-13T12:15:42","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=1991"},"modified":"2023-10-24T00:37:17","modified_gmt":"2023-10-23T22:37:17","slug":"concevoir-un-diaporama-avec-big","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/","title":{"rendered":"Concevoir un diaporama avec Big"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Ceci est une information sur BIG, un <strong>outil de cr\u00e9ation de diaporama en HTML-CSS-JS<\/strong>. Cet outil est utilisable apr\u00e8s avoir acquis les bases de l&rsquo;\u00e9dition de code et de l&rsquo;utilisation des langages fondamentaux du Web (HTML et CSS). Il ne s&rsquo;agit pas d&rsquo;un cours mais d&rsquo;une pr\u00e9sentation des possibilit\u00e9s offertes par le framework BIG.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Le framework BIG est t\u00e9l\u00e9chargeable sur Github \u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/tmcw\/big\" target=\"_blank\">https:\/\/github.com\/tmcw\/big<\/a><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Presentation_de_loutil\" >Pr\u00e9sentation de l&rsquo;outil<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#La_methode_Takahashi\" >La m\u00e9thode Takahashi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Textes_sur_images_prototypes\" >Textes sur images (prototypes)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Diaporamas_avec_textes_et_images_mais_sans_commentaires\" >Diaporamas avec textes et images mais sans commentaires<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Combinaisons_de_2_frameworks\" >Combinaisons de 2 frameworks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Diaporamas_BD\" >Diaporamas BD<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Diaporama_Big_avec_texte_seulement\" >Diaporama Big avec texte seulement<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Les_diaporamas_integres_dans_un_site_Web\" >Les diaporamas int\u00e9gr\u00e9s dans un site Web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Integration_directe_du_diaporama\" >Int\u00e9gration directe du diaporama<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/concevoir-un-diaporama-avec-big\/#Les_diaporamas_avec_texte_defilant_remplacant_les_commentaires\" >Les diaporamas avec texte d\u00e9filant rempla\u00e7ant les commentaires<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Presentation_de_loutil\"><\/span>Pr\u00e9sentation de l&rsquo;outil<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Voici une <strong>version fran\u00e7aise personnalis\u00e9e de la pr\u00e9sentation de BIG<\/strong>. Soyez attentif \u00e0 la taille du texte d&rsquo;une diapositive \u00e0 l&rsquo;autre. Selon le concepteur de l&rsquo;outil,  BIG s&rsquo;appuie sur la m\u00e9thode Takahashi.<\/p>\n\n\n\n<p>La navigation dans le diaporama s&rsquo;effectue soit en cliquant sur chaque diapositive soit en utilisant les fl\u00e8ches du clavier. Vous pouvez utiliser la <strong>touche J<\/strong> (Jump) pour visualiser des miniatures de chaque diapositive (un clic sur une miniature affiche la diapositive correspondante). La <strong>touche P<\/strong> (Print) vous permet d&rsquo;afficher une version imprimable du diaporama. La <strong>touche T<\/strong> (Talk) permet de revenir \u00e0 l&rsquo;affichage normal de la pr\u00e9sentation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/pvn\/big-presentation\/#0\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-1024x623.png\" alt=\"\" class=\"wp-image-6637\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-1024x623.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-600x365.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-768x467.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-1536x935.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-2048x1246.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-1200x730.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-presentation-1-1980x1205.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/pvn\/big-presentation.zip\">T\u00e9l\u00e9charger le DOSSIER du diaporama BIG-Pr\u00e9sentation<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_methode_Takahashi\"><\/span>La m\u00e9thode Takahashi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Takahashi_method\" target=\"_blank\">m\u00e9thode Takahashi<\/a> consiste \u00e0 utiliser seulement quelques mots par diapositive, affich\u00e9s en grande taille pour focaliser bri\u00e8vement l&rsquo;attention des spectateurs-auditeurs. Les diapositives sont alors <strong>une succession de mots cl\u00e9s<\/strong> balisant le discours du pr\u00e9sentateur. Elles sont pr\u00e9sent\u00e9es \u00e0 une cadence relativement rapide, au fil du commentaire oral.<\/p>\n\n\n\n<p>L&rsquo;application stricte de la m\u00e9thode Takahashi n\u00e9cessite d&rsquo;accompagner la pr\u00e9sentation visuelle d&rsquo;un discours plus d\u00e9taill\u00e9 (diffus\u00e9 \u00e0 l&rsquo;oral ou \u00e0 l&rsquo;\u00e9crit, en direct ou en diff\u00e9r\u00e9). <strong>Sans commentaires suppl\u00e9mentaires, un diaporama affichant seulement des mots cl\u00e9s demeure herm\u00e9tique<\/strong> (ce qui est souvent le cas, m\u00eame dans les diaporamas avec des images).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Textes_sur_images_prototypes\"><\/span>Textes sur images (prototypes)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>J&rsquo;ai voulu exp\u00e9rimenter le positionnement de <strong>textes de diverses longueurs sur des images occupant le fond de chaque diapositive<\/strong>. J&rsquo;ai envisag\u00e9 plusieurs cas de figure en veillant \u00e0 pr\u00e9server la fonctionnalit\u00e9 des touches J (Jump) et P (Print). <\/p>\n\n\n\n<p>Les images proviennent du site <a href=\"https:\/\/icones8.fr\/illustrations\" data-type=\"link\" data-id=\"https:\/\/icones8.fr\/illustrations\">icons8<\/a>. Elles ont \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9es \u00e0 une \u00e9poque o\u00f9 ces images \u00e9taient propos\u00e9es gratuitement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Texte de taille variable en fonction de la longueur du texte<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/pvn\/big-textes-sur-images\/#0\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-1024x579.png\" alt=\"\" class=\"wp-image-6600\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-1024x579.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-600x339.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-768x434.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-1536x869.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-2048x1159.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-1200x679.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-wham-1980x1120.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/pvn\/big-wham.zip\">T\u00e9l\u00e9charger le DOSSIER du diaporama BIG-WHAM<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center\">Quand l&rsquo;image est pr\u00e9sent\u00e9e sans texte, les miniatures ou les cadres affich\u00e9s en utilisant les touches J (Jump) ou P (Print) affichent ni texte ni image&nbsp;!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Texte de taille fixe, adapt\u00e9e \u00e0 la largeur de la fen\u00eatre de navigation<\/h4>\n\n\n\n<p>Dans ce cas, on retrouve le principe des diaporamas habituels r\u00e9alis\u00e9s avec des outils plus classiques, sans adaptation automatique de la taille du texte en fonction de la longueur des textes saisis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/pvn\/big-textes-sur-images\/big-pablo.html#0\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-1024x625.png\" alt=\"\" class=\"wp-image-6616\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-1024x625.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-600x366.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-768x469.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-1536x938.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-2048x1250.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-1200x733.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-pablo-1980x1209.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/pvn\/big-pablo.zip\">T\u00e9l\u00e9charger le DOSSIER du diaporama BIG-PABLO<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diaporamas_avec_textes_et_images_mais_sans_commentaires\"><\/span>Diaporamas avec textes et images mais sans commentaires<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>De nombreuses information peuvent \u00eatre transmises sous forme de diaporama, sans n\u00e9cessairement \u00eatre comment\u00e9es oralement.<\/strong> De tels diaporamas ont \u00e9t\u00e9 nomm\u00e9s \u201cslidedocs\u201d par Nancy Duarte, ce que nous pourrions traduire par \u201cdiacuments\u201d (en cr\u00e9ant un mot valise \u00e0 partir de diapo et document).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Combinaisons_de_2_frameworks\"><\/span>Combinaisons de 2 frameworks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour \u00e9largir le potentiel de pr\u00e9sentation de BIG, j&rsquo;ai test\u00e9 la <strong>combinaison des CSS natives de BIG avec celles du framework norv\u00e9gien W3CSS<\/strong>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Des styles personnalis\u00e9s se sont av\u00e9r\u00e9s n\u00e9cessaires pour am\u00e9liorer la pr\u00e9sentation mais <strong>les touches J (Jump) et P (Print) sont pour le moment inutilisables<\/strong> dans ce diaporama exp\u00e9rimental&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/pvn\/big-w3css\/#0\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-1024x618.png\" alt=\"\" class=\"wp-image-6650\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-1024x618.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-600x362.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-768x463.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-1536x926.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-2048x1235.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-1200x724.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-w3css-red-orange-1980x1194.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/pvn\/big-w3css.zip\">T\u00e9l\u00e9charger le DOSSIER du diaporama BIG-W3CSS<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diaporamas_BD\"><\/span>Diaporamas BD<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Voici quelques exemples d&rsquo;utilisation exp\u00e9rimentale de l&rsquo;outil BIG inspir\u00e9s des <strong>codes de la bande dessin\u00e9e<\/strong>. Les touches J (Jump) et P (Print) fonctionnent pour les diaporamas pr\u00e9sent\u00e9s dans cette section.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Diapositives-cases<\/h4>\n\n\n\n<p>Voici un diaporama-BD dans lequel ont \u00e9t\u00e9 combin\u00e9es les CSS natives de BIG et les classes propos\u00e9es par le framework W3CSS. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/pvn\/big-bd-avec-w3css\/#0\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-1024x598.png\" alt=\"\" class=\"wp-image-6571\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-1024x598.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-600x350.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-768x448.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-1536x897.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-2048x1196.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-1200x701.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/diapositives-cases-1980x1156.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/pvn\/big-bd-w3css.zip\">T\u00e9l\u00e9charger le DOSSIER du diaporama BIG-BD-W3CSS<\/a><\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Cases ouvertes<\/h4>\n\n\n\n<p><strong>Le diaporama suivant fonctionne \u00e9galement sur le principe des diapositives-cases.<\/strong> Les bulles ont \u00e9t\u00e9 ouvertes pour simplifier la composition des diapos-cases. Les illustrations utilis\u00e9es ont \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9es sur le site d&rsquo;un illustrateur, puis retouch\u00e9es pour s&rsquo;adapter au sc\u00e9nario envisag\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/pvn\/du-plan-au-site\/#0\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-1024x587.png\" alt=\"\" class=\"wp-image-6577\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-1024x587.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-600x344.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-768x440.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-1536x880.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-2048x1173.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-1200x687.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-redactionnel-plan-1980x1134.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/pvn\/big-bd-w3css.zip\">T\u00e9l\u00e9charger le DOSSIER du diaporama plan-site<\/a><\/div>\n<\/div>\n\n\n\n<p>Le diaporama  <a href=\"http:\/\/graphizm.fr\/pvn\/big-visuo-audio-gestuo\/#0\" data-type=\"link\" data-id=\"http:\/\/graphizm.fr\/pvn\/big-visuo-audio-gestuo\/#0\" target=\"_blank\" rel=\"noreferrer noopener\">Audio, Visuo et Gestuo<\/a> a \u00e9t\u00e9 r\u00e9alis\u00e9 selon les m\u00eames techniques, avec des illustrations r\u00e9alis\u00e9es par mes soins.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diaporama_Big_avec_texte_seulement\"><\/span>Diaporama Big avec texte seulement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Les diaporamas suivant ne pr\u00e9sentent tr\u00e8s peu d&rsquo;images. Ils peuvent \u00eatre publi\u00e9s sans commentaire oral.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_diaporamas_integres_dans_un_site_Web\"><\/span>Les diaporamas int\u00e9gr\u00e9s dans un site Web<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il est parfois utile de pr\u00e9senter seulement du texte, en plusieurs diapositives bien structur\u00e9es. Int\u00e9gr\u00e9s \u00e0 un site Web, <strong>ces diaporamas ne n\u00e9cessitent pas de commentaires<\/strong>, ils informent les lecteurs par le seul texte pr\u00e9sent\u00e9.<\/p>\n\n\n\n<p><strong>BIG facilite la mise en \u0153uvre de tels supports.<\/strong> En soignant le rendu du texte (en utilisant un nombre limit\u00e9 de couleurs \u00e9tag\u00e9es r\u00e9versibles), il est possible de transmettre ainsi des informations \u00e9crites sous une forme simple et fonctionnelle.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Int\u00e9gration d&rsquo;une diapo-lien<\/h4>\n\n\n\n<p>L&rsquo;image ci-dessous pointe vers <strong>un diaporama h\u00e9berg\u00e9 sur un autre serveur<\/strong>. En cliquant sur l&rsquo;image, vous ouvrez un nouvel onglet dans lequel s&rsquo;affiche le diaporama. La navigation dans le diaporama s&rsquo;effectue alors avec les fl\u00e8ches du clavier, les touches J (Jump) ou P (Print) et la touche T (Talk).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/pvn\/big-couleurs\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-1024x590.png\" alt=\"\" class=\"wp-image-6539\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-1024x590.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-600x346.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-768x442.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-1536x885.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-2048x1180.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-1200x691.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/big-couleurs-1980x1141.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/graphizm.fr\/pvn\/big-couleurs.zip\">T\u00e9l\u00e9charger le DOSSIER du diaporama BIG-COULEURS<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Integration_directe_du_diaporama\"><\/span>Int\u00e9gration directe du diaporama<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il est cependant envisageable de <strong>placer un diaporama BIG fonctionnel directement dans le corps de la page Web<\/strong>. Le diaporama ci-dessous est une version plus compl\u00e8te du pr\u00e9c\u00e9dent diaporama. Il a \u00e9t\u00e9 int\u00e9gr\u00e9 dans cette page Web en utilisant le code HTML suivant&nbsp;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;object type=\"text\/html\" data=\"https:\/\/graphizm.fr\/pvn\/big-couleurs-design-v6\/\" width=\"600\" height=\"250\">&lt;\/object><\/code><\/pre>\n\n\n\n<object type=\"text\/html\" data=\"https:\/\/graphizm.fr\/pvn\/big-couleurs-design-v6\/\" width=\"600\" height=\"250\"><\/object>\n\n\n\n<p>La version pr\u00e9sent\u00e9e ci-dessus permet de constater qu&rsquo;<strong>en utilisant les m\u00eames couleurs<\/strong> (noir, blanc, bleu moyen, gris moyen) <strong>on obtient une ambiances diff\u00e9rente<\/strong> en changeant juste la fonction attribu\u00e9e aux couleurs r\u00e9versibles d&rsquo;un nuancier bien \u00e9tag\u00e9.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Un diaporama BIG, plus complet encore, permet de naviguer entre les diff\u00e9rentes versions chromatiques. Vous pouvez le consulter \u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" style=\"\" href=\"https:\/\/graphizm.fr\/couleurs\/couleurs-design-graphique\/#0\" target=\"_blank\">https:\/\/graphizm.fr\/couleurs\/couleurs-design-graphique\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_diaporamas_avec_texte_defilant_remplacant_les_commentaires\"><\/span>Les diaporamas avec texte d\u00e9filant rempla\u00e7ant les commentaires<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour compenser l&rsquo;absence de commentaire oral, il est envisageable de <strong>faire d\u00e9filer du texte en pied de diapositive<\/strong>. La technique a \u00e9t\u00e9 mise en \u0153uvre, en adaptant le framework BIG. Vous en avez une illustration dans <a href=\"https:\/\/graphizm.fr\/fcil\/big-defilant\" target=\"_blank\" rel=\"noreferrer noopener\">ce diaporama<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ceci est une information sur BIG, un outil de cr\u00e9ation de diaporama en HTML-CSS-JS. Cet outil est utilisable apr\u00e8s avoir acquis les bases de l&rsquo;\u00e9dition de code et de l&rsquo;utilisation des langages fondamentaux du Web (HTML et CSS). Il ne s&rsquo;agit pas d&rsquo;un cours mais d&rsquo;une pr\u00e9sentation des possibilit\u00e9s offertes par le framework BIG. Le [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1991","post","type-post","status-publish","format-standard","hentry","category-cours-annexes"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Ceci est une information sur BIG, un outil de cr\u00e9ation de diaporama en HTML-CSS-JS. Cet outil est utilisable apr\u00e8s avoir acquis les bases de l&rsquo;\u00e9dition de code et de l&rsquo;utilisation des langages fondamentaux du Web (HTML et CSS). Il ne s&rsquo;agit pas d&rsquo;un cours mais d&rsquo;une pr\u00e9sentation des possibilit\u00e9s offertes par le framework BIG. Le framework BIG est t\u00e9l\u00e9chargeable sur Github \u00e0 cette adresse&nbsp;: https:\/\/github.com\/tmcw\/big Sommaire Toggle Pr\u00e9sentation de l&rsquo;outilLa m\u00e9thode TakahashiTextes sur images (prototypes)Diaporamas avec textes et images mais sans commentairesCombinaisons de 2 frameworksDiaporamas BDDiaporama Big avec texte seulementLes diaporamas int\u00e9gr\u00e9s dans un site WebInt\u00e9gration directe du diaporamaLes diaporamas\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/cours-annexes\/\" rel=\"category tag\">Cours annexes<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=1991"}],"version-history":[{"count":97,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1991\/revisions"}],"predecessor-version":[{"id":6691,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1991\/revisions\/6691"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=1991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=1991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=1991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}