Top
Impress.js – Folientrennung – RonnyDee´s Blog
fade
4567
post-template-default,single,single-post,postid-4567,single-format-standard,eltd-core-1.1.1,flow child-child-ver-1.0.0,flow-ver-1.3.7,,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-standard,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-dropdown-default,wpb-js-composer js-comp-ver-5.2.1,vc_responsive

Impress.js – Folientrennung

Meine ersten zwei Artikel haben den Aufbau der Impress.js Datei bzw. die generelle Funktion erklärt. Das Ziel ist nun, dass wir Impress.js so anpassen, dass wir jederzeit ganz einfach neue “Folien” mit unseren Bedürfnissen einpflegen können. Da zurzeit die Impress.js Foliensteuerung lediglich über eine einzige Datei namens index.html erfolgt, behandelt dieser Artikel diese Zielerreichung.

Folgende Schritte werden wir nun durchführen

  1. Eigene index.php Datei (nicht index.html) erstellen, die zur Steuerung der Präsentation dient
  2. Eigene Ordnerstruktur für die Foliensteuerung
    1. Darin befindet sich dann eine eigene “Folien”-Datei
    2. sowie eine eigene CSS-Datei
    3. und etwaige Bilder oder andere Elemente die für diese “Folie” benötigt werden
  3. Einbinden der vorliegenden DemoDateien von Impress.js

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Die index.php[/custom_headline]

Die neue index.php Datei soll die bestehende index.html ablösen. Wichtig ist dabei, dass dein Webserver auch PHP unterstützen sollte. Erstelle demzufolge eine neue Datei namens index.php und kopiere dir aus der index.html Datei folgende Zeilen:
[code]<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=1024″ />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>

<meta name=”description” content=”impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.” />
<meta name=”author” content=”Bartek Szopka” />

<link href=”http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic” rel=”stylesheet” />

<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 presentation.</p>
<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”>
<!– Hier kommen die ganzen Folienparameter rein –>
</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>
<script src=”js/impress.js”></script>
<script>impress().init();</script>
</body>
</html>[/code]
Dies sind alle Zeilen von 1-147 (ohne Kommentare), sowie von 316-395.
Also alle Steuerungsparameter, CSS-Einbindungen, JavaScripts und HTML-Codes. Ganz ohne den jeweiligen “Folien”-Parametern (diese würden zwischen den Zeilen 24 und 26 in dieser obigen Ansicht Platz finden (wo der Kommentar “<!– Hier kommen die ganzen Folienparameter rein –>” ersichtlich ist).

Du kannst diese Datei übrigens auch [hier] downloaden, falls du es nicht selbst coden möchtest.

Wenn du jetzt diese index.php (nicht die index.html) auf deinen Webserver transferierst und im Browser öffnest, so solltest du nicht viel sehen. Nur das übliche Hintergrundbild von Impress.js und Ende. Denn die Folien sind ja (noch) nicht eingebunden 🙂

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]FolienOrdner[/custom_headline]

Demzufolge erstellen wir nun den Folienordner bzw. die Datei für die erste Folie aus der Demoversion. Zur Erinnerung, das waren diese Zeilen:
[code] <div id=”bored” class=”step slide” data-x=”-1000″ data-y=”-1500″>
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>[/code]
Dazu erstellen wir in unserer Basis einen neuen Ordner namens “folie01”.
Alles klein geschrieben, da das im Web meistens so der Fall ist und wir uns demzufolge nicht viel Gedanken machen müssen, ob etwas groß oder klein geschrieben wurde und mit einer zweistelligen Zahl, in diesem Fall “01”. Somit sind wir gewappnet für Präsentationen von 1-99 Folien.

impress_step01

 

Als nächsten Schritt wechseln wir in diesen neu erstellten Ordner und legen darin ganz einfach zwei neue Dateien an. Einmal mit dem Namen “slide.php” und einmal mit dem Namen “slide.css”. Die erste Datei übernimmt dabei den Inhalt der Folie, also Text und Formatierungsparamter. Die zweite Datei dient als Platzhalter für etwaige gesonderte CSS-Inhalte.

impress_step02

 

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Die erste slide.php[/custom_headline]

Nun kopieren wir den Inhalt der ersten Folie in die neu erstellte slide.php Datei:
[code] <div id=”bored” class=”step slide” data-x=”-1000″ data-y=”-1500″>
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>[/code]
Speichern und schliessen. Aber wir sind klarerweise noch nicht fertig.
Du kannst diese slide.php Datei übrigens auch [hier] downloaden.

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Einbinden der slide.php in die index.php[/custom_headline]

So, zur Kontrolle binden wir diese erste slide.php Datei manuell (!) in unsere index.php Datei ein. Dazu wechseln wir wieder in die index.php Datei und konzentrieren uns auf diesen Abschnitt:
[code]<div id=”impress”>
<!– Hier kommen die ganzen Folienparamter rein –>
</div>
[/code]
Dieser ist nun nämlich auf folgendes zu ändern:
[code]<div id=”impress”>
<?php include ‘folie01/slide.php’;?>
</div>[/code]
Was haben wir da nun gemacht?!
Ganz einfach, via PHP-Code wurde die slide.php, die ja in dem Ordner “folie01” liegt, eingebunden. Öffnest du nun die Präsentation so sieht diese so aus: http://ronny.dechler.headlong.at/sandbox/impressjs/version01/index.php

Du solltest also nur eine Folie sehen. Ohne Animation, ohne irgendwas:

impress_step03

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]slide.php mit Mediendateien[/custom_headline]

Jetzt stellen wir gleich einmal sicher, dass auch die Medieneinbindung für jede einzelne Folie funktioniert. Dafür laden wir uns irgendein Bild herunter. In meinem Beispiel ist es diese PersonalID-Card von flaticon.com. Speichere diese Datei einfach in den “folie01”-Ordner:

impress_step04Ergänzen wir nun die slide.php um diesen Code; weil ja die Bilddatei im selben Ordner wie die slide.php liegt

[code] <div id=”bored” class=”step slide” data-x=”-1000″ data-y=”-1500″>
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
<img src=”65103.png”>
</div>[/code]
Und machen dann einen Test, so werden wir erstaunt (oder auch nicht) feststellen, dass Impress.js die Bilddatei nicht finden kann:

impress_step05

Warum? Bzw. warum nicht?
Nun, weil die index.php der Ursprungspfad für alle Dateien ist. Und die Bilddatei liegt aber nicht im selben Ordner wie die index.php Datei, sondern eben in einem Unterordner. Also korrigieren wir den Code in der Slide.php auf folgendes:
[code]<?php
// ********************************************************************
// Kleines PHP-Skript um den Ordnernamen dieser slide.php festzustellen
$verzeichnisInclude = dirname(__FILE__); // In welchem relativen Pfad liegt diese Datei
$pos = strripos($verzeichnisInclude, “/”)+1; // Ermittle das letzte / und gib die Position um +1 zurück
$letzterordner = substr($verzeichnisInclude, $pos); // Schneide den Pfad ab dem letzten gefunden / nach links ab und speichere den Wert in der Variable $letzterordner
// Ende des kleinen PHP Skripts um den Ordnernamen festzustellen
// ********************************************************************
?>

<div id=”bored” class=”step slide” data-x=”-1000″ data-y=”-1500″>
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
<img src=”<?php echo $letzterordner; ?>/65103.png”>
</div>[/code]
Uhh… das ist ja ne Menge neuer Code. Und was bedeutet er?
[code]<?php
$verzeichnisInclude = dirname(__FILE__);
$pos = strripos($verzeichnisInclude, “/”)+1;
$letzterordner = substr($verzeichnisInclude, $pos);
?>[/code]
Das PHP Skript am Anfang ermittelt in welchen Webserververzeichnis diese letzte PHP Datei liegt. Das Webserververzeichnis kann man allerdings nicht korrekt verwenden, da wir ja lieber mit Domainnamen arbeiten. Also ermitteln wir aus dem ganzen Webserverpfad, der übrigens so aussehen kann “/home/server01/pfad/benutzer/domain/script” den letzten Backslash bzw. dessen Position.

Dann fügen wir an diesen Positionswert noch eins hinzu (+1) und schneiden dann alles davor (!) ab. Übrig bleibt von dem ganzen langen Pfad nur noch “script” oder in unserem Fall eigentlich “folie01”. Dieser Wert wird dann wiederum in die PHP-Variable “$letzerordner” gespeichert.

Und nun binden wir diese PHP-Variable bei unserem Bildpfad ein:
[code]<img src=”<?php echo $letzterordner; ?>/65103.png”>[/code]
Ein neuer Test sollte dann so aussehen:

impress_step06

Prima, oder?

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Aufräumen und Überblick behalten[/custom_headline]

Doch dieser neue PHP-Code der da nun den Pfad ermittelt, der nervt mich in der eigentlichen Foliendatei. Denn wenn wir das öfters machen bzw. anpassen wollen, dann haben wir nicht mehr viel Unterschied zur ursprünglichen index.html Datei. Viel Code, wenig Übersicht.

Aus diesem Grund extrahieren wir diesen Code in eine neue Datei, namens functions.php
[code]<?php
// ********************************************************************
// Kleines PHP-Skript um den Ordnernamen dieser slide.php festzustellen
// Ausgewiesene Variable: $letzterordner

$verzeichnisInclude = dirname(__FILE__); // In welchem relativen Pfad liegt diese Datei
$pos = strripos($verzeichnisInclude, “/”)+1; // Ermittle das letzte / und gib die Position um +1 zurück
$letzterordner = substr($verzeichnisInclude, $pos); // Schneide den Pfad ab dem letzten gefunden / nach links ab und speichere den Wert in der Variable $letzterordner

?>[/code]
Wie du siehst, schreibe ich auch sehr viele Kommentare mit. Das hat den Grund, dass ich mir später (in 2 oder 3 Monaten) sehr viel leichter tue, den Code nachzuvollziehen und auch anzupassen. Das solltest du dir auch angewöhnen 🙂

 

In der slide.php Datei ändern wir den Code nun auf:
[code]<?php include ‘functions.php’;?>
<div id=”bored” class=”step slide” data-x=”-1000″ data-y=”-1500″>
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
<img src=”<?php echo $letzterordner; ?>/65103.png”>
</div>[/code]
Warum?
Nun, die neue functions.php (die “zurzeit” nur den Pfad ermittelt) wird ganz am Anfang der Folie eingebunden, stellt alle notwendigen Parameter zur Verfügung die wir in der Folie selbst brauchen und belastet diese aber nicht, so dass alles schön übersichtlich bleibt.

Deine Ordnerstruktur des Ordners “folie01” sollte nun übrigens so aussehen:

impress_step07

 

Alles klar soweit?
Das war jetzt etwas viel, zugegeben. Aber somit haben wir einmal die Regeln für alle künftigen Folien festgelegt. Die Struktur mit allen Dateien kannst du übrigens [hier] downloaden.

In meinem nächsten Artikel namens Impress.js – slide-functions machen wir ein paar Aufräumarbeiten.

[content_band class=”center-text” no_margin=”true” inner_container=”true” border=”vertical” bg_color=”#fff”]
[container]
[column type=”1/1″ last=”true” fade=”true” fade_animation=”in”]
[gap size=”1%”]

[icon type=”thumbs-up”] Notiz am Rande: Wenn ein Artikel gefällt, dann empfehle ihn doch bitte weiter. Nichts macht mehr Spaß, wenn man sieht, dass die Arbeit auch durch Liken & Sharen ein wenig Anerkennung findet. Liken & Sharen – eine bessere kostenlose Anerkennung gibt es nicht 😉

[gap size=”1%”]
[share title=”Liken & Sharen” facebook=”true” twitter=”true” google_plus=”true” pinterest=”true” email=”true”]
[/column]
[/container]
[/content_band]

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Weitere Beiträge[/custom_headline]
[recent_posts count=”4″ category=”impress”]

Post a Comment