Präsentationen mit Impress.JS

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Der folgende Beitrag handelt von dem Präsentations-Framewok "impress.js". Hierbei wird das Erstellen einer Präsentation mittels einer modifizierten Präsentation der Uni-Bibliothek Bielefeld sowie die Nutzung des Strut-Editors erläutert.

Inhaltsverzeichnis

Einleitung

Das Git-Hub Projekt Impress.JS wurde von dem Polen Bartek Szopka ins Leben gerufen. Grundlegend besteht es aus einer CSS-Datei und der namensgebenden Javascript Bibliothek.

Impress.js ist laut Bartek Szopka inspiriert von Prezi, kann jedoch noch nicht als Open-Source Alternative verstanden werden. Die Bibliothek und die in der CSS-Datei definierten Klassen liefern nur das Rüstzeug um HTML-basierte Präsentationen zu entwickeln. Das Projekt stellt jedoch keine Benutzeroberfläche wie Prezi zur Verfügung. Hierzu dienen verschiedene andere Projekte wie Strut oder Impressionist. Des Weiteren wird für die folgenden Abschnitte ein geringes Verständnis von HTML und CSS vorausgesetzt. Gegebenenfalls informieren Sie sich bitte noch anderweitig.

Funktionsweise

Im folgenden Abschnitt wird der Aufbau der HTML-Datei sowie einiger Klassen der CSS-Datei anhand der Orginaldemo erläutert. Impress.JS hat bereits einige Klassen definiert, welche sich sowohl in der Präsentation der Uni-Bibliothek Bielefeld als auch in den durch Strut erzeugten Präsentationen wiederfindet.

Im <body>-Element werden durch impress.js einige Klassen festgelegt, welche unter anderem dazu dienen, die Browserunterstüzung oder den aktuellen Stand der Präsentation zu erkennen.

Die Klasse "impress-not-supported"

Direkt im <body>-Element finden Sie die erste Klasse "impress-not-supported".

     <body class="impress-not-supported"> <br />
     ......
     </body>


Diese Klasse dient dazu, dass Nutzer deren Browser die Funktionen von impress.js nicht unterstützt, diesbezüglich eine Rückmeldung erhalten. Damit dies auch bei ausgeschaltetem Javascript geschieht, steht diese Klasse von Beginn an in der HTML Datei und wird bei zutreffender Browserunterstüzung durch das Script entfernt.

Die Klasse "fallback-message"

Die Klasse "fallback.message" steht im ersten <div>-Element des HTML Dokuments. Es steht außerhalb des <div>-Elements mit der id="impress" und der Inhalt informiert den Nutzer, dass der Browser Impress.JS nicht unterstützt. Dies geschieht wenn sich im <body>-Element die Klasse "impress-not-supported" befindet.

     <div class="fallback-message">
           <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented
            with a simplified version of this presentation.  </p>
           <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
     </div>

Es ist nicht notwendig diese Klasse in der CSS-Datei verändern. Sie sollten jedoch um mögliche Sprachbarrieren vorzubeugen bei Präsentationen, welche anhand der Demo oder des Strut-Editors entwickelt wurden, die Information in der HTML-Datei übersetzten.

Die Id "impress"

Innerhalb des <div>-Elements mit der Id "impress" befinden sich alle Folien (eng. Slides) der Präsentation. Das Grundgerüst dieser Folien bilden Blockelemente wie <div> oder <section>.

    <div id="impress">
    ......
    </div>

Die Klasse "step"

eine Folie mit der Klasse "step"
Alle Elemente, die als Folien fungieren, sollten die Klasse "step" beinhalten. "Impress.js" nutzt diese Klasse unter anderem um in der Präsentation zu navigieren. So weist "impress.js" dem Element die Id "step-n" zu, damit Folien direkt angewählt werden können und nichtaktive Slides ausgeblendet werden.
    <div  class="step" .....>
         .....
    </div>

Hierbei werden in der CSS-Datei neben anderen grundlegenden Angaben zu Schriftart und Größe, vor allem Angaben zur Breite und den Rändern der Folie gemacht. Diese Klasse sollten Sie nicht ohne Weiteres verändern, um Problemen bei der Darstellung zu vermeiden. Die "step"-Klasse legt keine Hintergrundfarbe oder Bild fest. Dies erzeugt den Effekt, dass Inhalte in der Folie direkt auf der Leinwand stehen.

Die Klasse "slide"

Folie mit der Klasse "slide"
Die Klasse "slide" kann zusätzlich zur Klasse "step" genutzt werden. Sie bildet einen weiße Fläche mit abgerundeten Rahmen und angedeutetem Schatten als Hintergrund. Möchten Sie nun alle bzw. die meisten Folien mit einem identischen Hintergrund versehen, können Sie diese Klasse nach Ihren Vorstellungen verändern.

.slide {

   display: block;  dient dazu, dass die Folie als Block dargestellt wird.
   width: 900px; Die Breite der Klasse "slide" füllt die Breite der Klasse "step" vollkommen 
                   aus und sollte nicht überschritten werden.
   height: 700px; Zudem liefert sie eine Höhe von 700 Pixeln und grenzt dadurch die Darstellungsfläche 
                    von Inhalten ein.
   padding: 40px 60px;
   background-color: white; Eine Änderung hier würde einen Hintergrundfarbenwechsel  in allen Elementen mit der 
                      Klasse "slide" bewirken.
   border: 1px solid rgba(0, 0, 0, .3); Hier können Sie die Randbreite von 1 px verändern. In der Klammer 
                                          können Sie aus den Werten zwischen 0-255  aus den Farben Rot (Zahl 1),
                                          Grün (Zahl 2)und Blau (Zahl 3) eine Randfarbe mischen.
                                          Hierbei ergibt  eine dreimalige 0 Schwarz und 
                                          eine dreimalige 255 weiß ergibt.
                                          Die vierte Zahl steht für die Sichtbarkeit, die in den Werten zwischen 
                                          0 (komplett durchsichtig) und 
                                          1 (undurchsichtig)angegeben wird.
   border-radius: 10px;Hier können Sie den Grad der Abrundung an den Ecken festlegen.
   box-shadow: 0 2px 6px rgba(0, 0, 0, .1); Hier wird sowohl die Größe als auch die Farbe und Sichtbarkeit des Schattens angegeben.
   color: rgb(102, 102, 102); Dies gibt die Schriftfarbe für die Klasse "slide" an.
   text-shadow: 0 2px 2px rgba(0, 0, 0, .1); Eine Veränderung dieser Werte führt zu einer Änderung des Schattens
   font-family: 'Open Sans', Arial, sans-serif; Hier können  Sie die Schriftart ,
   font-size: 30px; die Schriftgröße
   line-height: 36px; die  Zeilenhöhe, welche die Größe der Schriftart aufgrund von Überlappungsgefahr nicht überschreiten sollte,
   letter-spacing: -1px; sowie den Abstand zwischen den Buchstaben festlegen.

}

Data Attribute "data-x"

Im Data Atribute "data-x" wird die X-Koordinate des Elements/Folie angegeben. Positive Werte bewegen sich nach rechts und negative bewegen sich nach links. Impress.js geht von der Mitte des Elements aus. Daraus resultiert, dass sich bei gleich großen Folien der Wert des "data-x"-Attributs sich um + 1000 oder -1000 zur vorherigen Folie unterscheiden sollte.

<div class="step slide" data-x="-200" data-y="-1500">

<div class="step slide" data-x="-1000" data-y="-1500"> <div class="step slide" data-x="0" data-y="-1500">
Verdeutlichung der Position von Folien, mit der Klasse "slide", in Impress.JS Hier wird der optimale Abstand von 1000 auf der X Ebene angegeben
<div class="step slide" data-x="-1000" data-y="-1500"> <div class="step slide" data-x="-100" data-y="-1500">
Verdeutlichung der Position von Folien, mit der Klasse "slide", in Impress.JS Hier wird der minimale Abstand von 900 auf der X Ebene angegeben
<div class="step slide" data-x="-1000" data-y="-1500"> <div class="step slide" data-x="-200" data-y="-1500">
Verdeutlichung der Position von Folien mit der Klasse "slide" in Impress.JS. Hier wird ein Überschneiden durch einen Abstand von 800 auf der X-Ebene angegeben

Data Attribute "data-Y"

Bewegungsmuster data-y Wert
Im Data Atribute "data-Y" wird die Y-Koordinate des Elements/Folie angegeben. Positive Werte bewegen sich nach unten und negative bewegen sich nach oben. Impress.js geht von der Mitte des Elements aus. Somit ergibt es sich, dass bei gleich großen Folien der Wert des "data-y"-Attributs sich + 800 oder -800 zur vorherigen Folie unterscheiden sollte.

Möchte man, dass die Folien an den Ober- oder Unterkanten anliegen, nimmt man entweder +700 oder -700 als "y-data"-Wert.


<div class="step slide" data-x="-0" data-y="-1500">

Data Attribute "data-Z"

Bewegungsmuster "data-z"-Wert
Ähnlich wie bei Prezi kann man bei Impress.Js auch zoomen. Das "data-z"-Attribut wird dazu genutzt. Möchte man hineinzommen, gibt man einen negativen Wert an; möchte man hinauszoomen, erhört man den Wert. Gibt man "data-z" nicht an, ist dieser standardmäßig auf 0 gesetzt. Folien sollten sich nicht überlagern, da in diesem Fall die Folie mit höherem "data-z"-Wert beim Betrachten der Folie mit niederem "data-z"-Wert dennoch sichtbar ist.

<div class="step slide" data-x="-200" data-y="-1500" data-z="1000">

Data Attribute "data-scale"

durch "data-scale" kann eine Folie, bezogen auf die Gesamtleinwand, durch einen Multiplikator vergrößern.
Eine weitere Möglichkeit das Zoomen in Prezi nachzustellen, ist durch das Data-Attribut "data-scale" möglich. Hierbei fungiert der angegebene Wert als Multiplikator.

Ist der angegebene Wert 4, so ist die Folie bezogen auf die ganze Leinwand vier mal so groß wie Folien ohne data-scale Wert oder mit dem data-scale Wert von 1. Man kann jedoch auch Angaben im Dezimalbereich machen und dadurch kleinere Folien erstellen. Diese können bei richtiger Positionierung auch im Bereich größerer Folien befinden, ohne dass diese stören.

<div id="title" class="step" data-x="0" data-y="0" data-scale="0.25">
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">

Data Attribute "data-rotate"

Darstellung des Data-Attributes "data-rotate"
Das "data-rotate"-Attribut dient dazu Elemente oder Folien im Uhrzeigersinn zu drehen.
<div id="title" class="step" data-x="0" data-y="0" data-rotate="90">

Quiz

Pluspunkt für eine richtige Antwort:  
Minuspunkte für eine falsche Antwort:
Ignoriere den Fragen-Koeffizienten:

1.

Die erste Folie hat für das Atribut data-x den Wert 3500 und den data-y Wert von 0. Die darauf folgende Folie soll rechts von ihr sein. Damit sie sich nicht überlappen muss der data-x Wert der zweiten Folie mindestens betragen. Damit die dritte Folie um 90 Grad gedreht wird muss dieser beim Attribut eingetragen werden. Zudem soll die dritte Folie oberhalb der ersten beiden Folien sein, deswegen ist dieser Wert . Die vierte Folie soll im Vergleich halb so groß sein wie die ersten drei Folien, das wird durch den Wert von erreicht. Wenn nun die nächste Folie im selbigen Attribut den Wert 2 hat, dann ist die fünfte Folie so groß wie die ersten drei Folien.

Punkte: 0 / 0


Vorlage der Uni Bibliothek Bielefeld

Der Abschnitt Funktionsweise basiert auf der Demo von Bartek Szopka. Diese ist jedoch lediglich eine Demo, als Vorlage ist sie ungeeignet. Sebastian Wolf von der Uni Bibliothek Bielefeld schafft Abhilfe, siehe hier. In der Präsentation wird Ihnen die Nutzung dieser Vorlage erläutert.

Im folgenden Abschnitt wird auf die modifizierte Folienstruktur eingegangen. Die Positionierung und Navigation in der Präsentation ist identisch zur Demo.

Folienstruktur

In dieser Vorlage wird erstmals dem Benutzer eine Struktur einer Folie zur Hand gegeben. Sie sieht wie folgt aus:

    <section class="step slide" data-x="-500" data-y="-1500">
      <header>
      </header>
      <main>
        ......
</main> </section>

Anstelle des <div>-Elements nutzt Sebastian Wolf das <section> Element. Hier finden sich sowohl die selben Klassen als auch die selben data-Attribute.

<header>-Element

Das <header>-Element erzeugt einen Kopfbereich
Durch das <header>-Element wird auf der Folie eine Kopfzeile angelegt. In der CSS-Datei wird das Logo im Kopfbereich festgelegt.
   header {
       background:url(../images/logo.png) no-repeat left top; Hier verweist die CSS Datei auf eine Bild-Datei,
                                                              welche sich im Ordner Images
                                                              befindet. Dieser Ordner ist im selben
                                                              Überordner wie der Ordner css.
       height:100px;Hier wird die Höhe des Kopfbereichs festgelegt.
       opacity:0.75; Durch das Verändern des opacity-Wertes kann die Duschrichtigkeit  des <header>-Inhalts
                     festgelegt werden.
Die Klasse "blank" des <header>-Elements
Die Klasse "blank" ermöglicht individuelle Kopfzeilen
Durch die Klasse "blank" für das <header>-Element wird das in der CSS-Datei standardmäßig festgelegte <header>-Design ausgeschaltet. Dadurch kann man z.B. Überschriften einbinden, ohne auf den Platz des <main>-Elements zurückgreifen zu müssen.
   <header class="blank">
       <h1> Überschrift </h1>
   </header>

<main>-Element

Im <main>-Element befindet sich der Inhalt der Folie. Hier können Sie den Inhalt nach ihren Bedürfnissen und HTML- und CSS-Kenntnissen gestalten. Zudem stellt die Vorlage einige Klassen zur Verfügung, um den Inhalt anschaulich darzustellen. Diese Klassen werden im folgenden Abschnitt erläutert.

Bilder einfügen
Bilder einfügen
Ein Bild mit der Klasse "vollbild".
Das Einbinden von Bilder verläuft nach den geläufigen Regeln von HTML. Durch die Klasse "vollbild" nimmt das Bild die gesamte Fläche des <main>-Bereichs ein.
      <src="images/800px-Sunrise_thailand_ko_samui.jpg.jpg" height="150" alt="">





      <src="images/800px-Sunrise_thailand_ko_samui.jpg.jpg" '''class="vollbild"''' alt="">
Tabellen

Weitere Klassen, die in dieser Vorlage neu hinzugekommen sind, werden für Tabellen genutzt. Eine Tabelle sieht wie folgt aus:

   <table class="erstespalte">
          <thead>
               <tr>
                    th>Spalte 1 </th>
                   <th>Spalte 2 </th>
                   <th>Spalte 3 </th>
               </tr>
         </thead>
         <tbody>
               <tr>
                   <td>Text</td>
                   <td>Text</td>
                   <td>Text</td>
               </tr>
        .......
        </tbody>
   </table>
Klasse "erstespalte"
Die Klasse "erstespalte" färbt die erste Spalte ein
Die Klasse "erstespalte" dient dazu die erste Spalte grau einzufärben. In der CSS-Datei kann man die Farbe festlegen.


          table.erstespalte th:first-child, table.erstespalte td:first-child {
                background-color:#eee;}
Klasse "zebrastreifen"
Die Klasse "zebrastreifen" färbt die geraden Zeilen ein
Die Klasse "zebrastreifen" färbt die geraden Zeilen ein. Die Kopfzeiele mit dem <thead>-Element ist standardmäßig eingefärbt und steht für sich allein.
      table thead {
              background-color:#eee;}

Deswegen werden alle geraden Zeilen eingefärbt damit auf die eingefärbte Kopfzeile nicht eine eingefärbte Zeile folgt. Somit müssen, um eine einheitliche Färbung zu erreichen, beide Werte verändert werden.

     table.zebrastreifen tr:nth-child(even) { 
            background-color:#eee;  }
Klasse "zebraspalten"
Die Klasse "zebraspalten" färbt gerade Spalten ein
Die Klasse "zebraspalten" ist das vertikale Äquivalent zur Klasse "zebrastreifen". In der CSS-Datei können sie im fett geschriebenen Bereich die Farbe ändern.
   table.zebraspalten td:nth-child(even) { 
      background-color:#eee; }

Unter diese Eintrag werden sie folgenden Eintrag finden.

   table.zebraspalten th:nth-child(odd) { 
            background-color:#fff;}

Ändern Sie diesen nur, wenn Sie vorhaben anstelle von Weiß eine andere Zweitfarbe zu wählen. Hierzu müssen Sie einen neuen Eintrag erstellen:

   table.zebraspalten td:nth-child(odd) {  Verweist auf die <td>Elementen in ungeraden  Zeilen
            background-color:#fff;} Zweitfarbe

Die Klasse "multi"

In der Impress.JS-Vorlage der Uni Bibliothek Bielefeld findet sich neben den schon bekannten Klassen "step und slide" eine weitere Klasse, die Klasse "multi". Die Klasse "multi" dient dazu, dass Folien sich nicht stören, wenn sie sich überschneiden oder direkt übereinander liegen. Hierdurch kann das nacheinander Einblenden von Paragraphen auf einer Folie visualisiert werden.

Folie 1:
Durch die Klasse "multi" können Folien überlappen ohne zu stören.
    <section class="step slide  multi" data-x="-500" data-y="-1500">
      <header> 
       ....
      </header> 
        <main>
           <ul> Punkt 1</ul>
       </main>
    </section>

Folie 2:

    <section class=" step slide  multi" data-x="-500" data-y="-1500">
      <header> 
       ....
      </header> 
       <main>
           <ul> Punkt 1</ul>        
           <ul> Punkt 2</ul>
       </main>
    </section>

Die Klasse "blank"

Durch die Klasse "blank" anstelle der Klasse "slide" steht der Text wieder frei auf der Leinwand
Bereits in der Funktionsweise beschrieben ist man nicht an den Hintergrund, der durch "slide" erzeugt wird, gebunden. Wolf weist in seiner Vorlage diesem Zustand eine eigene Klasse "blank" zu. Hierbei ist der Header als auch der Hintergrund leer vergleichbar mit der allein stehenden Klasse "step".
    <section class="step slide  blank" data-x="-500" data-y="-1500">
       <header>
       </header>
       <main>
        <center><h1> frei stehender Text </h1></center>
       </main>
    </section>

Vorgehensweise

Wie arbeitet man nun effektiv mit dieser Vorlage.

  • Zu Beginn gehen Sie auf die Präsentation der UB Bielefeld und downloaden Sie die Präsentation
  • Entpacken Sie das Paket z.B. in Dokuments.
  • Kopieren Sie den Ordner
  • Öffnen Sie in die Datei index.html und löschen Sie den Inhalt des <articel>-Elements mit der id-"impress" bis auf das <section>-Element mit der Id "overiew".
  • Optional können Sie das <div>-Element mit der ID "fuss" löschen, da dieses sonst konstant sichtbar ist. Das <div>-Element mit der Id "kopf" sollten Sie beibehalten.
  • Schreiben Sie nun sich eine Beispielfolie mit dem <section>-Element. Kopieren Sie diese und fügen die Folie ein. In der eingefügten Folie müssen Sie aufgrund der Lizenzierung auf Sebastian Wolf und die Originalpräsentation verweisen. Zudem müssen auch Sie ihre Präsentation bei einer Verbreitung unter die gleiche Creative-Commens-Lizenz stellen.


Diese Folie können Sie für den Lizenzhinweis benutzen.

<section class="step slide multi" data-x="0" data-y="0"> <header > <center><h1> Lizens</h1></center> </header> <main> <p> <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.de"> <img alt="Creative Commons Lizenzvertrag" style="border:0;float:right;margin:10px 10px 0 0;" src="http://i.creativecommons.org/l/by- sa/3.0/88x31.png" /> </a> <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type" style="margin-left:-4px;">Präsentationen mit impress.js</span> Vorlage von <a xmlns:cc="http://creativecommons.org/ns#" href="https://www.twitter.com/bibliothekswelt" property="cc:attributionName" rel="cc:attributionURL">Sebastian Wolf</a> ist lizenziert unter einer <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.de">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz</a>.</p> </main> </section>


  • Nun sollten Sie eine HTML-Datei mit zwei Folien haben. Ändern Sie im Anschluss das Logo in der CSS-Datei oder schreiben Sie in den Kopfbereich der beiden Folien die Klasse "blank".
  • Speichern Sie diese HTML-Datei in den kopierten Ordner und ersetzen die dort vorhandene Index.html.

Nun haben Sie eine Vorlage mit der Sie schnell neue Präsentationen beginnen können.

  • Kopieren Sie dazu für jede Präsentation den gesamten Ordner.
  • Für neue Folien kopieren Sie die erste Folie und fügen diese immer vor der Lizenzfolie ein.

Quiz

1. Damit sich Folien beim Überlappen nicht stören, nutzt man die Klasse?

"slide"
"multi"
"blank"

2. Möchte man das Logo im Kopfbereich einer Folie ändern, verändert man in der CSS-Datei die Angaben für die/das?

das HTML-Element header
die ID header
die Klasse header

3. Die Kopfzeile einer Tabelle wird in das HTML-Element ..... geschrieben

th
tr
td

4. Um Bilder auf der ganzen Folie anzeigen zu lassen, benutzt man die Klasse ...

gesamteflaeche
vollbild
voll

Punkte: 0 / 0


Strut-Editor

Das Git-Hub Projekt von Matt Crinklaw-Vogt namens Strut liefert ein Werkzeug um Impress.JS-Präsentationen anzulegen. Neben Impress.JS kann Strut auch Bespoke.js-Präsentationen erstellen. Die Oberfläche ist ebenfalls wie Impress.JS an Prezi angelehnt und findet im Browser statt. Um nun Strut zu nutzen, bietet Matt Crinklaw-Vogt online seinen Editor auf www.strut.io an oder man kann sich auch einen eigenen Gruntserver mit Strut installieren.

Installation

  1. Zur Installation von Strut muss Node.JS installiert sein
    1. Hierzu gehen Sie auf nodejs.org/download/ und downloaden die Installationsanwendung oder Archive für Ihr Betriebssystem.
    2. Für Windows Betriebssysteme werden Installationsanwendungen angeboten, für auf Debian basierende Distributionen empfiehlt sich die Anleitung auf sysadminslife.com.
  2. Anschließend öffnen Sie entweder CMD bei Windows oder das Terminal bei Linux oder Mac.
  3. Geben Sie folgenden Befehl ein npm install -g grunt-cli um Grunt zu installieren.
  4. Downloaden Sie Strut auf Git-Hubund entpacken Sie das Zip-Archiv in ihren Nutzerordner.
    1. Voraussichtlich heißt dieser nun "strut-master".
  5. Nun wechseln Sie in den entpackten Ordner durch cd strut-master
  6. Installieren Sie Grunt in diesem durch npm install
  7. Um Strut nun zu starten, geben Sie folgenden Befehl ein grunt server
  8. Öffnen Sie nun einen HTML5-fähigen Browser und gehen Sie auf localhost:9000

Da die Eingabe in CMD oder das Terminal umständlich ist, sollte man einen Starter anlegen.

Starter für Windows

  1. Für einen Starter in Windows gehen Sie in den Ordner cd strut-master
  2. Erstellen Sie über Rechtsklick >> Neu >> Textdatei eine Textdatei
  3. In diese Datei schreiben Sie grunt server.
  4. Speichern Sie nun diese Datei als start_stut.bat. (Achten Sie darauf, dass im Windows-Editor standardmäßig die txt-Dateiendung eingestellt ist und Sie diese auf Alle-Dateien umstellen.
  5. Erstellen Sie nun eine Verknüpfung per Rechtsklick>>Verknüpfung auf die Batch-Datei start_stut.bat. Diese können Sie nun in die Taskleiste oder das Startmenü verschieben.

Benutzeroberfläche

Benutzeroberfläche des Strut-Editors
Im folgenden Abschnitt wird Ihnen die Benutzeroberfläche erläutert.

Strut-Menü

Im Menü von Strut, kann man Projekte speichern und neu starten.

Das Strut-Menü ist in vier Teile getrennt.

Die ersten vier Menüitems gehören zum ersten Teil und befassen sich mit dem Beginn und dem Ende eines Projektes.
Der Strut-Editor greift auf neue Speichermöglichkeiten der HTML5-Technologie zurück. Dadurch können Projekte weiterhin lokal gespeichert werden.
  • Neu
  • Öffnen
  • Speichern
  • Speichern als
Der zweite Abschnitt befasst sich mit den vorgenommenen Arbeitsschritten. Diese sind selbsterklärend und können auch per Tastenkombinationen ausgeführt werden.
  • Rückgängig STRG+Z
  • Wiederholung STRG+Y
Der dritte Bereich befasst sich mit Löschen und Einfügen von Elementen und kann sowohl für ganze Folien als auch Folien-Elemente wie Texte angewandt werden. Auch hier können Tastenkombinationen genutzt werden.
  • Ausschneiden STRG+X
  • Kopieren STRG+C
  • Einfügen STRG+V
  • Löschen ENTF
Der Letzte Abschnitt befasst sich mit dem Importieren und Exportieren von Präsentationen.
  • Importieren
  • Exportieren
Durch Importieren kann man Präsentationen in Form eines JSON-Strings importieren. Dieser ist einer von zwei Exportorientierungsmöglichkeiten. Man kann nach dem Klicken auf Exportieren den JSON-String downloaden. Die JSON-String kann jedoch nur effektiv genutzt werden, wenn man auf den Strut-Editor zugreifen kann. Er empfiehlt sich für Gruppenarbeiten. Die zweite Möglichkeit dient zur Präsentation, ohne auf den Strut-Editor zurückgreifen zu müssen. Dazu geht man auf den Präsentations-Button, um sich die Präsentation anzeigen zu lassen. Anschließend drückt man die Tastenkombination STRG+S, um die gesamte Präsentation zu speichern. Diese liegt in Form einer HTML-Datei und eines dazugehörigen Ordners für die Ressourcen vor.

Folien

Der Strut-Editor hat zwei Bearbeitungsmodi. Zum einen die Übersicht zum anderen Folien. In der oberen rechten Ecke wird immer der nicht aktive Modus angegeben.

Werkzeugleiste
Zum Füllen der Folien liefert Strut eine kleine Werkzeugleiste

Bisweilen liefert Strut nur wenige Möglichkeiten Folien mit Inhalten zu füllen.

Text

Durch das Klicken des Text-Buttons erscheint ein Textfeld. Durch einen einfachen Klick wählt man diese an und kann sie bewegen. Durch einen Doppelklick geht man in den Bearbeitungsmodus. Hier öffnet sich ein kleines WYSIWYG-Editor-Menü, in dem man folgende Punkte verändern kann.

  • B seht für bold und macht markierten Text fett.
  • I steht für italic und macht markierten Text kursiv.
  • Die typischen Symbole für Listenelemente ermöglichen sowohl geordnete als auch ungeordnete Listen.
  • Texte können entweder links oder mittig positioniert werden. Symbole orientieren sich an Office-Anwendungen
  • das Kettensymbol ermöglicht das Einfügen von Links.
  • man kann aus neun Schriftarten wählen.
  • Die Schriftgröße kann man entweder durch das Skalieren der Textbox oder das WYSIWYG-Editor-Menü verändern
  • die Schriftfarbe kann man aus einer Farbpalette wählen

Unabhängig ob man die Textbox angewählt hat oder man im Editormodus ist, kann man die Position der Textbox verändern.

Bild

Der Bild-Button öffnet ein Oberfläche, in der entweder ein Link zu einem Bild eingefügt werden kann oder man Bilder von der Festplatte auswählt. Diese Bilder von der Festplatte werden beim Imagehoster Imgur.com hochgeladen.

Video

Der Video-Button öffnet eine Oberfläche in der unter anderem YouTube-Videos eingebunden werden können. Diese werden jedoch im Gegensatz zu Bildern beim Speichervorgang nicht zur Offline-Verfügbarkeit gespeichert. Daraus ergibt sich, dass eine Nutzung während der Präsentation eine Internetverbindung benötigt.

Webseiten

Der Webseiten-Button öffnet eine Oberfläche, in der man Webseiten mittels eines iframes einbinden kann. Speichert man nun durch STRG+S die Präsentation, werden Ressourcen der eingebunden Seite ebenfalls gespeichert.

Formen

Der Button-Formen ermöglicht dem Nutzer einige Vektorgrafiken in die Präsentation einzubinden.

Folienleiste
In der Folienleiste kann man neue Folien als auch die Reihenfolge der Folien festlegen

Die Folienleiste befindet sich wie auch beim Vorbild Prezi links. Die Folien werden als Vorschaubild gezeigt. An der unteren Kante jeder Folie befindet sich ein weißes Plus auf grünem Grund, um neue Folien zu erstellen. In der oberen, rechten Ecke dieser Vorschau befindet sich ein weißes X in einem roten Kreis und dient zum Löschen der jeweiligen Folie. Sie kann jedoch auch durch das Anwählen und Drücken der Taste ENTF gelöscht werden. Ebenso verhält es sich mit Ausschneiden, Kopieren und Einfügen.

Übersicht

Folien sehen im Übersichtsmodus wie folgt aus.
Im Modus Übersicht wird die Position der Folien angegeben. Neben den bereits bekannten data-Atributen data-x, data-y, data-z, data-scale, data-rotate ermöglicht Strut außerdem, dass der Nutzer die Folie noch um die X- und Y-Achse rotieren kann.

Die Werte für die X- und Y-Koordinaten werden durch das Verschieben der Folien zugewiesen.

Quellen

Weitere Informationen finden Sie in den folgenden Quellenangaben.