Un petit défi : arbre généalogique vertical

Bonjour !

Je travaille sur un projet de site perso généalogique. Je cherche à créer une représentation graphique d'un arbre généalogique simple (3 ou 4 générations), tel qu'on les imagine couramment :



(en plus simple, par exemple juste les noms & prénoms). Sémantiquement ce ne sont à priori que de bêtes listes imbriquées de ce genre :

- personne 1
---- père
-------- grand-père
-------- grand-mère
---- mère
-------- grand-père
-------- grand-mère

Après avoir pas mal googlé et un peu bidouillé, j'arrive à faire (et à comprendre) ce genre de choses : tableless css pedigree

Mais en vertical, IMPOSSIBLE. Et je ne vous parle pas de mettre les traits , d'autant que je ne suis pas (encore ) une gourou du CSS.

Le tout évidemment valide, accessible, joli, en trois lignes de code, en pur XHTML/CSS, digne de l'oscar du CSS, quoi

Alors voilà, je me suis dit que vous pourriez trouver ce genre de défis intéressants ou juste m'aider un peu en me mettant sur la voie...

Merci !!!
Modifié par mistike (30 Nov 2008 - 23:55)

Bonjour,

Voilà typiquement le genre de chose qui rendra très bien avec un graphique en image (avec une meilleure résolution que celui que tu donnes pour exemple, où le texte est peu lisible), et une transcription en mode texte placée après le graphique.

Ce n'est que mon avis, mais faire autrement serait beaucoup d'emmerdes pour un résultat pas terriblement accessible.

Alors qu'avec une transcription textuelle du graphique, le défi se déplace du côté de la rédaction, et finalement ce n'est pas plus mal. Ça fera deux modes de restitution: un mode de restitution textuel rédigé (voire un texte automatisé d'après les informations d'une base de données, ça aussi ça peut être intéressant à penser), et un mode graphique. Au moins un des deux modes sera consultable par tout utilisateur.

PS: Je n'esquive pas la difficulté: CSS n'est tout simplement pas un langage de dessin de graphiques. Et la sémantique HTML ne permet pas de décrire convenablement les relations d'un graphique.
Modifié par Florent V. (01 Dec 2008 - 00:20)

Florent V. a écrit :
Bonjour,

Voilà typiquement le genre de chose qui rendra très bien avec un graphique en image (avec une meilleure résolution que celui que tu donnes pour exemple, où le texte est peu lisible), et une transcription en mode texte placée après le graphique.

Ce n'est que mon avis, mais faire autrement serait beaucoup d'emmerdes pour un résultat pas terriblement accessible.

Tu n'as pas complètement tort, mais le but étant de les générer de façon dynamique. J'avais bien pensé à faire ça en php avec une librairie qui-va-bien (GD ?), mais je ne connais pas assez bien. A première vue, le CSS me semblait une bonne manière de procéder... mais depuis j'ai cherché et un chouilla changé d'avis :-p

Florent V. a écrit :

Alors qu'avec une transcription textuelle du graphique, le défi se déplace du côté de la rédaction, et finalement ce n'est pas plus mal. Ça fera deux modes de restitution: un mode de restitution textuel rédigé (voire un texte automatisé d'après les informations d'une base de données, ça aussi ça peut être intéressant à penser), et un mode graphique. Au moins un des deux modes sera consultable par tout utilisateur.

C'est exactement ce que je cherche à faire. J'ai la base, j'ai les données, j'ai prévu la partie textuelle (bien plus détaillée que le dessin). La question est : quel est le meilleur moyen de générer ce ##### de graphique ?

Florent V. a écrit :

PS: Je n'esquive pas la difficulté: CSS n'est tout simplement pas un langage de dessin de graphiques. Et la sémantique HTML ne permet pas de décrire convenablement les relations d'un graphique.

Hum. Vu comme ça... alors quoi ? Tu me dis déscription de données, je pense... XML peut-être ? Là ça sort totalement de ce que je connais, mais je ne suis pas contre apprendre, bien au contraire !!!!

J'ajoute qu'à force de chercher et de tester, j'en arrive aussi à me dire que CSS et XHTML ne sont pas forcément les outils adaptés à ce genre de rigolades, malgré ce qu'on pourrait croire à première vue (des listes ordonnées ou non, et des blocs à placer).

Je suis aussi preneuse de pistes sur un outil mieux adapté car je ne connais pas les autres "technologies du web 2.0" (XML, AJAX, etc...)
Modifié par mistike (01 Dec 2008 - 00:32)

mistike a écrit :
Je suis aussi preneuse de pistes sur un outil mieux adapté car je ne connais pas les autres "technologies du web 2.0" (XML, AJAX, etc...)

Pour une présentation largement compatible et accessible, image (ou éventuellement animation Flash générée dynamiquement à partir d'une base de données ou d'un fichier XML) + texte c'est encore ce qui se fait de mieux. Ensuite on peut chercher, en supplément, du côté du Web sémantique.

http://www.google.fr/search?q=rdf+genealogy

Florent V. a écrit :

Pour une présentation largement compatible et accessible, image (ou éventuellement animation Flash générée dynamiquement à partir d'une base de données ou d'un fichier XML) + texte c'est encore ce qui se fait de mieux. Ensuite on peut chercher, en supplément, du côté du Web sémantique.

http://www.google.fr/search?q=rdf+genealogy

Merci !!! Je n'avais jamais entendu parler de RDF, ça a l'air super intéressant... là tu viens de m'ouvrir les portes d'un monde nouveau :-p

Bon j'ai pas encore tout compris mais je vais m'y pencher sérieusement, je sens que XML/XLS et RDF vont occuper certaines de mes soirées d'hiver

Si jamais certaines personnes arrivent sur ce post par un moteur de recherche, voici un article passionnant sur la modélisation RDF des données généalogiques (via GEDCOM)

Intéressant en effet le RDF, sinon en Css voici un exemple d'arbre :
http://www.amaryllidaceae.org/web-jardin/bota-web/arbre.htm. à toutes fins utiles.