Internet Client Engineering

Option 2
© Didasko 2018. All rights reserved. 1
CSE2ICX
Internet Client Engineering
Assessment 2 – Client-Side Web Programming

Assessment Objectives
Apply the principles of Web user interface design in analysing and building Web
sites.
Construct Web sites using a combination of DHTML technologies and simple server
side scripting.
This is an INDIVIDUAL assignment. Students are not permitted to work in a group
when writing this assignment.
Copying, Plagiarism
This is an individual assignment. Students are not permitted to work in a group when writing
this assignment. Plagiarism is the submission of another person’s work in a manner that
gives the impression that the work is their own. La Trobe University treats plagiarism
seriously. When detected, penalties are strictly imposed.
Further information can be found on
http://www.latrobe.edu.au/students/academic
integrity/explanation/plagiarism
Submission Guidelines
Your assignment submission should be typed, not written/drawn by hand.
Submit the electronic copy of your assignment through the subject LMS.
Submission after the deadline will incur a penalty of 5% of the available marks for
that task per day capped at 5 days. No assignment will be accepted after 5 days. If
you have encountered difficulties that lead to late submission or no submission, you
should apply for special consideration.

Option 2
2 © Didasko 2018. All rights reserved.
Contents
CSE2ICX Internet Client Engineering ………………………………………………………. 1
Assessment 2 – Client-Side Web Programming ………………………………………………….. 1
Assessment Objectives ……………………………………………………………………………………. 1
Copying, Plagiarism…………………………………………………………………………………………. 1
Submission Guidelines …………………………………………………………………………………….. 1
Background………………………………………………………………………………………. 3
Task 1: Home (index.html) ………………………………………………………………….. 3
Task 2: Program (program.html) ………………………………………………………….. 3
Task 3: About (about.html and about.js) ……………………………………………….. 3
Task 4: Registration (registration.html, response.html and response.js)…….. 4
Task 5: Site map (sitemap.html and sitemap.js) …………………………………….. 4
Task 6: Organisation………………………………………………………………………….. 4
Task 7: Layout…………………………………………………………………………………… 5
Task 8: Navigation …………………………………………………………………………….. 5
Task 9: Presentation ………………………………………………………………………….. 6
Task 10: Code…………………………………………………………………………………… 6
Submission ………………………………………………………………………………………. 6
Assessment marking criteria ……………………………………………………………….. 7

Option 2
© Didasko 2018. All rights reserved. 3
Background
You have been approached to create two conference websites for a conference in Sydney. Your choice will
be the same choice you made as per your Assignment 1 work. You must create the websites to be as realistic
as possible for a normal organisation.
The organisation has requested two websites: A public website with information about the organisation and an
internal website that members of the organisation will use for day-to-day management. For
assignment 2, you
are now tasked to create the
public website.
This assignment is part of a running scenario for all assignments in this subject, where the Sydney conference
will continue to be your client. Please also refresh your memory regarding the additional background information
provided previously in Assignment 1.
The tasks of this assignment are organised as follows. Tasks 1-5 first describe the functional requirements of
the website, regarding what each of the web pages will do. Then Tasks 6-10 describe the non-functional
requirements regarding the behaviour of all parts of your solution.
Task 1: Home (index.html)
The Home page is the entry point for the website. As this is the first page that will be viewed by a
user, it should be designed in an attractive manner, including a combination of text and images. The
content should include in part clear contact details.
Task 2: Program (program.html)
The purpose of this page is to advertise the various offerings of the conference.
Some examples are as follows: main program, workshops, keynote speakers, conference dinner
and conference excursion.
This page must be organised into a minimum of three subsections each with content about the
different offerings.
Task 3: About (about.html and about.js)
This page contains background information about the organisation. Suggestions for types of
information to include can be some combination of news, history, achievements, location and
personnel.
This page must be organised into a minimum of three subsections.
One of the subsections must be about personnel. This section will include information that can be
accessed in an interactive fashion with JavaScript, where the user can click on a portrait of a person
to learn more about that person. A generic mock-up of this component is given on the next page.

Option 2
4 © Didasko 2018. All rights reserved.

[ Name ] [ Name ] [ Name ] [ Name ]
[ Role ] [ Role ] [ Role ] [ Role ]
Click on the portraits above to learn more about each member of the organisation. The description
will appear here and replace this text.

Task 4: Registration (registration.html, response.html and
response.js)
This page contains a form that you must design to allow the user to register for the conference. The
form fields must be suitable for the task and include the following tags as a minimum:
1. Form with the method and action attributes set correctly
2. Labels
3. Text input with <input>
4. Longer text input with <textarea>
5. Drop-down list
6. Radio buttons
7. Check box
8. Submit button
All these fields must be validated appropriately using HTML5 validation attributes of their form
controls. If the user provides invalid data, the website should display appropriate error messages.
If the user submits valid data, then they are navigated to the response page (response.html) that
displays a summary of the responses provided by the user. Note that the form operates in a
simulated fashion. I.e.: Instead of submitting the form data to the server, the form will navigate
directly to the response page.
Task 5: Site map (sitemap.html and sitemap.js)
This page contains an unordered list of links to the five pages of this site. Regarding the pages for
Tasks 2 and 3, it was stated that these pages should contain a minimum of three subsections each.
These will be implemented as sub-lists below their respective list items, and their links will navigate
to the corresponding page
fragments. Additionally, the sub-lists will be implemented as accordions
using JavaScript, where the sub-lists can be expanded to view or collapsed to hide. The sub-lists
will be collapsed by default.
Task 6: Organisation
The following organisational aspects must be put in place for your solution:
(1) Programming language:
Option 2
© Didasko 2018. All rights reserved. 5
The website will be a DHTML website. DHTML refers to Dynamic HTML. DHTML is the combination
of HTML5, CSS3 and JavaScript working together to create a website that has a dynamic feel. Note
that JavaScript may also include jQuery.
(2) Third-party components:
The website will be hand-coded by yourself. Therefore, you may not include any third-party
components.
(3) Images:
Store the images in a subfolder called “images”. Note that the website cannot use copyrighted
images. To avoid this problem, you are welcome to use images with an open licence. You can get
these from
free image websites or by performing an image search on your search engine with a
“usage rights” filter set to “labelled for reuse” (or equivalent). Maintain a list of references in a file
called
references.txt in your solution with the name, author, location and access date of the images.
(4) Integrated development environment:
The website must be built using Visual Studio 2017.
(5) Template:
The website will be built from scratch beginning with an empty folder. Follow these steps:
a) Create a new folder called
xxx_cse2icx_assignment2, where xxx is your student ID.
b) Open Visual Studio 2017. Select “File” -> “Open” -> “Website…” and select the new folder.
c) Select “File” -> “Close Solution” immediately. This will prompt you to save a solution file (*.sln
suffix). This must be saved in your new folder. Close Visual Studio 2017.
d) Double-click on the solution file to open Visual Studio 2017 and your solution again. Continue
to use this method for opening your solution going forward for convenience.
e) You are now ready to go. Add your project assets next.
Task 7: Layout
The body of the website pages must be organised to include distinct header, navigation, main and
footer semantic tags with the following content:
1. Header: Site name and branding.
2. Navigation: Navigation bar.
3. Main: This is the main content of each page.
4. Footer: Copyright statement and W3C validation information.
Task 8: Navigation
The navigation bar appears on every page of the website and contains the following aspects:
1. The navigation bar has links to the five main pages of the website (Tasks 1-5).
2. Each navigation item has a fixed-size design.
3. The link for the current page is disabled and has a different colour/appearance.
4. The links for the non-current pages have a different colour/appearance when hovering.
5. The navigation bar is responsive, meaning that the menu options gracefully wrap to the next
line when they cannot all fit horizontally on the screen.
Examples are given on the next page (normal mode, followed by responsive mode).

Option 2
6 © Didasko 2018. All rights reserved.

Page 1 Page 2 Page 3 Page 4 Page 5

 

Page 1 Page 2 Page 3
Page 4 Page 5

Task 9: Presentation
The presentation of the website will largely be controlled by CSS with the following aspects:
1. All CSS code will be stored in a site-wide style file called
styles.css and referenced on each
web page.
2. The styling will include a variety of styling for layout.
3. The styling will include a variety of styling for content.
4. The presentation will endeavour to give the site a contemporary appearance, including HTML
version 5 and CSS version 3 where practical.
Task 10: Code
This task will award marks according to the quality of your code according to these aspects:
1. HTML, CSS and JavaScript indentation is consistent with one level of indentation per block.
2. HTML, CSS and JavaScript code consistently use best-practice casing (lowercase for
HTML/CSS and
camelCase for JavaScript, with first letter in lowercase). (The DOCTYPE
declaration is an exception.)
3. All HTML, CSS and JavaScript files each use some comments (<!–comment –>, /* comment
*/ or // comment as appropriate).
4. The W3C HTML markup validation service (
https://validator.w3.org) reports zero errors and
zero warnings on the code when tested with the “validate by direct input” method.
5. The W3C CSS markup validation service (
https://jigsaw.w3.org/css-validator) reports zero
errors and zero warnings on the code when tested with the “validate by direct input” method.
6. The HTML web page footers include clickable W3C HTML and CSS validation logos to the
validator to indicate compliance to the W3C standards. (See week 3 HTML lecture, slide 98,
for logo examples.)
Submission
When you have completed, submit your answers via the link on the LMS. You should submit the
following archive:
a) Zip your Visual Studio 2017 solution folder to a file called
xxx_cse2icx_assignment2.zip,
where xxx is your student number. Take care to zip your solution folder rather than the
contents of the folder to avoid a
tarbomb effect. The following files will be expected in your
folder:
o HTML 6: One file for each of Tasks 1-5 plus response.html (Task 4).
o CSS 1: styles.css (Task 9).
Current page style
(unclickable)
Current page style
(unclickable)
Hover style Screen boundary Screen
boundaries

Option 2
© Didasko 2018. All rights reserved. 7
o JavaScript 3: about.js (Task 3) response.js (Task 4) and sitemap.js (Task 5).
o Subfolder: “images” subfolder with graphic assets (Task 6c).
o Text file: references.txt for image references (Task 6c).
o Solution file: xxx_cse2icx_assignment2.sln.
o Web.config: Visual Studio may generate this file, which you can leave alone.
Assessment marking criteria
The marks for this assignment will be awarded as per the following marking rubric:

Task Marks Description Total
1 0 The home page was not satisfactory. 2
1 The home page could be improved.
2 The Home page included a good combination of text, images, and contact
details.
2 0 Offerings were not organised into a minimum of 3 subsections. 3
1 Offerings were organised into a minimum of 3 subsections.
0 Content for the offerings was not satisfactory.
1 Content for the offerings could be improved.
2 Content for the offerings was satisfactory.
3 0 About information was not organised into a minimum of 3 subsections. 7
1 About information was organised into a minimum of 3 subsections.
0 Content for the about information was not satisfactory.
1 Content for the about information could be improved.
2 Content for the about information was satisfactory.
0 Personnel component design did not match the mock-up.
1 Personnel component design could be improved.
2 Personnel component design matched the mock-up.
0 Personnel component JavaScript was incorrect.
1 Personnel component JavaScript could be improved.
2 Personnel component JavaScript performed its functions correctly.
4 0 Form tag (with method and action) was not correct. 14
1 Form tag (with method and action) could be improved.
2 Form tag (with method and action) was correct.
0 Labels were not correct.
1 Labels could be improved.
2 Labels were correct.
0 Input tag(s) were not correct.
1 Input tag(s) were correct.
0 Textarea tag(s) were not correct.
1 Textarea tag(s) were correct.
0 Drop-down list tag(s) were not correct.
1 Drop-down list tag(s) were correct.
0 Radio button tag(s) were not correct.
1 Radio button tag(s) were correct.
0 Checkbox tag(s) were not correct.
1 Checkbox tag(s) were correct.
0 Submit button was not correct.
1 Submit button was correct.
0 Validation was incorrect.
1 Validation was incomplete.
2 Validation was correct.
0 The response page did not produce a complete summary.

Option 2
8 © Didasko 2018. All rights reserved.

1 The response page could be improved.
2 The response page produced a complete summary.
5 0 The site map is incomplete. 6
1 The site map could be improved.
2 The site map has links to all pages and subsections.
0 The site map subsections accordion design was incomplete.
1 The site map subsections accordion design could be improved.
2 The site map subsections accordion was designed well.
0 The site map subsections JavaScript was incorrect.
1 The site map subsections JavaScript could be improved.
2 The site map subsections JavaScript performed its functions correctly.
6 0 Image references were incomplete. 1
1 A list of image references correctly acknowledged the name, author,
location and access date of the third-party images.
7 0 The header areas were incomplete. 8
1 The header areas could be improved.
2 A header area was included on all pages with the site name and branding.
0 The navigation areas were incomplete.
1 The navigation areas could be improved.
2 A navigation area was included on all pages with a navigation bar.
0 The main areas were incomplete.
1 The main areas could be improved.
2 A main area was included on all pages with the main content.
0 The footer areas were incomplete.
1 The footer areas could be improved.
2 A footer area was included on all pages with the copyright statement and
W3C validation information.
8 0 The navigation bar consistency was poor. 9
1 The navigation bar consistency could be improved.
2 The navigation bar links to the 5 main pages were on all pages.
0 Each navigation item did not have a fixed-size design.
1 Each navigation item had a fixed-size design.
0 The navigation item for the current pages was not always disabled.
1 The navigation item for the current pages was always disabled.
0 The links for the non-current pages did not have a different
colour/appearance when hovering.
1 The links for the non-current pages had a different colour/appearance
when hovering.
0 The navigation bar responsive component was incomplete.
1 The navigation bar responsive component needs improvement.
2 The navigation bar was responsive, meaning that the menu options
gracefully wrapped to the next line when they cannot all fit horizontally on
the screen.
0 The navigation bar links did not go to the correct locations.
1 The navigation bar links sometimes went to the correct locations.
2 The navigation bar links always went to the correct locations.
9 0 All CSS code was not stored in a site-wide style file. 8
1 All CSS code was stored in a site-wide style file.
0 The style file was not correctly referenced on each web page.
1 The style file was correctly referenced on each web page.
0 The styling for layout was poor.
1 The styling for layout could be improved.
2 The styling included a variety of good styling for layout.
0 The styling for content was poor.

Option 2
© Didasko 2018. All rights reserved. 9

1 The styling for content could be improved.
2 The styling included a variety of good styling for content.
0 The presentation was poor.
1 The presentation could be improved.
2 The presentation gave the site a contemporary appearance, including
HTML version 5 and CSS version 3 where practical.
10 0 Indentation was poor. 12
1 Indentation could be improved.
2 HTML, CSS and JavaScript indentation was consistent with one level of
indentation per block.
0 Casing was poor.
1 Casing could be improved.
2 HTML, CSS and JavaScript code consistently used best-practice casing,
comprising of lowercase for HTML/CSS and camelCase for JavaScript.
0 Commenting was poor.
1 Commenting could be improved.
2 All HTML, CSS and JavaScript files used appropriate comments.
0 The HTML validator reported one or more errors.
1 The HTML validator reported one or more warnings, but no errors.
2 The HTML validator reported zero problems.
0 The CSS validator reported one or more errors.
1 The CSS validator reported one or more warnings, but no errors.
2 The CSS validator reported zero problems.
0 The HTML validation logo feature was incomplete.
1 Your web page footers included a clickable HTML validation logo to the
validator to indicate compliance to the W3C standards.
0 The CSS validation logo feature was incomplete.
1 Your web page footers included a clickable CSS validation logo to the
validator to indicate compliance to the W3C standards.
0 Feedback will also be given regarding submission timeliness, length and
format. Penalties may apply.
0
Total available marks 70