要为文章创建源 HTML 文件,您可以使用 CMS 系统(如 Adobe Experience Manager)或使用任何工具(Dreamweaver、CMS 或 HTML 编辑器)。我们建议您使用级联样式表 (CSS) 为不同尺寸的平板电脑和手机创建可重排的内容。

注意:

在某些情况下,您可以使用 Adobe Muse 创建初始 HTML 文章。但是,在大多数情况下,您需要具有高级 HTML 知识才能修改 HTML 文章以用于 AEM Mobile。

创建 HTML 文章视频

创建 HTML 文章视频
该视频最初针对 Adobe Digital Publishing Solution 录制。该过程仍适用于 AEM Mobile。
Adobe

为了加深理解,请观看来自 Adobe MAX 2015 讲座的以下视频录像:

如何巧妙利用 HTML

优化您的交互式 HTML 内容

准备要上传的 HTML 文件

使用 HTML Article Packager 为 HTML 内容创建文章文件。将包含 HTML 文件的文件夹拖动到 Article Packager 图标上后,该实用程序将创建一个必需的 manifest.xml 文件并将 HTML 文件压缩为可上传的文章文件。

要下载 HTML Article Packager,请参阅安装和设置 AEM Mobile

  1. 下载并安装 HTML Article Packager

    在 Mac OS 中,双击 .dmg 文件,然后将 HTML Article Packager 文件拖到 Applications 文件夹中。

  2. 将主 HTML 文件及其必需的资源添加到一个文件夹中。将主 HTML 文件命名为 index.html。在 Finder 或资源管理器中打开该文件夹。

    仅在 HTML 代码中包含引用的文件。如果包含了未引用的文件(如 PSD 图像),则会不必要地增加文件大小。

  3. 在单独的 Finder 或资源管理器窗口中,打开包含 HTML Article Packager 实用程序的文件夹(如 MacOS 中的 Applications 文件夹)。

  4. 将 HTML 文件夹拖放到 HTML Article Packager 图标上。

    HTML Article Packager

    注意:

    在 Windows 中,包含文章的文件夹必须与 HTML Article Packager 的安装位置位于相同的驱动器路径。

    将创建与 HTML 文件夹级别相同的文章文件。

  5. 在点播门户(https://aemmobile.adobe.com) 中,编辑文章并上传文章文件。

    有关详细信息,请参阅管理 AEM Mobile 中的文章

CMS 系统的插件

Adobe Experience Manager (AEM) 创作

配置 AEM 以与 AEM Mobile 结合使用

第三方 CMS 系统

基于 Web 创作

 

优化用于移动设备的 HTML 内容

在桌面浏览器中运行良好的 HTML 内容可能无法在移动设备上也正常运行。创建 HTML 文章后,请执行以下操作:

  • 优化用于移动设备的图像。具有 300 dpi 的 12000x8000 像素图像比具有 72 dpi 的 800x600 像素图像需要更长的时间进行处理。避免无谓地使用大的图像,从而节省空间并提高性能。
  • 优化视频和音频文件,从而减小大小并提高性能。
  • 简化用于移动浏览器的代码,并进行测试。

有关详细信息,请参阅优化在 AEM Mobile 应用程序中使用的内容。

将共享字体用于 HTML 文章

您可以引用已从 HTML 文章上传至应用程序的字体。通过引用应用程序中上传的字体,您可以提高文章下载速度和性能。

 

 

注意:

HTML 文章中使用的共享字体仅在移动应用程序中受支持,在桌面 Web 查看器中不受支持。要在桌面 Web 查看器中使用字体,您可以在 HTML 文章中包含这些字体,或者您可以使用 API 通过共享内容使它们可用。

  1. 在点播门户中上传字体(“内容和布局”>“字体和应用程序自定义”)。请参阅自定义 AEM Mobile 应用程序:使用自定义字体

  2. 在门户的“字体和应用程序自定义”部分中,创建或编辑要引用的字体。请确保填充“字体文件名”字段。如有必要,请重新上传字体文件。

     

    如果您要添加或编辑字体,请更新并重新提交应用程序以便使用字体。

  3. 在门户的“字体和应用程序自定义”部分中,单击显示字体文件的图标,然后单击“复制”。

  4. 在源 HTML 文件中,添加对已上传字体的引用。

    引用应用程序字体的示例 HTML 文章

  5. 创建一篇 HTML 文章,并将其添加到您的项目中。

  6. 构建包含您所引用的字体的自定义应用程序。测试文章,以确保字体正确显示。

了解如何在查看器中处理手势

默认情况下,点击一个非交互式区域会在查看器中显示导航栏,轻扫会导航到下一个或上一个文章或页面。在 HTML 文章中,对于已知的交互式 HTML 元素(如 <a/>、<video/>、<audio/>、<textarea/>、<input/> 和 <button/>),查看器不显示导航栏。点击其他元素会显示导航栏。

要在高级交互式内容(如游戏或幻灯片放映)中对处理手势进行更多控制,可使用自定义 HTML Gesture API。

使用 HTML Gesture API

通过使用 HTML Gesture API,您可以帮助确保更多高级交互式 HTML 元素实现出色的用户体验。例如,如果您有一个全屏幻灯片放映,则可以自定义体验以允许用户轻扫到最后一个幻灯片上的下一篇文章。如果您有一个 HTML 拼图,则可以对它进行设置,以便点击画布会显示导航栏,而点击拼图块不显示导航栏。

请注意,relinquishCurrentGesture() 在 Windows 应用程序中不受支持。所有其他手势均在所有平台上受支持。

有关详细信息,请参阅示例文件(仅英文版)。

如果您正在使用 Adobe Muse 创建 HTML 文章,建议将 Gesture API 添加到 Muse 项目中。Bates Creative 已出于此目的创建了 mucow。其代码和说明提供于此处:

适用于 Adobe Muse 的 AEM Mobile Gesture API

 

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略