Site Design Features

(This page originally functioned as an electronic progress report accessed by my CEP 411 instructor, Mark Knudson. The first edition served as my required midterm report; the second version served as my final project report. The current version remains in case anyone is curious about the decisions that shaped the original design; notes were added to comment on original features deleted or modified during later site updates.)

General Requirements, final site design project:

The subject matter . . . should relate to your particular position . . . [and function as] a useful tool for you in your occupation and to those you serve. Be creative . . .  [and include features that are]  in some way interactive. Your home page should try to do something different or better than you can do it without the Internet. Your home page must include advanced HTML tags, JavaScript, and Java programming . . .  subject to discussion and class consensus. One link you must have is one about Safety on the Internet. I feel it is crucial to protect our children . . . and educating them is the best way. -- Quote from initial project goal description provided by Mark Knudson, CEP 411 instructor.

Specific Technical Features included in this site to satisfy CEP 411 requirements:

• Comments and code formatting: These modifications are scattered throughout a portions of TG's page coding, including the opening framesset definition and the "main" frame inside the frameset.
• HTML frames are used in the index page to open the web site and certain sub-pages to help provide a consistent site identity and layout.  (Note: tables are used throughout the page sets to improve the placement control of HTML elements.) The index frameset consists of two rows with two columns nested in the second row. The title row sets site identity a site title and a shadow background of symbols used in a logo I helped design for the SMA. In the second row of the frameset, nested column frames create a column of site navigation icons and a main viewing frame. (Instructions for frame breakout are provided in the "main" page that appears after the site finishes opening.) A return button in the site control column allows quick return to the beginning page at any time during browsing. Most of the images used for controls were created or modified in Corel's WordPerfect graphics program. Once created, they were saved as GIF images (62 W  x  48H pixels) and optimized into button format using MediaBuilder's GIF optimizer site.
• Frame alternate views are coded for most frameset pages. This coding provision is for visitors with browsers that are not frameset enabled. Without this coding, visitors without frameset computability see only a blank page. The alternate view code provides instructions and a link for using my site map to browse without frames. (Only frames disabled visitors see this instruction set.)
• Meta tags are code (not visible except in page source view) used for titles, descriptions, and certain viewing controls used by browsers when a web page is called. Information attached as meta tags in page headers, depending on need, includes page descriptions, key word lists, and, in one case,  a control setting the transition from the opening welcome to the main instructions web page. (other Meta tags, such as author and generator information, were created automatically by Netscape Communicator rather than hand coded.)
• Internet safety links: Class project design requirements asked for a feature on Internet safety for younger site visitors. An internet safety page under the computer applications button satisfies this requirement. (It can also be called through the pulldown menu on the opening page.)
• A CGI pulldown on the opening "main" page called a code applet from my ISPs cyberhighway server. It demonstrated an effective adaptation even without full access to the source code. On occasion, cyberhighway's server blocked use of this borrowed code, so sometimes it didn't work.  I deleted the function call when I updated the welcome page to a layout I now prefer.
• Image map tags (image mapping): Image mapping is used within an image of the fire room and in an image of assay skill areas (each box in the image is mapped to call a different sub-page).  The fire room image originally demonstrated the use of HTML image layering by placing text labels on top of the image.  Only Netscape fully supported this proposed HTML layering standard at the time the layered design was posted. Layering was later eliminated to improve viewing consistency among visitors.
• Cascading Style sheets (4 uses = minimum)
• 3 background settings for this site, coded by the style sheet approach, were deleted after the course. With the software and simple design approach I use, using css calls didn't offer much time advantage for me. In addition, it seems that older browsers that can't use css will revert. Since I must keep up non-css views, that adds labor upkeep time for me.
• The css sheet (style1.css) which controlled the expression of the fire assay image page was eliminated for the same reason.
• I may reintegrate the use of style sheet control into my site at a future date.
• A JAVA script alert box (required = 1 mimimum) is included and is triggered by an "about" button in the Javascript e-mail suggestion form. This form is normally accessed through a link in a JAVA script scrolling headliner on the opening page.
• Additional JAVA script elements include
• A Java Script password program, as required by course project guidelines, was originally activated by the button bar link to the family connections page. This feature was deleted and replaced by a server side password routine after the CEP 411 ended. Javascript password routines offer a very insecure level of protection.
• A Java Script generated time stamp in the header was deleted after class ended (too crowded).
• A Java Script routine activates a print button on the family listing page. (viewing this feature is no longer accessible to the public)
• A Java script routine creates pop-up abstracts on the published papers page. (The published papers have abstracts to "popup". Internal IMC publications to not have pop-ups at this time at this time.) The popup feature is handy; it is used frequently in this web site. It is, however, annoying if used inappropriately.
• Edited/ altered Java script were added to the page set. Editing alterations demonstrate an understanding of code element interactions.
1. ) JAVA script provides a demonstration quiz for the safety skill area by clicking the training button and clicking the safety area inside the mapped image of assayer skill areas. This quiz is also accessible on my web site via the JAVAscript banner (next altered JAVAscript program) on the opening page. This program was modified from the SCUBA fish quiz on PADI's web site. View the original by following the SCUBA link on my main page. Additional quizzes in other areas may be added later as space permits.
• I replaced the original question set with a set extracted from an assay exam MS Access database I developed for my employer. (I wish I could figure out how to automate that process!)
• Next, I modified the answer array to match the correct answers in the new question set I inserted.
• Then, I  modified the popup messages provided after both wrong and correct answer entries.
• Table content and some layout features (not part of the Javascript) were also modified for use in my application.
• Similar quizzes are planned for other skill areas, but cyberhighway has caught on to the amount of space I am using.
2. ) A second JAVA script program creates a scrolling headliner for the second page displayed in the welcoming pages displayed in the main frameset. I successfully inserted the working banner into my page, and then made four modifications:
• I inserted my own messages into the banner code.
• I increased the length of the banner box to make it possible to read my longer messages.
• I altered scrolling timing for various messages to change link emphasis.
• I right justified the banner box location to improve the look in the Netscape expression of my page.
• Then I added an extra line of messages to the banner.
• Note: I discovered that the call function of the banner fails if it is placed in a layered type HTML page.
3. ) A third JAVAscript program creates a suggestion form for the web site. It is accessible through a link in the title frame.
• JAVA applets, compiled using JAVA studio 1.0, were added to  demonstrate the ability to code, compile, and install useful programs in a web site. They are used with some reservations . . . they slow down page loading dramatically wherever they are used. It is also important to track the sections added to the classes directory after recompiling alterations in the applets. "Dead" refuse from old compilations waste significant server space.
• A scrolling banner applet was deleted from the page after class ended from the image mapped fire assayer . It took excess server space without adding much value.
• A bibliography menu applet, which accesses a sorted set of bibliography pages, lists links to various categories of assaying titles.  It is reached through main Java script scroll banner or as a link within the "published papers" button. Features include:
• a scrolling banner
• pulldown list calls of web site addresses
• A computing applet models the assayer's role (in a very rough approximation) in decisions used to value an ore deposit (vs.. another rocky mountain of dirt). This model is normally accessed through a link under the production assaying button. Features include:
• a scrolling headliner banner
• multiple slider bar and direct inputs
• multiple calculations with displays of intermediate results
• multiple data flow splits to use data in different functions
• a logical evaluation that displays alternate conclusions depending on the economics of the ore assay inputs
• Database (MS Access) generated static HTML reports (most of the Lib_pages except the Lib_call page). Dynamic database access is not cost effective within the type of free web space I have.
• A portfolio of web page design resources and suggestions, located under computer apps, completes course requirements for this web site design.