Heutzutage, wenn VR-Helme Teil unserer Realität geworden sind und Tesla-Autos im Weltraum fliegen, können Sie die gesamte Leistung von Browser-Engines nutzen, um wirklich interaktive, plattformübergreifende und stilvolle Präsentationen zu erstellen, anstatt eine Reihe von PPTX-Seiten oder sogar zu erstellen Schlimmer noch, ein PDF-Dokument im Stil "Illustratives Material für Erklärungs- und Berechnungsberichte".
Seit 2015 versuche ich, das optimale Präsentationsformat für mich zu finden (abgesehen von Abschlussprojekten). Und jetzt denke ich, dass es mir fast gelungen ist. Alles begann mit PowerPoint und endete mit Web-Frameworks, die auf JavaScript basierten.
Es gibt verschiedene JavaScript-Engines, mit denen coole Präsentationen erstellt werden können: Marp , Reveal , Erdrutsch , Hacker-Folien , Slidify und andere. In einigen Engines können Sie Markdown verwenden, einige sind in eine IDE eingebettet und einige haben ihre eigenen Editoren. Ich habe die ersten beiden Motoren ausprobiert.
Zur Demonstration stehen Folienbeispiele und Videos zur Verfügung.
Beide oben genannten Engines unterstützen das Markdown-Nur-Text-Format. Mit dem ersten, Marp , können Sie Präsentationen in einer eigenen IDE erstellen. Dies ist sehr praktisch, aber die Ausgabe ist immer noch eine statische PDF-Datei. Das zweite, Reveal , ist interessanter: Es kann zum Erstellen ganzer Präsentationswebsites verwendet werden. Neben Markdown können Sie die volle Leistung von JavaScript, HTML und CSS nutzen. Ich werde in diesem Artikel hauptsächlich über Reveal sprechen.
Sie können die Entwicklung meiner Präsentationen im Repository https://github.com/KvanTTT/Presentations sehen .
Kleine Textmenge
Ihr Publikum liest den Text der Präsentation nicht von den Folien. Fügen Sie daher nicht ganze Absätze auf die Folien. Sprechen Sie mit dem Publikum. Wenn Sie Zweifel haben, ob Sie einen Text auf eine Folie legen sollen oder nicht, werfen Sie ihn weg. Schreiben Sie gegebenenfalls einen Artikel, in dem die Details erläutert werden. Es ist besser, mehr visuelle Informationen zu verwenden.
Metaphern zu verwenden ist gut. Das Publikum sollte von Beginn der Präsentation an engagiert und wach gehalten werden. Dies kann mit Hilfe von lustigen Bildern geschehen. Aber kennen Sie die Grenzen: Die Fülle an Witzen kann nervig und ablenkend sein.
Minimalismus und flaches Design
Eines der Prinzipien, die ich ausgeliehen habe. Es ist jetzt im Trend und ich mag es auch. Daher wird empfohlen, beim Erstellen von Präsentationen eine kleine Anzahl von Grundfarben (drei bis fünf) zu verwenden.
Online-Zugang
Die Präsentation sollte im Browser verfügbar sein. So haben Sie keine Angst davor, ein Flash-Laufwerk zu verlieren, Ihren Laptop und andere Widrigkeiten während der Präsentation zum Absturz zu bringen.
Offline-Arbeit
Folien in Englisch
Zugang per Link
Lesbarer Link
Aus dem Link zur Präsentation https://kvanttt.imtqy.com/Presentations/2018-05-15-Source-code-analyzers-how-generalizable-are-they/English/index.html wird sofort Folgendes klar:
- Autor: kvanttt
- Datum der Veröffentlichung: 2018-05-15
- Format: Präsentationen (es können auch Artikel , Beispiele sein )
- Sprache: Englisch
- Titel: Quellcode-Analysatoren-wie-verallgemeinerbar-sind-sie
- Sie können auch auf jede Seite der Präsentation mit dem Nummernzeichen
#/5 verweisen.
Dunkle und helle Themen
Für die beste Anpassung an Licht oder Stimmung. Sie können auch Ihre eigenen erstellen.
Sie können auch den Stil der Übergänge zwischen Folien ändern.
Integration in Versionskontrollsysteme (Git)
GitHub kann so konfiguriert werden, dass die Site sofort auf einem statischen Hosting in der Domain imtqy.com wird, wenn Sie auf die gh-pages oder den imtqy.com - dies ist sehr praktisch.
Hier ist der Quellordner: https://github.com/KvanTTT/Presentations/tree/master/2018-05-15-Source-code-analyzers-how-generalizable-are-they
Verwenden des Nur-Text-Formats (Markdown)
Markdown macht es einfach zu beschreiben:
- verschiedene Textstile ( kursiv , fett ,
durchgestrichen , Link , Zitat, code snippet ), - Überschriften
- Listen, geordnet und ungeordnet,
- Tabellen
- Spoiler,
- zusätzliche Elemente, die je nach Implementierung variieren können. Bei Bedarf können Sie auch HTML-Tags verwenden.
Beispiel für die Folienquellen # ️ Text fingerprinting with zero-length characters Be careful what you copy <span class="fragment">️ [https://diffchecker.com](https://www.diffchecker.com/M2PvqSXw)</span> <span class="fragment"> Be c•aref•ul wh•at yo•u copy• </span> <aside class="fragment" align="middle">Detail: [habr.com](https://habr.com/post/352950/) | [Medium](https://medium.com/@umpox/be-careful-what-you-copy-invisibly-inserting-usernames-into-text-with-zero-width-characters-18b4e6f17b66) </span> <br> <aside class="notes"> There is another similar funny story with zero-width characters. For example, I have inserted 5 such characters into this string, can you tell? You can check it using the service <https://www.diffchecker.com>. These characters can be used as unique text fingerprints to identify users. Using this method, for example, you can play detective: encode the name of the user in a copied message to understand who leaks some confidential information :) You can find more information about such characters on Habr and Medium. </aside> ---
Foliennotizen
Während der Präsentation können Sie S drücken und die vorbereiteten Notizen und die nächste Folie anzeigen. Sie können auch die Dauer Ihres Gesprächs mit dem Timer steuern. Notizen können auf dem zweiten Monitor angezeigt werden.
Emoji verwenden
Emoji kann verwendet werden, um Folien mit visuellen Bildern zu verknüpfen. Leider werden sie auf Habr immer noch nicht unterstützt, sodass Sie das Emoji im Titel über diesem Absatz nicht sehen.
Jpg
Verlustbehaftetes Komprimierungsformat, geeignet für Fotos und komplexe Bilder mit Verläufen und einer reichen Palette. Schlecht für Zeichnungen und Grafiken mit Text und Zeichen. Gut für den Hintergrund.
PNG
Verlustfreies Komprimierungsformat, geeignet für Bilder mit großen homogenen Bereichen und einer begrenzten Farbpalette. Sie müssen es nicht für Fotos verwenden, da die Dateigröße viel größer ist. Gut für Screenshots.
Svg
Aus irgendeinem Grund vergessen viele Menschen SVG, was die folgenden Vorteile hat:
- Skalieren des Bildes auf eine beliebige Größe ohne Qualitätsverlust;
- Integration mit Git (Textformat);
- Sie können Farben, Schriftarten und andere Elemente in der Datei direkt ändern.
- kleine Dateigröße.
Unterstützt von allen modernen Browsern - und sogar von Habr! Leider kann es nur indirekt auf Habr hochgeladen werden.
Beachten Sie, dass die meisten Bilder in diesem Artikel im SVG-Format vorliegen.
Dies ist ein Fragment des Quellcodes für das Hintergrund-SVG-Bild dieser Folie <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="478pt" height="601pt" viewBox="0.00 0.00 478.13 601.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 597)"> <title>cfg</title> <polygon fill="white" stroke="none" points="-4,4 -4,-597 474.131,-597 474.131,4 -4,4"/> <g id="node1" class="node"> <title>27</title> <ellipse fill="none" stroke="black" cx="310.039" cy="-575" rx="75.2868" ry="18"/> <text text-anchor="middle" x="310.039" y="-571.3" font-family="Times New Roman,serif" font-size="14.00">name == "admin"</text> </g> <g id="node2" class="node"> <title>33</title> <ellipse fill="none" stroke="black" cx="229.039" cy="-488" rx="81.4863" ry="18"/> <text text-anchor="middle" x="229.039" y="-484.3" font-family="Times New Roman,serif" font-size="14.00">key1 == "validkey"</text> </g>
Verwenden bequemer und einfacher IDEs
Zum Beispiel Visual Studio Code mit Plugins. Die Vorschau links, die endgültige Version (Rendern) rechts oder im Browser. Es gibt ein Rechtschreibprüfungs-Plugin, Plugins zum Generieren von Inhalten (TOC), Formatieren von Tabellen und andere.
Einfach zu druckender Präsentationstext
Kostenlos zu benutzen
Zusätzliche Funktionen
- Vertikale Folien: Sie können nicht nur seitwärts, sondern auch vertikal scrollen.
- Möglichkeit zum Erstellen einer Präsentation ohne Schreiben von Code mithilfe von slide.com .
- Möglichkeit, viele Folien gleichzeitig anzuzeigen, um die Navigation zu vereinfachen.
- Verwenden verschiedener Arten von Hintergrundkacheln, Verwenden von Video als Hintergrund.
- Automatische Diashow.
- Und einige andere Funktionen .
Sie können auch mit einer interaktiven Version experimentieren.
Die Präsentation sieht einfach und cool aus
Nachteile
Natürlich hat alles Nachteile, und dieser Ansatz ist keine Ausnahme:
- Umständlicher Export in PDF , müssen Sie die Ausgabe bearbeiten. Ist jedoch auch verfügbar .
- Kein Export nach PPTX .
- Nicht sehr einfach zu beherrschen, insbesondere für Nicht-Programmierer und Nicht-Frontend-Entwickler (idealerweise müssen Sie HTML und CSS kennen ).
- Es ist nicht sehr einfach, Änderungen vorzunehmen. Sie können es jedoch anpassen und automatisieren.
- Emoji werden nicht überall gleich angezeigt (z. B. wird das Emoji in diesem Satz nicht angezeigt).
- Der Motor ist immer noch roh.
Fazit
Es scheint mir, dass zukünftige Präsentationen so aussehen werden: interaktiv im Format von Websites, die sowohl für Programmierer als auch für Designer leicht zu bearbeiten sind. Versuchen wir, diese Zukunft näher zu bringen!
Artikel können übrigens auch mit Git und Markdown geschrieben und auf GitHub oder GitLab gehostet werden. Ich werde später darüber schreiben.
Wenn Sie Korrekturen oder Ergänzungen haben, schreiben Sie bitte Ihre Kommentare unten. Ich werde sie berücksichtigen und möglicherweise in den Artikel aufnehmen.
Die Quellen des Artikels sind auf GitHub verfügbar - bitte senden Sie eine Pull-Anfrage, wenn Sie einen Fehler finden. Für die Konvertierung in das habr.com-Format verwende ich die Bibliothek MarkConv .