Les choix Exporter la photo (ou toutes les photos) pour le Web

Ils appartiennent au Menu photo et permettent l'export de la photo sélectionnée (ou de toutes les photos sélectionnées) en format HTML à destination du Web ou de courriels.

Généralités

Tous les paramètres reprennent par défaut les valeurs paramétrées dans les Préférences à l'onglet Export Web mais peuvent être modifiés localement à volonté (voir plus bas).

Le résultat de l'export se décompose en trois parties principales :

La photo principale qui signale au passage du curseur de la souris qui sont les personnages, voir exemple.
Les miniatures, optionnelles, qui récapitulent en dessous de la photo les différents personnages avec leurs informations et donnent en option des liens permettant au lecteur de préciser des détails inconnus sur le personnage, par exemple son nom. Elles peuvent être disposées sur une à quatre colonne au choix, mais selon la place disponible (plus la photo est large, et plus les miniatures sont petites, plus on peut mettre de colonnes), voir exemple.
Des pages portraits, optionnelles, une par personnage, qui donne aussi les informations de chacun. Les pages portraits s'affichent par clic soit sur les personnages de la photo, soit sur les miniatures. Les portraits peuvent être plus gros que les miniatures, voir exemple..

Après avoir choisi les paramètres voulus, presser le bouton . Au bout de quelques instants, selon la complexité de la photo, l'export est terminé ce qui rend utilisable le bouton . En cliquant sur ce bouton, vous provoquez l'affichage du code généré dans l'explorateur Web (aussi appelé navigateur ou browser) par défaut, ce qui permet de juger de l'effet produit.

Nota : Par clic droit sur le bouton , un menu contextuel apparaît qui permet de choisir l'explorateur Web, si toutefois plusieurs d'entre eux sont installés.

Nota : Si vous avez installé des explorateur Web autres que IE, Firefox ou Opera, ou si vous avez installé ceux-ci à des adresses non usuelles, sachez que vous pouvez les préciser dans le fichier Quisontils.ini dans la section PREFERENCES vous trouverez les clés suivantes :

		ExportWebBrowser1=Interner Explorer|c:\Program Files\Internet Explorer\iExplore.exe
		ExportWebBrowser2=Firefox|c:\Program Files\Mozilla Firefox\Firefox.exe
		ExportWebBrowser3=Opera|c:\Program Files\Opera\Opera.exe
		ExportWebBrowser4=

Il y a quatre possibilités de browsers enregistrés dont la numérotation est arbitraire et peut être modifiée...
Si les contenus sont inexistants ou incorrect modifiez-les. Notez que le nom de l'explorateur Web précède le chemin complet de son exécutable, tout en étant séparé de celui-ci par le caractère | (barre verticale). Par exemple, si Opera est installé sur D:\Opera\Opera.exe, la ligne ExportWebBrowser correspondante devra être ExportWebBrowserN=Opera|D:\Opera\Opera.exe où N est le numéro d'ordre.

Dans le répertoire spécifié pour l'export, Quisontils crée un sous répertoire au nom de la photo et y stocke le code généré nomphoto.html et le fichier photo nomphoto.jpg.

Le paramétrage

Répertoire local pour les exports Web : C'est là que Quisontils va stocker les données générées par l'export. Si la photo courante s'appelle MaPhoto.jpg, après exécution de l'export, on y trouvera au moins MaPhoto.html et MaPhoto.jpg, mais il peut aussi y avoir des images de miniatures (.jpg), des images de portraits (.jpg) et des pages de portraits (.html).
Si la case Export dans sous-répertoires est cochée, l'export sera généré dans un sous-répertoire nommé MaPhoto. MaPhoto.html contient tout le code à insérer dans votre page Web ou dans votre courriel tandis que MaPhoto.jpg est l'équivalent de votre photo de référence, mais redimensionnée pour satisfaire aux paramètres suivants.
Le bouton permet de vider le répertoire d'export.
Largeur voulue pour l'export (en pixels) : C'est le nombre de pixels maximum que devra occuper la photo résultant de l'export en largeur. La largeur minimum est de 48 pixels.
Hauteur voulue pour l'export (en pixels) : C'est le nombre de pixels maximum que devra occuper la photo résultant de l'export en hauteur. La hauteur minimum est de 48 pixels.
Contrainte sur la largeur / Contrainte sur la hauteur : Il est probable que les proportions de la page Web générée par l'export ne seront pas les mêmes que celles qui sont définies par le dimensions ci-dessus. Si la contrainte porte sur la largeur, la dimension indiquée pour la hauteur sera ignorée, et vice-versa.
Chemin d'accès au fichier photo : Lors de l'utilisation du code dans une page Web, le chemin d'accès à la photo est en général relatif, c'est à dire que la photo se trouve stockée dans le même répertoire que le code. Vous devez donc conserver le choix du chemin relatif. En revanche, il faut nécessairement choisir le chemin absolu en cas de génération de courriel.

Onglet local Photo :

Sous-onglet Photo / Titre :
Le titre de la photo peut être positionné au dessus ou au dessous de la photo.
Il peut se composer de divers éléments au choix parmi Sujet, Nom du fichier, Date, Lieu, Photographe et Observations.
De plus, il peut être formaté soit en ligne dans ce cas, chaque élément est séparé du précédent par le séparateur défini, soit en colonne si la case En ligne n'est pas cochée.
Sous-onglet Photo / Infos :
On définit ici les informations que le passage du curseur sur un personnage doit faire apparaître. Elles sont systématiquement séparées par des points-virgules.

Sous-onglet Photo / Cadre :

La photo est normalement présentée entourée d'un cadre.
Largeur (en pixels) détermine la taille du cadre. Si elle est 0, il n'y a pas de cadre.
Type de cadre détermine la présentation du cadre :

None : Pas de cadre,
Hidden : Le cadre est remplacé par un fond hérité,
Dotted : Le cadre est formé de points,
Dashed : Le cadre est formé de tirets,
Solid : Le cadre est formé d'un seul trait uni,
Double : Le cadre est formé de deux traits unis,
Groove : Le cadre est en creux,
Ridge : Le cadre est en relief,
Inset : Le cadre est éclairé par le bas droit,
Outset : Le cadre est éclairé par le haut gauche,

Quant à la couleur, elle est choisie sur le tableau proposé.
Nota : Tous les browsers ne dessinent pas exactement les cadres de la même manière.

Sous-onglet Photo / Présentation :
La présentation entre dans le détail de la façon dont la page Web sera générée.
Si les champs Fichier en-tête HTML et Fichier pied HTML sont renseignés, les contenus des fichiers correspondant sont ajoutés en tête et pied de page, sinon, Quisontils ne génère rien de particulier.
On devrait trouver au minimum <html><head></head><body> dans le fichier d'en-tête, et </body></html> dans le fichier de pied.
Un en-tête permet en particulier de définir une feuille de styles externe, mais le «comment» sort du cadre de cette aide.
La case à cocher Génère les styles, cochée par défaut permet, en la décochant, de ne pas les générer, notamment dans le cas où l'ajout d'une en-tête qui fait référence à une feuille de styles. Pour le détail de ceux-ci, notamment les noms des identifiants et classes, voir le contenu généré après un export.
Le Nom de la famille de fonte permet de définir le type de caractères voulu. Pour un bon résultat sur le Web, un style sans sérif est recommandé, comme Trebuchet MS, Verdana ou encore Arial. Nota : Toutes les familles listées sont en principe disponibles sur les machines Windows, Unix ou Mac.
Quant aux champs de tailles, ils servent à indiquer les tailles des fontes utilisées pour les textes éponymes. Notez l'unité qui DOIT être précisée (sans espace) et peut être des points (pt), des pixels (px), ou aussi des pourcentages (%), des références à une valeur de base (em ou ex). On pourrait même y voir des cm ou des mm. Voir la définition des css.

Onglet local Miniatures :
La case à cocher Génère des miniatures détermine si une liste de miniatures correspondant à chaque personnage doit être générée sous la photo, et valide toutes les options suivantes.

Sous-onglet Miniatures / Infos

Informations voulues pour les miniatures détermine quelles informations sur les personnages seront affichées en regard de leurs miniatures.
Par défaut, les miniatures sont listées de haut en bas sous la photo, sur une seule colonne. Le nombre de colonnes peut cependant être porté à quatre, ce qui a plus ou moins de sens selon les tailles respectives de la photo et des miniatures (sans compter la place nécessaire pour l'affichage des infos).
Liste en : Le choix Colonnes provoque le respect des colonnes, de haut en bas puis de gauche à droite, tandis que le choix Lignes, provoque le respect des lignes, de gauche à droite puis de haut en bas.

Sous-onglet Miniatures / Cadres
permet de définir les paramètres des cadres des miniatures comme celui du cadre de la photo.
Sous-onglet Miniatures / Tailles

Sous-onglet Miniatures / Courriel
Si on renseigne le champ Adresse avec une adresse de courriel, un lien proche de chaque miniature est affiché avec le texte du champ Phrase lien. Un clic sur ce lien ouvrira le programme voulu pour l'expédition d'un courriel à l'adresse donnée et préciser toute info à propos du personnage, notamment son nom s'il est inconnu.

<Onglet local Portraits :
De la même manière que les miniatures, des portraits des personnages peuvent être générés. Ils apparaissent dans une page à part à chaque clic sur un personnage ou une miniature.
La case à cocher Génère des portraits à part détermine si des pages pour chaque portrait doivent être générées, et valide toutes les options suivantes.

Sous-onglet Portraits / Infos
Informations voulues pour les portraits détermine quelles informations sur les personnages seront affichées.
Sous-onglet Portraits / Cadres

cadre de la photo

Sous-onglet Portraits / Tailles
On détermine ici la taille des portraits comprise entre 32 et 1024 pixels. En principe, elles devraient présenter des personnages plus grands que sur la photo, sans quoi elle auraient peu de raisons d'être, étant moins lisibles, à l'exception du lien permettant de fournir par courriel des informations sur le personnage.
Sous-onglet Portraits / Courriel
Si on renseigne le champ Adresse avec une adresse de courriel valide, un lien proche de chaque portrait est affiché avec le texte du champ Phrase lien. Un clic sur ce lien ouvre le programme voulu pour l'expédition d'un courriel à l'adresse donnée et préciser toute info à propos du personnage, notamment son nom s'il est inconnu.
Sous-onglet Portraits / Présentation
La présentation entre dans le détail de la façon dont la page Web portrait est générée. Voir le détail.

Code généré

Quisontils génère un code HTML tel qu'il puisse être inséré au milieu d'une page Web pour un site ou encore d'un courriel (HTML). Le code généré est validé par le W3C.

Voici en exemple le code qui génère la photo sans miniature ci-dessous à droite :

Mariage de Claude Célestin & Saint-Dizier Marie-Catherine
mercredi 15/3/1882
Fraize

Voici en exemple le code qui génère la photo avec miniatures ci-dessous à droite :

Mariage de Claude Célestin & Saint-Dizier Marie-Catherine
mercredi 15/3/1882
Fraize

1 Claude Célestin

Donner des informations à propos de ce personnage

2 Saint-Dizier Marie-Catherine

Donner des informations à propos de ce personnage

<html>
<head>
<title>Mariage de Claude Célestin & Saint-Dizier Marie-Catherine ; mercredi 15/03/1882 ; Fraize</title>
<meta name="generator" content="Quisontils">
<style type="text/css">
/* début des styles pour Quisontils */
.exportweb { margin: 0; padding: 0; }
.exportweb h2 { margin: 0 0 0.5em 0; font-weight: bold; font-family: Verdana; font-size: 12pt; }
.exportweb ul { list-style-type: none; padding: 0; margin: 0 0 0.5em 0; font-weight: bold; font-family: Verdana; font-size: 12pt; }
.exportweb li { }
.exportweb .titre { }
.exportweb .fichier { }
.exportweb .date { }
.exportweb .lieu { }
.exportweb .photographe { }
.exportweb .obs { }
.exportweb img { border:8px ridge #ff0000; margin: 0; }
.exportweb .miniatures { width: 216px; text-align: left; margin: 0 0; }
.exportweb .ligneminiatures { margin: 0; padding: 0; }
.exportweb .miniatures div { float: left; }
.exportweb .miniature { float: left; width: 216px; margin: 0.5em 0 0 0; }
.exportweb .miniature img { border:4px ridge #ff0000; float: left; margin: 0 0.5em 0.5em 0; }
.exportweb p { font-weight: bold; margin: 0; font-family: Verdana; font-size: 9pt; }
.exportweb p a { font-family: Verdana; font-size: 6pt; }
.exportweb p a:link { text-decoration: none; }
.exportweb p a:hover { text-decoration: underline; }
.exportweb p a:visited { text-decoration: none; }
.exportweb div.clearfloat { clear: both; }
/* fin des styles pour Quisontils */
</style>
</head>
<body>


<div class="exportweb">
<ul>
<li><span class="titre">Mariage de Claude Célestin & Saint-Dizier Marie-Catherine</span></li>
<li><span class="date">mercredi 15/03/1882</span></li>
<li><span class="lieu">Fraize</span></li>
</ul>
<img src="claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001.jpg" width="200" height="301" usemap="#mapareas" alt="">
<map name="mapareas">
<area shape="rect" coords="99,18,155,100" href="#claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_claude_20c_e9lestin_" title="Claude Célestin ; 21 ans ; époux de Saint-Dizier Marie-Catherine" alt="">
<area shape="rect" coords="43,33,95,110" href="#claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_saint-dizier_20marie-catherine_" title="Saint-Dizier Marie-Catherine ; 24 ans ; épouse de Claude Célestin" alt="">
</map>
<div class="miniatures">
<div class="ligneminiatures">
<div class="miniature" id="claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_claude_20c_e9lestin_">
<img src="claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_claude_20c_e9lestin_mi.jpg" border="0" width="81" height="81" alt="">
<p>1 Claude Célestin</p>
<p><a href="mailto:yves.bruant@magic.fr?subject=Je donne des informations à propos du personnage Claude Célestin, ref claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_claude_20c_e9lestin_mi.jpg">Donner des informations à propos de ce personnage</a></p>
</div>
</div>
<div class="ligneminiatures">
<div class="miniature" id="claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_saint-dizier_20marie-catherine_">
<img src="claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_saint-dizier_20marie-catherine_mi.jpg" border="0" width="81" height="81" alt="">
<p>2 Saint-Dizier Marie-Catherine</p>
<p><a href="mailto:yves.bruant@magic.fr?subject=Je donne des informations à propos du personnage Saint-Dizier Marie-Catherine, ref claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_saint-dizier_20marie-catherine_mi.jpg">Donner des informations à propos de ce personnage</a></p>
</div>
</div>
</div>
</div>


</body>
</html>

Voici en exemple le code généré pour le portrait ci-dessous à droite :

Claude Célestin
21 ans
époux de Saint-Dizier Marie-Catherine

Donner des informations à propos de ce personnage

<html>
<head>
<title>Claude Célestin</title>
<meta name="generator" content="Quisontils">
<style type="text/css">
/* début des styles pour Quisontils */
#portrait img { border:6px ridge #ff0000; }
#portrait p { margin: 1em 0 0 1em; font-family: Verdana; font-size: 12pt; }
#portrait p a { font-family: Verdana; font-size: 7pt; }
#portrait p a:link { text-decoration: none; }
#portrait p a:hover { text-decoration: underline; }
#portrait p a:visited { text-decoration: none; }
#portrait ul { list-style-type: none; margin: 1em 0 0 1em; padding: 0; }
#portrait li { }
#portrait .nom { font-weight: bold; color: red; }
#portrait .age { font-style: italic; }
#portrait .union { }
#portrait .obs { }
#portrait .url { color: blue; }
/* fin des styles pour Quisontils */
</style>
</head>
<body>


<div id="portrait">
<img src="claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_claude_20c_e9lestin_po.jpg" border="0" width="408" height="408" alt="">
<ul>
<li class="nom">Claude Célestin</li>
<li class="age">21 ans</li>
<li class="union">époux de Saint-Dizier Marie-Catherine</li>
</ul>
<p><a href="mailto:yves.bruant@magic.fr?subject=Je donne des informations à propos du personnage Claude Célestin, ref claude_20c_e9lestin_20__20saint-dizier_20marie-catherine_2001_claude_20c_e9lestin_po.jpg">Donner des informations à propos de ce personnage</a></p>
</div>


</body>
</html>

Notez qu'il y a dans le code généré la définition des styles utilisés (ci-dessus en vert). On peut en option ne pas générer les styles, notamment quand ils sont fournis par le code de la page qui l'englobe.

Exemple de code à utiliser pour les Fichiers HTML d'en-tête

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<link href="votre_style.css" rel="stylesheet" type="text/css">
</head>
<body>

Quisontils recherche la ligne <title></title>. Si elle est trouvée telle quelle, sans rien entre la balise de début et de fin, le titre de le photo (ou le nom du personnage selon que l'en-tête se réfère à une photo ou un portrait) y sera inséré.

Une des principales raison d'ajouter cet en-tête, en plus de respecter les standards du W3C et de pouvoir ajouter votre propre code HTML, est de pouvoir préciser votre propre feuille de style. C'est la ligne <link href="votre_style.css" rel="stylesheet" type="text/css"> qui le permet (vous remplacez "votre_style.css" par le nom de votre feuille de style). Si vous n'en voulez pas, commentez-la ou supprimez-la, mais évitez de la laisser telle quelle.

Si vous laissez cochée la case Génère les styles, ceux-ci sont insérés juste avant la balise .

Si vous créez votre feuille de styles, vous devez y incorporer les styles utilisés par Quisontils :

Il sort du cadre de cette aide d'expliquer et le fonctionnement des styles, et l'usage des différents sélecteurs (id et classes) définis ci-dessus. Consultez le source des exports pour voir comment ils sont exploités.

Si vous optez pour votre propre feuille de styles, vous pourrez vous y livrer aux adaptations liées à vos besoins ou votre fantaisie en modifiant ou ajoutant des attributs aux différents sélecteurs. C'est le seul moyen de ne pas subir les styles auto-générés par Quisontils.

Par défaut, Quisontils utilise les balises suivantes :

Exemple de code à utiliser pour les Fichiers html de pied

</body>
</html>

Rien de particulier à dire sur ce fichier. C'est exactement ce que Quisontils utilise par défaut.

Génération du code pour des courriels

Lors de la génération du code pour un courriel, le chemin d'accès à la photo doit être absolu de manière à ce que le logiciel de messagerie puisse la trouver.

Notez que dans le cas de l'export pour courriel, il ne peut y avoir de miniatures ni de portraits, et aucune en-tête ni pied ne sont ajoutés. En revanche, les styles sont générés dans le corps du fichier.

Toutefois, tout n'est pas parfait dans le monde des courriels. Selon le programme que vous allez utiliser (Outlook, Outlook Express, Eudora, Thunderbird...), la façon de créer le message sera différente, et le résultat à la réception pourra varier.

Voici la procédure à suivre pour intégrer le code exporté par Quisontils dans un courriel Outlook Express 6 :

Testez les paramètres d'export à l'aide du bouton Voir l'export ,
Assurez-vous que le choix du chemin d'accès au fichier photo est bien absolu,
Si ce n'est déjà fait, ouvrez Outlook Express, et démarrez un message
Commencez le message en sélectionnant Format / Texte enrichi (HTML),
Tapez l'objet et le texte du message,
Positionnez le curseur de saisie à l'endroit voulu où importer le code (le mieux est en début d'une ligne vide ),
Via le menu Insertion, utilisez le choix Texte du fichier..., précisez le répertoire contenant les fichiers exportés, et faites un double clic sur le fichier HTML (sélectionnez ce type),
C'est tout, il n'y a plus qu'à envoyer le message !
Nota : Je vous recommande de faire quelques essais en vous envoyant des messages.

Voici la procédure à suivre pour intégrer le code exporté par Quisontils dans un courriel Outlook :

Testez les paramètres d'export à l'aide du bouton Voir l'export ,
Assurez-vous que le choix du chemin d'accès au fichier photo est bien absolu,
Si ce n'est déjà fait, ouvrez Outlook, et démarrez un message,
Tapez l'objet et le texte du message,
Commencez le message si besoin,
Positionnez le curseur de saisie à l'endroit voulu où importer le code (le mieux est en début d'une ligne vide ),
Via le menu Insertion, utilisez le choix Fichier..., sélectionnez le fichier html qui vient d'être créé dans le répertoire ExportWeb de Quisontils, et cliquez sur l'option Insérer comme texte du bouton Insérer,
C'est tout, il n'y a plus qu'à envoyer le message !
Nota : Je vous recommande de faire quelques essais en vous envoyant des messages.
Nota : Je n'ai pas réussi dans le cas où c'est Word l'éditeur, mais je n'y ai pas passé beaucoup de temps.

Voici la procédure à suivre pour intégrer le code exporté par Quisontils dans un courriel Thunderbird :

Testez les paramètres d'export à l'aide du bouton Voir l'export ,
Ouvrez le fichier html qui vient d'être créé dans le répertoire ExportWeb de Quisontils à l'aide d'un éditeur de texte, par exemple le Bloc-Notes et sélectionnez et copiez tout (<Ctrl><A><Ctrl><C>),
Dans Thunderbird, ouvrez un nouveau message,
Cliquez sur le menu Insérer / HTML... et collez le contenu du presse-papier dans le champ Entrez le texte et les balises HTML (<Ctrl><V>),
Cliquez sur le bouton Insérer,
C'est tout, il n'y a plus qu'à envoyer le message !.
Nota : Je vous recommande de faire quelques essais en vous envoyant des messages.
Nota : Si vous lisez le message dans Thunderbird, vous ne verrez hélas pas les noms par survol de la souris. C'est pourquoi pour vos tests, lisez le message avec Outlook, là, ça marche.

Pour les autres programmes de courriels :

forums de Quisontils