Monday, 3 February 2014

Web Development Technical Guidelines

1. Hosting Environment 

Web Server Operating System

Web Server Software

Scripting Environment

2. Target Audience Configuration Assumptions

Browser Information including browser, OS Platform, Screen and Colour Statistics.

3. HTML Component

W3C Standard web design and applications such as HTML & CSS.

4. File and Folder Structure and Naming
The site will make use of the following principals of File and Folder Structure and Naming.

File/Folder Structure

The directory structure created for a Web site must be created logically, and must have a structure dictated by the site's generalized elements and content types.

The following sample directory structure demonstrates an element-dictated structure:

/wwwroot/

/wwwroot/index.html

/wwwroot/scripts/

/wwwroot/content_directory1/

/wwwroot/content_directory1/*.html

/wwwroot /content_directory1/images/*.gif

/wwwroot /content_directory2/

/wwwroot /content_directory2/*.html

/wwwroot /content_directory/images/*.gif

The root directory contains all sub-directories files related to the Web site. For readability and clarity, the application root directory should be named in a way that conveys what the site is about, for example /sitename/. Application root folder names that might be misidentified should be avoided.

Naming Conventions

Directory and file names should be long and descriptive (within reason), ensuring that navigation and file identification by site administrators is as simple as possible. Spaces in directory and file names must be avoided; however a series of words in names may be delimited by the underscore symbol _.

Basic Naming Principles

  • no spaces in file names
  • meaningful file and directory names
  • .html file extension for all HTML files (consistency)
  • subdirectory whenever there is a significant number of similar files (breadth vs. depth)
  • should always be a top level file called index.html or default.html, even if it is a pointer to another file
  • directories should have first letter capitalized
  • files names should be all lower case
  • multiple word file names linked with underscore (_ not -)


Case Conventions

Consistency of character case is imperative. The following conventions should be used:

FILE NAMES: all lowercase characters; multiple word names should be separated with the underscore (_). For example: sitename_listen.html

DIRECTORY NAMES: All site directory names should be lowercase. In the case of multiple word names each new word should be separated with an underscore. For example: sitename_listen.


5. Navigation Systems


There are 3 general characteristics of Web site navigation systems: information organizational strategytechnical implementation, and the user interface.

Organizational Strategy

The typical structure of a web site is a hierarchy with multiple levels and sections of content. Site structures generally allow users to navigate through information, moving from general topics to specific elements and facts. Each time a user clicks on a heading to obtain more specific information, they move down a 'level' in the site's hierarchy. Each time a user clicks to access information found under a different information type, they move across content sections. To maximize usability, an effective navigation system should allow for both types of movement. Users must be able to navigate freely through content sections and levels, in a consistent and continuous manner.

For the site, the main content sections will dictate the global navigational headings, and therefore represent the first level of the site after the user has reached the main page. Within each global navigation heading will be associated subheadings corresponding to the second, and then third, fourth, etc. levels of the web site. The navigation system should allow users access to all of the site's information, easy identification of location, no disorientation, and facilitate easy navigation between levels and sections.

Technical Implementation

The navigation system for the [insert site name here] site can use graphical icons, standard HTML hypertext, and JavaScript rollovers to provide global and sub-navigation opportunities to users. The global (top level) navigation elements can use graphical icons and JavaScript rollovers, while sub-level navigation can be HTML hypertext.

Basic Functionality

Graphical icons created for the global level content sections can use JavaScript rollovers to swap icons on mouseover events, adding flair and interactivity to the interface. Provided that JavaScript is enabled, most commonly used browsers and platforms can accommodate this JavaScript functionality. Users interact with the menu system by moving the mouse over the main navigational headings and clicking on them. The sub-navigation elements on a selected page reflect the user's location in the site. Navigation in levels deeper than the second or third levels is handled locally within the content section. This can be through the use of additional icons, simple hypertext links, or drop-down menu boxes.

6. Additional Functionality

  • Google search
  • HTML-based forms and associated form handling scripts
  • Tools that facilitate the administration of the site
  • Multimedia components and functionality
  • Database interaction
  • Dynamic page / site generation
  • Personalization
  • Cookies
  • Surveys, quizzes, random panels
  • Social media marketing.