Web Systems

How Does This Thing Work?


Who knows what the future will bring?
A 3D representation of the index page of this site (created with the 'Tilt' Firefox Plugin).

Technical

The website is written in entirely valid XHTML 1.0 Strict markup and CSS level 3.0. W3C validity badges have been provided at the footer of each page for per-page single-click validation.


The document begins with a single line of PHP which executes before any HTTP data is transmitted to the client. The statement appends the 'Content-type' and 'charset' properties to the HTTP header which ensures that there are no character misinterpretations before the HTML interpreter reaches a <meta> tag with the http-equiv attribute.


The document type is declared as XHTML 1.0 Strict and a HTML tag is opened with the default XML namespace attribute. The title of the document is declared within a <title> tag, 'author' is declared with a <meta> tag, and the character encoding and document type are declared using the HTTP-equivalent attribute of another <meta> tag. Finally, the primary stylesheet is linked to the document at the end of the HTML header.


The document body begins with a standard <body> element with a few CSS properties including background properties, margins, colour and font family (which is inherited by all nested elements, unless modified otherwise). The background is declared with the following snippet: [CSS]
background:url("images/wsBG.jpg")
  #050407  fixed  no-repeat  center  top;


wsRoot is the ID of the first division within the body, followed by wsHead, which is the division containing the title image which is centred using auto margining and is moved to the left by assigning a negative relative left margin (overflowing content is made visible). The next division, wsBackbone, encapsulates wsBody and creates the light-grey background below the title image.


wsNavbar, the navigation bar table division, exists within wsBody. The navigation bar is a 1-row by 4-column table. Within each cell is an image link (page name) and either a stretched 1px-by-1px transparent GIF or a 'selector image' (green rectangle) with relative positioning and a lower Z-index than each navigation name (page title) image.


The document content commences after the wsNavbar ID. A <h2> element contains a short description of the current page. Along with many other elements, element style selectors have been implemented to modify the styling properties of certain elements without class / ID names. H2 elements have a bold serif font and a CSS3 text-shadow. [CSS]
text-shadow: 1px 1px #EAEAEA;


A horizontal rule is inserted after the page heading, which is followed by the wsContent division. An instance of the conImg class contains an image and a span with a short description. [HTML]
<div class="conImg">
  <img src="images/content/*.jpg"
    alt="..."
    longdesc="*.txt" /><br >
  <span class="conImgDesc">
     ...
  </span>
</div>


The conImg class is a right-floated div with a width of 1% to dynamically constrain its width to that of the child image (not the span), and a display type of 'table'. The division implements a CSS3 drop shadow, not a semi-transparent background image, which reduces bandwidth, and consequently, download time for the user. A direct inheritance selector constrains the width of all images within any instance of conImg to 325px. [CSS]
.conImg > img { width:325px; }


The index page contains an unordered list which displays personal information and page-jumps to a few of my projects. List item rollover is achieved using a complex CSS selector that targets hovered list items anywhere within the conListWrap ID, excluding instances of conLiHead, which is the list item header. The following code snippet demonstrates the CSS selector: [CSS]
#conListWrap li:not(.conLiHead):hover
{
  background:#DDD;
  border-left:4px solid #AAA;
}


Large bodies of text are placed into paragraphs. Right-floated images simply inherit the conIntextImage class which floats the image to the right and applies a white border. All such images have a constrained width for the purpose of consistency.


The document ends with a footer, wsTrailer, which occupies 100% of the display width. The footer contains license information and links to the W3C markup and CSS validation services. The CSS validity badge's embedded style was moved into the stylesheet with its own ID.

Aesthetics

The website was designed with an 'exciting, portfolio-like' theme in mind. The document body was designed to be simple and minimalistic, so as to draw the users' attention to the textual and graphical content. The background and footer conform to the user's display size, while the body retains a constant width, which complements the portfolio-like design. The title image, designed in Autodesk 3Ds Max and VRay, implies a dramatic theme, while the surrounding purple clouds enforce it.


Grey, purple and some green is utilised in the website's colour palette. Binding green to clickable objects familiarises the user with links and encourages them to click such links.


Constraining written content to a limited width reduces repetitive eye movement for the user. Justified text alignment is implemented to maintain a static visual padding between text bodies and their parent paragraph tags. Inline images are floated to the right of text so that the user's eyes always return to the same point at the end of each line. The paragraph background colour contrasts greatly from the text colour while not being so stark as to strain the user.


Most container divisions implement a light border to contrast them from their background. Most implement a simple 1-pixel solid dark-grey border, while the right-floated image has a thick white border with a CSS3 drop shadow.


A constant design and size (usually width) is maintained across every page for each element so as to maintain style consistency across the entire site. Images, the body, content and text is of a consistent size and style across the entire site.


Margins and padding is used throughout the site to create sufficient spacing between elements without causing a sparse layout.

Accessibility

Accessibility was a fundamental consideration of the website while it was being constructed. The design and technical aspects reflect the website's goal of inclusivity.


Almost all images throughout the website have 'longdesc' attributes which link to external text documents with a description of the image. All non-background images implement alternate text attributes. These two attributes provide a means for screen-readers or Braille displays to provide a spoken or textual representation of each image to aide blind or severely visually impaired users.


The simple, high contrast colour scheme of the website aids visually impaired users. The highly division-based layout, clearly defined and information-oriented design of the site contribute to its inclusive properties.


Users with motor disabilities benefit from the narrow paragraph width, as users are not required to scan their eyes or pan their head across the entire display width.


UTS FEIT Web Systems | Website Assignment by Deinyon Davies (11688025). Distributed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Australia license (CC-BY-NC-SA 3.0 Australia).

This website is written in entirely W3C-valid XHTML 1.0 Strict and CSS level 3.


Creative Commons Licence  Valid XHTML 1.0 Strict  Valid CSS!