Intégration de contenu interactif dans InDesign : Techniques avancées pour les projets numériques
La création de formulaires dans Adobe InDesign n'est pas une nouveauté, mais ils ne sont pas pris en charge pour les projets de publication numérique visualisés dans un navigateur web. Les formulaires fonctionnent parfaitement pour PDF Interactif, mais que faire si vous souhaitez en ajouter un à une page de contact qui sera publiée en ligne ?
Dans ce tutoriel, apprenez comment concevoir une page de contact pour un projet de publication numérique au format iPad, et utilisez Elfsight pour créer un formulaire HTML qui peut être inséré dans la mise en page. Nous publierons également le document et testerons le formulaire dans un navigateur web.
Cliquez sur le lien ci-dessous pour télécharger les ressources de ce cours et suivez-le étape par étape. La première étape consistera à créer la page au format iPad pour ce tutoriel. Gardez à l'esprit que la configuration du formulaire pour ce cours fonctionnera mieux pour la taille du document iPad.
Configuration du document
Cliquez sur Nouveau fichier.
Cliquez sur l'onglet Mobile pour lancer les préréglages d'écran pour les appareils.
Choisissez l'option iPad 768 x 1024.
Réglez l'orientation sur Paysage.
Désélectionnez la case Cadre de texte principal.
Définissez les marges supérieure, inférieure et droite à 60. Réglez le côté gauche à 34. (Note : Vous devrez casser le lien pour modifier les champs individuellement.)
Cliquez sur Créer.
Conception de la page de contact
Concentrons-nous sur l'ajout de l'image principale, des titres, du logo et des icônes de médias sociaux pour construire la conception de la page de contact. Cette partie examinera également la création d'une teinte d'échantillon et la définition d'un mode de fusion pour l'image principale.
Placement de l'image
Pour importer l'image principale, allez dans Fichier > Placer et localisez l'image dans les fichiers de la leçon enregistrée sous City Main.jpeg.
Avec le contenu chargé dans votre curseur, cliquez et faites glisser un cadre vertical.
Avec le cadre sélectionné, réglez la largeur du cadre sur 488 px. Cela peut être ajusté dans le panneau Contrôle en tapant 488 dans le champ Largeur.
Pour que le contenu s'adapte au cadre, utilisez l'icône Remplir le cadre proportionnellement située dans le panneau Contrôle ou le panneau Propriétés. Vous pouvez également cliquer avec le bouton droit de la souris sur le contenu, aller dans Ajustement > Remplir le cadre proportionnellement.
Placez l'image à gauche de la page.
Guides et couleurs
Faire glisser deux guides sur la page aidera lors de l'insertion du formulaire HTML et de l'alignement du contenu une fois placé dans la mise en page.
Depuis la règle de gauche, cliquez et faites glisser un guide et alignez-le sur le bord droit du cadre de l'image.
Faites glisser un deuxième guide et placez-le à la position 536 X.
L'image et les deux guides sont placés sur la page et devraient apparaître comme dans l'exemple ci-dessous :
Pour ajouter un mode de fusion, nous devrons d'abord créer la couleur thématique pour le design. Ouvrez le panneau Échantillons et cliquez sur l'icône des options dans le coin supérieur droit de la fenêtre. Dans le menu déroulant, choisissez Nouvel échantillon....
Dans le champ Hex # en bas de la fenêtre Nouvel échantillon, tapez le code 92a69a. C'est la même couleur verte qui sera utilisée tout au long du thème.
Cliquez sur OK.
L'échantillon a été ajouté et la prochaine étape consiste à l'appliquer au cadre de l'image. Cliquez sur le cadre de l'image, puis dans le panneau Échantillons, cliquez sur la couleur verte.
Cliquez sur le Sélecteur de contenu pour sélectionner le contenu à l'intérieur du cadre.
Dans le panneau Propriétés, cliquez sur Opacité et dans le menu déroulant Mode de fusion, changez le réglage de Normal à Multiplier.
Réglez l'opacité de 100 % à 50 %.
Ajout de texte et du logo
Apportons maintenant le titre principal et le sous-titre, qui seront placés sur l'image. Pour cette prochaine partie, nous utiliserons la police Karla, que vous pouvez télécharger ici.
Sélectionnez l'Outil Texte et dessinez un cadre de texte sur la page.
Tapez le texte : Listez votre propriété en toute confiance.
Choisissez la police Karla (Gras) et une taille de point de 52.
Réglez l'Espacement des lignes (Interlignage) à 56.
Appuyez sur Retour ou Entrée sur votre clavier pour créer un retour à la ligne.
Tapez le texte : Contactez un agent dès aujourd'hui.
Choisissez la police Karla (Régulier) et une taille de point de 28.
Réglez l'Espacement des lignes (Interlignage) à 40.
Une fois le texte défini, apportez le logo de cette société immobilière fictive appelée Montclair. Allez dans Fichier > Placer et choisissez le fichier SVG enregistré sous Montclair Logo.. Placez le logo au-dessus des titres.
Pour terminer la conception de cette page de contact, ajoutez les quatre icônes de médias sociaux incluses dans les fichiers de la leçon. Rendez les deux ensembles en Karla (Régulier) avec une taille de point de 10.
Création et intégration du formulaire HTML avec Elfsight
Une fois que vous avez créé le compte, accédez à l'option Widgets, puis dans les options du menu de gauche, choisissez Formulaires. Enfin, choisissez Form Builder pour lancer l'éditeur de widgets.
C'est ici que vous pouvez construire et personnaliser le formulaire pour qu'il corresponde à votre look et à votre style InDesign. Pour rester dans la marque pour la page de contact que nous créons, nous utiliserons la police Karla et nous en tiendrons à la couleur verte de la mise en page InDesign.
Personnalisation du formulaire
Pour cette page de contact spécifique, nous allons personnaliser les champs afin qu'ils s'adaptent correctement. Cliquez sur le bouton Build Form dans le menu des options de gauche dans l'éditeur.
Cliquez sur l'icône des options Name et cliquez sur l'icône du crayon pour éditer le champ.
Cliquez sur Appearance pour personnaliser le design. Choisissez le thème Light et définissez la couleur d'accentuation sur le code HEX 92a69a.
Choisissez le style parmi les options du carrousel. Pour ce tutoriel, optons pour la deuxième option.
Définissez la police sur Karla.
Sous Customize Elements, choisissez Header et définissez la couleur du titre et la couleur des liens sur 92a69a.
La taille du titre est de 32 px et la taille de la légende est de 14 px.
Cliquez sur Back.
Choisissez Form Fields et définissez la couleur active sur 92a69a. Définissez la couleur de remplissage sur un gris plus foncé dans le menu du sélecteur de couleurs pour un contraste supplémentaire.
Publication et intégration du code HTML
Le formulaire a été construit avec les paramètres appliqués ci-dessus. Cliquez sur ce bouton, ce qui vous permettra maintenant de publier le formulaire et d'obtenir le code HTML.
Une fois publié, vous pouvez également renommer le formulaire Get in Touch.
Enfin, cliquez sur le bouton Install, qui lancera une autre fenêtre pour copier le code d'intégration.
Avec le code copié dans votre presse-papiers, revenons à InDesign pour insérer le HTML dans la mise en page.
Insertion du HTML
Allez dans Objet > Insérer le HTML.
Collez le code HTML d'Elfsight.
Cliquez sur OK.
Il devrait falloir quelques secondes avant que vous ne voyiez le formulaire apparaître dans la mise en page. Si vous ne le voyez pas ou s'il ne se charge pas, répétez les mêmes étapes pour insérer le code à nouveau.
Publication et test du document
Pour tester le formulaire, publiez le document en ligne. Cela peut être fait en allant dans Fichier > Publier en ligne.
Une fois le projet publié en ligne, testez le formulaire en remplissant les champs et en cliquant sur Submit.
Introduction à Publish Online avec InDesign CC 2015 | Adobe France
Comprendre les limitations et les alternatives à l'intégration d'iframes dans InDesign
Adobe InDesign est l'un des outils les plus puissants pour créer des mises en page imprimées et numériques, utilisé par des professionnels dans tous les secteurs, de l'édition au marketing. Cependant, à mesure que la publication numérique continue d'évoluer, les concepteurs et les développeurs recherchent de nouvelles méthodes pour rendre leurs documents InDesign plus interactifs et riches en médias. Un concept qui surgit souvent dans ce contexte est l'utilisation des iframes, un outil couramment utilisé dans le développement web pour intégrer du contenu externe tel que des pages web, des vidéos ou des éléments interactifs.
TLDR : Bien qu'Adobe InDesign ne prenne pas en charge nativement l'intégration d'iframes HTML dans les exportations PDF statiques, plusieurs solutions de contournement créatives sont disponibles, en particulier lors de l'exportation au format EPUB ou de l'utilisation de fonctionnalités PDF interactives augmentées par des outils tiers. Avec un peu de planification et quelques scripts externes ou outils d'intégration, les concepteurs peuvent livrer du contenu interactif qui améliore considérablement l'expérience utilisateur. Cet article détaille les limitations, les options et les meilleures pratiques en matière d'intégration de comportement de type iframe dans les projets InDesign.
Les bases des iframes
Un iframe (Inline Frame) est un extrait de code HTML qui permet à une page de charger du contenu à partir d'une autre page web dans une zone désignée. Mais dans les logiciels de publication de bureau traditionnels comme InDesign, la mise en œuvre d'une telle fonctionnalité présente un ensemble unique de défis et de limitations.
Pourquoi intégrer des iframes dans InDesign ?
Avec le passage aux livres électroniques interactifs et aux documents en ligne, le désir d'inclure du contenu web dans des œuvres créées avec InDesign a grandi. L'intégration d'iframes peut servir à :
- Améliorer l'engagement du lecteur grâce à des fonctionnalités interactives
- Intégrer des informations à jour provenant de sources externes
- Ajouter du contenu vidéo et multimédia sans augmenter la taille des fichiers
Par exemple, imaginez concevoir un magazine de voyage dans InDesign et vouloir intégrer une carte Google en direct sur chaque page de destination. Une capture d'écran statique n'offre tout simplement pas le même niveau d'interactivité utilisateur ou de valeur.
Limitations des PDF
Voici le problème : les fonctionnalités interactives comme les iframes ne sont pas prises en charge dans les flux de travail PDF standard. Les PDF sont largement statiques et n'interprètent pas très bien le HTML ou le JavaScript modernes. Vous pouvez lier une vidéo, mais vous ne pouvez pas intégrer une page web à l'aide d'un iframe d'une manière qui se comporte comme dans un navigateur. L'interactivité est généralement limitée à :
- Champs de formulaire
- Hyperliens
- Multimédia (fichiers vidéo/audio intégrés)
Cela ne signifie pas que tout espoir est perdu. Si vous produisez des documents numériques, en particulier pour une distribution sur le web ou mobile, il existe des formats et des outils alternatifs qui peuvent vous donner un comportement de type iframe.
Alternative : Exportation EPUB et intégration HTML
Une voie prometteuse consiste à exporter votre projet InDesign au format EPUB (Mise en page fixe). L'EPUB prend en charge le HTML et le CSS, ce qui le rend beaucoup mieux adapté à l'inclusion de contenu dynamique. Voici les étapes :
- Concevez votre mise en page dans InDesign comme d'habitude.
- Utilisez Objet > Insérer le HTML pour ajouter du code HTML personnalisé.
- Insérez votre code iframe dans la fenêtre HTML (par exemple, le code d'intégration de YouTube).
- Exportez le document en tant qu'EPUB en mise en page fixe.
- Prévisualisez les résultats à l'aide d'Adobe Digital Editions ou d'un lecteur EPUB similaire.
Bien que cela puisse ne pas fonctionner dans tous les lecteurs d'ebooks, cette méthode permet une quantité surprenante d'interactivité si le lecteur prend en charge le rendu HTML. C'est une excellente solution, en particulier pour les magazines numériques et les livres pour enfants interactifs.
Utiliser Publier en ligne pour une interactivité améliorée
Si la distribution de votre contenu via PDF ou EPUB vous semble limitée, l'outil Publier en ligne d'Adobe offre une autre voie. Cette fonctionnalité d'InDesign télécharge votre document directement pour une visualisation sur le web. Le bon côté ? Elle conserve beaucoup plus d'interactivité, y compris les médias intégrés.
Pour insérer du contenu de type iframe via Publier en ligne, suivez ces étapes :
- Utilisez un générateur de widgets basé sur le web (comme In5 ou Entrigma) pour créer du contenu HTML autonome avec des intégrations d'iframes.
- Importez le widget résultant dans InDesign via Fichier > Placer.
- Exportez le document via Fichier > Publier en ligne.
Cette méthode offre une compatibilité transparente Windows/Mac/Web et permet une véritable intégration de contenu web dynamique dans votre document. De plus, elle est consultable depuis n'importe quel navigateur moderne sans nécessiter de téléchargement.
Plugins tiers : In5 et autres
Si vous êtes sérieux au sujet de l'intégration de contenu de type iframe, envisagez d'utiliser des outils d'exportation professionnels comme In5 (InDesign vers HTML5), qui offre :
- Prise en charge de l'animation, de la vidéo et des codes d'intégration externes
- Intégration HTML personnalisée qui s'affiche réellement dans la sortie
- Contrôle précis de la mise en page et de l'interactivité
Avec In5, après avoir créé votre mise en page :
- Insérez le code HTML de l'iframe à l'intérieur d'un objet multi-états ou d'un panneau de superposition.
- Prévisualisez le contenu via leur visionneuse HTML5.
- Exportez le projet sous forme de package HTML prêt à être hébergé en ligne.
Cela ouvre la porte à l'intégration de lecteurs YouTube, de publications Instagram, de calculateurs personnalisés, de widgets météo, etc.
Points à garder à l'esprit
Avant de vous lancer dans l'intégration d'iframes avec InDesign, tenez compte des limitations et des meilleures pratiques suivantes :
- Compatibilité inter-navigateurs : Ce qui fonctionne dans Chrome peut ne pas fonctionner dans Safari ou Edge.
- Accès hors ligne : Le contenu web intégré ne sera pas disponible lorsque l'utilisateur est hors ligne.
- Sécurité : Certains contenus d'iframe peuvent être bloqués par la source d'intégration en raison de politiques de sécurité de contenu (CSP).
- Performance : Trop d'intégrations en direct peuvent ralentir le document et affecter l'expérience utilisateur.
Testez toujours vos fichiers exportés de manière approfondie dans les environnements où vos utilisateurs les verront réellement, qu'il s'agisse d'un appareil spécifique, d'une résolution d'écran ou d'un navigateur web.
Solutions de contournement alternatives lorsque les iframes ne fonctionnent pas
Si vous rencontrez des difficultés avec l'intégration des iframes mais souhaitez toujours enrichir votre document InDesign, voici quelques stratégies alternatives :
- Captures d'écran avec hyperliens : Prenez une capture d'écran du contenu externe et utilisez un hyperlien pour rediriger les utilisateurs.
- Codes QR : Générez des codes QR qui renvoient au contenu iframe souhaité ; les utilisateurs peuvent les scanner et l'explorer sur leur téléphone.
- Lecteurs vidéo intégrés : Bien que ce ne soit pas la même chose qu'une page web en direct, l'intégration d'une vidéo peut parfois transmettre les mêmes informations.