Adobe CS LIVE Manuel du propriétaire

Utilisation
d’ADOBE® CS LIVE
Informations juridiques
Informations juridiques
Pour consulter les informations juridiques, rendez-vous à l’adresse suivante : http://help.adobe.com/fr_FR/legalnotices/index.html.
Dernière mise à jour le 13/5/2011
iii
Sommaire
Chapitre 1 : A propos de CS Live
Chapitre 2 : Acrobat.com
Chapitre 3 : Adobe CS Review
Chapitre 4 : SiteCatalyst NetAverages
Accès aux informations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Utilisation des alertes e-mail
Chapitre 5 : BrowserLab
Utilisation de BrowserLab
........................................................................................... 4
.............................................................................................. 6
Utilisation de BrowserLab pour Firebug
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Utilisation de BrowserLab dans Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Chapitre 6 : Adobe Story
Dernière mise à jour le 13/5/2011
1
Chapitre 1 : A propos de CS Live
Adobe® CS Live est un ensemble de services en ligne pouvant être intégrés aux logiciels Adobe Creative Suite® 5 afin de
simplifier le processus de révision des créations et d'accélérer les tests de compatibilité de sites Web, entre autres.
Les services en ligne Adobe® CS Live regroupent les cinq éléments suivants :
Adobe® BrowserLab Faites un aperçu de pages Web dynamiques et de contenu local à l'aide de plusieurs outils
d'affichage, de diagnostic et de comparaison. BrowserLab fournit une solution simple pour les tests sur plusieurs
navigateurs.
Adobe® Story Accélérez la création multimédia en simplifiant le flux de données de script dans vos productions vidéo.
Adobe® CS Review Créez et partagez des révisions en ligne et obtenez des commentaires sur vos projets à partir de
votre application de bureau Creative Suite. Pour plus d'informations, consultez la page CS Review.
Acrobat.com Simplifiez la collaboration avec des équipes importantes à l'aide de services en ligne de conférence Web,
de partage de fichiers et de création collaborative de documents.
SiteCatalyst® NetAverages Bénéficiez de statistiques à l'échelle d'Internet sur les systèmes utilisateur, les navigateurs
etc. afin d'optimiser la création pour le Web et les écrans d'appareils mobiles.
Pour plus d'informations sur la connexion à CS Live, consultez la page Connexion à CS Live.
Dernière mise à jour le 13/5/2011
2
Chapitre 2 : Acrobat.com
Acrobat.com
Dernière mise à jour le 13/5/2011
3
Chapitre 3 : Adobe CS Review
Adobe CS Review
Dernière mise à jour le 13/5/2011
4
Chapitre 4 : SiteCatalyst NetAverages
SiteCatalyst® NetAverages™ est un service de reporting présentant les dernières tendances Internet pour vous aider à
optimiser vos projets Web et mobiles. Pour plus d’informations sur ce service, consultez la page produit et la FAQ.
Accès aux informations
Dans la barre d’outils, sélectionnez Bureau ou Mobile. Un certain nombre d’ensembles de données s’affichent sous
forme de cercles concentriques. La page présente également une liste des grandes tendances.
Parcourir des ensembles de données
Chacun des anneaux concentriques représente un ensemble de données distinct. Pour parcourir les différents
ensembles de données, procédez comme suit :
• Cliquez sur un cercle ou sur une languette associée à un ensemble de données pour afficher plus d'informations
dans un graphique circulaire.
• Déplacez la souris sur un graphique circulaire afin d'afficher les modifications sur un mois et sur un an.
• Cliquez sur un sous-ensemble du graphique circulaire pour afficher les modifications sur les 12 derniers mois.
• Cliquez sur la flèche à gauche de l'écran pour revenir à l'écran précédent.
Parcourir les Top Tendances
La section Top Trends fournit, pour chaque top tendance, les informations suivantes :
• Dans la colonne Actif, la part la plus récente du produit ou de la technologie dans sa catégorie. Par exemple, un
navigateur spécifique peut détenir 12 % de la catégorie des versions de navigateur.
• La colonne Modification indique l'évolution de la part dans le temps.
Pour parcourir les différentes top tendances, procédez comme suit :
• Cliquez sur le bouton Afficher par mois pour afficher les modifications du mois précédent. Ce bouton permet de
basculer vers les modifications de l'année précédente.
• Cliquez sur une tendance dans la liste afin d'afficher les informations sous forme de graphique à secteurs, puis
cliquez sur le produit ou la technologie mis en évidence dans le graphique pour consulter ses modifications au cours
des 12 derniers mois.
• Cliquez sur la flèche à gauche de l'écran pour revenir à l'écran précédent.
Utilisation des alertes e-mail
Configurez une alerte pour recevoir un courrier électronique dès qu'une tendance atteint un certain seuil. Par exemple,
vous pouvez souhaiter recevoir une notification lorsque la part d'un navigateur spécifique atteint 40 % de l'ensemble
des navigateurs.
Dernière mise à jour le 13/5/2011
5
CS LIVE
SiteCatalyst NetAverages
Dès que le seuil est atteint, SiteCatalyst NetAverages vous envoie un courrier électronique. L'alerte expire. Le courrier
électronique est envoyé à l'adresse utilisée pour la connexion à Adobe.com. Cliquez sur les liens de l'alerte par courrier
électronique pour plus d'informations.
Configuration d'une alerte
1 Cliquez sur un cercle ou sur une languette associée à un ensemble de données dont vous souhaitez effectuer le suivi.
2 Dans le graphique circulaire qui s’affiche, cliquez sur le sous-ensemble de données dont vous souhaitez effectuer le
suivi.
3 Dans le diagramme des tendances mensuelles qui s’affiche, cliquez sur S’inscrire à l’alerte par courrier électronique,
puis déplacez le curseur de pourcentage (situé sur la droite) sur le seuil approprié.
4 Cliquez sur S’inscrire pour définir l’alerte.
Gestion des alertes
Vous pouvez gérer vos alertes en cliquant sur le bouton Alertes de la barre d’outils.
• Mettez à jour une alerte en la sélectionnant dans la liste Mes Alertes, puis en cliquant sur Mettre à jour l'alerte dans
le graphique des tendances qui s'affiche sur la droite.
• Supprimez une alerte en cliquant sur l'icône de la corbeille correspondante dans la liste Mes Alertes.
Dernière mise à jour le 13/5/2011
6
Chapitre 5 : BrowserLab
Utilisation de BrowserLab
Adobe® BrowserLab est un service hébergé en ligne qui vous permet de tester les pages de votre site Web dans divers
navigateurs et systèmes d'exploitation. Ce service réalise des captures d'écran de vos pages Web dans différents
navigateurs, puis les affiche dans la fenêtre d'application BrowserLab.
Vous pouvez utiliser BrowserLab comme service autonome ou en intégration avec Dreamweaver CS5 et les versions
ultérieures. Le service autonome vous permet de tester les pages que vous avez envoyées à un serveur dans le contexte
d'un navigateur Web. Si vous utilisez BrowserLab en tant que service intégré à Dreamweaver, vous pouvez tester vos
pages depuis Dreamweaver sans devoir les publier sur un serveur.
Remarque : pour consulter la liste la plus récente des navigateurs pris en charge, choisissez Aide > A propos, après vous
être connecté à BrowserLab.
Si vous avez une question à propos de BrowserLab qui n’est pas traitée dans ces rubriques d’aide, vous pouvez consulter
la documentation de dépannage sur adobe.com ou publier votre question sur le forum Adobe BrowserLab.
Connexion à BrowserLab
1 Accédez à http://browserlab.adobe.com.
2 Entrez votre ID d'utilisateur et votre mot de passe Adobe, puis cliquez sur Connexion.
Remarque : votre ID Adobe est votre adresse électronique ; il s’agit de l’ID qui vous sert à vous connecter à tous les
autres services Web Adobe, ainsi qu’à la boutique en ligne d’Adobe. Avant de vous connecter pour la toute première
fois à BrowserLab, vous devez cliquer sur le lien fourni dans le courrier électronique de vérification.
3 Si vous vous connectez à BrowserLab à partir de Dreamweaver, cliquez sur CS Live dans la barre d’application et
connectez-vous.
Test d'une page
Le test d'une page dans BrowserLab est une opération aussi simple que la navigation vers cette page.
1 Connectez-vous au service BrowserLab.
2 Cliquez sur le lien Tester en haut de la fenêtre d’application.
3 Dans la zone de texte URL, entrez l'URL de la page à tester.
BrowserLab charge la page avec une capture d’écran. Pour afficher une capture d'écran provenant d'un autre
navigateur de l'ensemble de navigateurs par défaut, cliquez sur le menu Navigateur dans le coin supérieur gauche
de la fenêtre d'application, puis sélectionnez le navigateur souhaité.
Comparaison de pages
BrowserLab permet de comparer, côte à côte, des captures d’écran de votre page telle qu’elle apparaît dans différents
navigateurs. Par défaut, BrowserLab charge des captures d’écran de comparaison à partir des deux premiers
navigateurs de l’ensemble de navigateurs par défaut, mais vous pouvez comparer des versions des pages dans tous les
navigateurs disponibles.
Dernière mise à jour le 13/5/2011
7
CS LIVE
BrowserLab
BrowserLab permet également de comparer les captures d'écran en les plaçant l'une au-dessus de l'autre.
1 Connectez-vous au service BrowserLab.
2 Cliquez sur le lien Tester en haut de la fenêtre d’application.
3 Dans la zone de texte URL, entrez l'URL de la page à tester.
4 Choisissez l’une des options suivantes dans le menu Affichage (situé à droite de la zone de texte URL) :
Affichage double place deux captures d'écran côte à côte. Pour modifier le navigateur d'une capture d'écran
précise, cliquez sur le menu Navigateur, dans le coin supérieur gauche de la fenêtre d'application, puis sélectionnez
le navigateur souhaité.
Mode Pelure d'oignon superpose les deux captures d'écran. Pour modifier le navigateur d'une capture d'écran
précise, cliquez sur le menu Navigateur, dans le coin supérieur gauche ou supérieur droit de la fenêtre d'application,
puis sélectionnez le navigateur souhaité. Le curseur au centre du haut de la page contrôle la transparence des deux
captures d'écran. Si vous tirez le curseur vers la gauche, la visibilité de la capture du navigateur de gauche augmente.
Si vous tirez le curseur vers la droite, la visibilité de la capture du navigateur de droite augmente.
Navigation entre les pages
1 Pour naviguer entre les pages, utilisez les boutons Retour et En avant situés en regard de la zone de texte URL, de
la même façon que dans un navigateur. Vous pouvez également sélectionner des pages dans le menu contextuel
d’historique en cliquant sur la flèche située sur la droite de la zone de texte URL et en sélectionnant une page de
l’historique.
Remarque : l’historique conserve l’historique de pages distinctes, mais pas l’historique de différentes versions de la
même page.
2 Pour suivre des liens actifs sur une page, cliquez sur le lien tout en maintenant la touche Ctrl (Windows) ou
Commande (Mac OS) enfoncée.
Remarque : seuls les liens vers d’autres pages Web peuvent faire l’objet d’un clic. Les liens tels que les liens de courriers
électroniques, les liens vers des fichiers exécutables, etc., ne peuvent pas faire l’objet d’un clic.
Modification des ensembles de navigateurs
BrowserLab teste l’apparence de votre page dans un ensemble de navigateurs par défaut. Vous pouvez modifier
l’ensemble de navigateurs par défaut ainsi que créer des ensembles de navigateurs personnalisés.
Modification de l'ensemble de navigateurs par défaut
1 Dans BrowserLab, cliquez sur le lien Ensembles de navigateurs dans le haut de la fenêtre d'application.
2 Sélectionnez l'ensemble de navigateurs par défaut s'il n'est pas déjà sélectionné.
3 Ajoutez des navigateurs à l'ensemble ou supprimez-en. Pour ce faire, effectuez des sélections dans la colonne
Navigateurs disponibles.
4 (Facultatif) Modifiez l'ordre des navigateurs (c.-à-d. l'ordre dans lequel BrowserLab affiche les captures d'écran de
vos pages testées) en tirant les navigateurs vers le haut ou le bas dans la colonne Ordre des navigateurs.
Création d'un ensemble de navigateurs personnalisé
1 Dans BrowserLab, cliquez sur le lien Ensembles de navigateurs dans le haut de la fenêtre d'application.
2 Cliquez sur Ajouter un nouvel ensemble de navigateurs.
3 Entrez le nom de votre ensemble de navigateurs personnalisé, puis appuyez sur Entrée/Retour.
Dernière mise à jour le 13/5/2011
8
CS LIVE
BrowserLab
4 Ajoutez des navigateurs à l'ensemble ou supprimez-en. Pour ce faire, effectuez des sélections dans la colonne
Navigateurs disponibles.
5 (Facultatif) Modifiez l'ordre des navigateurs (c.-à-d. l'ordre dans lequel BrowserLab affiche les captures d'écran de
vos pages testées) en tirant les navigateurs vers le haut ou le bas dans la colonne Ordre des navigateurs.
Modification d'un ensemble de navigateurs existant
1 Dans BrowserLab, cliquez sur le lien Ensembles de navigateurs dans le haut de la fenêtre d'application.
2 Sélectionnez l'ensemble de navigateurs à modifier.
3 Ajoutez des navigateurs à l'ensemble ou supprimez-en. Pour ce faire, effectuez des sélections dans la colonne
Navigateurs disponibles.
4 (Facultatif) Modifiez l'ordre des navigateurs (c.-à-d. l'ordre dans lequel BrowserLab affiche les captures d'écran de
vos pages testées) en tirant les navigateurs vers le haut ou le bas dans la colonne Ordre des navigateurs.
Suppression d'un ensemble de navigateurs existant
1 Dans BrowserLab, cliquez sur le lien Ensembles de navigateurs dans le haut de la fenêtre d'application.
2 Sélectionnez l'ensemble de navigateurs à supprimer.
3 Cliquez sur le bouton de suppression (X rouge), puis confirmez la suppression de l'ensemble de navigateurs.
Modification du nom d'un ensemble de navigateurs existant
1 Dans BrowserLab, cliquez sur le lien Ensembles de navigateurs dans le haut de la fenêtre d'application.
2 Sélectionnez l'ensemble de navigateurs à renommer.
3 Cliquez sur le bouton Renommer cet ensemble (crayon), entrez le nouveau nom, puis appuyez sur Entrée/Retour.
Test d'une page dans un navigateur précis
Vous pouvez tester à tout moment une page dans l'un des navigateurs disponibles. En d'autres termes, le navigateur à
tester ne doit pas obligatoirement faire partie d'un ensemble.
1 Connectez-vous au service BrowserLab.
2 Cliquez sur le lien Tester en haut de la fenêtre d’application.
3 Dans la zone de texte URL, entrez l'URL de la page à tester.
4 Cliquez sur le menu Navigateur dans le coin supérieur gauche de la fenêtre d'application, puis choisissez un
navigateur. Le navigateur peut faire partie de l'ensemble de navigateurs par défaut, d'un de vos ensembles de
navigateurs personnalisés, ou figurer dans la liste de tous les navigateurs disponibles.
Actualisation des captures d'écran
❖ Pour actualiser une capture d’écran, cliquez sur le bouton Actualiser les captures d’écran à côté de la zone de texte URL.
Remarque : vous pouvez également utiliser le bouton Actualiser pour actualiser les captures d’écran mises en cache
susceptibles d’être conservées dans l’historique d’URL.
Modification du zoom
❖ Pour modifier le niveau de zoom d'une page, cliquez sur le menu Zoom dans le coin supérieur droit de la fenêtre
d'application, puis utilisez le curseur pour sélectionner le zoom désiré.
Dernière mise à jour le 13/5/2011
9
CS LIVE
BrowserLab
Réglage du délai de capture d'écran
Par défaut, BrowserLab charge la page Web qui vous intéresse et crée une capture d'écran juste après le chargement de
cette page. Vous pouvez toutefois régler un délai, de façon à ce que BrowserLab charge la page, mais n'effectue la
capture d'écran qu'après un délai précis. Cette fonctionnalité est particulièrement pratique si la page contient des
éléments mobiles ou animés (comme des fichiers Flash ou des éléments AJAX) dont le chargement complet peut
prendre quelques secondes de plus.
❖ Pour régler le délai de capture d'écran, entrez une valeur dans la zone Délai ou spécifiez-la à l'aide des flèches (elle
se trouve à droite de la zone de texte URL). Le délai minimal est de 0 secondes et le délai maximal de 10 secondes.
Utilisation de règles et de repères
Les règles et repères peuvent vous aider à effectuer des comparaisons d'images d'un niveau de précision allant jusqu'au
pixel.
Affichage des règles
❖ Pour activer ou désactiver l'affichage des règles, appuyez sur la touche R de votre clavier. La règle affiche ses mesures
en pixels.
Création d'un repère horizontal ou vertical
• Pour créer un repère horizontal ou vertical, faites glisser la règle correspondante et relâchez le bouton de la souris
lorsque vous avez atteint l’endroit souhaité. Vous pouvez toujours repositionner le repère en le faisant glisser de
nouveau.
• Pour supprimer un repère, faites-le glisser vers la règle correspondante jusqu'à ce qu'il disparaisse.
• Pour supprimer tous les repères, double-cliquez sur la zone dans l'angle supérieur gauche de la règle.
Remarque : les repères sont conservés lorsque vous actualisez les captures d'écran.
Ajustement de l'alignement de la capture d'écran
Puisque l'alignement du contenu des pages dépend des navigateurs, même lorsque le contenu est « identique », il peut
parfois être difficile de se faire une idée de la relation entre les éléments de page, notamment lorsque vous utilisez le
mode Pelure d'oignon. Par exemple, la capture d’écran ci-dessous illustre la même zone sur une page dans Firefox
(Windows) et Safari (OSX), en mode Pelure d’oignon.
Dernière mise à jour le 13/5/2011
10
CS LIVE
BrowserLab
Captures d’écran de Firefox Windows et Safari OSX en mode Pelure d’oignon.
Dans l'exemple ci-dessus, il est pratiquement impossible de comparer les zones de texte en mode Pelure d'oignon, car
les alignements par défaut de chaque navigateur sont légèrement différents. Toutefois, BrowserLab vous permet
d'ajuster l'alignement par défaut de vos captures d'écran, et ainsi d'effectuer des tests ciblés sur des zones spécifiques
d'une page Web, même lorsque les alignements sont désactivés.
Dernière mise à jour le 13/5/2011
11
CS LIVE
BrowserLab
Les deux captures d'écran en mode Pelure d'oignon après ajustement de l'alignement.
BrowserLab vous permet d'aligner les captures d'écran de manière individuelle ou globale (« alignement intelligent »),
afin de les ajuster sur un point particulier spécifié.
Alignement des captures d'écran de manière individuelle
1 Affichez une ou plusieurs captures d'écran en mode 1 écran ou en mode Affichage double (la fonction d'alignement
est désactivée en mode Pelure d'oignon).
2 Cliquez sur le bouton d'activation ou de désactivation du mode Alignement. (il se trouve en regard du menu
Affichage, à droite de la zone de texte URL).
Remarque : vous pouvez également activer et désactiver l'alignement en appuyant sur la touche A du clavier de votre
ordinateur.
Le carré d'alignement apparaît dans l'angle supérieur gauche de votre capture d'écran.
3 Faites glisser le carré d'alignement vers une zone de la page sur laquelle définir le nouveau point d'alignement. Vous
pouvez utiliser le grand carré au centre du carré d'alignement pour centrer sur la zone générale.
Une fois que vous relâchez la souris, la zone d'affichage du carré d'alignement agrandit la zone concernée de la
capture d'écran. L'agrandissement vous permet de sélectionner un nouveau point d'alignement avec une parfaite
précision des pixels.
Remarque : si vous faites glisser le carré d'alignement à partir de l'espace dans le carré plutôt qu'à partir de sa bordure,
la zone en dessous est agrandie au fur à mesure que vous faites glisser le curseur.
4 Sélectionnez un nouveau point d'alignement en choisissant un pixel et en cliquant dessus. Vous constaterez qu'au
fur et à mesure que vous faites glisser le curseur sur la zone agrandie, une seconde paire de réticules et un point de
sélection apparaissent.
5 Cliquez sur Aligner la capture d'écran actuelle ici.
Dernière mise à jour le 13/5/2011
12
CS LIVE
BrowserLab
Lorsque vous alignez une capture d'écran de manière individuelle, le nouveau point d'alignement spécifié est
déplacé vers l'angle supérieur gauche de l'interface de la capture d'écran.
6 (Facultatif) Si vous êtes en mode Affichage double, alignez la seconde capture d'écran si nécessaire.
Alignement intelligent de toutes les captures d'écran
La fonction Alignement intelligent vous permet d'indiquer un point d'alignement sur une capture d'écran, puis
d'aligner toutes les autres captures d'écran sur ce point.
1 Affichez une ou plusieurs captures d'écran en mode 1 écran ou en mode Affichage double. (la fonction d'alignement
est désactivée en mode Pelure d'oignon).
2 Cliquez sur le bouton d'activation ou de désactivation du mode Alignement (il se trouve en regard du menu
Affichage, à droite de la zone de texte URL).
Remarque : vous pouvez également activer et désactiver l'alignement en appuyant sur la touche A du clavier de votre
ordinateur.
3 Faites glisser le carré d'alignement vers une zone de la page sur laquelle définir le nouveau point d'alignement.
4 Sélectionnez un nouveau point d'alignement en choisissant un pixel et en cliquant dessus.
Remarque : le point d'alignement choisi doit être unique pour que BrowserLab aligne correctement le point sur toutes
les captures d'écran. Il est recommandé de sélectionner des couleurs ou éléments caractéristiques (par exemple, le coin
noir d'une image) lorsque vous spécifiez le point d'alignement.
5 Cliquez sur Alignement intelligent de tout sur cette région.
BrowserLab vous indique la progression de l'alignement intelligent. Cliquez sur Retour au test pour fermer le carré
d'alignement et retourner au test, ou cliquez sur Retour à l'alignement pour laisser le carré d'alignement ouvert et
réessayer.
Enregistrement de captures d'écran sur votre bureau
❖ Pour enregistrer une capture d'écran sur le bureau de votre ordinateur local, cliquez avec le bouton droit de la souris
(Windows) ou appuyez sur CTRL puis cliquez (Mac OS) sur la capture d'écran dans la fenêtre de l'application
BrowserLab, puis cliquez sur Enregistrer en local.
Utilisation de raccourcis clavier
BrowserLab comporte divers raccourcis clavier intégrés qui vous aideront à travailler de façon plus efficace. Le tableau
ci-dessous répertorie les raccourcis clavier disponibles :
Touche
Script
Flèche Bas
Capture d'écran du navigateur suivant dans l'ensemble de navigateurs sélectionné.
Flèche Haut
Capture d'écran du navigateur précédent dans l'ensemble de navigateurs sélectionné.
Signe Plus
Effectue un zoom avant sur la capture d'écran.
Signe Moins
Effectue un zoom arrière sur la capture d'écran.
1
Affiche la capture d'écran en mode 1 écran.
2
Affiche les captures d'écran de deux navigateurs côte à côte (Affichage double).
3
Affiche la capture d'écran en mode Pelure d'oignon.
Flèche Gauche
En mode Pelure d'oignon, augmente la visibilité de la capture d'écran du navigateur sélectionné à gauche.
Dernière mise à jour le 13/5/2011
13
CS LIVE
BrowserLab
Touche
Script
Flèche Droite
En mode Pelure d'oignon, augmente la visibilité de la capture d'écran du navigateur sélectionné à droite.
R
Affiche ou masque les règles.
Ctrl/Commande
Permet de suivre des liens actifs sur la page.
H
Transforme le curseur en outil de panoramique (main), ce qui vous permet de faire défiler la page.
Maj
Crée un « curseur fantôme » (copie du curseur) sur l'image de gauche ou de droite en mode Affichage double.
A
Active ou désactive le mode Alignement
La liste des raccourcis clavier est également accessible dans l'interface de BrowserLab. Pour accéder à cette liste, vous
pouvez à tout moment cliquer sur le lien Raccourcis clavier dans le coin supérieur droit de la fenêtre d'application.
Si un raccourci clavier ne fonctionne pas comme prévu, il se pourrait que vous ayez sélectionné l'un des contrôles de
l'application. Cliquez sur l'image principale dans la fenêtre d'application afin de rétablir tous les contrôles, puis tentez
à nouveau d'utiliser le raccourci clavier.
Modification de la langue de la fenêtre d’application
Vous pouvez modifier la langue de la fenêtre d’application BrowserLab. BrowserLab prend actuellement en charge les
fenêtres d’application en allemand, anglais, espagnol, français, italien et japonais.
• Pour ce faire, sélectionnez une langue dans le menu contextuel Langue (situé en haut à droite près du lien
Raccourcis).
Utilisation de BrowserLab pour Firebug
Le module complémentaire Adobe BrowserLab pour Firebug vous permet de prévisualiser des pages dans BrowserLab
après que vous avez effectué les modifications temporaires sur la page à l'aide de Firebug. Lorsque vous prévisualisez
une page à partir de Firefox, BrowserLab montre l'apparence qu'a la page modifiée dans Firefox et dans d'autres
navigateurs.
Pour utiliser le module complémentaire BrowserLab pour Firebug, vous devez disposer des éléments suivants :
• Firefox 3.5 ou version supérieure
• Firebug (disponible à l'adresse http://addons.mozilla.org/)
• Le module complémentaire Adobe BrowserLab pour Firebug (disponible à l'adresse http://addons.mozilla.org/)
Une fois que vous avez installé le module complémentaire BrowserLab pour Firebug, une icône BrowserLab s'affiche
dans l'angle inférieur droit de la fenêtre de votre navigateur. Le module complémentaire de BrowserLab est également
accessible à partir du menu Outils (Outils > Adobe BrowserLab pour Firebug).
Aperçu d'une page à partir de Firefox
1 (Facultatif) Dans Firefox, réalisez des modifications temporaires sur la page à l'aide de Firebug.
Dernière mise à jour le 13/5/2011
14
CS LIVE
BrowserLab
2 Cliquez avec le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée
(Mac OS) sur l’icône Adobe BrowserLab pour Firebug dans l’angle inférieur droit du navigateur et sélectionnez
l’une des options suivantes :
Aperçu de l'URL vous permet de prévisualiser la page de la manière dont elle apparaît sur le Web. L'URL de l'aperçu
dans BrowserLab commence par « http ».
Aperçu de la source locale vous permet de prévisualiser une copie du fichier source local, qui inclut les
modifications effectuées à l'aide de Firebug. De plus, l'option Aperçu de la source locale vous permet d'interagir
avec une page et de prévisualiser les différents états de la page (par exemple, un panneau ouvert dans un widget
Accordéon), au lieu d'afficher seulement l'état initial de la page. L'URL de l'aperçu dans BrowserLab commence par
« firebug ».
Remarque : l'option Aperçu de la source locale vous permet également de prévisualiser des pages qui nécessitent
normalement de se connecter à un site en direct (par exemple, la page d'un chariot dans un magasin en ligne).
La première fois que vous prévisualisez des fichiers source locaux, le module complémentaire de BrowserLab vous
demande si vous souhaitez accorder à votre ordinateur l'accès en lecture à BrowserLab. Si vous refusez l'accès en lecture
à BrowserLab, BrowserLab ne pourra pas interagir avec les fichiers sur votre ordinateur et vous ne pourrez pas
prévisualiser les pages. Vous devrez sélectionner Accepter pour autoriser l'accès en lecture à BrowserLab. Vous pouvez
modifier ce paramètre de sécurité à tout moment (voir section suivante).
Modification des paramètres de sécurité
1 Cliquez avec le bouton droit de la souris (Windows) ou cliquez tout en maintenant la touche Ctrl enfoncée
(Mac OS) sur l’icône Adobe BrowserLab pour Firebug dans l’angle inférieur droit du navigateur et sélectionnez
Options.
2 Modifiez le paramètre de sécurité Autoriser/Refuser l'accès en lecture, si nécessaire.
Conservation des hacks CSS
Si vous utilisez des hacks CSS, les aperçus destinés à d'autres navigateurs ne les reconnaîtront pas par défaut car Firefox
supprime tous les hacks CSS qui ne lui sont pas propres. Le module complémentaire BrowserLab vous permet de
conserver les hacks CSS, mais si vous faites ce choix, BrowserLab ne pourra pas refléter les modifications majeures
effectuées (comme la création d'une nouvelle règle) dans Firebug.
❖ Pour conserver les hacks CSS, cliquez avec le bouton droit de la souris (Windows) ou cliquez tout en maintenant
la touche Ctrl enfoncée (Mac OS) sur l’icône Adobe BrowserLab pour Firebug dans l’angle inférieur droit du
navigateur et sélectionnez Conserver les hacks CSS.
Utilisation de sites exigeant une authentification
Vous pouvez tester des pages exigeant une authentification HTTP (noms d’utilisateur et mots de passe) à l’aide du
module complémentaire BrowserLab pour Firebug. Ce module complémentaire permet d’envoyer le fichier source
local depuis Firefox vers BrowserLab et vous permet de tester des pages que vous ne pourriez autrement pas visualiser
dans BrowserLab.
1 Démarrez Firefox et ouvrez le site que vous souhaitez tester.
2 Connectez-vous au site en fonction des besoins.
3 Cliquez sur l’icône Firebug dans l’angle inférieur droit du navigateur pour activer Firebug.
4 Cliquez avec le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Ctrl enfoncée (Mac OS)
sur l’icône Firebug, puis sélectionnez Activer tous les panneaux (l’icône Firebug doit être orange).
Dernière mise à jour le 13/5/2011
15
CS LIVE
BrowserLab
5 Cliquez avec le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Ctrl enfoncée (Mac OS)
sur l’icône BrowserLab pour Firebug.
6 Sélectionnez Conserver les hacks CSS, puis sélectionnez Aperçu dans la source locale.
Utilisation de BrowserLab dans Dreamweaver
Adobe BrowserLab permet de consulter un aperçu du contenu Web local depuis Dreamweaver, sans devoir au
préalable le publier sur un serveur accessible publiquement. Vous pouvez consulter un aperçu des fichiers depuis votre
site Dreamweaver local ou depuis un serveur distant ou d'évaluation.
BrowserLab ne fonctionne qu’avec Dreamweaver CS5 (version 11.0.3) et les versions ultérieures. Si vous utilisez
Dreamweaver CS5 et que vous n’avez pas procédé à la mise à jour vers la version 11.0.3, vous devez l’effectuer avant
d’utiliser BrowserLab. Vous pouvez télécharger le programme de mise à jour vers la version 11.0.3 depuis le site Web
Adobe.
Définition de l'emplacement préférentiel des fichiers
BrowserLab permet de consulter un aperçu des versions locales de vos fichiers, de fichiers sur un réseau local ou de
fichiers sur un autre serveur (par exemple, un serveur intermédiaire distant ou un serveur d’évaluation distant).
Lorsque vous consultez un aperçu d’un fichier local ou d’un fichier de réseau local, BrowserLab charge en fait ce fichier
sur un serveur BrowserLab, réalise les captures d’écran de votre page dans différents navigateurs, puis affiche ces
captures dans la fenêtre d’application BrowserLab. Lorsque vous consultez un aperçu d'un fichier depuis un serveur,
BrowserLab procède de la même façon que pour les autres fichiers en direct : il réalise des captures d'écran du fichier
du serveur dans différents navigateurs, puis affiche celles-ci dans la fenêtre d'application.
1 Choisissez Fenêtre > Extensions > Adobe BrowserLab.
2 Dans le panneau Adobe BrowserLab, choisissez un emplacement dans le menu contextuel.
Remarque : l'emplacement de fichier que vous choisissez reste inchangé jusqu'à ce que vous le changiez à nouveau.
Local/Réseau ordonne à BrowserLab de prévisualiser les fichiers depuis votre site local ou votre site de réseau local.
Lorsque vous prévisualisez un fichier en mode Création ou Code, BrowserLab utilise le fichier local comme source
pour les captures d'écran. Lorsque vous prévisualisez le fichier depuis le mode Affichage en direct, BrowserLab
utilise la page rendue par WebKit (le moteur de rendu du mode Affichage en direct) comme source de captures
d'écran.
Serveur ordonne à BrowserLab de prévisualiser les fichiers depuis votre serveur actif.
Dernière mise à jour le 13/5/2011
16
CS LIVE
BrowserLab
Lorsque vous prévisualisez des fichiers à l'aide de la configuration de serveur (c.-à-d. pas les fichiers du site
Dreamweaver local), le serveur qu'utilise BrowserLab est le serveur qui est actif dans Dreamweaver. Le serveur actif
est le serveur que vous avez sélectionné en dernier lieu dans le panneau fichiers développé ou réduit. Par exemple,
si vous avez envoyé les fichiers de votre site local sur un serveur d'évaluation précis, BrowserLab effectuera des
captures d'écran du fichier spécifié sur le serveur d'évaluation. Dreamweaver mémorise ce réglage et le conserve
jusqu'à ce que vous changiez manuellement de serveur actif. Pour savoir quel est votre serveur actif, cliquez sur le
bouton Développer du panneau Fichiers. Le serveur sélectionné (d'évaluation ou distant) est le serveur actif.
Important : Si votre serveur actif est un serveur distant (par exemple un serveur intermédiaire distant) ou un serveur
d'évaluation, vous devez compléter la zone URL Web du mode Edition de base du serveur. L'URL Web doit
correspondre à l'emplacement du serveur distant ou d'évaluation spécifié (adresse FTP pour les sites FTP, dossier
distant pour les sites Locaux/Réseau, et ainsi de suite).
Modification des paramètres d’autorisation
Lorsque vous consultez un aperçu de fichiers depuis un réseau local (par exemple un serveur local exécutant un
système de gestion de contenu tel que WordPress, Drupal ou Joomla!, ou un serveur réseau local dans un pare-feu
d’entreprise), vous devez donner à BrowserLab l’autorisation de charger ces fichiers et d’en réaliser des captures
d’écran. Lorsque vous donnez à BrowserLab l’autorisation de charger ces types de fichiers réseau locaux, votre
ordinateur fait office de passerelle entre le service BrowserLab et les fichiers eux-mêmes. BrowserLab n’étant pas en
mesure d’accéder directement à ces fichiers, votre ordinateur se charge d’y accéder et les fournit à BrowserLab.
BrowserLab met en cache les fichiers pendant une durée limitée et les utilise uniquement à des fins de rendu des
captures d’écran demandées.
Remarque : BrowserLab n’effectue pas le rendu des styles CSS des sites CMS qui utilisent le protocole https.
Lorsque vous demandez un aperçu d’un fichier qui réside sur un réseau local, ou d’un fichier doté de dépendances sur
des fichiers réseau locaux (par exemple, une page d’index CMS avec des fichiers PHP dépendants), Dreamweaver
numérise la page pour déterminer si vous devez ou non donner à BrowserLab l’autorisation de charger le ou les
fichiers. Vous pouvez choisir d’accorder des autorisations lors de ces demandes d’aperçu ou opter pour une définition
manuelle des autorisations.
Accord d'autorisations
❖ Pour accorder des autorisations pour les emplacements réseau associés à un fichier spécifique et à ses dépendances,
lancez un aperçu du fichier dans BrowserLab, puis cliquez sur le bouton Autoriser dans la boîte de dialogue qui
s’affiche.
Remarque : si vous cliquez sur le bouton Refuser de cette boîte de dialogue, les ressources des emplacements spécifiés ne
seront pas téléchargées dans BrowserLab et ne s’afficheront donc pas dans l’aperçu.
Définition ou modification manuelle des autorisations
Pour définir ou modifier manuellement des autorisations, suivez les instructions ci-dessous.
1 Sélectionnez Paramètres d’autorisation dans le menu Options situé dans la partie supérieure droite du panneau
BrowserLab.
2 Sélectionnez Autoriser ou Refuser, puis cliquez sur OK.
Prévisualisation d'une page
1 Dans Dreamweaver, ouvrez la page à prévisualiser.
2 Choisissez Fichier > Aperçu dans le navigateur > Adobe BrowserLab.
Dernière mise à jour le 13/5/2011
17
CS LIVE
BrowserLab
3 Lorsque la fenêtre de connexion de BrowserLab s'affiche, entrez votre ID Adobe (adresse électronique) et votre mot
de passe, puis cliquez sur Connexion.
Modification et actualisation d'une page
Vous pouvez modifier une page locale dans Dreamweaver puis actualiser la page dans BrowserLab sans devoir au
préalable enregistrer le fichier dans Dreamweaver ni l'envoyer à un serveur. Cette fonctionnalité est particulièrement
utile si vous apportez de nombreuses modifications à votre code CSS et que vous souhaitez prévisualiser toutes les
modifications au fur et à mesure que vous les apportez, sans devoir enregistrer vos modifications.
Remarque : si vous affichez un aperçu dans BrowserLab à l'aide de la configuration distante, BrowserLab enregistre
automatiquement votre fichier et l'envoie au serveur actif avant la prévisualisation.
1 Dans Dreamweaver, ouvrez la page à prévisualiser.
2 Choisissez Fichier > Aperçu dans le navigateur > Adobe BrowserLab.
3 Apportez des modifications à la page ou au code CSS qui y est joint.
4 Cliquez sur le bouton Actualiser les captures d’écran dans la fenêtre d’application de BrowserLab.
BrowserLab affiche l’aperçu de votre page sans exiger que vous enregistriez au préalable les modifications locales.
Dernière mise à jour le 13/5/2011
18
Chapitre 6 : Adobe Story
Adobe Story
Dernière mise à jour le 13/5/2011