$35
SENG1050 - Assignment 2 Solved
SENG1050 - Assignment 2
Outline - All Web Pages - Homepage - Data Collection Form
Information Display Pages - Web Design - Coding Style - Submission - Marking
Weight: 25% of course total.
The objectives of this assignment are
to exercise your ability to create Web pages using HTML and CSS,
to transform the XML documents from Assignment 1 into HTML using XSLT,
to test your skill in employing HTML features such as forms,
to evaluate your expertise with JavaScript for client side processing.
Warning - HTML Generating Tools
You are NOT allowed to use a HTML generating program for this assignment. This includes DreamWeaver, Microsoft Frontpage, Saving to HTML from Word, etc. You must write all of the HTML tags yourself in a plain-text editor such as NotePad. Any assignments that use HTML generated from a tool will be given ZERO.
Outline
A Newcastle entrepreneur Donald Drumpf plans to begin a business providing services to customers in their own homes. Called Service U, customers can register online and book services such as interior decorating, landscape and garden planning, physical training, life coaching, remedial massage, financial advice or babysitting. Each of these services is provided by an independent business who deliver their services in the customer’s own home. All the businesses are self-owned and they will pay Donald a fee to appear on the web site called Service U.
With this in mind, Donald Drumpf has invited you, as a promising student of the University of Newcastle with web communication skills, to develop a web site, Service U. Donald would like you to construct a prototype of the web page to be launched. He would like you to choose TWO of the services listed above and, for each, provide a page listing THREE businesses offering that service. That means that, if you choose baby sitting as a service, your page should list THREE baby sitting services.
Your task is to present the businesses as appealingly as possible on the web.
Your assignment will have the following parts.
A Homepage
A "Data Collection" page
2 Services pages with descriptions of THREE businesses offering the service.
All pages must have good readability, consistency and navigation. Details of all of these pages are given below.
General guidelines for preparing your all web pages
All pages should be coded according to the HTML5 standard.
All pages should contain the full HTML5 document structure, including <!DOCTYPE, <html, <head, <title and <body
All pages should use Cascading Style Sheets for visual formatting. You must use an external style file (style.css) which will define the style for all web pages you have created, Embedded (Document-level) style (where appropriate) and a few (NOT many) inline styles.
All visual formatting of the Web site should be implemented using Cascading Style Sheets.
Use one external CSS for all web pages.
Use at least one id and one class selector.
At least one <div, used to provide some interesting styling (your choice of borders, background, floating alignment, etc.)
At least one <span, used to provide some formatting (e.g. a colour or font change) for a few words of text
You should use a document-level style sheet to apply styles that are unique to the particular page (if appropriate).
You should only use inline styles for one-off visual effects.
Your assignment directory should contain a sub-directory, named images with all the image files you are using in your web pages.
There should be a nice background for the whole web site but make sure the text is still readable.
There should be a left side margin of 1 cm for all pages.
There should be hyperlinks on each of the pages that provide navigation capabilities for your site.
Hyperlinks from the Index page to other pages. Also hyperlinks from other pages back to the Index page. These links should use a relative URL.
Each page should also have links to every other page.
The text colours of a link before they are visited, after they are visited and during a user action must be different from each other. The link must appear noticibly bigger when you move the cursor over them.
The pages must have good readability, consistency and navigation.
Comments for your HTML code: Comments at the top of the file, stating the name of the file, the name of the author and the date the file was created.
Homepage
Your submission should contain a homepage, called index.html which you created in Assignment 1. You may need to make changes to this page, to ensure that any links to other pages in the website work, or incorporate any other updates listed in your assignment 1 feedback.
Links necessary for Homepage are
A link to the data collection page (form).
A privacy policy. This is necessary as you are collecting data including personal identifying information (PII) from your guests. When creating this, you may use a template such as that at https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/
Terms and conditions. Use template at https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf
About us. Use template at https://www.impactbnd.com/blog/best-about-us-pages
Contact. Follow examples at https://www.ventureharbour.com/15-contact-form-examples-help-design-ultimate-contact-page/. This need only be mail, email and telephone - include other contacts if you wish.
Data Collection Page
This page will allow businesses to apply for inclusion in the web portal Service U. The form will collect business data as well as some personal information (so there should be a link to the privacy policy on this page as well). This upload will be done as a form, which sends the information to "http://www.cs.tut.fi/cgi-bin/run~jkorpela/echo.cgi" when applicants click the "Submit" button. The following things need to be included on the page.
Create the form
The form needs to have at least the following things.
1. An appropriate level 1 heading.
2. Mandatory information about the business;
o A full name of owner/manager,
o Email
o Age range (less than 20, 20-30, 31-40, 41-50, 51-60, more than 60),
o Address,
o more ...
3. Survey questions decided by you. Think through what you need to know about the business (qualifications, experience, ...).
o Use different types of input such as textboxes, dropdown menus, radio buttons, checkboxes and textareas (at least 1 of each).
4. Buttons to submit and clear the form.
Validate the form
You will write Javascript functions to validate the form (DO NOT USE HTML5 form validation attributes such as 'required').
1. Use JavaScript to perform client-side data validation.
2. The validation functions should check that at least three required inputs (marked with asterisks) in your form are filled out.
3. These should be different types of input (e.g., textbox, dropdown menus, radio buttons or checkboxes), so the validation will be done differently for each one.
4. The validation functions should check a valid email address (please do not use HTML5 form validation INPUT types such as INPUT type="email").
5. If the form does not pass the validation check, the user should be presented with an alert message asking them to provide the missing information or correct the wrong information.
The validation functions should be initiated when the form is submitted.
The structure and presentation of this page is up to you however the specifications provided here must be followed.
Business Information Display Pages
You will be writing an XSL document to transform your XML documents from Assignment 1 into HTML. The HTML that is generated should fit in with the style of the rest of your website (eg., similar formatting, colors, etc.). You will need to use CSS in your generated HTML.
Note that all your XML documents have the same tags and DTD and therefore they can all use the same XSL document. This means you should only make 1 XSL file. The XSL should have the following;
· An appropriate level 1 heading indicating the service.
· List of all the businesses sorted alphabetically by the business name
· Include the following.
o Busiiness details.
o An image associated with the business
o URL of the business
· All this data must be collected from the XML documents.
· Other relevant information that is in your XML documents.
Web Design
A successful website meets clearly identified goals and provides compelling content that draws your audience to your site again and again. In addition it should be easy to navigate and feature visual attractiveness.
Coding Style
Please note that your HTML code, CSS code and XSL code must be neat, clear, and commented. A clean structure is important for a site that will be maintained and updated later by someone else, who won't have your memory of how things are structured.
Other than the specifications mentioned, the way you design your page is up to you. However it should use semantically-correct tags. All your work should be validated.
Submission
Your submission should contain all the files that contribute to the Web site, including HTML, CSS, XML, XSL and image files. You must also include a README.txt file, containing your student number and a list of the files that are part of your submission.
Finally, your submission should include a completed Assignment Cover Sheet. You should download a cover sheet template, then fill in the details and include it with your submission. Note: an Assignment Cover Sheet submitted electronically is deemed to have been signed. Your assignment cannot be marked until a completed cover sheet is received.
Failure to follow submission instructions will incur a penalty.
Warning - Plagiarism
Plagiarism is defined as presenting the work of others' as if it were your own. This includes the copying of content from other people's Web pages (and other sources) without "appropriate referencing" (indicating the parts of your assignment which have been copied and where they were copied from).
If you "quote" or use other people's work in your assignments, then you must reference them appropriately. If you fail to do so you will be reported to the School's Student Academic Conduct Officer (SACO) for suspicion of plagiarism. An assignment that consists largely of work copied from elsewhere and referenced appropriately will receive very low (zero) marks.
You can find more information on the University's Policy on Student Academic Integrity in the Course Outline and at http://www.newcastle.edu.au/policylibrary/000608.html. You can find advise on quotation and appropriate referencing in the InfoSkills Web site.
The assignment is to be submitted on Blackboard via the Assignments page . To submit your files, place them all into a single .zip archive named with your student id (eg., c3012345.zip).
If you have trouble submitting, contact me as soon as you can. Failure to submit correctly is not of itself a sufficient reason to apply for Adverse Circumstances on the assignment.
Marking Guidelines
The following serves as a rough guide to how many marks are allocated to each part of the assignment.
Total Marks: 100
· Overall and Design: 20
· External Style sheet: 10
· Homepage: 5
· Data Collection Page: 35
· Information Display Pages: 30
