Para crear archivos HTML de origen para sus artículos, puede utilizar un sistema CMS como Adobe Experience Manager o cualquier otra herramienta (por ejemplo, Dreamweaver, CMS o un editor de HTML). Recomendamos que use hojas de estilo en cascada (CSS, por sus siglas en inglés) a fin de crear contenido ajustable para tablets y teléfonos de distintos tamaños.

Nota:

En algunos casos, puede utilizar Adobe Muse para crear artículos HTML iniciales. Sin embargo, lo más habitual es que se requiera un profundo conocimiento de HTML para modificar artículos HTML con el fin de utilizarlos con AEM Mobile.

Creación de un vídeo de artículos HTML

Creación de un vídeo de artículos HTML
Este vídeo se grabó originalmente para Adobe Digital Publishing Solution. El proceso se sigue aplicando a AEM Mobile.
Adobe

Si desea profundizar un poco más, vea estas grabaciones en vídeo de las sesiones del Adobe MAX 2015:

Cómo utilizar HTML de forma inteligente (en inglés)

Optimización de su contenido HTML interactivo (en inglés)

Preparación de archivos HTML para la carga

Utilice HTML Article Packager a fin de crear archivos de artículos para el contenido HTML. Cuando arrastra la carpeta que contiene los archivos HTML al icono de HTML Article Packager, la utilidad crea un archivo manifest.xml obligatorio y comprime los archivos en un archivo de artículo que puede cargar.

Para descargar HTML Article Packager, consulte Instalación y configuración para AEM Mobile.

  1. Descargue e instale el HTML Article Packager.

    En Mac OS, haga doble clic en el archivo .dmg y arrastre el archivo de HTML Article Packager a la carpeta Aplicaciones.

  2. Añada el archivo HTML principal y los elementos necesarios a una carpeta. Póngale el nombre index.html al archivo HTML principal. Abra esa carpeta en Finder o Explorer.

    Incluya solo los archivos a los que se hace referencia en su código HTML. Si incluye archivos a los que no se hace referencia, como imágenes PSD, incrementa innecesariamente el tamaño del archivo.

  3. En una ventana de Finder o Explorer independiente, abra la carpeta que contiene la utilidad HTML Article Packager (en Mac OS, la carpeta Aplicaciones).

  4. Arrastre y suelte la carpeta HTML en el icono HTML Article Packager.

    HTML Article Packager

    Nota:

    En Windows, la carpeta que contiene el artículo debe estar en la misma ruta de la unidad en la que se ha instalado HTML Article Packager.

    El archivo del artículo se crea en el mismo nivel que la carpeta de HTML.

  5. En On-Demand Portal (https://aemmobile.adobe.com), edite el artículo y cargue el archivo del artículo.

    Para obtener más información, consulte Gestión de artículos en AEM Mobile.

Complementos para los sistemas CMS

Creación de Adobe Experience Manager (AEM)

Configuración de AEM para que funcione con AEM Mobile

Sistemas CMS de terceros

Creación basada en la web

 

Optimización de contenido HTML para dispositivos móviles

El contenido HTML que funciona bien en navegadores de escritorio puede no funcionar tan bien en los dispositivos móviles. Al crear artículos HTML, haga lo siguiente:

  • Optimice imágenes para dispositivos móviles. Una imagen de 12000 x 8000 píxeles con 300 ppp tarda más en procesarse que una imagen de 800 x 600 con 72 ppp. Evite utilizar imágenes grandes innecesarias para ahorrar espacio y mejorar el rendimiento.
  • Optimice los archivos de vídeo y audio para reducir el tamaño y mejorar el rendimiento.
  • Simplifique su código para navegadores móviles y pruébelo.

Para obtener más información, consulte Optimización del contenido de aplicaciones AEM Mobile.

Uso de fuentes compartidas para artículos HTML

Puede hacer referencia en artículos HTML a fuentes que se hayan cargado en la aplicación. Al hacer referencia a las fuentes que ha cargado en la aplicación, mejora el rendimiento y la velocidad de descarga del artículo.

 

 

Nota:

Las fuentes compartidas usadas en los artículos HTML solo son compatibles con aplicaciones para dispositivos móviles, no con el visor web de escritorio. Para conseguir que las fuentes estén disponibles en el visor web de escritorio, puede incluir fuentes en el artículo HTML o usar API para convertirlas en disponibles mediante el contenido compartido.

  1. Cargue las fuentes en el portal bajo demanda (Contenido y diseños > Fuentes y personalización de la aplicación). Consulte Personalización de las aplicaciones AEM Mobile: utilización de fuentes personalizadas.

  2. En la sección Fuentes y personalización de la aplicación, cree o edite las fuentes a las que desee hacer referencia. Asegúrese de que el campo del nombre de archivo de fuentes esté relleno. Si es necesario, vuelva a cargar los archivos de fuentes.  

     

    Si añade o edita fuentes, actualice y vuelva a enviar su aplicación para utilizar las fuentes.

  3. En la sección Fuentes y personalización de la aplicación del Portal, haga clic en el icono para mostrar los archivos de fuentes y, a continuación, haga clic en Copiar.

  4. En el archivo HTML de origen, agregue referencias a las fuentes cargadas.

    Artículo HTML de ejemplo en el que se hace referencia a fuentes de la aplicación

  5. Cree un artículo HTML y añádalo al proyecto.

  6. Cree una aplicación personalizada que incluya las fuentes a las que está haciendo referencia. Pruebe el artículo para asegurarse de que las fuentes se muestran correctamente.

Comprensión de cómo se gestionan los gestos en visores

De forma predeterminada, toque un área no interactiva para mostrar las barras de navegación en los visores y desplácese a los artículos o páginas anteriores o siguientes. En los artículos HTML, los visores no muestran las barras de navegación para los elementos HTML interactivos conocidos como: <a/>, <video/>, <audio/>, <textarea/>, <input/> y <button/>. Al tocar en otros elementos se muestran las barras de navegación.

Para obtener un mayor control sobre la gestión de gestos en contenido interactivo avanzado como juegos o proyecciones de diapositivas, utilice las HTML Gesture API personalizadas.

Uso de HTML Gesture API

Mediante el uso de HTML Gesture API, puede ayudar a garantizar una buena experiencia del usuario con elementos HTML interactivos más avanzados. Por ejemplo, si tiene una proyección de diapositivas a pantalla completa, puede personalizar la experiencia para dejar que los usuarios se desplacen al artículo siguiente en la última diapositiva. Si dispone de un puzle de HTML, puede configurarlo de modo que al tocar el lienzo se muestren las barras de navegación mientras que, al tocar una pieza del puzle, no se muestren.

Tenga en cuenta que relinquishCurrentGesture() no es compatible con las aplicaciones de Windows. Todos los demás gestos son compatibles con todas las plataformas.

Consulte el archivo de ejemplo para obtener más información (solo en inglés).

Si está utilizando Adobe Muse para la creación de artículos HTML, se recomienda que agregue los gestos API al proyecto de Muse. Bates Creative ha creado un mucow para este fin. El código y las instrucciones se encuentran aquí:

AEM Mobile Gestures API para Adobe Muse

 

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea