présentation: réalise le support séance d'équipe

- Installe les dépendances `reveal.js`.
- Mets en place la structure de la présentation.
- Ajoute un thème pour l'UNIGE en adaptant le thème *white*.
- Agrandit la taille de la police pour la numérotation des slides.
- Ajoute le logo de l'UNIGE (pour fond rose et pour fond clair).
- Place le logo dans un footer.
- Simplifie des formulations.
- Intègre quelques *fragments*.
- Ajoute la date dans une balise `time` et l'attribut `datetime`.
- Ajoute de l'URL de la présentation sur la dernière slide.

Co-Authored-by: iGor milhit <igor@milhit.ch>

README.md

@@ -1,3 +1,24 @@
+# [Copier-coller et signets de recherche][title]
+
+Brève présentation lors d'une séance d'équipe de la [bibliothèque du CMU][cmu]
+à propos des gestionnaires d'historique du presse-papier et des recherches
+appelées directement avec un mot clé.
+
+Le but est de partager des petites techniques qui peuvent faciliter la vie au
+quotidien.
+
+La branche `pages` correspond à la publication de la présentation en ligne,
+accessible à l'URL suivante :
+
+<https://ignami.codeberg.page/copy-paste-bookmarks/>
+
+Ci-dessous, on trouve le `README` complet de l'outil utilisé pour le support de
+présentation, à savoir `revealjs`.
+
+[title]: https://codeberg.org/ignami/copy-paste-bookmarks
+[cmu]: https://www.unige.ch/biblio/fr/infos/sites/cmu/
+
+
 <p align="center">
   <a href="https://revealjs.com">
   <img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text-sticker.png" alt="reveal.js" width="500">

dist/theme/unige.css

@@ -0,0 +1,394 @@
+/**
+ * White theme for reveal.js. This is the opposite of the 'black' theme.
+ *
+ * By Hakim El Hattab, http://hakim.se
+ */
+@import url(./fonts/source-sans-pro/source-sans-pro.css);
+section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
+  color: #fff;
+}
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+:root {
+  --r-background-color: #fff;
+  --r-background-color-inversed: #d80669;
+  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-main-font-size: 42px;
+  --r-main-color: #000;
+  --r-main-color-inversed: #fff;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-heading-color: #d80669;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: 600;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 2.5em;
+  --r-heading2-size: 1.6em;
+  --r-heading3-size: 1.3em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #2a76dd;
+  --r-link-color-dark: #1a53a1;
+  --r-link-color-hover: #6ca0e8;
+  --r-selection-background-color: #d80669;
+  --r-selection-color: #fff;
+}
+
+.reveal-viewport {
+  background: #fff;
+  background-color: var(--r-background-color);
+}
+
+.reveal {
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
+  font-weight: normal;
+  color: var(--r-main-color);
+}
+
+.reveal ::selection {
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
+
+.reveal ::-moz-selection {
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
+
+.reveal .slides section,
+.reveal .slides section > section {
+  line-height: 1.3;
+  font-weight: inherit;
+}
+
+.reveal .slide-number {
+  font-size: 20px;
+  bottom: unset;
+  top: .5em;
+  background-color: unset;
+  color: var(--r-link-color);
+}
+
+/*********************************************
+ * Logo (in a footer)
+ *********************************************/
+
+.footer {
+  position: absolute;
+  bottom: 0;
+}
+
+.logo {
+  max-width: 150px;
+  height: 5vh;
+  padding-left: .5em;
+}
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
+
+.reveal h1 {
+  font-size: var(--r-heading1-size);
+}
+
+.reveal h2 {
+  font-size: var(--r-heading2-size);
+}
+
+.reveal h3 {
+  font-size: var(--r-heading3-size);
+}
+
+.reveal h4 {
+  font-size: var(--r-heading4-size);
+}
+
+.reveal h1 {
+  text-shadow: var(--r-heading1-text-shadow);
+}
+
+/*********************************************
+ * OTHER
+ *********************************************/
+.reveal p {
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
+
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0;
+}
+
+/* Ensure certain elements are never larger than the slide itself */
+.reveal img,
+.reveal video,
+.reveal iframe {
+  max-width: 95%;
+  max-height: 95%;
+}
+
+.reveal strong,
+.reveal b {
+  font-weight: bold;
+}
+
+.reveal em {
+  font-style: italic;
+}
+
+.reveal ol,
+.reveal dl,
+.reveal ul {
+  display: inline-block;
+  text-align: left;
+  margin: 0 0 0 1em;
+}
+
+.reveal ol {
+  list-style-type: decimal;
+}
+
+.reveal ul {
+  list-style-type: disc;
+}
+
+.reveal ul ul {
+  list-style-type: square;
+}
+
+.reveal ul ul ul {
+  list-style-type: circle;
+}
+
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
+  display: block;
+  margin-left: 40px;
+}
+
+.reveal dt {
+  font-weight: bold;
+}
+
+.reveal dd {
+  margin-left: 40px;
+}
+
+.reveal blockquote {
+  display: block;
+  position: relative;
+  width: 70%;
+  margin: var(--r-block-margin) auto;
+  padding: 5px;
+  font-style: italic;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
+  display: inline-block;
+}
+
+.reveal q {
+  font-style: italic;
+}
+
+.reveal pre {
+  display: block;
+  position: relative;
+  width: 90%;
+  margin: var(--r-block-margin) auto;
+  text-align: left;
+  font-size: 0.55em;
+  font-family: var(--r-code-font);
+  line-height: 1.2em;
+  word-wrap: break-word;
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
+
+.reveal code {
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
+
+code {
+  background-color: var(--r-background-color-inversed);
+  color: var(--r-main-color-inversed);
+  border-radius: .2em;
+  padding-left: .2em;
+  padding-right: .2em;
+}
+
+.reveal pre code {
+  display: block;
+  padding: 5px;
+  overflow: auto;
+  max-height: 400px;
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
+
+.reveal table {
+  margin: auto;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.reveal table th {
+  font-weight: bold;
+}
+
+.reveal table th,
+.reveal table td {
+  text-align: left;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  border-bottom: 1px solid;
+}
+
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
+
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
+
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.reveal sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+.reveal sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+.reveal small {
+  display: inline-block;
+  font-size: 0.6em;
+  line-height: 1.2em;
+  vertical-align: top;
+}
+
+.reveal small * {
+  vertical-align: top;
+}
+
+.reveal img {
+  margin: var(--r-block-margin) 0;
+}
+
+.text-left {
+  text-align: left;
+}
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a {
+  color: var(--r-link-color);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.reveal a:hover {
+  color: var(--r-link-color-hover);
+  text-shadow: none;
+  border: none;
+}
+
+.reveal .roll span:after {
+  color: #fff;
+  background: var(--r-link-color-dark);
+}
+
+/*********************************************
+ * Frame helper
+ *********************************************/
+.reveal .r-frame {
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
+
+.reveal a .r-frame {
+  transition: all 0.15s linear;
+}
+
+.reveal a:hover .r-frame {
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls {
+  color: var(--r-link-color);
+}
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--r-link-color);
+}
+
+/*********************************************
+ * PRINT BACKGROUND
+ *********************************************/
+@media print {
+  .backgrounds {
+    background-color: var(--r-background-color);
+  }
+}

index.html

@@ -1,23 +1,236 @@
 <!doctype html>
-<html>
+<html lang="fr">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-		<title>reveal.js</title>
+		<title>Copier-coller et signets de recherche</title>
 
 		<link rel="stylesheet" href="dist/reset.css">
 		<link rel="stylesheet" href="dist/reveal.css">
-		<link rel="stylesheet" href="dist/theme/black.css">
+		<link rel="stylesheet" href="dist/theme/unige.css">
 
 		<!-- Theme used for syntax highlighted code -->
 		<link rel="stylesheet" href="plugin/highlight/monokai.css">
 	</head>
 	<body>
 		<div class="reveal">
+
+			<!-- logo de l'université -->
+			<footer class="footer">
+				<img class="logo" src="img/logo-unige-rose.svg" />
+			</footer>
+
 			<div class="slides">
-				<section>Slide 1</section>
+
-				<section>Slide 2</section>
+				<!-- Section 1 : présentation -->
+				<section>
+					<!-- 1 Titre -->
+					<section>
+						<h1>Copier-coller et signets de recherche</h1>
+						<p>
+							<small>
+								Séance d'équipe &mdash;
+								<time datetime="2022-09-01">
+									2022-09-01
+								</time> &mdash;
+								<a href="https://codeberg.org/ignami/copy-paste-bookmarks"
+									 title="Source du support de présentation"
+									 hreflang="fr">
+									sources
+								</a>
+							</small></p>
+					</section>
+					<!-- 2 Contexte -->
+					<section>
+						<h2>Contexte</h2>
+						<ul>
+							<li>Partage de techniques</li>
+							<li>Court et léger</li>
+						</ul>
+					</section>
+					<!-- 3 Plan -->
+					<section>
+						<h2>Plan</h2>
+						<ol>
+							<li>Gestionnaires d'historique de presse-papier</li>
+							<li>Lancer des recherches avec des signets</li>
+						</ol>
+					</section>
+				</section>
+
+				<!-- Section 2 : presse-papier -->
+				<section>
+					<!-- 4 Historique -->
+					<section>
+						<h2>Historique de presse-papiers</h2>
+						<ul>
+							<li>Fonctionnalité de base</li>
+							<li>Sur la plupart des systèmes d'exploitation</li>
+							<li class="fragment" data-fragment-index="0">
+								Permet de gagner du temps
+							</li>
+							<li class="fragment" data-fragment-index="0">
+								Peut améliorer confort
+							</li>
+						</ul>
+					</section>
+					<!-- 5 Activer dans Windows -->
+					<section>
+						<h2>Paramétrer Windows</h2>
+						<ul>
+							<li><em>Paramètres / Système / Presse-papiers</em></li>
+							<li>Ou <code>&lsaquo;windows&rsaquo;+"press…"</code></li>
+							<li>Et activer l'historique du presse-papiers</li>
+						</ul>
+					</section>
+					<!-- 6 Fonctionnement -->
+					<section>
+						<h2>Copier et sélectionner</h2>
+						<ul>
+							<li><code>ctrl+c</code></li>
+							<li><code>&lsaquo;windows&rsaquo;+v</code>
+								et sélectionner avec la souris ou les → ↓ ↑ ← 
+							</li>
+							<li>
+								Menu <code>…</code> pour : épingler, effacer, tout effacer
+							</li>
+						</ul>
+					</section>
+					<!-- 7 CopyQ -->
+					<section>
+						<h2>Application dédiée</h2>
+						<ul>
+							<li>La fonction native suffisante</li>
+							<li class="fragment" data-fragment-index="0">
+								Mais a des limites :
+							</li>
+							<ul class="fragment" data-fragment-index="0">
+								<li>
+									Taille de l'historique
+								</li>
+								<li>
+									Édition, étiquettes, notes, recherche…
+								</li>
+							</ul>
+							</li>
+					</section>
+					<!-- 8 CopyQ -->
+					<section>
+						<h2>Application dédiée : CopyQ</h2>
+						<p class="text-left"><em>CopyQ</em> n'est qu'un des
+							utilitaires <em>libres</em> pour Windows (et Linux et Mac OS)
+							parmi d'autres.</p>
+						<ul class="fragment">
+							<li>Site officiel :
+								<a href="https://hluk.github.io/CopyQ/"
+									 title="site officiel de CopyQ"
+                   hreflang="en"
+                   lang="en">hluk.github.io/CopyQ</a>
+							</li>
+							<li>Installer :
+								<ol>
+									<li><a href="https://github.com/hluk/CopyQ/releases/latest"
+								         title="Accès à la dernière version publiée sur Github"
+				                 hreflang="en"
+                         lang="en">github.com/hluk/CopyQ/releases/latest</a>
+									</li>
+									<li>Télécharger le <code>copyq-x.x.x-setup.exe</code></li>
+								</ol>
+							</li>
+						</ul>
+					</section>
+					<!-- 9 CopyQ : paramétrage de base -->
+					<section>
+						<h2>CopyQ : paramétrage de base</h2>
+						<ul>
+							<li><em>Fichier / Préférences :</em></li>
+							<ul>
+								<li><em>Historique</em> : Configurer la taille de l'historique</li>
+								<li><em>Raccourcis</em> : Ajouter un raccourci dans l'onglet
+									<em>Global</em> pour <em>Afficher / masquer la fenêtre
+										principale</em>
+								</li>
+							</ul>
+						</ul>
+					</section>
+				</section>
+
+				<!-- Section 3 : signets pour la recherche -->
+				<section>
+					<!-- 10 Des signets avec mots-clé pour lancer des recherches -->
+					<section>
+						<h2>Accélérer les recherches</h2>
+						<ul>
+							<li>Grâce à la barre d'adresse</li>
+							<li>Des signets</li>
+							<li>Et des mots-clés</li>
+							<li class="fragment">Raccourci pour la barre d'adresse ?</li>
+							<li class="fragment">
+								<code>ctrl+l</code> ou <code>alt+d</code>
+							</li>
+						</ul>
+					</section>
+					<!-- 11 Les moteurs de recherche -->
+					<section>
+						<h2>Les moteurs de recherche</h2>
+						<ul>
+							<li><em>Paramètres / Recherche / Raccourcis de recherche</em></li>
+							<li>Liste d'outils avec des mots-clés</li>
+							<li>Modifier un mot-clé existant</li>
+						</ul>
+					</section>	
+					<!-- 12 Ajouter un mot-clé pour une recherche -->
+					<section>
+						<h2>Recherche avec mot-clé</h2>
+						<p>À l'aide de l'interface :</p>
+						<ul>
+							<li>Clic droit dans un champ de recherche</li>
+							<li><em>Ajouter un mot clé pour cette recherche…</em></li>
+						</ul>
+					</section>	
+					<!-- 13 Ajouter un mot-clé pour une recherche manuellement -->
+					<section>
+						<h2>Recherche avec mot-clé</h2>
+						<p>Manuellement, si :</p>
+						<ul>
+							<li>Le résultat n'est pas satisfaisant</li>
+							<li>La fonctionnalité n'est pas disponible</li>
+						</ul>
+					</section>	
+					<!-- 14 Ajouter un mot-clé pour une recherche manuellement -->
+					<section>
+						<h2>Recherche avec mot-clé, manuellement</h2>
+						<ol>
+							<li>Lancer une recherche et copier l'URL</li>
+							<li>Créer un bookmark avec cette URL</li>
+							<li>Observer l'URL de la requête</li>
+							<li>Changer le contenu de la requête par <code>%s</code></li>
+							<li>Attribuer un mot-clé</li>
+						</ol>
+					</section>
+					<!-- 15 Avantages des signets sur les moteurs -->
+					<section>
+						<h2>Avantages des signets sur les moteurs</h2>
+						<ul>
+							<li>Synchronisés avec Firefox Sync</li>
+							<li>Fonctionnent même si le champ n'est pas reconnu</li>
+							<li>Peuvent être paramétrés finement</li>
+						</ul>
+					</section>
+				</section>
+
+				<!-- section 4 : merci -->
+				<section>
+					<h2 class="r-fit-text">MERCI</h2>
+					<p>Pour votre attention</p>
+					<p><a href="https://ignami.codeberg.page/copy-paste-bookmarks"
+								title="URL de la présentation"
+								hreflang="fr">
+							ignami.codeberg.page/copy-paste-bookmarks</a>
+					</p>
+				</section>
+
 		  </div>
 	  </div>
 
@@ -25,15 +238,17 @@
 		<script src="plugin/notes/notes.js"></script>
 		<script src="plugin/markdown/markdown.js"></script>
 		<script src="plugin/highlight/highlight.js"></script>
+		<script src="plugin/zoom/zoom.js"></script>
 		<script>
 			// More info about initialization & config:
 			// - https://revealjs.com/initialization/
 			// - https://revealjs.com/config/
 			Reveal.initialize({
 				hash: true,
+				slideNumber: 'c/t',
 
 				// Learn about plugins: https://revealjs.com/plugins/
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, ]
 			});
 		</script>
 	</body>

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "reveal.js",
       "version": "4.3.1",
       "license": "MIT",
       "devDependencies": {