Êtes-vous certain de lire le bon article ?

Cet article fait référence à Digital Publishing Suite. Pour un article AEM Mobile, reportez-vous à la page Création d’articles HTML.

Vous pouvez importer un article HTML dans un folio afin qu’il soit affiché dans le lecteur de contenu sous la forme d’un article. Sensiblement moins volumineux, les articles HTML conviennent mieux aux publications hebdomadaires et aux articles denses à structure simple. Les articles HTML peuvent également inclure l’interactivité non disponible dans le panneau Folio Overlays.

Tutoriel vidéo

Tutoriel vidéo
<a href="http://tv.adobe.com/watch/learn-digital-publishing-suite/loading-html-articles/">Chargement d’articles HTML</a>
Colin Fleming

Pour plus dֹ'informations sur l’utilisation d’Adobe Edge pour créer du contenu HTML pour DPS, reportez-vous à l’article de Raghu Thricovil Enhance your DPS Folios with HTML animations using Adobe Edge (Ajout d’animations HTML à vos folios DPS à l’aide d’Adobe Edge).

  1. Créez un dossier contenant les fichiers HTML.

    Assurez-vous d’inclure dans le dossier uniquement les fichiers que vous utilisez. Tous les fichiers du dossier sont téléchargés, même s’ils ne sont pas utilisés.

  2. Si vous importez l’article HTML dans un folio à orientation unique, ajoutez un suffixe _h ou _v au nom du fichier .html (par exemple index_h.html).

    Si vous n’ajoutez pas de suffixe, il se peut que l’article soit importé sous la forme d’un article à double orientation. Si vous essayez d’afficher l’aperçu ou de publier le folio à orientation unique, un message d’erreur s’affiche.

  3. Dans le panneau Folio Builder, ouvrez le folio dans lequel l’article HTML sera inclus.

  4. Dans la vue Articles du panneau Folio Builder, choisissez Importer un article dans le menu du panneau.

  5. Choisissez « Importer un seul article », cliquez sur l’icône Emplacement symbolisée par un dossier , puis désignez le dossier HTML.

    Vous pouvez également importer des articles HTML à l'aide de l'option « Importer plusieurs articles » (reportez-vous à la page Structure des dossiers pour l’importation d’articles) ou à l'aide de l'option « Importer via sidecar.xml » (reportez-vous à la page Importation de plusieurs articles via un fichier sidecar.xml utilisant des chemins d’accès).

  6. Spécifiez d’éventuels paramètres supplémentaires, tels que le défilement lisse, puis cliquez sur OK.

Si vous modifiez les fichiers HTML, sélectionnez l’article HTML dans le panneau Folio Builder et choisissez Mettre à jour.

Conditions requises pour les articles HTML

  • Vous pouvez créer soit un fichier HTML unique qui s’applique aux orientations portrait et paysage, soit des fichiers HTML distincts pour les deux orientations. Si vous utilisez des fichiers HTML distincts pour les orientations portrait et paysage, ajoutez les suffixes _v et _h aux noms de fichier HTML (par exemple, « index_h.html »). Si vous créez un folio à orientation unique, un seul fichier HTML est nécessaire. Ajoutez le suffixe _h ou _v pour le fichier HTML dans un folio à orientation unique.

  • Pour l'instant, les fichiers DHTML (Dynamic HTML) ne sont pas totalement pris en charge.

  • S’agissant de la structure de fichiers, une méthode consiste à importer tous les éléments graphiques et scripts associés au fichier HTML dans les dossiers individuels de l’article. Une autre méthode consiste à importer les éléments graphiques et les scripts associés pour l’ensemble du folio dans un fichier HTMLResources.zip. Importez le fichier HTMLResources.zip dans le folio à partir du panneau Folio Builder ou Folio Producer sur le Web. (Reportez-vous à la page Importation du dossier HTMLResources).


    Exemple de dossier HTMLResources

  • Assurez-vous d’utiliser des chemins relatifs dans votre code HTML. Si vous créez un lien vers une image au même niveau que le fichier HTML, utilisez l’instruction suivante :

    <img src="GlobalImage.jpg"/>

    Si vous créez un lien vers une image dans le dossier HTMLResources, utilisez l’instruction suivante :

    <img src="../HTMLResources/GlobalImage.jpg"/>

Pour plus d’informations sur la création d’hyperliens vers et depuis les articles HTML, reportez-vous à la page Création d’hyperliens de redirection pour les articles HTML.

Création d’articles HTML pour les lecteurs Android

Pour obtenir des conseils et connaître les exigences en matière de création d’articles HTML à destination des lecteurs Android, reportez-vous à la page Création d’articles HTML pour les lecteurs de contenu Android.

Ressources HTML5

Comportement des vidéos dans les articles HTML similaire à celui des vidéos en incrustation en plein écran

Lorsque vous créez un article HTML à orientation simple avec des liens de vidéos, le pivotement de l’appareil peut faire pivoter également la vidéo en cours de lecture. En outre, lorsque la vidéo est terminée, le navigateur intégré grâce auquel elle a été lue peut être fermé. Pour activer ce comportement, utilisez le préfixe « videofile:// » dans le lien vidéo HTML. Cette option est disponible uniquement pour les applications iOS.

Remarque :

Pour voir des exemples de comportements vidéo, reportez-vous aux exemples HTML de l’application gratuite DPS Tips (en anglais uniquement).

Comportement standard d'une vidéo

Dans cet exemple, la vidéo est lue dans un navigateur intégré et ne pivote pas dans un folio à orientation unique.<a href="Links/video.mp4">Lire la vidéo</a>

ou <a href="../HTMLResources/videos/video.mp4">Lire la vidéo</a>

Comportement amélioré d'une vidéo

Dans cet exemple, la vidéo pivote correctement dans un folio à orientation unique et retourne à l’article lorsque la vidéo est terminée.<a href="videfile://Links/video.mp4">Lire la vidéo</a>

ou <a href="videofile://../HTMLResources/videos/video.mp4">Lire la vidéo</a>

JavaScript

Vous pouvez également déclencher ce comportement via JavaScript à l’aide de la fonction playFullscreenVideo sur l’objet window.<a onclick="window.playFullscreenVideo(’Links/video.mp4’);">Lire la vidéo</a>

ou <a onclick="window.playFullscreenVideo(’../HTMLResources/videos/video.mp4’);">Lire la vidéo</a>

Vidéo en flux continu

Cet exemple lit une vidéo en flux continu.<a href="videohttp://www.mysite.com/video.mp4">Lire la vidéo</a>

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