ICT211 Assignment One – James Norris [30799472]
School of Information Technology
ICT211 MAJOR ASSIGNMENT ONE COVER SHEET
SEMESTER 2, 2010
Surname (Family Name): Norris
Given Names: James Edward
Student Number: 30799472
Tutor’s Name: Ross Maloney
Assignment Due Date: 24/09/2010 Date Submitted: 26/09/2010
Extensions are granted only in very special circumstances, and must be approved by the Unit
Coordinator BEFORE the due date. If the extension is granted, you must include the relevant email in
this document.
Your assignment should meet the following requirements. Please confirm this (by ticking boxes)
before submitting your assignment.
 All details above are complete.
 The tar file contains the file Assignment1.docx. The documentation was prepared according to
Documentation Requirements specified in Major Assignment 1’s question sheet.
 The tar file includes two full web-sites for Task 2 and Task 3. They are stored in directories task2
and task3 respectively.
 The two web-sites are hosted in medusa and their URLs are given in the relevant documentation in
file Assignment1.docx.
 I understand that the tar file should be submitted to ICT211 Unit LMS.
 I have kept a copy of this assignment, including the tar file.
 Declaration below is completed.
All forms of plagiarism, cheating and unauthorised collusion are regarded seriously by the University
and could result in penalties including failure in the unit and possible exclusion from the University. If
you are in doubt, please contact the Unit Coordinator.
DECLARATION
I declare that, except where I have indicated, the work I am submitting in this assignment is my own
work and has not been submitted for assessment in another unit. I also acknowledge and agree that the
assessor of this assignment may, for the purpose of assessing this assignment:
• reproduce this assignment and provide a copy to another member of faculty; and/or
• communicate a copy of this assignment to a plagiarism-checking service. This web-based service
will retain a copy of this work for subsequent plagiarism checking of documents submitted from
Murdoch, but does not claim any rights on the information submitted and has provided assurances
that information submitted will not be used for any purposes other than providing plagiarism
detection services to Murdoch.
YOUR NAME HERE: James Edward Norris
(Where you are submitting this declaration electronically, you do not need to sign it. The fact that you
have included it with your assignment to the Unit LMS is evidence of your agreement.)
1
ICT211 Assignment One – James Norris [30799472]
No Extension Granted
Table of Contents
Task 1 – Page 2
Task 2 – Page 4
Task 3 – Page 9
Task 1
Company Details
Name: COMParts Australia
Address: 3378 Lakesville Avenue, Perth
Phone: 9298 1155
Email: sales@comparts.com.au
General Introduction
COMParts Australia is committed to the sale of only the highest quality computer hardware
components, custom built computers – including labour, and accessories. Our goal is to
provide specific products in a variety of categories to suit a computer enthusiast audience,
at the greatest possible value.
Having been serving enthusiasts since early 2003, we’ve come to realise the best possible
approach to computer hardware. With us, there are no gimmics or sales; just quality lowprice components, a user-friendly website, and solid customer service.
Product Information
Our products include all kinds of quality PC components. We offer all the standard parts:
motherboards, CPUs, power supply units, cooling systems, memory, hard drives, optical
drives, expansion cards (video etc), displays, cases, input/output peripherals (keyboards,
mice, speakers, headphones etc.) and more, along with plenty of extra options: barebone
systems, notebooks, software, uninterruptible power supplies, network cabling, media
players, tablets and still more! All from a variety of different, nationally trusted brands, like
ASUS, Gigabyte, Intel and MSI to name just a few.
Online Trading
Product details will be kept in a database, which will provide product details to users as they
request them from a catalogue of product links, organised by category, based on component
type. Users will also be able to search for products using keywords. Casual users will be able
to browse our website and search, but will need to create an account in order to purchase
products (see a purchase button). Registered users will be able to browse and purchase.
Website staff will be able to modify item properties, and add/delete items.
Product List
(The following are a small selection of software components applicable to this type of
website – many specifics have been left out for simplicity. Brands may possibly need to be
left out or given alternate names in Assignment 2 due to potential copyright issues. In any
case the brand name adds a potential search keyword for each product.)
 Barebone System 1 – Various Components – Shuttle
2
ICT211 Assignment One – James Norris [30799472]






























Barebone System 2 – Various Components – MSI
Motherboard 1 – Supports Intel CPUs – ASUS
Motherboard 2 – Supports AMD CPUs – Gigabyte
CPU 1 – Core i7 3.2 GHz – Intel
CPU 2 – Phenom II 3.2 GHz – AMD
PSU 1 – 650w – Thermaltake
PSU 2 – 650w – Corsair
Cooling 1 – 80mm Aux Fan - Antec
Cooling 2 – Water Cooling System - Thermaltake
RAM 1 – 2GB DDR2 – Kingston
RAM 2 – 2GB DDR3 – Corsair
Hard Drive 1 – 2.5 inch Sata 250Gb 7200rpm – Hitachi
Hard Drive 2 – 3.5 inch Sata 500Gb 7200rpm – Seagate
Graphics Card 1 – DDR5 1024mb GRAM – nVidia
Graphics Card 2 – DDR5 1512mb GRAM – AMD
Display 1 – 20 inch LCD – ASUS
Display 2 – 30 inch LCD – Acer
Case 1 – Black – Thermaltake
Case 2 – Silver – Cooler Master
Keyboard – Logitech
Tablet – Wacom
Mouse – Microsoft
Network 1 – Cable – Standard
Network 2 – Switch – Cisco Linksys
Speakers – Altec Lansing
Notebook – ASUS
Headphones – Logitech
UPS – Upsonic
Software 1 – Office – Microsoft
Software 2 – Windows 7 – Microsoft
3
ICT211 Assignment One – James Norris [30799472]
Task 2 Documentation
[2.1] Task Description
Task 2 (30%): A Web-site About Yourself
Design and code in XHTML 1.1 and CSS a web site that describes yourself. The actual content
is up to you but you may include personal details, such as your name and photographs,
something about your life, what you are doing, the sports you love, your family, anything
you are passionate about. There is no limit on what you can write. If you have any privacy
concerns you may replace some real information with fictitious ones (eg, date of birth,
contact details, and names of family members). For the purpose of this task, I am concerned
about the presentation quality, not the accuracy of the information.
The web-site must meet the following conditions:
1. The code must be valid XHTML 1.1 code. You must present evidence that your code
has been validated.
2. All presentation/formatting instructions must come from an external style sheet. Do
not attempt to specify formatting instructions with XHTML tags.
3. Your web-site should be hosted on medusa. The files of your web-site, including the
external style sheet, should be placed under the directory public_html/assignment1
under your home directory.
4. Your web pages and style sheet must be hand coded using a text editor. For this
assignment, we do not accept code that is automatically generated using software
tools such as Adobe DreamWeaver or Microsoft Office.
5. Your web-site must have at least three pages.
Marking Guide: The assessment of your web-site will be based on 1) aesthetic of your website and the quality of your style sheet (15 marks), 2) the clarity of your content (5 marks),
and 3) the adequacy and richness of XHTML elements you have used in your document (10
marks).
[2.2] Solution Discussion
[2.2.1] Novelties
My website has been designed to look appealing, yet slightly poisonous, in order to
reflect my own assessment of my personality. I’ve exploited colourful borders to
make it appear tabular and coherent. I’ve also used text that seems to appear and
disappear again on mouse-over in some areas, just for a neat demonstration of the
power of css.
[2.2.2] Technical Choices
My website mostly exploits the flexibility of the <div> element to create a layout
which uses absolutely no images in its actual construction. It is of a fixed width and
height, both to accommodate small screens, and to maintain its appearance across
computers. I’ve included child <div> elements inside parent <div> elements in the
actual site construction, in order to get the neat border effect, and also to avoid
issues with padding that arise from placing content directly in parent <div>
elements. If I had done this, I would have had to reduce widths and heights of these
parent <divs> to accommodate padding and margin attributes. I have also used
<div> to float handfuls of multiple elements left in sets, next to each other. This is
useful for creating small columns of information. I have also opted for a fixed height,
which means browsers may unfortunately push certain elements out of the visible
content area – usually adding an ugly scrollbar, but this is undesirable nonetheless.
[2.2.3] Expectations
4
ICT211 Assignment One – James Norris [30799472]
I am entirely happy with my website’s performance in the latest versions of all five
major browsers. I decided to try and support Internet Explorer 6, as well – as much
as possible, as it supposedly still has a very large number of users. I didn’t expect
that it would completely misalign all of my content at first. In the end, I managed to
mostly achieve compatibility through an extra stylesheet, but I had to cut down on a
lot of elements, and of course, .png transparency is not supported in IE6, but I did
not feel it was worth replacing images for.
[2.2.4] Strengths & Weaknesses
My website is versatile in terms of screen sizes that can view it correctly, but it does
not scale to larger sizes for high resolutions. Content is neatly collected in a small
area, but it can sometimes spill and cause scrollbars to appear – which can also mess
with the borders I have in place. Also, the use of XHTML 1.1 means a few useful
elements are prevented from working if they are to remain valid – such as the image
maps.
[2.2.5] Possible Improvements
There are so many improvements I could make. But I think primarily, removing the
borders entirely and re-working the site to use images would make support for older
browsers and content-spill easier. Also, a layout that expands vertically to the
content might be a good idea. However, I still run into trouble when trying to find a
way to make multiple columns stop at the same point – #sidebar and #content for
example.
[2.3] Self Diagnosis
I have completed the website to the best of my ability within the allotted time and given the
assignment constraints – I don’t believe anything specified in the assignment has been left
out specifically. The three pages in the task2 directory are completely XHTML 1.1 valid, as is
my stylesheet. I have kept all styles in the external stylesheet(s) and avoided using inline
styles at all. My website is also entirely hand coded. However, my support for Internet
Explorer 6 – though I assume not required, is not to the same standard as my support for
modern browsers. It’s enough that the content works without being heavily distorted,
however.
[2.4] Relevant URLs
 http://medusa.murdoch.edu.au/~30799472/assignment1/task2/index.html
 http://medusa.murdoch.edu.au/~30799472/assignment1/task2/interests.html
 http://medusa.murdoch.edu.au/~30799472/assignment1/task2/links.html
 http://medusa.murdoch.edu.au/~30799472/assignment1/task2/stylesheet.css
 http://medusa.murdoch.edu.au/~30799472/assignment1/task2/ie6.css
5
ICT211 Assignment One – James Norris [30799472]
[2.5] Relevant Screenshots
Home: Shows off use of headers, ordered and unordered lists, and a table – as well as cross-site elements
like the footer which appears in small capitals, and the navigation which reveals heavy css styling.
Interests: Shows off use of multiple elements stacked next to each other through floated <div>s, and how
<span> elements can be used inside links to make text appear and disappear depending on the location of
the user’s mouse.
6
ICT211 Assignment One – James Norris [30799472]
Links & Misc: Shows off more div floating, the use of the <pre> tag to display preformatted text, a
definition list, and an image-map rendered broken due to a dilemma involving XHTML 1.1 Strict and it’s
lack of support for the “name” attribute, and browser support.
Simple preview of the primary stylesheet associated with the website.
7
ICT211 Assignment One – James Norris [30799472]
Simple preview of the Internet Explorer 6 stylesheet associated with the website.
8
ICT211 Assignment One – James Norris [30799472]
Task 3 Documentation
[3.1] Task Description
Task 3 (30%): JavaScript Programming
Write three XHTML/JavaScript pages to do the following:
Page 1 - Use JavaScript to display the following information:
 The current date and time in the following format: Day, Date Month Year
(Hours:Minutes). Use the following colours for different date and time components:
Day in red, Date in green, Month in yellow, Year in blue, Hours and Minutes in
brown.
 The name of the web browser used to display the page.
 The number of forms, anchors and links in the page (for testing purpose, please
include a few forms, achors and links in the page).
Page 2 - Validate and calculate a book order:
Design a form to allow the customer to input an order for books. The form must include the
following information: a textbox for the customer to enter his or her name; a list of book
titles and their unit prices as well as the textboxes for entering the number of books ordered
for each title (initial value is zero); a radio button group for the customer to select the
shipping method (either by surface mail or by air mail); a button to validate and calculate the
total cost of the order (the total cost button); and a textbox to display the total cost of the
order (the total cost textbox).
When the total cost button is clicked, a JavaScript code will firstly validate the customer
inputs (eg, the customer name is entered, at least one book is ordered, the numbers entered
are all valid numbers, for instance, they are not negative). If the form is validated
successfully, the script will then calculate the total cost of the order. The total cost is the
sum of the costs of the books ordered plus 10% GST, plus the shipping charge. For surface
mail, the shipping charge is fixed at $10 per order, but for air mail, the shipping charge is $12
plus 2% of the book cost (excluding GST). Finally display the total cost in the total cost
textbox.
Note that the list of book titles available for sale must contain at least three book titles.
Page 3 - Enter and sort student names:
Create a form to allow the user to enter student names, one at a time. These names are
added to an array and displayed in the page using the textarea form element. Each time a
new name is entered, it is added to the array, and then the array is sorted in alphabetical
order before the names in the array are displayed in the textarea, one per line.
Please include a main page with links to the above three pages.
[3.2] Solution Discussion
[3.2.1] Novelties
For the sake of ease of navigation for both me and the marker, I decided to
incorporate the scripts into my task 1 website, still honouring the need that the
associated files be in a separate folder. The files for task3 link to my original
stylesheets, purely for aesthetic coherence, and also to their own stylesheet – which
adds styles relevant to the javascript used. The scripts will continue to function as
normal if the task2 stylesheets are not accessible. Page styling will simply be minimal
in that case. The end result is that all parts of this assignment can be accessed from
all pages of the website, while still residing in folders appropriate to their task
number. I would not say there is anything particularly special about my style of code,
apart from that I have tried to comment as much of it as possible without being
overly pedantic.
9
ICT211 Assignment One – James Norris [30799472]
[3.2.2] Technical Choices
For page 1, I have used simple document.write statements to print code to the
document. Supposedly, this isn’t a great way to do things, and getElementById
should be used in conjunction with .value to dynamically add items. For the sake of
simplicity though, I stuck with document.write. Otherwise, everything is fairly
standard.
For page 2, I have used if(error == 0) blocks to stop various errors occurring before
others. There is probably a much better way to organize the errors together, but
time constraints got in the way. I have also used a for loop that looks very inefficent
to me in my book cost calculation, but feel that, since it is working reasonably, and
there are only two elements involved – it isn’t vitally in need of refactoring.
For page 3, the majority of the work is in the reasonably complex regular expression
I’ve used to ensure names are entered in a particular way. It is worth noting that
http://regexlib.com/CheatSheet.aspx was an invaluable resource for working out
what different parts of the expression should do, apart from the lecture notes. I also
am not sure whether using a globally declared array was a great idea. I’ve been
taught to avoid global variables in the past, but I was unable to avoid errors when
trying to pass the array to a function.
[3.2.3] Expectations
I expected page 2 to be a lot easier, and was surprised when I discovered an
apparently simple form requires such complex code – but then I could probably
optimize it further a fair amount. Otherwise, things perform as expected now for
each page. I am particularly happy with the usefulness and reliability of regular
expressions.
[3.2.4] Strengths & Weaknesses
Most of my code is quite specifically designed for this assignment, and likely not
terribly easy to modularise and use elsewhere without significant refactoring. I’d say
the main strength is that it actually finally works, given the countless problems I had
with it.
[3.2.5] Possible Improvements
My code could be far more portable if I delegated tasks to smaller functions which
each only performed one task, and probably more secure if I avoided global
variables. Also, my overuse of document.write is questionable and it would seem
there are better dynamic alternatives.
[3.3] Self Diagnosis
To the best of my ability, everything requested in the assignment sheet has been completed
– but I’m not sure my javascript code is particularly brilliant. One thing that may have been
expected, but I can’t be sure of, is filtering of the output of browser detection to more
accurately provide an answer. This was not done, and so browser detection is rudimentary.
While the javascript pages may not appear to be a separate website – they actually are, and
will operate fine without the original stylesheets due to proper semantic XHTML layout. I
could have duplicated the stylesheet from task2, but felt it would be useful to demonstrate
the linking of files in adjacent directories.
[3.4] Relevant URLs
 http://medusa.murdoch.edu.au/~30799472/assignment1/task3/index.html
 http://medusa.murdoch.edu.au/~30799472/assignment1/task3/page2.html
10
ICT211 Assignment One – James Norris [30799472]


http://medusa.murdoch.edu.au/~30799472/assignment1/task3/page3.html
http://medusa.murdoch.edu.au/~30799472/assignment1/task3/stylesheet.css
[3.5] Relevant Testing
[3.5.1] Page 1
Test
Type
Input/Expected
Result
Passed?
1
1
1
3
Browser
Browser
Browser
Browser
Mozilla Firefox
Safari
Opera
Chrome
Yes
Yes
Yes
No
5
Browser
Internet Explorer
6
Time/Date
7
Time/Date
Sunday, 26 September 2010 (10:53)
Yes
8
Forms/
Anchors/
Links
Saturday, 25 October 2011 (8:15)
(Computer Clock Adjustment)
Sunday, 26 September 2010 (10:53)
(Computer Clock Adjustment)
Number of Forms: 3
Number of Anchors: 5 (one with ID)
Number of Links: 18
Netscape/...Firefox 3.6.10
Netscape/...Safari/533.18
Opera/Opera 9.80
Netscape/...Chrome/6.0.472.63
(Several browsers listed, not definite)
Microsoft Internet
Explorer/...compatible: MSIE 9.0
Saturday, 25 October 2011 (8:15)
Number of Forms: 3
Number of Anchors: 4
Number of Links: 18
9
Forms/
Anchors/
Links
Partly
(Some
browsers
detect 5)
Yes
Test
Type
Input/Expected
Result
Passed?
1
First Name
Error for both first and last name.
Yes
1
First Name
Error for both first and last name.
Yes
1
First Name
Passes, error for only last name.
Yes
3
Last Name
Error for only last name.
Yes
5
Last Name
Error for only last name.
Yes
6
Last Name
Error for only last name.
Yes
7
Last Name
Error for only last name.
Yes
8
Last Name
Error for only last name.
Yes
9
First & Last
Names
Names &
Books
Names &
Books
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
“0”
Error for both first and last name.
“zombie”
Error for both first and last name.
“Correct”
Passes, error for only last name.
“+”
Error for only last name.
“Iama1337biscuit”
Error for only last name.
“Correct?”
Error for only last name.
“John Smith”
Error for only last name.
“Magic “ <- (space)
Error for only last name.
“Correct” and “Magic”
Passes, error for 0 books entered.
“Correct”, “Magic”, “0”, “0”, “0”
Error for 0 books ordered.
“Correct”, “Magic”, “1”, “1”, “1”
Error for no radio button checked.
“Correct”, “Magic”, “1”, “1”, “1”,
“Surface Mail”
Passes, Total Cost: $262.95
“Correct”, “Magic”, “2”, “13”, “99”,
“Surface Mail”
Passes, Total Cost: $14287.29
“Correct”, “Magic”, “999”, “999”,
“999”, “Surface Mail”
Passes, Total Cost: $252702.06
Passes, error for 0 books entered.
Yes
Error for 0 books ordered.
Yes
Error for no radio button checked.
Yes
Passes, Total Cost: $269.95
Yes
Passes, Total Cost: $14287.29
Yes
Passes, Total Cost: $252702.06
Yes
Number of Forms: 4
Number of Anchors: 7 (all name)
Number of Links: 23
(Temporary Code Adjustment)
Number of Forms: 3
Number of Anchors: 7
Number of Links: 23
Yes
Yes
[3.5.2] Page 2
10
11
12
13
14
11
ICT211 Assignment One – James Norris [30799472]
15
16
17
18
19
20
31
22
23
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
Names,
Books,
Radio
“Correct”, “Magic”, “1”, “1”, “1”,
“Air Mail”
Passes, Total Cost: $269.54
“Correct”, “Magic”, “14”, “79”, “1”
“Air Mail”
Passes, Total Cost: $7960.78
“Correct”, “Magic”, “999”, “999”,
“999”, “Air Mail”
Passes, Total Cost: $257298.46
“Correct”,”Magic,”-1”, “999”, “999”,
“Surface Mail”
Error for book 1 only.
“Correct”,”Magic,”999”, “-1”, “999”,
“Surface Mail”
Error for book 2 only.
“Correct”,”Magic,”999”, “999”, “-1”,
“Surface Mail”
Error for book 3 only.
“Correct”,”Magic,”-1”, “#”, “999”,
“Air Mail”
Error for book 1 and book 2.
“Correct”,”Magic,”999”, “-300”, “?”,
“Air Mail”
Error for book 2 and book 3.
“Correct”,”Magic,”ham”, “%”, “-5”,
“Air Mail”
Error for book1, book 2 and book 3.
Passes, Total Cost: $269.54
Yes
Passes, Total Cost: $7960.78
Yes
Passes, Total Cost: $257298.46
Yes
Error for book 1 only.
Yes
Error for book 2 only.
Yes
Error for book 3 only.
Yes
Error for book 1 and book 2.
Yes
Error for book 2 and book 3.
Yes
Error for book 1, book 2 and book 3.
Yes
[3.5.3] Page 3
Test
Type
Input/Expected
Result
Passed?
1
Name
Entry
Name
Entry
Name
Entry
Name
Entry
Name
Entry
Multiple
Names
“12345”
Error
“###”
Error
“jacob”
Error
“Jacob”
Error
“Jacob Johnson”
Pased, displayed.
“Jacob Johnson”, “Magic Magical”,
“Food Fongus”, “Zebra Charlie”,
“Charlie Zebra”
Passed, displayed in alpha order.
Error
Yes
Error
Yes
Error
Yes
Error
Yes
Passed, displayed.
Yes
Yes
7
Multiple
Names
“Abcd Ehgh”, “Abcd Efgh”, “Abcd
Eggh”
8
Reset
“Dingus Dungus”
Cleared list.
Charlie Zebra
Food Fungus
Jacob Johnson
Magic Magical
Zebra Charlie
Abcd Efgh
Abcd Eggh
Abcd Ehgh
Adds name onto old list. Requires
page refresh to reset properly.
1
1
3
5
6
Yes
No (Lack
time to
fix)
12