Erstellen von HTML-Artikeln für AEM Mobile

Suchen
Experience Manager Mobile Benutzerhandbuch

Auf dieser Seite

Gilt für: Experience Manager Mobile

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Zum Erstellen der HTML-Quelldateien für Ihre Artikel können Sie ein Content Management-System (CMS) wie Adobe Experience Manager oder ein beliebiges Werkzeug verwenden – Dreamweaver, CMS oder HTML-Editor. Wir empfehlen, CSS (Cascading Style Sheets) zu verwenden, um umfließbaren Inhalt für Tablets und Smartphones unterschiedlicher Größen zu erstellen.

Hinweis:

In einigen Fällen können Sie Adobe Muse verwenden, um die HTML-Ausgangsartikel zu erstellen. In den meisten Fällen sind jedoch erweiterte HTML-Kenntnisse erforderlich, um die HTML-Artikel für die Verwendung mit AEM Mobile zu bearbeiten.

Erstellen von HTML-Artikeln (Video)

Erstellen von HTML-Artikeln (Video)
Dieses Video wurde ursprünglich für Adobe Digital Publishing Solution aufgezeichnet. Das Verfahren gilt auch für AEM Mobile.
Adobe

In diesen Videoaufzeichnungen von Sitzungen bei der Adobe MAX 2015-Konferenz erhalten Sie einen detaillierten Einblick:

HTML clever einsetzen

Interaktiven HTML-Inhalt optimieren

Vorbereiten von HTML-Dateien für den Upload

Verwenden Sie HTML Article Packager, um Artikeldateien für HTML-Inhalt zu erstellen. Wenn Sie den Ordner mit den HTML-Dateien auf das Article Packager-Symbol ziehen, erstellt das Dienstprogramm die erforderliche Datei „manifest.xml“ und komprimiert die Dateien in einer Artikeldatei, die Sie hochladen können.

Informationen zum Herunterladen des HTML Article Packager finden Sie unter Installation und Einrichtung für AEM Mobile.

  1. Laden Sie HTML Article Packager herunter und installieren Sie ihn.

    Unter Mac OS doppelklicken Sie auf die heruntergeladene DMG-Datei und ziehen die HTML Article Packager-Datei in den Ordner „Programme“.

  2. Fügen Sie die HTML-Hauptdatei und die zugehörigen erforderlichen Elemente einem Ordner hinzu. Geben Sie der HTML-Hauptdatei den Namen index.html. Öffnen Sie diesen Ordner im Finder oder Explorer.

    Schließen Sie nur die Dateien ein, auf die im HTML-Code verwiesen wird. Wenn Sie Dateien wie PSD-Bilder einschließen, auf die nicht verwiesen wird, vergrößern Sie die Datei unnötig.

  3. Öffnen Sie den Ordner mit dem HTML Article Packager-Dienstprogramm (z. B. unter Mac OS den Ordner „Programme“) in einem anderen Finder- oder Explorer-Fenster.

  4. Ziehen Sie den HTML-Ordner auf das HTML Article Packager-Symbol und legen Sie ihn dort ab.

    HTML Article Packager

    Hinweis:

    Unter Windows muss sich der Ordner mit dem Artikel unter demselben Laufwerkspfad befinden, unter dem der HTML Article Packager installiert ist.

    Die Artikeldatei wird auf der gleichen Ebene wie der HTML-Ordner erstellt.

  5. Bearbeiten Sie den Artikel im On-Demand-Portal (https://aemmobile.adobe.com) und laden Sie die Artikeldatei hoch.

    Weitere Informationen finden Sie unter Verwalten von Artikeln in AEM Mobile.

Zusatzmodule für CMS-Systeme

Authoring für Adobe Experience Manager (AEM)

Konfigurieren von AEM für die Verwendung mit AEM Mobile

Drittanbieter-CMS-Systeme

Webbasiertes Authoring

 

Optimieren von HTML-Inhalten für mobile Geräte

HTML-Inhalte, die in Desktopbrowsern gut funktionieren, sind für mobile Geräte möglicherweise nicht genauso gut geeignet. Gehen Sie beim Erstellen von HTML-Artikeln wie folgt vor::

  • Optimieren Sie Bilder für mobile Geräte. Bei einem Bild mit 12.000 x 8000 Pixel und 300 dpi dauert die Verarbeitung länger als bei einem Bild mit 800 x 600 Pixel und 72 dpi. Vermeiden Sie unnötig große Bilder, um Speicherplatz zu sparen und die Leistung zu verbessern.
  • Optimieren Sie Video- und Audiodateien, um die Größe zu reduzieren und die Leistung zu verbessern.
  • Vereinfachen Sie Ihren Code für die Darstellung in mobilen Browsern und testen Sie ihn.

Weitere Informationen finden Sie unter Optimieren von Inhalten in AEM Mobile-Apps.

Verwenden von freigegebenen Schriftarten für HTML-Artikel

Sie können Verweise auf Schriftarten erstellen, die aus HTML-Artikeln in die App hochgeladen werden. Indem Sie auf Schriftarten verweisen, die in die App hochgeladen wurden, verbessern Sie die Download-Geschwindigkeit von Artikeln und die Performance.

 

 

Hinweis:

In HTML-Artikeln verwendete freigegebene Schriftarten werden nur in mobilen Apps unterstützt, nicht in Desktop Web Viewer. Um Schriftarten in Desktop Web Viewer verfügbar zu machen, können Sie sie in den HTML-Artikel einschließen oder APIs verwenden, damit sie über freigegebene Inhalte verfügbar sind.

  1. Laden Sie die Schriftarten in das On-Demand-Portal hoch („Inhalt und Layouts“ > „Schriftarten und App-Anpassung“). Weitere Informationen finden Sie unter AEM Mobile-Apps anpassen: Verwenden von benutzerdefinierten Schriftarten.

  2. Erstellen oder bearbeiten Sie im Bereich „Schriftarten und App-Anpassung“ im Portal die Schriftarten, auf die verwiesen werden soll. Stellen Sie sicher, dass das Feld „Name der Schriftartdatei“ nicht leer ist. Laden Sie die Schriftartendateien ggf. erneut hoch.

     

    Wenn Sie Schriftarten hinzufügen oder bearbeiten, muss Ihre App aktualisiert und erneut eingereicht werden, damit die Schriftarten verwendet werden können.

  3. Klicken Sie im Portal im Bereich „Schriftarten und App-Anpassung“ auf das Symbol zum Anzeigen der Schriftartendateien und dann auf Kopieren.

  4. Fügen Sie in der HTML-Quelldatei Verweise auf die hochgeladenen Schriftarten hinzu.

    HTML-Beispielartikel mit Verweisen auf App-Schriftarten

  5. Erstellen Sie einen HTML-Artikel und fügen Sie ihn dem Projekt hinzu.

  6. Erstellen Sie eine benutzerdefinierte App mit den Schriftarten, auf die Sie verweisen möchten. Testen Sie den Artikel, um sicherzustellen, dass die Schriftarten korrekt dargestellt werden.

Informationen zur Behandlung von Gesten in Viewern

Standardmäßig werden beim Tippen auf einen nicht interaktiven Bereich in Viewern die Navigationsleisten angezeigt. Durch Blättern wird zum nächsten oder vorherigen Artikel bzw. der nächsten oder vorherigen Seite gewechselt. In HTML-Artikeln zeigen die Viewer die Navigationsleisten für bekannte interaktive HTML-Elemente nicht an, z. B. <a/>, <video/>, <audio/>, <textarea/>, <input/> und <button/>. Durch Tippen auf andere Elemente werden die Navigationsleisten angezeigt.

Wenn Sie die Behandlung von Gesten in komplexen interaktiven Inhalten besser steuern möchten, z. B. in Spielen oder Diashows, verwenden Sie die benutzerdefinierten HTML Gesture APIs.

HTML Gesture APIs verwenden

Mit HTML Gesture APIs können Sie eine optimale Benutzerfreundlichkeit für komplexere interaktive HTML-Elemente sicherstellen. Bei einer Vollbild-Diashow können Sie z. B. die Präsentation so anpassen, dass die Benutzer zum nächsten Artikel auf der letzten Folie blättern können. Ein HTML-Puzzle können Sie so einrichten, dass durch Tippen auf den Zeichenbereich die Navigationsleisten angezeigt werden, während durch Tippen auf ein Puzzleteil die Navigationsleisten nicht angezeigt werden.

Beachten Sie, dass relinquishCurrentGesture() in Windows-Apps nicht unterstützt wird. Alle anderen Gesten werden für alle Plattformen unterstützt.

Weitere Informationen finden Sie in der Beispieldatei (nur auf Englisch).

Wenn Sie Adobe Muse verwenden, um HTML-Artikel zu erstellen, wird empfohlen, dass Sie Ihrem Muse-Projekt die Gestures API hinzufügen. Bates Creative hat zu diesem Zweck ein Mucow-Widget erstellt. Den Code und eine Anleitung finden Sie hier:

AEM Mobile Gestures API für Adobe Muse