[{"data":1,"prerenderedAt":644},["ShallowReactive",2],{"navigation_docs":3,"-demarrer-premiere-presentation":81,"-demarrer-premiere-presentation-surround":640},[4,15,63],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":14},"Démarrer","i-lucide-rocket","\u002Fdemarrer","1.demarrer",[10],{"title":11,"path":12,"stem":13},"Votre première présentation","\u002Fdemarrer\u002Fpremiere-presentation","1.demarrer\u002F1.premiere-presentation",false,{"title":16,"icon":17,"path":18,"stem":19,"children":20,"page":14},"Écrire","i-lucide-pen-line","\u002Fecrire","2.ecrire",[21,25,29,33,37,41,45],{"title":22,"path":23,"stem":24},"La syntaxe","\u002Fecrire\u002Fsyntaxe","2.ecrire\u002F1.syntaxe",{"title":26,"path":27,"stem":28},"Les composants","\u002Fecrire\u002Fcomposants","2.ecrire\u002F2.composants",{"title":30,"path":31,"stem":32},"Intégrer une story Storybook","\u002Fecrire\u002Fstory-storybook","2.ecrire\u002F3.story-storybook",{"title":34,"path":35,"stem":36},"Placer une image à côté du texte","\u002Fecrire\u002Fimage-a-cote-du-texte","2.ecrire\u002F4.image-a-cote-du-texte",{"title":38,"path":39,"stem":40},"Ajouter des notes de présentation","\u002Fecrire\u002Fnotes-de-presentation","2.ecrire\u002F5.notes-de-presentation",{"title":42,"path":43,"stem":44},"Exporter en PDF","\u002Fecrire\u002Fexport-pdf","2.ecrire\u002F6.export-pdf",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":14},"Référence","i-lucide-book-open","\u002Fecrire\u002Freference","ecrire\u002Freference",[51,55,59],{"title":52,"path":53,"stem":54},"@vignettes\u002Fnuxt","\u002Fecrire\u002Freference\u002Fnuxt","ecrire\u002Freference\u002Fnuxt\u002FREADME",{"title":56,"path":57,"stem":58},"@vignettes\u002Fschemas","\u002Fecrire\u002Freference\u002Fschemas","ecrire\u002Freference\u002Fschemas\u002FREADME",{"title":60,"path":61,"stem":62},"@vignettes\u002Fstorybook","\u002Fecrire\u002Freference\u002Fstorybook","ecrire\u002Freference\u002Fstorybook\u002FREADME",{"title":64,"icon":65,"path":66,"stem":67,"children":68,"page":14},"Studio","i-lucide-layout-grid","\u002Fstudio","3.studio",[69,73,77],{"title":70,"path":71,"stem":72},"Les rôles","\u002Fstudio\u002Froles","3.studio\u002F1.roles",{"title":74,"path":75,"stem":76},"Visibilité et partage","\u002Fstudio\u002Fvisibilite-et-partage","3.studio\u002F2.visibilite-et-partage",{"title":78,"path":79,"stem":80},"Versions et brouillon","\u002Fstudio\u002Fversions-et-brouillon","3.studio\u002F3.versions-et-brouillon",{"id":82,"title":83,"body":84,"description":634,"extension":635,"meta":636,"navigation":637,"path":12,"seo":638,"stem":13,"__hash__":639},"docs\u002F1.demarrer\u002F1.premiere-presentation.md","Votre première présentation dans le studio",{"type":85,"value":86,"toc":624},"minimark",[87,91,94,99,102,105,112,116,144,150,153,159,163,174,421,424,470,473,479,482,486,489,495,498,502,505,519,525,535,539,542,553,559,562,568,571,574,585,588,594,598,620],[88,89,90],"p",{},"Ce tutoriel vous fait créer une présentation de trois diapositives dans le studio de votre équipe. À la fin, elle est publiée, vous avez envoyé son lien à un collègue, vous l'avez présentée avec vos notes à l'écran et vous en avez un PDF.",[88,92,93],{},"Il vous faut un compte avec le rôle Éditeur sur le studio. Si votre compte a le rôle Lecteur, demandez le rôle Éditeur à un Propriétaire du studio : il change les rôles depuis la page « Comptes ».",[95,96,98],"h2",{"id":97},"se-connecter","Se connecter",[88,100,101],{},"Ouvrez l'adresse du studio et cliquez sur « Se connecter », en haut à droite. Choisissez « Se connecter avec GitHub » ou « Se connecter avec Google », selon le compte que l'équipe utilise.",[88,103,104],{},"Le studio affiche le catalogue des présentations, rangées par dossier. Votre nom et votre rôle apparaissent en haut à droite.",[88,106,107],{},[108,109],"img",{"alt":110,"src":111},"Le catalogue, avec les boutons « Nouveau dossier » et « Nouvelle présentation »","\u002Fimages\u002Fstudio\u002Fcatalogue.png",[95,113,115],{"id":114},"créer-la-présentation","Créer la présentation",[117,118,119,123,131,138,141],"ol",{},[120,121,122],"li",{},"Cliquez sur « Nouvelle présentation ».",[120,124,125,126,130],{},"Dans « Titre », écrivez ",[127,128,129],"code",{},"Bilan du mois",".",[120,132,133,134,137],{},"Cliquez sur la baguette à droite du champ « Slug » : le studio remplit le slug depuis le titre. Le slug est la fin de l'adresse de la présentation, ",[127,135,136],{},"\u002Fslides\u002Fbilan-du-mois"," ici.",[120,139,140],{},"Laissez « Point de départ », « Projet » et « Thème » sur leurs valeurs.",[120,142,143],{},"Cliquez sur « Créer et éditer ».",[88,145,146],{},[108,147],{"alt":148,"src":149},"La fenêtre « Nouvelle présentation », remplie","\u002Fimages\u002Fstudio\u002Fnouvelle-presentation.png",[88,151,152],{},"L'éditeur s'ouvre. Le texte de la présentation est à gauche, l'aperçu à droite. La présentation contient deux diapositives : la diapositive de titre et une diapositive « Première section ».",[88,154,155],{},[108,156],{"alt":157,"src":158},"L'éditeur à l'ouverture d'une nouvelle présentation","\u002Fimages\u002Fstudio\u002Fediteur-squelette.png",[95,160,162],{"id":161},"écrire-trois-diapositives","Écrire trois diapositives",[88,164,165,166,169,170,173],{},"Les lignes de la première ligne ",[127,167,168],{},"---"," à la seconde forment l'en-tête de la présentation : son titre et son thème. Gardez-les. Sélectionnez tout le texte à partir de la ligne ",[127,171,172],{},"# Bilan du mois"," jusqu'à la fin, puis remplacez-le par le texte ci-dessous. Le rendu attendu est affiché au-dessus du texte : cliquez dans l'aperçu, puis utilisez les flèches du clavier pour passer d'une diapositive à l'autre.",[175,176,177],"deck-example",{},[178,179,184],"pre",{"className":180,"code":181,"language":182,"meta":183,"style":183},"language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Bilan du mois\n\n:subtitle{text=\"Équipe produit, octobre\"}\n\n---\n\n### Ce qui est en ligne\n\n- La page d'accueil\n- Le formulaire de contact\n- Le suivi de la demande\n\n::Notes\nDonner le nombre de demandes reçues depuis la mise en ligne.\n::\n\n---\n\n### La suite\n\n:::Columns\n::Column\n### Ce mois-ci\nLes tests avec cinq usagers.\n::\n\n::Column\n### Le mois prochain\nL'affichage sur téléphone.\n::\n:::\n","mdc","",[127,185,186,199,206,238,243,250,255,264,269,278,286,294,299,308,314,320,325,330,335,343,348,357,365,373,379,384,389,396,404,410,415],{"__ignoreMap":183},[187,188,191,195],"span",{"class":189,"line":190},"line",1,[187,192,194],{"class":193},"sMK4o","# ",[187,196,198],{"class":197},"sBMFI","Bilan du mois\n",[187,200,202],{"class":189,"line":201},2,[187,203,205],{"emptyLinePlaceholder":204},true,"\n",[187,207,209,212,216,219,223,226,229,233,235],{"class":189,"line":208},3,[187,210,211],{"class":193},":",[187,213,215],{"class":214},"swJcz","subtitle",[187,217,218],{"class":193},"{",[187,220,222],{"class":221},"spNyl","text",[187,224,225],{"class":193},"=",[187,227,228],{"class":193},"\"",[187,230,232],{"class":231},"sfazB","Équipe produit, octobre",[187,234,228],{"class":193},[187,236,237],{"class":193},"}\n",[187,239,241],{"class":189,"line":240},4,[187,242,205],{"emptyLinePlaceholder":204},[187,244,246],{"class":189,"line":245},5,[187,247,249],{"class":248},"sTEyZ","---\n",[187,251,253],{"class":189,"line":252},6,[187,254,205],{"emptyLinePlaceholder":204},[187,256,258,261],{"class":189,"line":257},7,[187,259,260],{"class":193},"### ",[187,262,263],{"class":197},"Ce qui est en ligne\n",[187,265,267],{"class":189,"line":266},8,[187,268,205],{"emptyLinePlaceholder":204},[187,270,272,275],{"class":189,"line":271},9,[187,273,274],{"class":193},"-",[187,276,277],{"class":248}," La page d'accueil\n",[187,279,281,283],{"class":189,"line":280},10,[187,282,274],{"class":193},[187,284,285],{"class":248}," Le formulaire de contact\n",[187,287,289,291],{"class":189,"line":288},11,[187,290,274],{"class":193},[187,292,293],{"class":248}," Le suivi de la demande\n",[187,295,297],{"class":189,"line":296},12,[187,298,205],{"emptyLinePlaceholder":204},[187,300,302,305],{"class":189,"line":301},13,[187,303,304],{"class":193},"::",[187,306,307],{"class":214},"Notes\n",[187,309,311],{"class":189,"line":310},14,[187,312,313],{"class":248},"Donner le nombre de demandes reçues depuis la mise en ligne.\n",[187,315,317],{"class":189,"line":316},15,[187,318,319],{"class":193},"::\n",[187,321,323],{"class":189,"line":322},16,[187,324,205],{"emptyLinePlaceholder":204},[187,326,328],{"class":189,"line":327},17,[187,329,249],{"class":248},[187,331,333],{"class":189,"line":332},18,[187,334,205],{"emptyLinePlaceholder":204},[187,336,338,340],{"class":189,"line":337},19,[187,339,260],{"class":193},[187,341,342],{"class":197},"La suite\n",[187,344,346],{"class":189,"line":345},20,[187,347,205],{"emptyLinePlaceholder":204},[187,349,351,354],{"class":189,"line":350},21,[187,352,353],{"class":193},":::",[187,355,356],{"class":214},"Columns\n",[187,358,360,362],{"class":189,"line":359},22,[187,361,304],{"class":193},[187,363,364],{"class":214},"Column\n",[187,366,368,370],{"class":189,"line":367},23,[187,369,260],{"class":193},[187,371,372],{"class":197},"Ce mois-ci\n",[187,374,376],{"class":189,"line":375},24,[187,377,378],{"class":248},"Les tests avec cinq usagers.\n",[187,380,382],{"class":189,"line":381},25,[187,383,319],{"class":193},[187,385,387],{"class":189,"line":386},26,[187,388,205],{"emptyLinePlaceholder":204},[187,390,392,394],{"class":189,"line":391},27,[187,393,304],{"class":193},[187,395,364],{"class":214},[187,397,399,401],{"class":189,"line":398},28,[187,400,260],{"class":193},[187,402,403],{"class":197},"Le mois prochain\n",[187,405,407],{"class":189,"line":406},29,[187,408,409],{"class":248},"L'affichage sur téléphone.\n",[187,411,413],{"class":189,"line":412},30,[187,414,319],{"class":193},[187,416,418],{"class":189,"line":417},31,[187,419,420],{"class":193},":::\n",[88,422,423],{},"Voici ce que fait chaque ligne :",[425,426,427,433,443,453,460],"ul",{},[120,428,429,430,432],{},"une ligne ",[127,431,168],{}," sépare deux diapositives ;",[120,434,435,438,439,442],{},[127,436,437],{},"#"," écrit le titre de la diapositive de titre, et ",[127,440,441],{},":subtitle{text=\"…\"}"," le texte affiché sous ce titre ;",[120,444,445,448,449,452],{},[127,446,447],{},"###"," écrit le titre d'une diapositive de contenu. Avec le thème dsfr, un titre ",[127,450,451],{},"##"," donne une diapositive de section, sur fond bleu ;",[120,454,455,456,459],{},"le bloc ",[127,457,458],{},"::Notes"," contient les notes de l'orateur : la vue conférencier les affiche, le public ne les voit pas ;",[120,461,455,462,465,466,469],{},[127,463,464],{},":::Columns"," place ses deux blocs ",[127,467,468],{},"::Column"," côte à côte.",[88,471,472],{},"L'aperçu suit le curseur : placez le curseur dans le texte d'une diapositive, l'aperçu l'affiche. La barre du bas indique la diapositive où se trouve le curseur, « Diapositive 2 sur 3 » par exemple.",[88,474,475],{},[108,476],{"alt":477,"src":478},"L'éditeur avec les trois diapositives, le curseur sur la deuxième","\u002Fimages\u002Fstudio\u002Fediteur-diapositives.png",[88,480,481],{},"Le studio enregistre chaque modification dans le brouillon de la présentation, sans action de votre part. Ce brouillon est partagé : un collègue qui ouvre la même présentation voit vos modifications pendant que vous tapez.",[95,483,485],{"id":484},"publier","Publier",[88,487,488],{},"Le bouton « Publier », en haut à droite, affiche un point orange tant que le brouillon diffère de la version que voient les visiteurs. Cliquez sur « Publier ». Le bouton devient « Publié ».",[88,490,491],{},[108,492],{"alt":493,"src":494},"Le bouton « Publié » après la publication","\u002Fimages\u002Fstudio\u002Fpublie.png",[88,496,497],{},"Les visiteurs voient la version publiée. Une modification faite ensuite reste dans le brouillon jusqu'à la publication suivante.",[95,499,501],{"id":500},"partager-par-un-lien","Partager par un lien",[88,503,504],{},"Une nouvelle présentation a la visibilité « Privée » : seuls les comptes Éditeur et Propriétaire du studio l'ouvrent. Pour l'ouvrir à toute personne qui a le lien :",[117,506,507,510,513,516],{},[120,508,509],{},"Cliquez sur « Partage et réglages », en haut de l'éditeur, puis sur l'onglet « Accès et partage ».",[120,511,512],{},"Dans « Visibilité », choisissez « Public ».",[120,514,515],{},"Activez « Non répertoriée » : la présentation s'ouvre par son lien et reste absente du catalogue des comptes sans accès individuel et des personnes non connectées.",[120,517,518],{},"Cliquez sur « Enregistrer ».",[88,520,521],{},[108,522],{"alt":523,"src":524},"L'onglet « Accès et partage », visibilité Public et Non répertoriée activée","\u002Fimages\u002Fstudio\u002Fpartage.png",[88,526,527,528,530,531,534],{},"Envoyez l'adresse de la présentation à votre collègue : l'adresse du studio suivie de ",[127,529,136],{},". La page ",[532,533,74],"a",{"href":75}," décrit les autres réglages : le mot de passe et les accès donnés à un compte précis.",[95,536,538],{"id":537},"présenter","Présenter",[88,540,541],{},"En haut à droite de l'aperçu, cliquez sur « Présenter ». La présentation s'ouvre dans un nouvel onglet, sur la diapositive où se trouve le curseur.",[425,543,544,547,550],{},[120,545,546],{},"Les flèches du clavier passent d'une diapositive à l'autre.",[120,548,549],{},"La touche F passe en plein écran.",[120,551,552],{},"Le bouton en haut à droite affiche la barre de commandes : vue d'ensemble, vue conférencier, plein écran, lien de la diapositive, export PDF.",[88,554,555],{},[108,556],{"alt":557,"src":558},"La présentation ouverte, avec la barre de commandes et l'infobulle « Vue conférencier »","\u002Fimages\u002Fstudio\u002Fpresenter.png",[88,560,561],{},"Appuyez sur la touche S, ou cliquez sur « Vue conférencier » dans la barre de commandes. Une nouvelle fenêtre affiche la diapositive en cours, la diapositive suivante, un chronomètre et vos notes. Placez cette fenêtre sur votre écran, et la présentation sur l'écran que voit le public. Si aucune fenêtre ne s'ouvre, votre navigateur a bloqué la fenêtre : autorisez les fenêtres pop-up pour l'adresse du studio.",[88,563,564],{},[108,565],{"alt":566,"src":567},"La vue conférencier, avec la note de la deuxième diapositive","\u002Fimages\u002Fstudio\u002Fvue-conferencier.png",[95,569,42],{"id":570},"exporter-en-pdf",[88,572,573],{},"L'export fonctionne dans Chrome, Edge ou Brave.",[117,575,576,579,582],{},[120,577,578],{},"Dans la barre de commandes de la présentation, cliquez sur « Imprimer ou exporter en PDF ».",[120,580,581],{},"Le studio met chaque diapositive sur une page, puis ouvre la fenêtre d'impression du navigateur.",[120,583,584],{},"Dans « Destination », choisissez « Enregistrer au format PDF », puis enregistrez.",[88,586,587],{},"Une fois la fenêtre d'impression fermée, la page propose « Rouvrir la fenêtre d'impression » et « Revenir à la présentation ».",[88,589,590],{},[108,591],{"alt":592,"src":593},"La page de l'export PDF après la fermeture de la fenêtre d'impression","\u002Fimages\u002Fstudio\u002Fexport-pdf.png",[95,595,597],{"id":596},"pour-continuer","Pour continuer",[425,599,600,605,617],{},[120,601,602,604],{},[532,603,22],{"href":23}," décrit l'en-tête, le découpage des diapositives et les annotations.",[120,606,607,609,610,613,614,130],{},[532,608,26],{"href":27}," montre les blocs disponibles, comme ",[127,611,612],{},"Columns"," et ",[127,615,616],{},"Notes",[120,618,619],{},"Dans l'éditeur, le bouton « Aide », en bas à droite, liste les composants et les insère dans le texte.",[621,622,623],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":183,"searchDepth":201,"depth":201,"links":625},[626,627,628,629,630,631,632,633],{"id":97,"depth":201,"text":98},{"id":114,"depth":201,"text":115},{"id":161,"depth":201,"text":162},{"id":484,"depth":201,"text":485},{"id":500,"depth":201,"text":501},{"id":537,"depth":201,"text":538},{"id":570,"depth":201,"text":42},{"id":596,"depth":201,"text":597},"Créer une présentation de trois diapositives, la publier, la partager par un lien, la présenter avec la vue conférencier et l'exporter en PDF.","md",{},{"title":11},{"title":83,"description":634},"98oAJe8dFYTzeskfccSDIDO1nFnaV3crImU0vt2UbOc",[641,642],null,{"title":22,"path":23,"stem":24,"description":643,"children":-1},"L'en-tête d'une présentation, le découpage en diapositives, les annotations et les mises en page.",1792517108762]