Codierer, hier ist ein JavaScript-Präsentationstool, das Sie lieben werden

Eine meiner Aufgaben in meinem Job ist es, technische Präsentationen zu entwickeln und zu pflegen. In der Vergangenheit habe ich diese Präsentationen auf Google Drive im Keynote-Format von Apple gespeichert. Wie bei vielen Office Suite-Anwendungen speichert Keynote seine Dateien als große, fette binäre Blobs. Wenn mehrere Personen eine Präsentation ändern und versuchen, sie zu aktualisieren, treten Probleme auf. Die Leute verprügeln stillschweigend die Veränderungen des anderen.

Dieser Ärger betrifft nicht nur Keynote. PowerPoint und andere Formate haben das gleiche Problem. Während PowerPoint theoretisch eine XML-basierte Datei hat, ist diese in eine Zip-Datei eingeschlossen, sodass es keine praktische Möglichkeit gibt, Änderungen auf Dateiebene zusammenzuführen.

Ein weiteres Problem mit Keynote ist, dass, während es Folienmaster gibt, das Material, das in eine Folie eingefügt wird, sorgfältig formatiert werden muss. WYSIWIG ist großartig und schrecklich zugleich. Dinge, die in eine Folie eingefügt werden, müssen mit Liebe formatiert werden. Dies bedeutet normalerweise, dass der Inhalt zwar konsistent ist, der Inhalt jedoch häufig im Format unterschiedlich ist: Der Abstand ist etwas unterschiedlich, die Auswahl der Schriftarten erfolgt außerhalb der Marke und die Farben werden wild.

In einer idealen Welt würden Sie Präsentationen auf GitHub genau wie Code speichern und Präsentationen in einem vereinfachten Format wie Markdown schreiben, ohne den Stil kennen zu müssen. Der UI / Brand-Typ oder das Mädchen könnte all die „hübschen Dinge“ in CSS erledigen, während Sie in Ihrer Prosa mit Aufzählungszeichen philosophisch werden.

Genau das können Sie mit dem Open Source-Diashow-Tool Remark.js im Browser tun. 

Bemerkenswerte technische Präsentationen

Mit Remark.js haben Sie eine HTML-Datei und jedoch viele CSS-Dateien, aber Ihre Präsentation ist in einer Art Markdown-Variante separat. Sie können alles auf GitHub speichern. Es gibt sogar einen Präsentationsmodus, in dem Sie Ihre Notizen sehen können, während Ihr Publikum Ihre brillanten Grafiken betrachtet.

Wie der Name vermuten lässt, ist Remark.js eine JavaScript-Bibliothek. Wie bei jeder JavaScript-Bibliothek gibt es etwa 50 alternative Implementierungen. Das visuell beeindruckendste für mich ist Reveal.js.

Während Sie mit Remark.js vollständig in Markdown mit einer Prise HTML oder Erweiterungen schreiben können, können Sie mit Reveal.js tatsächlich HTML lernen. Ich habe gesagt, dass ich HTML in meinem Lebenslauf seit den 90ern kenne, aber es ist genau so, als ob ich weiß, wie man einen Pinsel benutzt: Ich mache hässliche Dinge mit beiden. Deshalb bevorzuge ich Remark.js.

Hier ist der Markdown- und Folientext für eine aktuelle Folie aus einer meiner Präsentationen:

-

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.

-

So sieht das auf meinem Handy aus (was ich übrigens Chromecast kann):

Andrew C. Oliver

Hier ist der Präsentationsmodus! Ich kann meine Folien so einrichten, dass ich meinen Bildschirm wie ein Teleprompter lesen kann (das tue ich eigentlich nicht, weil es mich langweilen würde):

Andrew C. Oliver

Wenn Sie eine Präsentation klonen, werden die Browserfenster auch dann synchronisiert, wenn Sie für eine Präsentation in den Präsentationsmodus wechseln. Ihr Publikum sieht die Ansicht im ersten Screenshot. Sie sehen die Ansicht in der zweiten.

Das schlechte Zeug

Remark.js ist alles andere als perfekt. Es ist großartig für technische Leute, die technische Präsentationen machen, aber ich würde das Verkaufsteam nicht dazu verpflichten. Wenn Sie ein GitHub-Konto haben, sind Sie mit Markdown wahrscheinlich besser vertraut als mit PowerPoint oder Keynotes unbeständigem WYSIWYG-Editor. Wenn Sie Ihre E-Mail bereitwillig in Outlook lesen, wird es Ihnen wahrscheinlich nicht gefallen.

Um dies zu nutzen, benötigen Sie einen lokalen Webserver wie Python SimpleHTTPServer. Ich empfehle auch, mit Chrome zu gehen. Firefox war nicht mehr synchron, wenn ich herumklickte. Die Presenter-Ansicht ist hilfreich, aber es gibt keine Miniaturansicht für Personen, die häufig zwischen Folien hin und her wechseln.

Wenn Sie Ihre Präsentationen als separate Dateien organisieren, müssen Sie den Präsentationsmodus für jede einzelne neu klonen und erneut aufrufen. Für Bilder und Titelfolien müssen möglicherweise CSS-Anpassungen vorgenommen werden, um die richtigen Ergebnisse zu erzielen. Jeder Code, dem Sie nicht mit `` `Backtics entkommen, wird entstellt (insbesondere Regex). Sie müssen auch das CSS anpassen, damit der Druck in PDF richtig ausgerichtet ist.

Sobald Sie den Dreh raus haben und Ihr CSS fertig haben, ist der vergleichende Aufwand für die Erstellung einer weiteren Präsentation in Remark.Js / Markdown geringer als der von PowerPoint oder Keynote. Das Verwalten von Versionen in GitHub ist enorm besser, und das Wissen, dass ich von meinem Telefon oder Tablet aus präsentieren kann, macht mich glücklich. Wenn Sie das nächste Mal eine Konferenz abhalten und feststellen, dass Ihre Materialien alle auf frühere Versionen zurückgesetzt wurden, denken Sie vielleicht an Remark.js.