Erstellen von HTML-Artikeln für DPS

Suchen

Ist dies auch der richtige Artikel?

Dieser Artikel bezieht sich auf Digital Publishing Suite. Zu Artikeln in AEM Mobile siehe Erstellen von HTML-Artikeln.

Sie können HTML-basierte Artikel zur Anzeige im Viewer in ein Folio importieren. Ein Vorteil von HTML-Artikeln ist die geringere Dateigröße, die sich besser für wöchentliche Veröffentlichungen und einfache Textartikel eignet. HTML-Artikel können auch Interaktivität enthalten, die im Folio Overlays-Bedienfeld nicht verfügbar ist.

Video-Tutorial

Laden von HTML-Artikeln

Colin Fleming

http://blog.colingrayfive.com/

Weitere Informationen zur Verwendung von Adobe Edge zum Erstellen von HTML für DPS finden Sie im Artikel von Raghu Thricovil Erweitern von DPS-Folios mit HTML-Animationen mit Adobe Edge (auf Englisch).

  1. Erstellen Sie einen Ordner mit HTML-Dateien.

    Sorgen Sie dafür, dass der Ordner nur Elemente enthält, die auch verwendet werden. Es werden sämtliche im Ordner befindlichen Elemente hochgeladen, auch dann, wenn sie nicht verwendet werden.

  2. Wenn Sie den HTML-Artikel in einen Ordner mit einer Ausrichtung importieren, fügen Sie das Suffix „_v“ oder „_h“ an die html-Datei an, z. B. index_h.html.

    Wenn Sie kein Suffix anfügen, wird der Artikel möglicherweise als Artikel mit zwei Ausrichtungen importiert. Wenn Sie versuchen, ein Folio mit einer Ausrichtung in einer Vorschau anzuzeigen oder zu veröffentlichen, wird eine Fehlermeldung angezeigt.

  3. Öffnen Sie im Folio Builder-Bedienfeld das Folio, in das der HTML-Artikel eingefügt wird.

  4. Wählen Sie in der Artikelansicht des Folio Builder-Bedienfelds aus dem Bedienfeldmenü die Option „Artikel importieren“.

  5. Wählen Sie die Option „Einzelnen Artikel importieren“, klicken Sie auf das Ordnersymbol „Speicherort“ und geben Sie den HTML-Ordner an.

    Zum Importieren von HTML-Artikeln können Sie auch die Option „Mehrere Artikel importieren“ (siehe Strukturieren von Ordnern für importierte Artikel) oder die Option „Mit sidecar.xml importieren“ (siehe Importieren von Artikeln mit pfadbasierten sidecar.xml-Dateien) verwenden.

  6. Legen Sie weitere Einstellungen wie Smooth-Scrolling fest und klicken Sie auf „OK“.

Wenn Sie die HTML-Dateien bearbeiten, wählen Sie den HTML-Artikel im Folio Builder-Bedienfeld aus und wählen Sie „Aktualisieren“.

Anforderungen für HTML-Artikel

  • Sie können eine einzelne HTML-Datei erstellen, die sich für die Anzeige sowohl im Hochformat als auch im Querformat eignet, oder für jede Ausrichtung eigene HTML-Dateien erstellen. Wenn Sie separate HTML-Dateien für Hoch- und Querformat verwenden, fügen Sie den HTML-Dateinamen die Suffixe „_v“ (vertikal) und „_h“ (horizontal) hinzu, z. B. „index_h.html“. Wenn Sie ein Folio mit nur einer Ausrichtung erstellen, müssen Sie nur eine HTML-Datei erstellen. Kennzeichnen Sie die HTML-Datei auch bei einem Folio mit nur einer Ausrichtung durch das Suffix „_h“ oder „_v“.

  • DHTML-Dateien (Dynamic HTML) werden derzeit nicht vollständig unterstützt.

  • In Bezug auf die Dateistruktur besteht die Möglichkeit, alle zugehörigen Grafiken und Skripte in den einzelnen Artikelordnern abzulegen. Eine andere Möglichkeit besteht darin, alle Grafiken und Skripte für das gesamte Folio in einer Datei „HTMLResources.zip“ zu platzieren. Importieren Sie die Datei „HTMLResources.zip“ über das Folio Builder-Bedienfeld oder den Folio Producer im Internet in das Folio. Siehe Importieren des Ordners HTMLResources.


    Beispiel für einen HTMLResources-Ordner

  • Achten Sie darauf, in Ihrem HTML-Code nur relative Pfadangaben zu verwenden. So erstellen Sie eine Verknüpfung zu einem Bild, das sich auf derselben Ebene befindet wie die HTML-Datei:

    <img src="GlobalImage.jpg"/>

    So erstellen Sie eine Verknüpfung zu einem Bild im Ordner „HTMLResources“:

    <img src="../HTMLResources/GlobalImage.jpg"/>

Informationen zum Erstellen von Hyperlinks für HTML-Artikel finden Sie unter Erstellen von „navto“-Hyperlinks für HTML-Artikel.

Erstellen von HTML-Artikeln für Android-Viewer

Hinweise und Anforderungen zum Erstellen von HTML-Artikeln für Android-Viewer finden Sie in den Anleitungen zum Erstellen von HTML-Artikeln für Android-Viewer.

HTML5-Ressourcen

Zulassen, dass Videos in HTML-Artikeln wie Videoüberlagerungen im Vollbildmodus funktionieren

Wenn Sie einen HTML-Artikel mit einzelner Ausrichtung und Links zu Videos erstellen, kann das Drehen des Geräts bewirken, dass auch das abgespielte Video gedreht wird. Wenn das Video vollständig abgespielt wurde, kann zudem der App-interne Browser für die Wiedergabe des Videos geschlossen werden. Um diese Funktion zu aktivieren, verwenden Sie in Ihrem HTML-Link für das Video das Präfix „videofile://“. Diese Option ist nur für iOS-Apps verfügbar.

Hinweis:

Beispiele für das Videoverhalten finden Sie in der kostenlosen App „DPS Tips“ mit HTML-Beispielen (nur auf Englisch).

Standard-Videoverhalten

In diesem Beispiel wird das Video in einem App-internen Browser abgespielt und in einem Folio mit einzelner Ausrichtung nicht gedreht.<a href="Links/video.mp4">Video abspielen</a>

oder <a href="../HTMLResources/videos/video.mp4">Video abspielen</a>

Erweitertes Videoverhalten

In diesem Beispiel wird das Video in einem Folio mit einzelner Ausrichtung korrekt gedreht; nach Ablauf des Videos wird erneut der Artikel angezeigt.<a href="videfile://Links/video.mp4">Video abspielen</a>

oder <a href="videofile://../HTMLResources/videos/video.mp4">Video abspielen</a>

JavaScript

Sie können dieses Verhalten auch über JavaScript auslösen, indem Sie die playFullscreenVideo-Funktion für das Window-Objekt verwenden.<a onclick="window.playFullscreenVideo('Links/video.mp4');">Video abspielen</a>

oder <a onclick="window.playFullscreenVideo('../HTMLResources/videos/video.mp4');">Video abspielen</a>

Streaming-Video

In diesem Beispiel wird ein Streaming-Video wiedergegeben.<a href="videohttp://www.mysite.com/video.mp4">Video abspielen</a>

Mehr

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Hilfreiche Links

Alle Abos anzeigen Abos verwalten
Hilfreiche Links einblenden
Hilfreiche Links ausblenden

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie