Teil 1

Unsere ePaper lassen sich 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. Wenn Sie Ihre ePaper über einen Weblink bei uns veröffentlichen, ist nur der 4. Punkt von Relevanz.

1. Kontrollieren Sie Ihr ePaper vor dem Download: Treten Fehler im ePaper auf, sind diese meistens schon auf unseren Servern sichtbar. Nutzen Sie zur Kontrolle immer einen Vorschau-Link. Für ein 1000°ePaper Standard finden Sie diesen in Ihrer Nutzeroberfläche im ePaper Studio. Als Nutzer des ePaper CMS können Sie sich für jedes ePaper vor dem Veröffentlichen einen Vorschau-Link generieren.
2. Laden und entpacken Sie das Zip–Paket: Nach dem Kauf oder dem Publizieren eines ePaper laden Sie sich die Zip-Datei herunter. Für das ePaper Standard lasen Sie direkt im ePaper Studio herunter, das 1000° ePaper Professional über das ePaper CMS. Entpacken Sie die Zip-Datei in einen eigenen Ordner. Im obersten Ordner (Rootordner) finden Sie nach dem Entpacken die index.html, die Startdatei des ePapers. Diese Datei können Sie übrigens auch lokal in einem Browser öffnen.
   
3. Laden Sie das ePaper vollständig auf einen Server: Die Betonung liegt dabei auf vollständig. Achten Sie unbedingt darauf, dass auch alle Unterordner und die darin befindlichen Dateien komplett auf den Server hochgeladen wurden.
4. Verlinken Sie das ePaper auf Ihrer Webseite: Nach dem Upload verlinken Sie auf einer Webseite einfach die index.html aus dem Rootordner des ePapers. Die vollständige URL-Adresse ergibt sich in der Regel aus der Server-Domain und dem Pfad zur index.html des ePapers.

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 erklären wir Ihnen detailliert, wie Sie ein ePaper auf Ihrer Webseite anzeigen lassen. Wir zeigen dabei den Umgang mit der Zip-Datei, erklären die Ordnerstruktur unserer ePaper. Zum Schluss stellen wir ein paar Möglichkeiten vor, wie Sie ein ePaper im HTML Code auf einer Webseite integrieren. Natürlich nennen wir auch die Stellen, an denen die meisten Fehler gemacht werden.

1. Kontrollieren Sie Ihr ePaper vor dem Download

Der wichtigste Schritt ist, dass Sie ein ePaper bereits vor dem Herunterladen sorgfältig kontrollieren. Das erspart, sollte tatsächlich ein Fehler auftreten, erfahrungsgemäße wertvolle Arbeitszeit. Bei einem 1000°Standard ePaper können Sie im ePaper Studio für Ihr ePaper einen passwortgeschützten Link generieren. Den Link erhalten Sie per E-Mail zusammen mit den dazugehörigen Passwort. Sie können den Link 3 Tage lang nutzen und diesen z.B. zur Freigabe an Kunden oder Vorgesetzte weiterleiten. Als Professional Kunde sollte die finale Kontrolle im ePaper CMS über einen Vorschau-Link erfolgen. Nur über diesen können Sie das ePaper als voll funktionsfähige Version testen (die ePaper Vorschau selbst ist dazu nicht geeignet).  In beiden Fällen, werden über den Vorschaulink die ePaper in genau der Struktur auf unserem Server bereitgestellt, in der diese auch auf Ihrem Webserver liegen werden. Sie können über diese Links ein ePaper auch auf unterschiedlichen Geräten, Tablets und Smartphones testen.

Übrigens lassen sich sehr viele Fehler vermeiden, wenn Sie unsere PDF Anforderungen erfüllen. Prüfen Sie also am Besten vorab die PDF-Datei, aus der Sie eine ePaper erstellen wollen. 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

Haben Sie ein ePaper Standard gekauft, können Sie dieses direkt nach dem Publizieren im ePaper Studio als Zip-Datei herunterladen. Im ePaper CMS können Sie die Zip-Datei ebenfalls direkt nach dem Publizieren herunterladen. Klicken Sie dazu im Menü ePaper Aktionen auf der rechten Seite auf die Schaltfläche ZIP downloaden.

Die Zip-Datei ist im Endeffekt ein Container oder ein Paket, in dem viele einzelne Dateien enthalten  sind. Um an den Inhalt eines Paketes zu gelangen müssen Sie es öffnen. Um eine Zip-Datei zu entpacken benötigen Sie unter Umständen ein Packprogramm, in der Regel sind heutzutage entsprechende Tools im Betriebssystem integriert. Entpacken Sie eine ePaper Zip-Datei immer in einen eigenen Ordner. Je nach Seitenanzahl eines ePapers enthält das Zip-Paket mehrere hundert einzelne Dateien und diese alle wieder vom Desktop zu entfernen kann eine Weile dauern. Am Besten legen Sie sich einen neuen Ordner an, in den Sie die Zip-Datei verschieben oder kopieren und diese erst dann entpacken.

3. Die Ordnerstruktur unserer ePaper

Nach dem Entpacken steht Ihnen das ePaper als Ordner zur Verfügung. Betrachten Sie diesen Ordner als geöffnetes Paket, in dem Sie nun auf alle Dateien und Unterordner zugreifen können. In der obersten Ordnerebene finden Sie die index.html, im Bild grün hervorgehoben. Das ist die Startdatei eines jeden ePapers und wenn Sie diese in einem Browser öffnen, sollte das ePaper bereits auf Ihrem Computer funktionieren.

Im Unterordner epaper, im Bild rot markiert, finden Sie mehrere Vorschaubilder, die Sie bei der Integration auf Ihrer Webseite als Teaser verwenden können. Werfen wir einen Blick in diesen Ordner.

Die Teaser-Bilder, haben wir grün markiert. Gelb hervorgehoben sehen Sie das epaper-ani.gif, als animierte Variante des Titelbildes. Diese Dateien werden mit dem 1000°ePaper Professional ausgeliefert. Sie stehen auch zur Verfügung, wenn Sie ein ePaper über einen Weblink veröffentlichen. Sie können also immer darauf zugreifen, um ein ePaper auf Webseiten hervorzuheben.

4. Das ePaper auf einen Server laden

Der nächste Schritt besteht darin das ePaper auf einen Webserver hochzuladen. In der funktioniert der Datenaustausch zwischen Ihrem Computer und dem Server über ein Programm über das File Transfer Protokoll. Ein zuverlässiges und kostenloses Tool für genau diesen Zweck, ist der FTP-Client Filezilla (http://www.filezilla.de/). Diesen Client verwenden wir  in diesem Beispiel. Die meisten FTP-Clients sind ähnlich aufgebaut, zeigen in einem Teil das Dateisystem auf dem Computer, im anderen Teil die Daten und Ordner auf auf dem Server. Im folgenden Bild sehen Sie links die Daten auf einem lokalen Computers, rechts die Daten auf einem Server.

Suchen Sie über den Client zuerst auf Ihrem Computer zum ePaper, das Sie hochladen wollen. Navigieren Sie dann im Teil des Clients der den Server zeigt zum gewünschten Zielordner. Um das ePaper nun hochzuladen brauchen Sie nur mit der rechten Maustaste auf das ePaper zu klicken. Wählen Sie den Punkt Hochladen im Kontextmenü. Filezilla beginnt anschließend das ePaper auf den Server zu kopieren.

Nicht jeder FTP-Client überträgt Unterordner und deren Dateien automatisch. Wie die meisten Programme verfügen auch diese Clients über eigene Einstellungen. Dort muss angegeben werden, was bzw. auch wie übertragen werden soll. Auf jeden Fall müssen Sie nach dem Hochladen kontrollieren, ob alle Dateien des ePapers hochgeladen wurden. Im folgenden Bild sehen Sie das ePaper nach dem Upload. Die index.html als Startdatei ist grün markiert.

Übrigens, aus unserem CMS können Sie ePaper auch komplett auf einen Server übertragen. So können Sie sich das Herunterladen, Entpacken und Hochladen sparen.

Im folgenden Bild sehen Sie auf der rechten Seite den Root Ordner des ePapers nach dem Hochladen auf dem Server, die index.html als Startdatei ist grün hervorgehoben.

5. Das ePaper im HTML Code einer Webseite einbetten

Eine Webseite auf einem Server verfügt üblicherweise über ein Root-Verzeichnis, in welchem Dateien und weitere Ordner gespeichert werden. Sie können das in etwa mit dem Laufwerksbuchstaben auf dem Computer vergleichen, C: ist meist das Rootverzeichnis der Startfestplatte. Über den Dateiexplorer können Sie sich durch die Ordner klicken, in denen Sie Ihre Daten organisieren und speichern. Auf dem Server entspricht das Rootverzeichnis der Webseite üblicherweise einer Domain, wie zum Beispiel 1000grad-ePaper.de. In einem Browser werden Dateien und Ordner über die URL in der Adressleiste aufrufen, interpretiert und angezeigt.  Mit dem Upload auf dem Server ist das ePaper also über eine URL Adresse im Internet erreichbar.

In meinem Beispiel ist das Rootverzeichnis bzw. die Domain beispiele.1000grad-epaper.de. Dort habe ich das ePaper in den Ordner meine-epaper hochgeladen. Die index.html und somit die Startdatei des ePapers liegt im Ordner epaper-Demomagazin. Die vollständige URL um diese Datei im Browser ausführen zu lassen lautet somit http://beispiele.1000grad-epaper.de/meine-epaper/epaper-Demomagazin/index.html.

Nun kennen Sie die wichtigsten Dateien, die benötigt werden, um ein ePaper auf einer Webseite zu integrieren. Sie wissen wie Sie diese Dateien über URL´s in einem Browser aufrufen können. Um dies noch etwas weiter zu veranschaulichen, habe ich eine kleine Demoseite erstellt. Diese ist unter http://beispiele.1000grad-epaper.de/meine-epaper/ erreichbar.

Die einfachste Möglichkeit ist das ePaper zu verlinken. Links oder Anker werden im HTML durch das Tag <a></a> ausgezeichnet. Zwischen den spitzen Klammern können Sie einen kleinen Hinweistext, z.B. „Klicken Sie hier“ angeben. Im öffnenden Tag muss über das Attribut href="" angegeben werdem wohin verlinkt werden soll. Dazu wird die URL Adresse zur Startdatei des ePapers. innerhalb der Anführungszeichen angegeben. Über das Attribut target="" legt man für die Browser fest, wo der Link geöffnet werden soll. Der Parameter _blank gibt vor, dass sich das ePaper in einem neuen Tab oder Fenster öffnen soll. Mein Beispiel Code sieht somit wie folgt aus:

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

Auf der folgenden Abbildung sehen Sie die Einbindung per Link auf unserer Demoseite.

Nun zeigen wir Ihnen, wie Sie ein ePaper über die Teaserbilder auf der Webseite anzeigen lassen können. Wie bereits unter 3. Ordnerstruktur der ePaper erklärt liegen diese Bilder im Unterordner epaper, somit eine Ebene tiefer als die index.html. Um also z.B. das animierte Vorschaubild im Browser aufzurufen, ergibt sich die folgende URL:

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

Bilder werden im HTML durch das Tag <img src=""> ausgezeichnet. In Attribut src="" wird zwischen den Anführungszeichen die URL zum animierten Vorschaubild eingetragen. 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">

Diesen Code fügen wir nun, an Stelle des Hinweistextes, zwischen dem öffnenden und dem schließenden Link-Tag ein. Der vollständige Codeschnipsel lautet somit:

<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 Beispielseite sieht das wie folgt aus.

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 und CSS und das Internet.

Als letztes Beispiel, da auch sehr oft genutzt zeigen wir Ihnen noch den Code, über den Sie ein ePaper über einen iframe auf der Webseite einbetten.

<iframe src="URL Link zum ePaper" width="1080" height="720" scrolling="no" allowfullscreen></iframe>

Beachten Sie dazu bitte die folgenden Hinweise. Arbeiten Sie mit festen Werten als Angaben für die Breite und Höhe des iframes. Prozentangaben werden nicht von allen Browsern einheitlich interpretiert und sorgen vor allem im mobilen Safari für Probleme. scrolling=”no” unterdrückt die Anzeige von Scrollbars bzw. Bildlaufleisten innerhalb des iframe (diese Attribut wird in HTML5 allerdings nicht mehr unterstützt). NUR wenn das Attribut allowfullscreen angegeben ist, kann das ePaper im iframe auch im Vollbildmodus geöffnet werden, SONST NICHT. Dieses Attribut benötigt nicht zwingend Werte, kann aber zusätzlich mit einem =“true”, erlaube den Vollbildmodus oder =”false”, verweigere den Vollbildmodus übergeben werden. Dabei ist zu beachten, dass zum Beispiel Apple auf Tablets und Smartphones unter iOS generell keinen Vollbildmodus unterstützt.

Sie möchten die Vorgehensweise vorab testen? Laden Sie sich einfach unser Demo ePaper als Zip-Datei unter dem folgenden Link herunter: https://beispiele.1000grad-epaper.de/demo/epaper-Demomagazin_Player_4-1.zip

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!