7 juil. 09

DEBUTER SUR MAC :

Accueil

Tutoriels

Vidéos

Blog

Forum

Livre d’Or

Twitter

Pages utiles pour iWeb :

iWeb : les tutoriels vidéos

La publication FTP d’iWeb ’08

La fenêtre des couleurs

BannerZest

Keynote

Art Text 2

Skitch

LIENS :

ClubiWeb

ClubiWeb

iWeb Beginner

Forum iWeb de MacGeneration

Forum iLife de Mac4ever

LIENS EN ANGLAIS :

11mystics

iWebfaq

iwebunlimited

Wyodor

AUTRES :

Jumsoft

JotForm

Google docs

Dynamicdrive

w3schools

haloscan

Simpleviewer est certifié de mon label «jolie brique bleue» anti-iPad, anti-iPhone.

Tutoriel :

1. On commence par télécharger le pack simpleviewer sur le site d’AIRTIGHTINTERACTIVE (cliquez ici). Vous obtenez un dossier simpleviewer_numerodelaversion (dans mon cas simpleviewer_203) Dans ce dossier , vous avez un dossier web.

2. Vous ouvrez ce dossier web, dedans vous y trouverez :

1. •un fichier simpleviewer.swf (on n’y touche pas)
   

2. •deux dossiers :
   

3. •un dossier images : ajoutez vos images personnelles max. 480x480 px. en JPEG de préférence.
   

4. •un dossier thumbs : ajoutez vos vignettes 65x65px (= les petites images sur lesquelles on clique à gauche du diaporama, chacune des vignettes doit avoir le même nom que les images grand format correspondantes.
   

5. •une page index.html : celle ci on l’ouvrira avec un éditeur de texte comme Smultron (gratuit), pour modifier la couleur de fond de la galerie (ligne 39 : #181818 determine le gris de la galerie par défaut, remplacez-le par le code de couleur qui vous plaira*)
   

6. •une page gallery.xml : ouvrez la avec Smultron à partir de la ligne 27 jusqu’à l’avant dernière ligne le code est une succession de :
   
   

7. 
   <image imageURL="images/nom_d’image.jpg" thumbURL="thumbs/nom_de_la_vignette.jpg" linkURL="" linkTarget="" >
       <caption>blablabla etc.</caption>
   </image>
   
   

3. Dans la page gallery.xml remplacez :

1. •nom_d’image.jpg (par défaut tall.jpg ou wide.jpg) par les différents noms et extensions de vos photos chez moi 1.jpg 2.jpg etc. (je sais, c’est original comme nom ;-) )
   

2. •nom_de_la_vignette.jpg (par défaut tall.jpg ou wide.jpg) par les différents noms et extensions de vos vignettes. Pour simplifier les choses, et vu qu’elles sont rangées dans des dossiers différents, j’ai choisi le même nom pour l’image et sa vignette correspondante.
   

3. •blablabla etc.  par une petite légende de votre photo qui apparaîtra sous les vignettes, perso, je n’en mets pas pour l’instant j’efface blablabla etc. mais je laisse les balises <caption></caption> en place.
   On peut trouver à la place de blablabla etc. du code HTML de cette façon
   <caption><![CDATA[ici je mets mon code HTML]]><caption>
   Vous en trouverez un exemple dans votre fichier XML.
   <caption><![CDATA[Welcome to <u><a href="http://www.simpleviewer.net" target="_blank">SimpleViewer</a></u>.]]></caption>
   
   

pour obtenir dans mon exemple :

<image imageURL="images/1.jpg" thumbURL="thumbs/1.jpg" linkURL="" linkTarget="" >
    <caption></caption>
</image>

<image imageURL="images/2.jpg" thumbURL="thumbs/3.jpg" linkURL="" linkTarget="" >
    <caption>blablabla etc.</caption>
</image>

etc.

4. 4.vous «uploadez» votre dossier web à la racine de votre serveur-FTP (dans le dossier www, web ou public_html le plus souvent) ou dans le dossier Sites (iDisk > Web > Sites) pour MobileMe  ( voir la méthode 3 du sujet «upload de fichiers» si besoin)
   
   Je vous conseille de renommer ce dossier web de simpleviewer (trop banal et qui peut prêter à confusion) en simpleviewer (au moins on sait ce que contient ce dossier)
   
   
   

5. 5.Vous devez maintenant obtenir l’URL de la page index.html de simpleviewer. Pour la plupart des cas, l’adresse de cette dernière sera de ce type
   http://web.me.com/votrepseudo/simpleviewer/index.html (MobileMe)
   http://www.monsite.com/simplewiever/index.html (FTP avec nom de domaine)
   http://votrepseudo.free.fr /simpleviewer/index.html (Free)
   http://pagesperso-orange.fr/votrepseudo /simpleviewer/index.html (Orange)
   
   

6. 6.On passe à iWeb maintenant :
   
   Sur la page iWeb où vous souhaitez afficher votre galerie simpleviewer, dans un widget fragment HTML entrez le code suivant :
   

1. 
   <iframe src="http://www.mon_site.com/simplewiever/index.html" width="800" height="500" allowTransparency="true" frameborder="0" scrolling="no" />
   
   

1. Remplacez dans ce code :
   

2. 
   

3. •http://www.mon_site.com/simplewiever/index.html par la vraie adresse de la page index.html de la galerie (ne pas confondre avec la page index.html de votre site iWeb)
   

4. •la hauteur et la largeur à votre convenance (ici la galerie fait 800 de large (width) sur 500 de haut (height)).
   
   

5. Placez votre widget où vous le souhaitez sur votre page et évitez de le redimensionner  manuellement en tirant sur ces bords, c’est par le code que vous devez le faire
   

6. Publiez et admirez le résultat sur votre navigateur.