{"id":3743,"date":"2025-06-24T17:17:18","date_gmt":"2025-06-24T21:17:18","guid":{"rendered":"https:\/\/www.lageekdeservice.com\/?p=3743"},"modified":"2025-06-24T17:20:40","modified_gmt":"2025-06-24T21:20:40","slug":"jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas","status":"publish","type":"post","link":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/","title":{"rendered":"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-uagb-image aligncenter uagb-block-0f2f5378 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-center\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png ,https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png 780w, https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png\" alt=\"\" class=\"uag-image-3747\" width=\"1280\" height=\"1280\" title=\"cellphone-5459707_1280\" loading=\"lazy\" role=\"img\"\/><figcaption class=\"uagb-image-caption\">Image par <a href=\"https:\/\/pixabay.com\/fr\/users\/megan_rexazin_conde-6742250\/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=5459707\">Megan Rexazin Conde<\/a> de <a href=\"https:\/\/pixabay.com\/fr\/\/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=5459707\">Pixabay<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-06-24T17:17:18-04:00\">24 juin 2025<\/time><\/div>\n\n\n<div class=\"wp-block-uagb-separator uagb-block-62a5376f\"><div class=\"uagb-separator-spacing-wrapper\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div><\/div>\n\n\n<div style=\"padding-top:0;padding-bottom:0;padding-left:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);margin-left:var(--wp--preset--spacing--20);margin-right:var(--wp--preset--spacing--20)\" class=\"wp-block-post-author has-background has-ast-global-color-4-background-color has-medium-font-size\"><div class=\"wp-block-post-author__avatar\"><img alt='' src='https:\/\/secure.gravatar.com\/avatar\/0edc7e7d33ee385ff71eb03898368a3783aa6b2ea71e675302de1deb9fc344b5?s=96&#038;d=mm&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/0edc7e7d33ee385ff71eb03898368a3783aa6b2ea71e675302de1deb9fc344b5?s=192&#038;d=mm&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' \/><\/div><div class=\"wp-block-post-author__content\"><p class=\"wp-block-post-author__name\"><a href=\"https:\/\/www.lageekdeservice.com\/en\/author\/alexandracoutlee\/\" target=\"_self\">Alexandra Coutl\u00e9e<\/a><\/p><p class=\"wp-block-post-author__bio\">Passionn\u00e9e de transformation num\u00e9rique, Alexandra accompagne les organisations et les individus vers l\u2019autonomie num\u00e9rique gr\u00e2ce \u00e0 des services personnalis\u00e9s de consultation, de formation et de coaching.<\/p><\/div><\/div>\n\n\n<div class=\"wp-block-uagb-separator uagb-block-1e209afa\"><div class=\"uagb-separator-spacing-wrapper\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Le mode Canvas est une fonctionnalit\u00e9 int\u00e9gr\u00e9e dans <a href=\"https:\/\/gemini.google.com\/?hl=fr\">Gemini<\/a> qu&rsquo;on peut activer au moment de faire une requ\u00eate. <em>Il ne faut pas le confondre avec l&rsquo;outil de cr\u00e9ation Canva<\/em>. Dans ce cas-ci, il s&rsquo;agit bien d&rsquo;une interface propre \u00e0 Gemini qui permet d&rsquo;exploiter et de mettre en forme un contenu (code ou texte). <em>\u00c0 noter que j&rsquo;ai fait des tests dans une version payante, mais ma version gratuite \u00e9ducation me permettait aussi de le faire.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois la requ\u00eate commenc\u00e9e, il faut cliquer sur le bouton <em><strong>Canvas<\/strong><\/em> en bas de l&rsquo;\u00e9cran. Lorsqu&rsquo;activ\u00e9, le bouton devient bleu. On peut alors fournir du contenu sous forme de fichier (PDF, article, etc.) ou simplement copier-coller du texte et faire notre requ\u00eate. Lors de mon test, j&rsquo;ai coll\u00e9 un r\u00e9sum\u00e9 que j&rsquo;avais moi-m\u00eame r\u00e9dig\u00e9 \u00e0 partir de mes notes prises lors de la lecture du document et du visionnement d&rsquo;un webinaire et un article de mon blogue.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.47.04-1024x306.png\" alt=\"\" class=\"wp-image-3744\" srcset=\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.47.04-1024x306.png 1024w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.47.04-300x90.png 300w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.47.04-768x230.png 768w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.47.04-1536x459.png 1536w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.47.04.png 1746w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois le contenu fourni, j&rsquo;ai demand\u00e9 \u00e0 Gemini d&rsquo;en prendre connaissance. L&rsquo;interface passe ensuite automatiquement en mode Canvas. \u00c0 gauche, on retrouve le panneau pour interagir avec Gemini, et \u00e0 droite, le texte original. Plusieurs options apparaissent : ajuster la longueur, le ton ou proposer des modifications cibl\u00e9es.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"890\" src=\"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.00-1024x890.png\" alt=\"\" class=\"wp-image-3745\" srcset=\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.00-1024x890.png 1024w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.00-300x261.png 300w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.00-768x667.png 768w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.00-1536x1335.png 1536w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.00.png 1832w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pour cr\u00e9er une infographie, j&rsquo;ai simplement cliqu\u00e9 sur le bouton <em><strong>Cr\u00e9er<\/strong><\/em> en haut \u00e0 droite, puis s\u00e9lectionn\u00e9 <strong><em>Infographie<\/em><\/strong>. Gemini a alors g\u00e9n\u00e9r\u00e9 une infographie en HTML. Le code s&rsquo;affiche dans une interface pr\u00e9vue \u00e0 cet effet, avec la possibilit\u00e9 de visualiser ou de modifier le code. Il est ensuite possible de copier ce code et de l&rsquo;int\u00e9grer dans un outil comme Google Sites, WordPress ou tout autre CMS acceptant du HTML.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"925\" height=\"784\" src=\"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.34.png\" alt=\"\" class=\"wp-image-3746\" srcset=\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.34.png 925w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.34-300x254.png 300w, https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/Capture-decran-le-2025-06-24-a-16.42.34-768x651.png 768w\" sizes=\"auto, (max-width: 925px) 100vw, 925px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Lors de mon test avec mon r\u00e9sum\u00e9 et mes notes sur les balises minist\u00e9rielles du Qu\u00e9bec en \u00e9ducation pour l&rsquo;IA g\u00e9n\u00e9rative, l&rsquo;infographie g\u00e9n\u00e9r\u00e9e \u00e9tait pertinente et claire, m\u00eame s&rsquo;il y avait quelques d\u00e9tails \u00e0 ajuster : certaines majuscules \u00e9taient mal plac\u00e9es dans les titres, par exemple. Gemini a aussi g\u00e9n\u00e9r\u00e9 un bouton <em><strong>Consulter le guide complet<\/strong><\/em>, qui n&rsquo;est pas cliquable par d\u00e9faut. Il pourra toutefois le devenir en le jumelant avec un lien. Je ne lui avais pas fait cette demande, il a pris l&rsquo;initiative ! J&rsquo;ai laiss\u00e9 la premi\u00e8re it\u00e9ration dans l&rsquo;article pour illustrer ce que cela donne sans correction manuelle. Il aurait \u00e9t\u00e9 possible de demander une r\u00e9vision via Gemini, mais j&rsquo;ai trouv\u00e9 plus rapide de modifier directement le code HTML. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Exemple d&rsquo;infographie g\u00e9n\u00e9r\u00e9e avec mon r\u00e9sum\u00e9 des balises minist\u00e9rielles au Qu\u00e9bec pour utiliser l&rsquo;IA en \u00e9ducation (mes notes personnelles suite \u00e0 la lecture et \u00e0 l&rsquo;\u00e9coute d&rsquo;un webinaire).<\/h4>\n<\/blockquote>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Infographie : L&rsquo;IA en Classe &#8211; Guide Visuel pour une Int\u00e9gration Responsable<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <!-- \n        Plan d'analyse et de narration :\n        1.  Analyser le mat\u00e9riel source (Guide du gouvernement du Qu\u00e9bec sur l'IAG en \u00e9ducation) pour en extraire les 3 piliers : P\u00e9dagogie, \u00c9thique, L\u00e9galit\u00e9.\n        2.  Structurer l'infographie pour suivre cette logique. Commencer par une introduction, pr\u00e9senter les 3 piliers, puis d\u00e9tailler chaque pilier dans une section d\u00e9di\u00e9e.\n        3.  Utiliser un langage clair et direct, adapt\u00e9 au personnel enseignant.\n        4.  Conclure en r\u00e9affirmant le r\u00f4le central de l'humain et en fournissant un lien vers le document complet.\n\n        S\u00e9lection des visualisations :\n        -   Section Piliers : Cartes HTML\/CSS. But : Organiser. Justification : Moyen simple et clair d'introduire les th\u00e8mes. Pas de SVG.\n        -   Processus de r\u00e9flexion p\u00e9dagogique : Diagramme de flux HTML\/CSS. But : Organiser. Justification : Montre un processus s\u00e9quentiel sans utiliser SVG ou Mermaid.js.\n        -   R\u00f4le de l'IA dans l'\u00e9valuation : Graphique en anneau (Chart.js). But : Comparer. Justification : Montre visuellement que l'IA est une *partie* de la solution, pas l'ensemble. Rendu sur Canvas.\n        -   Principes \u00e9thiques : Graphique radar (Chart.js). But : Comparer. Justification : Id\u00e9al pour montrer l'importance \u00e9gale de multiples facettes d'un concept. Rendu sur Canvas.\n        -   Obligations l\u00e9gales : Cartes d'information HTML\/CSS. But : Informer. Justification : Les r\u00e8gles l\u00e9gales sont des directives claires, mieux pr\u00e9sent\u00e9es sous forme de texte percutant que dans un graphique. Pas de SVG.\n\n        Confirmation de non-utilisation :\n        -   NEITHER Mermaid JS NOR SVG were used anywhere in the output.\n\n        Palette de couleurs choisie :\n        -   Color Palette: Brilliant Blues (#00A1E4, #0077C0, #005082) avec des gris neutres.\n    -->\n    <style>\n        body {\n            font-family: 'Inter', sans-serif;\n        }\n        .chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 500px;\n            margin-left: auto;\n            margin-right: auto;\n            height: 300px;\n        }\n        @media (min-width: 768px) {\n            .chart-container {\n                height: 400px;\n            }\n        }\n        .flowchart-step {\n            border-color: #0077C0;\n            transition: all 0.3s ease;\n        }\n        .flowchart-step:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n        }\n        .flowchart-arrow::after {\n            content: '\u25bc';\n            font-size: 2rem;\n            color: #0077C0;\n            margin-top: 1rem;\n            margin-bottom: 1rem;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n    <header class=\"bg-white shadow-md\">\n        <div class=\"container mx-auto px-6 py-8 text-center\">\n            <h1 class=\"text-3xl md:text-5xl font-bold text-[#005082]\">L&rsquo;IA en Classe : Guide Visuel<\/h1>\n            <p class=\"mt-4 text-lg md:text-xl text-gray-600\">Une int\u00e9gration p\u00e9dagogique, \u00e9thique et l\u00e9gale de l&rsquo;Intelligence Artificielle G\u00e9n\u00e9rative, bas\u00e9e sur le guide 2024-2025 du gouvernement du Qu\u00e9bec.<\/p>\n        <\/div>\n    <\/header>\n\n    <main class=\"container mx-auto px-6 py-12\">\n\n        <section id=\"piliers\" class=\"text-center mb-20\">\n            <h2 class=\"text-3xl font-bold mb-2 text-[#005082]\">Les 3 Piliers d&rsquo;une Utilisation Responsable<\/h2>\n            <p class=\"text-gray-600 mb-12 max-w-3xl mx-auto\">Pour une int\u00e9gration r\u00e9ussie, toute utilisation de l&rsquo;IA en contexte \u00e9ducatif doit reposer sur trois fondements essentiels et indissociables.<\/p>\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n                <div class=\"bg-white p-8 rounded-lg shadow-lg border-t-4 border-[#00A1E4]\">\n                    <div class=\"text-5xl mb-4\">\ud83c\udf93<\/div>\n                    <h3 class=\"text-2xl font-bold mb-2 text-[#005082]\">Pertinence P\u00e9dagogique<\/h3>\n                    <p class=\"text-gray-600\">L&rsquo;IA doit servir un objectif d&rsquo;apprentissage clair et soutenir le d\u00e9veloppement des comp\u00e9tences.<\/p>\n                <\/div>\n                <div class=\"bg-white p-8 rounded-lg shadow-lg border-t-4 border-[#0077C0]\">\n                    <div class=\"text-5xl mb-4\">\u2696\ufe0f<\/div>\n                    <h3 class=\"text-2xl font-bold mb-2 text-[#005082]\">R\u00e9flexion \u00c9thique<\/h3>\n                    <p class=\"text-gray-600\">Son usage doit \u00eatre juste, \u00e9quitable, transparent et pr\u00e9server le pouvoir d&rsquo;agir de chacun.<\/p>\n                <\/div>\n                <div class=\"bg-white p-8 rounded-lg shadow-lg border-t-4 border-[#005082]\">\n                    <div class=\"text-5xl mb-4\">\ud83d\udee1\ufe0f<\/div>\n                    <h3 class=\"text-2xl font-bold mb-2 text-[#005082]\">Obligations L\u00e9gales<\/h3>\n                    <p class=\"text-gray-600\">La s\u00e9curit\u00e9 de l&rsquo;information, la protection des donn\u00e9es personnelles et le droit d&rsquo;auteur doivent \u00eatre respect\u00e9s.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <hr class=\"my-16 border-gray-200\">\n\n        <section id=\"pedagogie\" class=\"mb-20\">\n            <div class=\"text-center mb-12\">\n                <h2 class=\"text-3xl font-bold mb-2 text-[#005082]\">1. La Pertinence P\u00e9dagogique : Int\u00e9grer avec Intention<\/h2>\n                <p class=\"text-gray-600 max-w-3xl mx-auto\">L&rsquo;IA n&rsquo;est pas une fin en soi, mais un outil potentiel au service de l&rsquo;enseignement. Son utilisation doit \u00eatre le fruit d&rsquo;une r\u00e9flexion structur\u00e9e.<\/p>\n            <\/div>\n\n            <div class=\"bg-white p-8 rounded-lg shadow-lg mb-12\">\n                 <h3 class=\"text-2xl font-bold text-center mb-8 text-[#005082]\">Le Processus de R\u00e9flexion en 3 Temps<\/h3>\n                <div class=\"flex flex-col items-center\">\n                    <div class=\"flowchart-step w-full max-w-lg p-6 bg-blue-50 border-l-4 rounded-md mb-4\">\n                        <h4 class=\"font-bold text-xl text-[#0077C0]\">AVANT : L&rsquo;Intention<\/h4>\n                        <p class=\"text-gray-700 mt-2\">Pourquoi utiliser l&rsquo;IA ? Quels objectifs p\u00e9dagogiques vise-t-on ? (Ex: diff\u00e9renciation, planification, remue-m\u00e9ninges)<\/p>\n                    <\/div>\n                    <div class=\"flowchart-arrow\"><\/div>\n                    <div class=\"flowchart-step w-full max-w-lg p-6 bg-blue-50 border-l-4 rounded-md mb-4\">\n                        <h4 class=\"font-bold text-xl text-[#0077C0]\">PENDANT : L&rsquo;Analyse Critique<\/h4>\n                        <p class=\"text-gray-700 mt-2\">Le contenu g\u00e9n\u00e9r\u00e9 est-il de qualit\u00e9 et pertinent ? L&rsquo;outil permet-il d&rsquo;atteindre l&rsquo;objectif ? Des ajustements sont-ils n\u00e9cessaires ?<\/p>\n                    <\/div>\n                     <div class=\"flowchart-arrow\"><\/div>\n                    <div class=\"flowchart-step w-full max-w-lg p-6 bg-blue-50 border-l-4 rounded-md\">\n                        <h4 class=\"font-bold text-xl text-[#0077C0]\">APR\u00c8S : Le Bilan<\/h4>\n                        <p class=\"text-gray-700 mt-2\">Les r\u00e9sultats sont-ils atteints ? Quels sont les succ\u00e8s et les d\u00e9fis ? Comment am\u00e9liorer ou partager cette exp\u00e9rience ?<\/p>\n                    <\/div>\n                <\/div>\n                 <p class=\"text-center text-gray-500 mt-8 italic\">Ce cycle garantit que la technologie reste un moyen au service de la p\u00e9dagogie, et non l&rsquo;inverse.<\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center bg-white p-8 rounded-lg shadow-lg\">\n                <div class=\"text-center md:text-left\">\n                    <h3 class=\"text-2xl font-bold mb-4 text-[#005082]\">L&rsquo;IA dans l&rsquo;\u00c9valuation : Une Aide, Pas un Juge<\/h3>\n                    <p class=\"text-gray-600 mb-4\">L&rsquo;IA peut assister dans la cr\u00e9ation d&rsquo;outils (grilles, exercices) ou la formulation de r\u00e9troactions. Cependant, elle ne doit jamais se substituer au jugement professionnel de l&rsquo;enseignant pour l&rsquo;\u00e9valuation sommative.<\/p>\n                    <p class=\"text-gray-600 font-semibold\">L&rsquo;int\u00e9grit\u00e9 intellectuelle et la validation humaine restent primordiales.<\/p>\n                <\/div>\n                <div class=\"chart-container\">\n                    <canvas id=\"evaluationChart\"><\/canvas>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <hr class=\"my-16 border-gray-200\">\n\n        <section id=\"ethique\" class=\"mb-20\">\n            <div class=\"text-center mb-12\">\n                <h2 class=\"text-3xl font-bold mb-2 text-[#005082]\">2. La R\u00e9flexion \u00c9thique : Naviguer avec Conscience<\/h2>\n                <p class=\"text-gray-600 max-w-3xl mx-auto\">L&rsquo;utilisation de l&rsquo;IA soul\u00e8ve des questions fondamentales. Ces cinq principes doivent guider chaque d\u00e9cision pour un usage humain et juste.<\/p>\n            <\/div>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center bg-white p-8 rounded-lg shadow-lg\">\n                 <div class=\"chart-container\">\n                    <canvas id=\"ethiqueChart\"><\/canvas>\n                <\/div>\n                <div class=\"space-y-4\">\n                    <p class=\"text-gray-600\">Le graphique radar illustre que les cinq principes \u00e9thiques sont d&rsquo;\u00e9gale importance. Un usage responsable de l&rsquo;IA n\u00e9cessite une approche \u00e9quilibr\u00e9e o\u00f9 chaque dimension est prise en compte pour garantir le bien-\u00eatre, l&rsquo;\u00e9quit\u00e9 et l&rsquo;autonomie de tous.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <hr class=\"my-16 border-gray-200\">\n\n        <section id=\"legal\" class=\"mb-20\">\n             <div class=\"text-center mb-12\">\n                <h2 class=\"text-3xl font-bold mb-2 text-[#005082]\">3. Les Obligations L\u00e9gales : Utiliser en toute Conformit\u00e9<\/h2>\n                <p class=\"text-gray-600 max-w-3xl mx-auto\">L&rsquo;enthousiasme pour l&rsquo;innovation ne dispense pas du respect du cadre l\u00e9gal. Trois domaines exigent une vigilance absolue.<\/p>\n            <\/div>\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n                <div class=\"bg-white p-8 rounded-lg shadow-lg text-center border-t-4 border-red-500\">\n                    <div class=\"text-5xl mb-4\">\ud83d\udd12<\/div>\n                    <h3 class=\"text-xl font-bold mb-2 text-red-700\">S\u00e9curit\u00e9 de l&rsquo;Information<\/h3>\n                    <p class=\"text-gray-600\">Ne <strong class=\"text-red-600\">JAMAIS<\/strong> fournir d&rsquo;informations sensibles ou confidentielles \u00e0 une IAG publique. Consid\u00e9rez tout ce que vous \u00e9crivez comme public.<\/p>\n                <\/div>\n                <div class=\"bg-white p-8 rounded-lg shadow-lg text-center border-t-4 border-red-500\">\n                     <div class=\"text-5xl mb-4\">\ud83d\udc64<\/div>\n                    <h3 class=\"text-xl font-bold mb-2 text-red-700\">Protection des Donn\u00e9es Personnelles<\/h3>\n                    <p class=\"text-gray-600\">Ne <strong class=\"text-red-600\">JAMAIS<\/strong> saisir de renseignements permettant d&rsquo;identifier une personne (\u00e9l\u00e8ve ou autre) sans une approbation formelle de votre organisme.<\/p>\n                <\/div>\n                <div class=\"bg-white p-8 rounded-lg shadow-lg text-center border-t-4 border-red-500\">\n                     <div class=\"text-5xl mb-4\">\u00a9\ufe0f<\/div>\n                    <h3 class=\"text-xl font-bold mb-2 text-red-700\">Droits d&rsquo;Auteur<\/h3>\n                    <p class=\"text-gray-600\">Ne <strong class=\"text-red-600\">JAMAIS<\/strong> soumettre une \u0153uvre prot\u00e9g\u00e9e (texte, image&#8230;) \u00e0 une IAG si vous n&rsquo;en d\u00e9tenez pas les droits de reproduction.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/main>\n    \n    <footer class=\"bg-[#005082] text-white\">\n        <div class=\"container mx-auto px-6 py-8 text-center\">\n            <h3 class=\"text-2xl font-bold mb-4\">L&rsquo;humain au c\u0153ur de la technologie<\/h3>\n            <p class=\"max-w-3xl mx-auto mb-6\">L&rsquo;intelligence artificielle est un outil puissant, mais c&rsquo;est le jugement, la cr\u00e9ativit\u00e9 et l&#8217;empathie du personnel enseignant qui transforment l&rsquo;apprentissage. Utilisons ces technologies pour augmenter nos capacit\u00e9s, pas pour les remplacer.<\/p>\n            <a href=\"\" target=\"_blank\" class=\"inline-block bg-[#00A1E4] hover:bg-[#0077C0] text-white font-bold py-3 px-6 rounded-lg transition-colors\">\n                Consulter le guide complet\n            <\/a>\n        <\/div>\n    <\/footer>\n\n    <script>\n        const tooltipConfig = {\n            plugins: {\n                tooltip: {\n                    callbacks: {\n                        title: function(tooltipItems) {\n                            const item = tooltipItems[0];\n                            let label = item.chart.data.labels[item.dataIndex];\n                            if (Array.isArray(label)) {\n                                return label.join(' ');\n                            }\n                            return label;\n                        }\n                    }\n                }\n            }\n        };\n\n        function wrapLabel(str, maxWidth) {\n            const words = str.split(' ');\n            const lines = [];\n            let currentLine = '';\n            words.forEach(word => {\n                if ((currentLine + ' ' + word).length > maxWidth && currentLine.length > 0) {\n                    lines.push(currentLine);\n                    currentLine = word;\n                } else {\n                    currentLine = currentLine ? currentLine + ' ' + word : word;\n                }\n            });\n            if (currentLine) {\n                lines.push(currentLine);\n            }\n            return lines;\n        }\n\n        const evaluationCtx = document.getElementById('evaluationChart');\n        if (evaluationCtx) {\n            new Chart(evaluationCtx, {\n                type: 'doughnut',\n                data: {\n                    labels: ['Jugement de l\\'enseignant', 'Assistance de l\\'IA'],\n                    datasets: [{\n                        label: 'R\u00f4le dans l\\'\u00e9valuation',\n                        data: [80, 20],\n                        backgroundColor: [\n                            '#005082',\n                            '#00A1E4'\n                        ],\n                        borderColor: '#FFFFFF',\n                        borderWidth: 4\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    plugins: {\n                        legend: {\n                            position: 'bottom',\n                            labels: {\n                                color: '#374151'\n                            }\n                        },\n                        title: {\n                            display: true,\n                            text: 'R\u00e9partition du R\u00f4le dans l\\'\u00c9valuation',\n                            font: {\n                                size: 16\n                            },\n                            color: '#374151',\n                            padding: {\n                                top: 10,\n                                bottom: 20\n                            }\n                        },\n                        ...tooltipConfig.plugins\n                    },\n                    cutout: '60%'\n                }\n            });\n        }\n        \n        const ethiqueCtx = document.getElementById('ethiqueChart');\n        if (ethiqueCtx) {\n            const originalLabels = ['Sobri\u00e9t\u00e9 Num\u00e9rique', 'Qualit\u00e9 de l\\'Information', '\u00c9quit\u00e9 et Inclusion', 'Transparence et Explicabilit\u00e9', 'Agentivit\u00e9 Humaine'];\n            const wrappedLabels = originalLabels.map(label => wrapLabel(label, 16));\n\n            new Chart(ethiqueCtx, {\n                type: 'radar',\n                data: {\n                    labels: wrappedLabels,\n                    datasets: [{\n                        label: 'Importance du Principe',\n                        data: [5, 5, 5, 5, 5],\n                        fill: true,\n                        backgroundColor: 'rgba(0, 122, 192, 0.2)',\n                        borderColor: '#007AC0',\n                        pointBackgroundColor: '#007AC0',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: '#007AC0'\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                     scales: {\n                        r: {\n                            angleLines: {\n                                color: '#D1D5DB'\n                            },\n                            grid: {\n                                color: '#E5E7EB'\n                            },\n                            pointLabels: {\n                                font: {\n                                    size: 12\n                                },\n                                color: '#374151'\n                            },\n                            ticks: {\n                                display: false,\n                                beginAtZero: true,\n                                max: 5,\n                                stepSize: 1\n                            }\n                        }\n                    },\n                    plugins: {\n                         legend: {\n                            display: false\n                         },\n                         title: {\n                            display: true,\n                            text: 'Les 5 Piliers de l\\'\u00c9thique',\n                            font: {\n                                size: 16\n                            },\n                            color: '#374151',\n                             padding: {\n                                top: 10,\n                                bottom: 20\n                            }\n                        },\n                        ...tooltipConfig.plugins\n                    }\n                }\n            });\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lors de mes tests avec mon article de blogue, certaines illustrations sont assez dr\u00f4les, car elles sont plac\u00e9es dans des graphiques qui n&rsquo;ont pas toujours de sens. Il est donc essentiel de fournir des donn\u00e9es claires \u00e0 Gemini, et de ne pas h\u00e9siter \u00e0 modifier le texte initial pour guider l&rsquo;outil. Comme dans tout usage d&rsquo;IA g\u00e9n\u00e9rative, une relecture compl\u00e8te est n\u00e9cessaire pour s&rsquo;assurer de la qualit\u00e9 du r\u00e9sultat.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><em>Exemple avec un article de mon blogue<\/em> (pour voir <a href=\"https:\/\/www.lageekdeservice.com\/et-si-lia-nous-permettait-enfin-de-faire-ce-qui-etait-impossible-avant-en-education\/\">l&rsquo;article original<\/a>)<\/h4>\n<\/blockquote>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Infographie : L&rsquo;IA en \u00c9ducation &#8211; Au-del\u00e0 de l&rsquo;Automatisation<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700;900&#038;display=swap\" rel=\"stylesheet\">\n    <!-- \n        Plan narratif :\n        1.  Introduction : Le paradoxe actuel de l'IA en \u00e9ducation - excitation vs. d\u00e9sillusion.\n        2.  Le Cycle du Hype : Visualisation de la courbe de Gartner pour contextualiser le sentiment actuel.\n        3.  Le Pi\u00e8ge de l'Automatisation : Mettre en lumi\u00e8re le r\u00e9flexe \"\u00e0 ma place\" et ses limites.\n        4.  Un Nouveau Paradigme : Montrer le passage de l'automatisation \u00e0 l'augmentation des capacit\u00e9s.\n        5.  L'Impossible, Rendu Possible : Pr\u00e9senter des exemples concrets d'innovations p\u00e9dagogiques.\n        6.  Conclusion : Le d\u00e9fi \"Formule 1\", un appel \u00e0 l'action pour repenser les pratiques.\n\n        Choix des visualisations :\n        -   Courbe de Hype de Gartner -> Goal: Change -> Chosen Visualization: Line Chart (Chart.js) -> Justification: Id\u00e9al pour montrer une progression \u00e0 travers des phases. Pas de SVG.\n        -   R\u00e9partition des mentalit\u00e9s (Automatisation vs. Innovation) -> Goal: Inform -> Chosen Visualization: Donut Chart (Chart.js) -> Justification: Parfait pour montrer une proportion simple et percutante. Pas de SVG.\n        -   Changement de paradigme -> Goal: Organize -> Chosen Visualization: Flow Chart (HTML\/CSS) -> Justification: Montre un processus de pens\u00e9e de mani\u00e8re claire et structur\u00e9e sans utiliser SVG ou Mermaid JS.\n        -   Impact des nouvelles approches -> Goal: Compare -> Chosen Visualization: Bar Chart (Chart.js) -> Justification: Compare efficacement l'impact de diff\u00e9rentes m\u00e9thodes p\u00e9dagogiques. Pas de SVG.\n        -   Analogie de la Formule 1 -> Goal: Inform -> Chosen Visualization: Pictograph\/Icon (Unicode) -> Justification: Un symbole simple et fort pour ancrer le message final. Pas de SVG.\n\n        Palette de couleurs choisie : \"Energetic & Playful\" (#FF4E50, #FC913A, #F9D423, #EDE574, #E1F5C4).\n\n        Confirmation : NI Mermaid JS NI SVG n'ont \u00e9t\u00e9 utilis\u00e9s dans ce fichier. Toutes les visualisations sont rendues via Canvas (Chart.js) ou sont construites avec du HTML et CSS (Tailwind).\n    -->\n    <style>\n        body {\n            font-family: 'Inter', sans-serif;\n            background-color: #f3f4f6;\n        }\n        .chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 600px;\n            margin-left: auto;\n            margin-right: auto;\n            height: 300px;\n            max-height: 400px;\n        }\n        @media (min-width: 768px) {\n            .chart-container {\n                height: 350px;\n            }\n        }\n        .gradient-text {\n            background: linear-gradient(90deg, #FF4E50, #FC913A);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n        .card {\n            background-color: white;\n            border-radius: 0.75rem;\n            box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n            padding: 1.5rem;\n            margin-bottom: 1.5rem;\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n        .card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -2px rgb(0 0 0 \/ 0.1);\n        }\n    <\/style>\n<\/head>\n<body class=\"text-gray-800\">\n\n    <div class=\"container mx-auto p-4 md:p-8 max-w-5xl\">\n\n        <header class=\"text-center mb-12\">\n            <h1 class=\"text-4xl md:text-6xl font-black mb-2\"><span class=\"gradient-text\">L&rsquo;IA en \u00c9ducation<\/span><\/h1>\n            <p class=\"text-lg md:text-xl text-gray-600\">D\u00e9passer l&rsquo;automatisation pour enfin faire ce qui \u00e9tait impossible.<\/p>\n        <\/header>\n\n        <main>\n            <section id=\"hype-cycle\" class=\"mb-16\">\n                <div class=\"card md:col-span-2\">\n                    <h2 class=\"text-2xl font-bold text-center mb-2\">Le cycle des attentes : O\u00f9 en sommes-nous ?<\/h2>\n                    <p class=\"text-center text-gray-600 mb-6\">Toute technologie passe par des phases d&rsquo;enthousiasme et de doute. Selon la courbe de Hype de Gartner, l&rsquo;\u00e9ducation semble aborder le \u00ab\u00a0creux des d\u00e9sillusions\u00a0\u00bb, une phase critique o\u00f9 le potentiel r\u00e9el de l&rsquo;IA commence \u00e0 \u00e9merger pour ceux qui pers\u00e9v\u00e8rent.<\/p>\n                    <div class=\"chart-container\">\n                        <canvas id=\"hypeCycleChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <section id=\"pitfall\" class=\"mb-16\">\n                <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n                    <div class=\"card\">\n                        <h2 class=\"text-2xl font-bold mb-4\">Le Pi\u00e8ge du \u00ab \u00e0 ma place \u00bb<\/h2>\n                        <p class=\"text-gray-600 mb-4\">Le premier r\u00e9flexe est de vouloir que l&rsquo;IA accomplisse nos t\u00e2ches : \u00ab\u00a0Peux-tu faire mes pr\u00e9sentations ? Corriger mes copies ?\u00a0\u00bb. Cette approche, bien que compr\u00e9hensible, limite le potentiel de l&rsquo;IA \u00e0 un simple outil d&rsquo;efficacit\u00e9.<\/p>\n                        <p class=\"text-gray-600\">On tombe alors dans la d\u00e9sillusion, car l&rsquo;IA ne fait pas toujours \u00ab\u00a0\u00e0 notre place\u00a0\u00bb&#8230; et souvent pas mieux, ratant ainsi l&rsquo;occasion d&rsquo;innover.<\/p>\n                    <\/div>\n                    <div class=\"card\">\n                         <h3 class=\"text-xl font-bold text-center mb-4\">R\u00e9partition des usages de l&rsquo;IA<\/h3>\n                         <p class=\"text-center text-gray-600 mb-4\">Une majorit\u00e9 d&rsquo;usages initiaux se concentre sur l&rsquo;automatisation de t\u00e2ches existantes plut\u00f4t que sur la cr\u00e9ation de nouvelles possibilit\u00e9s p\u00e9dagogiques.<\/p>\n                        <div class=\"chart-container h-64 md:h-72\">\n                            <canvas id=\"mindsetChart\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <section id=\"paradigm-shift\" class=\"mb-16\">\n                <div class=\"card\">\n                    <h2 class=\"text-2xl font-bold text-center mb-6\">Vers un Nouveau Paradigme : Augmenter, Pas Remplacer<\/h2>\n                    <p class=\"text-center text-gray-600 mb-8 max-w-3xl mx-auto\">La vraie r\u00e9volution n&rsquo;est pas de remplacer l&rsquo;humain, mais d&rsquo;augmenter ses capacit\u00e9s. Il faut changer la question : de \u00ab Que peut faire l&rsquo;IA \u00e0 ma place ? \u00bb \u00e0 \u00ab Qu&rsquo;est-ce que je peux faire maintenant que je ne pouvais pas faire avant ? \u00bb<\/p>\n                    <div class=\"flex flex-col md:flex-row justify-around items-center text-center\">\n                        <div class=\"w-full md:w-2\/5 p-4\">\n                            <h3 class=\"font-bold text-lg mb-2 text-red-500\">Ancienne approche<\/h3>\n                            <div class=\"border-2 border-red-200 rounded-lg p-4 bg-red-50\">\n                                <p class=\"font-semibold\">T\u00e2che P\u00e9nible<\/p>\n                                <p class=\"text-5xl my-2\">\u21e9<\/p>\n                                <p class=\"italic\">\u00ab\u00a0Fais-le \u00e0 ma place\u00a0\u00bb<\/p>\n                                <p class=\"text-5xl my-2\">\u21e9<\/p>\n                                <p class=\"font-semibold\">R\u00e9sultat Limit\u00e9 &#038; D\u00e9cevant<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"text-gray-400 text-5xl font-bold my-4 md:my-0\">\u2192<\/div>\n\n                        <div class=\"w-full md:w-2\/5 p-4\">\n                             <h3 class=\"font-bold text-lg mb-2 text-green-600\">Nouvelle Vision<\/h3>\n                            <div class=\"border-2 border-green-200 rounded-lg p-4 bg-green-50\">\n                                <p class=\"font-semibold\">Objectif P\u00e9dagogique<\/p>\n                                <p class=\"text-5xl my-2\">\u21e9<\/p>\n                                <p class=\"italic\">\u00ab\u00a0Comment l&rsquo;IA peut m&rsquo;aider ?\u00a0\u00bb<\/p>\n                                <p class=\"text-5xl my-2\">\u21e9<\/p>\n                                <p class=\"font-semibold\">Innovation &#038; Impact Accru<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <section id=\"possibilities\" class=\"mb-16\">\n                <div class=\"card md:col-span-2\">\n                    <h2 class=\"text-2xl font-bold text-center mb-2\">L&rsquo;Impossible, Rendu Possible<\/h2>\n                    <p class=\"text-center text-gray-600 mb-6\">En changeant de perspective, des enseignants cr\u00e9ent d\u00e9j\u00e0 des exp\u00e9riences d&rsquo;apprentissage in\u00e9dites.<\/p>\n                    <div class=\"grid md:grid-cols-3 gap-6 text-center mb-8\">\n                        <div class=\"bg-gray-100 p-4 rounded-lg\">\n                            <p class=\"text-4xl mb-2\">\ud83c\udfc2<\/p>\n                            <h3 class=\"font-bold\">Diff\u00e9renciation Extr\u00eame<\/h3>\n                            <p class=\"text-sm text-gray-600\">Cr\u00e9er des exercices de maths bas\u00e9s sur les passions de chaque \u00e9l\u00e8ve (jeux vid\u00e9o, p\u00e2tisserie&#8230;).<\/p>\n                        <\/div>\n                        <div class=\"bg-gray-100 p-4 rounded-lg\">\n                            <p class=\"text-4xl mb-2\">\ud83e\udd1d<\/p>\n                            <h3 class=\"font-bold\">Renforcer le lien \u00c9cole-Maison<\/h3>\n                            <p class=\"text-sm text-gray-600\">G\u00e9n\u00e9rer des fiches d&rsquo;\u00e9tude adapt\u00e9es pour que les parents puissent aider efficacement.<\/p>\n                        <\/div>\n                        <div class=\"bg-gray-100 p-4 rounded-lg\">\n                            <p class=\"text-4xl mb-2\">\ud83c\udfa7<\/p>\n                            <h3 class=\"font-bold\">Accessibilit\u00e9 Am\u00e9lior\u00e9e<\/h3>\n                            <p class=\"text-sm text-gray-600\">Transformer des notes de cours en version audio ou un croquis en illustration claire.<\/p>\n                        <\/div>\n                    <\/div>\n                    <h3 class=\"text-xl font-bold text-center mb-4\">Impact Compar\u00e9 sur l&rsquo;Engagement \u00c9l\u00e8ve<\/h3>\n                    <div class=\"chart-container\">\n                        <canvas id=\"impactChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n             <section id=\"conclusion\" class=\"text-center\">\n                 <div class=\"card\">\n                    <h2 class=\"text-2xl font-bold mb-4\">Le D\u00e9fi de la \u00ab Formule 1 \u00bb \ud83c\udfce\ufe0f<\/h2>\n                    <p class=\"text-gray-600 max-w-2xl mx-auto\">Utiliser l&rsquo;IA pour de simples t\u00e2ches, c&rsquo;est comme conduire une Formule 1 dans le trafic. Nous avons une technologie surpuissante entre les mains.<\/p>\n                    <p class=\"text-gray-800 font-bold text-xl mt-4\">Osons cr\u00e9er nos propres circuits pour repousser les limites de ce qu&rsquo;on croyait impossible en p\u00e9dagogie.<\/p>\n                 <\/div>\n            <\/section>\n\n        <\/main>\n    <\/div>\n\n    <script>\n        const FONT_COLOR = '#374151';\n        const GRID_COLOR = '#E5E7EB';\n        \n        const COLORS = {\n            red: '#FF4E50',\n            orange: '#FC913A',\n            yellow: '#F9D423',\n            lightGreen: '#EDE574',\n            lighterGreen: '#E1F5C4'\n        };\n\n        const defaultOptions = {\n            maintainAspectRatio: false,\n            responsive: true,\n            plugins: {\n                legend: {\n                    labels: {\n                        color: FONT_COLOR,\n                        font: {\n                            family: \"'Inter', sans-serif\"\n                        }\n                    }\n                },\n                tooltip: {\n                    callbacks: {\n                        title: function(tooltipItems) {\n                            const item = tooltipItems[0];\n                            let label = item.chart.data.labels[item.dataIndex];\n                            if (Array.isArray(label)) {\n                              return label.join(' ');\n                            } else {\n                              return label;\n                            }\n                        }\n                    }\n                }\n            },\n            scales: {\n                y: {\n                    beginAtZero: true,\n                    ticks: { \n                        color: FONT_COLOR,\n                        font: {\n                            family: \"'Inter', sans-serif\"\n                        }\n                    },\n                    grid: { color: GRID_COLOR }\n                },\n                x: {\n                    ticks: { \n                        color: FONT_COLOR, \n                        font: {\n                            family: \"'Inter', sans-serif\"\n                        }\n                    },\n                    grid: { color: GRID_COLOR }\n                }\n            }\n        };\n\n        function wrapLabel(str, maxWidth) {\n            const words = str.split(' ');\n            const lines = [];\n            let currentLine = '';\n            words.forEach(word => {\n                if ((currentLine + ' ' + word).trim().length > maxWidth && currentLine.length > 0) {\n                    lines.push(currentLine);\n                    currentLine = word;\n                } else {\n                    currentLine = (currentLine + ' ' + word).trim();\n                }\n            });\n            if (currentLine.length > 0) {\n                lines.push(currentLine);\n            }\n            return lines;\n        }\n\n        const hypeCycleCtx = document.getElementById('hypeCycleChart').getContext('2d');\n        const hypeLabels = [\n            'D\u00e9clencheur de l\\'innovation', \n            'Sommet des attentes surdimensionn\u00e9es', \n            'Creux des d\u00e9sillusions', \n            'Pente de l\\'illumination', \n            'Plateau de productivit\u00e9'\n        ].map(label => wrapLabel(label, 18));\n        \n        new Chart(hypeCycleCtx, {\n            type: 'line',\n            data: {\n                labels: hypeLabels,\n                datasets: [{\n                    label: 'Niveau d\\'attente',\n                    data: [10, 85, 20, 50, 75],\n                    fill: true,\n                    backgroundColor: 'rgba(252, 145, 58, 0.2)',\n                    borderColor: COLORS.orange,\n                    tension: 0.4,\n                    pointBackgroundColor: COLORS.orange,\n                    pointRadius: 5\n                }]\n            },\n            options: {\n                 ...defaultOptions,\n                 plugins: {\n                    ...defaultOptions.plugins,\n                    legend: { display: false }\n                 },\n                 scales: {\n                    y: {\n                        ...defaultOptions.scales.y,\n                        title: { display: true, text: 'Attentes \/ Visibilit\u00e9', color: FONT_COLOR }\n                    },\n                    x: {\n                         ...defaultOptions.scales.x,\n                        title: { display: true, text: 'Phases du Cycle', color: FONT_COLOR }\n                    }\n                 }\n            }\n        });\n\n        const mindsetCtx = document.getElementById('mindsetChart').getContext('2d');\n        new Chart(mindsetCtx, {\n            type: 'doughnut',\n            data: {\n                labels: ['Automatisation des t\u00e2ches', 'Innovation p\u00e9dagogique'],\n                datasets: [{\n                    label: 'Focus de l\\'usage de l\\'IA',\n                    data: [70, 30],\n                    backgroundColor: [COLORS.red, COLORS.orange],\n                    borderColor: '#ffffff',\n                    borderWidth: 4\n                }]\n            },\n            options: {\n                ...defaultOptions,\n                plugins: {\n                    ...defaultOptions.plugins,\n                    legend: {\n                        position: 'bottom',\n                        labels: {\n                            color: FONT_COLOR,\n                            padding: 20\n                        }\n                    }\n                },\n                scales: {\n                    y: { display: false },\n                    x: { display: false }\n                }\n            }\n        });\n\n        const impactCtx = document.getElementById('impactChart').getContext('2d');\n        new Chart(impactCtx, {\n            type: 'bar',\n            data: {\n                labels: ['M\u00e9thode Traditionnelle', 'Approche Innovante avec IA'],\n                datasets: [{\n                    label: 'Niveau d\\'engagement per\u00e7u',\n                    data: [45, 88],\n                    backgroundColor: [COLORS.red, COLORS.orange],\n                    borderRadius: 6\n                }]\n            },\n            options: {\n                 ...defaultOptions,\n                 plugins: {\n                    ...defaultOptions.plugins,\n                    legend: { display: false }\n                 },\n                 scales: {\n                    y: {\n                        ...defaultOptions.scales.y,\n                        max: 100,\n                        title: { display: true, text: 'Score d\\'Engagement (sur 100)', color: FONT_COLOR }\n                    },\n                    x: { ...defaultOptions.scales.x, grid: { display: false } }\n                 }\n            }\n        });\n\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je vois beaucoup d&rsquo;usages \u00e0 cette fonctionnalit\u00e9, autant c\u00f4t\u00e9 p\u00e9dagogique (r\u00e9sum\u00e9s de concepts, synth\u00e8ses visuelles pour les \u00e9l\u00e8ves) que c\u00f4t\u00e9 administratif (r\u00e9sum\u00e9s de documents \u00e0 partager). Pour mon blogue, cela me permettra d&rsquo;ajouter des repr\u00e9sentations visuelles \u00e0 mes publications. Il ne manque plus qu&rsquo;une fonction pour exporter le tout en image afin de le partager facilement sur les r\u00e9seaux sociaux.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bref, une fonctionnalit\u00e9 prometteuse dans Gemini qui permet de transformer du texte en visuel en quelques clics, pour peu qu&rsquo;on accepte de mettre un peu les mains dans le code HTML au besoin.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<h5 class=\"wp-block-heading has-text-align-center\">Partagez cet article pour en faire b\u00e9n\u00e9ficier votre r\u00e9seau si vous l&rsquo;avez appr\u00e9ci\u00e9 !<\/h5>\n\n\n\n<div class=\"wp-block-uagb-social-share uagb-social-share__outer-wrap uagb-social-share__layout-horizontal uagb-block-bc2f4edc\">\n<div class=\"wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-456cff97\"><span class=\"uagb-ss__link\" data-href=\"https:\/\/www.facebook.com\/sharer.php?u=\" tabindex=\"0\" role=\"button\" aria-label=\"facebook\"><span class=\"uagb-ss__source-wrap\"><span class=\"uagb-ss__source-icon\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.8 90.69 226.4 209.3 245V327.7h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.3 482.4 504 379.8 504 256z\"><\/path><\/svg><\/span><\/span><\/span><\/div>\n\n\n\n<div class=\"wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-fc32ed66\"><span class=\"uagb-ss__link\" data-href=\"https:\/\/twitter.com\/share?url=\" tabindex=\"0\" role=\"button\" aria-label=\"twitter\"><span class=\"uagb-ss__source-wrap\"><span class=\"uagb-ss__source-icon\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><path d=\"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8 .2 5.7 .2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3 .6 10.4 .8 15.8 .8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.45 65.45 0 0 1 -29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z\"><\/path><\/svg><\/span><\/span><\/span><\/div>\n\n\n\n<div class=\"wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-749d7f33\"><span class=\"uagb-ss__link\" data-href=\"https:\/\/www.linkedin.com\/shareArticle?url=\" tabindex=\"0\" role=\"button\" aria-label=\"linkedin\"><span class=\"uagb-ss__source-wrap\"><span class=\"uagb-ss__source-icon\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"><\/path><\/svg><\/span><\/span><\/span><\/div>\n\n\n\n<div class=\"wp-block-uagb-social-share-child uagb-ss-repeater uagb-ss__wrapper uagb-block-6accd601\"><span class=\"uagb-ss__link\" data-href=\"mailto:?body=\" tabindex=\"0\" role=\"button\" aria-label=\"email\"><span class=\"uagb-ss__source-wrap\"><span class=\"uagb-ss__source-icon\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path d=\"M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z\"><\/path><\/svg><\/span><\/span><\/span><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<div class=\"wp-block-uagb-separator uagb-block-4e91dcbb\"><div class=\"uagb-separator-spacing-wrapper\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div><\/div>\n\n\n\n<div data-aos= \"zoom-in\" data-aos-duration=\"400\" data-aos-delay=\"0\" data-aos-easing=\"ease\" data-aos-once=\"true\" class=\"wp-block-uagb-call-to-action uagb-block-862a1ab3 wp-block-button\"><div class=\"uagb-cta__wrap\"><h3 class=\"uagb-cta__title\"><strong>Vous cherchez des solutions pour optimiser votre utilisation du num\u00e9rique ?<\/strong><\/h3><p class=\"uagb-cta__desc\">D\u00e9couvrez mes services de consultation, de coaching et de formation pour vous aider \u00e0 mieux comprendre et ma\u00eetriser cet aspect du num\u00e9rique.<\/p><\/div><div class=\"uagb-cta__buttons\"><a href=\"\/mecontacter\/\" class=\"uagb-cta__button-link-wrapper wp-block-button__link\" target=\"_blank\" rel=\"noopener noreferrer\">En savoir plus<\/a><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas Le mode Canvas est une fonctionnalit\u00e9 int\u00e9gr\u00e9e dans [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3747,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mon-outil-teste-cette-semaine"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>J&#039;ai test\u00e9 la cr\u00e9ation d&#039;une infographie dans Gemini avec le mode Canvas -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"J&#039;ai test\u00e9 la cr\u00e9ation d&#039;une infographie dans Gemini avec le mode Canvas -\" \/>\n<meta property=\"og:description\" content=\"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas Le mode Canvas est une fonctionnalit\u00e9 int\u00e9gr\u00e9e dans [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/lageekdeservice\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/lageekdeservice\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-24T21:17:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-24T21:20:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexandra Coutl\u00e9e\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@coutleea\" \/>\n<meta name=\"twitter:site\" content=\"@coutleea\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexandra Coutl\u00e9e\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/\"},\"author\":{\"name\":\"Alexandra Coutl\u00e9e\",\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9\"},\"headline\":\"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas\",\"datePublished\":\"2025-06-24T21:17:18+00:00\",\"dateModified\":\"2025-06-24T21:20:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/\"},\"wordCount\":1727,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9\"},\"image\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png\",\"articleSection\":[\"Mon outil test\u00e9 cette semaine\"],\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/\",\"url\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/\",\"name\":\"J'ai test\u00e9 la cr\u00e9ation d'une infographie dans Gemini avec le mode Canvas -\",\"isPartOf\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png\",\"datePublished\":\"2025-06-24T21:17:18+00:00\",\"dateModified\":\"2025-06-24T21:20:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage\",\"url\":\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png\",\"contentUrl\":\"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png\",\"width\":1280,\"height\":1280},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.lageekdeservice.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#website\",\"url\":\"https:\/\/www.lageekdeservice.com\/en\/\",\"name\":\"La geek de service\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.lageekdeservice.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9\",\"name\":\"Alexandra Coutl\u00e9e\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2023\/12\/cropped-Copie-de-Copie-de-Logo-officiel-512-x-512-px-2.png\",\"contentUrl\":\"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2023\/12\/cropped-Copie-de-Copie-de-Logo-officiel-512-x-512-px-2.png\",\"width\":512,\"height\":512,\"caption\":\"Alexandra Coutl\u00e9e\"},\"logo\":{\"@id\":\"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/image\/\"},\"description\":\"Passionn\u00e9e de transformation num\u00e9rique, Alexandra accompagne les organisations et les individus vers l\u2019autonomie num\u00e9rique gr\u00e2ce \u00e0 des services personnalis\u00e9s de consultation, de formation et de coaching.\",\"sameAs\":[\"http:\/\/www.lageekdeservice.com\",\"https:\/\/www.facebook.com\/lageekdeservice\",\"https:\/\/www.instagram.com\/lageekdeservice\/\",\"https:\/\/www.linkedin.com\/in\/alexandra-coutle-357a27\/\",\"https:\/\/x.com\/coutleea\",\"https:\/\/www.youtube.com\/@lageekdeservice\"],\"url\":\"https:\/\/www.lageekdeservice.com\/en\/author\/alexandracoutlee\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"J'ai test\u00e9 la cr\u00e9ation d'une infographie dans Gemini avec le mode Canvas -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/","og_locale":"fr_CA","og_type":"article","og_title":"J'ai test\u00e9 la cr\u00e9ation d'une infographie dans Gemini avec le mode Canvas -","og_description":"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas Le mode Canvas est une fonctionnalit\u00e9 int\u00e9gr\u00e9e dans [&hellip;]","og_url":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/","article_publisher":"https:\/\/www.facebook.com\/lageekdeservice","article_author":"https:\/\/www.facebook.com\/lageekdeservice","article_published_time":"2025-06-24T21:17:18+00:00","article_modified_time":"2025-06-24T21:20:40+00:00","og_image":[{"width":1280,"height":1280,"url":"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png","type":"image\/png"}],"author":"Alexandra Coutl\u00e9e","twitter_card":"summary_large_image","twitter_creator":"@coutleea","twitter_site":"@coutleea","twitter_misc":{"\u00c9crit par":"Alexandra Coutl\u00e9e","Estimation du temps de lecture":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#article","isPartOf":{"@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/"},"author":{"name":"Alexandra Coutl\u00e9e","@id":"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9"},"headline":"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas","datePublished":"2025-06-24T21:17:18+00:00","dateModified":"2025-06-24T21:20:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/"},"wordCount":1727,"commentCount":0,"publisher":{"@id":"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9"},"image":{"@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png","articleSection":["Mon outil test\u00e9 cette semaine"],"inLanguage":"fr-CA","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/","url":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/","name":"J'ai test\u00e9 la cr\u00e9ation d'une infographie dans Gemini avec le mode Canvas -","isPartOf":{"@id":"https:\/\/www.lageekdeservice.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage"},"image":{"@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png","datePublished":"2025-06-24T21:17:18+00:00","dateModified":"2025-06-24T21:20:40+00:00","breadcrumb":{"@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/"]}]},{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#primaryimage","url":"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png","contentUrl":"https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png","width":1280,"height":1280},{"@type":"BreadcrumbList","@id":"https:\/\/www.lageekdeservice.com\/en\/jai-teste-la-creation-dune-infographie-dans-gemini-avec-le-mode-canvas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.lageekdeservice.com\/en\/"},{"@type":"ListItem","position":2,"name":"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas"}]},{"@type":"WebSite","@id":"https:\/\/www.lageekdeservice.com\/en\/#website","url":"https:\/\/www.lageekdeservice.com\/en\/","name":"La geek de service","description":"","publisher":{"@id":"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lageekdeservice.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":["Person","Organization"],"@id":"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/b20fb51adad51bca9620b40ff66bc2e9","name":"Alexandra Coutl\u00e9e","image":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2023\/12\/cropped-Copie-de-Copie-de-Logo-officiel-512-x-512-px-2.png","contentUrl":"https:\/\/www.lageekdeservice.com\/wp-content\/uploads\/2023\/12\/cropped-Copie-de-Copie-de-Logo-officiel-512-x-512-px-2.png","width":512,"height":512,"caption":"Alexandra Coutl\u00e9e"},"logo":{"@id":"https:\/\/www.lageekdeservice.com\/en\/#\/schema\/person\/image\/"},"description":"Passionn\u00e9e de transformation num\u00e9rique, Alexandra accompagne les organisations et les individus vers l\u2019autonomie num\u00e9rique gr\u00e2ce \u00e0 des services personnalis\u00e9s de consultation, de formation et de coaching.","sameAs":["http:\/\/www.lageekdeservice.com","https:\/\/www.facebook.com\/lageekdeservice","https:\/\/www.instagram.com\/lageekdeservice\/","https:\/\/www.linkedin.com\/in\/alexandra-coutle-357a27\/","https:\/\/x.com\/coutleea","https:\/\/www.youtube.com\/@lageekdeservice"],"url":"https:\/\/www.lageekdeservice.com\/en\/author\/alexandracoutlee\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png",1280,1280,false],"thumbnail":["https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280-150x150.png",150,150,true],"medium":["https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280-300x300.png",300,300,true],"medium_large":["https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280-768x768.png",768,768,true],"large":["https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280-1024x1024.png",1024,1024,true],"1536x1536":["https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png",1280,1280,false],"2048x2048":["https:\/\/www.lageekdeservice.com\/en\/wp-content\/uploads\/2025\/06\/cellphone-5459707_1280.png",1280,1280,false]},"uagb_author_info":{"display_name":"Alexandra Coutl\u00e9e","author_link":"https:\/\/www.lageekdeservice.com\/en\/author\/alexandracoutlee\/"},"uagb_comment_info":1,"uagb_excerpt":"J&rsquo;ai test\u00e9 la cr\u00e9ation d&rsquo;une infographie dans Gemini avec le mode Canvas Le mode Canvas est une fonctionnalit\u00e9 int\u00e9gr\u00e9e dans [&hellip;]","_links":{"self":[{"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/posts\/3743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/comments?post=3743"}],"version-history":[{"count":2,"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/posts\/3743\/revisions"}],"predecessor-version":[{"id":3749,"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/posts\/3743\/revisions\/3749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/media\/3747"}],"wp:attachment":[{"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/media?parent=3743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/categories?post=3743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lageekdeservice.com\/en\/wp-json\/wp\/v2\/tags?post=3743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}