--- marp: true theme: dracula paginate: true --- # Créer des présentations simples très rapidement (avec ou sans IA) ## Formation SellTix ![bg right:37% 80%](https://www.selltix.live/assets/lp/logo.svg) --- ## 1. Introduction ### Présentation des défis liés à la création de slides - Processus chronophage et souvent frustrant - Équilibre difficile entre contenu et esthétique - Problèmes de compatibilité entre versions et plateformes - Difficultés à maintenir et mettre à jour ![bg right:30% 90%](https://img.freepik.com/vecteurs-libre/homme-affaires-stresse-travaillant-ordinateur-portable-bureau_74855-20073.jpg) --- ## Pourquoi chercher des alternatives ? - **Limites des outils traditionnels** - Interface surchargée et complexe - Temps perdu sur le formatage plutôt que le contenu - Fichiers volumineux et difficiles à partager - Pas vraiment adapté pour écrire sur mobile ou tablettes. ![bg right:40% 80%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-surcharge-travail_335657-3971.jpg) --- ## Objectifs de la formation - Découvrir une approche basée sur le contenu d'abord - Réduire de 70% le temps de création des présentations - Maîtriser un workflow moderne et efficace - Créer des présentations professionnelles sans se perdre dans le formatage ![bg right:35% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-objectifs_114360-5946.jpg) --- # 2. Le Markdown comme solution --- ## Qu'est-ce que le Markdown ? - Langage de balisage léger créé en 2004 par John Gruber - Syntaxe simple et intuitive, lisible même sous forme brute - Conçu pour être facilement converti en HTML et autres formats - Largement adopté (GitHub, Reddit, Stack Overflow, Discord...) - Extension de fichier `.md` --- ## Avantages du Markdown pour les présentations - **Focus sur le contenu** plutôt que sur la mise en forme - **Syntaxe simple** à apprendre - **Portabilité et compatibilité** entre systèmes et applications - **Légèreté** des fichiers (simples fichiers texte) - **Séparation** du contenu et de la présentation ![bg right:30% 80%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-avantage-concurrentiel_335657-3843.jpg) --- ## Syntaxe de base du Markdown | Élément | Syntaxe | |---------|---------| | Titre | `# Titre` | | Sous-titre | `## Sous-titre` | | Liste à puces | `- Élément` ou `* Élément*` | | Sous Liste à puces | `- TAB + Élément` ou `* TAB Élément*` | | Liste numérotée | `1. Élément` | | Gras | `**texte**` | | Italique | `*texte*` | | Citation | `> texte` | --- | Lien | `[texte](url)` | | Image | `![alt](url)` | | Tableau | `| Col1 | Col2 |` | > Plus d'information [ici](https://docs.framasoft.org/fr/grav/markdown.html) --- ## Logiciels pour écrire du Markdown - **Éditeurs en ligne** - [StackEdit](https://stackedit.io/) - [Editor.md](https://pandao.github.io/editor.md/en.html) - **Applications desktop** - [Typora](https://typora.io/) (WYSIWYG) - [MacDown](https://macdown.uranusjr.com/) (macOS) - [VS Code](https://code.visualstudio.com/) avec extensions ![bg right:30% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-editeur-texte_335657-3825.jpg) --- - **Applications mobiles** - [iA Writer](https://ia.net/writer) - [Markdown Notes](https://play.google.com/store/apps/details?id=com.xvzan.mnotes) ![bg right:30% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-editeur-texte_335657-3825.jpg) --- # 3. Présentation de MARP --- ## Qu'est-ce que MARP ? - **M**arkdown **P**resentation **E**cosystem - Convertit le Markdown en slides - Projet open-source - Extensions pour VS Code, CLI, etc. ![bg right:40% 80%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-presentation-entreprise_335657-3968.jpg) --- ## Fonctionnalités principales - Conversion du Markdown en slides - Thèmes et personnalisation - Exportation en différents formats (PDF, HTML, PPTX) - Support des images, des diagrammes et du code ![bg right:40% 80%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-fonctionnalites-produit_335657-3856.jpg) --- ## Installation et configuration de base ```bash # Installation globale de Marp CLI npm install -g @marp-team/marp-cli ``` > (pour les geeks) ![bg right:30% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-installation-logiciel_335657-3887.jpg) --- ## VS Code à la rescousse 1. Installation de VSCode - [VsCode](https://code.visualstudio.com/) 2. Installation de l'extension MARP - Rechercher "Marp for VS Code" - Installer l'extension 3. Créer un fichier .md avec `marp: true` en frontmatter 4. Ajout extension pour preview du markdown ![bg right:30% 90%](https://img.freepik.com/psd-premium/code-icone-3d-representant-symboles-programmation-developpement-web_743950-5086.jpg?w=1060) --- # 4. Créer une présentation avec MARP --- ## Structure d'une présentation MARP ```markdown --- marp: true theme: default paginate: true --- # Première slide --- # Deuxième slide ``` - Séparation des slides avec `---` --- ## Directives spécifiques à MARP - Directives globales (frontmatter) - Directives locales (commentaires HTML) ```markdown --- marp: true theme: gaia --- # Slide spéciale # Slide sans pagination ``` ![bg right:35% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-documentation-technique_335657-3873.jpg) --- ## Ajout d'images et de médias ```markdown ![](image.jpg) ![bg](background.jpg) ![bg right:40%](right-image.jpg) ![width:300px](sized-image.jpg) ``` - Positionnement avec `bg`, `right`, `left` - Dimensionnement avec `width`, `height` - Filtres avec `blur`, `brightness`, etc. ![bg right:30% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-galerie-photos_114360-3845.jpg) --- ## Personnalisation des thèmes ```markdown --- marp: true theme: default class: invert --- ``` Thèmes intégrés : - `default` - `gaia` - `uncover` ![bg right:30% 80%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-personnalisation_335657-3842.jpg) --- **Ajouter un thème:** - Il est possible d'ajouter des thèmes pour personnaliser votre présentation. - [Liste](https://rnd195.github.io/marp-community-themes/) - [Exemple](https://rnd195.github.io/marp-community-themes/installation.html) ![bg right:30% 90%](https://img.freepik.com/vecteurs-libre/fond-degrade-ui-ux-illustre_23-2149050187.jpg?t=st=1743156182~exp=1743159782~hmac=970f6363394a1004b5017f39d9145ef0e0f8558605323ad283b13bec8635ac9f&w=1800) --- # Exporter la présentation ![bg right:30% 90%](https://img.freepik.com/vecteurs-premium/transfert-donnees_71983-927.jpg?w=1800) --- # 5. Utilisation de l'IA pour accélérer la création de contenu --- ## Outils d'IA pour générer du contenu - **ChatGPT / GPT-4** - **Claude** - **Gemini** - **Midjourney / DALL-E** (pour les images) ![bg right:40% 80%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-intelligence-artificielle_335657-3788.jpg) --- ## Techniques pour obtenir des résultats optimaux 1. **Prompts précis et détaillés** ``` Crée une présentation en markdown sur [sujet] avec 5 slides incluant des points clés et des exemples ``` 2. **Itération et affinage** 3. **Demander du contenu formaté en Markdown** ![bg right:35% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-optimisation-moteur-recherche_335657-4773.jpg) --- > Exemple de prompt: > En tant que rédacteur de contenu, peux-tu m'écrire le contenu .... je veux utiliser MARP (https://marp.app/) pour générer les slides. merci donc d'écrire directement le contenu au format markdown adapté à MARP. Pour la géneration d’image servant à illustrer, peux tu utiliser le site https://fr.freepik.com/ ? --- ## Workflow : de la génération à la mise en forme 1. **Planification** : Définir structure et objectifs 2. **Génération** : Utiliser l'IA pour créer le contenu brut 3. **Édition** : Affiner et personnaliser le contenu 4. **Mise en forme** : Ajouter directives MARP et médias 5. **Exportation** : Générer la présentation finale ![bg right:30% 80%](https://img.freepik.com/vecteurs-libre/illustration-concept-flux-travail_114360-1445.jpg) --- ## Limites et pièges à éviter - **Contenu générique** : Personnaliser les sorties de l'IA - **Hallucinations** : Vérifier les faits et données - **Dépendance excessive** : L'IA comme assistant, pas remplaçant - **Droits d'auteur** : Attention aux contenus protégés - **Confidentialité** : Ne pas partager d'informations sensibles ![bg left:35% 90%](https://img.freepik.com/vecteurs-libre/illustration-concept-abstrait-erreur-404_335657-2243.jpg) --- # 6. Démonstration pratique