Création d’articles HTML pour DPS

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

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).

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

• Pour plus d’informations sur la création d’articles à l’aide du format HTML5, consultez l’article de Johannes Henseler intitulé A single file HTML5 framework (Une structure HTML5 à un seul fichier).

• Pour plus d’informations sur l’utilisation de CreateJS afin de générer du contenu HTML5 à l’aide de Flash Pro, reportez-vous à la page Toolkit for CreateJS (Kit d’outils pour CreateJS).

• Pour plus d’informations sur les polices disponibles dans les articles HTML et les incrustations de contenu Web sur iPad, reportez-vous la page www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/.

• Rufus Deuchler a créé un didacticiel vidéo sur l’utilisation d’Adobe Muse pour créer du contenu HTML destiné à des publications numériques.

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.

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>

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>

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>

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