Chronique familiale




La chronique familiale pas à pas

Si vous n'êtes pas Premium

 

 Choisir un hébergeur


Si vous n'êtes pas Premium, vous n'aurez pas d'autre choix 1 que d'héberger vos images sur un site extérieur à Geneanet et de récupérer ensuite les adresses 2 de celles-ci pour venir l'insérer dans votre chronique.


Soyez extrêmement vigilant dans le choix de cet hébergeur.

En effet, s'il s'agit seulement d'y déposer des images, vous pouvez vous contenter d'un gratuit et il y en a pléthore sur le web, mais :

- certains disparaissent aussi vite qu'ils sont apparus ; la longévité est donc un critère de choix ;

- d'autres suppriment vos photos après un certain délai sans consultation de celles-ci, qui peut-être très bref (60 jours parfois) ; inutile de dire qu'ils sont à fuir, on construit une chronique pour qu'elle soit pérenne ;

- des hébergeurs par ailleurs pleins de qualités sont uniquement en anglais, ce qui pour certains d'entre-nous peut être rédhibitoire ;

- chez quelques-uns, peu "professionnels", les serveurs sont régulièrement en panne ou inaccessibles et on n'a donc pas d'accès aux images pendant ces coupures ;

- enfin les plus sommaires ont des contraintes de taille de documents et de capacité de stockage qui les rendent peu intéressants.


Voilà un bref résumé des points à vérifier avant de choisir un hébergeur. Et si vous avez quelques doutes n'hésitez pas, même si c'est rébarbatif, à lire les CGU avant de vous inscrire.

Enfin méfiez-vous des comparatifs qui paraissent régulièrement sur le web. Outre le fait qu'il faut veiller à ce qu'ils soient le plus récents possible, ils ne sont pas toujours rédigés avec rigueur et pas forcément selon des critères qui sont les vôtres.

 

 Récupérer l'adresse de l'image


L'adresse que vous devez récupérer selon des modalités qui sont propres à chaque hébergeur devra ressembler à ceci :

https://... adresse... JPG.

L'extension .JPG, .BMP, .GIF, etc. est toujours présente en fin d'adresse, quel que soit l'hébergeur et dépend du format d'enregistrement de l'image. Elle peut être selon les cas en majuscules ou minuscules.

Ne prenez que l'adresse d'une image entière (correspondant au modèle ci-dessus) et pas dans les formats destinés aux forums, réseaux sociaux, etc. c'est à dire sans [url], <url>, < a href=...>, <iframe>, [IMG] et autres fioritures.
Ne prenez pas non plus l'adresse d'images miniatures ou de vignettes, comportant souvent le mot "thumb" dans l'intitulé.


Voici une astuce pour savoir s'il s'agit du bon format d'adresse :

Ouvrez un nouvel onglet de votre navigateur et collez l'adresse de votre image dans la barre d'adresse. À l'ouverture de la page, votre image doit s'afficher (et uniquement elle) au format sous lequel vous l'avez hébergée. Si c'était à une taille supérieure à celle de l'écran, elle occupera selon les cas toute la hauteur ou la largeur de celui-ci, une loupe apparaîtra au survol et vous permettra de l'agrandir.


 

 Mettre l'image sur la chronique


Le lien (l'adresse) que vous avez récupéré n'est pas utilisable en l'état et nous allons donc devoir l'insérer dans une balise, en l'occurrence la balise <img>3 avec l'attribut src (pour source) comme ceci :

<img src="https://... adresse... JPG">

 

 Texte alternatif

Le texte alternatif 4 sert à donner un texte de remplacement à l'affichage des images. Nous affecterons donc ce texte à l'image avec l'attribut alt (pour alternative text en anglais). Mettez dans cet attribut un texte précis qui décrive l'image ou sa fonction. Par exemple :

<img src="https://...adresse ...JPG"alt="Vue à travers les pins des aiguilles de Bavella au coucher du soleil">

 

 Titre de l'image

Le titre de l'image est l'infobulle qui s'affichera au survol de celle-ci, comme ici (mettez le curseur de la souris sur l'image) :

image avec un titre


Le logiciel qui gère les images déposées sur Geneanet (si vous êtes Premium) confond allègrement texte alternatif et titre de l'image et utilise le même texte pour les deux. Il va de soi que le titre n'a pas à décrire l'image mais uniquement à la légender, comme ci-dessus, puisqu'il est destiné aux gens jouissant de facultés visuelles normales.

Il ne sera donc pas nécessaire de mettre un titre dans le code de votre image si elle dispose déjà d'une légende. Si cependant vous souhaitez le faire, il faudra utiliser l'attribut title comme ceci :

<img src="https://... adresse... JPG" alt="..."title="Les aiguilles de Bavella">

 

 Taille de l'image

Si vous souhaitez modifier la taille d'origine de l'image, il vous faudra utiliser les attributs width (pour largeur en anglais) ou height (pour hauteur en anglais). Ne spécifiez qu'une seule dimension (celle que vous souhaitez privilégier, le navigateur calculera automatiquement l'autre en conservant les proportions). Comme ceci par exemple :

<img src="https://... adresse... JPG" alt="..." width="450">

et si l'image d'origine mesurait 750 x 500 pixels, le navigateur affichera automatiquement une image de 450 x 300 pixels.

Notez qu'il est inutile de spécifier l'unité, il s'agira toujours de pixels, puisque, même si les navigateurs et Geneweb reconnaissent encore les autres unités, le HTML5 n'admet plus que les pixels pour les attributs width et height de la balise <img>.

Et donc si vous souhaitez affecter une autre unité (par exemple un pourcentage) à cette balise, il faudra lui appliquer un style avec les propriétés width ou height. Comme ceci par exemple :

<img src="https://... adresse... JPG" alt="..." style="width:30%;">

Et l'image occupera 30% de la largeur du contenant.

 

  Alignement de l'image

Le logiciel GeneWeb 5 utilise pour définir l'alignement des images (dans le cas des membres Premium) des attributs 6 qui sont dépréciés et qu'il vaut donc mieux ne pas employer.

Nous allons donc utiliser la balise <div>...</div>7


 Alignement à gauche

Avec la balise <div> nous emploierons l'attribut style, la propriété float et la valeur left (pour gauche en anglais), ainsi que la propriété padding (pour rembourrage en anglais) qui va spécifier une marge en pixels autour de l'image. Voici le code :

<div style="float:left; padding:20px;"><img src="https://... adresse... JPG" alt="..." width="200"></div>

L'image sera alignée le long de la marge gauche. Le texte se situera à droite dans la place restante. Il sera cependant nécessaire de mettre ce texte en page pour obtenir une présentation soignée (justifié par exemple comme dans l'exemple suivant) :

Alignement de l'image à gauche ↗

On s'aperçoit que l'image est bien alignée à gauche et séparée du bord et du texte (verticalement et horizontalement) par une marge de 20 pixels que j'ai spécifiée. Le texte est situé à droite de l'image et continue sur toute la largeur après avoir dépassé le bas de cette dernière.


 Alignement à droite

Nous emploierons la valeur right (pour droite en anglais). Voici le code :

<div style="float:right; padding:20px"><img src="https://... adresse... JPG" alt="..." width="200"></div>

L'image sera alignée le long de la marge droite. Le texte sera situé à gauche de l'image dans la place laissée libre par celle-ci et continuera au-dessous sur toute la largeur :

Alignement de l'image à droite ↗

 

 Centrer l'image dans la page

Nous utiliserons la balise <div> avec la propriété margin et la valeur auto8.

Cette valeur va spécifier au navigateur de créer des marges égales à droite et à gauche (centrer la balise <div>) à la condition d'avoir affecté une largeur à celle-ci.
On reprendra donc la largeur de l'image dans la propriété width (en spécifiant bien le type d'unité, ici "px") et le code se présentera comme ceci :

<div style="width:400px; margin:auto; padding:20px"><img src="https://... JPG" alt="..." width="400"></div>

Et vous obtenez ceci : Image centrée dans la page ↗


 Dans le corps du texte

Vous pouvez également insérer votre image n'importe où dans un texte, en plaçant le code au milieu du texte, comme ici :

insertion dans le corps du texte



Voici ce que vous obtenez (ici avec un alignement à gauche) :

Image dans le corps du texte ↗

 

 Notes

 
1. On pourra m'objecter qu'il est possible d'héberger des images sur le site Geneanet dans Mes documents ↗ et d'en récupérer l'adresse 2 grâce à une bidouille assez simple. C'est vrai mais ces dépôts sont destinés à être rattachés à des fiches individuelles et pas insérés dans la chronique.
Geneanet gère donc l'adressage (auquel vous n'avez pas d'accès direct) et la liaison de ces documents avec la fiche concernée. Il suffit que Geneanet modifie ce système d'adressage, même si c'est peu probable, pour que les adresses que vous auriez récupérées deviennent invalides. Il est donc prudent si on n'est pas Premium d'héberger ses images d'une autre manière.

Cependant, pour ceux qui voudraient malgré tout user de cette possibilité, cette page ↗ vous explique comment récupérer l'adresse des images dans "Mes documents".
 
2. Par adresse, il faut entendre la chaîne de caractères qui mène vers cette image et permet de l'afficher. Elle se présentera toujours sous la forme : https://... adresse... JPG. L'extension .JPG, .BMP, .GIF, etc. dépendra du format d'enregistrement de l'image et pourra être selon l'hébergeur en minuscules ou majuscules.

Exemple (cliquable celui-ci) : https://gw.geneanet.org//file/genewebfile/o/s/oscar32/Corse/clocher.JPG
 
3. La balise <img> comporte seulement une balise ouvrante, il n'existe pas de balise fermante </img>.
 
4. Le texte alternatif a deux fonctions essentielles :

- remplacer l'image lorsque celle-ci ne peut être affichée pour des raisons techniques ;

- annoncer le contenu de l'image ou sa fonction aux personnes souffrant de troubles visuels et qui de ce fait ne la voient pas.

Ne serait-ce que pour cette dernière raison, essayez de toujours mettre un texte alternatif.

Exemple de rendu d'un : Texte alternatif ↗

 
5. GeneWeb ↗ est un logiciel de généalogie libre et gratuit développé par Daniel de Rauglaudre ↗. Il peut être utilisé sur un ordinateur sans connexion internet à l'instar des autres logiciels de généalogie, mais également en ligne à travers le site Geneanet qui l'utilise pour gérer les arbres généalogiques hébergés sur son site.
Parmi les fonctions que propose GeneWeb on trouve la gestion des notes individuelles (par fiche) ou globales, appelées "Chronique familiale" par Geneanet.
 
6. Il s'agit des attributs align, hspace et vspace qui, bien qu'ils soient encore (pour l'instant) interprétés par les navigateurs, sont dépréciés.
 
7. La balise <div> (pour division du document) crée dans la page un conteneur, une "boite" au contenu de laquelle on peut affecter un style. Nous consacrerons plus loin dans le tutoriel une page à cette balise.
 
8. Nous pouvons également, comme nous l'avons fait dans le cas des Premium, utiliser tout simplement la balise <p>.

Voir ici : Alignement par défaut ↗



───── oOo ─────


Index des pages