A

Ge t the mos t of you r digital life

BANNERZEST
Premiers Pas
Cap Omega, Rond Point Benjamin Franklin 34960 Montpellier France w w w. b a n n e r z e s t . c o m

Table des matires

Bienvenue ! Introduction
BannerZest vs BannerZest Pro Installer BannerZest Lancer BannerZest Cration de la premire bannire Media Thmes Paramtres Publication Sauvegarder et recharger votre travail. La notion de dpendances Publier votre bannire

1 2 2 2 3 4 5 6 7 8 9 9 10 12 12

LInterface Utilisateur
La fentre principale

La Palette Information Le mode Edition Image Vous pouvez accder au mode Edition Image de plusieurs faons : La vue type matrice La vue avec image unique

13 14 14 15 16 1 1 4 5 9 11 12 12 12 13 14 14 1 1 2

Le Ratio dAspect
Gestion du ratio daspect du Mdia par les diffrents thmes Cas 1 : le thme impose un ratio daspect x Cas 2 : Le thme nimpose pas un ratio daspect x Cas 3: la taille de la bannire impose le ratio daspect Rsum

Choisir et prparer vos mdia

Choisir le contenu de votre bannire Une note sur la conversion de mdia The Media Browser (seulement pour la version PRO) Ajouter de nouvelles sources. Sources dconnectes

Personnaliser votre bannire

La ncessit de mise jour Taille

ii

Ratio daspect Media Bordure Ecran de chargement Titre Sous-titre

3 3 4 5 5 1 1 1 4 4 5 5 6 9 11 14

Publier
Format de sortie Options de sortie Publier via FTP Quest-ce que FTP ? Est-ce que tout le monde peut utiliser FTP? Le systme de chiers et votre site web Comprendre le dialogue FTP de BannerZest Publier via .Mac Intgrer votre bannire Modier une bannire publie

Les autres fonctions pas-si-importantes-mais-nanmoins-trs-sympa

1

Autres ressources

iii

Bienvenue !
Crer une animation pour votre site web - Est-ce si difficile ?

Et bien, si vous ntes pas un expert en Flash, a peut ltre vritablement, ce qui explique pourquoi les sites web personnels incluent rarement des animations. Mme les sites web professionnels utilisent souvent des GIFs anims qui sont plutt fastidieux intgrer, mais, qui, au moins, ne requirent pas de talents pousss en animation. Le problme est que le rsultat nal nest pas souvent aussi lisse et affin quune animation vectorielle Flash. Cest l o BannerZest et BannerZest PRO entrent en scne. BannerZest vous permet de mettre vos ides en mouvement et crer de surprenantes animations pour votre site web en quelques clics. Vous navez besoin ni de connatre Flash, ni mme de lavoir en votre possession. BannerZest vous offrira des thmes personnalisables dans lesquels il vous suffira dajouter vos mdia. BannerZest sintgre aisment dans le mode de vie numrique, la fois pour importer des donnes (BannerZest sait dialoguer avec iPhoto, Aperture Lightroom ou encore iDive) et pour les exporter (iWeb, .Mac support sont inclus). Ce document vous entranera au travers des fonctionnalits de BannerZest et BannerZest Pro avec lintention de vous donner une riche vue densemble des possibilits et des fonctions originales de ces outils.

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

Introduction
Tout dabord, quelques mots pour vous prsenter linterface utilisateur et dcrire comment vous allez interagir avec.

BannerZest vs BannerZest Pro

BannerZest se dcline en 2 versions : une version Standard (STD) et une version Professionnelle (PRO). Ce guide dcrit les deux versions : lorsquil sagira dune fonction uniquement disponible dans la version PRO, une icne saffichera dans la marge.

Installer BannerZest
Si ce nest pas dj fait, tlchargez BannerZest ou BannerZest Pro partir de la page : http://www.aquafadas.com/download-video-software.html

Ds le tlchargement une image disque devrait apparatre automatiquement sur votre bureau et la fentre suivante devrait souvrir dans le Finder:

Faites glisser simplement licne de BannerZest (ou BannerZest Pro) vers le dossier Applications comme indiqu pour installer le logiciel.

Lancer BannerZest
Au lancement de BannerZest, vous obtiendrez la fentre suivante (version Standard gauche, version PRO droite) :

Cette fentre vous permet de dposer lensemble initial de chiers mdia dans lapplication pour crer la premire bannire. Pour dmarrer, choisissez simplement des chiers images dans le Finder et dposez-les dans la fentre. Vous pouvez galement choisir un dossier contenant des images et BannerZest les ajoutera toutes la bannire. Vous ntes pas limit dans lutilisation des chiers. Vous pouvez galement faire glisser des images partir dautres applications comme iPhoto. BannerZest Pro inclut un Media browser qui peut tre appel en cliquant sur licne dans la barre de statut de la fentre. Ce bouton est dj prsent dans la fentre daccueil, ce qui est parfait si vous souhaitez parcourir vos chiers ds le dmarrage. Le Media Browser est dcrit en dtails dans la section XXX.

Cration de la premire bannire

Une fois que vous avez dpos des images dans la zone de dpt, BannerZest vous montrera un aperu de la bannire utilisant un thme par dfaut et ouvrira une nouvelle palette ot-

tante comme illustr ci-dessous : La palette ottante vous permet de choisir entre 4 onglets :
4

Media
Longlet Media vous permet daccder tous les mdia que vous avez insrs dans la bannire. Avec longlet Media vous pouvez :

rorganiser les media dans lordre que vous prfrez. Cliquez simplement sur la vignette de limage et dplacez la . changer le titre, le sous-titre des mdia. Les titres et sous-titres sont utiliss dans la plupart des thmes : vriez les paramtres du thme pour voir quels effets additionnels peuvent tre appliqus au titre et au sous-titre. accder la fentre ddition du mdia (rognage, centrage, etc...) par double-clic sur limage du mdia supprimer des mdias de la liste

Assigne une URL chaque mdia. Assigner une URL signie que votre bannire devient interactive. Si un spectateur clique sur limage alors quelle est montre dans la bannire, le navigateur suivra le lien de lURL attach limage et ouvrira la page web correspondante.

Thmes
Longlet Thmes vous permet de changer le thme de la bannire. BannerZest est livr avec un lot de thmes et dautres seront ajouts par la suite1. Pour changer le thme, cliquez simplement sur la vignette du thme souhait pour voir la fentre daperu changer en consquence. Notez bien que la taille de la bannire nest pas conserve entre les changements de thmes. Vous remarquerez galement que la liste des paramtres disponibles changera car chaque thme possde une liste spcique de paramtres. Note: Vous pouvez passer dun thme A un thme B puis dcider plus tard de revenir vers le thme A. Dans ce cas, le prcdent paramtrage du thme A sera restaur. La version PRO dispose dune liste de thmes plus consquente du fait de la possibilit dassigner des URLs aux mdias et donc de la possibilit doffrir des thmes de navigation (Accordon, etc....) qui nauraient pas de raison dtre dans la version Standard.

Un kit de dveloppement de thmes est disponible. Veuillez contacter themes@aquafadas.com pour davantage

dinformations concernant la cration de thmes pour bannerZest. Vous pouvez aussi visiter: http://www.aquafadas.com/fr/bannerzest/bannerzest_sdk.php
6

Paramtres
Le troisime onglet vous permet daccder aux paramtres du thme ce qui vous permet de personnaliser totalement lapparence de votre bannire. Certains paramtres sont communs la plupart des bannires: - lcran de chargement: ce groupe de paramtres vous permet de visualiser lapparence de lcran de chargement qui apparat au dmarrage de la bannire. - la taille, - la bordure incluant la possibilit de dnir des coins arrondis pour la bordure de votre bannire, - les couleurs, les gradients, etc....

Publication
Ce dernier onglet vous permet de congurer vos rglages de publication et de publier votre bannire soit localement (dans un dossier sur le disque) ou sur un serveur distant (via .Mac ou FTP). Tous les rglages de publication sont affichs dans cet onglet et peuvent tre changs facilement. BannerZest se rappellera de la date de publication et de la destination. Vous pourrez de ce fait toujours retrouver le code HTML de la dernire version publie. La version PRO (image sur la gauche) inclut des options de publication avances. Elle vous permet en particulier dassocier un visualisateur de mdias (ShadowBox ou LightBox) votre bannire, ce qui permet de lancer une visualisation de grande taille de vos images dans une fentre ottante..

Sauvegarder et recharger votre travail.

Quand vous ditez une bannire, pensez sauvegarder votre travail rgulirement. Choisissez File > Save As... ou File > Save comme vous le feriez avec nimporte quel autre document. Choisissez File>Open ou File > Open Recent pour appeler une bannire pralablement sauvegarde. Les chiers BannerZest ont une extension .bnz par dfaut. Vous pouvez double-cliquer sur ces chiers pour lancer BannerZest et commencer diter votre bannire.

La notion de dpendances
Une bannire est constitue des donnes suivantes : les informations du mdia telles que : le chemin du media, le titre du media et le sous-titre, les URLs, etc... le thme la taille de la bannire et les options de chargement lcran les paramtres spciques du thme comme les couleurs, les bordures, les options de timing Lorsque vous sauvegardez une bannire sur un disque, un chier bnz est cr avec toutes ces donnes. Cependant, les chiers mdia eux-mmes ne sont pas inclus dans le chier de la bannire. la place, BannerZest enregistrera des rfrences pour ces chiers sous forme dalias de chier. Cela signie que BannerZest retrouvera toujours vos chier de media, mme si vous les dplacez plusieurs reprises sur votre disque, car le systme dalias du Finder conservera la trace des chiers dorigine. Toutefois, si les chiers sont stocks sur un volume qui nest plus disponible, ou si vous supprimez le media du disque, BannerZest ne pourra plus afficher votre bannire sous sa forme originale. Vous pouvez nanmoins sauvegarder une version portable de votre bannire appele bannire autonome en choisissant le menu Fichier > Sauver une copie autonome....

Publier votre bannire

Dans le but dintgrer une bannire dans votre site web, il vous faut la mettre en ligne. Cliquez simplement sur le bouton Publier pour lancer lAssistant de publication. Cela vous permet de choisir entre plusieurs options : - publier sur .Mac - publier sur FTP - publier localement dans un chier Une fois votre bannire publie, BannerZest vous donnera un fragment de code qui peut tre intgr dans tout diteur HTML comme on le verra de manire plus dtaille dans les prochains chapitres.

Prvisualiser ou obtenir le code de la dernire version publie.

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

10

1. Une premire version comprenant des appels javascript et qui comporte notamment un test volu de la version du Player Flash. Ce code gre de faon lgante la non compatibilit du lecteur Flash sur tous les navigateurs et en particulier Internet Explore. Cest la mthode recommande pour intgrer votre bannire. Elle fonctionne trs bien avec tous les diteurs de site web et avec certains services de publication en ligne. 2. La version Wordpress/Dotclear : il sagit de la mme version que la version 1. ci-dessus, mais elle fait lobjet dun formattage particulier qui la rend totalement compatible avec WordPress et DotClear et dautres systmes de publciation en ligne. 3. Une version ne comportant pas de javascript. Cette version doit tre utilise pour la publication dune bannire sur certains systmes de blog qui nacceptent pas de javascript, ou sur des sites de socialisation tels que facebook et mySpace.

Lintegration dune bannire sur une page web dpend de lditeur que vous utilisez. Nous avons tent de couvrir toutes les spcicits lies aux diffrents diteurs sur le Wiki de BannerZest.

11

LInterface Utilisateur
Comment se familiariser avec les diffrents lments de lInterface utilisateur.

La fentre principale
La fentre principale affiche un aperu de la bannire en prenant compte : - du mdia - du thme slectionn - des paramtres actuels

Laperu est une vue web utilisant le lecteur Flash cest dire quil montre la bannire telle quelle paratra dans votre page web. Lchelle est de 1:1 ce qui signie que la taille de la bannire est exactement celle que vous avez spcie dans longlet de Rglages.

La Barre dtat standard

La Barre dtat standard Pro

Comment rduire la hauteur du commentaire sur Rafrachir et enlever le tiret devant Le bouton Publication (idem dans version UK)

Le bas de la fentre principale comporte les lments suivants :

12

Le bouton Rafrachir : vous pouvez cliquer sur ce bouton pour appliquer les changements votre bannire ou forcer la bannire redmarrer depuis le dbut. Le bouton Info : en cliquant sur ce bouton vous appellerez (ou cacherez) la palette information. Le bouton de rognure : en cliquant sur ce bouton, vous passerez en mode Edition ce qui vous permettra de rogner et ajuster les images. Voir plus loin la description.

La version Pro possde un bouton Media image depuis un navigateur mdia.

qui permet laccs votre mdia

La Palette Information
La palette information est une palette ottante qui peut tre dplace sur tout votre cran ou cache si ncessaire. Comme dcrit plus tt, elle vous permet daccder aux 4 onglets de personnalisation du thme : 1. Longlet Media pour contrler les Mdia 2. Longlet Thmes pour slectionner votre thme 3. Longlet Rglages pour contrler les paramtres spciques de votre thme. 4. Longlet Publication pour contrler les paramtres de publication de votre bannire et la publier.

13

Le mode Edition Image

Vous pouvez accder au mode Edition Image de plusieurs faons : - soit en cliquant sur le bouton Rognure pale, - soit en cliquant sur le bouton Rognure dans lInspecteur de Mdia (voir plus bas) dans la barre de statuts de la fentre princi-

- soit en slectionnant Image Editing partir du menu Media. - soit par double-clic sur limagette du mdia. Le mode Edition Image vous permet de contrler le ratio daspect de vos mdia aussi bien que la portion de mdia visible dans la bannire. Bien videmment, certaines bannires im?

poseront un ratio daspect pour vos mdia 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 contrler comment les ajustements de limage seront appliqus. une vue avec image unique dans laquelle le mdia slectionn saffiche en plein cadre dans la fentre. Ce mode vous permet dditer la zone de cadrage en mode dtails. Vous pouvez passer dun type de vue lautre en utilisant le bouton au bas de la fentre :

: passer la vue Image unique

: passer la vue Matrice.

14

La vue type matrice

Utilisez les ches en bas de la fentre pour revenir limage prcdente ou passer la suivante (6 images affichs en mme temps).

15

La vue avec image unique

Limage slectionne saffiche dans la fentre. Utilisez les ches en bas de la fentre pour revenir limage prcdente ou passer la suivante.

16

Une barre de dlement vous permet de changer lchelle de limage an de placer une portion diffrente de limage dans la zone de cadrage, tandis quavec la souris vous pouvez balayer lcran pour positionner limage sous le masque.

Ajuster la portion visible de limage

En complment, une palette ottante fournit des outils qui vous aideront ajuster la vue :

17

 Coller sur le bord : cette option activera lancrage de manire ce que la bordure de limage saligne automatiquement avec la bordure la plus proche de la zone de cadrage. (Couleur de) Fond : cest la couleur qui sappliquera au fond lorsque limage ne remplira pas toute la zone de cadrage

18

 Center : ce bouton vous permet de centrer limage sous le masque de cadrage sans changer lchelle.

19

 Sadapter au Rectangle: ce bouton centre limage et ajuste lchelle pour que limage rentre dans le rectangle de dtourage.

Taille Originale: ce bouton ne change pas la position de limage mais rinitialise lchelle sa valeur dorigine.

Rinitialiser: ce bouton centre limage et ajuste lchelle sa valeur dorigine.

20

Le Ratio dAspect

Gestion du ratio daspect du Mdia par les diffrents thmes

Les thmes se partagent en 3 catgories: 1. les thmes qui prsupposent un ratio daspect spcique pour limage. Dans la version actuelle de BannerZest, certains thmes prsupposent que limage est carr. Ceci est d au fait quun dessin particulier (ex : Exploda) fonctionne bien avec un ratio daspect impos. Lutilisation dun ratio daspect diffrent produirait des rsultats moins convaincants. 2. les thmes qui ne prsupposent pas un ratio daspect spcique (ex : CoverFlow). Les images saffichent en plein cran sans aucun dtourage. 3. les thmes qui appliquent un rectangle de dtourage aux images qui dpend de la taille de la bannire. Ce sont des thmes qui affichent le mdia dans toute la zone de la bannire (ex: Simple Slideshow) et qui sont nanmoins ncessaires pour recadrer limage de telle manire quils remplissent toute la zone de la bannire.

Dans le premier cas, le thme cadrera limage pour garantir quelle rentre parfaitement dans la plus grande case possible ayant le ratio impos.

Dans le deuxime cas, limage sera affiche avec son ratio daspect original (cf. lexemple CoverFlow ci-dessous).

Dans le dernier cas, la taille de la bannire appliquera le dtourage toutes les images (cf. les Slidings Images ci-dessous).

Nous allons maintenant revoir chacun de ces 3 scnarios et expliquer comment BannerZest permet de contrler ce qui se retrouve affich dans la bannire obtenue dans chaque scnario. Une Note sur la taille des bannires Comme cela sera expliqu dans cette section, la taille de la bannire et les paramtres de dtourage de limage sont souvent lis. Certains thmes ne vous permettent pas de choisir la taille de la bannire comme vous le souhaitez, mais imposent un ratio daspect pour la bannire. Cela signie que vous de choisir la largeur ou la hauteur, mais pas les deux en mme temps. Pourquoi ?

La raison est lie la cration de thmes: un nombre dentre eux sont dessins par des artistes Flash habitus des techniques expertes qui fonctionnent bien sur le web o la taille de lanimation est xe, mais qui ne fonctionnent pas au mieux lorsque la taille de lanimation est assimile un paramtre.

Cas 1 : le thme impose un ratio daspect x

Dans le cas dExploda, par exemple, qui impose un ratio carr, cest dire quune case carr sera utilise pour dtourer chaque image. Le mode Edition Image vous permet de contrler la faon dont cette case est positionne sur limage. Ouvrir en mode Edition Image donnera lcran suivant :

Cette fentre affiche les images dans une matrice de 3x2. La case de dtourage carr est clairement visible et montre comment les images seront dcoupes pour correspondre aux

exigences du thme. Par dfaut, la case est calcule pour entrer dans le contour dorigine de limage et maximise la part visible de limage. Elle est aussi centre. Vous pouvez utiliser la souris pour ajuster la zone de dtourage en tirant limage sous la case comme dcrit dans la section prcdente (Image Editing Mode)

This part of the image is masked

The visible part of the media

Scale control

The final size of the media after the crop.

Cas 2 : Le thme nimpose pas un ratio daspect x
BannerZest possde de nombreux thmes qui nimposent aucune restriction sur le ratio daspect. Cependant, cela ne peut tre considr comme un comportement standard pour le thme et ncessite dtre paramtr spciquement en slectionnant une option ddie dans les paramtres du thme.

Prenons lexemple de Water Apparition. Par dfaut, le thme utilise une image carr.

Toutefois, en allant dans les paramtres pour ce thme et en choisissant un mode dchelle diffrent pour limage, vous pouvez changer le comportement par dfaut du thme et lever la contrainte sur le ratio daspect de limage. Avec ce paramtrage, les mdia sont affichs dans leurs formats et ratios daspect originaux :

Passer au mode Edition image donne ceci :

Comme on peut le voir, il ny a plus de rectangle de dtourage superpos sur les images individuelles, montrant ainsi que les images seront utilises sans altration. Le ratio daspect original est clairement visible. Mais il y a plus. Si, maintenant, vous cliquez sur une image individuelle (ou double cliquez pour louvrir en dition), un rectangle de dtourage de forme libre est affich par dessus limage. Ce rectangle a des poignes qui permettent de contrler sa position et son ratio daspect. Vous pouvez utiliser ce rectangle pour crer votre propre zone de dtourage.

Ces thmes vous permettent de contrler pleinement la zone de dtourage au niveau des mdia, comme on peut le voir dans la gure suivante o lon a appliqu diffrents rectangles de dtourage toutes les images de la page. Une fois que toutes les zones de dtourage ont t ajustes, il vous faut les appliquer aux

images en cliquant sur le bouton OK

Cas 3: la taille de la bannire impose le ratio daspect

Certains thmes ont t dessins de telle faon que limage remplit toute la place disponible. Dans ces thmes (tous les thmes de diaporama par exemple), vous avez la possibilit de paramtrer la taille de la bannire prcisment dans la section Taille du panneau des Paramtres de la bannire.

Dans lexemple ci-dessus, nous avons paramtr la bannire pour avoir une largeur de 500 px alors que sa hauteur a t xe 200 px. Si nous passons en mode Edition Image, nous pouvons voir que la taille de la bannire dtermine le rectangle comme on peut le voir cidessous.

10

La taille de dtourage indique dans la fentre est gale la taille de la bannire :

Rsum
Diffrents thmes imposent diffrentes contraintes sur les media, qui leur tour gnrent des comportements diffrents quand il sagit dditer et ajuster vos images (dtourage). Le tableau suivant rsume les diffrentes possibilits

CAS

EXEMPLES DE THEMES

TA I L L E D E L A BANNIERE
Ratio daspect x (*)

DETOURAGE

La bannire impose le ratio daspect mdia La taille de la bannire impose le ratio daspect mdia Le thme nimpose aucune contrainte sur le ratio daspect mdia

Water Apparition, Exploda Simple Slideshows

Ratio daspect x

Pas de contrainte

Ratio daspect x

Water Apparition (**) Gallery (**)

Dpend du thme (***)

Forme libre

(*) Habituellement, vous ne pouvez pas paramtrer la largeur et la hauteur de la bannire indpendamment. (***) Certains thmes vous permettront de choisir la taille dans les deux directions, alors que dautres imposeront un ratio daspect xe.

11

Choisir et prparer vos mdia

Choisir le contenu de votre bannire

Actuellement, BannerZest ne supporte que les mdia sous forme dimages. La plupart des formats dimage communs sont supports: JPG, TIFF, PNG, GIF, ICNS, RAW, PSD, ... Il vous suffit de slectionner des illustrations en utilisant le Finder et de les dposer : - soit dans lcran daccueil de BannerZest - soit dans longlet Media de lInspecteur de BannerZest.

Utilisez le navigateur mdia intgr, comme dcrit plus tard dans cette section, pour accder vos rfrentiels dimages.

Une note sur la conversion de mdia

Lorsque BannerZest prpare vos images pour la publication, il effectue 2 oprations: - il rduit les images originales dans le but dconomiser de la place. Si la taille de votre bannire est de 200x200 pixels, il ne serait pas pertinent de publier les images dans leurs tailles originales. A la place, BannerZest les rduira pour quelles ne soient pas plus grandes que la bannire. - il les convertit dans un format qui peut tre affich sur le web: JPG ou PNG. Par dfaut, BannerZest 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 dfault peut tre modi dans les Prfrences.

12

The Media Browser (seulement pour la version PRO)

Le navigateur Media vous permet daccder vos images depuis les rfrentiels standards : iPhoto : accs toutes vos photos comme tous vos vnements depuis le navigateur mdia. Apple Aperture: accdez aux photos stockes dans vos bibliothques Aperture. BannerZest vous permet dajouter de multiples bibliothques dans la liste (voir ci-dessous). Adobe Lightroom: accdez aux photos stockes dans vos catalogues Lightroom. BannerZest vous permet dajouter de multiples catalogues dans la liste (voir ci-dessous). iDive : si vous possdez iDive, vous pouvez accder tous les chantillons dimages depuis vos chiers vido comme si ctait des chiers individuels MemoryMiner (www.memoryminer.com) : vous pouvez ajouter nimporte quel nombre de catalogues MemoryMiner votre navigateur mdia. Glissez-dposez simplement un catalogue ou utilisez le bouton action (voir plus bas) pour slectionner un catalogue sur le disque. MemoryMiner vous permet dorganiser vos photos et les tiqueter avec les noms des personnes et des lieux. Cette information est directement accessible depuis le navigateur mdia. En outre, vous pouvez accder la zone dintrt que vous avez cre dans MemoryMiner. Photo Booth: accs toutes vos images Photo Booth directement.

13

 Dossiers dimages : vous pouvez avoir accs nimporte quel dossier dimages depuis le navigateur mdia en glissant-dposant simplement un dossier dimages lintrieur de la liste des sources.

Ajouter de nouvelles sources.

Vous pouvez ajouter un nouveau dossier dimages votre navigateur mdia en appuyant sur le bouton Add Folder..:

Vous pouvez ajouter dautres sources en slectionnant le menu appropri depuis le menu Action (voir plus bas)

Ajouter iPhoto... : vous permet dajouter de multiples bibliothques iPhoto votre liste. Le navigateur Mdia supporte nimporte quel nombre de bibliothques diPhoto dans sa liste. Ajouter MemoryMiner... : vous permet dajouter un nouveau catalogue de MemoryMiner votre liste de sources. Ajouter Bibliothque Aperture...: vous permet dajouter une bibliothque Aperture votre liste de sources. BannerZest vous permet dajouter plusieures bibliothques Aperture. Ajouter Catalogue Lightroom...: vous permet dajouter un catalogue Lightroom votre liste de sources. BannerZest vous permet dajouter plusieurs catalogues Lightroom.

Sources dconnectes
Le navigateur de Mdia gre parfaitement les sources dconnectes (sources qui sont stockes sur un support externe non connect par exemple) en affichant un symbole appropri ct de ces sources.

14

15

Personnaliser votre bannire

Quelle ressemble ce que vous voulez...
Longlet Rglages de lInspecteur vous permet daccder tous les paramtres disponibles pour le thme slectionn. Ce serait impossible de discuter de toutes les options possibles dans cette section. Nous voulons simplement mettre laccent sur les paramtres cls disponibles dans la plupart des thmes.

La ncessit de mise jour

Changer les valeurs de certains des paramtres ne rsultera pas toujours en un changement en temps rel dans laperu. Cest souvent le cas lorsque le paramtre est une chane de caractres (un titre par exemple). Si vous trouvez que le paramtre que vous tes en train de

modier ne semble pas avoir deffet dans laperu, cliquez sur le bouton Rafrachir : cette action rechargera la bannire, rafrachira l'aperu et appliquera nouveau tous les paramtres.

Information sur les Mdia

La personnalisation la plus vidente de la bannire consiste donner un titre et un sous-titre votre mdia. Pour cela, il vous suffit dditer les champs Titre et Sous-titre dans longlet Media. Par dfaut, dans le champs Sous-titre apparatra la date du mdia, mais vous pouvez

saisir nimporte quel texte dans le champ.

Le format date BannerZest vous laisse contrler le format utilis pour afficher les dates via les Prfrences de lapplication.

Taille
Comme abord prcdemment, tous les thmes vous permettent de choisir la taille de la bannire, mais certains imposeront un ratio dapect pour la bannire. Dans ce dernier cas, cela signie que vous pourrez choisir soit la largeur de la bannire soit sa hauteur mais pas les deux en mme temps. Le paramtre Taille est habituellement le premier paramtre disponible dans le panneau des Paramtres.

Ratio daspect Media

Comme vu plus tt, certains thmes vous laissent dcider si les mdia devraient tre affichs en utilisant leur ratio daspect naturel, ou en utilisant un ratio daspect impos (souvent carr).

Bordure
Tous les thmes vous permettent dappliquer une bordure la bannire. Vous pouvez choisir: - la largeur de la bordure (en pixels) - la couleur de la bordure - Rayon de langle appliquer Lorsquun rayon dangle diffrent de zro est utilis, la bannire est rendue transparente dans les coins afin quelle sintgre parfaitement dans votre dessin

Ecran de chargement
Lcran de chargement est lcran qui apparat lorsque la bannire est en train de charger toutes les valeurs (chiers mdia). BannerZest vous permet de choisir les aspects visuels de lcran de chargement partir de la liste des pr-rglages. Une mode Aperu est aussi disponible qui permet de stopper lanimation de la bannire an de ger lcran de chargement pour pouvoir visualiser leffet de tel ou tel rglage.

Diffrents crans de chargement disponibles via les pr-rglages.

Dans BannerZest Pro, vous pouvez personnaliser entirement lapparence de lcran de chargement en choisissant les couleurs, les bordures, etc...

Titre
La section Titre du panneau des paramtres vous permet de contrler laffichage des titres des mdia. Une case cocher vous permet de rendre visibles ou non tous les titres. Vous pouvez galement en choisir la police, la taille et la couleur.

Sous-titre
Comme pour les titres, la section sous-titre du panneau des paramtres vous permet de contrler laffichage des sous-titres de vos mdia. Une case cocher vous permet de de rendre visibles ou non tous les titres. Vous pouvez galement en choisir la police, la taille et la couleur.

Publier
Une fois que la bannire a t congure et que laperu vous satisfait, il est temps de la publier. Format de sortie BannerZest publie la bannire sous la forme dun chier SWF appel bzAnimation.swf ainsi que des chiers annexes : un chier XML appel bz.xml qui contient tous les paramtres de la bannire, un chier javascript appel bz.js qui congure la bannire. Il convient de noter que javascript nest pas autoris sur des sites tels que facebook ou mySpace. Dans ce cas, nous produisons un code HTML lgrement diffrent. des chiers images au format de la bannire dans un dossier img. BannerZest utilise ces images dasn la bannire et optimise leur taille. La qualit de compression est gouverne par les rglages de longlet publication. des images au format plus grand, publies dans un dossier appel large. Ce sont les images utilises par les visualisateurs de mdias (version PRO seulement). des chiers CSS et Javascript additionnels utiliss par les visualisateurs de mdias (PRO Version).

En plus de tous ces chiers utiliss par la bannire, BannerZest publie un chier de prvisualisation appel bz.html utilis pour tester la bannire. Options de sortie Quand vous choisissez de publier une bannire, BannerZest vous offre 3 possibilits : - publier vers un dossier : cette option est utile lorsque vous souhaitez crer un aperu local de votre bannire avant de la mettre en ligne.

- publier sur Internet via FTP: cette option vous permet denvoyer votre bannire (le chier SWF, les chiers mdia et tous les chiers auxiliaires) votre serveur via FTP. - publier sur Internet via .Mac: cette option vous permet denvoyer votre bannire (le chier SWF, les chiers mdia et tous les chiers auxiliaires) sur votre compte .mac.

A propos de Flash et de Scurit

Flash possde un modle de scurit qui empche un contenu local (les chiers SWF sur votre systme chiers) dtre visionn dans un navigateur, moins que ce contenu ait t dclar sr pour tre visionn. Le modle de scurit est bas sur lemplacement des chiers dans le systme chiers et utilise une liste de dossiers autoriss qui sont enregistrs avec le lecteur Flash. Quand un chier SWF est identi comme appartenant ces dossiers autoriss, Flash Player les ouvrira sinon non. Quand vous publierez votre bannire en local, BannerZest modiera la liste des dossiers autoriss pour ajouter le dossier dans lequel vous publiez. Cela garantira que Flash Player passer le chier local SWF lors de la visualisation.

La version PRO vous permet dassocier un visualisateur de mdia tel que ShadowBox ou LightBox votre bannire. Cela signie quun clic sur un mdia va entraner laffichage dune version de plus grande rsolution dans une fentre ottante (voir ci-dessous).

La taille des grandes images peut directement tre contrle partir de longlet de publication

La version PRO vous permet galement de congurer le comportement des hyperliens via le rglage target URL:

Vosu pouvez mme utiliser ce rglage pour attacher du code javascript personnalis dans la fonction appele lors dun clic sur un hyperlien. Cette fonction se trouve dans le chier 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" button 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 dexpliquer comment FTP peut tre utilis pour publier votre bannire et comment faire rfrence cette bannire publie dans votre site web.

Quest-ce que FTP ?

FTP est un protocole de transfert de chiers qui gre toutes les choses compliques derrire les oprations de transfert de chiers entre votre ordinateur et nimporte quel site distant.

Est-ce que tout le monde peut utiliser FTP?

Pour utiliser FTP, il vous faut connatre un serveur et possder des droits accs (login utilisateur/mot de passe) ce serveur. Habituellement, on obtient un accs FTP un serveur en sabonnant auprs dun hbergeur de site internet ou quand vous souscrivez un accs basique internet via un FAI (Fournisseur dAccs Internet). Le volume despace obtenu et ce que vous pouvez en faire dpendent de votre plan particulier. Pour le reste, nous supposerons que vous avez lquivalent dun hbergement basique sur un serveur et que nous avons les informations suivantes: un nom de domaine : dans notre cas www.mysite.com (remplacez mysite.com par

votre nom de domaine). un serveur FTP : dans le cas prsent, le serveur sera appel : ftp.mysite.com. Vous obtiendrez le nom exact du serveur FTP quand vous achterez votre plan dhbergement ou souscrirez un plan daccs auprs de votre FAI. un login utilisateur/mot de passe : qui vous permettront de vous connecter votre serveur Cest le cas de gure le plus frquent lorsque vous achetez un domaine (www.mysite.com) et un hbergement. Le mail de bienvenue que vous recevez contient habituellement toutes les informations propos du nom du serveur FTP, login et mot de passe.

Le systme de chiers et votre site web

Votre site web site est stock sur un disque, ou un systme de chiers. Quand lURL dun site web contient '/', ce qui vient aprs le '/' correspond un dossier dans ce systme de chiers. Il est trs important de comprendre cette notion. En consquence, il y a un concept trs important : le dossier racine. Cest le dossier, dans le systme de chiers, qui correspond la racine de votre site web. Souvent, ce dossier racine est appel www, et nous supposerons pour la suite que cest bien le cas. Cela signie que le dossier www correspond lURL http://www.mysite.com. En dautres termes, le dossier www contiendra tous les chiers accessibles depuis lURL racine.

Par exemple, lURL http://www.mysite.com/index.html pointe vers un chier rel, appel index.html, situ dans le dossier www. De la mme manire, lURL http://www.mysite.com/products/index.html pointe vers un chier rel, appel index.html, situ dans le sous-dossier products, dans le dossier racine www.

Comprendre le dialogue FTP de BannerZest

Pour congurer un serveur FTP, vous pouvez soit ouvrir le dialogue des Prfrences de lapplication (BannerZest > Prfrences...) soit choisir loption Editer la liste des serveurs dans longlet de Publication:

Dans les 2 cas, cela ouvrira le dialogue de cration de conguration serveur. Appuyer sur le bouton + pour crer une nouvelle conguration. Vous avez le choix entre une conguration .Mac et une conguration FTP. Dans le cas prsent, nous choisissons FTP.

Le panneau de conguration FTP a laspect suivant:

Nom: ceci est le nom de la conguration. Ce nom apparatra dans la liste des serveurs et vous permettra de rappeler une conguration dj sauve.

Adresse du serveur: ladresse de serveur de votre serveur FTP (ftp.mysite.com). Nom de lutilisateur: le nom d'utilisateur de votre serveur FTP. Mot de passe: le mot de passe de votre serveur FTP.

Port: le port de votre serveur FTP (21 par dfaut). Racine du site : le dossier racine de votre site web (www, htdocs, html, pu-

blic_html, ou mainwebsite_html). Vous trouverez gnralement un dossier avec lun de ces noms dans votre rpertoire personnel. Il est appel document root, Web root or website directory, et correspond au plus haut niveau de votre site web. Par exemple, si vous placez un chier appel mypage.html dans ce dossier, et si lURL de votre site web est www.example.com, vous pourrez visualiser ce chier sur le Web en utilisant lURL www.example.com/mypage.html. URL of votre site: lURL de votre site web.

A traduire ou laisser tel quel ?

Publier via .Mac

BannerZest inclut un support intgr pour publier votre bannire sur votre compte sur .Mac. Si vous avez dj paramtr correctement .Mac dans le Systme des Prfrences, BannerZest utilisera automatiquement ces prfrences. POur congurer un serveur .Mac, il suffit daller dans les Prfrences de lapplication, de choisir longlet Serveurs et dajouter une conguration .Mac par le bouton +. Le dialogue de conguration .Mac a cette aspect:

Si un dialogue de demande daccs votre trousseau apparait, cliquez sur le bouton Autorisez une fois ou sur le bouton Autorisez toujours pour autoriser BannerZest accder votre Trousseau de cls

10

Si vous avez congur correctement .Mac, BannerZest show affichera Your .Mac account is valid: Votre compte .Mac est valide

sinon, cliquez sur Ouvrir Prfrences .Mac et congurez votre compte .Mac :

Intgrer votre bannire

Une fois votre bannire publie, elle peut tre facilement intgre sur une page web ou un blog. La partir basse de longlet de publication vous donne accs: - une prvisualisation de la bannire - un dialogue contenant le code HTML

11

Une fois votre bannire publie, BannerZest vous donnera un fragment de code qui peut tre intgr dans tout diteur HTML comme on le verra de manire plus dtaille dans les prochains chapitres.

Prvisualiser ou obtenir le code de la dernire version publie.

Vous pouvez cliquer sur Afficher HTML pour ouvrir le dialogue de code HTML. BannerZest va souvent vous donner le choix entre 2 ou 3 versions du code HTML : 1. Une premire version comprenant des appels javascript et qui comporte notamment un test volu de la version du Player Flash. Ce code gre de faon lgante la non compatibilit du lecteur Flash sur tous les navigateurs et en particulier Internet Explore. Cest la mthode recommande pour intgrer votre bannire. Elle fonctionne trs bien avec tous les diteurs de site web et avec certains services de publication en ligne. 2. La version Wordpress/Dotclear : il sagit de la mme version que la version 1. ci-dessus, mais elle fait lobjet dun formattage particulier qui la rend totalement compatible avec WordPress et DotClear et dautres systmes de

12

publication en ligne. 3. Une version ne comportant pas de javascript. Cette version doit tre utilise pour la publication dune bannire sur certains systmes de blog qui nacceptent pas de javascript, ou sur des sites de socialisation tels que facebook et mySpace.

L'intgration dune bannire sur une page web dpend de lditeur que vous utilisez. Nous avons tent de couvrir toutes les spcicits lies aux diffrents diteurs sur le Wiki de BannerZest. Utiliser le bouton Montrer la bannire pour ouvrir une page HTML dexemple gnre pour vous qui intgre votre bannire. Cette page vous donne galement accs aux diffrentes versions du code.

13

Pour une discussion complte sur les tapes d'intgration, nhsitez pas vous rendre sur le Wiki de BannerZest : http://www.aquafadas.eu/wiki/BannerZest:How_to Les diteurs de site web suivants : iWeb RapidWeaver Sandvox Dreamweaver Freeway

et de blogs Wordpress Dotclear Blogger TypePad

font lobjet de discussions dtailles. Lintgration sur mySpace et facebook sont galement discutes.

Modier une bannire publie

Une fois que votre bannire a t publie, cest trs facile de la modier. R-ouvrez le chier projet de la bannire (.bnz le), effectuez vos modications et publiez la nouveau. Comme BannerZest mmorise les paramtres de publication pour le projet, vous naurez pas recongurer vos options FTP ou .Mac. Appuyez simplement sur le bouton Next dans lAssistant de publication.

14

BannerZest dtectera que la bannire existe dj lemplacement cible et vous invitera conrmer que vous voulez rellement lcraser. Une fois la bannire re-publie, vous naurez rien changer dans la page web ou la page du blog qui inclut la bannire car rien naura t chang ct HTML.

15

Les autres fonctions pas-si-importantes-mais-nanmoins-trs-sympa

- tous les mdia sont rfrencs via des alias. Vous pouvez dplacer vos chiers dans toutes les directions, BannerZest les retrouvera toujours. Cependant, si vous dplacez vos mdia vers un lecteur externe et dconnectez ce support, bannerzest BannerZest aura perdu la rfrence sur les mdia. Dans ce case, il affichera les mdia avec un symbole spcique dalerte. La mme chose arrive si vous effacez accidentellement un chier mdia dans le Finder, chier qui serait actuellement en train dtre utilis par BannerZest - BannerZest vous permet de crer des copies autonomes de vos chiers projet bannire. Ces chiers projet contiennent une copie de tous les mdia au moment de la sauvegarde. Vous pouvez utiliser ces copies autonomes pour partager vos projets avec dautres. - vous pouvez crer des bordures pour vos images, en ajustant lchelle de manire ce quelles ne remplissent pas entirement le rectangle de dtourage et vous pouvez choisir

une couleur de fond non transparente.

Autres ressources
O trouver dautres informations importantes propos de BannerZest...

Les informations les plus actualises sur BannerZest sont sur le site web dAquafadas : www.aquafadas.com Un Wiki est galement mis disposition avec des conseils et des astuces, des pages de FAQs et des exemples type tutoriel qui dcrivent en long les diffrentes possibilits offertes par BannerZest. Vous trouverez galement des informations dtailles au sujet de lintgration avec des diteurs web et des outils de blog. www.aquafadas.eu/wiki

Une section pour les dveloppeurs paratra bientt sur le Wiki, expliquant comment des dveloppeurs extrieurs peuvent dvelopper des thmes pour BannerZest.