hhartley.com redesign

Introduction

The purpose of this project is to redesign my website so that it looks more professional, and people are able to get to different sections more easily. This project was spawned by the fact that I am migrating to the Sun Java Application Server (SJAS) from Apache/Tomcat. This migration will occur over time and enable me to work on the overall layout and structure without changing my existing pages.

Requirements

  1. Each section of the website should be able to stand alone as a website.

    2. In this way if I am successful in making this something people will want to view and utilize, I can move the sections out from under hhartley.com to be their own stand alone site. Lightreading is a good example of this design.

  2. Where possible, I should be able to include sections of the screen, rather than redoing them for every page.

    3. This will simplify the development of the overall site, promote a consist ant look and feel, and enable dynamic content developed in a JSP once, rather than multiple times across multiple pages.

  3. All pages on the website will use a single stylesheet across the entire site.

    4. This will simplify development and look and feel.

  4. Tags and tag libraries will be utilized for JSP's. Use of scriptlets is discouraged.

    5. This promotes ease of development and consistency of design.

  5. The structure and architecture of the website should be standard enough to utilize tools such as Dreamweaver.

    6. Dreamweaver (and others) are useful for WYSIWYG editing of the website, spelling checking, batch utilities, and find and replace tools. The later two are important for migrating pages.

Website Sections

Each website section should stand alone. Subsections will offer navigation within the website sections.

Section Subsection Description
Personal Intro This page will provide the basic welcome identifying the purpose of the website. This page will also include my favorite links for ease of navigation with this as my home page. 
Blog Will provide a basic blog with date navigation in a sub menu to the left. This blog will be about personal information and events that are noteworthy.
Have Life The basic about me web page migrated from my current website.
Photos and Art Redo of the photos and art section, migrating every picture navigation page would be a huge pain. Therefor I will select a few of my favorite pictures for each category or time period. For pictures of Sophia I will just link to static HTML pages also on the website. These pages will not include the new look and feel of hhartley.com.
Friends and Family The basic friends and family web pages migrated from current hhartley website.
Career The basic career pages migrated from the current hhartley website.
Messing Around Intro This page will provide a basic table of contents to the messing around pages. A brief description of each messing around page will be provided.
About Will provide an overview of my environment and software development goals and plans.
Blog Will provide a basic blog with date navigation in a sub menu to the left. This blog will be about software development topics that I find noteworthy.
HTML/CSS The basic HTML pages migrated (and updated) from the current hhartley.com website.
Server The Servlet pages migrated (and updated) from the current hhartley.com website.
Database The MySQL pages migrated (and updated) from the current hhartley.com website.
XML The XML pages migrated from the current hhartley.com website.
SOA Newly developed pages providing insight and examples into Web Services and SOA.
Client AJAX and Flash examples.
Projects Intro A basic description of each project will be provided on this page.
MyGossary The MyGlossary project pages migrated from the current hhartley.com website.
HHBlog HHBlog requirements and design.
Release Mgr Release manager project pages migrated from the current hhartley.com website.
HHTrader The requirements document and design specification put into HTML.
CBL_XML CBL_XML requirements and specifications.
hhartley.com This page.
ITVGuy2000 Intro TBD. Will provide a glossary of cable terms. Will provide a basic history and background to cable and broadband.
Links and Blog TBD. Will provide significant links for cable and broadband, and my blog of what I find noteworthy in cable and broadband.
Projects and Strategic TBD. Will provide an overview of the current projects, and issues. Many of these will be presented from a political and strategic perspective.
Architecture TBD. Will provide an architectural current and future.

 

Page Layout

Every page should have at least the following page sub elements.

Page Element Description
Header The header will consist of the name of the website, with some graphics for look and feel. Time and Date will be displayed with an optional link to login.
Footer Footer will consist of copyright, contact info, and last updated information.
Top Nav Top Nav will consist of the topmost sections identified in the website sections above.
Left Menu Left Menu will consist of subsections of the major sections identified above.
Main Body This is the content for each section/subsection.
Right Column 1 Will consist of either advertising or of sub-content. Examples are Google ad sense, or dates of blog entries (for example).
Right Column 2 Same as above, but another region of the screen. Will consist of advertising or sub-content.

Look and Feel

I have had fun with colors and strange looking tables. While I would love to continue this, I can't. I want people to take this website seriously, so the prevalent background color will be white. I intend to make use of colors in tables, headings, links, and elsewhere. Generally these colors will be based in blue or gray.

Example

The figure below depicts a prototype of a new layout for hhartley.com.

SW Architecture

Each page will have the following structure where the header, footer, navigation, and menu are included fragments. These fragments will align with div identifiers in the cascading stylesheet.

                    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"/>
<html lang="en"/>
    <head>
        <meta http-equiv="content-type" 
                content="text/html; charset=iso-8859-1"/>
        <META HTTP-EQUIV="EXPIRES" CONTENT="0">        
        <link rel="stylesheet" 
                type="text/css" href="/portal/resources/reset.css"/> 
        <link rel="stylesheet" 
                type="text/css" href="/portal/resources/mystyles.css"/>
        <title>hhartley.com home page</title>
    </head>
    <body>
        <div id="container">
            <%@ include file="/WEB-INF/jspf/header.jspf" %>
            <%@ include file="/WEB-INF/jspf/mainnav.jspf" %>
            <%@ include file="/WEB-INF/jspf/menu-personal.jspf" %>

            <div id="contents">
                <h1>Blah!</h1>
            </div>
            <%@ include file="/WEB-INF/jspf/footer.jspf" %>
        </div>
    </body>
</html>