chore: update README

.gitlab-ci.yml

@@ -17,9 +17,6 @@ prepare_folders:
   cache:
     paths:
       - .public
-  artifacts:
-    paths:
-      - .public
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
 
@@ -38,10 +35,12 @@ render_pdf:
   artifacts:
     paths:
       - .public/docs
+    expire_in: 2 week
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
 
 render_ppt:
+  needs: [render_pdf]
   environment: $CI_COMMIT_BRANCH
   stage: build
   when: manual
@@ -56,10 +55,10 @@ render_ppt:
   artifacts:
     paths:
       - .public/docs
+    expire_in: 2 week
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
 
-
 pages:
   environment: $CI_COMMIT_BRANCH
   stage: deploy
@@ -72,9 +71,5 @@ pages:
     paths:
       - .public
       - public
-  artifacts:
-    paths:
-      - public
   rules:
     - if: $CI_COMMIT_BRANCH =~ /^make/
-

README.md

@@ -1,2 +1,42 @@
 # Alex Presentations
-Here you'l find various presentations done with Revealjs or any new shiny tool I've found.
+
+Here you'l find various presentations done with Revealjs or any new shiny tool I've found.  
+Currently, small adjustments were made to provide a to the reveal.js submodule all the configuration needed to serve files located in the parent folder.
+
+# Usage
+
+## Writing your slide
+
+- Use the reveal.js `index.html` template located in the submodule.
+- You can see your presentation by going to the `index.html` file with ~~Firefox~~ your favorite browser
+- Remember to set the correct path to plugins eg. `custom_plugins/my_super_plugin/plugin.js`
+
+## Gitlab CI/CD
+
+A sample `.gitlab-ci.yml` is provided, currently (and quite dirtily FTM) providing a way to:
+
+- Generate a PDF from `index.html` via [decktape](https://github.com/astefanutti/decktape) (containerized)
+- Generate a Powerpoint (.pptx) file via [linuxserver/libreoffice](https://hub.docker.com/r/linuxserver/libreoffice) (containerized)
+- A job to prepare all of this
+- Serve said presentation/files via Gitlab Pages.
+
+## URLs
+
+Didn't tested anywhere else but it should be:  
+https://<username>.gitlab.io/<repo-name>/<branch>[/slide.{pptx,pdf}].  
+For example:  
+https://john-doe.gitlab.io/alex-presentations/make/notion/
+
+## TODO
+
+- Better CI, currently jobs are manual only
+- Cleaner code
+- Better templating
+- Auto-upload to google-drive
+- PDF/PPTX/Pages CI when tag
+- ~~Find a cure to earth's suffering~~
+
+## Disclaimer
+
+Yeah, it's dirty, could be better, not optimal, yadah yadah.  
+Will try to do better, don't roast me too much :)

custom_plugins/chalkboard/README.md

@@ -0,0 +1,163 @@
+# Chalkboard
+
+With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:
+
+- you can make notes directly on the slides, e.g. to comment on certain aspects,
+- you can open a chalkboard or whiteboard on which you can make notes.
+
+The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.
+
+The plugin records all drawings made so that they can be play backed using the `autoSlide` feature or the `audio-slideshow` plugin.
+
+
+[Check out the demo](https://rajgoel.github.io/reveal.js-demos/?topic=chalkboard)
+
+## Setup
+
+To use the plugin include
+```html
+<!-- Font awesome is required for the chalkboard plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<!-- Custom controls plugin is used to for opening and closing annotation modes. -->
+<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/plugin.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/style.css">
+<!-- Chalkboard plugin -->
+<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/plugin.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/style.css">
+```
+to the header of your presentation and configure reveal.js and the plugin by
+
+```js
+Reveal.initialize({
+  customcontrols: {
+    controls: [
+      { icon: '<i class="fa fa-pen-square"></i>',
+        title: 'Toggle chalkboard (B)',
+        action: 'RevealChalkboard.toggleChalkboard();'
+      },
+      { icon: '<i class="fa fa-pen"></i>',
+        title: 'Toggle notes canvas (C)',
+        action: 'RevealChalkboard.toggleNotesCanvas();'
+      }
+    ]
+  },
+  chalkboard: {
+    // add configuration here
+  },
+  // ...
+  plugins: [ RevealChalkboard, RevealCustomControls ],
+  // ...
+});
+```
+
+In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that `font-awesome` is available. The easiest way is to include
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins/menu/font-awesome/css/fontawesome.css">
+```
+to the ```head``` section of you HTML-file.
+
+## Usage
+
+### Mouse or touch
+- Click on the pen symbols at the bottom left to toggle the notes canvas or chalkboard
+- Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)
+- Click on the up/down arrows on the left to the switch among multiple chalkboardd (the up/down arrows are only available for the chlakboard)
+- Click the left mouse button and drag to write on notes canvas or chalkboard
+- Click the right mouse button and drag to wipe away previous drawings
+- Touch and move to write on notes canvas or chalkboard
+
+### Keyboard
+- Press the 'BACKSPACE' key to delete all chalkboard drawings
+- Press the 'DEL' key to clear the notes canvas or chalkboard
+- Press the 'c' key to toggle the notes canvas
+- Press the 'b' key to toggle the chalkboard
+- Press the 'd' key to download drawings
+- Press the 'x' key to cycle colors forward
+- Press the 'y' key to cycle colors backward
+
+## Playback
+
+If the `autoSlide` feature is set or if the `audio-slideshow` plugin is used, pre-recorded chalkboard drawings can be played. The slideshow plays back the user interaction with the chalkboard in the same way as it was conducted when recording the data.
+
+## Multiplexing
+
+The plugin supports multiplexing via the [`multiplex` plugin](https://github.com/reveal/multiplex) or the [`seminar` plugin](https://github.com/rajgoel/reveal.js-plugins/tree/master/seminar).
+
+## PDF-Export
+
+If the slideshow is opened in [print mode](https://revealjs.com/pdf-export/), the chalkboard drawings in the session storage (see `storage` option - print version must be opened in the same tab or window as the original slideshow) or provided in a file (see `src` option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings on the notes canvas are not included in the PDF-file.
+
+
+## Configuration
+
+The plugin has several configuration options:
+
+- ```boardmarkerWidth```: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
+- ```chalkWidth```: an integer, the drawing width of the chalk; larger values draw thicker lines.
+- ```chalkEffect```: a float in the range ```[0.0, 1.0]```, the intesity of the chalk effect on the chalk board. Full effect (default) ```1.0```, no effect ```0.0```.
+- ```storage```: Optional variable name for session storage of drawings.
+- ```src```: Optional filename for pre-recorded drawings.
+- ```readOnly```: Configuation option allowing to prevent changes to existing drawings. If set to ```true``` no changes can be made, if set to false ```false``` changes can be made, if unset or set to ```undefined``` no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the 'DEL' key (i.e. by using the ```RevealChalkboard.clear()``` function).
+- ```transition```: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
+- ```theme```: Can be set to either ```"chalkboard"``` or ```"whiteboard"```.
+
+The following configuration options allow to change the appearance of the notes canvas and the chalkboard. All of these options require two values, the first gives the value for the notes canvas, the second for the chalkboard.
+
+- ```background```: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
+- ```grid```: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. ```{ color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}```. Alternatively, the grid can be removed by setting the value to ```false```.
+- ```eraser```: An image path and radius for the eraser.
+- ```boardmarkers```: A list of boardmarkers with given color and cursor.
+- ```chalks```: A list of chalks with given color and cursor.
+- ```rememberColor```: Whether to remember the last selected color for the slide canvas or the board.
+
+All of the configurations are optional and the default values shown below are used if the options are not provided.
+
+```javascript
+Reveal.initialize({
+	// ...
+    chalkboard: {
+        boardmarkerWidth: 3,
+        chalkWidth: 7,
+        chalkEffect: 1.0,
+        storage: null,
+        src: null,
+        readOnly: undefined,
+        transition: 800,
+        theme: "chalkboard",
+        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
+        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
+        eraser: { src: path + 'img/sponge.png', radius: 20},
+        boardmarkers : [
+                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
+                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
+                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
+                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
+                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
+                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
+                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
+        ],
+        chalks: [
+                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
+                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
+                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
+                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
+                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
+                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
+                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
+        ]
+    },
+    // ...
+
+});
+```
+
+## Credits
+
+The chalkboard effect is based on [Chalkboard](https://github.com/mmoustafa/Chalkboard) by Mohamed Moustafa.
+
+## License
+
+MIT licensed
+
+Copyright (C) 2023 Asvin Goel

custom_plugins/chalkboard/style.css

@@ -0,0 +1,44 @@
+div.palette, div.boardhandle {
+  position: absolute;
+/*
+  height: 260px;
+  margin: -130px 0 0 0px;
+*/  
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 24px;
+  border-radius: 10px;
+  border-top:    4px solid #222; 
+  border-right:  4px solid #222; 
+  border-bottom: 4px solid #222;
+  background: black;
+  transition: transform 0.3s;
+}
+
+div.palette  {
+  left: -10px;
+  padding-left:10px;
+}
+
+div.boardhandle {
+  right: -10px;
+  padding-right:10px;
+}
+
+div.palette > ul,
+div.boardhandle > ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+div.palette > ul > li,
+div.boardhandle > ul > li {
+  margin: 10px;
+}
+
+@media print {
+	div.palette, div.boardhandle { 
+		display: none!important; 
+	}
+}

index.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-		<title>Sécurité informatique</title>
+		<title>Your presentation title</title>
 
 		<link rel="stylesheet" href="reveal.js/dist/reset.css">
 		<link rel="stylesheet" href="reveal.js/dist/reveal.css">
@@ -12,483 +12,24 @@
 
 		<!-- Theme used for syntax highlighted code -->
 		<link rel="stylesheet" href="reveal.js/plugin/highlight/monokai.css">
+    <!-- Font awesome is required for the chalkboard plugin -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Custom controls plugin is used to for opening and closing annotation modes. -->
+    <script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/plugin.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/customcontrols/style.css">
+    <!-- Chalkboard plugin -->
+    <script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/plugin.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chalkboard/style.css">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-plugins/menu/font-awesome/css/fontawesome.css">
 	</head>
 	<body>
 		<div class="reveal">
 			<div class="slides">
         <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
           <script type="text/template">
-            # Sécurité informatique
-            ### Comprendre les enjeux et déjouer les pièges
-            Ou comment être (un peu) parano peut parfois aider  
-            ![make_logo](images/make_logo.png)<!-- .element height="15%" width="15%"
-            position="absolute" bottom="0" right="0"-->
-            ![make__foundation_logo](images/make_foundation_logo.png)<!-- .element height="15%" width="15%"
-            position="absolute" bottom="0" right="0"-->
-
-            ---
-
-            ## Sommaire
-            <span style="font-size:70%">
-
-            1. Contexte
-            2. Types d'attaque les plus courants
-               * Social Engineering
-               * Exploitation d'absence de chiffrement
-               * Fichier malicieux
-            3. Bonnes pratiques et astuces
-               * Identifiants et MFA
-               * Connection aux services
-               * Protection des données
-               * Sécurité des postes informatiques
-            4. Potentiels impacts
-            5. Ressources
-                * En amont
-                * Après une attaque
-
-            </span>
-
-            ---
-
-            ## Contexte
-
-            --
-
-            * ~ 90 comptes Make.org actifs
-            * Autant d'ordinateurs
-            * ~ 1000 mails reçus/jour
-            * \> 1,2 To de données sur le Drive
-            * Travail en itinérance
-
-            ---
-
-            ## Types d'attaque
-            À quoi vous attendre
-
-            ---
-
-            ### Social Engineering
-            Art de convaincre les personnes de révéler des informations confidentielles sans qu'elles s'en aperçoivent.
-            * Phishing (email)
-            * Vishing (téléphone)
-            * Impersonation (Usurpation d'identité)
-
-            --
-
-            #### Phishing
-            * Email semblant provenir d'une source légitime (banque, institution, partenaire commerciaux...)  
-            * Souvent envoyé à un large panel de potentielles victime (hormis "spear-fishing")  
-            * Peut être **très crédible**
-
-            --
-
-            #### Cas classiques
-            <div class="r-stack">
-              <img class="fragment current-visible" data-fragment-index="0" src="images/phishing_example_0.png" height="600em">
-              <img class="fragment current-visible" data-fragment-index="1" src="images/phishing_example_1.png" height="600em">
-              <img class="fragment current-visible" data-fragment-index="2" src="images/phishing_example_2.png" height="600em">
-              <img class="fragment current-visible" data-fragment-index="3" src="images/phishing_example_3.png" height="600em">
-              <img class="fragment current-visible" data-fragment-index="4" src="images/phishing_example_4.png" height="600em">
-              <img class="fragment current-visible" data-fragment-index="5" src="images/phishing_example_5.png" height="600em">
-            </div> 
-
-            --
-
-            #### Risques
-            * Usurpation d'identité
-            * Accès à des comptes en ligne/informations sensibles
-            * Accès à d'autres comptes via l'exploitation de données sensibles
-            * Transactions banquaires non-sollicités
-            * ...
-
-            --
-
-            #### Exemple de pishing chez Make.org
-            <a href="./html_files/phishing_full_clean.html">Exemple de mail reçu</a> 
-            ##### (clic clic !) 
-
-            --
-
-            * Charte graphique semblable à Facebook
-            * Mail véritablement en provenance de Facebook
-            * Mail de l'utilisateur affiché
-
-            --
-
-            <img src="images/mail_0.png" height="300em"></br>
-            Le lien semble pointer vers Facebook, mais n'est qu'une redirection
-
-            --
-
-            <img src="images/mail_1.png" height="550em"></br>
-            Les ennuis commencent
-
-            --
-
-            <img src="images/mail_2a.png" height="500em"></br>
-            Voyez-vous ce qui pose souci ?
-
-            --
-
-            <img src="images/mail_2ca.png" width="500em" style="float:center;">
-            <img src="images/mail_2cb.png" style="float:center;"></br>
-            Communication en HTTP et non HTTPS -> Communication non-chiffrée
-            ⚠️ Danger ⚠️
-
-            --
-
-            <img src="images/mail_2d.png" height="500em"></br>
-            URL "artisanale", .gd -> Grenade
-
-            --
-
-            Pour être sûr:  
-            <a href="https://www.whois.com/whois/facebook.com">Whois de Facebook</a>  
-            <a href="https://www.whois.com/whois/request-appeal-page.rf.gd">Whois du site</a>
-
-            --
-
-            <img src="images/mail_2e.png" height="500em"></br>
-            URL bidon
-
-            --
-
-            <img src="images/mail_2f.png" height="500em"></br>
-            Changement de langue surprise
-            Affichage de la page "artisanal"
-
-            --
-
-            <img src="images/mail_3.png" height="500em"></br>
-            Mise en page, "Google Traduction", champs demandés... 
-
-            --
-
-            #### Objectif de ce phishing
-            * Obtention des cookies de session
-            * Vol du compte et des potentielles informations banquaires ou confidentielles
-
-            ---
-
-            ### Exploitation d'absence de chiffrement
-            * Le chiffrement assure le transit d'information exploitable seulement par les personnes ayant les clefs de chiffrement  
-            ➡ Vous, les tiers de confiance
-            * Assure l'identité des tiers, cette dernière étant validé par une institution de confiance
-            * Assure que les redirections pointent bien vers des sites légitimes
-
-            --
-
-            #### Cas classiques
-            * Connection en HTTP à des services sensibles
-            * Bornes WiFi public (Fast-food, hôtels...)
-            * Box avec chiffrements/protocoles WiFi faibles (WEP, WPA)
-            * Borne de recharge USB
-            * Acteurs malicieux introduits dans le réseau
-
-            ---
-
-            #### Risques
-            * Usurpation d'identité
-            * Accès à des comptes en ligne/informations sensibles
-            * Accès à d'autres comptes via l'exploitation de données sensibles
-            * Transactions banquaires non-sollicités
-            * ...
-
-            ---
-
-            ### Attaque par fichier malicieux
-            * Peut prendre plusieurs formes: Fichiers PDF, exécutables (.exe), fichiers Office (.doc, .xls...) et plein d'autres
-            * Peut entrainer des dommages graves et visibles (ransomwares) ou plus insidieux et parfois indetectables (Troyens, cryptominers, hijackers, rootkits...)
-
-            --
-
-            #### Cas classiques
-            * L'email d'un contact inconnu (ou pas!) contenant un fichier excel au nom énigmatique
-            * Le site internet louche demandant d'installer un logiciel pour avoir accès à une ressource
-            * Le logiciel piraté provenant d'une source plus que discutable
-            * La clef USB au passé douteux
-            ** Ceci est également applicable à vos smartphones ! **
-
-            --
-
-            ### Risques
-            Large spectre possible:
-            * Vol de données
-            * Modification du comportement de l'ordinateur
-            * Chiffrement de l'ordinateur +/- de l'infrastructure informatique
-            Ordinateur infecté -> potentielle propagation à d'autres postes
-
-            ---
-
-            ## Bonnes pratiques et astuces
-
-            ---
-
-            ### Identifiants et MFA
-
-            --
-
-            Selon vous, quel est le mot de passe le plus sûr ?  
-            ``h7AiIauMj#``  
-            ou  
-            ``franchement j'adore la raclette`` ?
-
-            --
-
-            #### ``h7AiIauMj#``
-            * Court (10 caractères)
-            * Difficile à retenir
-            => ~ 12 jours pour le cracker (source: Bitwarden.com)
-
-            --
-
-            #### ``franchement j'adore la raclette``
-            * Long (30 caractères)
-            * Facile à retenir
-            => Plusieurs siècles pour le cracker (source: Bitwarden.com)
-
-            --
-
-            * Privilégier les mots de passe longs -> invalide les attaques par recherche exhaustive (brute-force)
-            * Éviter les mots, citations, phrases connues -> invalide les attaques par dictionnaire
-            * Éviter les références personnelles (nom du chien, date du petit dernier...) et les patterns basés dessus -> réduis le risque de deciner sont mot de passe
-            * Allonger le mot de passe > complexifier le mot de passe (symboles, chiffres...)
-            * Un mot de passe par accès
-            * Favoriser la MFA et ne pas garder d'historique de SMS si utilisé
-            
-            ---
-
-            ## Connection aux services
-
-            --
-
-            * S'assurer que les connections soient chiffrées (HTTP vs HTTPS)
-            * Éviter les points d'accès publics -> Multiples risques
-            * Si besoin, utiliser un VPN **de confiance**
-
-            --
-
-            <img src="images/mail_2ca.png" width="500em" style="float:center;">
-            <img src="images/https_1.png" width="500em" style="float:center;">
-
-            --
-
-            <img src="images/https_2.png" width="500em" style="float:center;">
-            <img src="images/https_3.png" width="500em" style="float:center;">
-
-            ---
-
-            ## Protection des données
-
-            --
-            
-            ### Qu'est-ce qu'une donnée personnelle ?
-            **Toute information se rapportant à une personne physique identifiée ou identifiable**
-
-            --
-
-            * Vaste spectre de données personnelles exploitables
-            * Réseau sociaux => Recoupement des informations facile
-            * Informations personnelles = Mine d'or => Soyez pingre !
-
-            --
-            
-            Il faut toujours se questionner !
-            * La demande provient-elle d'un tiers de confiance ?
-            * Dans quel but ? À quoi serviront ces informations ?
-            * Le tiers n'a t'il pas déjà celles-ci ?
-            * La demande fait-elle suite à une démarche de ma part ?
-            * Est-ce une démarche habituelle ?
-            * Par quel moyen il m'est demandé de fournir les informations ?
-            * Puis-je vérifier le bien fondé de la démarche ?
-            * Vers quoi dirigent les liens qui me sont présentés ?
-
-            --
-
-            Soyez vigilants
-            * Assurez vous que la demande vous est bien destinée
-            * Identifiez de manière sûre l'identité de l'interlocuteur -> adresse mail, site web peuvent être traffiqués
-            * Méfiez-vous des interlocuteurs inconnus
-            * Prêtez attention au niveau de language
-            * Attention au caractère urgent des demandes
-            * Sur Internet, si c'est trop beau pour être vrai, c'est que ça ne l'est pas !
-
-            ---
-
-            ## Sécurité des postes informatiques
-
-            --
-
-            Si un acteur malicieux à accès à votre machine, que pensez-vous qu'il pourrait récupérer ?
-
-            --
-
-            Supposons que vous n'ayez qu'un mot de passe sur votre session, sont récupérables:
-
-            * Vos documents (et même ceux supprimés !)
-            * Votre historique de navigation
-            * Vos mots de passe enregistrés
-            * Une multitude d'informations exploitables
-
-            --
-
-            #### Pour réduire les risques
-            * Mettez à jour votre système d'exploitation
-            * Prenez garde aux sites que vous visitez et au logiciels que vous utilisez
-            * Sous Windows, l'utilisation d'un antivirus est fortement recommandé
-            * Protégez votre session utilisateur avec une authentification forte
-            * Chiffrez votre disque dur
-            * Activez la fermeture de session automatique
-            * ~~N'utilisez pas Windows~~
-
-            ---
-
-            ## Potentiels impacts
-
-            --
-
-            ### Pour vous
-            * Vol de compte
-            * Fraude banquaire
-            * Chantage
-            * Achats frauduleux
-            * Spam
-            * Surveillance
-            * ...
-
-            --
-
-            ### Pour l'entreprise
-            Même risques, mais en sus:
-            * Mise en péril des moyens de communications
-            * Mise en péril de l'infrastructure informatique
-            * Révélation de secrets commerciaux
-            **=> Peut mettre en péril la survie d'une entreprise**
-
-            ---
-
-            ## Ressources
-
-            ---
-
-            ### En amont
-
-            --
-            
-            #### Vérifier qu'un site est légitime 
-            * "Who is"
-                * https://www.whois.com/whois/
-                * https://whois.domaintools.com/
-            * "Website security check"
-                * https://www.ssltrust.com.au/ssl-tools/website-security-check
-                * https://transparencyreport.google.com/safe-browsing
-            * Moteurs de recherche -> Ne pas se fier uniquement aux avis utilisateurs
-            * Certificats SSL (HTTPS)
-            * Alertes navigateur
-
-            --
-
-            #### Protéger mon ordinateur
-            * Antivirus
-                * Windows Defender
-                * Éviter les antivirus gratuits
-            * Comparatifs et test d'antivirus
-                * https://www.av-comparatives.org/
-                * https://www.av-test.org/en/
-            * Scan en ligne
-                * https://www.virustotal.com/gui/home/upload
-            * Utilisez un firewall ([Configuration du firewall Windows](https://learn.microsoft.com/en-us/windows/security/threat-protection/windows-firewall/best-practices-configuring))
-            ** Veillez à n'avoir qu'un seul antivirus installé **
-            * Mettez à jour votre système d'exploitation et vos logiciels
-
-            --
-
-            #### Chiffrer mes données
-            * Chiffrement des mails
-                * https://mailvelope.com/en
-                * [GPG4Win](https://www.gpg4win.org/)
-            * Système de fichiers
-                * [Bitlocker](https://support.microsoft.com/en-us/windows/turn-on-device-encryption-0c453637-bc88-5f74-5105-741561aae838)
-                * [Veracrypt](https://www.veracrypt.fr/en/Downloads.html)
-
-            --
-
-            #### Gérer des mots de passe forts
-            * Gestionnaires de mot de passe en ligne
-               * [Bitwarden](https://bitwarden.com/products/personal/)
-               * [1password](https://1password.com/fr/)
-            * Gestionnaires de mot de passe hors-ligne
-               * [KeepassXC](https://keepassxc.org/)
-               * [Keeweb](https://keeweb.info/)
-
-            --
-
-            #### Sauvegarder mes données
-            Pensez à sauvegarder vos données critiques !
-            * Stockage en ligne (Google Drive, DropBox, OneDrive et consorts)
-            * Stocker vos données sur d'autres supports (Disque dur, clef USB...) en prenant garde aux limitations
-            Astuce: Vous pouvez vous envoyer des documents sur votre propre boîte mail :)
-
-            --
-
-            #### Se renseigner
-            * https://www.cnil.fr/fr/cybersecurite
-            * https://www.ssi.gouv.fr/
-                * [Les dix règles d'or préventives](https://www.ssi.gouv.fr/particulier/precautions-elementaires/dix-regles-de-base/)
-                * [5 reflexes à avoir lors de la réception de courriel](https://www.ssi.gouv.fr/particulier/precautions-elementaires/5-reflexes-a-avoir-lors-de-la-reception-dun-courriel/)
-                * [Bonnes pratiques de navigation sur Internet](https://www.ssi.gouv.fr/particulier/precautions-elementaires/bonnes-pratiques-de-navigation-sur-linternet/)
-                * [La sécurité pour les TPE/PME](https://www.ssi.gouv.fr/guide/la-cybersecurite-pour-les-tpepme-en-treize-questions/)
-                * [Infographie des 12 bonnes pratiques](https://www.ssi.gouv.fr/uploads/2016/06/bonnes_pratiques_secinfo_poster_a1_anssi.pdf)
-                * [Rapport de l'ENISA](https://www.enisa.europa.eu/publications/enisa-threat-landscape-2022/@@download/fullReport)
-            
-            --
-
-            #### Mince, c'est pas évident quand même...
-            N'ayez crainte, l'équipe SRE est là !
-            Au moindre doute, à la moindre interrogation vous pouvez vous tourner vers l'équipe SRE/IT
-            **Nous sommes également là pour vous accompagner sur ces sujets**  
-            (Et on le fera avec plaisir !)  
-            Et pour les pragmatiques, il est mieux d'avoir une fausse alerte que de tout réparer :)
-            
-            --
-
-            #### Dans une coquille de noix
-            * Toutes les protections sont utiles **mais contournables** si vous ne faites pas attention  
-            * Le risque zéro n'existe pas  
-            * C'est vos précautions qui vous protégerons le plus
-            Vous êtes acteur de votre sécurité informatique et de celle des autres...  
-            Et l'inverse est valable :)  
-            **Et n'oubliez pas que vos gentils informaticiens sont là pour vous accompagner !**
-
-            ---
-
-            ## Après une attaque...
-            C'est arrivé à tout le monde, ne vous en voulez pas trop.  
-            Mais il faut maintenant réagir !
-
-            --
-
-            ### Alerter et vérifier
-            Contactez **sans délai** l'équipe SRE et ensuite fournissez-nous le plus d'informations possible: 
-            * Ce que vous faisiez, ce qui vous fait suspecter une attaque
-            * Les symptômes 
-            * Des captures d'écran, copie de mail...
-            * Ce qui a été fait entre la suspicion d'attaque et le moment où nous avons étés alertés
-            Et ce, même en cas de doute !  
-            Ces informations nous aiderons à établir un diagnostic et à réagir en conséquence
-
-            --
-
-            ### Réagir
-            Dans le cas d'une attaque par phishing:  
-            * Cessez toute communication avec les tiers suspectés
-            * Changez immédiatement les mots de passe des sites concernés, ne cédez pas aux potentiels chantages
-            * Déconnectez-vous des sessions aux services concernés
-            Dans le cas d'une attaque par virus informatique:
-            * Déconnectez immédiatement votre appareil d'internet ou d'un quelconque réseau
-            ** Et tout particulièrement lors d'une attaque par ransomware ** 
-            * Généralement, n'effectuez plus de manipulation sur la machine à moins d'y être invité par l'équipe SRE
-
+            Your presentation here
           </script>
         </section>
 			</div>
@@ -516,6 +57,18 @@
         width: 1280,
         heigth: 960,
         margin: 0.04,
+        customcontrols: {
+          controls: [
+            { icon: '<i class="fa fa-pen-square"></i>',
+              title: 'Toggle chalkboard (B)',
+              action: 'RevealChalkboard.toggleChalkboard();'
+            },
+            { icon: '<i class="fa fa-pen"></i>',
+              title: 'Toggle notes canvas (C)',
+              action: 'RevealChalkboard.toggleNotesCanvas();'
+            }
+          ]
+        },
 
         // mermaid initialize config
         mermaid: {
@@ -525,7 +78,7 @@
         },
 
 				// Learn about reveal.js/plugins: https://revealjs.com/reveal.js/plugins/
-				plugins: [ RevealMarkdown, RevealMermaid, RevealHighlight, RevealNotes, RevealZoom, PdfExport ],
+				plugins: [ RevealMarkdown, RevealMermaid, RevealHighlight, RevealNotes, RevealZoom, PdfExport, RevealChalkboard, RevealCustomControls],
 			});
 		</script>
 	</body>