Incrustations d’hyperliens et de boutons

Ê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 Hyperliens.

Pour créer des liens d’accès à des sites Web, à des articles et à d’autres ressources, vous pouvez utiliser le panneau Hyperliens ou le panneau Boutons. Certains types d’hyperlien et d’actions de bouton ne sont pas pris en charge dans les folios.

Les incrustations d’hyperliens sont prises en charge dans les blocs défilants et les diaporamas, mais pas les autres types d’incrustations.

Tutoriel vidéo

Utilisez le panneau Boutons pour créer des liens vers des sites Web, une autre page ou un autre article.

Pour un résultat optimal, utilisez le panneau Boutons et non le panneau Hyperliens pour créer des liens. Le panneau Boutons est plus stable et offre davantage de flexibilité.

  1. Dans InDesign, créez l’objet à utiliser comme bouton.

    Par exemple, si vous souhaitez que le bouton permette d’accéder à un site web, créez un bloc de texte ou importez une image.

  2. Ouvrez le panneau Boutons (Fenêtre > Objet interactif > Boutons), sélectionnez l’objet, puis cliquez sur l’icône Convertir l’objet en bouton.

  3. Pour Evénement, choisissez Relâché.

    En effet, Relâché est le seul événement de bouton pris en charge.

  4. Cliquez sur le signe plus en regard d’Action et sélectionnez une action prise en charge.

    Actions de bouton prises en charge

    A. Actions prises en charge pour les boutons d’hyperlien B. Actions prises en charge pour les boutons de diaporama 

    Les actions d’hyperlien prises en charge comprennent Atteindre la première page, Atteindre la dernière page, Atteindre la page suivante, Atteindre la page précédente, Atteindre l’URL, Son, Vidéo et Atteindre la page. Les actions Atteindre l’état suivant, Atteindre l’état précédent et Atteindre l’état sont prises en charge pour les diaporamas.

    N’utilisez pas l’action Accéder à la cible pour atteindre un autre article, mais l’action Atteindre l’URL avec un format de redirection « navto ». Reportez-vous à la section correspondante plus loin dans cet article.

  5. Ajoutez d’autres actions à votre convenance.

    Les actions se déroulent de manière séquentielle. Par exemple, si la première action lance une vidéo et que la deuxième ouvre une diapositive différente, la vidéo est lancée, puis la diapositive s’affiche.

  6. Pour modifier les paramètres d’hyperlien, sélectionnez l’objet de bouton, puis spécifiez ces paramètres dans le panneau Folio Overlays :

    Ouvrir dans le folio

    Permet d’afficher le contenu dans une vue web au sein du lecteur. Désélectionnez cette option lorsque vous créez un lien vers une URL de type itms://, mailto: ou tel:.

    Ouvrir dans le navigateur du périphérique

    Permet d’afficher le contenu à l’extérieur du lecteur dans le navigateur du périphérique mobile, par exemple Safari sur un iPad. Sélectionnez Demander d’abord si vous souhaitez qu’une invite apparaisse lorsque l’utilisateur appuie sur le lien.

Dans InDesign, vous pouvez utiliser le panneau Hyperliens pour ajouter des hyperliens. Les hyperliens sont particulièrement utiles pour le texte. Si vous souhaitez utiliser un bloc comme hyperlien, utilisez le panneau Boutons au lieu du panneau Hyperliens. Les boutons sont plus polyvalents et plus stables.

  1. Sélectionnez le bloc ou le texte que vous souhaitez utiliser comme hyperlien.

  2. Ouvrez le panneau Hyperliens (Fenêtre > Objet interactif > Hyperliens).

  3. Dans le menu du panneau Hyperliens, choisissez Nouvel hyperlien.

  4. Désélectionnez Destination partagée.

    L’option Destination partagée permet de nommer et de réutiliser les hyperliens, mais il est déconseillé de l’utiliser dans le flux de travaux DPS.

  5. Dans le menu Lien vers, indiquez l’une des options suivantes, puis cliquez sur OK :

    URL

    Un hyperlien d’URL affiche une page Web (http://), une application App Store (itms://), une application Amazon Appstore (amzn://) ou un article différent (navto://).

    Exemple : http://www.adobe.com/fr

    Lorsque vous créez des liens vers des sites web, tapez l’URL complète sans oublier « http:// ».

    Remarque :

    lorsque vous créez un lien vers une URL iTunes, désélectionnez l’option Ouvrir dans le folio dans le panneau Folio Overlays, faute de quoi un message d’erreur « Impossible d’ouvrir la page » s’affiche lorsque l’hyperlien est sélectionné. De même, si vous utilisez le format itms:// ou amzn:// pour créer un lien d’accès à une application de boutique, désactivez l’option Ouvrir dans le folio.

    Un hyperlien navto:// permet d’accéder à un autre article ou à une autre page de cet article. Saisissez navto://, suivi du nom de l’article tel qu’il apparaît dans le panneau Folio Builder. Utilisez la valeur Nom de l’article et non la valeur Titre de l’article. Si vous souhaitez inclure un numéro de page, ajoutez # suivi d’un nombre. Cependant, gardez à l’esprit que la première page correspond à 0 ; ainsi #2 correspond à la page 3.

    Exemple : navto://newsarticle

    Exemple : navto://newsarticle#2 (accède directement à la page 3)

    Courrier électronique

    Un hyperlien Courrier électronique permet d’ouvrir l’application de messagerie et de renseigner le champ A.

    Page

    Un hyperlien Page permet d’accéder à une autre page de l’article. N’utilisez pas cette option pour passer à un autre article.

    L’hyperlien Ancre de texte n’est pas pris en charge.

  6. Pour modifier les paramètres d’hyperlien, sélectionnez les objets d’hyperlien, puis spécifiez ces paramètres dans le panneau Folio Overlays :

    Ouvrir dans le folio

    Permet d’afficher le contenu dans une vue web au sein du lecteur. Désélectionnez cette option lorsque vous créez un lien vers une URL de type itms://, mailto: ou tel:.

    Ouvrir dans le navigateur du périphérique

    Permet d’afficher le contenu à l’extérieur du lecteur dans le navigateur du périphérique mobile, par exemple Safari sur un iPad. Sélectionnez Demander d’abord si vous souhaitez qu’une invite apparaisse lorsque l’utilisateur appuie sur le lien. Cette option est désactivée si l’option Ouvrir dans le folio est sélectionnée.

    Remarque :

    les paramètres du panneau Folio Overlays ne sont pas disponibles pour les hyperliens de texte. Il n’est pas possible de modifier les paramètres des hyperliens de texte ; par défaut, ils sont définis sur Ouvrir dans le folio. Néanmoins, le lecteur intègre des exceptions pour certains préfixes tels que itms://, tel: ou mailto:. Pour ces types d’URL, une application externe s’ouvre par défaut.

Pour plus de détails sur la création d’hyperliens, reportez-vous à la page Création d’hyperliens dans l’aide d’InDesign CS5/CS5.5.

Les articles de folio sont stockés sur un serveur. Ainsi, tout lien qui contient un chemin vers un fichier InDesign est rompu lors de l’aperçu. Utilisez le format « navto » pour créer un lien vers d’autres articles.

Lorsque vous créez un bouton ou un hyperlien, vous pouvez remplacer « http:// » par « navto:// » dans le champ URL. Indiquez ensuite le nom de l’article cible tel qu’il apparaît dans le panneau Folio Builder. Utilisez la valeur Nom de l’article et non la valeur Titre de l’article. Les formats « navto » valides sont navto://[nomarticle] et navto://[nomarticle]#n. Ajoutez #n pour spécifier un numéro de page. La première page d’un document correspond à 0 ; ainsi #2 correspond à la page 3.

Accès à la page 3 d’un autre article

Exemples de format navto :

navto://biking

navto://biking#2 (accède directement à la page 3 de l’article sur le cyclisme)

Remarque :

si vous avez utilisé une version antérieure des outils pour créer un lien « navto » utilisant un nom de dossier ou un nom d’article différent du nom de l’article cible, ce lien sera rompu. Pour réparer ce lien, vous pouvez renommer l’article (et non le titre) ou modifier le lien « navto » pour qu’il mène au nom de l’article tel qu’il apparaît dans le panneau Folio Creator.

La version v30 introduit de nouvelles options de navigation relative entre articles et pages. Les commandes navto relatives sont uniquement prises en charge dans les applications v30 ou ultérieures, mais vous pouvez utiliser n’importe quel format de folio (à partir de la version v20). Les liens navto relatifs sont pris en charge par les lecteurs iOS, Android et Windows Store. Ils ne sont pas compatibles avec le lecteur de bureau (Desktop Viewer) et le lecteur Web.

Vous pouvez utiliser différents formats navto://relative pour accéder à l’article précédent/suivant, accéder au premier/dernier article ou réinitialiser le folio. Par exemple, un bouton associé à l’action navto://relative/first renvoie au premier article du folio. Les formats valides sont first, last, next, previous, current et reset. Vous pouvez également renvoyer vers un article précis en indiquant sa position dans le folio (par exemple, le cinquième article).

Exemple : navto://relative/last (accède au dernier article du folio)

Exemple : navto://relative/last#last (accède à la dernière page du dernier article du folio)

Exemple : navto://relative/4 (accède au cinquième article du folio)

Exemple : navto://relative/4#2 (accède à la troisième page du cinquième article du folio)

Le format « current », correspondant à l’élément consulté, s’avère particulièrement utile pour la navigation entre pages. Vous pouvez utiliser les attributs #previous, #next, #first, #last, mais aussi pointer vers une page précise en indiquant par exemple #3 pour accéder à la page 4 de l’article.

Exemple : navto://relative/current#previous (accède à la page précédente de l’article)

Exemple : navto://relative/current#last (accède à la dernière page de l’article)

Exemple : navto://relative/current#3 (accède à la quatrième page de l’article consulté)

Utilisez le format navto pour créer un bouton qui réinitialise le folio.

Exemple : navto://relative/reset (renvoie directement au premier article et la position de lecture est réinitialisée)

Dans les articles à défilement lisse, vous pouvez utiliser la notation décimale ou en pourcentages pour accéder à un emplacement précis.

Exemple : navto://myarticle#3.3 (dans un article à défilement lisse, accède à un emplacement précis correspondant au bas de la page 4 et au haut de la page 5)

Exemple : navto://myarticle#50% (accède à la moitié d’un article à défilement lisse)

Pour utiliser des fonctionnalités de navigation relative encore plus élaborées, vous pouvez créer une incrustation de contenu Web ou un article HTML ayant accès à l’API de lecture. Par exemple, vous pouvez analyser le folio afin d’obtenir des données telles que le nombre d’articles qu’il contient et le nombre de pages de chaque article. Vous pouvez ensuite afficher ces informations ou les utiliser d’une autre manière dans l’incrustation ou l’article HTML. Pour plus d’informations, reportez-vous à la page New APIs and features in r30 (Nouvelles API et fonctionnalités de R30) dans le Centre de développement DPS.

Lorsque vous créez un hyperlien ou un bouton basé sur une URL, vous pouvez utiliser l’URL « navto:// » pour accéder à un autre article. Le format « navto » est particulièrement utile pour accéder aux articles HTML.  

Accéder à un article HTML

Saisissez navto://, suivi du nom HTML de l’article (et non du titre de l’article).

Exemple : navto://newsarticle

Accéder à une ancre dans un article HTML

Il n’est pas possible d’accéder à une page spécifique dans un article HTML ; en revanche, vous pouvez accéder à une ancre en indiquant navto://[nom_article]#[nom_ancre].

Exemple : navto://newsarticle#section4

Remarque :

pour définir une ancre dans un fichier HTML, ouvrez ce fichier dans un éditeur de texte. Accédez au texte que vous voulez utiliser comme ancre et enserrez le texte avec une balise d’ancrage ; par exemple « Ceci est la section 4 de l’article. »

Accéder à un article InDesign à partir d’un article HTML

Utilisez le format « navto » pour créer un hyperlien entre un article HTML et un article InDesign. Exemple :

<a href="navto://newsarticle">Voir les actualités</a>

Vous pouvez également accéder à des pages d’un article InDesign en adjoignant le numéro de page au nom du document. La première page du document porte le numéro 0, la deuxième page porte le numéro 1, et ainsi de suite. Exemple :

<a href="navto://Cycling#3">Accéder à la page 4 de l’article sur le cyclisme</a>

Passer d’un article HTML à un autre

Le format « navto » permet de passer d’un article HTML à un autre à l’aide du nom de dossier. Exemple :

<a href="navto://newsarticle">Voir les actualités</a>

Vous pouvez créer des boutons pour accéder à la bibliothèque, à la liste des sections ou à la dernière page consultée (bouton de retour). Pour ce faire, utilisez l’un de ces formats goto:// dans l’action du bouton :

goto://ApplicationViewState/library

goto://ApplicationViewState/sections

goto://FolioNavigation/lastview

Ces formats goto:// ne sont pas pris en charge dans le lecteur Android hérité basé sur AIR. Actuellement, seuls les formats « library » et « lastview » sont pris en charge par le lecteur Android natif.

Si vous avez un compte DPS Enterprise, vous pouvez utiliser le format goto pour créer des liens à partir d’articles vers le contenu HTML associé à des icônes personnalisées. Par exemple, vous pouvez utiliser DPS App Builder pour spécifier les icônes personnalisées pour « Magasin », « Aide » et « Termes ». Ces boutons s’affichent dans la bibliothèque du lecteur. Pour créer un bouton dans un article qui ouvre le contenu HTML pour l’une de ces icônes personnalisées, utilisez le format suivant :

goto://ApplicationViewState/[libellé]

Par exemple, le bouton goto://ApplicationViewState/Store permet d’ouvrir le magasin HTML, comme si vous touchiez l’icône personnalisée du magasin dans la bibliothèque.

Utilisez DPS App Builder pour créer des icônes personnalisées et spécifier des libellés. Reportez-vous à la page Barre d’outils de navigation (édition Enterprise uniquement).

Ces formats goto ne fonctionnent pas s’ils relient la bibliothèque ou un emplacement personnalisé à un autre emplacement personnalisé. Dans ce cas, vous devez utiliser l’API goToState. Reportez-vous à la page Library and Store SDK (en anglais).

Vous pouvez créer un hyperlien ou un bouton qui affiche une image, un fichier HTML ou PDF local dans le navigateur intégré du lecteur.

  1. Ajoutez un dossier contenant le fichier HTML local au dossier HTMLResources.

    Assurez-vous que le dossier HTMLResources est présent dans le folio. (Reportez-vous à la page Importation du dossier HTMLResources).

  2. Créez un lien pour afficher le fichier HTML dans le navigateur intégré :

    Document source InDesign

    Dans le champ URL d’un hyperlien ou d’un bouton, entrez le chemin d’accès sans préfixe (http://, navto:// ou autre). Exemple :

    HTMLResources/Cartoons/train1.html

    Article HTML

    A partir d’un article HTML, indiquez l’emplacement. Exemple :

    <a href=”../HTMLResources/Cartoons/train1.html”>Voir la galerie de bandes dessinées sur les trains</a>

    Pour référencer une image PNG, par exemple, procédez comme suit :

    <a href=”../HTMLResources/Cartoons/train2.png”>Voir l'image du train</a>

    Incrustation de contenu Web

    Les incrustations de contenu Web sont imbriquées deux niveaux plus bas par rapport à un article HTML. Exemple :

    <a href=”../../../HTMLResources/Cartoons/train1.html”>Voir la galerie de bandes dessinées sur les trains</a>

    Remarque :

    pour optimiser les résultats, évitez d’utiliser des espaces et des caractères spéciaux dans les dossiers et les fichiers HTML. Si vous insérez un espace dans un nom de dossier ou de fichier, utilisez le code HTML correspondant au caractère d’espacement. Par exemple, utilisez « Dessins%20animés » pour le dossier appelé « Dessins animés ».

Vous pouvez créer un lien permettant d’envoyer un message électronique (mailto:), un message texte (SMS) ou d’appeler un numéro (tel:) depuis un article. Vous pouvez également créer des liens qui ouvrent l’application YouTube, une chanson sur iTunes ou un album. Pour en savoir plus sur les formats adéquats à utiliser pour les appareils iOS, reportez-vous à la page Apple URL Scheme Reference (Document de référence sur les schémas des URL Apple).

Pour plus d’informations sur la création de liens de messagerie avancés (mailto:), reportez-vous à l’article de James Lockman Sending email and email attachments from DPS publications (Envoi d’e-mails et de pièces jointes à partir de publications DPS).

Si vous définissez un schéma d’URL facultatif lorsque vous utilisez DPS App Builder pour créer une application iOS, vous pouvez créer un lien pointant vers cette dernière depuis une autre application ou lorsque l’utilisateur l’affiche à partir d’une page Web dans le navigateur mobile Safari. Reportez-vous à la page Panneau Détails du lecteur.

Remarque :

chaque fois que vous créez un lien vers une application ou un service externe, sélectionnez le bouton et choisissez l’option « Ouvrir dans le navigateur du périphérique » du panneau Folio Overlays.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?