Creating HTML articles for AEM Mobile

Išči
Experience Manager Mobile Navodila za uporabo

Na tej strani

Velja za: Experience Manager Mobile

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

To create the source HTML files for your articles, you can use a CMS system such as Adobe Experience Manager or use any tool—Dreamweaver, CMS, or HTML editor. We recommend that you use Cascading Style Sheets (CSS) to create reflowable content for tablets and phones of different sizes.

Opomba:

In some cases, you can use Adobe Muse to create the initial HTML articles. However, in most cases, advanced HTML knowledge is required to modify the HTML articles for use with AEM Mobile.

Create HTML articles video

Create HTML articles video
This video was recorded originally for Adobe Digital Publishing Solution. The process still applies to AEM Mobile.
Adobe

For a deeper dive, see these video recordings from Adobe MAX 2015 sessions:

How to Smartly Utilize HTML

Optimizing Your Interactive HTML Content

Preparing HTML files for uploading

Use the HTML Article Packager to create article files for HTML content. When you drag the folder containing your HTML files onto the Article Packager icon, the utility creates a required manifest.xml file and compresses the files into an article file that you can upload.

To download the HTML Article Packager, see Installation and setup for AEM Mobile.

  1. Download and install the HTML Article Packager.

    On Mac OS, double-click the .dmg file, and then drag the HTML Article Packager file into your Applications folder.

  2. Add the main HTML file and its required assets to a folder. Name the main HTML file index.html. Open that folder in Finder or Explorer.

    Include only the files referenced in your HTML code. If you include non-referenced files such as PSD images, you needlessly increase the file size.

  3. In a separate Finder or Explorer window, open the folder containing the HTML Article Packager utility (such as the Applications folder on Mac OS).

  4. Drag and drop the HTML folder onto the HTML Article Packager icon.

    HTML Article Packager

    Opomba:

    On Windows, the folder containing the article must be on the same drive path where the HTML Article Packager is installed.

    The article file is created on the same level as the HTML folder.

  5. In the On-Demand Portal (https://aemmobile.adobe.com), edit the article and upload the article file.

    For details, see Managing articles in AEM Mobile.

Plugins for CMS systems

Adobe Experience Manager (AEM) authoring

Configuring AEM to work with AEM Mobile

Third-party CMS systems

Web-based authoring

 

Optimizing HTML content for mobile devices

HTML content that performs well in desktop browsers may not perform as well on mobile devices. When creating HTML articles, do the following:

  • Optimize images for mobile devices. A 12000x8000-pixel image with 300 dpi takes longer to process than an 800x600 image with 72 dpi. Avoid using needlessly large images to save space and improve performance.
  • Optimize video and audio files to reduce size and improve performance.
  • Simplify your code for mobile browsers, and test.

For details, see Optimizing content for AEM Mobile apps.

Using shared fonts for HTML articles

You can reference fonts that are uploaded to the app from HTML articles. By referencing fonts that are uploaded in the app, you improve article download speed and performance.

 

 

Opomba:

Shared fonts used in HTML articles are supported only in mobile apps, not in Desktop Web Viewer. To make fonts available in Desktop Web Viewer, you can either include the fonts in the HTML article, or you can use APIs to make them available through shared content.

  1. Upload the fonts in the On-Demand Portal (Content & Layouts > Fonts & App Customization). See Customizing AEM Mobile apps: Using custom fonts.

  2. In the Fonts & App Customization section of the Portal, create or edit the fonts you want to reference. Make sure that the Font Filename field is populated. If necessary, re-upload the font files.  

     

    If you add or edit fonts, update and resubmit your app in order to use the fonts.

  3. In the Fonts & App Customization section of the Portal, click the icon for showing the font files, and then click Copy.

  4. In the source HTML file, add references to the uploaded fonts.

    Sample HTML article that references app fonts

  5. Create an HTML article and add it to your project.

  6. Build a custom app that includes the fonts you're referring to. Test the article to make sure that the fonts are displaying properly.

Understanding how gestures are handled in viewers

By default, tapping a non-interactive area displays the navigation bars in viewers, and swiping navigates to the next or previous article or page. In HTML articles, the viewers do not display the navigation bars for known interactive HTML elements such as: <a/>, <video/>, <audio/>, <textarea/>, <input/>, and <button/>. Tapping on other elements displays the navigation bars.

For more control over handling gestures in advanced interactive content such as games or slideshows, use the custom HTML Gesture APIs.

Using HTML Gesture APIs

By using the HTML Gesture APIs, you can help ensure a good user experience for more advanced interactive HTML elements. For example, if you have a full-screen slideshow, you can customize the experience to allow users to swipe to the next article on the last slide. If you have an HTML puzzle, you can set it up so that tapping the canvas displays the navigation bars while tapping a puzzle piece does not display the navigation bars.

Note that relinquishCurrentGesture() is not supported in Windows apps. All other gestures are supported in all platforms.

See the example file for details (English only).

If you are using Adobe Muse to create HTML articles, it's recommended that you add the Gestures API to your Muse project. Bates Creative created a mucow for this purpose. The code and instructions are found here:

AEM Mobile Gestures API for Adobe Muse