Today I’m introducing a new project on my Projects page; HTML Family Tree – A simple page to show and navigate a family tree.
I spent a lot of time this winter scanning old slides from my grandparents. As I did so I began to see a lot of unfamiliar faces. Many of these unfamiliar faces were related to me but I didn’t know their name, or to whom they were connected, etc. It turns out some members of my father’s family had taken the time to build a family tree in the past and I had a copy of it. So I reached into my closet and began matching up the names as best I could.
But this wasn’t enough for me. I wanted a way to navigate the family tree. I also saw pretty quickly that the family tree that I had was already very out of date. So rather than try to extend the paper version I decided I needed an easier to update virtual version.
So I’m now using a modified version of HTML Family Tree to keep track of my growing family. I’m beginning to extend it into multiple family trees through separate branches in the family. Doing this work, on top of the scanning and editing that I was doing, has given me a much closer intimacy with the greater part of my extent family members as well as those that are no longer living.
I thought perhaps others could use it to markup their family trees.
A few notes:
- I started out trying to separate the presentation and data layers of this project by first marking up the family tree in an OPML file. But I quickly realized that writing OPML is very similar to writing HTML. So I went straight HTML.
- The overall display of the tree was forked from thecodeplayer’s CSS3 demo (see readme)
- I sprinkled in some JavaScript, reluctantly using jQuery, to add some interaction to the tree and also to make the page much more friendly to move around and keep the part of the tree you’re working with in view
I took the time to rip out the best of my family and open source it so that perhaps others can help extend it should they use it. I’d like to make it far more mobile friendly, separate the data from the HTML, and add more information to a person’s profile than just their name and date of birth.
Enjoy!