Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Lors de la conception de sites web, l’une des demandes principales concerne la mise en place d’un système permettant aux propriétaires de sites d’en mettre à jour eux-mêmes le contenu. Il est également très utile de disposer d’un moyen d’apporter des modifications à la volée lorsque vous n’êtes pas à votre poste de travail et que vous souhaitez apporter des modifications à un site.

Muse inclut désormais une fonction appelée In-browser Editing qui vous permet, ainsi qu’aux propriétaires de sites et aux membres de votre équipe, de modifier le texte et les images avec l’interface d’administration Business Catalyst. Pour les éditeurs utilisant la fonction In-Browser Editing, il n’est pas nécessaire d’installer Adobe Muse.

In-Browser Editing est également facile à utiliser. Les personnes novices en matière de conception web peuvent apporter des modifications dans un navigateur web, une fois qu’ils y ont été autorisés.

Dans cet article, vous allez apprendre comment configurer un site Adobe Muse pour activer In-Browser Editing afin que les utilisateurs invités du site puissent le mettre à jour. Vous aurez un aperçu des étapes à suivre lors de l’utilisation de l’interface de la fonction In-browser Editing vous serez donc en mesure d’aider les autres à l’utiliser pour effectuer des modifications. Enfin, vous allez apprendre comment synchroniser le fichier .muse avec la version utilisée après l’application de modifications au site en ligne à l’aide de l’interface de la fonction In-browser Editing.

Quel contenu peut être modifié à l’aide de la fonction In-Browser Editing ?

Contenu Modifiable ? Suivre les liens
Texte horizontal Oui Non
Cadres d’image Oui Oui
Texte vertical Non Non
Image - Remplissage de l’arrière-plan (rectangles, cadres d’image et widgets) Non Non
Compteurs de diaporama Non Non
Boutons d’envoi de formulaires Non Non
Libellés de menu dynamique (widgets de menu non définis sur Manuel) Non Non
Eléments de page pixellisés (angles arrondis, bords en biseau, lueur interne ou rotation, blocs de texte utilisant des polices système et blocs de texte ayant été pivotés et sur lesquels des effets ont été appliqués) Non Non
Texte lié Oui Oui
Libellés - widgets d’accordéon  Oui Oui
Libellés - widgets de panneau à onglets Oui Oui
Libellés - widgets de menu manuel Oui Oui

Boutons - widgets de diaporama

 

Oui Oui
Boutons - widgets de composition Oui Oui

Images de vignettes de diaporama

Oui Oui
Blocs de texte et cadres d’image dans des zones « déclencheuses » des widgets Composition Oui Oui

Configuration de l’édition dans le navigateur

Le processus de configuration de la fonction d’édition dans le navigateur se fait en deux parties. Tout d’abord, vous devez activer le paramètre dans les propriétés du site puis publier le site sur les serveurs d’hébergement Adobe. Ensuite, vous pouvez inviter de nouveaux utilisateurs sur le site, de sorte qu’ils puissent se connecter à l’aide de n’importe quel navigateur pour effectuer des modifications.

Comme nous l’avons déjà mentionné, les images d’arrière-plan ne peuvent pas être modifiées avec la fonction In-browser Editing. Si le site contient des images essentielles à la conception qui ne doivent pas être modifiées par le propriétaire du site, assurez-vous qu’elles ont été ajoutées en tant qu’images d’arrière-plan avant d’activer la fonction In-browser Editing et d’ouvrir les droits d’accès à la modification.

Remarque :

Pour utiliser la fonction In-browser Editing, le site web d’essai ou en ligne doit être hébergé sur les serveurs d’hébergement Adobe Business Catalyst.

  1. Lancez Adobe Muse et ouvrez le site à configurer.

    inbrowserediting
    Cochez la case Activer In-Browser Editing dans la boîte de dialogue Propriétés du site.

  2. Cliquez sur Fichier > Propriétés du site. Cliquez sur l’onglet Avancé et vérifiez que l’option In-Browser Editing est activée.

    Si tel n’est pas le cas, cochez la case Activer In-Browser Editing.

  3. Cliquez sur OK pour fermer la boîte de dialogue Propriétés de l’image.

  4. Dans la barre de navigation supérieure d’Adobe Muse, cliquez sur Publier > Business Catalyst.

    Publication d’un site à l’aide de Business Catalyst
    Publication d’un site à l’aide de Business Catalyst

    Choisissez les options voulues dans la boîte de dialogue Publier, puis cliquez sur Publier pour charger tous les fichiers de votre site sur le serveur d’hébergement Adobe Business Catalyst.

    Remarque :

    Vous pouvez créer un nouveau site d’essai ou télécharger un site en ligne avec un nom de domaine personnalisé. La fonction In-browser Editing fonctionne aussi bien pour les sites d’essai que pour les sites en ligne, tant qu’ils sont hébergés sur les serveurs web Adobe.

  5. Une fois l’opération de publication terminée, la boîte de dialogue Publication est mise à jour et vous demande si vous souhaitez ajouter au site un utilisateur pour la fonction In-browser Editing.

    Vous devez ajouter des utilisateurs In-Browser Editing à votre site pour leur permettre de modifier votre site en ligne. Vous allez utiliser l’interface Utilisateurs Admin pour créer un compte pour les utilisateurs, après quoi ils pourront se connecter et commencer à modifier votre site.

    fig02_ibe
    La boîte de dialogue vous permet de choisir entre cliquer sur un lien et cliquer sur OK.

  6. Vous pouvez cliquer sur le lien Ajouter des utilisateurs In-Browser Editing ou simplement cliquer sur OK pour fermer la boîte de dialogue.

    Pour cet exemple, cliquez sur OK.

    Si vous cliquez sur le lien pour ajouter des utilisateurs In-Browser Editing, l’interface décrite à l’étape 9 s’affiche.

  7. Dans Adobe Muse, cliquez sur le lien Ajouter des utilisateurs In-Browser Editing, comme décrit à l’étape 5, ou sélectionnez Fichier > Gérer un site Business Catalyst.

    L’interface Business Catalyst du site s’ouvre dans une nouvelle fenêtre du navigateur.

    Gérer un site Business Catalyst
    Choisissez l’option pour ajouter au site de nouveaux utilisateurs In-Browser Editing.

    Remarque :

    Vous pouvez également cliquer sur le bouton Gérer une fois que vous avez publié un site, puis inviter un utilisateur Admin pendant que vous effectuez d’autres mises à jour pour la gestion du site.

  8. Dans l’interface utilisateur Business Catalyst, dans le volet de navigation de gauche, cliquez sur Paramètres du site > Utilisateurs Admin.

  9. Cliquez sur Inviter un utilisateur Admin.

    fig04_ibe
    Inviter un nouvel utilisateur Admin dans l’interface Utilisateurs Admin du site.

    La section Utilisateurs Admin se met à jour avec une nouvelle interface.

  10. Dans les champs qui s’affichent, saisissez l’adresse électronique du nouvel utilisateur, son prénom et son nom de famille. Vous pouvez éventuellement saisir son numéro de téléphone mobile si vous le souhaitez. Définissez le menu Rôles de l’utilisateur sur Utilisateurs.

    fig05_ibe
    Entrez le nom de la personne et son adresse électronique dans le champ affiché.

  11. Cliquez sur Inviter pour ajouter le nouvel utilisateur à votre site Adobe Muse.

    Remarque :

    Après soumission des informations, le système envoie automatiquement les informations de connexion à la personne que vous avez invitée via un message électronique. Elle recevra le courrier électronique puis devra cliquer sur le lien pour configurer un mot de passe unique de son choix. Une fois le mot de passe créé pour son compte, elle peut se connecter au site et utiliser la fonctionnalité d’édition dans n’importe quel navigateur web.

Mise à jour d’un site à l’aide de la fonction In-Browser Editing

Cette section décrit les étapes à suivre pour mettre à jour un site Adobe Muse pour les personnes autorisées. Si vous souhaitez leur envoyer une copie de ces étapes, vous pouvez télécharger ces instructions.

  1. Ouvrez un navigateur, puis saisissez l’un des éléments suivants :

    • Mon-site.businesscatalyst.com/admin (site d’essai)
    • Mon-site.com/admin (site en ligne)
  2. Entrez l’adresse e-mail et le mot de passe pour vous connecter à Business Catalyst.

    Vous aurez reçu les informations de connexion par e-mail.

    fig06_ibe
    Utilisez un navigateur pour vous connecter à votre compte sur le site.

  3. Cliquez sur le bouton Edition pour voir votre site dans l’interface d’édition.

    fig07_ibe
    Commencez la modification du site en cliquant sur le bouton Edition.

    La page d’accueil du site se charge dans l’interface de la fonction In-browser Editing.

Modification de texte à l’aide de la fonction In-Browser Editing

Lorsque vous apportez des modifications à un site, n’oubliez pas que vous travaillez dans une fenêtre de navigateur. Il est important de publier les modifications que vous apportez avant de quitter la page en cours ou avant la fermeture de la fenêtre de votre navigateur, sauf si vous changez d’avis et que vous avez décidé d’annuler les modifications.

Suivez ces étapes pour modifier le contenu de texte sur votre site :

  1. Lorsque vous vous connectez à votre site à l’aide de Business Catalyst, vous pouvez voir une incrustation bleue autour de votre texte. Sélectionnez ou supprimez le texte, puis commencez à saisir votre contenu.

    Modification de texte à l’aide de la fonction In-Browser Editing
    Sélectionnez le texte que vous souhaitez modifier et commencez la saisie de votre mise à jour.

    Lorsque vous passez le curseur sur le texte d’une zone de texte, In-Browser Editing affiche la mise en forme appliquée au texte. Par défaut, la même mise en forme sera appliquée à tout texte que vous saisirez dans la zone de texte.

    Formatage du texte dans In-Browser Editing
    Examinez la mise en forme qui s’affiche lorsque vous passez la souris sur le texte.

  2. Si vos modifications ne vous conviennent pas et que vous voulez revenir au texte d’origine, cliquez sur l’icône Annuler en haut de la page.

     

    Cliquez sur Annuler pour revenir à l’original
    Cliquez sur l’icône Annuler pour revenir au texte d’origine.

  3. Lorsque vous avez fini de modifier le texte, cliquez sur Publier.

    fig11_ibe
    Cliquez sur le bouton Publier pour activer vos modifications en ligne.

    Les modifications que vous apportez dans l’interface d’édition sont appliquées au site web en ligne uniquement si vous cliquez sur le bouton Publier dans la partie supérieure de la page. Si vous décidez de ne pas apporter de modifications, fermez la fenêtre du navigateur.

Modification d’images importées ou collées sur une page

A l’aide de la fonction In-browser Editing, vous pouvez modifier certaines des images sur le site, tant qu’elles sont insérées en tant qu’images de premier plan. Si les images sur le site sont définies en tant qu’image d’arrière-plan, elles ne sont pas modifiables. Si vous rencontrez des images non modifiables que vous souhaitez modifier, contactez la personne qui a conçu votre site.

  1. Sélectionnez l’image à modifier.

    Un bouton Modifier l’image s’affiche à côté de l’image.

    Modification d’images avec In-Browser Editing
    Lorsque vous placez le pointeur de la souris sur une image modifiable, le bouton Modifier l’image s’affiche.

  2. Cliquez sur Modifier une image.

    Un pop-up contenant tous les actifs utilisés dans votre projet s’affiche. Vous pouvez soit sélectionner une image parmi les actifs existants, soit télécharger une nouvelle image à partir de votre ordinateur en utilisant le bouton Charger une photo.

    Modification d’une image avec In-Browser Editing
    Utilisez l’interface Modification de l’image pour remplacer l’image existante par une nouvelle.

    Si vous choisissez l’option Charger une photo, l’image que vous sélectionnez sur votre ordinateur sera téléchargée sur le site automatiquement.

    Le fichier que vous sélectionnez est téléchargé sur les mêmes serveurs web qui hébergent le site web.

  3. Si vous le souhaitez, vous pouvez entrer une info-bulle dans le champ Info-bulle de l’image. Cette pratique est recommandée, car elle contribue à améliorer l’optimisation du moteur de recherche et permet également d’assurer l’accessibilité du site.

  4. Effectuez l’une des actions suivantes :

    • Cliquez sur la coche pour enregistrer les modifications.
    • Cliquez sur la croix pour annuler la mise à jour.

    Lorsque vous remplacez une image, la nouvelle image que vous sélectionnez est tronquée si son format est différent de celui de l’image d’origine. Pour cette raison, il est recommandé de ne remplacer une image existante que par une autre image de même dimension ou une image plus grande avec le même rapport de largeur et hauteur.

    Si vous envisagez de modifier une image spécifique de manière périodique, vous pouvez demander à la personne ayant créé le site de télécharger plusieurs images de même taille, de sorte que vous puissiez choisir une image qui existe déjà sur le site. Par exemple, le concepteur web peut télécharger quatre images ayant les mêmes dimensions pour le printemps, l’été, l’automne et l’hiver. Au fil du temps, vous pouvez choisir l’option A partir du site, puis changer l’image selon la saison en cours.

  5. Une fois que vous avez effectué toutes les modifications, cliquez sur Publier pour activer les changements.

Modification d’images importées à l’intérieur de blocs de texte

Si une image de la page est collée dans un bloc de texte, vous pouvez toujours modifier le fichier.

  1. Sélectionnez le bloc de texte. Sélectionnez ensuite l’image dans le bloc de texte. 

Le bouton Modifier l’image apparaît à côté de l’image sélectionnée.

Modification d’images à l’intérieur d’une zone de texte
Sélectionnez le bloc de texte, puis sélectionnez l’image à l’intérieur de la zone de texte pour cliquer sur Modifier l’image.

  1. Cliquez sur Modifier une image. Choisissez l’un des actifs existants, ou cliquez sur Charger une photo pour télécharger une nouvelle image à partir de votre ordinateur.
  2. Une fois que vous avez effectué toutes les modifications, cliquez sur Publier pour activer les changements.

Modification de contenu partagé

Certains contenus peuvent avoir été ajoutés à un gabarit lors de la conception du site. Lorsque des éléments sont ajoutés au gabarit, ils s’affichent sur toutes les autres pages du site qui sont liées à ce gabarit. Cela signifie que si vous modifiez un élément d’une page, vous mettrez à jour toutes les autres instances de ce contenu.

Lorsque vous sélectionnez un élément partagé pour le modifier, l’élément s’affiche dans la fenêtre Modification de l’image partagée.

fig16_ibe
Modifiez le contenu partagé entre plusieurs pages dans la fenêtre Modification de l’image partagée.

Soyez attentifs, lorsque cette fenêtre s’affiche, cela signifie que les autres pages du site web peuvent également se mettre à jour automatiquement lorsque vous apportez des modifications. Il est préférable de procéder avec prudence, en cliquant sur Annuler. Rendez-vous sur le site web en ligne dans une nouvelle fenêtre de navigateur et consultez les pages pour voir l’emplacement de l’élément qui s’affiche. Confirmez que vous souhaitez modifier toutes les instances de l’élément avant de revenir à l’interface de la fonction In-browser Editing afin de le mettre à jour.

Modification des hyperliens

Pour plus d’informations sur la modification des hyperliens, voir Modification des hyperliens.

Suivi de liens sur la page d’accueil pour modifier d’autres pages du site

Lors de votre première connexion à votre compte, une version modifiable de la page d’accueil du site vous est présentée. Une fois que vous avez terminé les modifications de la page d’accueil, vous pouvez consulter d’autres pages liées du site pour pouvoir les modifier également.

  • Si des liens apparaissent en dehors d’un bloc de texte, il vous suffit de cliquer sur le lien pour accéder à la page liée dans le site. Les liens externes (vers des pages web qui ne se trouvent pas dans le site que vous consultez) ne se chargeront pas dans l’interface d’édition, car vous ne pouvez pas utiliser la fonction In-browser Editing pour modifier des pages dans d’autres sites web.
  • Si des liens apparaissent dans des blocs de texte, placez le curseur sur ces derniers pour afficher un bouton. Cliquez sur ce bouton pour accéder à la page web liée. Par exemple, cliquez sur le bouton Accueil pour accéder à la page d’accueil de votre site.
  • Si un lien est appliqué à l’ensemble d’un bloc de texte, cliquez sur le bloc pour voir le bouton qui contient le lien ou la balise d’ancre de lien.
fig17_ibe
Cliquez sur le bouton pour accéder à la page liée ou à l’emplacement de la balise d’ancre de lien.

Lorsque vous avez terminé de modifier les pages du site, veillez à cliquer sur Publier si vous souhaitez enregistrer les modifications. Une fois que vous avez terminé de modifier l’ensemble du site, fermez la fenêtre du navigateur.

Prévisualisation des modifications dans In-Browser Editing

In-Browser Editing prend en charge les mises en page adaptatives. C’est-à-dire que vous pouvez directement prévisualiser vos modifications et l’aspect qu’elles ont à chaque point d’arrêt. D’autre part, si vous avez utilisé des variantes de mise en page pour votre site, vous pouvez utiliser la liste déroulante et prévisualiser vos modifications pour chaque périphérique.

Pour prévisualiser vos modifications :

  1. Apportez les modifications nécessaires au contenu de votre site.

    Remarquez le point d’arrêt à 1 200 px, à l’emplacement où vous avez mis à jour le contenu. Prévisualisez la modification à ce point d’arrêt.

  2. Dans la liste déroulante, choisissez les autres points d’arrêt et affichez un aperçu des modifications à chaque point d’arrêt.

  3. Si vous avez créé votre site à l’aide d’une variante de mise en page, choisissez le périphérique dans la liste déroulante et prévisualisez les modifications.

Synchronisation des modifications apportées au fichier .muse

Après utilisation de la fonction In-browser Editing, votre fichier local .muse ne contient plus le même contenu que le site web en ligne. Dans cette section, vous allez apprendre comment approuver ou rejeter les modifications effectuées pour mettre à jour le fichier .Muse pour qu’il corresponde à la conception du site actuelle.

  1. Lancez Muse et ouvrez le fichier .muse du site.

    Un message d’alerte s’affiche, indiquant que le site publié a été modifié.

    En plus du message qui s’affiche à la première ouverture d’un fichier .muse, un message s’affiche également lorsque vous commencez la publication d’un fichier .muse qui n’est pas synchronisé avec le site web en ligne, vous rappelant de revoir les modifications avant de publier le site à nouveau.

    Remarque :

    A tout moment, vous pouvez également choisir Fichier > Synchroniser avec le site Adobe Business Catalyst pour afficher une interface qui vous permet de consulter les différences existant entre le fichier .muse et le site en ligne.

  2. Cliquez sur Révision pour passer en revue les modifications.

    La fenêtre Vérification et fusion des modifications s’affiche.

  3. Utilisez l’interface pour examiner les modifications. Les changements apportés par chacune des modifications sont mis en surbrillance. Les nouveaux contenus sont surlignés en vert, et les éléments qui ont été supprimés sont marqués en rouge, ce qui vous permet de visualiser rapidement ce qui a été ajouté ou supprimé.

  4. Utilisez les options du menu déroulant (Ne pas fusionner ou Fusionner dans Muse) pour refuser ou accepter la modification spécifique ou toutes les modifications.

    fig20_ibe
    Utilisez les options du menu pour fusionner ou annuler les modifications.

    Remarque : si vous ne fusionnez pas les modifications, vous supprimerez les modifications appliquées au site en ligne à la prochaine publication du fichier .muse. Ce comportement vous permet de corriger les erreurs typographiques et autres problèmes du site qui peuvent se produire lorsqu’une personne modifie le site avec le mode In-browser Editing.

  5. Pour comparer la version du texte et des images sur le site web en ligne avec celle du fichier local .muse, cochez et décochez la case Aperçu sur la page.

    fig21_ibe
    Affichez et masquez les modifications récentes en mode Conception en cochant et en décochant la case Aperçu sur la page.

    Une fois que vous avez terminé la synchronisation et la modification du fichier .muse, publiez-le pour activer vos modifications en ligne. Les éléments modifiés marqués Ne pas fusionner sont remplacés par la conception actuelle du fichier .muse lors de la publication du site.

Enregistrement des versions publiées du site web

Comme d’autres personnes peuvent apporter des modifications au site en ligne pendant que vous êtes en train de modifier le fichier .muse, il est recommandé d’enregistrer des copies du site après la synchronisation des modifications et de publier la dernière version.

Immédiatement après la publication du site, choisissez la commande Fichier > Enregistrer le site sous et enregistrez une copie de votre fichier .muse. Si vous le souhaitez, vous pouvez inclure la date du jour dans le nom du fichier lorsque vous créez des copies. Cette pratique facilite la localisation du fichier .muse que vous avez publié à une date spécifique.

Par exemple, vous pouvez créer un dossier contenant votre copie de travail la plus récente du fichier .muse et plusieurs autres copies archivées qui contiennent des versions publiées précédemment de la conception du site. La liste des fichiers dans le dossier peut avoir l’aspect suivant :

Mon-site.muse

Mon-site_2013-1-4.muse

Mon-site_2013-2-23.muse

Mon-site_2013-4-7.muse

En plus de faciliter le rétablissement de versions antérieures, cette méthode permet à Muse de déterminer avec précision quelles modifications (le cas échéant) ont été apportées au site web à l’aide de la fonction In-browser Editing. L’enregistrement de versions de sauvegarde d’un site permet également de vérifier plus facilement si votre fichier .muse actuel et le site web en ligne sont toujours synchronisés.

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