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

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 der E-Mail, die wir vor dem Kauf senden. 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 senden wir Ihnen eine E-Mail mit dem entsprechenden Downloadlink. Das 1000° ePaper Professional können Sie direkt über das ePaper CMS herunterladen. 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 senden wir Ihnen eine E-Mail mit dem Betreff Link zu Ihrer ePaper-Ausgabe. Über den darin enthaltenen Link, können Sie das ePaper in verschiedenen Browsern testen. 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, beim Link zu Ihrer ePaper-Ausgabe sowie beim Vorschau-Link werden 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 unserer 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, erhalten Sie von uns eine weitere E-Mail mit dem Betreff 1000°ePaper - Ihr ZIP-Paket. In dieser Mail finden Sie den Link über den Sie die Zip-Datei herunterladen können. Im ePaper CMS können Sie die Zip-Datei 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.

epaper_root_folder.png

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.

epaper_subfolder.png

Die Teaser-Bilder, haben wir grün markiert. Gelb hervorgehoben sehen Sie das epaper-ani.gif, als animierte Variante des Titelbildes. Diese Dateien werden in all unseren ePapern 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.

epaper_before_upload.png

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. Wie das funktioniert, beschreiben wir hier.

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.

epaper_after_upload_pfad.png

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.

epaper_url_800px.png

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.

epaper_integration_link_800px.png

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.

epaper_int_anigif_800px.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 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.

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!