ePaper auf einer Webseite einbinden

Kontrollieren Sie Ihr ePaper vor dem Download
Das Zip–Paket herunterladen und entpacken
Die Ordnerstruktur unserer ePaper
Das ePaper auf einen Server laden
Das ePaper im HTML Code einer Webseite einbetten

ePaper auf einer Webseite einbinden

Teil 1

Unsere ePaper lassen sich ganz einfach und in wenigen Schritten auf einer Webseite einbinden. Im ersten Teil dieses Tutorials erfahren Sie kurz und bündig was Sie dafür tun müssen.

1. Kontrollieren Sie Ihr ePaper vor dem Download: Unsere Server funktionieren wie jeder andere Server. Treten Fehler im ePaper auf, sind diese meist schon an diesem Punkt ersichtlich.

2. Laden und entpacken Sie das Zip–Paket: Nach dem Kauf oder dem Publizieren eines ePaper können Sie sich das Zip-Paket herunterladen. Als "Standard"-Kunde erhalten Sie dafür eine E-Mail mit dem entsprechenden Downloadlink. Als "Pro"-Kunde können Sie die Zip-Datei direkt über das CMS herunterladen. Entpacken Sie diese Zip-Datei, am Besten in einen eigenen Ordner. Im Rootordner des entpackten ePapers finden Sie die index.html, über die Sie das ePaper auch lokal in einem Browser öffnen können.

3. Laden Sie das ePaper vollständig auf einen Server: Die Betonung liegt dabei auf vollständig. Sie müssen darauf achten, dass auch alle Unterordner und die darin befindlichen Dateien komplett auf den Server übertragen wurden. Komplett und alle Dateien!

4. Verlinken Sie das ePaper auf Ihrer Webseite: Nach dem Upload verlinken Sie auf einer Webseite einfach die index.html im Rootordner des ePapers. Dort finden Sie auch die demo.html. Öffnen Sie diese Datei in einem Browser, bekommen Sie weitere Beispiele zur Integration unserer ePaper angezeigt.

Sie haben bisher wenig Erfahrung mit Internet, Servern oder Webseiten und wissen noch nicht so recht was Sie machen müssen? Sie haben niemanden, den Sie damit beauftragen möchten, das ePaper auf Ihrer Seite zu integrieren? Keine Sorge, im Zweiten Teil des Tutorials erklären wir Ihnen das noch einmal ganz ausführlich.

Teil 2

In diesem Teil des Tutorials möchten wir Ihnen detailliert aufzeigen, wie Sie ein ePaper auf Ihrer Webseite anzeigen lassen können. Dabei werden wir Ihnen den Umgang mit dem Zip – Paket erklären, auf die Ordnerstruktur unserer ePaper eingehen, verschiedene Möglichkeiten der Einbindung im HTML Code vorstellen und Sie natürlich auch auf die Stellen aufmerksam machen, an denen die meisten Fehler gemacht werden.

1. Kontrollieren Sie Ihr ePaper vor dem Download

Der wichtigste Schritt ist, dass Sie bereits vor dem Download Ihr ePaper sorgfältig kontrollieren. Bei einem Standard ePaper bekommen Sie eine E-Mail mit dem Betreff Link zu Ihrer ePaper-Ausgabe zugeschickt. Über den darin enthaltenen Link, können Sie das ePaper in verschiedenen Browsern testen. Als Pro Kunde ist neben der Kontrolle über die ePaper Vorschau auch ein Test über einen Vorschau-Link zu empfehlen. In beiden Fällen, beim Link zu Ihrer ePaper-Ausgabe sowie beim Vorschau-Link werden die ePaper in genau der selben Struktur auf einem speziellen Bereich unserer Server kopiert, in welcher diese auch auf Ihrem Webserver liegen würden. Treten Probleme wie zum Beispiel falsche Darstellungen oder der Absturz des Browsers beziehungsweise des Flashplugins auf, dann können Sie diese schon hier feststellen, also bevor Sie sich das ePaper herunter laden. Wodurch solche Fehler auftreten und wie Sie diese beheben oder am Besten gleich ganz vermeiden können Sie unter den folgenden beiden Links nachlesen:

 Ein weiterer Vorteil ist, Sie können über diese Links Ihr ePaper auch auf mobilen iOS und Android Geräten testen. Sollten Sie Ihr iPad gerade nicht zur Hand haben, dann können Sie den HTML5 Player des ePapers auch in einem WebKit Browser wie Google Chrome oder Safari aufrufen. Dazu fügen Sie nach dem letzten Slash in der Adressleiste des Browsers den Dateinamen mobile.html ein, also zum Beispiel

http://www.1kserver.com/preview/28d495330d19044334bc694cd1e/mobile.html

und schon erhalten Sie die Ansicht, in der das ePaper auf einem Tablet oder einem Telefon angezeigt werden würde.

01.google_chome_mobile_b.png

Kaufen oder publizieren Sie also ein ePaper immer erst, nachdem Sie es getestet haben. So sparen Sie sich, wenn es zu einem Fehler kommen sollte wertvolle Zeit und Nerven.

 

2. Das Zip–Paket herunterladen und entpacken

Bei einem Standard ePaper erhalten Sie nach dem Kauf eine weitere E-Mail mit dem Betreff 1000°ePaper - Ihr ZIP-Paket. In dieser Mail finden Sie den Download Link über den Sie das Zip-Paket herunterladen können. Als Pro Kunde können Sie das Zip-Paket nach dem Publizieren direkt über Ihren Account herunterladen. Klicken Sie dazu im Menü ePaper Aktionen auf der rechten Seite auf die Schaltfläche ZIP downloaden.

Eine Zip Datei ist letztendlich nichts weiter als ein Container oder ein Daten-Paket, in dem mehrere Dateien zu einer einzigen Datei zusammengefasst werden. Nachdem Sie dieses Paket heruntergeladen haben, müssen Sie es entpacken, damit die einzelnen Dateien wieder verfügbar sind. Um eine Zip-Datei zu entpacken benötigen Sie unter Umständen ein Packprogramm (Kostenloses Packprogramm: http://www.filzip.com/de/), in aller Regel sind aber entsprechende Programme bereits im Betriebsystem integriert. Es reicht beim Mac ein Doppelklick auf die Zip-Datei und das entsprechende Programm wird geöffnet und Sie können den Inhalt des Zip-Paketes auf Ihrem Rechner entpacken. Auf Windows Systemen klicken Sie mit der rechten Maustaste auf die Zip-Datei. Im Kontextmenü werden Ihnen dann die entsprechenden Optionen zum Entpacken angezeigt.

Achten Sie darauf, dass Sie die Zip-Datei nicht direkt auf dem Desktop, sondern in einem Ordner entpacken. Wenn man noch nicht vertraut mit einem Packprogramm ist, kann einem dieser Fehler leicht unterlaufen. Je nach Seitenanzahl eines ePapers enthält das Zip-Paket mehrere hundert einzelne Dateien und diese alle wieder vom Desktop zu entfernen kann einen schon eine Weile beschäftigen. Legen Sie sich also lieber einen neuen Ordner an, in den Sie die Zip-Datei verschieben oder kopieren und entpacken Sie diese erst dann.

02.zip_entpacken.png

 

3. Die Ordnerstruktur unserer ePaper

Nach dem Entpacken steht Ihnen ein Ordner zur Verfügung, der in seiner Bezeichnung den Namen Ihres ePapers enthält. Diesen Ordner bezeichnen wir, weil er die oberste Ebene des ePapers ist, auch als Rootordner (Wurzel), der die kompletten Daten enthält, die für die korrekte Funktion benötigt werden.

03.Rootordner_epaper.png

Diesen Rootordner müssen Sie komplett, also mit allen Unterordnern und Dateien auf Ihren Server hochladen, um das ePaper auf einer Webseite integrieren zu können. Lassen Sie uns aber zunächst einen Blick in diesen Ordner werfen. Im folgenden Screenshot sehen Sie eine Übersicht über die Struktur innerhalb des Rootordners.

04.im_epaper_rootordner.png

Die index.html, im Bild grün hervorgehoben, ist die Startdatei eines jeden ePapers. Wenn Sie diese Datei in Ihrem Browser öffnen, können Sie das ePaper auch von Ihrem lokalem Rechner aus starten und so überprüfen, ob alle Daten auch komplett heruntergeladen wurden. Orange markiert sehen Sie die mobile.html über die das ePaper auf Android oder iOS Geräten gestartet wird. Über diese Datei können Sie den HTML5 Player des ePapers in einem WebKit Browser wie Google Chrome oder Safari, aufrufen. Die gelb hinterlegten Dateien, demo.html und demo_en.html enthalten einige Code Beispiele, wie Sie ein ePaper konkret auf Ihrer Webseite einbetten können. Auch diese Dateien können Sie einfach im Browser öffnen.

Rot hervorgehoben ist der Unterordner epaper. In diesem Ordner liegt unter anderem die original PDF Datei, aus der Ihr ePaper erstellt wurde. Außerdem finden Sie darin mehrere Vorschaubilder des ePapers, die Sie zur Integration auf Ihrer Webseite verwenden können. Lassen Sie uns auch diesen Ordner ein wenig genauer betrachten.

 

05.im_epaper_epaperordner.png

Grün markiert sehen Sie die Teaser Bilder, die in jedem ePaper enthalten sind. Diese JPG´s können Sie also immer verwenden, um ein ePaper auf Webseiten anzupreisen. Das Selbe gilt für das gelb unterlegte epaper-ani.gif. Dieses können Sie nutzen, um eine animierte Vorschau für das ePaper zu erstellen.

Die Original PDF, aus der das ePaper erstellt wurde, sehen Sie Rot hervorgehoben. Insofern Sie im CMS keinen anderen Namen für die PDF angegeben haben wird diese Datei bei einem Pro ePaper als ausgabe.pdf und bei einem Standard ePaper als epaper.pdf ausgeliefert. Ein kleiner Tipp am Rande, in einem Standard ePaper können Sie diese Datei durch eine gleichnamige PDF, z.B. ein Kontaktformular, ersetzen, wenn Sie nicht möchten, dass sich Leser die original PDF herunterladen. Als Pro Kunde können Sie den Download der Gesamt PDF im CMS deaktivieren. Dann wird die PDF nicht im Ordner hinterlegt und Sie verringern so ein wenig die Gesamtgröße des ePapers.

Sie haben nun einen Überblick über die wichtigsten Dateien, die Sie für die erfolgreiche Einbindung eines ePapers benötigen.

 

4. Das ePaper auf einen Server laden

Im nächsten Schritt werden wir Ihnen erläutern, wie Sie das ePaper auf einen Webserver laden. Auch ein Webserver verfügt über ein Rootverzeichnis, in welchem Sie Dateien speichern und weitere Ordner anlegen können. Im Browser können Sie auf diese Dateien und Ordner über die URL in der Adressleiste aufrufen.

Um Dateien auf Ihren Server hochzuladen, benötigen Sie in der Regel Programm, einen sogenannten FTP-Client, welches Ihnen den Datenaustausch zwischen Ihrem lokalen Rechner und dem Server ermöglicht. Ein solches Programm, welches kostenlos zur Verfügung steht, ist zum Beispiel der FTP-Client von Filezilla (http://www.filezilla.de/). Für den Mozilla FireFox gibt es mit FireFTP auch ein einfach zu bedienendes Add-On für diese Aufgaben. (https://addons.mozilla.org/de/firefox/addon/fireftp/).

Unser Server für dieses Beispiel ist über die Domain http://beispiele.1000grad-epaper.de/ im Internet erreichbar. Um die Übersicht zu wahren habe ich mit Filezilla auf dem Server ein weiteres Verzeichnis demo_einbinden angelegt. Über den Browser kann man auf dieses Verzeichnis somit über die URL  http://beispiele.1000grad-epaper.de/epaper_einbinden/ zugreifen. In diesen Ordner werde ich das Beispiel ePaper hochladen.

06.filezilla_b.png

Die meisten FTP-Clients sind ähnlich aufgebaut. Links wird Ihnen der Inhalt Ihres lokalen Rechners angezeigt, rechts hingegen sehen Sie den Inhalt des Servers. Wechseln zunächst auf der Linken Seite in das Verzeichnis, in welchem sich das entpackte ePaper befindet. Auf der rechten Seite öffnen Sie das Verzeichnis, in welchem das ePaper auf dem Server liegen soll. Um das ePaper im Filezilla hochzuladen brauchen Sie nur mit der rechten Maustaste auf das ePaper zu klicken und anschließend den Punkt Hochladen aus dem Kontextmenü zu wählen. Filezilla lädt anschließend das komplette ePaper mit allen Unterordnern und den darin enthaltenen Dateien auf den Server.

Nicht jeder FTP-Client überträgt Unterordner und deren Dateien automatisch. Oft muss unter den Einstellungen des jeweiligen Programms angegeben werden, was übertragen werden soll. Manche Clients erlauben sogar nur den Upload von einzelnen Ordnern und ignorieren Unterordner gänzlich. In diesem Fall müssen Sie jeden im ePaper enthaltenen Ordner einzeln hochladen. Auf jeden Fall müssen Sie an dieser Stelle kontrollieren ob alle Dateien hochgeladen wurden, denn es werden alle Dateien benötigt damit das ePaper einwandfrei funktioniert. Im folgenden Bild sehen Sie auf der rechten Seite den Rootordner des ePapers auf dem Server, die index.html als Startdatei ist grün hervorgehoben.

07.filezilla_nach_upload_b.png

 

5. Das ePaper im HTML Code einer Webseite einbetten

Mit dem Upload auf dem Server ist das ePaper über eine URL im Internet erreichbar. Diese URL setzt sich aus der Domain des Servers, dem Verzeichnis in welchem sich das ePaper befindet, dem Namen des Rootordners des ePapers sowie dem Namen der Startdatei, also index.html zusammen. Die einzelnen Teile der URL werden dabei durch einen Slash getrennt, so wie Sie es auch vom Dateisystem Ihres Computers her kennen. Um die Startdatei des ePapers in der Adressleiste des Browsers direkt aufzurufen, ergibt sich für unser Beispiel also die folgende konkrete URL:

http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/index.html

Die meisten heutigen Web-Server sehen einen oder mehrere bestimmte Dateinamen als Datei für die "Einstiegsseite" vor. Meistens ist das der Name index.html, index.htm oder index.php. Wird ein bestimmtes Verzeichnis über den Browser aufgerufen, in dem sich solch eine Indexdatei befindet, wird diese automatisch als erste Datei aufgerufen. Dies kann aber immer in den Servereinstellungen geändert werden. Testen Sie also auf Ihrem Server ob Sie den Namen der Startdatei angeben müssen, damit die URL funktioniert.

08.url__im_browser_b.png

Wie schon erwähnt können Sie über die mobile.html das ePaper in einem WebKit Browser im HTML5 Player öffnen. Die mobile.html liegt auf dem Server auf der selben Ebene wie die index.html, die URL um die Ansicht für die mobilen Geräte zu starten lautet in unserem Beispiel also:

http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/mobile.html

Sie kennen nun die wichtigsten Dateien, die Sie benötigen um ein ePaper auf einer Webseite zu integrieren und wissen wie Sie diese Dateien über URL´s in einem Browser aufrufen können. Mit diesem wissen können Sie das ePaper nun konkret in den HTML Code Ihrer Webseite einbauen. Um dies zu veranschaulichen, habe ich eine kleine Demoseite erstellt und in den Ordner demo_einbindenauf den Server geladen. Die Seite ist somit über http://beispiele.1000grad-epaper.de/epaper_einbinden/ erreichbar.

Die einfachste Möglichkeit ist das ePaper zu verlinken. Links oder Anker werden im HTML durch das Tag <a></a> aus gezeichnet. Dabei wird zwischen einem öffnenden und einem schließenden Tag unterschieden. Zwischen den spitzen Klammern können Sie einen kleinen Hinweistext, z.B. „Klicken Sie hier“ angeben. Im öffnenden Tag, also dem ersten von den beiden Tags müssen wir noch angeben, wohin verlinkt werden soll. Dies geschieht über das Attribut href="". Innerhalb der Anführungszeichen können wir nun die URL zur Startdatei des ePapers angeben. Mein komplettes HTML Tag sieht also wie folgt aus:

<a href="http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/index.html" target="_blank">
Klicken Sie hier um das ePaper zu &ouml;ffnen</a>

Zusätzlich habe ich innerhalb des öffnenden Tags ein weiteres optionales Attribut target="" hinzugefügt. Über dieses Attribut kann ich dem Browser mitteilen wo der Link geöffnet werden soll. Der Parameter _blank gibt vor, dass sich das ePaper, in Abhängigkeit von den Browsereinstellungen entweder in einem neuen Tab oder Fenster öffnen soll. Auf der folgenden Abbildung sehen Sie die Einbindung per Link auf unserer Demoseite.

09.einbinden_als_link_b.png

Nun wollen wir Ihnen noch an einem Beispiel zeigen, wie Sie das ePaper über die mitgelieferten Teaserbilder einbinden können. Wie unter 3. erklärt liegen diese Bilder im Ordner epaper, einem Unterordner des Rootverzeichnisses des ePapers. Wenn Sie also das animierte Vorschaubild zur Integration nutzen wollen ergibt sich zum Aufruf im Browser die folgende URL:

http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/epaper/epaper-ani.gif

Um Bilder im HTML zu integrieren gibt es wiederum ein eigens Tag <img>. Dieses Tag steht für sich alleine und muss nicht geschlossen werden. Innerhalb dieses Tags können Sie wiederum über das Attribut src="" angeben, wo sich das Bild befindet. Tragen Sie also zwischen den Anführungszeichen die URL zum animierten Vorschaubild ein. In unserem Beispiel sieht das komplette Tag wie folgt aus.

<img src="http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/epaper/epaper-ani.gif">

Das img–Tag fügen Sie nun komplett, an Stelle des Hinweistextes zwischen dem öffnenden und dem schließneden Link-Tag ein.

<a href="http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/index.html" target="_blank">
<img src="http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/epaper/epaper-ani.gif">
</a>

Auf unserer Demoseite ergibt sich daraus die folgende Ansicht.

10.einbinden_ueber_ani_gif_b.png

Weitere Codebeispiele zum Einbinden finden Sie in der demo.html im Rootordner des ePapers. Diese Datei wird in jedem unserer ePaper mit ausgeliefert. Über den folgenden HTML Code habe ich die demo.html auf unserer Demoseite integriert:

<a href="http://beispiele.1000grad-epaper.de/epaper_einbinden/epaper-Mein_zweites_ePaper/demo.html" target="_blank">Zur demo.html</a>

11.einbinden_demo_html_b.png

Wenn Sie weitere Fragen zu HTML haben, finden Sie eine gute deutschsprachige Dokumentation unter http://www.selfhtml.org/. Dort finden Sie eine umfangreiche Referenz sowie viele hilfreiche Tutorials über HTML, CSS und das Internet. Wir hoffen, wir konnten Ihnen einen hilfreichen Einstieg zu diesem Thema bieten.

 

Jetzt ePaper Standard testen!

Jetzt anmelden und alle Features des ePaper Professionals ausprobieren!

 

Zur Übersicht Rund um´s 1000° ePaper

Zur Übersicht Tipps und Tricks

War dieser Beitrag hilfreich?
3 von 3 fanden dies hilfreich
Haben Sie Fragen? Anfrage einreichen

Kommentare

  • Avatar
    Murr

    Perfekt beschreiben. Das ist eine sehr gute Hilfestellung!