Genealogy websites 2011

One returning from my Christmas break I started to think about a suitable blog with which to start the New Year. Initially I thought about a review of 2010, but then we've done that and got the T-shirt! So, how about 2011, and what will it bring? Since my main interests are genealogy and creating websites, the exciting happenings in website development, and the possible effects on our websites is an obvious. But first, I would like you to look at The Wilderness Years to do so you will need lots of memory and preferably the Google Chrome Browser, if you haven't got it, it is worthwhile downloading for this site alone. It will just about run on the latest Firefox (but not well), and I could not get it to run at all on the latest Beta version of IE9. When asked for your town, I would suggest that you enter a large city, or at least a place where Google Earth will have lots of photos.

Now that site is based on the new HTML5 coding, and I am not suggesting that it will have much effect on research sites such as Ancestry, or Findmypast, but I am certain that it will be used by people, like myself, who write their own websites. It will also be used in conjunction with another new language, CSS3, which is used to code the positioning and layout of the pages.

Will this affect the User?

Yes, it will! Already the latest browsers are starting to incorporate the functionality which they need in order to read HTML5 and CSS3. Chrome is probably the best at present but it is steadily being introduced into Firefox, Opera, IE9 and other major browsers. The figures below are taken from visitors to my own website.
1) Browsers used:

 

As might be expected IE is at the top of the list whilst at the bottom are the mobile phone browsers. In general, it is fair to say that non-IE users tend to be very dedicated in updating their browsers to the latest version, and IE users less so as the table below shows:

2) IE Users:

 

At last some three-quarters are now using IE8 but there is still over 5% using IE6 or earlier. Those users are going to have problems because only the latest browser will be able to read the new codings, and their problem is that little will be done to get the sites to display properly when using them. Even IE7 and IE8 users will not get the full benefit of the new technology, although the probability is that the sites will degrade gracefully for these users.

IE users with the XP operating system also have a big problem since it would seem that IE9 will only be available for Vista and Win7 operating systems - a change to Chrome could be their best option.

Website Generators

To generate my Pedigree web pages I use the HTML generator included in the Legacy Family Tree program. I still consider this to be the best program around for these types of web pages, but it is now getting old and tired as it is written in very basic HTML. It has received a boost with the publishing of a program from LTools which enables the conversion to CSS/HTML, but, in my view, will shortly need to be rewritten - this comment also applies to most similar programs.

The Future

This year promises to be one of the most exciting in website development for many years but for the new techniques to achieve their potential depends not only on the website developers but also relies on the users to upgrade their browsers and the software manufacturers to improve their generators - before we reinvent the wheel!!

Disclosure

The author is a volunteer beta tester for Legacy Family Tree.

© Ron Ferguson 2011

A Genealogy Gem for a Website

Ever since I launched my Ferguson One-Name website some 3 years ago, I have not been very happy with the Family Group style web pages compiled from Legacy, nor did I really like the output from TNG Software. So, I have regularly browsed the web to look for an alternative.

At last, I think I have found it in HuMo-gen which is made by Hubb Mons, who says: "I originally wrote this software for myself, because I was dissatisfied with the features of other Gedcom-to-HTML converters, but I readily offer HuMo-gen for use by the wider public". Exactly my thoughts!!

And furthermore it is free, open source software. What more could one ask for?!

You can select what to include on the Main Index (Opening Page), as shown below:

Whilst it is written in PHP, it is claimed that no knowledge of PHP or HTML is required in order to use the program. I agree, in fact anybody used to Wordpress will find it very easy.

This shows the options available from within the program, but with only a little knowledge of PHP and HTML one can easily customise this page to include other items, for example a picture of oneself, or maybe a brief description of the site. On this page there is also a Person Search Box.

It is possible to select various levels of permissions, for example one can limit the display of Sources, to say, oneself, or family etc. or, as I do, publish them for all to see, as on the right.


Clicking the filing card icon next to the name produces as a range of other options, such as different report formats, and a range of tree charts. From these charts clicking a name will go to the report for that person.

As can be seen, the sources on this screen are links and these lead to others who use this source.


I think that this software is relatively new, from the HuMo-gen website I would think around 2009, so are there any snags? Well, yes, but none are terribly important and most can easily be overcome, some are specific to its use with Legacy. Like similar programs which rely on importing GEDCOMs it suffers from the limitations of the long outdated technology of this format.

For my usage, the fields for the genealogy sources are too short, but should be easy to enlarge in the MySQL database (I haven't done this yet). The PHP scripts are, understandably, largely in Dutch which makes following them more difficult for those of us who do not speak this language (I am not monolingual btw.) and in the Sources List, the descriptions have yet to be translated, but nevertheless the meaning of them is pretty clear.

I recommend that anyone trying this program should first try it on their own PC and not the web. This involves installing a stand-alone server and the manual gives a full description of how to to this for XAMPP-lite. This also a free open-source application. Be prepared to do some work for yourself to get the output to that which you wish, but if you do hit problems the site has a Forum which I have found to be very responsive and helpful.

I have yet to put my site on-line using HuMo-gen, but only because I wish to fully familiarise myself with its workings, and I will do so at the end of December. To those, who like me, are not happy with what has been around for a while, I would say "give it a run".


© Ron Ferguson 2010

Your Genealogy Websites and Mobiles

From the day when mobile phones first came onto the market I have avoided them! I didn't want them intruding into my private life, and that of others in public areas. A definite No, No! However, technology catches up with us all, and for a while I have been watching the growth of the internet on mobiles. A month ago I asked a friend if I could view my home page on his mobile, only to see that it split! Nothing for it - I had to buy one, not an iphone, I might add, but an economical windows.

The image on the right shows my index page after I had made a number of changes to the coding and you may like to compare it with the PC version at My Website. In this view it is now not too bad, and can be scrolled to the left to see the off-screen portion, and if the phone is rotated to a horizontal position then it fits fine.

There are still some problems, the left hand column is pushed left, so is partly obscured by the background, and if the view is enlarged then the Guild of One-Name Studies blue logo pushes the footer down so that a brown background space appears.

Styling

The page was already built with the design being separate from the content using CSS, which fortunately makes changes easier, and there were quite a number to make. When designing the site I had only given consideration to the appearance when the width is not less than 800px, with mobiles we are talking about a maximum of 480px - quite a difference, and as a result the above is a compromise, as I was not willing to change the overall design of the PC version. For example the tree image is a background-image called by the CSS and not the HTML which means that its proportions relative to the space available cannot be changed, hence the left-hand column being partially obscured.

What I was able to do though, was to convert all the font and image sizes to ems so that they would change proportionately. Similarly the margins and spaces were also changed from pixels to ems and the overflow for the two columns was changed to "hidden". Unfortunately the Guild logo is already in place before the hidden statement kicks in, hence the brown space mentioned above.

The Problems

They are just presentational problems, but the main one is that mobiles do not have a hover state, which is unfortunate because my CSS based navigation comprises drop-down menus hidden in the blue bar, Sure, when the bar is tapped they drop-down OK, but they do not respond when tapped as the site is already on its merry way to the default link for each header! There is no way that I wish to change the navigation on the main site.

What Now

It is clear that the only way I can resolve the navigation is to write an app style navigation system to replace the drop-down menus for each of the sections for which they apply. It is a little more complex than this, though, as my main site has around 7000 pages which currently use my "blue bar" navigation I would like all to be accessible from a mobile. As far as I can see, this means that I am going to have to design a separate app style navigation linking back to the main and sub menus.

Comment

I hope that I might have given some thoughts which may help those considering a similar project, and would welcome comments on my proposed app style navigation.

© Ron Ferguson 2010

Website Update: Complete!

Finally my revised website is now up and running, and I would like to review some of the lessons which I learned during the process of revising a genealogy site with some 7000 - 8000 pages. This was the first major rewrite for 5 years, during which time coding techniques have changed, and visitors are looking for increasingly greater interaction and usability.

I started thinking about the design in November 2009, with the major changes being to the index pages and applying a common theme throughout the site. The headers for the Pedigree pages and some others I decided to leave, except for colour changes. I have said before, but I will repeat, design is not one of my strengths, so it took two or three weeks before I decided to use a scheme based on the colours of nature, mainly blue, green and brown, with an index page design to suit.

To write and verify the coding took another two months of work (actually three months but one was lost through illness and holidays). I like to work to dead lines, so in November I settled on 1st March for the launch, revised to 1st April, and it actually went on-line on 2nd April.

Relaxation

I recommend taking regular breaks! In the early hours of one morning I was working away trying to get rid of a bug, and nothing which I did seemed to make any difference. I simply could not understand it! Only after a short break did I realise that the screen I was looking at was on-line and not the one I was working on using my PC.

Tools used

The Pedigree pages were created using Legacy modified to CSS with the excellent LTools designed for use with Legacy. For my text (HTML, PHP and CSS) editor I use PSPad which allows batch search and replace. Because I have inserted some PHP in all my Pedigree pages I have to change all the file extensions from .HTML to .PHP using Ken Rename, and, finally, I also have to insert some script into the coding. This can only be done after the previous processing and hence requires the use of Regular Expressions to locate the point of insertion. To batch process I use Actual Search and Replace, but note that it cannot write the search and replace the strings for you!

Testing

Arguably this is the most important bit, it is certainly the most time consuming! Because of the use of PHP, I cannot test the Pedigree pages in IE unless it is actually on the web, which is something of a pain. I do, of course, have a folder on the server which I only use for testing purposes, but there always seems to be a difference between how something behaves in that folder and real life!

Links can be tested on-line using the W3C Link Checker, and do remember that for a 404 Error Page all links have to comprise the full URL ie. "http://www...."otherwise even your CSS won't work. This will not quite be the end of it, though, as you, or your visitors, will probably find a few missed bugs for a few days afterwards - make sure they can readily find a way of contacting you!

Finally

Ensure a plentiful supply of coffee, and enjoy!

Genealogy Website: The Nav Bars

 A web page can be considered as being built on layers, the first being the base, or blank page, usually white but it can be given a colour. For my new site I have put another, slightly smaller, background layer on top, followed by the data and images. In my case I consider the nav bars as being a new layer since the drop-downs must sit on top of any data and images. One point about images, IE6, and earlier, do not recognise the ".png" transparency. Google will find many scripts to cure this, one of which is to be found here.

To date, I have used javascript for my drop-down menus, however it is now possible to write these in CSS. Unfortunately, because to do this the latest CSS standard is used there are problems with older browsers, in particular with IE6. The image on the right is a sneak preview of a section of my new index page, and as can be seen the drop-down sits on top.

To make them display on top of images is easy, simply use the "z-index" CSS style. However for other image forms it can be quite tricky. For Flash, within the "Object" tag the line < param name="wmode" value="transparent" > needs to be included. IFrames present a different problem, and to date, despite having tested varying "solutions", I have yet to find a way of stopping the nav bars from going behind the image for IE7 and earlier. Still, I've three weeks left!

Now, the above are the easy problems, again it is IE6 which causes the real head ache, because CSS drop-down menus simply do not work! To the rescue comes Suckerfish and the Sons of Suckerfish, which for my purposes I had to modify even further.

In my first Blog in this series I mentioned that I wished to eliminate/minimise the use of javascript, and for the navigation this has largely been achieved. As you will see to get them to work in the early versions of IE, and I no longer bother writing for IE5.5 and earlier, javascript has been a necessity, this I feel is a fair compromise. If those using IE6 do not have javascript enabled the navigation will not work, but it is still possible for visitors to get round the site albeit with more difficulty. (If you are viewing this using IE6, please upgrade, especially as you can now see our headaches!)

My final point concerns testing, I use Firefox for most of my development work and test in IE8, Opera, Safari, Chrome, Sea Monkey and Bing, these I have on my PC. As I do not have a Mac. I rather hope that if it works with Safari it will be OK (not really satisfactory, but there we go!). So how do I test in earlier versions of IE? A nice free piece of kit called IE Tester enables this to be acheived.; although still in Alpha version, and not every bit works fully, it does do the job, and for me is a life saver.

© Ron Ferguson 2010

Genealogy Website, New, Improved, & How 2

Everything had been going swimmingly with my new site, until I received from Dennis of Ltools a sneak preview of his forthcoming program update. He has made a couple of alterations to this program which changes the Legacy Pedigree web page output into validating CSS.

One of the functions of this program enables your own custom HTML, which Legacy allows you to incorporate into their code, to be exempted from processing by Ltools. I use this twice on a Pedigree page, for the header and footer. The changes which Dennis has made improve the logic behind the program, but in so doing tighten the way way in which we must write our code. I have detailed the couple of restrictions involved in my tutorial.

Naturally, my coding didn't comply, and since I work on the principle of "only as a last resort read the instructions", it took me a while to sort out what was going on! Basically they are that the start and end tags of an HTML section eg. a <DIV> must both be either inside or outside the custom section, and nesting of comments when using Javascript should be avoided.

The race to get my site update completed by the end of March is now definitely on!

Genealogy Websites: New, Improved, Updated & How

My current site Fergy's Website has been in its current form for over a year, except for the Pedigree pages having been converted to CSS. I commenced work on the new site in November 2009 with a view to launch on 1 March 2010, although this was pushed back to 1 April 2010 mainly due to illness.

What I hope to do over my next few Blogs is to illustrate the objectives and problems and how these were overcome. Please do not think that this is going to be so technical it will over your head, some of it perhaps, but most can be applied with little knowledge of programming.

It is essential to draw up the criteria which need to be met for the revised site, mine are:

• It must be based on the Legacy Pedigree Web creation function, for no other reason that I really like this layout. I have looked at formats such as The Next Generation, and others, most of which require a GEDCOM upload, but, for me, Legacy was the one.
• To maximise the use of CSS to separate out the design from the HTML data.
• To replace the Javascript navigation with CSS, and in general, minimise the use of Javascript.
• Where possible apply the most modern CSS and HTML standards.
• To ensure cross-browser compliance, including IE6 - which continues to be used by a surprisingly high percentage of genealogists!
• To redesign the Index page, which given that I do not pretend to be a designer is no mean feat!
• To ensure W3C standards are met.

Some of the above aims obviously conflict with each other, so compromises have to be made. These will be described later.

The first problem is that the Legacy Pedigree web pages are not W3C compliant and are written exclusively in HTML. Whilst I had converted the major design components to CSS, to convert all would have meant writing a program to automate this, or using a program which would use Regular Expressions to convert each tag individually - ugh! Unfortunately the first alternative I thought to be beyond my VB.Net programming skills.

However, in 2009 Ltools released a program for Legacy users which validates the HTML and converts all to CSS, and it was this which I used last year to overcome this main stumbling block to achieving a major aim. Some information on the use of this tool is also given in my tutorial here.

The other items will be considered in future Blogs, so watch this space!