Pik7 - Ein HTML5-Präsentationsframework für Nerds

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Meine Ausrede für ein Logo für Pik7

Die letzten Jahre habe ich ständig Seminare und Vorträgen zu HTML5, CSS3, JavaScript und verwandten Themen gegeben. Bei diesen Themen ist es natürlich naheliegend, HTML/JS-Demos und -Codeschnipsel direkt in die Präsentation einzubetten. Auf HTML fußende Präsentationstools, mit denen das theoretisch denkbar wäre, gibt es wie Sand am Meer. Allerdings haben all diese meine dringendsten Präsentationsprobleme nicht gelöst, weswegen ich (nach mehreren Anläufen) mein eigenes Tool geschrieben habe. Die Hörsuppe hat mich vor ein paar Tagen dazu veranlasst, dem Ganzen mal ein ordentliches Release zu gönnen: Pik7 v. 1.0.0 ist da!

Pik7 - Präsentation und Presenter Mode

Ich bin nicht restlos davon überzeugt, dass irgendwer außer mir Pik7 einsetzen sollte, weil ich doch sehr spezielle Primärziele damit hatte:

  • Performance. Dinge wie mein Canvas-Intensivkurs haben deutlich mehr als 100 Slides, auf denen zu allem Überfluss auch noch allerhand Animationen usw. ablaufen. Das brauche ich in flüssig.
  • Presenter View. Ein aus „richtigen“ Präsentationstools wie Power Point bekanntes Feature, das auf einem Zweitbildschirm nicht für das Publikum gedachte Infos anzeigt – so kann der Vortragende zum Beispiel sehen, welche Slide als nächste dran ist und wie viel Zeit er noch hat. Bei der Masse meiner ganzen Folien darf dieses Feature nicht fehlen.
  • Druckbarkeit. Ich brauche PDF-Fassungen all meiner Slides. Druckbare Präsentationen + Chromes „print to PDF“ = Problem erledigt. Mit ein bisschen JavaScript und CSS kann man außerdem mehrere verschiedene PDFs erzeugen, z.B. einen Cheat Sheet für den Workshop und eine Komplettfassung für das spätere Nacharbeiten.
  • Einfache Programmier- und Stylebarkeit. Versteht sich von selbst: simple Themes, JavaScript-Events beim Folienwechsel usw.
  • Nobrainer-Funktionen für Nerds. Eingebautes Syntax-Highlighting. Eingebautes prefix-free. Auto-Synchronisation von mehreren offenen Präsentationen und Presenter Views. Ich muss kompliziertes Zeugs erzählen, ich habe keine Zeit komplizierte Tools zu bedienen.
  • Kein Firlefanz. Ich brauche weder fancy 3D-Animationen noch verschachtelte Slides noch eine Funktion, die mich Bullet Points nach und nach einblenden lässt. Die könnte man sicher alles einbauen, aber ich habe daran erst mal keinen Bedarf.

Kleiner Screencast mit den wichtigsten Features:

Da es, zumindest als ich anfing meine eigenen Tools zu basteln, diese Features in dieser Kombination nirgendwo zu finden gab, musste ich eben selbst ran. Pik7 ist selbstverständlich Open Source (MIT), liegt auf Github rum oder kann von pik.peterkroener.de heruntergeladen werden. Eine Präsentation zu erstellen ist recht einfach …

<!-- /presentations/MySlides/index.html -->
<!doctype html>
<html id="PikSlides">
<script src="../../core/pik7.js"></script>

<div class="pikSlide">First Slide</div>
<div class="pikSlide">Second Slide</div>

… aber wie schon gesagt: ich bin nicht sicher, ob ich Pik7 wirklich empfehlen sollte. Zu den Nachteilen gehört unter anderem der etwas bei HTML-Slides übliche, mühsame Folienbau (Snippets für ST2 liegen aber bei) und dass zwingend ein Websever benötigt wird. Ein kleiner Node.js-Server wird zwar mitgeliefert, ist aber sehr spartanisch gehalten. Außerdem fehlen, wie erwähnt, Animationen und Co. Aber falls ihr euer Glück mit Pik7 versuchen wollt, werde ich euch nicht aufhalten.

Kommentare (5)

  1. Benjamin Wagener

    7. Mai 2013, 17:07 Uhr

    Naja, das mit dem Webserver ist ja jetzt auch nicht so schlimm. Ob man nun PowerPoint startet oder mal eben Xampp startet. Klar für den Mainstream ist es nichts, aber den sprichst du damit ja auch nicht an. Ich denke mal die Leute die dein Tool nutzen werden, werden nen Webserver für Testumgebungen eh immer parat haben. Ich habe meine Präsentationen bisher immer mit LaTeX Beamer gebaut und das letzte mal mit reveal.js. Aber das ist auch ziemlich frickelich und hat keinen extra Presenter-Mode. Da werde ich gerne das nächste mal mit PIK7 mein Glück versuchen. Daher Danke fürs Teilen und die Doku.

  2. christian

    13. Mai 2013, 08:46 Uhr

    Ich formuliere es mal eben ungefähr so:

    \o/

  3. Anon

    14. Mai 2013, 16:17 Uhr

    Wow, bin echt positiv überrascht, gefällt mir echt gut. Werde das jedenfalls gleich bei der nächsten Fortbildung mal nem Praxistest unterziehen.

  4. Frerich Raabe

    13. Juni 2013, 09:06 Uhr

    @Benjamin Wagner: reveal.js hat einen Presenter Mode, einfach waehrend der Praesentation "s" druecken. Dann sieht man die ueblichen Features (naechste Slide, momentane & verstrichene Zeit, Notizen zur Slide).

  5. Bastian

    25. Juli 2013, 16:01 Uhr

    Das soeht zufällier Weise genau nach dem aus, was ich brauche! Saugut! Danke für deine Arbeit.

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon