SEARCHES FAMILY TREES MAILING LISTS MESSAGE BOARDS

Unsere Deutsche Wurzeln - Our German Roots
---

WEBMASTER'S COMMENTARY:
Website Building Hints, Problem Solving, Resources

Jan 2002 - What I did during the "2 years of website development":
. . . HTML HELP, TUTORIALS. WEBSITE GENESIS. FORUM. GENEALOGY WEBSITE DESIGN

May 2003 - Comments regarding my implementation of CSS:
. . . WHY CSS? WHAT CAN'T CSS DO (YET)? VALIDATION; BEHIND THE SCENES. ROLLOVER EFFECT FOR LINKS, HELPFUL BOOKS

Jan 2004 - Comments on indicating language:
. . . LANGUAGE CODING. BILINGUAL PRESENTATION

Feb 2004 - Comments on "ALT" and "TITLE" attributes:
. . . "alt" & "title" -- WHAT'S THE DIFFERENCE? WHERE & HOW TO USE "alt" & "title" & JAVASCRIPT. WHAT DOES
THE BROWSER DISPLAY FOR "alt" & "title"? PLANNED

Aug 2004 - Comments on GenChts & iframe:
. . . WHAT ARE GENCHTS? HOW NOT TO PRESENT GENCHTS ON THE WEB. AVAILABLE WEB TOOLS. IFRAME
CHOSEN, WITH ENHANCEMENTS

Dec 2004 - Comments on Favicons:
. . . FAVICONS

Dec 2005 - Comments on anchor names and id attribute:
. . . ANCHORS, NAME VS ID

  Jan 2002 - What I did during the "2 years of website development":
HTML HELP, TUTORIALS
  • Continued my research
  • Learned HTML (tutorials, books, etc.) I do use a WYSIWYG ("what you see is what you get") HTML editor but code fixes are easier when you understand what's going on. Learning is continuing process and there are lots of resources available.

    bookBooks:
    • Caidenhead, Rogers; Teach Yourself to create a Home Page in 24 Hours, 1st edition; Samsnet Publishing; ©1997 Samsnet Publishing; ISBN 1-57521-325-7
    • Castro, Elizabeth, ed.; HTML for the World Wide Web, Visual QuickStart Guide, 4th ed.; Peachpit Press, Berkely CA; ©2000 Elizabeth Castro; ISBN 0-201-35493-4
    • Plotkin, David; How to do Everything with FrontPage 2000; Osvorne/ MacGraw-Hill, Berkely CA; ©2000 The MacGraw-Hill Companies; ISBN 0-07-2125-6
    • Weinman, Lynda & Weinman, William; <creative html design 2>, a hands-on web design tutorial; New Riders Publishing, Indianapolis IN; ©2001 Lynda Weinman & William Weinman; ISBN 0-7357-0972-6
    electronic media Websites:
WEBSITE
GENESIS
  • Noted interesting content, presentation/layout, html techniques on the internet
  • Made notes on what I wanted to include and possible navigation structures (and also what I wanted to avoid).
  • Looked for graphics (although I ended up creating a lot of the gifs and jpgs myself)
  • Transferred text documents into HTML. Copy & paste avoids a lot of code problems caused by converting to html from a wordprocessing program.
  • Converted spreadsheet files to Adobe Acrobat (pdf), which retains the original formatting and page breaks. Someday I may make these into database entries with a search function.
  • Wrote essays and other original texts.
  • Put it all together. Developed & fine-tuned the structure without worrying about bewildered visitors.
  • There are still unfinished items - missing information, files waiting for permission before posting, additional pages planned, etc. Also content or structure may change as I learn more.
  • Why post now (Jan 2002)? Primarily because I kept reading requests for the kind of information I had ready to go and my website structure was relatively complete. 
  • back to "25 Jan 2002" back
FORUM
Search Browse Subscribe L Subscribe D Mailing Lists On RootsWeb
Freepages-Help
  • P.S. With the site at FreePages came a subscription to the FREEPAGES-HELP-D mailing list — a great forum to learn, get advice & feedback, learn more about html, and to help others.
GENEALOGY WEBSITE DESIGN
Toolbox Button
  • P.S.S. There are helpful pages that describe what makes a good genealogy website. The "build it, and they will come" approach may sound easy but generally a webmaster needs to plan and to plan to maintain a website. Cyndi's Genealogy Home Page Construction Kit and its links are the best places to start. (Added Jul 2004)
  May 2003 - Comments regarding my implementation of CSS:
WHY CSS?
  • A definite benefit of converting to CSS (Cascading Style Sheets) is the ability to change a definition and have it applied instantly to the whole website.
  • CSS can do things with the appearance of text that can't be done with just html: for example:
    • spacing between rows (I've used this for numbered lists and definition lists),
    • background colour of text (this is how the highlighting effect is done for my links)
    • margins for any element (I now have "left-margin" & "right-margin" defined for the body instead of using "blockquote")
  • File sizes are reduced because font-face and font-size statements (and other non-default formatting) are removed from the file's body and defined in style statements (in a .css file and/or in the head section of the file)
    • Because of the additional complexity, I had never gone beyond using either "Arial" or the user's default font on my pages. Now I can define selectors (tags) by using font-family statements like
      • "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif
      • Arial, Helvetica, Verdana, sans-serif
      • Georgia, "Times New Roman", Times, serif
    • I am using rather conservative font choices because visitors must have the font already on their systems for it to be invoked and not all fonts have extended character sets.
WHAT CAN'T
CSS DO
(YET)?
  • However, I am not converting all my formatting to CSS (yet).
    • I have left in-line bold, italics, font colours, background image, etc. on my pages. Partly this is because creating all the class definition statements and inserting all the code will be a lot of work, but also so that most viewers can still see this formatting.
    • Old browser versions that don't support CSS are still in use. Netscape 3 users (still 1% of viewers in May 2003 per Netmechanic) will no longer see my pages in Arial (even if they have that font on their system). They will see only their default text font and sizes and will miss any new effects.
    • Because there are browsers that do not implement all CSS statements, some other viewers will miss various enhancements. (I've try to avoid effects that are not widely supported).
      • "lang" (which does not affect appearance but identifies blocks of text in a language other than that specified in the META tag — more on language below) is not supported by Netscape. Netscape users of all versions are 12% of viewers (same info source as above).
      • Coloured horizontal rules are not supported by Netscape 4 and below (10% of all users). Although the css statement validates, "colour" is not really a valid attribute of the HR tag. As of Feb 2004, I am using the "background" attribute to invoke coloured rules for Netscape 6 and Opera. Supposedly, a solid-colour graphic should be used instead, but images don't look or act the same as the HR tag and the html code is bigger.
    • Update May 2006: Have started using descendant selectors to target css statements better and reduce the number of time a class needs to be invoked. Valign removed from table cells. More 'semantic' class names.
VALIDATION
BEHIND THE SCENES
  • I've also added unseen comments, doctype statements, applied heading styles, added alt statements, language indicators, etc.
    • All my pages are now coded as iso-8859-2 (East European character set) for consistency. This character set covers all the characters I am likely to need for English, German, Romanian, Hungarian, Polish... 
      • For more on ISO-8859 codes, see The ISO 8859 Alphabet Soup.
      • According to some sources, utf-8 (Unicode), while ideal where multiple character sets are required, is not well-supported by some older browser versions. Also, decimal codes are better supported than hexidecimal codes. For more on Unicode (ISO 10646), see Unicode Home Page. Free Online Unicode Character Map helps you create short texts with unicode characters.
      • Character codes can be indicated at least 4 ways: 
        1. typed from the keyboard (exact character): ä
        2. named code (if available): format "&name;", example "&auml;" (a with umlaut), result "ä"
        3. decimal code (with appropriate meta coding): format "&#---;", example "&#228;" (a with umlaut), result "ä"
        4. hexadecimal code (with utf-8 coding): format "&#x----;", example "&#x00E4;" (a with umlaut), result "ä". Note that 00E4base16 = 228base10
    • I've also cleaned up some unusual codes (check this page's source code): … replaced with ..., – and — replaced with —, ’ and ‘ replaced with  ', † and some + replaced by †, „ and ,, replaced with ".
    • Non-keyboard characters appearing in my pages (some of these don't work in Netscape 4.6):
      punctuation: † – — § © ° ½
      same as iso-8859-1: Á Ä Ç É Í Ñ Ö Ú Ü ß à á â ä è é ê í î ó ô ö ú ü ÿ 
      require iso-8859-2 character set:  ă ą ę Ł ł ń ő Ś ś Ş ş Ţ ţ Ż ż
ROLLOVER
EFFECT
FOR LINKS
  • Comments on changes to hyperlink formatting: Although I retained the blue underlined text for unvisited links and red underlined text (with added highlight background) for selected links and hover, I have gone against convention with green underlined text for visited links. Although sticking with tradition helps visitors know what to expect, I had found that the traditional purple colour for visited links blends into the background of black text. Since the definitions for these changes are CSS, older browsers will still use the defaults anyway.
  • back to "29 Apr 2003" back
HELPUL BOOKS
  • There are many resources available on CSS techniques, including the websites referenced above. (Added May 2006)

    bookBooks specifically on CSS techniques:
    • Shea, Dave & Holzschlag, Molly; The Zen of CSS Design: Visual Enlightenment for the Web; New Riders / Peachpit Press, Berkely CA; ©2005 Dave Shea & Molly Holzschlag; ISBN 0321-30347.
    • Holzschlag, Molly; Cascading Style Sheets: The Designer's Edge, Sybex Inc., Alameda CA; ©2003 Sybex Inc.; ISBN 0-7821-4184-6.
  Jan 2004 - Comments on indicating language:
LANGUAGE
CODING
  • In the HTML code (hidden) — Each of my pages includes a META tag in the header specifiying the primary language of the page. Blocks of text in other languages are marked within <div> or <small> tags with the "lang" pseudoclass [attribute]. This makes little difference with most current browsers, but is intended to be proactive.
    • (Added Mar 2006) Accessibility checkers require that the <HTML> tag use the lang attribute to identify language of the webpage. The appropriate coding has been added, in addition to the existing language identification in the Meta tags.
  • On the page (visible) — A graphic to symbolize language is placed at start of texts, especially parallel texts in German & English, ie. DE, EN. Also used are RO, HU. I used the the 2-letter abbreviations (as specified by ISO 639-1) in preference to the flag symbols used on other websites. Flags indicate a particular country but both German and English are the official languages of several countries. The graphics' 2 colours do repeat some flag colours (chosen to be distinct) but are "washed out" to make them less prominent.
BILINGUAL PRESENTATION
  • In general, where there are parallel texts on my pages, German is consistently on the left or on top, and English is to the right or below the German text.
    • So far, having both texts on the same page is preferred because
      1. Visitors can easily tell if a page is available in their language. (I really hate it when a link to an alternate language page leads to a blank "under construction" page or "page not found" message!)
      2. Visitors can compare texts to check their understanding of a term or to aid in learning the other language (or critique my grammar!)
      3. Search engines will find my pages with search terms in either English or German (ideally)
      4. I can make create and re-check both texts more easily
      5. Graphics don't need to be repeated
    • When the time comes, some of the longer or more complex pages will need to broken into shorter segments or split into original and translated pages.
    • Currently, on pages with only one language, visitors might invoke an on-line translator (such as the ones available on the Translation Gateway Page).
  • back to "27Jan 2004" back

 

  Feb 2004 - Comments on "ALT" and "TITLE" attributes:
"alt" & "title" -- WHAT'S THE DIFFERENCE?
WHERE & HOW
TO USE
"alt" & "title"
& JAVASCRIPT
  • Basic info:
  • ALT - Defined as "alternative, textual content when an image cannot be rendered". 
    • Required for <IMG> and <AREA> tags. 
    • Not available for other elements, except <INPUT TYPE="image"> and <APPLET>.
    • Text is shown on page when image is not available. ALT text is read by screen readers.
    • Purpose is to replace information embedded in an image when the image is missing: do not use to provide essential information when the image is shown.
  • TITLE - Defined as "advisory infomation" about the element in which it is set. Should enhance when a visible element is complex or obscure.
    • Available as a core attribute to all tags (except base, head, html, meta, param, script, style, and title elements). However, browser support on some tags may be limited.
    • Shows as tool tip on mouseover: small pop-up window enclosing the text. Line breaks, alignment & formatting defined by user's browser. Usually fades after about 5 sec.
    • Ignored by IE 4.x and Netscape 4.x and below
    • Best for short, supplementary texts
  • Javascript to create tool tips
    • Uses mouseovers (ie. will remain in view as long as the viewers mouse is over the object (text or image).
    • Page must completely load, javascript must be enabled.
    • Depending on script: box width & offset, background colour, text colour, font size & line breaks can be specified by the author.
    • Browser support may be depend on script
    • Best for longer, more complex texts or effects.
WHAT DOES
THE BROWSER DISPLAY FOR
"alt" & "title"?
  • BROWSER VARIATION:
BROWSER HANDLING OF TAG & TITLE ATTRIBUTES
IE 3 & 4.x
  • ALT text shown as image replacement but also shows as tool tip
  • TITLE ignored
IE 5.x +
  • ALT text shown as image replacement but also shows as tool tip if there is no TITLE text whether image is shown or not.
  • ALT=" " (with a space) will show as a blank tool tip box
  • ALT text on image area (box) may be truncated if image too small to show 'x' and entire text
  • 'expand alt text' browser function available under "Tools - Internet Options - Advanced - Accessability"
  • TITLE shows as tool tip
  • However if TITLE is applied to the link on an image, the ALT of the image is shown instead
Netscape
3 & 4.x
  • ALT text shown as image replacement but shows also as tool tip
  • TITLE ignored
Netscape
6.x +
  • ALT text shown as image replacement but no tool tip if only ALT text available
  • whole ALT text inserted inline to replace image (no box outlining image size).
  • TITLE shows as tool tip
  • TITLE text may not wrap or may be truncated if too long
Opera 6 +
  • ALT text shown as image replacement but no tool tip if only ALT text available
  • ALT text on image area (box) may be truncated if image too small to show entire text
  • TITLE shows as tool tip, but does not fade.
Firefox 1.0
  • ALT text shown as image replacement but no tool tip if only ALT text available
  • ALT text on image area (box) is truncated if image too small to show entire text
  • TITLE shows as tool tip (fades after about 5 sec.).
PLANNED
  • Recommended actions (for my site):
    • Review ALT texts, modify if needed to provide better image replacement texts. Use browsers with image downloading turned off to check. Thumbnail images will need particular attention. (Note, added May 2006: The WebDeveloper extension includes a number of options for checking images).
    • Evaluate images, tables and links to determine where tool tips are needed and implement. Some TITLE texts will duplicate the ALT texts. Remember to keep these texts short!
    • Provide captions or other texts for essential information that should be visible to visitors.
  • back to "29 Feb 2004" back

 

  Aug 2004 - Comments on GenChts & iframe:
WHAT ARE GENCHTS?
  • My GenChts (Genealogy charts) are descendant trees, that can indicate additional names, associated families, show missing or suspect information, have pointers to other pages, etc. -- in short, lots of names at a glance. Coloured disks are added to indicate founding fathers of various lines and red text indicates individuals not known to be related with my family. See Legends for more on the symbols used.
    • The earliest versions of these charts were my first documentation of my family, even before I used index cards or computers.
  • Created in MS Excel, then turned into gif images for web presentation, using the same zoom setting - variable dimensions but all readable on screen. One image per chart to keep things simple.
  • Chart identifier, date and contact information on lower edge of image itself (so that the image is traceable even if downloaded)
HOW NOT TO PRESENT GENCHTS ON THE WEB
  • Presentation of a GenCht as image only is insufficient as:
    • it is not searchable -- needs appended table of names
    • images are not linked together -- need to be embedded in a webpage for either image mapping (too complicated with up to 28 links on single image, esp. if the image shifts when updated) or navigation links
    • in older browsers, large images may not be fully rendered or degrade when scrolling
  • a frameset page with navigation links and names table in left frame and image in right frame (similar to Mapframe) was rejected because
    1. noframe view should have similar information (links, image and names) which would be complicated to keep up to date, and aids to help might present additional problems for older browsers and at Rootsweb (for example, advertising banners on included pages).
    2. navigation between GenChts would be a nightmare to set up as both right and left frames would change each time and some links would need to break out of frames.
  • object tag - not recommended for images, poorly supported
AVAILABLE
WEB TOOLS
  • Presentation of the image in a webpage works but in many cases, the image is larger than 1 screen shot, both height and width
    • not only is image not viewable as whole, but navigation (above) and names (below) are not viewable at same time
    • in older browsers, large images may not be fully rendered or degrade when scrolling
  • iframe tag - Pros & Cons:
    • width sizable in % -- adapts to various monitor sizes and resolutions
    • height set to allow most of screen to show image but also navigation
    • scroll bars will disappear if not needed. Works with wheel mouse after clicking on content
    • not supported before IE4 and NN6 (still 10 % of users) - iframe content is invisible -- but you can explain with "no iframe" text!
    • image in iframe will not generate additional advertising banners
    • iframe not resizable by visitor
    • iframe is reportably not spidered by search engines: not an issue with an image! but therefore the table of names shouldn't be in a 2nd iframe
    • element invisible in FrontPage normal view - can add comment as placeholder
  • overflow attribute - this CSS2 property acts very much like iframe tag, but 
    • cannot include a message visible only when content is not rendered correctly
    • excess may be hidden (WebTV) or degrade in some older browsers instead of scrolling
    • cannot use wheel mouse with overflow (mouse defaults to page scroll bars)
    • whole image is visible in FrontPage normal view
IFRAME
CHOSEN, WITH
ENHANCEMENTS
  • Options tried:
    1. image & table only (original choice)
    2. iframe for chart image (see faults under iframe)
    3. overflow for chart image (see faults under overflow)
    4. iframe for chart image & overflow for table (too many scroll bars; cannot fit both into same browser window and see much of either, and both truncated on printout)
    5. *iframe for image & img as substitute & title for instructions in case image is not substituted (best, implemented)
  • A link to the image in a new window was added, both for older browsers and viewers that want more of the chart at one time (however no navigation as explained above)
  • Remember when choosing iframe dimensions to allow for the 20 pixels of scroll bar, on 2 sides. Browsers behave differently -- some add the scroll bars inside the defined box, some outside the box.
  • In all the above presentations, the whole GenCht is not printable from the browser window when oversize. Scroll bars are printed with overflow, no bars with iframe, excess is hidden. Still need printable version (pdf or txt or htm?).

  • back to "02 Aug 2004" back
 
  Dec 2004 - Comments on Favicons:
FAVICONS 
  • Favicons are the little images that appear next to bookmarked webpages and in front of the web address. Favicons are now supported by a number of browsers, so I have created an iconic image for my website. (Implementation complete Jan 2005)
  • It's tricky to develop something simple and representative of the whole site. I finally settled on on the letters UDW (for 'Unsere Deutsche Wurzeln') under a tree on a yellow background, which is almost too complex.
  • Although a different favicon could be specified for each page or each section of a website, that is counterproductive: 
    • all favicons use the same filename (cannot have more than one in a sub-directory), 
    • the page title should already distinguish each page, and 
    • favicons can be used to evoke the continuity of a website, just as a common page template does.
  • The html <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> (*) needs to be added to the <head> of each page; it cannot be added to the css stylesheet.
    (*) The value for href can be modified if the image is in another subdirectory.
    • It seems that older versions of IE would use favicons found in the same directory as a bookmarked page without the image being referenced by the page, but there were potential security issues associated with that method. Now browsers require that image to be used must be specified by the webpage.
  • More about these graphics:
    • http://www.favicon.com/ - All about favicons
    • How to Create and Install a favicon.ico
    • FavIcon from Pics - creates a favicon from your images. FavIcon instructions don't include recommendations for images; for best results with this service:
      • use a square image (otherwise, the favicon will be distorted)
      • image can be .jpg, .gif or .png format but not .bmp (bitmaps not processed)
      • contrasting colors help a design stand out.
      • keep design simple: a favicon is only 16x16 pixels
  • back to "11 Dec 2004" back
  Dec 2005 - Comments on anchor names and id attribute:
ANCHORS
  • Any link to a specific part of a webpage needs an anchor ("bookmark") to identify that destination.
  • In HTML, <a name="bookmark_name">bookmark text</a> named the anchor. The name attribute could use any character, including numbers, character entities and spaces. Each anchor could only be defined once within a webpage.
  • The link would have the form <a href="#bookmark_name">link text</a>
NAME VS ID
  • In CSS, the id attribute, which is also referenced with #, is available to any element.
  • Newer browsers now can use id not only for css formatting but also to set anchors, in place of the name attribute
  • However, the id name must start with a letter and is case-sensitive and must be unique on any page
  • If id and name are used together (to ensure that all browsers recognize an anchor),  they must be identical. (Name is a deprecated attribute -- that is, it will eventually be obsolete).
  • Some code validators recognize this, and are identifying anchor names that do not follow id rules as potential errors. Example: "Warning < ..> cannot copy name attribute to id"
  • Proactively, I have revised my anchor names to replace those that used a number in the first position.
  • More information: Links in HTML documents
  • back to "18 Dec 2005" back

 


Zurück zum Anfang - Go to the Top

 

Census Records | Vital Records | Family Trees & Communities | Immigration Records | Military Records
Directories & Member Lists | Family & Local Histories | Newspapers & Periodicals | Court, Land & Probate | Finding Aids