Impress.js – Besser Präsentieren mit dem Browser?

Ich habe mir das erste mal Impressjs angeschaut. Es könnte meiner Meinung nach eine gute Alternative zu Prezi zu werden, da diese eben ohne Flash auskommt und nur CSS und Javascript verwendet. Vorerst liegt es noch in einer frühen Version (0.5.2) vor, zu finden unter Github.

Ein Tutorial gibt es nicht, aber eine dokumentierte Demo, deshalb wollte ich ein bisschen Näher darauf eingehen, wie man technisch eine Präsentation erstellen kann.

Aufbau – HTML

Folgenden Grundaufbau sollte die entsprechende HTML-Seite haben.

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Titel deiner Präsentation</title>

    <meta name="description" content="Beschreibung deiner Präsentation" />
    <meta name="author" content="Da bist du!" />

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+$

    <link href="css/impress-demo.css" rel="stylesheet" />

    <link rel="shortcut icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">

<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 presenta$
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress">
<!-- Inhalt deiner "Folien" -->
</div>
<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
    document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>

</body>
</html>

Diesen Aufbau habe ich fast eins zu eins aus der Demo übernommen. Nur die persönlichen Information habe ich angepasst.

Aufbau – Folien

Hier möchte versuchen nacheinander verschiedene Möglichkeiten zu demonstrieren, wobei ich den Grundaufbau immer weiter erweiter.

Einfache Folie

Eine einfache Folie würde so aussehen: (Demo1)

<div id="f1" class="step slide" data-x="-1000" data-y="-1500">
        <q>Präsentieren mit Impressjs </q>
</div>

Hierzu eine kleine Erklärung:
id – gibt den Foliennamen an, dieser ist oben in der URL wiederzufinden.
class – gibt die Art der Folien. „step slide“ entspricht einer normal Folien.
data-x/data-z – gibt den mittelpunkt der Folie auf der gesamt Tafel an.
div-tags – Trennen der einzelnen „Folien“/Ansichten/Inhalte voneinander.

Listen Punkte

Da wir normales HTML-verwenden können, sind Listenpunkte natürlich auch möglich: (Demo2).
Gleich mal am Rande, ich habe eine zusaetzliche CSS-Datei eingebunden, die die Listenpunkte und H1 anders formatiert, als in der Demo. Als nicht wundern 😉

<div id="f2" class="step slide" data-x="0" data-y="-1500">
                <h1>Listenpunkte</h1>
                </br>
                <ul>
                        <li>Punkt 1</li>
                        <li>Punkt 2</li>
                        <li>Punkt 3</li>
                </ul>
</div>

Zoom

Mit dem Attribut data-scale kann man diesen Coolen Zoom-Effekt erreichen. Wobei data-scale=“1″ ungezoomt entspricht. Damit startet man: (Demo3)

Filme

Da es alles einfaches HTML ist, gibt es dem entsprechend auch die Moeglichkeit z.B. Youtube-Clips einzubetten. Das andere besondere an dieser Folie ist die class „step“. Dadurch fehlt das typische Folien-Layout weg. (Demo4)

<div id="f4" class="step" data-x="1500" data-y="440" data-scale="1">
                <iframe width="960" height="720" src="http://www.youtube.com/embed/GxSQ-0FWHNk" frameborder="0" allowfullscreen></iframe>

<h3>Ende</h3>

</div>

Ende

Wenn man ein bisschen mit den Positionen rumspielt, dann kann man auch wieder geordnet zurückspringen. Bei einem komplizierteren Aufbau muss man da aber ganz schön rumprobieren :) (Demo5)

Hinterlasse eine Antwort

Deine Email-Adresse wird niemals veröffentlicht. Pflichtfelder sind mit * gekennzeichnet.