igor
/
copy-paste-bookmarks
mirror of https://codeberg.org/ignami/copy-paste-bookmarks
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
edit
iGor milhit 2022-08-23 09:23:52 +02:00
parent b23d15c430
commit 6caa28ac93
7 changed files with 1074 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -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">

394
dist/theme/unige.css vendored 100644
View File

@ -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);
}
}

225
img/logo-unige-rose.svg 100644
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
img/logo-unige.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

210
img/logo-unige.svg 100644
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

231
index.html
View File

@ -1,39 +1,254 @@
<!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>
</div>
</div>
<!-- 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>
<script src="dist/reveal.js"></script>
<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>

1
package-lock.json generated
View File

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