Skip to content

Präsentation ganz ohne Powerpoint, Prezi und Co.

Im Rahmen meines Masterprojekts sollten die Ergebnisse meiner Arbeit in einer kleinen Präsentation vorgestellt werden. Dafür wollte ich aber nicht den üblichen Weg gehen (Powerpoint, Impress…) und auch nicht den etwas extravaganteren Weg (Prezi). Stattdessen habe ich vor kurzem die io-2012-slides von Google entdeckt, eine Präsentation mit Hilfe moderner Browsertechnologien wie CSS Transitions, Perspectives und 3D-Tranformations, sowie JavaScript. Damit sollte meine Präsentation umgesetzt werden.

Zunächst einmal musste ich mir einen Überblick über das Template verschaffen. Im Prinzip liefert es für jeden Folientyp eine ansprechende Vorlage, z.B. Listen, Bilder, Tabellen, usw. Besonders ansprechend finde ich die Darstellung von Code-Schnipseln und die Möglichkeit, bestimmte Abschnitte daraus mit einem Tastendruck hervorzuheben. Das Foliendesign ist minimalistisch und schlicht, aber genau darin liegt meiner Meinung nach die Stärke. Man konzentriert sich nämlich auf die Inhalte, und nicht auf eine möglichst bombastische Präsentation mit Lasershow und Nebelmaschine. Im Studium habe ich gelernt, dass zu viel Schnickschnack vom Thema ablenkt. Natürlich kann das auch hilfreich sein, wenn man wenig Inhalt hat, und davon ablenken will. 🙂

Die Bearbeitung des Inhalts der eigentlichen Folien erfolgt dann in Form von HTML-Markup und ein wenig selbst modifiziertem CSS. Eine neue Folie wird beispielsweise über das Tag <slide> erstellt, <hgroup> beschreibt eine Überschrift und <article> die eigentlichen Inhalte. Ein einfaches Beispiel könnte dann so aussehen:

<slide>
 <hgroup>
  <h2>Inhalt</h2>
 </hgroup>
 <article>
  <ul class="auto-fadein" style="font-size:1.2em; position:absolute; top:30%;">
   <li style="padding-bottom:10px">Einführung und Motivation</li>
   <li style="padding-bottom:10px">Konzept</li>
   <li style="padding-bottom:10px">Datengrundlage</li>
   <li style="padding-bottom:10px">Umsetzung und Implementierung</li>
   <li style="padding-bottom:10px">Ergebnisse und Ausblick</li>
   <li style="padding-bottom:10px">Demo</li>
  </ul>
 </article>
</slide>
Beispiel 1

Um dem Zuhörer einen Indikator darüber zu geben, in welchem Abschnitt der Präsentation man sich gerade befindet, habe ich die Überschriftengruppe um ein weiteres Tag ergänzt, und darin die jeweilige Position markiert.

 <hgroup>
  <h4>Einführung und Motivation | Konzept | <b>Datengrundlage</b> | Umsetzung und Implementierung | Ergebnisse und Ausblick | Demo</h4>
  <h2>Inhalt</h2>
 </hgroup>
Beispiel 2

Da es sich um eine Präsentation direkt im Browser handelt, ist das Einbinden externen Ressourcen äußerst einfach. Ein Video von Vimeo oder ein Beitrag von Soundcloud lassen sich ganz einfach via iFrames in eine Folie integrieren. So wie auch eine externe Webseite.

 <article style="margin-top:10px;">
  <iframe data-src="http://www.de-egge.de/maps/praesi/overview.html"></iframe>
 </article>
Beispiel 3

Fügt man an die Klasse „build“ an ein Tag, lassen sich die einzelnen Kindelemente mit jedem Tastendruck einzeln einblenden. Auf diese Weise erhält man schrittweise Einblendungen wie bei Powerpoint.

 <article style="margin-top:10px;">
  <ul class="build" style="width:300px;">
   <li><img src="images/strassen.png" style="position: absolute; width: 600px; margin-left: 116.7%; top: 5%;z-index:0;"></li>
   <li>Start- und Ziel festlegen<img src="images/nadeln.png" style=" position: absolute; width: 600px; margin-left: 21%; top: 5%; z-index:3;"></li>
   <li>Graph erzeugen<img src="images/punkte.png" style="position: absolute; width: 600px; margin-left: 51.8%; top: 5%; z-index:4;"></li>
   <li>Konfiguration durch den Nutzer<img src="images/pfade_bunt.png" style="position: absolute; width: 600px; margin-left: 89.5%; top: 5%;z-index:5;"></li>
   <li>Routing-Algorithmus<img src="images/pfad.png" style="position: absolute; width: 600px; margin-left: 33.4%; top:5%;z-index:7;"></li>
   <li>Präsentation der Ergebnisse<img src="images/praesi.png" style="position: absolute; width: 600px; margin-left: 72.8%; top:5%;z-index:10;"></li>
  </ul>
 </article>
Beispiel 4

Und wie bereits erwähnt, werden Code-Schnipsel mittels der JavaScript-Bibliothek Code-Prettify äußerst ansprechend präsentiert. Ein Tastendruck auf ‚h‘ hebt vorher markierte Codezeilen optisch hervor, bzw. blendet unwichtige Abschnitte aus.

 <article class="smaller">
  <pre class="prettyprint" data-lang="routes.txt">
   "<b>route_id</b>","agency_id","route_short_name","route_long_name","route_type"
    <b>15279_3</b>,150,"X5","Bhf Golm - S Hauptbahnhof",3
  </pre>
  <pre class="prettyprint" data-lang="trips.txt">
   "<b>route_id</b>","service_id","<b>trip_id</b>","trip_headsign","trip_short_name","direction_id","shape_id"
    <b>15279_3</b>,783,<b>27262655</b>,"S Potsdam Hauptbahnhof","Potsdam, Golm Bhf/S Potsdam Hauptbahnhof","0",69
  </pre>
  <pre class="prettyprint" data-lang="stop_times.txt">
  "<b>trip_id</b>","arrival_time","departure_time","<b>stop_id</b>","stop_sequence"
   <b>27262655</b>,9:55:00,9:55:00,<b>270000081101</b>,0
      27262655,9:56:00,9:56:00,270000021201,1
      27262655,9:59:00,9:59:00,270000019701,2
      27262655,10:02:00,10:02:00,270000049201,3
      ...
  </pre>
  <pre class="prettyprint" data-lang="stops.txt">
   "<b>stop_id</b>","stop_code","stop_name","stop_desc","stop_lat","stop_lon","location_type","parent_station"
    <b>270000081101</b>,"GOLU 01","Potsdam, Golm Bhf",,"52.410552000000","12.972179000000",0,900000220010
       270000019701,"BSW 01","Potsdam, Baumschulenweg",,"52.404703000000","12.990345000000",0,900000230196
       ...
  </pre>
 </article>
Beispiel 5
Im Prinzip lassen sich mit dem Grundgerüst io-2012-slides alle Funktionalitäten von Powerpoint emulieren, ein wenig Geduld und Erfahrung im Debugging von HTML und CSS vorausgesetzt. Ich habe für mich festgestellt, dass die beste Vorgehensweise ist, eine Folie in den Grundzügen zu gestalten und dann via Firebug Feintuning in Sachen CSS-Formatierung zu betreiben. An Prezi kommt das Ganze aber doch nicht ran. Aber dafür gibt es ja impress.js. Aber das ist eine andere Geschichte.

Präsentation  Quellcode

Geograph mit einem Hang zu Datenvisualisierungen. Jahrgang 1987. Eishockeyfan. Filmliebhaber. Hobbyfotograph. Geek.

Kommentar verfassen

QR Code Business Card