concept web site

Outcome

Do not get me wrong, Legacy Family Tree has a very good web creation function included in the program, however, there is a BUT.

That BUT is that it is very poorly coded:

  • Heavy Use of Tables
  • Unclosed Tags
  • Limited Use of CSS

To see how convoluted the coding is, simply generate your own web pages in Legacy, then open a page using Notepad. Examples can be found on the next tab.

!

Table Clutter

The most obvious problem is the over-use of tables. When the Internet really took off, tables were used to layout a web page; and back then, it did a really good job. Everything looked neat and tidy, but coding - if done by hand - could be clumsy and could introduce errors with dropped or forgotten tags.

Unless you code your own pages, you normally wouldn't even look at the coded web pages - you'd just upload them so they are there for others to view. However, some people may like to touch up their web pages, and reading through table code can be, well - not fun

 <table cellSpacing="1" cellPadding=1 bgColor=black>
 <td width="139" bgcolor=#EFEFEF align=center valign=top>
 <font size="1">Alwin Immanuel Lange
 <br>
 (1908-1991)</font></td>
 </table>

will produce a table that looks like:

Alwin Immanuel Lange
(1908-1991)

and when you have multiple tables or embedded tables, the code soon blows out to look like:

CSS

By changing the code to incorporate CSS, the HTML is cleaner and by far easier to read. Although the current standard is CSS 2.1, I am also using more advanced features found in CSS 3 which gives far more opportunities to create something special.

Not all CSS3 features are available yet as they are still being rolled out. Therefore not all browsers can display the effects. I have used only those that are available and can be displayed using FIREFOX, SAFARI or OPERA browsers. For those who use INTERNET EXPLORER, I suggest that you upgrade to the latest version of IE as the older browsers will not be able to render CSS3 code.

All styles for the HTML is removed to CSS, and the HTML code of Tables is deprecated in favour of DIV's.

 <div class="pgp_1">Alwin Immanuel Lange <br>(1908-1991)</div>

will produce a table that looks like:


Code

A simple comparison of the Pedigree Web Page (based on the web page created from my database as used in the example) for an Individual is as follows:

Legacy Code
  • 170 lines code
  • Uses Tables
  • No CSS
  • Uses Deprecated Code
  • More lines to Upload
  • Longer to View
Concept Code
  • 96 lines code
  • Uses DIV Elements
  • Uses CSS
  • No Deprecated code
  • Less lines to Upload
  • Quicker to View

 

 

 

 

 

NOTE: The amount of lines of code per page will vary depending on the amount of information present in the database table for that individual. The example in the above tables are for just one individual and will vary from person to person. However, if the above is given as a medium figure, because the Concept Code is only 56% that of the Legacy Code, the web pages will load 44% faster.

charts

With this in mind, I have been able to produce a number of new, cleaner, leaner series of web pages. The Pedigree is just the first of them.

 CAVEAT: Please understand, these concept pages DO NOT appear in the
Legacy program and they CANNOT be created with the program.

Pedigree

  1. New Pedigree Home Page
  2. Pedigree Standard (clean) - Standard (w/background - includes ancestor images if available)
  3. Pedigree Tabbed (clean) - Tabbed v2 (w/background) -
  4. Pedigree Tabbed v3 (clean incl. vData) - Tabbed v4 (bg incl. vData)
  5. Pedigree L to R Standard (clean) - L to R Standard (w/background)
  6. Pedigree L to R Tabbed (clean) - L to R Tabbed v2 (clean incl. vData)
  7. Pedigree L to R Tabbed v3 (w/background) - L to R Tabbed (modified w/background)

Direct Ancestor

  1. New Direct Ancestor Vertical (clean) - Vertical (w/background)
  2. New Direct Ancestor Comparison Chart - Comparison (w/background)
  3. New Direct Ancestor Compact (clean) - Compact (w/background)

Descendant

  1. New Descendant Chart (clean)

Other

Family

  1. New Immediate Family ImmFam (clean) - ImmFam (w/background 1) - ImmFam (w/background 2)
  2. New Immediate Family IFAdopt (clean) -
  3. New Family Groups (green) (red)

Timeline

  1. New Timeline 1
  2. New Timeline 2

Miscellaneous

  1. New Portfolio

Menus

  1. New Simple Animated
  2. New Mac-Like Drop

Caveat: All the menus above (although they add extra functionality to the site) do require extra HTML coding and therefore add more weight (as far as file size goes) to the final upload.

Legacy

It is said that "Immitation is the best form of flattery," well... here I have had a little bit of fun by creating a

  1. A true Legacy Web Site

You will in essence navigate like you do in Legacy by clicking on the parent or children's names. There is even a working clock.

Sites

  1. Site 1 (displaying Pedigree Chart w/drop menu)
  2. Site 2 (displaying Pedigree Chart w/side menu)
  3. Site 3 (displaying Family Group Record w/side menu)

Check

This is what I have come up with for now:

  1. Tableless designed webpages
  2. New clean fresh design
  3. Include or Exclude a Legacy background
  4. CSS designed charts with connecting family lines
  5. Simpler (less in the face) horizontal ruler
  6. Clearer Note headings (selectable headings colours - plus a default colour)
  7. New look dot points
  8. New look Page Title (selectable title colours - plus a default colour)
  9. Title with or without shadow (shadows of varying colours)
  10. Tabs to compartmentalise ancestor information (include or exclude vital data)
  11. Display images of ancestors in chart by hovering mouse over ancestor's name
  12. New Left to Right Ancestor Chart
  13. Use of Gender icons
  14. Use of Gender Colours in chart
  15. New Direct Ancestor Chart
  16. New Direct Ancestor Comparison chart
  17. New Direct Ancestor Compact chart
  18. New Immediate Family chart (3 generation plus siblings)
  19. Sibling birth ranking numbers
  20. Family Name labels
  21. Display adopted parents (in Immediate Family chart)
  22. Use of rounded corners (all css-no images) in charts to identify key individuals/genders
  23. Gradient backgrounds for banners
  24. faded genealogical backgrounds (no use of graphics)
  25. New look menus all CSS coded (only 2 graphics used in 3 menus)
  26. New Family Groups design
  27. New Timeline charts
  28. New Portfolio concept
  29. New Descendant Chart

Feedback

Much time has been invested in this project. If you like what you see, please email me with your support and suggestions. If you prefer the current old style web pages - even thought the coding dated and imperfect - I would still like to know. Perhaps we can make a change to help Legacy even further. Possible outcomes include:

  1. Re-engineered Web pages within Legacy
  2. Separate program to create these web pages
  3. Separate PHP program to create these web pages dynamically

Please use the email links below:

  1. Support
  2. Suggestions

I will collect all responses and report my findings to the developers of Legacy. I will also update these web pages so that you are aware of what is going on and what the responses are also.

NOTE: Any chart herein denoted as using a background, is using the Legacy supplied optioned background file niceblue.gif

Caveat: The following web pages have been designed and customised using the FireFox 7 web browser. There are some degradation issue when using Internet Explorer 8 and Chrome 12.