Hovercraft!

Hovercraft! verwendet impress.js zur Präsentation von reStructuredText.

Präsentation

Hovercraft! verwendet impress.js um mittels CSS3- transforms und transitions ähnliche Präsentationen zu erstellen, wie bei Prezi. Ein eindrucksvolles Beispiel finden Sie in der impress.js demo.

reStructuredText

Die Prösentation kann einfach in reStructuredText erstellt werden.

Metadaten

:title: Hovercraft!-Präsentation
:author: Veit Schiele
:description: Überblick über das Hovercraft!-Präsentationswerkzeug
:keywords: presentation, restructuredtext, impress.js
:css: presentation.css

CSS

Mit dem :css:-Feld lässt sich nur eine CSS-Datei einbinden. Es können jedoch auch bestimmte Medien angegeben werden, für die eine CSS-Datei gültig sein soll, z.B.:

:css-screen,projection: css/presentation.css
:css-print: css/print.css

Slides

Die einzelnen Folien lassen sich in reStructuredText erstellen mit vier oder mehr Bindestrichen, also z.B.:

----

My first slide
==============

Content of my first slide.

----

Soll die Folie eine spezielle Gestaltung erhalten, kann dieser auch eine eigene ID erhalten:

----

:id: this-slide

…

Anschließend kann diese Folie eine eigene Gestaltung erhalten mit:

div#this-slide {
    /* Custom CSS here */
}
impress.js-Angaben
data-transition-duration

Zeit in Sekunden für den Übergang von einer Folie zur nächsten.

Der Standardwert ist 1000.

Dieser Wert kann nicht für einzelne Folien angegeben werden sondern nur für die gesamte Präsentation.

data-perspective

Für 3D-Effekte lässt sich so die Perspektive bestimmen.

Der Standardwert ist 500.

Um keine 3D-Effekte zu erhalten, sollte der Wert auf 0 gesetzt werden.

data-x

Die horizontale Position der Folie in Pixeln.

Der Wert kann auch negativ sein.

Der Standardwert ist 1600.

Mit vorangestelltem r lässt sich die Position relativ zur vorhergehenden Folie angeben.

Der Standardwert entspricht der Positionsänderung der vorhergehenden Folie. Ist keine Angabe für die vertikale Positionierung gemacht worden, ist der Wert 1600. Sofern für keine der Folien eine Position angegeben wurde, verschieben sich die Folien jeweils um 1600 Pixel von links nach rechts.

data-y

Die vertikale Position der Folie in Pixeln.

Der Wert kann auch negativ sein.

Mit vorangestelltem r lässt sich die Position relativ zur vorhergehenden Folie angeben.

Der Standardwert entspricht der Positionsänderung der vorhergehenden Folie. Ist keine Angabe für die vertikale Positionierung gemacht worden, ist der Wert 0.

data-scale

Die Skalierung der Folien. Bei Werten zwischen 0 und 1 wird die Folie vergrößert, bei Werten größer 1 werden die Folien verkleinert.

Der Standardwert ist 1.

data-rotate-z
Die Rotation der Folien um die Z-Achse in Grad.
data-rotate

Identisch mit data-rotate-z, z.B.:

:data-rotate: 90
dreht die Folie um 90° im Uhrzeigersinn.
data-rotate-x
Die Rotation der Folien um die X-Achse in Grad. Dies dreht die Folien in der dritten Dimension.
data-rotate-y
Die Rotation der Folien um die Y-Achse in Grad. Auch dies dreht die Folien in der dritten Dimension.
data-z
Dies gibt die Position der Folien in Pixel in der Z-Achse an.

Der 3D-Effekt der Folie one more thing... lässt sich erreichen mit:

:data-x: r200
:data-y: r300
:data-z: -r100
:data-rotate-x: -40
:data-rotate-y: 10
:data-scale: 2
Relative und automatische Positionierung

Erstellen der Präsentation

Schließlich wird das HTML für die Präsentation durch folgenden Aufruf generiert:

$ ./hovercraft presentation.rst presentation

Dies erstellt die Datei presentation/index.html.

Weitere Informationen erhalten Sie mit ./hovercraft -h.

Konsole

Mit impress-console erhält Hovercraft! eine Konsole für Vortragende mit Notizen, aktueller und nächster Folie sowie einem Timer.

impress-console

Notizen hinzufügen

Sie können Notizen hinzufügen indem Sie folgendes in reStructuredText angeben:

.. note::

    Notizen lassen sich formatieren, z.B. mit *emphasis* und
    **strong**.

    - Auch Listen sind möglich

    Jedoch keine Überschriften.

Syntax-Highlighting

Hierzu kann einfach .. code:: angegeben werden, z.B.:

.. code:: python

    def day_of_year(month, day):
        return (month - 1) * 30 + day_of_month