Vous pouvez utiliser un système CMS, tel qu'Adobe Experience Manager ou tout autre outil, Dreamweaver, CMS ou un éditeur HTML pour créer des fichiers HTML source. Nous vous recommandons d’intégrer du code CSS (feuilles de style en cascade) pour créer du contenu repositionnable destiné aux différents formats de tablettes et de smartphones.

Remarque :

dans certains cas, vous pouvez utiliser Adobe Muse pour créer les articles HTML initiaux. Cependant, dans la plupart des cas, une connaissance HTML approfondie est requise pour modifier des articles HTML pour une utilisation avec AEM Mobile.

Vidéo sur la création d’articles HTML

Vidéo sur la création d’articles HTML
Cette vidéo a été enregistrée à l'origine pour Adobe Digital Publishing Solution. Le processus s'applique également à AEM Mobile.
Adobe

Pour approfondir ce sujet, regardez ces enregistrements vidéo issus de la conférence Adobe MAX 2015 :

How to Smartly Utilize HTML (Comment utiliser HTML de façon intelligente)

Optimizing Your Interactive HTML Content
(Optimiser votre contenu HTML interactif pour Adobe DPS)

Préparation de fichiers HTML en vue de leur chargement

Utilisez HTML Article Packager pour créer des fichiers d’article destinés à un contenu HTML. Lorsque vous faites glisser le dossier contenant vos fichiers HTML vers l’icône Article Packager, l’utilitaire crée le fichier manifest.xml requis et compresse les fichiers de manière à créer un fichier d’article global, que vous pouvez alors charger.

Pour télécharger l'outil HTML Article Packager, reportez-vous à la page Installation et configuration pour AEM Mobile.

  1. Téléchargez et installez l'outil HTML Article Packager.

    Sous Mac OS, double-cliquez sur le fichier .dmg, puis faites glisser le fichier HTML Article Packager vers votre dossier Applications.

  2. Ajoutez le fichier HTML principal et les ressources requises dans un dossier. Nommez ce fichier HTML principal index.html. Ouvrez le dossier dans le Finder ou dans l’Explorateur.

    Incluez uniquement les fichiers référencés dans votre code HTML. Si vous ajoutez des fichiers non référencés (des images PSD, par exemple), vous augmentez inutilement la taille du fichier.

  3. Dans une autre fenêtre du Finder ou de l’Explorateur, ouvrez le dossier contenant l’utilitaire HTML Article Packager (dossier Applications sous Mac OS, par exemple).

  4. Faites glisser le dossier HTML sur l’icône HTML Article Packager.

    HTML Article Packager

    Remarque :

    sous Windows, le dossier contenant l'article doit se trouver sur le même chemin d’accès de lecteur dans lequel l'outil HTML Article Packager est installé.

    Le fichier d’article est créé au même niveau que le dossier HTML.

  5. Sur le portail à la demande (https://aemmobile.adobe.com), modifiez l'article et téléchargez le fichier d'article.

    Pour plus d'informations, reportez-vous à la page Gestion des articles dans AEM Mobile.

Plug-ins pour les systèmes CMS

Création avec Adobe Experience Manager (AEM)

Configuration d'AEM pour une intégration avec AEM Mobile

Systèmes CMS tiers

Création web

 

Optimisation du contenu HTML pour les appareils mobiles

Le contenu HTML compatible avec les navigateurs d'ordinateur ne fonctionne pas nécessairement correctement sur les appareils mobiles. Lors de la création d'articles HTML, procédez comme suit :

  • Optimisez les images pour les appareils mobiles. Le traitement d'une image de 12000 x 8000 pixels avec une résolution de 300 ppp prend plus de temps que celui d'une image de 800 x 600 pixels avec une résolution de 72 ppp. Afin de gagner de l'espace et améliorer les performances, évitez d'utiliser des images de grande taille sans que ce soit réellement utile.
  • Optimisez les fichiers vidéo et audio afin d'en réduire la taille et d'améliorer les performances.
  • Simplifiez le code pour les navigateurs mobiles et testez-le.

Pour plus d'informations, reportez-vous à la page Optimisation de contenu utilisé dans les applications AEM Mobile.

Utilisation de polices partagées pour les articles HTML

Vous pouvez référencer les polices chargées dans l'application à partir des articles HTML. En référençant les polices chargées dans l'application, vous améliorez les performances de téléchargement des articles.

 

 

Remarque :

Les polices partagées utilisées dans les articles HTML ne sont prises en charge que dans les applications mobiles, non dans le lecteur web pour ordinateur. Pour que les polices soient disponibles dans le lecteur web pour ordinateur, vous pouvez les inclure dans l'article HTML ou utiliser des API pour les rendre disponibles via le contenu partagé.

  1. Chargez les polices sur le portail à la demande (Contenu et mises en page > Polices et personnalisation appli). Reportez-vous à la page Personnalisation des applications AEM Mobile : Utilisation de polices personnalisées.

  2. Dans la section Polices et personnalisation appli de Portal, créez ou modifiez les polices que vous voulez référencer. Assurez-vous que le champ Nom de fichier de police est renseigné. Si nécessaire, rechargez les fichiers de police.  

     

    Si vous ajoutez ou modifiez des polices, mettez à jour puis soumettez de nouveau votre application afin d'utiliser les polices.

  3. Dans la section Polices et personnalisation appli de Portal, cliquez sur l'icône permettant d'afficher les fichiers de police, puis cliquez sur Copier.

  4. Dans le fichier HTML source, ajoutez les références aux polices chargées.

    Exemple d'article HTML référençant les polices de l'application

  5. Créez un article HTML et ajoutez-le à votre projet.

  6. Créez une application personnalisée comportant les polices que vous référencez. Testez l'article afin de vous assurer que les polices s'affichent correctement.

Présentation de la gestion des mouvements sur les lecteurs

Par défaut, le fait de toucher une zone non interactive affiche les barres de navigation dans les lecteurs, et le fait de balayer accède à l'article ou à la page suivant ou précédent. Dans les articles HTML, les lecteurs n'affichent pas les barres de navigation pour les éléments HTML interactifs connus, tels que : <a/>, <video/>, <audio/>, <textarea/>, <input/>, and <button/>. Le fait de toucher les autres éléments affiche les barres de navigation.

Pour un meilleur contrôle de la gestion des mouvements dans un contenu interactif avancé tel que les jeux ou les diaporamas, utilisez les interfaces HTML Gesture API personnalisées.

Utilisation des interfaces HTML Gesture API

Les interfaces HTML Gesture API garantissent une expérience de navigation satisfaisante sur les éléments HTML interactifs avancés. Par exemple, si vous avez un diaporama en plein écran, vous pouvez personnaliser la navigation afin de permettre aux utilisateurs de balayer pour passer sur l'article suivant à la dernière diapositive. Si vous avez d'un puzzle HTML, vous pouvez le configurer de manière à ce que le fait de toucher le canevas affiche les barres de navigation et le fait de toucher une pièce du puzzle ne les affiche pas.

Notez que la fonction relinquishCurrentGesture() n'est pas prise en charge dans les applications Windows. Tous les autres mouvements sont pris en charge sur toutes les plates-formes.

Pour plus de détails, reportez-vous à l’exemple fourni (en anglais uniquement).

Si vous utilisez Adobe Muse pour créer des articles HTML, il est recommandé d'ajouter l'interface Gestures API à votre projet Muse. Pour ce faire, Bates Creative a créé un mucow. Le code et les instructions sont disponibles ici :

AEM Mobile Gestures API for Adobe Muse (en anglais)

 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne