Codeurs, voici un outil de présentation JavaScript que vous allez adorer

Une de mes tâches à mon travail est de développer et maintenir des présentations techniques. Dans le passé, j'ai stocké ces présentations sur Google Drive au format Keynote d'Apple. Keynote, comme de nombreuses applications de la suite bureautique, stocke ses fichiers sous forme de gros blobs binaires. Lorsque plusieurs personnes modifient une présentation et tentent de la mettre à jour, vous rencontrez des problèmes. Les gens se cognent en silence les uns aux autres.

Cette gêne n'est pas propre à Keynote. PowerPoint et d'autres formats souffrent du même problème. Bien que PowerPoint ait théoriquement un fichier XML, il est enveloppé dans un fichier Zip, il n'y a donc aucun moyen pratique de fusionner les modifications au niveau du fichier.

Un autre problème avec Keynote est que, même s'il existe des masques de diapositives, les éléments qui sont collés dans une diapositive doivent être soigneusement formatés. WYSIWIG est génial et horrible en même temps. Les éléments qui sont collés dans une diapositive doivent être formatés avec amour. Cela signifie généralement que même si le maître est cohérent, le contenu diffère souvent de format: l'espacement est un peu décalé, les choix de polices ne correspondent pas à la marque et les couleurs deviennent sauvages.

Dans un monde idéal, vous stockeriez des présentations sur GitHub exactement comme du code et rédigeriez des présentations dans un format simplifié comme Markdown sans avoir à connaître le style. Le gars ou la fille de l'interface utilisateur / de la marque pourrait faire toutes les «jolies choses» à l'avant en CSS pendant que vous parlez philosophique dans votre prose à puces.

C'est exactement ce que vous permet de faire l'outil de diaporama open source Remark.js. 

Des présentations techniques remarquables

Avec Remark.js, vous avez un fichier HTML et le nombre de fichiers CSS, mais votre présentation est séparée dans une saveur de Markdown. Vous pouvez tout stocker sur GitHub. Il existe même un mode présentateur pour vous permettre de voir vos notes pendant que votre public regarde vos visuels brillants.

Comme son nom l'indique, Remark.js est une bibliothèque JavaScript. Comme toute bibliothèque JavaScript, il existe environ 50 implémentations alternatives. Le plus impressionnant visuellement pour moi est Reveal.js.

Alors que Remark.js vous permet d'écrire entièrement dans Markdown avec des pinceaux de HTML ou d'extensions, Reveal.js vous permet d'apprendre le HTML. Je dis que je connais le HTML sur mon CV depuis les années 90, mais c'est exactement comme si je sais utiliser un pinceau: je fais des choses horribles avec les deux. C'est pourquoi je préfère utiliser Remark.js.

Voici le Markdown et le texte de la diapositive pour une diapositive réelle de l'une de mes présentations:

—-

class: left, top

# Fusion Concepts: Collection

* Contains documents

* Associated with actual indexed data and schema

* Associated with a named configuration in Zookeeper

* Logical index that can be spread across multiple servers

* Routing strategy that defines how documents get assigned to shards replica placement strategy that defines how many copies to keep of each document in the collections

* A collection as it exists on an instance of Solr is called a “Core”

???

Script: In short a collection is a logical index that is tied to a whole lot of configuration and process management in the cluster, including how it is configured, replicated, and routed.

—-

Voici à quoi cela ressemble sur mon téléphone (que je peux d'ailleurs faire avec Chromecast):

Andrew C. Oliver

Voici le mode présentateur! Je peux configurer mes diapositives, pour pouvoir lire mon écran comme un prompteur (je ne le fais pas parce que cela m'ennuierait de le faire):

Andrew C. Oliver

Lorsque vous clonez une présentation, les fenêtres du navigateur sont synchronisées même si vous passez en mode présentateur sur l'une d'entre elles. Votre public voit la vue dans la première capture d'écran. Vous voyez la vue dans le second.

Les mauvaises choses

Remark.js est loin d'être parfait. C'est génial pour les techniciens qui font des présentations techniques, mais je ne soumettrais pas l'équipe commerciale à cela. Si vous avez un compte GitHub, vous êtes probablement plus à l'aise avec Markdown que PowerPoint ou l'éditeur WYSIWYG inconstant de Keynote. Si vous lisez volontairement votre e-mail dans Outlook, vous ne l'aimerez probablement pas.

Pour l'utiliser, vous avez besoin d'un serveur Web local comme Python SimpleHTTPServer. Je recommande également d'utiliser Chrome. Firefox s'est désynchronisé si je cliquais. La vue Présentateur est utile, mais il n'y a pas de vue miniature pour les personnes qui vont souvent entre les diapositives.

Si vous organisez vos présentations dans des fichiers séparés, vous devez reclouer et revenir en mode présentation pour chacun d'eux. Les images et les diapositives de titre peuvent nécessiter des ajustements CSS pour bien fonctionner. Tout code auquel vous n'échappez pas avec des backtics sera mutilé (en particulier les regex). Vous devez également modifier le CSS pour que l'impression en PDF s'aligne correctement.

Une fois que vous avez compris et que votre CSS est terminé, l'effort comparatif pour créer «une autre» présentation dans Remark.J's / Markdown est inférieur à celui de PowerPoint ou Keynote. La gestion des versions dans GitHub est nettement meilleure, et savoir que je peux présenter depuis mon téléphone ou ma tablette me rend heureux. La prochaine fois que vous organisez une conférence et réalisez que vos documents sont tous revenus aux versions précédentes, pensez peut-être à Remark.js.