banner zest gettingstarted fr

5/17/2018 Banner Zest Gettingstarted FR - slidepdf.com

http://slidepdf.com/reader/full/banner-zest-gettingstarted-fr 1/61

B A N N E R Z E S TP r e m i e r s P a s

A Q U A F A D A S

Get the most of your digital l i fe

C a p O m e g a , R o n d P o i n t B e n j a m i n F r a n k l i n 3 4 9 6 0 M o n t p e l l i e r F r a n c e

w w w . b a n n e r z e s t . c o m

http://www.bannerzest.com/

http://www.bannerzest.com/



Table des matières

Bienvenue ! 1

Introduction 2

BannerZest vs BannerZest Pro 2

Installer BannerZest 2

Lancer BannerZest 3

Création de la première bannière 4

Media 5

Thèmes 6

Paramètres 7

Publication 8

Sauvegarder et recharger votre travail. 9

La notion de dépendances 9

Publier votre bannière 10

L’Interface Utilisateur 12

La fenêtre principale 12

i



La Palette Information 13

Le mode Edition Image 14

Vous pouvez accéder au mode Edition Image de plusieurs façons : 14

La vue type matrice 15

La vue avec image unique 16

Le Ratio d’Aspect 1

Gestion du ratio d’aspect du Média par les différents thèmes 1

Cas 1 : le thème impose un ratio d’aspect fixé 4

Cas 2 : Le thème n’impose pas un ratio d’aspect fixé 5

Cas 3: la taille de la bannière impose le ratio d’aspect 9

Résumé 11

Choisir et préparer vos média 12

Choisir le contenu de votre bannière 12

Une note sur la conversion de média 12

The Media Browser (seulement pour la version PRO) 13

Ajouter de nouvelles sources. 14

Sources déconnectées 14

Personnaliser votre bannière 1

La nécessité de mise à jour 1

Taille 2

ii



Ratio d’aspect Media 3

Bordure 3

Ecran de chargement 4

Titre 5

Sous-titre 5

Publier 1

Format de sortie 1

Options de sortie 1

Publier via FTP 4

Qu’est-ce que FTP ? 4

Est-ce que tout le monde peut utiliser FTP ? 5

Le système de fichiers et votre site web 5

Comprendre le dialogue FTP de BannerZest 6

Publier via .Mac

9

Intégrer votre bannière 11

Modifier une bannière publiée 14

Les autres fonctions pas-si-importantes-mais-néanmoins-très-sympa1

Autres ressources 2

iii



Bienvenue !Créer une animation pour votre site web - Est-ce si difcile ?

Et bien, si vous n’êtes pas un expert en Flash, ça peut l’être véritablement,

qui explique pourquoi les sites web personnels incluent rarement des anima

tions. Même les sites web professionnels utilisent souvent des GIFs animés

qui sont plutôt fastidieux à intégrer, mais, qui, au moins, ne requièrent pas

de talents poussés en animation. Le problème est que le résultat final n’est

pas souvent aussi lisse et afné qu’une animation vectorielle Flash.

C’est là où BannerZest et BannerZest PRO entrent en scène.

BannerZest vous permet de mettre vos idées en mouvement et créer de sur-

prenantes animations pour votre site web en quelques clics. Vous n’avez b

soin ni de connaître Flash, ni même de l’avoir en votre possession. Banner-

Zest vous o rira des thèmes personnalisables dans lesquels il vous sufra

d’ajouter vos média.

BannerZest s’intègre aisément dans le mode de “vie numérique”, à la fois

pour importer des données (BannerZest sait dialoguer avec iPhoto, ApertureLightroom ou encore iDive) et pour les exporter (iWeb, .Mac support sont in

clus).

Ce document vous entraînera au travers des fonctionnalités de BannerZest e

BannerZest Pro avec l’intention de vous donner une riche vue d’ensemble de

possibilités et des fonctions originales de ces outils.

Calez-vous bien dans votre fauteuil et savourez la visite !

1



IntroductionTout d’abord, quelques mots pour vous présenter l’interface utilisateur et d

crire comment vous allez interagir avec.

BannerZest vs BannerZest Pro

BannerZest se décline en 2 versions : une version Standard (STD) et une version Profession

nelle (PRO). Ce guide décrit les deux versions : lorsqu’il s’agira d’une fonction uniquement

disponible dans la version PRO, une icône s’afchera dans la marge.

Installer BannerZest

Si ce n’est pas déjà fait, téléchargez BannerZest ou BannerZest Pro à partir de la page :

http://www.aquafadas.com/download-video-software.html

2

http://www.aquafadas.com/fr/download-video-software.html





Dès le téléchargement une image disque devrait apparaître automatiquement sur votre bu-reau et la fenêtre suivante devrait s’ouvrir dans le Finder:

Faites glisser simplement l’icône de BannerZest (ou BannerZest Pro) vers le dossier Applica

tions comme indiqué pour installer le logiciel.

Lancer BannerZest

Au lancement de BannerZest, vous obtiendrez la fenêtre suivante (version Standard à gauch

version PRO à droite) :

3



Cette fenêtre vous permet de déposer l’ensemble initial de fichiers média dans l’applicationpour créer la première bannière. Pour démarrer, choisissez simplement des fichiers images

dans le Finder et déposez-les dans la fenêtre. Vous pouvez également choisir un dossier

contenant des images et BannerZest les ajoutera toutes à la bannière. Vous n’êtes pas limit

dans l’utilisation des fichiers. Vous pouvez également faire glisser des images à partir d’au

tres applications comme iPhoto.

BannerZest Pro inclut un Media browser qui peut être appelé en cliquant sur l’icô

dans la barre de statut de la fenêtre. Ce bouton est déjà présent dans la fenêtre

d’accueil, ce qui est parfait si vous souhaitez parcourir vos fichiers dès le démar-

rage. Le Media Browser est décrit en détails dans la section XXX.

Création de la première bannière

Une fois que vous avez déposé des images dans la zone de dépôt, BannerZest vous montre

un aperçu de la bannière utilisant un thème par défaut et ouvrira une nouvelle palette flot-

tante comme illustré ci-dessous :

La palette flottante vous permet de choisir entre 4 onglets :

4



Media

L’onglet Media vous permet d’accéder à tous les média que vous avez insérés dans la ban-

nière. Avec l’onglet Media vous pouvez :

•réorganiser les media dans l’ordre que vo

préférez. Cliquez simplement sur la vignettde l’image et déplacez la .

•changer le titre, le sous-titre des média. L

titres et sous-titres sont utilisés dans la plu

part des thèmes : vérifiez les paramètres d

thème pour voir quels e ets additionnels

peuvent être appliqués au titre et au sous-

tre.

•accéder à la fenêtre d’édition du média (ro

gnage, centrage, etc...) par double-clic sur

l’image du média

• supprimer des médias de la liste

Assigne une URL à chaque média. Assigner une URL signifie que votre bannière d

vient interactive. Si un spectateur clique sur l’image alors qu’elle est montrée dans

bannière, le navigateur suivra le lien de l’URL attaché à l’image et ouvrira la page

web correspondante.

5



Thèmes

L’onglet Thèmes vous permet de change

le thème de la bannière. BannerZest est

livré avec un lot de thèmes et d’autres se

ront ajoutés par la suite1.

Pour changer le thème, cliquez simpleme

sur la vignette du thème souhaité pour v

la fenêtre d’aperçu changer en consé-

quence. Notez bien que la taille de la ba

nière n’est pas conservée entre les chan-

gements de thèmes. Vous remarquerez

également que la liste des paramètres diponibles changera car chaque thème pos

sède une liste spécifique de paramètres.

Note:

Vous pouvez passer d’un thème A à un

thème B puis décider plus tard de reveni

vers le thème A. Dans ce cas, le précéde

paramétrage du thème A sera restauré.

La version PRO dispose d’une liste

de thèmes plus conséquente du fait de la

possibilité d’assigner des URLs aux médet donc de la possibilité d’o rir des thèm

de navigation (Accordéon, etc....) qui n’a

raient pas de raison d’être dans la versio

Standard.

6

1 Un kit de développement de thèmes est disponible. Veuillez contacter [email protected] pour davantag

d’informations concernant la création de thèmes pour bannerZest. Vous pouvez aussi visiter:

http://www.aquafadas.com/fr/bannerzest/bannerzest_sdk.php



mailto:[email protected]

mailto:[email protected]



Paramètres

Le troisième onglet vous permet d’accéder

aux paramètres du thème ce qui vous

permet de personnaliser totalement l’ap-

parence de votre bannière. Certains para-

mètres sont communs à la plupart des

bannières:

- l’écran de chargement: ce groupe de

paramètres vous permet de visualiser

l’apparence de l’écran de chargement

qui apparaît au démarrage de la ban-

nière.

- la taille,

- la bordure incluant la possibilité de dé-

finir des coins arrondis pour la bordure

de votre bannière,

- les couleurs, les gradients, etc....

7



Publication

Ce dernier onglet vous permet d

configurer vos réglages de publ

cation et de publier votre banniè

soit localement (dans un dossie

sur le disque) ou sur un serveur

distant (via .Mac ou FTP).

Tous les réglages de publication

sont afchés dans cet onglet et

peuvent être changés facilemen

BannerZest se rappellera de la d

de publication et de la destinatioVous pourrez de ce fait toujours

retrouver le code HTML de la de

nière version publiée.

La version PRO (image sur

gauche) inclut des options de pu

blication avancées. Elle vous per

met en particulier d’associer un

visualisateur de médias (Shadow

Box ou LightBox) à votre banniè

ce qui permet de lancer une visu

lisation de grande taille de vosimages dans une fenêtre flottan

8



Sauvegarder et recharger votre travail.

Quand vous éditez une bannière, pensez à sauvegarder votre travail régu

lièrement. Choisissez File > Save As... ou File > Save comme vous le

feriez avec n’importe quel autre document.

Choisissez File>Open ou File > Open Recent pour appeler une

bannière préalablement sauvegardée.

Les fichiers BannerZest ont une extension .bnz par défaut. Vous

pouvez double-cliquer sur ces fichiers pour lancer BannerZest et

commencer à éditer votre bannière.

La notion de dépendances

Une bannière est constituée des données suivantes :

• les informations du média telles que : le chemin du media, le titre du media et le sous-ti-

tre, les URLs, etc...

• le thème

• la taille de la bannière et les options de chargement à l’écran

• les paramètres spécifiques du thème comme les couleurs, les bordures, les options de ti-

ming

Lorsque vous sauvegardez une bannière sur un disque, un fichier bnz est créé avec toutes

ces données.

Cependant, les fichiers média eux-mêmes ne sont pas inclus dans le fichier de la ban-

nière. À la place, BannerZest enregistrera des références pour ces fichiers sous forme d’al

de fichier. Cela signifie que BannerZest retrouvera toujours vos fichier de media, même si

vous les déplacez à plusieurs reprises sur votre disque, car le système d’alias du Finder co

servera la trace des fichiers d’origine. Toutefois, si les fichiers sont stockés sur un volume

qui n’est plus disponible, ou si vous supprimez le media du disque, BannerZest ne pourra

plus afcher votre bannière sous sa forme originale.

Vous pouvez néanmoins sauvegarder une version portable de votre bannière appelée “ban-

nière autonome” en choisissant le menu Fichier > Sauver une copie autonome....

9



Publier votre bannière

Dans le but d’intégrer une bannière dans votre site web, il vous faut la mettre en ligne. Cli-

quez simplement sur le bouton Publier pour lancer l’Assistant de publication. Cela vous

permet de choisir entre plusieurs options :

- publier sur .Mac

- publier sur FTP

- publier localement dans un fichier

Une fois votre bannière publiée, BannerZest vous donnera un fragment de code qui peut êt

intégré dans tout éditeur HTML comme on le verra de manière plus détaillée dans les pro-

chains chapitres.

Prévisualiser ou obtenir le code de la dernière version publiée.

BannerZest va souvent vous donner le choix entre 2 ou 3 versions du code HTML :

10



1. Une première version comprenantdes appels javascript et qui com-

porte notamment un test évolué

de la version du Player Flash. Ce

code gère de façon élégante la

non compatibilité du lecteur

Flash sur tous les navigateurs et

en particulier Internet Explore.

C’est la méthode recommandée

pour intégrer votre bannière. Elle

fonctionne très bien avec tous les

éditeurs de site web et avec cer-

tains services de publication enligne.

2. La version Wordpress/Dotclear : il

s’agit de la même version que la

version 1. ci-dessus, mais elle

fait l’objet d’un formattage parti-

culier qui la rend totalement

compatible avec WordPress et

DotClear et d’autres systèmes de

publciation en ligne.

3. Une version ne comportant pas de javascript. Cette version doit être utilisée pour la pu

blication d’une bannière sur certains systèmes de blog qui n’acceptent pas de javascripou sur des sites de socialisation tels que facebook et mySpace.

L’integration d’une bannière sur une page web dépend de l’éditeur que vous utilisez. Nous

avons tenté de couvrir toutes les spécificités liées aux di érents éditeurs sur le Wiki de Ban

nerZest.

11

http://www.aquafadas.eu/wiki/BannerZest:How_to




L’Interface UtilisateurComment se familiariser avec les di érents éléments de l’Interface utilisate

La fenêtre principale

La fenêtre principale afche un aperçu de la bannière en prenant compte :

- du média

- du thème sélectionné

- des paramètres actuels

L’aperçu est une vue web utilisant le lecteur Flash c’est à dire qu’il montre la bannière telle

qu’elle paraîtra dans votre page web. L’échelle est de 1:1 ce qui signifie que la taille de la

bannière est exactement celle que vous avez spécifiée dans l’onglet de Réglages.

La Barre d’état standard

La Barre d’état standard Pro

Le bas de la fenêtre principale comporte les éléments suivants :

12

Comment réduire la hauteurdu commentaire sur Rafraîchir etenlever le tiret devant Le boutonPublication (idem dans versionUK)



Le bouton Rafraîchir : vous pouvez cliquer sur ce bouton pour appliquer les

changements à votre bannière ou forcer la bannière à redémarrer depuis le dé-

but.

Le bouton Info : en cliquant sur ce bouton vous appellerez (ou cacherez) la pa-

lette information.

Le bouton de rognure : en cliquant sur ce bouton, vous passerez en mode Editio

ce qui vous permettra de rogner et ajuster les images. Voir plus loin la descrip-

tion.

La version Pro possède un bouton Media qui permet l’accès à votre média

image depuis un navigateur média.

La Palette Information

La palette information est une palette flottante qui peut être déplacée sur tout votre écran o

cachée si nécessaire. Comme décrit plus tôt, elle vous permet d’accéder aux 4 onglets de

personnalisation du thème :

1. L’onglet Media pour contrôler les Média

2. L’onglet Thèmes pour sélectionner votre thème

3. L’onglet Réglages pour contrôler les paramètres spécifiques de votre thème.

4. L’onglet Publication pour contrôler les paramètres de publication de votre bannière et

publier.

13



Le mode Edition Image

Vous pouvez accéder au mode Edition Image de plusieurs façons :

- soit en cliquant sur le bouton Rognure dans la barre de statuts de la fenêtre princ

pale,

- soit en cliquant sur le bouton Rognure dans l’Inspecteur de Média (voir plus bas)

- soit en sélectionnant ‘Image Editing’ à partir du menu Media.

- soit par double-clic sur l’imagette du média.

Le mode Edition Image vous permet de contrôler le ratio d’aspect de vos média aussi bien

que la portion de média visible dans la bannière. Bien évidemment, certaines bannières im-

poseront un ratio d’aspect pour vos média comme vu dans la section XXX.

Le mode Edition Image peut vous donner deux types de vues :

• la vue type matrice : dans laquelle vous pouvez voir 6 images à la fois et contrôler com-ment les ajustements de l’image seront appliqués.

• une vue avec image unique dans laquelle le média sélectionné s’afche en plein cadre

dans la fenêtre. Ce mode vous permet d’éditer la zone de cadrage en mode détails.

Vous pouvez passer d’un type de vue à l’autre en utilisant le bouton au bas de la fenêtre :

: passer à la vue Image unique

: passer à la vue Matrice.

14

?



La vue type matrice

Utilisez les flèches en bas de la fenêtre pour revenir à l’image précédente ou passer à la su

vante (6 images afchés en même temps).

15



La vue avec image unique

L’image sélectionnée s’afche dans la fenêtre.

Utilisez les flèches en bas de la fenêtre pour revenir à l’image précédente ou passer à la su

vante.

16



Une barre de défilement vous permet de changer l’échelle de l’image afin de placer uneportion di érente de l’image dans la zone de cadrage, tandis qu’avec la souris vous pouve

balayer l’écran pour positionner l’image sous le

masque.

Ajuster la portion visible de l’image

En complément, une palette flottante fournit des outils qui vous aideront à ajuster la vue :

17



• Coller sur le bord : cette option activera l’ancrage de manière à ce que la bordure de

l’image s’aligne automatiquement avec la bordure la plus proche de la zone de cadrage.

• (Couleur de) Fond : c’est la couleur qui s’appliquera au fond lorsque l’image ne remplirapas toute la zone de cadrage

18



• Center : ce bouton vous permet de centrer l’image sous le masque de cadrage sans chan

ger l’échelle.

•

19



• S’adapter au Rectangle: ce bouton centre l’image et ajuste l’échelle pour que l’image rentre dans le rectangle de détourage.

• Taille Originale: ce bouton ne change pas la position de l’image mais réinitialise l’échell

sa valeur d’origine.

• Réinitialiser: ce bouton centre l’image et ajuste l’échelle à sa valeur d’origine.

20



Le Ratio d’Aspect

Gestion du ratio d’aspect du Média par les dif érents thèmes

Les thèmes se partagent en 3 catégories:

1. les thèmes qui présupposent un ratio d’aspect spécifique pour l’image. Dans la version

actuelle de BannerZest, certains thèmes présupposent que l’image est carré. Ceci est d

au fait qu’un dessin particulier (ex : Exploda) fonctionne bien avec un ratio d’aspect im

posé.

L’utilisation d’un ratio d’aspect di érent produirait des résultats moins convaincants.

2. les thèmes qui ne présupposent pas un ratio d’aspect spécifique (ex : CoverFlow). Les

images s’afchent en plein écran sans aucun détourage.

3. les thèmes qui appliquent un rectangle de détourage aux images qui dépend de la taill

de la bannière. Ce sont des thèmes qui afchent le média dans toute la zone de la ban-

nière (ex: Simple Slideshow) et qui sont néanmoins nécessaires pour recadrer l’image d

telle manière qu’ils remplissent toute la zone de la bannière.

Dans le premier cas, le thème cadrera l’image pour garantir qu’elle rentre parfaitement dan

la plus grande case possible ayant le ratio imposé.

1



Dans le deuxième cas, l’image sera afchée avec son ratio d’aspect original (cf. l’exemple

CoverFlow ci-dessous).

Dans le dernier cas, la taille de la bannière appliquera le détourage à toutes les images (cf.

les Slidings Images ci-dessous).

2



Nous allons maintenant revoir chacun de ces 3 scénarios et expliquer comment BannerZest

permet de contrôler ce qui se retrouve afché dans la bannière obtenue dans chaque scéna

rio.

Une Note sur la taille des bannières

Comme cela sera expliqué dans cette section, la taille de la bannière et les paramè

tres de détourage de l’image sont souvent liés.

Certains thèmes ne vous permettent pas de choisir la taille de la bannière comme

vous le souhaitez, mais imposent un ratio d’aspect pour la bannière. Cela signifie

que vous de choisir la largeur ou la hauteur, mais pas les deux en même temps

Pourquoi ?

3



La raison est liée à la création de thèmes: un nombre d’entre eux sont dessinés pades artistes Flash habitués à des techniques expertes qui fonctionnent bien sur le

web où la taille de l’animation est fixée, mais qui ne fonctionnent pas au mieux

lorsque la taille de l’animation est assimilée à un paramètre.

Cas 1 : le thème impose un ratio d’aspect fixé

Dans le cas d’Exploda, par exemple, qui impose un ratio “carré”, c’est à dire qu’une case ca

ré sera utilisée pour détourer chaque image. Le mode Edition Image vous permet de contrô

la façon dont cette case est positionnée sur l’image.

Ouvrir en mode Edition Image donnera l’écran suivant :

Cette fenêtre afche les images dans une matrice de 3x2. La case de détourage carré est

clairement visible et montre comment les images seront découpées pour correspondre aux

4



exigences du thème. Par défaut, la case est calculée pour entrer dans le contour d’origine dl’image et maximise la part visible de l’image. Elle est aussi centrée.

Vous pouvez utiliser la souris pour ajuster la zone de détourage en tirant l’image sous la ca

comme décrit dans la section précédente (Image Editing Mode)

The visible part o

the media

This part of the

image is masked

Scale control

The final size of the media after the crop.

Cas 2 : Le thème n’impose pas un ratio d’aspect fixé

BannerZest possède de nombreux thèmes qui n’imposent aucune restriction sur le ratio

d’aspect. Cependant, cela ne peut être considéré comme un comportement standard pour

thème et nécessite d’être paramétré spécifiquement en sélectionnant une option dédiée da

les paramètres du thème.

5



Prenons l’exemple de Water Apparition. Par défaut, le thème utilise une image carré.

Toutefois, en allant dans les p

ramètres pour ce thème et en

choisissant un mode d’échelle

di érent pour l’image, vous

pouvez changer le comporte-

ment par défaut du thème et

lever la contrainte sur le ratio

d’aspect de l’image.

Avec ce paramétrage, les média sont afchés dans leurs formats et ratios d’aspect originau

6



Passer au mode Edition image donne ceci :

7



Comme on peut le voir, il n’y a plus de rectangle de détourage superposé sur les images in

dividuelles, montrant ainsi que les images seront utilisées sans altération. Le ratio d’aspect

original est clairement visible.

Mais il y a plus.

Si, maintenant, vous cliquez sur une image individuel

(ou double cliquez pour l’ouvrir en édition), un rectan

gle de détourage de forme libre est afché par dessu

l’image. Ce rectangle a des poignées qui permettent d

contrôler sa position et son ratio d’aspect. Vous pouv

utiliser ce rectangle pour créer votre propre zone dedétourage.

8



Ces thèmes vous permettent de contrôler pleinement la zone de détourage au niveau desmédia, comme on peut le voir dans la figure suivante où l’on a appliqué di érents rectang

de détourage à toutes les images de la page.

Une fois que toutes les zones de détourage ont été ajustées, il vous faut les appliquer aux

images en cliquant sur le bouton OK .

Cas 3: la taille de la bannière impose le ratio d’aspect

Certains thèmes ont été dessinés de telle façon que l’image remplit toute la place disponib

Dans ces thèmes (tous les thèmes de diaporama par exemple), vous avez la possibilité de

paramétrer la taille de la bannière précisément dans la section Taille du panneau des Para-

mètres de la bannière.

9



Dans l’exemple ci-dessus, nous avons paramétré la bannière pour avoir une largeur de 50

px alors que sa hauteur a été fixée à 200 px. Si nous passons en mode Edition Image, nous

pouvons voir que la taille de la bannière détermine le rectangle comme on peut le voir ci-

dessous.

10



La taille de détourage indiquée dans la fenêtre est égale à la taille de la bannière :

Résumé

Di érents thèmes imposent di érentes contraintes sur les media, qui à leur tour génèrent

des comportements di érents quand il s’agit d’éditer et ajuster vos images (détourage). Le

tableau suivant résume les di érentes possibilités

CAS EXEMPLES DE

THEMES

TAILLE DE LA

BANNIERE

DETOURAGE

La bannière impose

le ratio d’aspect

média

Water Apparition,

Exploda

Ratio d’aspect fixé

(*)

Ratio d’aspect fixé

La taille de la ban-

nière impose le ratio

d’aspect média

Simple Slideshows Pas de contrainte Ratio d’aspect fixé

Le thème n’impose

aucune contrainte

sur le ratio d’aspect

média

Water Apparition (**)

Gallery (**)

Dépend du thème

(***)

Forme libre

(*) Habituellement, vous ne pouvez pas paramétrer la largeur et la hauteur de la bannière in

dépendamment.

(***) Certains thèmes vous permettront de choisir la taille dans les deux directions, alors q

d’autres imposeront un ratio d’aspect fixe.

11



Choisir et préparer vos média

Choisir le contenu de votre bannière

Actuellement, BannerZest ne supporte que les média sous forme d’images. La plupart des

formats d’image communs sont supportés: JPG, TIFF, PNG, GIF, ICNS, RAW, PSD, ...

Il vous suft de sélectionner des illustrations en utilisant le Finder et de les déposer :

- soit dans l’écran d’accueil de BannerZest

- soit dans l’onglet Media de l’Inspecteur de BannerZest.

Utilisez le navigateur média intégré, comme décrit plus tard dans cette section, po

accéder à vos référentiels d’images.

Une note sur la conversion de média

Lorsque BannerZest prépare vos images pour la publication, il e ectue 2 opérations:

- il réduit les images originales dans le but d’économiser de la place. Si la taille de votrebannière est de 200x200 pixels, il ne serait pas pertinent de publier les images dans leur

tailles originales. A la place, BannerZest les réduira pour qu’elles ne soient pas plus gran-

des que la bannière.

- il les convertit dans un format qui peut être afché sur le web: JPG ou PNG. Par défaut, Ba

nerZest convertira les formats qui peuvent avoir un canal alpha (PNG, ICNS,PSD, TIFF) en

PNG, alors que tous les autres seront convertis en JPG. Ce comportement par défault peu

être modifié dans les Préférences.

12



The Media Browser (seulement pour la version PRO)

Le navigateur Media vous permet d’accéd

à vos images depuis les référentiels stan-

dards :

• iPhoto : accès à toutes vos photos com

à tous vos événements depuis le navigate

média.

• Apple Aperture: accédez aux photos

stockées dans vos bibliothèques Aperture

BannerZest vous permet d’ajouter de muples bibliothèques dans la liste (voir ci-d

sous).

•Adobe Lightroom: accédez aux photos

stockées dans vos catalogues Lightroom.

BannerZest vous permet d’ajouter de mu

ples catalogues dans la liste (voir ci-des-

sous).

• iDive : si vous possédez iDive, vous pou

vez accéder à tous les échantillons d’ima

ges depuis vos fichiers vidéo comme si

c’était des fichiers individuels

• MemoryMiner (www.memoryminer.com

vous pouvez ajouter n’importe quel nom

de catalogues MemoryMiner à votre navig

teur média. Glissez-déposez simplement

catalogue ou utilisez le bouton action (voir plus bas) pour sélectionner un catalogue s

le disque. MemoryMiner vous permet d’organiser vos photos et les étiqueter avec les

noms des personnes et des lieux. Cette information est directement accessible depui

le navigateur média. En outre, vous pouvez accéder à la zone d’intérêt que vous avez

créée dans MemoryMiner.

• Photo Booth: accès à toutes vos images Photo Booth directement.

13

http://www.memoryminer.com/





• Dossiers d’images : vous pouvez avoir accès à n’importe quel dossier d’images dpuis le navigateur média en glissant-déposant simplement un dossier d’images à

l’intérieur de la liste des sources.

Ajouter de nouvelles sources.

Vous pouvez ajouter un nouveau dossier d’images à votre navigateur média en appuyant s

le bouton ‘Add Folder..’:

Vous pouvez ajouter d’autres sources en sélectionnant le menu approprié depuis le menuAction (voir plus bas)

• Ajouter iPhoto... : vous permet d’ajoute

de multiples bibliothèques iPhoto à votre

liste. Le navigateur Média supporte n’im-

porte quel nombre de bibliothèques d’iPho

dans sa liste.

• Ajouter MemoryMiner... : vous permet

d’ajouter un nouveau catalogue de MemoryMiner à votre liste de sources.

•Ajouter Bibliothèque Aperture...: vous permet d’ajouter une bibliothèque Aperture à vot

liste de sources. BannerZest vous permet d’ajouter plusieures bibliothèques Aperture.

• Ajouter Catalogue Lightroom...: vous permet d’ajouter un catalogue Lightroom à votre

liste de sources. BannerZest vous permet d’ajouter plusieurs catalogues Lightroom.

Sources déconnectées

Le navigateur de Média gère parfaitement les sources déconnectées (sources qui sont stock

ées sur un support externe non connecté par exemple) en afchant un symbole approprié

côté de ces sources.

14



15



Personnaliser votre bannière

Qu’elle ressemble à ce que vous voulez...

L’onglet Réglages de l’Inspecteur vous permet d’accéder à tous les paramètres disponible

pour le thème sélectionné. Ce serait impossible de discuter de toutes les options possibles

dans cette section. Nous voulons simplement mettre l’accent sur les paramètres clés dispo

nibles dans la plupart des thèmes.

La nécessité de mise à jour

Changer les valeurs de certains des paramètres ne résultera pas toujours en un changemen

en temps réel dans l’aperçu. C’est souvent le cas lorsque le paramètre est une chaîne de ca

ractères (un titre par exemple). Si vous trouvez que le paramètre que vous êtes en train de

modifier ne semble pas avoir d’e et dans l’aperçu, cliquez sur le bouton Rafraîchir

cette action rechargera la bannière, rafraîchira l'aperçu et appliquera à nouveau tous les pa

ramètres.

Information sur les Média

La personnalisation la plu

évidente de la bannière

consiste à donner un titre

un sous-titre à votre méd

Pour cela, il vous suft

d’éditer les champs Titre

Sous-titre dans l’onglet

Media.

Par défaut, dans le champ

Sous-titre apparaîtra la d

du média, mais vous pouv

1



saisir n’importe quel texte dans le champ.

Le format date

BannerZest vous laisse contrôler le format utilisé pour afcher les dates via les Pré

férences de l’application.

Taille

Comme abordé précédemment, tous les thèmes vous permettent de choisir la taille de la

bannière, mais certains imposeront un ratio d’apect pour la bannière. Dans ce dernier cas,

cela signifie que vous pourrez choisir soit la largeur de la bannière soit sa hauteur mais pa

les deux en même temps.

Le paramètre Taille est habituellement le premier paramètre disponible dans le panneau de

Paramètres.

2



Ratio d’aspect Media

Comme vu plus tôt, certains thèmes vous laissent décider si les média devraient être afch

en utilisant leur ratio d’aspect naturel, ou en utilisant un ratio d’aspect imposé (souvent ca

ré).

Bordure

Tous les thèmes vous permettent d’appliquer une bordure à la bannière. Vous pouvez choi

sir:

- la largeur de la bordure (en pixels)

- la couleur de la bordure

- Rayon de l’angle à appliquer

Lorsqu’un rayon d’angle différent de zéro est utilisé, la bannière est rendue transparente dans les co

afin qu’elle s’intégre parfaitement dans votre dessin

3



Ecran de chargement

L’écran de chargement est

l’écran qui apparaît lorsque

la bannière est en train de

charger toutes les valeurs

(fichiers média). BannerZest

vous permet de choisir les

aspects visuels de l’écran

de chargement à partir de la liste des pré-réglages.

Une mode Aperçu est aussi disponible qui permet de stopper l’animation de la bannière afi

de figer l’écran de chargement pour pouvoir visualiser l’e et de tel ou tel réglage.

Différents écrans de chargement disponibles via les pré-réglages.

Dans BannerZest Pro, vous pouvez personnaliser entièrement l’apparence de l’écra

de chargement en choisissant les couleurs, les bordures, etc...

4



Titre

La section Titre du panneau des

paramètres vous permet de cont

ler l’afchage des titres des méd

Une case à cocher vous permet d

rendre visibles ou non tous les ti

tres. Vous pouvez également en

choisir la police, la taille et la cou

leur.

Sous-titre

Comme pour les titres, la sectio

sous-titre du panneau des para-

mètres vous permet de contrôle

l’afchage des sous-titres de vo

média.

Une case à cocher vous permet d

de rendre visibles ou non tous le

titres. Vous pouvez également echoisir la police, la taille et la co

leur.

5



PublierUne fois que la bannière a été configurée et que lʼaperçu vous satisfait, il est temps

de la publier.

Format de sortie

BannerZest publie la bannière sous la forme dʼun fichier SWF appelé bzAnimation.

ainsi que des fichiers annexes :

• un fichier XML appelé bz.xml qui contient tous les paramètres de la bannière,

• un fichier javascript appelé bz.js qui configure la bannière. Il convient de noter que

javascript nʼest pas autorisé sur des sites tels que facebook ou mySpace. Dans c

cas, nous produisons un code HTML légèrement différent.

• des fichiers images au format de la bannière dans un dossier img. BannerZest uti

lise ces images dasn la bannière et optimise leur taille. La qualité de compression

est gouvernée par les réglages de lʼonglet publication.

• des images au format plus grand, publiées dans un dossier appelé large. Ce sont

les images utilisées par les visualisateurs de médias (version PRO seulement).

• des fichiers CSS et Javascript additionnels utilisés par les visualisateurs de média

(PRO Version).

En plus de tous ces fichiers utilisés par la bannière, BannerZest publie un fichier de

prévisualisation appelé bz.html utilisé pour tester la bannière.

Options de sortie

Quand vous choisissez de publier une bannière, BannerZest vous offre 3 possibilité

-publier vers un dossier : cette option est utile lorsque vous souhaitez créer un ape

çu local de votre bannière avant de la mettre en ligne.

1



-publier sur Internet via FTP: cette option vous permet dʼenvoyer votre bannière (le

fichier SWF, les fichiers média et tous les fichiers auxiliaires) à votre serveur via

FTP.

-publier sur Internet via .Mac: cette option vous permet dʼenvoyer votre bannière (le

fichier SWF, les fichiers média et tous les fichiers auxiliaires) sur votre compte .ma

A propos de Flash et de Sécurité

Flash possède un modèle de sécurité qui empêche un contenu local (les fi-

chiers SWF sur votre système fichiers) dʼêtre visionné dans un navigateur,

moins que ce contenu ait été déclaré “sûr pour être visionné”. Le modèle desécurité est basé sur lʼemplacement des fichiers dans le système fichiers e

utilise une liste de dossiers autorisés qui sont enregistrés avec le lecteur

Flash. Quand un fichier SWF est identifié comme appartenant à ces dossie

autorisés, Flash Player les ouvrira sinon non.

Quand vous publierez votre bannière en local, BannerZest modifiera la liste

des dossiers autorisés pour ajouter le dossier dans lequel vous publiez. Ce

garantira que Flash Player passer le fichier local SWF lors de la visualisatio

La version PRO vous permet d’associer un visualisateur de média tel que ShadowBo

ou LightBox à votre bannière. Cela signifie qu’un clic sur un média va entraîner l’af

chage d’une version de plus grande résolution dans une fenêtre flottante (voir ci-de

sous).

2



La taille des grandes images peut directement être contrôlée à partir de l’onglet de

publication

La version PRO vous permet également de configurer le comportement des hyper-

liens via le réglage ‘target URL’:

3



Vosu pouvez même utiliser ce réglage pour attacher du code javascript personnal

dans la fonction appelée lors d’un clic sur un hyperlien. Cette fonction se trouve

dans le fichier bz.js.

function navigateToURL(url) {

//javascript popup => pb: may be blocked by browser

//window.open(url);

//open link in same window with javascript => pb: no "back" but

ton in Safari

//top.location=url;

//let flash handle the opening of a new window

return [url , "_top"];

}

Publier via FTP

FTP peut être quelque peu intimidant.

Cette section a pour but d’expliquer comment FTP peut être utilisé pour publier votre ban-

nière et comment faire référence à cette bannière publiée dans votre site web.

Qu’est-ce que FTP ?

FTP est un protocole de transfert de fichiers qui gère toutes les choses compliquées derriè

les opérations de transfert de fichiers entre votre ordinateur et n’importe quel site distant.

4



Est-ce que tout le monde peut utiliser FTP ?

Pour utiliser FTP, il vous faut connaître un serveur et posséder des droits accès (login utilis

teur/mot de passe) à ce serveur.

Habituellement, on obtient un accès FTP à un serveur en s’abonnant auprès d’un hébergeu

de site internet ou quand vous souscrivez à un accès basique internet via un FAI (Fournisse

d’Accès Internet). Le volume d’espace obtenu et ce que vous pouvez en faire dépendent de

votre plan particulier.

Pour le reste, nous supposerons que vous avez l’équivalent d’un hébergement basique su

un serveur et que nous avons les informations suivantes:

• un nom de domaine : dans notre cas www.mysite.com (remplacez mysite.com p

votre nom de domaine).

• un serveur FTP : dans le cas présent, le serveur sera appelé : ftp.mysite.com. Vo

obtiendrez le nom exact du serveur FTP quand vous achèterez votre plan d’hébergement

souscrirez à un plan d’accès auprès de votre FAI.

• un login utilisateur/mot de passe : qui vous permettront de vous connecter à vo

tre serveur

C’est le cas de figure le plus fréquent lorsque vous achetez un domaine (www.mysite.com)

un hébergement. Le mail de bienvenue que vous recevez contient habituellement toutes le

informations à propos du nom du serveur FTP, login et mot de passe.

Le système de fichiers et votre site web

Votre site web site est stocké sur un disque, ou un système de fichiers. Quand l’URL d’un s

web contient '/', ce qui vient après le '/' correspond à un dossier dans ce système de fichie

Il est très important de comprendre cette notion.

En conséquence, il y a un concept très important : le dossier racine.

C’est le dossier, dans le système de fichiers, qui correspond à la racine de votre site web.

Souvent, ce dossier racine est appelé www, et nous supposerons pour la suite que c’est bie

le cas. Cela signifie que le dossier www correspond à l’URL http://www.mysite.com. En d’a

tres termes, le dossier www contiendra tous les fichiers accessibles depuis l’URL racine.

5

http://www.mysite.com/










Par exemple, l’URL http://www.mysite.com/index.html pointe vers un fichier réel, appeléindex.html, situé dans le dossier www.

De la même manière, l’URL http://www.mysite.com/products/index.html pointe vers un fi-

chier réel, appelé index.html, situé dans le sous-dossier products, dans le dossier racine

www.

Comprendre le dialogue FTP de BannerZest

Pour configurer un serveur FTP, vous pouvez soit ouvrir le dialogue des Préférences de l’ap

plication (BannerZest > Préférences...) soit choisir l’option Editer la liste des serveurs dan

l’onglet de Publication:

Dans les 2 cas, cela ouvrira le dialogue de création de configuration serveur. Appuyer sur l

bouton + pour créer une nouvelle configuration. Vous avez le choix entre une configuratio

.Mac et une configuration FTP. Dans le cas présent, nous choisissons FTP.

6

http://www.mysite.com/products/index.html

http://www.mysite.com/products/index.html

http://www.mysite.com/index.html

http://www.mysite.com/index.html



Le panneau de configuration FTP a l’aspect suivant:

7



• Nom: ceci est le nom de la configuration. Ce nom apparaîtra dans la liste des se

veurs et vous permettra de rappeler une configuration déjà sauvée.

• Adresse du serveur: l’adresse de serveur de votre serveur FTP (ftp.mysite.com).

• Nom de l’utilisateur: le nom d'utilisateur de votre serveur FTP.

• Mot de passe: le mot de passe de votre serveur FTP.

8



• Port: le port de votre serveur FTP (21 par défaut).

• Racine du site : le dossier racine de votre site web (www, htdocs, html, pu-

blic_html, ou mainwebsite_html).

Vous trouverez généralement un dossier avec l’un de ces noms dans votre répertoire perso

nel. Il est appelé document root, Web root or website directory, et correspond au plus hau

niveau de votre site web.

Par exemple, si vous placez un fichier appelé mypage.html dans ce dossier, et si l‘URL de v

tre site web est www.example.com, vous pourrez visualiser ce fichier sur le Web en utilisan

l’URL www.example.com/mypage.html.

• URL of votre site: l’URL de votre site web.

Publier via .Mac

BannerZest inclut un support intégré pour publier votre bannière sur votre compte sur .Ma

Si vous avez déjà paramétré correctement .Mac dans le Système des Préférences, BannerZe

utilisera automatiquement ces préférences.

POur configurer un serveur .Mac, il suft d’aller dans les Préférences de l’application, de

choisir l’onglet Serveurs et d’ajouter une configuration .Mac par le bouton +.

Le dialogue de configuration .Mac a cette aspect:

9

A traduire ou laisser tel quel ?

http://www.example.com/mypage.html



http://www.example.com/

http://www.example.com/



Si un dialogue de demande d’accès à votre trousseau apparait, cliquez sur le bouton

Autorisez une fois ou sur le bouton Autorisez toujours pour autoriser BannerZest à accé

der à votre Trousseau de clés

10



Si vous avez configuré correctement .Mac, BannerZest show‘ afchera “Your .Mac account ivalid”: Votre compte .Mac est valide

sinon, cliquez sur ‘Ouvrir Préférences .Mac’ et configurez votre compte .Mac :

Intégrer votre bannièreUne fois votre bannière publiée, elle peut être facilement intégrée sur une page web ou un

blog. La partir basse de l’onglet de publication vous donne accès:

- à une prévisualisation de la bannière

- à un dialogue contenant le code HTML

11



Une fois votre bannière publiée, BannerZest vous donnera un fragment de code qui peut êt

intégré dans tout éditeur HTML comme on le verra de manière plus détaillée dans les pro-

chains chapitres.

Prévisualiser ou obtenir le code de la dernière version publiée.

Vous pouvez cliquer sur ‘Acher HTML’ pour ouvrir le dialogue de code HTML. BannerZes

va souvent vous donner le choix entre 2 ou 3 versions du code HTML :

1. Une première version comprenant

des appels javascript et qui com-

porte notamment un test évolué

de la version du Player Flash. Ce

code gère de façon élégante la

non compatibilité du lecteur

Flash sur tous les navigateurs et

en particulier Internet Explore.

C’est la méthode recommandée

pour intégrer votre bannière. Ellefonctionne très bien avec tous les

éditeurs de site web et avec cer-

tains services de publication en

ligne.

2. La version Wordpress/Dotclear : il

s’agit de la même version que la

version 1. ci-dessus, mais elle

fait l’objet d’un formattage parti-

culier qui la rend totalement

compatible avec WordPress et

DotClear et d’autres systèmes de

12



publication en ligne.

3. Une version ne comportant pas de javascript. Cette version doit être utilisée pour la pu

blication d’une bannière sur certains systèmes de blog qui n’acceptent pas de javascrip

ou sur des sites de socialisation tels que facebook et mySpace.

L'intégration d’une bannière sur une page web dépend de l’éditeur que vous utilisez. Nous

avons tenté de couvrir toutes les spécificités liées aux di érents éditeurs sur le Wiki de Ban

nerZest.

Utiliser le bouton ‘Montrer la bannière’ pour ouvrir une page HTML d’exemple générée po

vous qui intègre votre bannière. Cette page vous donne également accès aux di érentes ve

sions du code.

13





Pour une discussion complète sur les étapes d'intégration, n’hésitez pas à vous rendre sur

Wiki de BannerZest :


Les éditeurs de site web suivants :

• iWeb

• RapidWeaver

• Sandvox

• Dreamweaver

• Freeway

et de blogs

• Wordpress

• Dotclear

• Blogger

• TypePad

font l’objet de discussions détaillées.

L’intégration sur mySpace et facebook sont également discutées.

Modifier une bannière publiée

Une fois que votre bannière a été publiée, c’est très facile de la modifier.

Ré-ouvrez le fichier projet de la bannière (.bnz file), e ectuez vos modifications et publiez

à nouveau. Comme BannerZest mémorise les paramètres de publication pour le projet, vou

n’aurez pas à reconfigurer vos options FTP ou .Mac. Appuyez simplement sur le bouton Ne

dans l’Assistant de publication.

14

http://www.aquafadas.eu/wiki/BannerZest:Sandvox

http://www.aquafadas.eu/wiki/BannerZest:RapidWeaver



http://www.aquafadas.eu/wiki/BannerZest:TypePad

http://www.aquafadas.eu/wiki/BannerZest:TypePad

http://www.aquafadas.eu/wiki/BannerZest:Blogger

http://www.aquafadas.eu/wiki/BannerZest:Blogger

http://www.aquafadas.eu/wiki/BannerZest:Dotclear

http://www.aquafadas.eu/wiki/BannerZest:Dotclear

http://www.aquafadas.eu/wiki/BannerZest:Wordpress

http://www.aquafadas.eu/wiki/BannerZest:Wordpress

http://www.aquafadas.eu/wiki/index.php?title=BannerZest:Freeway&action=edit

http://www.aquafadas.eu/wiki/index.php?title=BannerZest:Freeway&action=edit

http://www.aquafadas.eu/wiki/BannerZest:Dreamweaver

http://www.aquafadas.eu/wiki/BannerZest:Dreamweaver





http://www.aquafadas.eu/wiki/BannerZest:iWeb

http://www.aquafadas.eu/wiki/BannerZest:iWeb





BannerZest détectera que la bannière existe déjà à l’emplacement cible et vous invitera àconfirmer que vous voulez réellement l’écraser.

Une fois la bannière re-publiée, vous n’aurez rien à changer dans la page web ou la page d

blog qui inclut la bannière car rien n’aura été changé côté HTML.

15



Les autres fonctionspas-si-importantes-mais-néanmoins-très-symp

- tous les média sont référencés via des alias. Vous pouvez déplacer vos fichiers dans tout

les directions, BannerZest les retrouvera toujours. Cependant, si vous déplacez vos médi

vers un lecteur externe et déconnectez ce support, bannerzest BannerZest aura perdu la

référence sur les média. Dans ce case, il afchera les média avec un symbole spécifique

d’alerte.

La même chose arrive si vous e acez accidentellement un fichier média dans le Finder, fi

chier qui serait actuellement en train d’être utilisé par BannerZest

- BannerZest vous permet de créer des copies “autonomes” de vos fichiers projet bannière

Ces fichiers projet contiennent une copie de tous les média au moment de la sauvegarde

Vous pouvez utiliser ces copies “ autonomes” pour partager vos projets avec d’autres.

- vous pouvez créer des bordures pour vos images, en ajustant l’échelle de manière à ce

qu’elles ne remplissent pas entièrement le rectangle de détourage et vous pouvez choisir

une couleur de fond non transparente.

1



Autres ressourcesOù trouver d’autres informations importantes à propos de BannerZest...

Les informations les plus actualisées sur BannerZest sont sur le site web d’Aquafadas :

www.aquafadas.com

Un Wiki est également mis à disposition avec des conseils et des astuces, des pages de FAQ

et des exemples type tutoriel qui décrivent en long les di érentes possibilités o ertes par

BannerZest. Vous trouverez également des informations détaillées au sujet de l’intégration

avec des éditeurs web et des outils de blog.

www.aquafadas.eu/wiki

Une section pour les développeurs paraîtra bientôt sur le Wiki, expliquant comment des dé

veloppeurs extérieurs peuvent développer des thèmes pour BannerZest.

2

http://www.aquafadas.eu/wiki

http://www.aquafadas.eu/wiki

http://www.aquafadas.com/

http://www.aquafadas.com/

banner zest gettingstarted fr

Documents