Mis à jour le jeudi 31 octobre 2013
  • Facile
Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

Vous avez un site web et vous voulez créer un album de vos photos de vacances facilement ? Partager vos clichés avec des amis, des parents ?

Pas de problème, ce tuto est fait pour vous. Je vais vous apprendre à vous servir de Simple Viewer.

Je vous propose de commencer tout de suite par la présentation de l'application.

Simple Viewer, c'est quoi ?

Simple Viewer

D'abord cette question qui vous brûle les lèvres :

Euh... c'est quoi, Simple Viewer ? :euh:

Simple Viewer, c'est une application flash gratuite développée par Airtight Interactive servant à créer un album photo en ligne.
En clair, elle va vous permettre de publier vos photos sur votre site web assez facilement.

À la fin de ce tutoriel, vous pourrez réaliser ceci :

Image utilisateur

Comment ça marche ?

Pas si vite, jeune Padawan, d'abord, on va télécharger l'archive :

Télecharger Simple Viewer (67,7 Ko)

Enregistrez l'archive et décompressez-la où vous voulez sur votre disque (moi, c'est sur le bureau).

Voilà, vous êtes prêts à passer à l'étape suivante. :lol:

Analysons les outils

Le contenu

Commencez par ouvrir le dossier (c'est mieux :-° ) et observez ce qu'il contient.

Image utilisateur

Beuh mais il y a plein de fichiers, lesquels vont me servir à moi ? :'(

Rhaaa mais ne pleurez pas ! Ce n'est pas bien compliqué :

Dossier/Fichier

Description

Images

C'est le dossier qui contient les images en grand format.

Thumbs

Ce sont les icônes des images à afficher.

Gallery

C'est un fichier XML avec tous les raccourcis des images.

Index

C'est la page HTML qui contient l'album en lui-même.

Readme

C'est le fichier "Lisez moi".

SWFobject

C'est le fichier JavaScript.

Viewer

C'est l'application permettant l'affichage de l'album en lui-même.

Vous avez tout compris ? Oui ?

Bon, eh bien passons à la partie suivante. ^^

Créons notre album !

Les images

Alors, maintenant que vous savez à quoi servent tous ces répertoires et fichiers, on va pouvoir commencer.

Commencez par choisir vos photos puis faites-les glisser dans le répertoire "Images".

Image utilisateur

Faites de même pour le répertoire "Thumbs".

Image utilisateur

Donc si vous avez bien compris, les images du répertoire "Thumbs" seront les icônes, celles du répertoire "Images" seront les photos grand format.

Donc maintenant que nous avons des photos et des icônes, nous pouvons attaquer le code.

Le code

Ouvrons le fichier Gallery.xml avec un éditeur comme Notepad++ ; vous devriez avoir ceci :

Image utilisateur

Qu'est-ce que c'est que ce truc ? :o

C'est un fichier XML, qui contient une simplification du module.

<image>
	<filename>tall.jpg</filename>
	<caption>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</caption>	
</image>
  1. La balise <image> représente l'ensemble de la diapo : l'image, l'icône et le commentaire

  2. La balise <filename> (ici, tall.jpg) est l'image qui sera affichée en premier.

  3. La balise <caption> contient le texte qui sera affiché en commentaire ("One morning,[...]into stiffs sections.").

Dans mon cas, le fichier modifié avec mes images donne cela :

Image utilisateur

Ouvrez ensuite index.html et admirez votre travail. :soleil:

Voilà ce que ça donne chez moi :

Image utilisateur

Voilà pour la base. Vous pouvez vous arrêter là, mais je vous conseille fortement de lire l'annexe, votre album sera déjà plus beau et plus personnalisé.

Annexe : aller plus loin

Les options des diapos

Rappelez-vous : plus haut, je vous ai dit de ne pas vous occuper de la seconde ligne du fichier .xml ; eh bien, c'est ce qu'on va faire maintenant ! :waw:
Analysons le contenu :

<simpleviewergallery maxImageWidth="480" maxImageHeight="480" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="20" stagePadding="40" navPadding="40" thumbnailColumns="3" thumbnailRows="3" navPosition="left" vAlign="center" hAlign="center" title="SimpleViewer Gallery" enableRightClickOpen="true" backgroundImagePath="" imagePath="" thumbPath="">

Beuh, ça veut dire quoi tout ça ? o_O

Facile : ce sont les options paramétrables des diapos, je vais vous montrer comment ça marche.

Modifier les options des diapos

Nom

Fonction de l'option

maxImageWidth="480"

La largeur des photos en pixels (ici 480).

maxImageHeight="480"

Idem mais cette fois, c'est avec la hauteur (480 pixels aussi).

textColor="0xFFFFFF"

La couleur du texte (en valeur hexadécimale).

frameColor="0xFFFFFF"

Couleur des boutons de navigation et des cadres (en valeur hexadécimale aussi)

frameWidth="20"

La largeur du cadre entourant les photos (en pixels).

stagePadding="40"

La largeur de la marge entre les icônes de diapos et l'affichage des photos.

thumbnailColumns="3"

Le nombre de colonnes d'icônes de diapos dans la liste de sélection.

thumbnailRows="3"

Le nombre de lignes d'icônes de diapos dans la liste de sélection.

navPosition="left"

La position des icônes de sélections des diapos sur la page. Peut être Top , Bottom , Left , Right .

vAlign="center"

Alignement de la galerie par rapport à la page. Peut être Top , Bottom , Center .

hAlign="center"

Idem mais de façon horizontale. Peut être Left , Center , Right .

title="SimpleViewer Gallery"

Tout bêtement le titre de la galerie.

enableRightClickOpen="true"

Activer / désactiver le clic droit. true (oui) ou false (non)

backgroundImagePath=""

Le chemin de l'image de fond, qui peut être relatif ou absolu. (Dans le cas d'un lien relatif, l'image de fond doit être dans le même répertoire que celui du fichier gallery.xml).

imagePath=""

Le chemin relatif au dossier "images". Si le dossier est dans le même répertoire que le fichier gallery.xml, il est inutile d'en spécifier un autre.

thumbPath=""

Idem mais pour les icônes des diapos.

Le fichier index.html

Certaines options pratiques comme l'emplacement du fichier gallery.xml peuvent être activées via la page index.html. Voici ce que l'on peut voir en ouvrant ledit fichier :

<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SimpleViewer</title>
<!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">	
	/* hide from ie on mac \*/
	html {
		height: 100%;
		overflow: hidden;
	}
	
	#flashcontent {
		height: 100%;
	}
	/* end hide */

	body {
		height: 100%;
		margin: 0;
		padding: 0;
		background-image: http://i89.servimg.com/u/f89/13/29/76/34/fond511.jpg;
		color:#ffffff;
		font-family:sans-serif;
		font-size:20;
	}
	
	a {	
		color:#cccccc;
	}
</style>
</head>
<body>
	<p><a href="#">Retour arrière</a></p>
	<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>	

	<script type="text/javascript">
	
		var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
		
		// SIMPLEVIEWER CONFIGURATION OPTIONS
		// To use an option, uncomment it by removing the "//" at the start of the line
		// For a description of config options, go to: 
		// http://www.airtightinteractive.com/simpleviewer/options.html
		
		//fo.addVariable("xmlDataPath", "gallery.xml");
		//fo.addVariable("firstImageIndex", "5");	
		//fo.addVariable("langOpenImage", "Open Image in New Window");
		//fo.addVariable("langAbout", "About");	
		//fo.addVariable("preloaderColor", "0xFFFFFF");
		
		fo.write("flashcontent");	
		
	</script>	
</body>
</html>

On ne va garder que ce qui nous interesse, à savoir cette partie :

<script type="text/javascript">
	
		var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
		
		// SIMPLEVIEWER CONFIGURATION OPTIONS
		// To use an option, uncomment it by removing the "//" at the start of the line
		// For a description of config options, go to: 
		// http://www.airtightinteractive.com/simpleviewer/options.html
		
		//fo.addVariable("xmlDataPath", "gallery.xml");
		//fo.addVariable("firstImageIndex", "5");	
		//fo.addVariable("langOpenImage", "Open Image in New Window");
		//fo.addVariable("langAbout", "About");	
		//fo.addVariable("preloaderColor", "0xFFFFFF");
		
		fo.write("flashcontent");	
		
	</script>

Voici les différentes options supplémentaires et leur effet :

Nom

Fonction de l'option

fo.addVariable("xmlDataPath", "gallery.xml");

Donne le chemin relatif pour le fichier xml. Permet aussi de créer un fichier avec un nom différent, à votre guise.

fo.addVariable("firstImageIndex", "5");

L'image d'acceuil quand on ouvre la galerie. Plus précisément la première image qui se charge quand on ouvre l'album. Attention cependant, la numérotation démarre à 0. Si vous voulez afficher la première image, renseignez 0 où ne l'activez pas . ;)

fo.addVariable("langOpenImage", "Open Image in New Window");

Permet d'afficher un texte personnalisé à la place de "Open image in a new window". Remplacez par ce que vous voulez.

fo.addVariable("langAbout", "About");

De la même manière, remplacer le "About" par défaut par une autre formulation.

fo.addVariable("preloaderColor", "0xFFFFFF");

Changer la couleur de la barre de chargement à l'ouverture de l'album. Renseigner une notation hexadécimale.

En modifiant tout cela, vous pouvez changer radicalement l'apparence de votre album et lui donner un air plus personnel. Le mieux étant encore de tester, d'expérimenter.

Voilà ce que j'obtiens après personnalisation : :magicien:

Image utilisateur

C'est déjà plus esthétique, non ? Si on enlève les photos super méga laides de ma webcam, ça donne un rendu assez sympathique. ;)

J'espère que vous ferez mieux que moi. :lol:

Envoyer votre album sur le web

Vous avez terminé votre album et vous voulez le publier sur le web ? Rien de plus simple, je m'en vais vous expliquer la méthode.

Tout d'abord, il faut savoir qu'il y a plusieurs méthodes, et que certaines sont plus simples que d'autres :

Première méthode, l'envoi sur un serveur FTP.

Cette méthode est la plus simple si vous disposez d'un serveur web, mais elle a des inconvénients.

Étape 1 : que faut-il envoyer ?

Pour que l'album soit pleinement disponible, vous devez envoyer tout le dossier simpleviewer sur votre serveur (le ficher readme est inutile, vous n'êtes pas obligé de l'envoyer). Par exemple, envoyez le dans à la racine "www" de votre serveur web.

Étape 2 : comment afficher votre album.

Pour afficher votre album, il vous suffit simplement de créer un lien vers la page "index.html". le fichier xml contenu dans le dossier fera le reste. ;) Par exemple, dans le cas précédent, le ficher se trouve à l'adresse "http://mondomaine.fr/simpleviewer/index.html".

Avantages/inconvénients

Avantages

Inconvénients

Accessible depuis n'importe quel ordinateur...

Donc accessible par n'importe qui.

Permet de mettre les dossiers à différents
emplacements sur le serveur.

Par défaut inaccessible hors connexion.

Simple à mettre à jour.

Nécessite un serveur web.

Deuxième méthode : l'envoi par fichier compressé.

Plus simple si vous n'avez pas de serveur web, mais moins pratique pour le visionnnage.

Étape 1 : Compresser votre dossier.

Tout d'abord, commencez par sélectionner votre dossier simpleviewer, puis compressez-le avec winrar ou winzip. Ouvrez l'archive et vérifiez que tout vos fichiers ont été correctement compressés (deux précautions valent mieux qu'une ;) ).

Étape 2 : uploader votre fichier compressé.

Il vous faut maintenant envoyer votre fichier compressé sur le web. Vous pouvez utiliser une plate-forme d'upload de fichiers comme Megaupload. Envoyez le fichier et copiez le lien de téléchargement vers le fichier. Ensuite, envoyez le à vos amis ! :soleil:

Avantages/inconvénients

Avantages

Inconvénients

Accessible hors ligne une fois téléchargé et décompressé.

Moins simple à mettre à jour.

Moins accessible par des personnes indésirables.

Ne permet pas de placer les dossiers "images" et "thumbs" où vous voulez.

À vous de faire la part des choses entre ces deux méthodes. Voulez-vous créer un album de famille pour un usage plus privé ou créer un album facilement accessible pour faire connaître votre groupe de musique ?

Voilà, vous savez maintenant envoyer votre album sur le web ! :magicien:

J'espère vous avoir permis de réaliser ce que vous vouliez et n'oubliez pas que si vous avez des questions, vous pouvez me les envoyer par MP. ;)

Merci à Coyote et à Carma001 pour leur travail de validation et leurs commentaires précis.

Exemple de certificat de réussite
Exemple de certificat de réussite