Zone infra

Documentation bimodale

Bienvenue

Ceci est une documentation bimodale
(prose + diapositives)

Qu’est-ce que c’est?

La publication bimodale (prose + diapositives) permet de produire un diaporama en suivant la logique du contenu principal, plutôt que le découpage inverse (centré sur les diapositives).

Diapositives Présenter ↗

Le diaporama utilise la bibliothèque Reveal.js (cliquez dans le cadre, puis appuyez sur la touche f pour lancer le mode plein écran).

Typographie

Typographie

Échelle et caractères

Les caractères du corps comme des en-têtes sont composés en Overused Grotesk, une interprétation contemporaine des linéales du 20e siècle. Ses proportions spatieuses lui confèrent une bonne lisibilité. La graisse de base choisie pour le corps est est moyenne (500) et les caractères accentués sont en extra gras (800).

Typographie : Overused Grotesk

Les caractères du corps comme des en-têtes sont composés en Overused Grotesk, une interprétation contemporaine des linéales du 20e siècle. Ses proportions spatieuses lui confèrent une bonne lisibilité. La graisse de base choisie pour le corps est est moyenne (500) et les caractères accentués sont en extra gras (800).

En-tête de niveau 1

En-tête de niveau 2

En-tête de niveau 3

En-tête de niveau 1

En-tête de niveau 2

En-tête de niveau 3

En-tête de niveau 4

En-tête de niveau 5
En-tête de niveau 6

Un paragraphe. La taille de base pour la prose est de 1.25rem (soit 20px avec les préférences par défaut des navigateurs).

Paragraphe avec du gras et de l’italique. Il pourrait y avoir du texte en surbrillance, quelques exposantsx,y et même… du code. Voici une ancre qui pointe vers un site externe.

Une citation longue, automatiquement mise en retrait.

Deux types de listes :

Liste numérotée

  1. une
  2. liste
  3. numérotée
    1. deuxième niveau

Liste à puces

  • une
  • liste
  • à puces
    • sous-liste
  • une
  • liste
    (blah)
    (bla)
  • non ordonnée
    • et une autre
      • imbriquée
Une règle horizontale.

Couleurs

Couleurs

Palette proposée

Le texte est composé en caractères noirs sur fond blanc, pour un contraste optimal.

Une palette réduite de couleurs vibrantes est choisie pour rendre la communication visuelle attrayante et ludique. La triade bleu/jaune/rouge s’appuie sur les couleurs de base utilisées dans le mouvement du Bauhaus. Elle évoque la simplicité et permet de s’adresser à un large public.

La cité radieuse (Le Corbusier, 1952)
La cité radieuse de Marseille (Le Corbusier, 1952).

Le nuancier de bleu royal peut d’ailleurs être utilisé pour rappeler les blueprints des dessins d’architectes.

Un vert malachite, utilisé parcimonieusement, peut évoquer une pointe de geekerie ou la culture numérique en général. Le violet améthyste aux tonalités adoucies constitue une valeur refuge pour des contenus plus familiers et consensuels. Enfin, un nuancier de gris d’Athènes permet de varier les accentuations entre le blanc et le noir.

Culture numérique
Culture numérique (Dominique Cardon, 2019).
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo
Une autre diapo

Bleu royal

50
100
200
300
400
500
600
700
800
900
950

Cyber jaune

50
100
200
300
400
500
600
700
800
900
950

Ocre rouge

50
100
200
300
400
500
600
700
800
900
950

Vert malachite

50
100
200
300
400
500
600
700
800
900
950

Violet améthyste

50
100
200
300
400
500
600
700
800
900
950

Gris athénien

50
100
200
300
400
500
600
700
800
900
950

Syntaxe

Pour ajouter des diapositives : Par défaut, rien de la prose ne figure dans le diaporama. Pour inclure du contenu sous forme de diapositive, il s’agit de l’entourer d’un élément avec l’attribut data-dia :

<div data-dia="">
  ... contenu HTML ...
</div>

Diapositives seulement : Si un contenu doit se retrouver uniquement dans le diaporama (et donc ne pas apparaître dans la prose), on peut spécifier la valeur seulement à l’attribut :

<div data-dia="seulement">
  Je n’apparaîtrai que dans les diapositives!
</div>

Éléments inlines : Il n’est pas nécessaire d’entourer un bloc au complet dans un <div>; on peut aussi utiliser des passages inlines, comme <span data-dia="">, ou n’importe quel élément HTML : l’intérieur de l’élément sera copié intégralement.

<p>
  Lorem ipsum dolor sit amet.
  <span data-dia="seulement">Ce texte
  sera rendu dans une diapositive.</span>
  Himenaeos nullam fringilla mi class sed
  non nam integer et scelerisque cum.
</p>

Fonctionnalités Reveal.js : Pour bénéficier des fonctionnalités de balisage de Reveal.js (ex. pour modifier la couleur ou l’image de fond, etc.), on peut baliser le même élément avec l’attribut data-state="ma-classe", ou encore data-background-color="var(--bleu-royal-500)".

Fini.

Zone extra