Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Tuesday, 22 June 2010

Genealogy Websites are Boring!

So said a recent tweeter. My instinctive reaction was that part of the problem was that the designers are trying to cater for the higher proportion than average of genealogists who still use IE6. But on reflection I think this to be unfair.

Is it True?

I made the basic assumption that the comment did not refer to the research aids, such as Ancestry.com, so over the past month I have made a point of looking at many genealogists' own sites. and, regrettably, I think that it is probably fair comment.

Part of the problem is that the sites are presented by genealogists many of whom, I suspect, have little or no experience of designing and coding websites. Many are, therefore forced to use sites such as Rootsweb, rely on their database program, or use a program which converts a GEDCOM into webpages. This is not a criticism, in fact I applaud the efforts made by all who seek to make their work available to others, and I know how hard they try to overcome the problems which they inevitably meet. Indeed I have used a standard template for this blog!

The image above is of my own website; now I am not a designer but can code, so the design is one which I have put together from looking at pages in books or on-screen. I make no pretence about it being of a high standard, but at least I'm happy with it! I have shown this to illustrate that it is not necessary for all pages to look dull. This is true for the many different types of pages which can be added to a site, for example, forums, blogs, tutorials, biographies etc. etc.

Options

However, I suspect that the tweeter was referring to a lack of dynamic pages, and with the best will in the world, here we have a problem; which is that the family genealogy which we may wish to display basically comprises a list of names and other data. No matter what one does with it, it is still a list. The Next Generation of Genealogy Software, based on PHP and SQL overcomes this by using selections of family trees from which one can link to details of each individual.

My personal favourite is the Pedigree style from Legacy where the notes are included on the same page as the tree, which I prefer, although it is not as dynamic as TNG. It also has another problem in that it requires one page per individual, which means it is not really suitable for very large sites, I currently have around some 6000 such pages. I do include a dynamic family tree, made using DftCom2 based on Java, on a separate page of my site.

When it comes to other formats, Descendant, Ancestor, Family Group, Individual, we are down to lists, they may be formatted differently but they are still lists. For very large sites there may be no alternative other than to use one of these options, or TNG. There are a few other programs but the user experience is similar to those mentioned. I understand some university work is being carried out on alternative formatting, but as yet this has not been taken up.

What can we do?

At present, the best solution would seem to be to create a wide selection of attractive pages to complement the lists of genealogy data from which we hope others will contact us, and hence expand our knowledge and/or trees

© Ron Ferguson 2010

Thursday, 11 March 2010

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

Thursday, 4 March 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!

Thursday, 25 February 2010

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!