Files
parenthese/landing/public/arbre-genealogique-avec-photos/index.html
T
IliesAllaliandClaude Opus 5.5 fcfb7d1494 Landing : pages préchargées au survol d'un lien (speculationrules)
- Règles de préchargement dans l'accueil et les 15 guides : une page du site est préparée quand on survole
  son lien (appui sur téléphone), et s'ouvre presque tout de suite. Pages seulement, pas les fichiers ;
  l'application n'est pas concernée. Ignoré par les navigateurs qui ne connaissent pas ces règles.
- Une page préchargée ne compte pas de visite avant d'être vraiment ouverte (PostHog attend
  prerenderingchange), et l'animation du logo se joue à l'ouverture, pas pendant le préchargement.
- CSP de la landing (deploy/nginx.conf) : empreinte des règles, et nouvelle empreinte du script du logo.
  Le mot-clé 'inline-speculation-rules' ne suffisait pas à Chrome.
- Test : chaque script en ligne des pages a son empreinte dans la CSP, chaque page a ses règles.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-27 18:05:12 +01:00

136 lines
10 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#FBFAF7" />
<title>Faire un arbre généalogique avec photos, vidéos et voix</title>
<meta name="description" content="Comment faire un arbre généalogique avec des photos. Lesquelles choisir, comment les numériser, où les mettre pour que la famille les voie, et comment y ajouter les vidéos et les voix." />
<link rel="canonical" href="https://parenthese.io/arbre-genealogique-avec-photos/" />
<link rel="alternate" hreflang="fr" href="https://parenthese.io/arbre-genealogique-avec-photos/" />
<link rel="alternate" hreflang="en" href="https://parenthese.io/en/family-tree-with-photos/" />
<link rel="alternate" hreflang="x-default" href="https://parenthese.io/arbre-genealogique-avec-photos/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Parenthèse" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:url" content="https://parenthese.io/arbre-genealogique-avec-photos/" />
<meta property="og:title" content="Faire un arbre généalogique avec photos, vidéos et voix" />
<meta property="og:description" content="Lesquelles choisir, comment les numériser, où les mettre pour que la famille les voie." />
<meta property="og:image" content="https://parenthese.io/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="/fonts/fonts.css" />
<link rel="stylesheet" href="/guides.css" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "HowTo",
"name": "Faire un arbre généalogique avec des photos",
"inLanguage": "fr-FR",
"step": [
{ "@type": "HowToStep", "name": "Rassembler", "text": "Réunir les photos existantes, en papier et en numérique, et noter qui est sur chacune tant que quelqu'un le sait encore." },
{ "@type": "HowToStep", "name": "Numériser", "text": "Photographier ou scanner les tirages papier à plat, en lumière du jour, sans flash, à 300 dpi pour un scanner." },
{ "@type": "HowToStep", "name": "Nommer et dater", "text": "Une photo sans nom ni date perd sa valeur en une génération. Écrire les deux au moment de l'ajouter." },
{ "@type": "HowToStep", "name": "Placer chaque photo sur la bonne personne", "text": "Dans un arbre numérique, chaque personne porte ses propres photos, vidéos et enregistrements." },
{ "@type": "HowToStep", "name": "Partager", "text": "Envoyer le lien à la famille pour qu'elle complète, corrige et ajoute ses propres images." }
]
},
{
"@type": "FAQPage",
"mainEntity": [
{ "@type": "Question", "name": "Comment faire un arbre généalogique avec des photos ?", "acceptedAnswer": { "@type": "Answer", "text": "Rassemblez les photos, numérisez les tirages, nommez et datez chacune, puis placez-les sur la fiche de la bonne personne dans un arbre numérique que la famille peut ouvrir par un lien. Un modèle à imprimer ne tient qu'une photo par case et se fige le jour de l'impression." } },
{ "@type": "Question", "name": "Où créer gratuitement un arbre généalogique avec une photo ?", "acceptedAnswer": { "@type": "Answer", "text": "Parenthèse est gratuit, et le restera. Chaque personne de l'arbre peut porter plusieurs photos, des vidéos et des enregistrements audio, et l'arbre se partage par un lien." } }
]
}
]
}
</script>
<!-- Pages du site préparées en avance quand on survole un lien (appui sur téléphone) : elles s'ouvrent presque
tout de suite. Seulement les pages, pas les fichiers ; l'application (app.parenthese.io) n'est pas concernée.
Un navigateur qui ne connaît pas ces règles les ignore. -->
<script type="speculationrules">{"prerender":[{"where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":"/*.*"}}]},"eagerness":"moderate"}]}</script>
</head>
<body>
<header class="top">
<div class="wrap">
<a class="brand" href="/" aria-label="Parenthèse, accueil">
<img src="/logo.svg" alt="" width="166" height="22" />
</a>
<a class="btn" href="https://app.parenthese.io/?account=register&amp;source=guide-photos">Créer mon arbre</a>
</div>
</header>
<main>
<article class="wrap">
<span class="eyebrow">Guide</span>
<h1>Faire un arbre généalogique avec des photos</h1>
<p class="lead">Un arbre sans visages est une liste de noms. Avec les photos, les vidéos et les voix, il devient ce que la famille regarde vraiment. Voici comment s'y prendre, des boîtes à chaussures au lien partagé.</p>
<h2>1. Rassembler avant de trier</h2>
<p>Les photos sont réparties entre plusieurs maisons, plusieurs téléphones, plusieurs générations. Demandez à chacun de vous envoyer ce qu'il a, sans trier. Le tri vient après, et il se fait mieux quand on voit tout.</p>
<p>Faites-le vite pour les tirages papier des plus âgés. La question qui compte n'est pas « est-ce une belle photo » mais « qui sait encore qui est dessus ». Asseyez-vous avec la personne qui sait, et notez au dos ou sur une feuille les noms, le lieu, l'année approximative, ce qui se passait ce jour-là.</p>
<h2>2. Numériser sans matériel</h2>
<p>Un téléphone suffit. Posez la photo à plat près d'une fenêtre, sans flash, l'appareil parallèle au tirage, et prenez la vue un peu plus large que la photo pour la recadrer ensuite. Les applications de numérisation (Google PhotoScan, Notes sur iPhone, Adobe Scan) corrigent les reflets en assemblant plusieurs prises.</p>
<p>Avec un scanner, 300 dpi suffisent pour un tirage 10 × 15 ; montez à 600 dpi pour les petits formats anciens que vous voudrez agrandir. Gardez l'original numérisé tel quel, et faites vos retouches sur une copie.</p>
<h2>3. Nommer et dater tout de suite</h2>
<p>Une photo sans nom ni date perd sa valeur en une génération. C'est la seule règle qui n'a pas d'exception. Au moment où vous ajoutez une image dans l'arbre, écrivez qui est dessus, où, quand, et une ligne sur le contexte. Trente secondes maintenant, ou une énigme pour vos petits-enfants.</p>
<h2>4. Une photo par case, ou une vie par personne ?</h2>
<p>Les modèles d'arbre à imprimer, les cadres muraux et les affiches personnalisées tiennent une photo par personne. C'est un bel objet à offrir, et il se fige le jour de l'impression. Rien ne s'y ajoute.</p>
<p>Dans un arbre numérique, chaque personne porte tout ce qu'on sait d'elle, plusieurs photos à différents âges, une vidéo de mariage, un enregistrement de sa voix, une anecdote racontée par un cousin. Et l'arbre continue de grandir quand la famille y ajoute les siennes.</p>
<div class="note">
<p><strong>Les deux ne s'opposent pas.</strong> Faites l'arbre numérique d'abord, il servira de source pour imprimer une belle version murale le jour où vous voudrez l'offrir.</p>
</div>
<h2>5. Ajouter les vidéos et les voix</h2>
<p>La voix est ce qui manque le plus vite. Une grand-mère qui raconte comment elle a rencontré son mari, enregistrée trois minutes avec un téléphone posé sur la table, vaut plus que dix photos. Posez une question simple, laissez parler, n'interrompez pas. Les vidéos de fêtes, même tremblantes, ont la même valeur, ce sont les gestes et les rires que personne ne sait décrire.</p>
<p>Dans Parenthèse, chaque personne peut porter des photos, des vidéos, des enregistrements audio, des documents et des citations. Ils entourent son portrait dans l'arbre, et s'ouvrent d'un clic.</p>
<h2>6. Partager, pour que les autres complètent</h2>
<p>Un arbre que vous êtes seul à alimenter s'arrête à ce que vous savez. Envoyez le lien à la famille. Avec Parenthèse, ils consultent sans créer de compte ; avec le mot de passe de contribution, ils proposent leurs photos et leurs corrections, et vous validez, ou vous laissez passer directement si vous préférez. Les cousins éloignés sont souvent ceux qui ont la photo qui manque.</p>
<h2>Questions fréquentes</h2>
<div class="faq">
<details>
<summary>Comment faire un arbre généalogique avec des photos ?</summary>
<p>Rassemblez, numérisez, nommez et datez, puis placez chaque photo sur la fiche de la bonne personne dans un arbre numérique que la famille ouvre par un lien. Un modèle à imprimer ne tient qu'une photo par case.</p>
</details>
<details>
<summary>Où créer gratuitement un arbre généalogique avec des photos ?</summary>
<p>Parenthèse est gratuit, et le restera. Chaque personne peut porter plusieurs photos, des vidéos et des enregistrements, et l'arbre se consulte sans compte.</p>
</details>
<details>
<summary>Quel format et quelle taille pour les photos ?</summary>
<p>JPEG ou HEIC tels que sortis du téléphone, sans compression supplémentaire. Parenthèse redimensionne lui-même pour l'affichage et garde l'original en qualité haute pour l'agrandissement.</p>
</details>
</div>
<section class="cta">
<h2>Commencez par les visages</h2>
<p>Un compte, un nom de famille, et vous invitez les vôtres par un lien.</p>
<a class="btn" href="https://app.parenthese.io/?account=register&amp;source=guide-photos">Créer mon arbre</a>
</section>
</article>
</main>
<footer>
<div class="wrap">
<span>Parenthèse · <a href="/">parenthese.io</a> · <a href="/en/family-tree-with-photos/" hreflang="en" lang="en">English</a></span>
<nav aria-label="Guides">
<a href="/comment-faire-un-arbre-genealogique/">Comment faire un arbre généalogique</a>
<a href="/arbre-genealogique-a-remplir/">Arbre généalogique à remplir</a>
<a href="/application-arbre-genealogique/">Quelle application choisir</a>
<a href="/raconter-histoire-de-famille/">Raconter l'histoire de sa famille</a>
<a href="/cousinade/">Organiser une cousinade</a>
<a href="/donnees-et-vie-privee/">Données et vie privée</a>
</nav>
</div>
</footer>
</body>
</html>