Work Site

Support Documentation

Statement of Completeness

When I first came up for the general idea of using a scaleable notepad for this site I thought I remembered the hassles I had in the last assignment and thought I would never get it to work. This mentality led me to thoroughly plan and develop my ideas for the website on paper before implementing it. Amazingly the whole website worked almost first try across all browsers while validating.

Cross Browser Compatibility

I encountered a few bugs in some browsers like the 3px bug caused by floats in IE and the disappearing text bug though these were easily fixed using hacks found on the web. Unfortunately because I'm using hacks my CSS will no longer validate so I had to make a compromise. I had to compromise again when I realised that the target='_blank' attribute I used for the activity links has been depreciated for XHTML strict; I tried java script though it severely messed around with Opera so in the end I removed it.

SVG

Some of the main issues I have are with the SVG. The little animations I have used in the top corner of each page played fine in their own window, but when there displayed as part of the page they seem to loose their element interactivity provided from a linked java script file. What was even worse was when I tried uploading these file onto the internet to http://www.ddesfolio.org/riesz/, they didn't read the CSS file either. I tried using inline java script and CSS instead; this approach worked for the CSS though not for the java script.

Java Script

I encountered many problems when I tried to implement some simple java script for the worksite, some that I still haven't managed to fix. The script used for the menu rollovers (changing the image on the PDA) sometimes gives an error message when it initially loads. The error reads: 

Line 11
'PDAImage' is null or not an object
Check List

Apart from these minor problems a have successfully completed the following checklist without encountering any problems:

  • No bad links.
  • XHTML and CSS Validate (except for the hacks and embedded tags I used).
  • Meets the accessibility standards.
  • Cross browser compatibility.
  • Graphical content is of appropriate file size and format.
  • Appropriate folder/file structuring and naming conventions.
  • Proper indentation and commenting in the code (CSS, XHTML, SVG and Java)
  • Appropriate and Clear interface and hierarchical structure.
  • Readability (considering fonts, colours, headers, ect.)
  • Handles most resolutions and text sizes (appropriate units of measurement).

Reflections (Findings & Thoughts)

As I said in the Statement of Completeness I never really believed my initial design would really work due to its complexity with the way it's meant to resize at different resolutions. Though in the end I was amazed at how it all fell into place. Once I had the basic template formed I just copied the file and inputted the body text and header. I had the site up an running in about 2 days work so I started adding extra functionality like SVG's in the top corner of each page, site map, home page and the PDA changing image, (in that order).

Adding these extra elements after the web site was already created became a very tedious process as I had about 25 pages I had to update each time. Even with certain tricks (like using the replace text for all pages in site command in dream weaver) it was still very frustrating but necessary.

Images

The only image in the webpage that wasn't original was the PDA device. The rest of the images I either photographed or scanned and edited with Photoshop. I had a lot of fun performing this process as it made me feel very professional using the wide range of devices. Linking up the images on the webpage so they sit flush was a very tricky process as the surrounding float used for the menu interface caused all sorts of issues in Internet explorer including the notorious 3px bug where 3 pixels were added to the border of the surrounding element (its small, but enough to ruin my entire design).

Implementation approach

When fixing these little bugs to achieve cross browser compatibility I realised certain tendencies that helped me develop a sort of process:

  1. Mozilla 1.6 is generally a very strict browser and if you do it the right way it's almost guaranteed to work, so I developed my web page's to work in Mozilla first.
  2. Generally if it worked in Mozilla it tended to work in most other self respecting browsers like Opera, Netscape, Safari, and Camio (a lot of which are based on the Mozilla engine).
  3. Internet Explorer on the other hand is not a self respecting browser and creates the most headaches like the disappearing text bug, 3px bug, bouncing box bug, and many more. Though most of these bugs are well documented on the net and if you follow their simple steps they usually lead to IE compatibility.
  4. One handy trick I found was using the tag '*html' before the element name in the CSS file. Due to a bug only IE can see this tag. So you use one bug to fix another. Unfortunately this means the CSS won't validate though I still think it's an ingenious trick.
Animations

Although creating the SVG can sometimes become tedious and frustrating I enjoyed the challenge of making all the SVG's for each page. It's rather unfortunate that the interactivity provided for some of the animations doesn't work but I still think they give the site a nice look and were well worth the effort.

Scripting

I'm rather new to the concept of programming for the web. I do software development 1 as a part of my course in which we learn java, but that only helps so far. Unfortunately most of the scripts I tried to implement didn't work due to this lack of knowledge.

When I look back on what I did I'm still amazed it all worked. I also had a lot of fun in the process of making the entire site and I'm keen to start work on my own website, though I think in that one I might use flash instead of SVG.

References

--This does not represent the final submitted documentation--