In TNG, these details of biographical or historical interest can be added to the an individual person’s page through addition of custom event types.

Occupation: Cattle Rustler

From the Edit view of the person’s page, the administrator can create Events under “Other Events”. In the “Detail” field, text can be directly quoted from a source .  The source can be attached to the Event.

This method displays the content of the Detail field to the right of the Event, while the Source is placed as a footnote near the bottom of the page.

One caveat to the default TNG page design is that addition of an Other Event Place to the Google Map includes duplication of the Details field for that Event in the map legend.

Occupation: untidy

Since the map legend is a narrow column to the right of the Google Map, these duplicated Details become condensed into short lines of distracting and difficult to read wrapped text.

To remove the duplicated Event Details from the Google Map area, one line of code can be disabled in the getperson. php file.

Find the line:

if($description) $persontext .= " - $description";

and replace it with:

// next line removed to disable mapped Event Details display
// if($description) $persontext .= " - $description";

To further cleanup the Map Legend,  the Place name can be pushed down to the next line with a page break by modifying the next line of code:

$persontext .= " - $dateforeventtable - $place</span></td>\n";

to

$persontext .= " - $dateforeventtable<br/>$place</span></td>\n";

The result is an easier-to-read Google map legend…

Cleaner TNG Google Map Legend

by Typadelic

While Internet Explorer (IE) has supported the @font-face rule since v4.0. support was limited to embedded Open-Type fonts.  While restricting browser support to embedded Open-Type fonts put limits on it’s use, the method of  rendering a typeface on a web page by linking to a font file stored on the web was far-sighted. This allowed the font file to download to the user just like others file on the web site,  rather than requiring that the font be installed on the user’s computer.

Three major browsers, including  FireFox(FF), Opera and Safari, embraced the @font-face rule and eventually included support for rendering both Open-Type and True-Type formats without embedding, but copyright issues still caused controversy. All the cool fonts had licensing restrictions!

Developers and designers longed for the ability to utilize this rule without stepping on the proprietary rights of font designers and type foundries. Developers and designers who were now used to open source applications, began asking themselves: why can’t we have cool open source web fonts, too?

If you’re browsing this post in current versions of  FireFox, Opera or Safari, the text of this paragraph is rendered in TrueType format of  nicely flowing script by Typadelic called BlackJack. In Internet Explorer the text in this paragraph looks the same as other paragraphs in this post, only larger.

Slowly, the idea of open source typeface for use in web design took hold. Ahhh, sweetness!

While FFv3.5 included the @font-face rule for linking to either True-Type of Open-Type font files, of my favorite browser version 3.6 released on January 21st supports a  revolution in web typography:

On January 21st Mozilla Foundation released version 3.6 of my favorite browser that included long-awaited  support of a sweet type:  the CSS  @font-face rule for linking to  WOFF.

Other rebel designers chose to support the Open Source Type Movement.

The No. 1 Ladies Detective Angency by Alexander McCall Smith

Old bookjackets are a great resource for page layout inspiration.

The artwork is royalty free and examples are easily found in the public domain.

I ran across this one a while back and loved the simple landscape shapes of the tree near a cabin near which stands a cock crowing at the sunrise.

Peaceful and well-placed country elements gather comfortably around day break on this wilderness home,  reminding the viewer to remember a simpler time of days gone by.

The framing adds subtle interest to the layout, with ribbon-like textures  and transparent borders over a rich torn parchment base.

The typography seems out of place, perhaps hand drawn but ill-placed, as if the work was done by another artist with less skill or understanding of symmetry that the background achieves effortlessly.

The teapot, steaming coffee cups and other seemingly randomly placed clip-art give an impression of afterthought and distracts much from the simple beauty of the page layout background.

Front cover base layout of vintage book jacket after Photoshop cleanup.

With all the clutter removed, the charm of the layout jumps out to please the eye:

Great inspiration for web page template design, perhaps a Family History or Genealogy layout…

Drop menus exist by default in the upper right corner of most core TNG pages. These menus organize links to other core pages for easy access by the user under the three categories titled “Find”, Media” and Info” as shown:

Navigational consistency is important when planning the overall User Interface of a site as it minimizes confusion through familiarity. New users are less frustrated making their way through a new website when they can easily determine how to properly navigate the way to preferred content quickly and with minimal effort.

Once a user becomes confident of navigating as expected, finding content becomes less of a chore and concentration can be focused on the information presented. For most genealogists, providing information to visitors arriving from any where in the world is a primary reason for maintaining a Family History website.

Since the drop menus already exist on most TNG core pages, a User will become familiar with the order of the links in each category and expect to find a similar category grouping order no matter what page is being viewed.

When designing custom pages, and in particular the Home page, similar grouping order can be used to establishing site-wide navigational consistency for the User. With a little planning it’s possible to make the User feel right at Home on each and every page of a website.

While TNG is a powerful application for bringing one’s genealogy to the web, the display and layout of pages “out of the box” is somewhat outdated with respect to web standards. I’ve been using TNG since 2004 and the page layouts are largely the same as they were more five years ago.

My purpose for writing this series is twofold: 1. to record the changes I make for future reference, and 2. to make those changes available to others who may be interested in achieving site-wide uniform page layouts within TNG.

For reference, the following is a list of the core TNG pages as shown on the “out of the box” Home (index.php) page under the heading titled “Other Features”.

TNG Home page "out of the box"

Login/Logout
Register for a User Account
Surnames
Bookmarks
Statistics
Photos
Histories
Documents
Videos
Recordings
Albums
All Media
Cemeteries
Headstones
Places
Notes
Dates and Anniversaries
Reports
Sources
Repositories
What’s New
Most Wanted
Change Language
Access Log
Administration
Contact Us

For the purpose of effective User Interface Design, there doesn’t seem to be any discernible order to the above list. Moreover, the “Other Features” heading is not used on any other page so may serve to confuse a new user. To be fair, a disclaimer at the bottom of the generic Home page states, “Please customize this page!”.

TNG Home page with simple category lists

Fortunately, core TNG pages (pages beyond the “Home” or Index page), have three drop menus built into the upper right hand corner, with the above links grouped under loosely categorized list titles.

These categories can be used as a guide to achieve navigational consistency, not only on the Home page, but also on other custom pages so that a User can intuitively find information of interest no matter what page is viewed.

On the right is a screen shot of a simple customized  TNG Home page as viewed full scree on a 1280 x 1024 display. The color palette is the same as the “out of the box” TNG install.  In this page layout, list categories have been arranged in the same order as those found on drop down menus within the core TNG pages.

While this custom TNG Home page layout was created on a 1280 x 1024 display, all the content is contained within a fluid block that expands or contracts according to the size of the display.  View the custom TNG Home page layout over at my TNG Test database.

The latest version of The Next Generation of Genealogy Sitebuilding (TNGv7.1) was released today.

In the previous post I mentioned writing a series on modifications to the out-of-the-box installation so I created a new database and uploaded the files for this release.

This version includes an “Express Installation”. After FTP’ing all the files to the server, I went to my browser and navigated to  the Installation instructions found in the TNG readme.html file. I chose “Express”.

Wow! It took about 5 seconds to get through the first two steps. I ran into a snap at that point, where the express launch wouldn’t write the databse credentials to the server. “You must log in first” appeared in red.

No big deal, I navigated to the Database Setup link in the left menu and found the admin link provided in case of failure. In Admin>Settings>General Settings>Database, I entered the database credentials, hit Save at the bottom of the page, and I was done.

Two minutes. Tops. Maybe we can call this “The Two Minute Install”.

Stay tuned for a series on core page modifications to TNG.

Screenshot of Husing.org

I’ve been working on a major project over at Husing.org.

I had free reign on the site, so chose to couple WordPress and TNG.

I used the incredible ThemeHybrid for the framework in WordPress and it’s a joy to work with.

Inspiration for the color scheme came a simple question to the owner, “What’s your favorite color?”.

Imagine my surprise at the nonchalant reply, “RealTree APG“.

After I got the Wordpress layout and color scheme somewhat satisfied, I jumped over to TNG. As I got into development, several inconsistencies in page layout elements began to emerge.

I’ll be covering those modifications in a future series of posts once TNGv7.1 is released a few weeks from now.

Coen had asked me to work up a custom TNG layout to match WordPress “Tarski” theme.

The main WordPress page as rendered by the Tarski theme looks like this:

We skipped the TNG homepage and directed the “Genealogy” link to TNG’s surname page instead. I love the uniformity of the custom design:

Here’s the color palette from ColorZilla:

#e5cfd2 -mauve
#a8001c -red
#006a80 -turquoise
#cfe2e5 – sky blue
# 8fbf60 -lime green
# ece9d8 -concrete gray

Default Tarski color palette.

One major issue was the default Tarski #wrapper 760px fixed width.

Because much of the data in TNG is laid out in tables, content rich pages need a minimum of 800px width to display properly when adopting the Tarski  200px wide sidebar and larger font styles. The 20px Tarski gutters add to the need for increased real estate. In addition, core TNG pages have a variety of table widths, with the Individual pages having the widest table displaying the most content.

Fortunately, the Tarski theme  scales up nicely. The most practical approach was to increase the #wrapper width to 1000px.  This width allowed any size TNG data table to display fully as intended.

Here’s a sampling of out of the box color scheme for TNG  pages with default styles governed by genstyle.css:

I’m not sure what the rhyme or reason was for the choice of colors.

Let’s “pick” it apart:

#343399- dark blue

a (color) selected by a:link, a:active in genstyle.css (line 53)

a:hover (color) selected by a:link, a:active in genstyle.css (line 53)

a.snlink (color) selected by a:link, a:active in genstyle.css (line 53)

a.footer (color) selected by a:link, a:active in genstyle.css (line 53)

a.footer:hover (color) selected by a:link, a:active in genstyle.css (line 53)

#333365 – midnight blue

p.header (color) selected by .header in genstyle.css (line 22)

a.snlink:hover (background-color) selected by a.snlink:hover, .snlinkact in genstyle.css (line 398)

td.fieldnameback fieldname (background-color) selected by .fieldnameback in genstyle.css (line 63)

#E0E1F6 – pale blue

li.drop (background-color) selected by #mnav li in genstyle.css (line 210)

li.drop (border-top-color) selected by #mnav li in genstyle.css (line 210)

a.snlink (background-color) selected by .snlink in genstyle.css (line 387)

td.databack (background-color) selected by .databack in genstyle.css (line 71)

#666634 – olive

a (color) selected by a:visited in genstyle.css (line 58)

a:hover (color) selected by a:visited in genstyle.css (line 58)

#FFCC00/#FFCC33 – yellow

a.lightlink:hover (color) selected by a.lightlink:hover, a.lightlink:active in genstyle.css (line 112)

#FFFFFF -  white

body (background-color) selected by body in genstyle.css (line 45)

ul#first (background-color) selected by #mnav li ul in genstyle.css (line 226)

ul#second (background-color) selected by #mnav li ul in genstyle.css (line 226)

ul#third (background-color) selected by #mnav li ul in genstyle.css (line 226)

a.snlink:hover (color) selected by a.snlink:hover, .snlinkact in genstyle.css (line 398)

#000000 – black

body (color) selected by body in genstyle.css (line 45)

TNG Template 4

This site was initially built with the Template 4 design included with TNG.

When Sharon Randall approached me for help, she asked if I could incorporate a photo of sculptured tree her son gave her which sits on her mantle.

Of course, I’m always excited to have a client offer their own personal inspiration but one look at the image of this beautiful keepsake made me want to do more than just plug it into a pre-made template. As I stared at her Home page, I wondered how I would manage to work that particular image into the original color scheme of this template. Perhaps the green and red would have looked okay, but reducing the beautiful tree to a small enough size to fit into the space where the ‘main street” image sits seemed a sinful waste.

Tree sculpture inspiration

The image offered a rich palette of earth tone colors that were difficult to overlook as inspiration for a custom design.

Using the Colorzilla add-on for FireFox, I pulled colors from the image to replace those in the stock template.

Sharon was thrilled to see the cherished gift from her son showcased on the home page of her new genealogy site and in the time since, the site has taken on a life of it’s own, evolving into a thing of beauty that both of us are proud of.

Watch for future posts on details of the site evolution.

Information sharing is enhanced when everyone is on the same page. Confusion is minimized when we don’t have to reinvent the wheel.

Symbols and codes are natural candidates for standardization because they represent larger entities in a compact form. When we compact information or agree on what a symbol or code means (ie; standardize it) we can share more information with less work.

Of interest to any genealogist when entering data in a genealogy is the ISO 3166 Standard, which provides an internationally used code for countries or territories.

I’d love to explore if this might be useful in genealogy…

Searching the web to find responsible, verifiable, genuine information of the professional or educational kind is a skill. Like all skills, it’s an acquired one.Searching and Teaching Your Kids to Research