Als u HTML-bronbestanden voor uw artikelen wilt maken, kunt u een CMS-systeem gebruiken zoals Adobe Experience Manager. U kunt ook een ander gereedschap gebruiken, zoals Dreamweaver, CMS of een HTML-editor. We raden u aan CSS (Cascading Style Sheets) te gebruiken om dynamisch aanpasbare inhoud voor tablets en telefoons met verschillende afmetingen te maken.

Opmerking:

In sommige gevallen kunt u Adobe Muse gebruiken om de oorspronkelijke HTML-artikelen te maken. In de meeste gevallen is er echter geavanceerde HTML-kennis vereist om de HTML-artikelen die u voor AEM Mobile wilt gebruiken, aan te passen.

Video over het maken van HTML-artikelen

Video over het maken van HTML-artikelen
Deze video is oorspronkelijk opgenomen voor Adobe Digital Publishing Solution. Het proces is nog steeds van toepassing op AEM Mobile.
Adobe

Voor een uitleg die dieper op de materie ingaat, bekijkt u deze video-opnamen van deze (Engelstalige) sessies tijdens Adobe MAX 2015:

Slim gebruikmaken van HTML

Uw interactieve HTML-inhoud optimaliseren

HTML-bestanden voorbereiden voor uploaden

Gebruik HTML Article Packager om artikelbestanden voor HTML-inhoud te maken. Wanneer u de map met HTML-bestanden op het pictogram van Article Packager sleept, wordt het vereiste manifest.xml-bestand gemaakt en worden de bestanden gecomprimeerd in een artikelbestand dat u kunt uploaden.

Zie Installatie en configuratie voor AEM Mobile om HTML Article Packager te downloaden.

  1. Download en installeer HTML Article Packager.

    Dubbelklik in Mac OS op het DMG-bestand en sleep het bestand van HTML Article Packager naar de map Programma's.

  2. Voeg het HTML-hoofdbestand en de vereiste middelen toe aan een map. Geef het HTML-hoofdbestand de naam index.html. Open de map in de Finder of Verkenner.

    Neem alleen de bestanden op waarnaar wordt verwezen in de HTML-code. Als u bestanden opneemt waarnaar niet wordt verwezen, zoals PSD-afbeeldingen, wordt het bestand onnodig groot.

  3. Open in een afzonderlijk venster van de Finder of Verkenner de map met het hulpprogramma HTML Article Packager (bijvoorbeeld de map Programma's in Mac OS).

  4. Sleep de HTML-map op het pictogram van HTML Article Packager.

    HTML Article Packager

    Opmerking:

    in Windows moet de map met het artikel zich in het stationspad bevinden waar HTML Article Packager is geïnstalleerd.

    Het artikelbestand wordt op hetzelfde niveau gemaakt als de HTML-map.

  5. Ga naar de on-demandportal (https://aemmobile.adobe.com), bewerk het artikel en upload het artikelbestand.

    Zie Artikelen beheren in AEM Mobile voor meer informatie.

Plug-ins voor CMS-systemen

Ontwerpen voor Adobe Experience Manager (AEM)

AEM configureren voor gebruik met AEM Mobile

CMS-systemen van derden

Webgebaseerde ontwerpoplossingen

 

HTML-inhoud optimaliseren voor mobiele apparaten

HTML-inhoud die goed werkt in bureaubladbrowsers, functioneert mogelijk niet zo goed op mobiele apparaten. Ga als volgt te werk wanneer u HTML-artikelen maakt:

  • Optimaliseer afbeeldingen voor mobiele apparaten. Het duurt langer om een afbeelding van 12000x8000 pixels met 300 dpi te verwerken dan een afbeelding van 800x600 pixels met 72 dpi. Vermijd het gebruik van onnodig grote afbeeldingen om ruimte te besparen en de prestaties te verbeteren.
  • Optimaliseer video- en audiobestanden om de grootte te verminderen en de prestaties te verbeteren.
  • Vereenvoudig de code voor mobiele browsers en test deze.

Zie Inhoud optimaliseren voor AEM Mobile-apps voor meer informatie.

Gedeelde lettertypen voor HTML-artikelen gebruiken

U kunt verwijzen naar lettertypen die van HTML-artikelen naar de app worden geüpload. Wanneer u verwijst naar lettertypen die zijn geüpload in de app, verbetert u de downloadsnelheid en prestaties van het artikel.

 

 

Opmerking:

Gedeelde lettertype die worden gebruikt in HTML-artikelen worden alleen ondersteund in mobiele apps, niet in de bureaubladwebviewer. Als u lettertypen beschikbaar wilt stellen in de bureaubladwebviewer, kunt u de lettertypen insluiten in het HTML-artikel of kunt u API's gebruiken om ze beschikbaar te stellen via gedeelde inhoud.

  1. Upload de lettertypen naar de on-demandportal (Inhoud en lay-outs > Lettertypen & App-aanpassing). Zie AEM Mobile-apps aanpassen: aangepaste lettertypen gebruiken.

  2. Maak of bewerk in sectie Lettertypen & App-aanpassing van de Portal de lettertypen waarnaar u wilt verwijzen. Controleer of het veld Bestandsnaam van lettertype is ingevuld. Upload de lettertypebestanden zo nodig opnieuw.  

     

    Als u lettertypen toevoegt of bewerkt, moet u uw app bijwerken en opnieuw indienen.

  3. Klik in de sectie Lettertypen & App-aanpassing van de Portal op het pictogram voor het weergeven van lettertypebestanden en klik op Kopiëren.

  4. Voeg in het HTML-bronbestand verwijzingen naar de geüploade lettertypen toe.

    Voorbeeld van HTML-artikel met verwijzingen naar lettertypen in de app

  5. Maak een HTML-artikel en voeg dit toe aan uw project.

  6. Maak een aangepaste app met de lettertypen waarnaar u verwijst. Test het artikel om ervoor te zorgen dat de lettertypen correct worden weergegeven.

De verwerking van gebaren in viewers

Standaard worden via het tikken op niet-interactieve gebieden de navigatiebalken in viewers weergegeven en wordt met veeggebaren naar de volgende of vorige artikelen of pagina's genavigeerd. Bij HTML-artikelen worden de navigatiebalken in viewers niet weergegeven voor bekende interactieve HTML-elementen, zoals: <a/>, <video/>, <audio/>, <textarea/>, <input/> en <button/>. Wanneer er op andere elementen wordt getikt, worden de navigatiebalken weergegeven.

Voor betere controle van gebaren in geavanceerde inhoud, zoals games of presentaties, kunt u de aangepaste HTML Gesture API's gebruiken.

HTML Gesture API's gebruiken

Wanneer u de HTML Gesture API's gebruikt, kunt u zorgen voor een goede gebruikerservaring voor de meer geavanceerde interactieve HTML-elementen. Als u bijvoorbeeld een presentatie op volledig scherm hebt, kunt u de ervaring aanpassen zodat gebruikers kunnen vegen naar het volgende artikel op de laatste dia. Als u een HTML-puzzel hebt, kunt u deze zo instellen dat de navigatiebalken worden weergegeven wanneer er op het canvas wordt getikt, terwijl de navigatiebalken niet worden weergegeven wanneer er op een puzzelstuk wordt getikt.

Houdt er rekening mee dat relinquishCurrentGesture() niet wordt ondersteund in Windows-apps. Alle andere gebaren worden ondersteund voor alle platformen.

Zie het voorbeeldbestand voor meer informatie (alleen in het Engels).

Als u Adobe Muse gebruikt om HTML-artikelen te maken, kunt u het beste de Gestures API aan uw Muse-project toevoegen. Bates Creative heeft hiervoor een Mucow (Muse Configurable Options Widget; widget met configureerbare opties voor Muse) gemaakt. De code en de instructies zijn hier beschikbaar:

AEM Mobile Gestures API voor Adobe Muse

 

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid