Design and develop a website to provide information to customers who wants to visit the shop by HTML5 and CSS and write the report

BackgroundTotal marks: 35 marksFlying Hobbies, is a sole-proprietor with a proper shop front (i.e. an actual physical building where business is conducted). They have contracted you to develop a website to provide information regarding their shop. You have been provided with the following initial process and technical specifications:Memo: Website Requirements
From: Flying Hobbies, Senior Management
To : WIMP Engineering R&D Consultants
Specification
Design and develop a website to provide information to customers who wants to visit the shop. The goal is to allow customers to obtain an overview of the shop layout and to find details of items available from the shop. The website is not an online shopping site. The website’s main goal is to provide information to customers who want to visit the shop in person.ResourcesResources such as images and details of opening hours can be found inProResource.ZIP. The content of the ZIP file is:1. Three folders named Kites, Quadcopters and Toy Planes. Each folder contain images relating to the different categories of items from the shop.2. A text file Item_List.txt contain the names of the items corresponding to each of the image from each folder. You need to use these names as the specified description of the items and images on your web site. Do not rename the list or the images.3. A text file Business_Hours.txt containing the time-table of opening hours of the shop.4. Logo.png – an image of the logo of the shop.5. Floor_Plan.png – an image of the shop’s floor plan.1General Requirements
The managers of Flying Hobbies insist that the following requirements must be adhered to:1. Each webpage of the website must display the Logo.png logo. You can edit this image, but the font style, type and colour must remain as in the original image.2. Do not change the description of the images. Do not rename the filenames of any of the images.3. All images of each item must be presented/displayed to the visitor. This can be done within one webpage or distributed across several web pages. The idea is to ensure that customers are made aware of the complete selection of items available to browse.4. The images are to be used as it is. You can resize the images retaining the original aspect ratio, but do not crop or edit (e.g. recolour, touch up, sharpen, etc.) or rename the images in any way. 5. Generate a separate page (this can be a popup page or a standard webpage) providing the opening hours. Use the details found in theBusiness_Hours.txt file.Example of a Walkthrough
A potential visitor who visits the website will be greeted by a welcome message and the following layout of the floor plan (navigation map) of the shop. When a visitor clicks on any one of the specific section, it should bring up details of the specific display selected2with relevant type of items. The visitor clicks on any of the images of the item to obtain further information on that image. In addition, if the visitor selects an option to display opening hours, a separate page (or window) should appear to provide this information. Note this is the basic requirement, it is up to you to implement other details e.g. instructions, navigational control, etc according to HCI best- practice principles.Deliverables
On the specified due date for Project A, you are to deliver one report and the low-fidelity prototype.End-of-MemoProject A: TaskThe overall task is divided into two project phases (i.e. two separate, but related projects). It is strongly advised that you read the following project description in conjunction with the description for Project B.You are to complete the following task in the order given:Carry out user and task analysis. You must have a clear view of the users of this system. Consider that not everyone is comfortable with the technology. For example, you need to deal with user variation such as age or language skills. Perform a user analysis, i.e. characterise the users and identify your potential users. Clearly identify the tasks the potential users perform, and in what order. These are all HCI considerations that you should take into account.Propose design and system requirements. Consolidate your findings from your user and task analysis with the given specifications into a design and system requirements. For example, the number of items to display, the screen size, what colours, how many different screens to display etc.Develop a low-fidelity prototype. Based on the requirements, develop a preliminary design of the specified web user interface. Use any combination of HTML5 and CSS3. At this stage, the prototype is basically a medium to support your initial concept and ideas. For example, the prototype should show where the ‘basic’ button is located; or would it be possible to fit 20 images aesthetically on a single page, etc? The prototype need not be fully functional. At this stage, you only need to demonstrate the initial concept of your interface designs. Remember to indicate which browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are targeting as the main working platform. For the purpose of this3project, exclude mobile devices that run on fragmented or closed-system technology, such as Android, Apple iOS and Nook. DO NOT use Rapid Application Prototyping (RAD) tools or any other type of scripting languages or services, eg. Python, Lua, AJAX, Dreamweaver, WordPress etc. You need to develop the website from scratch.Obtain user feedback. Invite 3 – 4 potential users (e.g. friends, family members, classmates, etc.) to provide you with feedback of your prototype (i.e. the initial draft design). You do not need to provide the name of the participants. These potential users should be a mix of person with computer skills and with little computer skills, so you can get more representative feedback. You should not approach this task haphazardly. Use a suitable data collection method (e.g. questionnaire, survey).Recommendation. Analyse the data you have collected from the previous user evaluation and produce a set of recommendation on how you should refine and improve on your initial design. This recommendation will be carried over to the next phase in Project B for implementation.Write a report. Produce a report to document the tasks and the outcome of your efforts undertaken for Project A.Format of ReportAs you are performing the tasks prescribed above, you will need to document every step of your activity (i.e. write up what you have done). These pieces of information will be consolidated into a report. For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report. As a minimum, the report should contain the following sections as shown in the following template:(1) Introduction – State the purpose and objectives of the report.(2) Content – This is the main section where you should document the various stages andoutcome of your activities. Do not include raw or unprocessed data. You need to analyse, evaluate and summarise the outcome of each of the task. If you really need to include critical or important raw data, then do so by appending them to an appendix at the end of the report. Keep a record of your raw data. If required, your instructor or marker may request that you provide them with a copy.(3) Recommendation.(4) Conclusion – This is basically a summation, consolidating the main points of the report.(5) There is no minimum or maximum limit to the number of words required in this report.However, the length of your report must be within reason and of adequate length tosuccinctly support the complete account of tasks you have undertaken.(6) Figures or diagrams can be added as required.4Page formatting: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or New Time Romans font, 12pt font size, DOC or DOCX format.Learning ObjectiveNote that these are not programming project in themselves. The primary purpose of both Project A and Project B is to ensure that students adopt best practice and adhere closely to HCI principles during the process of designing and developing the interactive user interfaces. This process is to be fully documented in your report. Full functionality is not expected from either Project A or Project B. For example, knowledge of database backend servers and web servers are not required in this course.What to SubmitYou should submit two items for assessment. These are:All necessary files, images, scripts, coding and resources should reside in a single mainPROJECT_A.ZIP folder. The report should be separated from this folder (see item 2 below). It is up to you to organise the files and sub-folders within the main folder. Ensure that all your scripts and coding is stand-alone and portable. That is, your marker or instructor should be able to run your scripts from the type of browser you have specified by clicking on the main.html or main.htm startup file. Use only HTML5 and CSS3 to develop your website. The web browser you specified should render your markup and scripts without problems.The report should be named REPORT_A and saved as a single file in DOC or DOCX format. This file should be located outside the ZIP folder.Submit (1) PROJECT_A.ZIP and (2) REPORT_A.DOCX as separate files. That is, submit ONE ZIP file and ONE DOCX file. Both need to be separate items when you submit through the online submission portal.
cois12036_t1_2018_project_a.pdf

proresource.zip

Don't use plagiarized sources. Get Your Custom Essay on
Design and develop a website to provide information to customers who wants to visit the shop by HTML5 and CSS and write the report
Just from $13/Page
Order Essay

Unformatted Attachment Preview

COIS 12036 Human Computer Interaction (HCI)
Project A (Term 1 – 2018)
Total marks: 35 marks
Background
Flying Hobbies, is a sole-proprietor with a proper shop front (i.e. an actual physical building
where business is conducted). They have contracted you to develop a website to provide
information regarding their shop. You have been provided with the following initial process
and technical specifications:
Memo: Website Requirements
From: Flying Hobbies, Senior Management
To : WIMP Engineering R&D Consultants
Specification
Design and develop a website to provide information to customers who
wants to visit the shop. The goal is to allow customers to obtain an
overview of the shop layout and to find details of items available
from the shop. The website is not an online shopping site. The
website’s main goal is to provide information to customers who want to
visit the shop in person.
Resources
Resources such as images and details of opening hours can be found in
ProResource.ZIP. The content of the ZIP file is:
1. Three folders named Kites, Quadcopters and Toy Planes. Each folder
contain images relating to the different categories of items from the
shop.
2.
A text file Item_List.txt contain the names of the items
corresponding to each of the image from each folder. You need to use
these names as the specified description of the items and images on
your web site. Do not rename the list or the images.
3.
A text file Business_Hours.txt containing the time-table of
opening hours of the shop.
4.
Logo.png – an image of the logo of the shop.
5.
Floor_Plan.png – an image of the shop’s floor plan.
1
General Requirements
The managers of Flying Hobbies insist that the following requirements
must be adhered to:
1. Each webpage of the website must display the Logo.png logo. You can
edit this image, but the font style, type and colour must remain as in
the original image.
2. Do not change the description of the images. Do not rename the
filenames of any of the images.
3. All images of each item must be presented/displayed to the visitor.
This can be done within one webpage or distributed across several web
pages. The idea is to ensure that customers are made aware of the
complete selection of items available to browse.
4. The images are to be used as it is. You can resize the images
retaining the original aspect ratio, but do not crop or edit (e.g.
recolour, touch up, sharpen, etc.) or rename the images in any way.
5. Generate a separate page (this can be a popup page or a standard
webpage) providing the opening hours. Use the details found in the
Business_Hours.txt file.
Example of a Walkthrough
A potential visitor who visits the website will be greeted by a
welcome message and the following layout of the floor plan (navigation
map) of the shop. When a visitor clicks on any one of the specific
section, it should bring up details of the specific display selected
2
with relevant type of items. The visitor clicks on any of the images
of the item to obtain further information on that image. In addition,
if the visitor selects an option to display opening hours, a separate
page (or window) should appear to provide this information. Note this
is the basic requirement, it is up to you to implement other details
e.g. instructions, navigational control, etc according to HCI bestpractice principles.
Deliverables
On the specified due date for Project A, you are to deliver one report
and the low-fidelity prototype.
End-of-Memo
Project A: Task
The overall task is divided into two project phases (i.e. two separate, but related projects). It is
strongly advised that you read the following project description in conjunction with the
description for Project B.
You are to complete the following task in the order given:
•
Carry out user and task analysis. You must have a clear view of the users of this system.
Consider that not everyone is comfortable with the technology. For example, you need
to deal with user variation such as age or language skills. Perform a user analysis, i.e.
characterise the users and identify your potential users. Clearly identify the tasks the
potential users perform, and in what order. These are all HCI considerations that you
should take into account.
•
Propose design and system requirements. Consolidate your findings from your user and
task analysis with the given specifications into a design and system requirements. For
example, the number of items to display, the screen size, what colours, how many
different screens to display etc.
•
Develop a low-fidelity prototype. Based on the requirements, develop a preliminary
design of the specified web user interface. Use any combination of HTML5 and CSS3. At
this stage, the prototype is basically a medium to support your initial concept and ideas.
For example, the prototype should show where the ‘basic’ button is located; or would it
be possible to fit 20 images aesthetically on a single page, etc? The prototype need not
be fully functional. At this stage, you only need to demonstrate the initial concept of
your interface designs. Remember to indicate which browser (i.e. IE, Firefox, Safari,
Chrome, etc.) you are targeting as the main working platform. For the purpose of this
3
project, exclude mobile devices that run on fragmented or closed-system technology,
such as Android, Apple iOS and Nook. DO NOT use Rapid Application Prototyping (RAD)
tools or any other type of scripting languages or services, eg. Python, Lua, AJAX,
Dreamweaver, WordPress etc. You need to develop the website from scratch.
•
Obtain user feedback. Invite 3 – 4 potential users (e.g. friends, family members,
classmates, etc.) to provide you with feedback of your prototype (i.e. the initial draft
design). You do not need to provide the name of the participants. These potential users
should be a mix of person with computer skills and with little computer skills, so you can
get more representative feedback. You should not approach this task haphazardly. Use a
suitable data collection method (e.g. questionnaire, survey).
•
Recommendation. Analyse the data you have collected from the previous user
evaluation and produce a set of recommendation on how you should refine and
improve on your initial design. This recommendation will be carried over to the next
phase in Project B for implementation.
•
Write a report. Produce a report to document the tasks and the outcome of your efforts
undertaken for Project A.
Format of Report
As you are performing the tasks prescribed above, you will need to document every step of
your activity (i.e. write up what you have done). These pieces of information will be
consolidated into a report. For the purpose of this project you are assumed to be a
professional. As such, you should attempt at your best to reflect this quality in the preparation
of the report. As a minimum, the report should contain the following sections as shown in the
following template:
(1) Introduction – State the purpose and objectives of the report.
(2) Content – This is the main section where you should document the various stages and
outcome of your activities. Do not include raw or unprocessed data. You need to
analyse, evaluate and summarise the outcome of each of the task. If you really need to
include critical or important raw data, then do so by appending them to an appendix at
the end of the report. Keep a record of your raw data. If required, your instructor or
marker may request that you provide them with a copy.
(3) Recommendation.
(4) Conclusion – This is basically a summation, consolidating the main points of the report.
(5) There is no minimum or maximum limit to the number of words required in this report.
However, the length of your report must be within reason and of adequate length to
succinctly support the complete account of tasks you have undertaken.
(6) Figures or diagrams can be added as required.
4
Page formatting: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or
New Time Romans font, 12pt font size, DOC or DOCX format.
Learning Objective
Note that these are not programming project in themselves. The primary purpose of both
Project A and Project B is to ensure that students adopt best practice and adhere closely to HCI
principles during the process of designing and developing the interactive user interfaces. This
process is to be fully documented in your report. Full functionality is not expected from either
Project A or Project B. For example, knowledge of database backend servers and web servers
are not required in this course.
What to Submit
You should submit two items for assessment. These are:
1. All necessary files, images, scripts, coding and resources should reside in a single main
PROJECT_A.ZIP folder. The report should be separated from this folder (see item 2
below). It is up to you to organise the files and sub-folders within the main folder.
Ensure that all your scripts and coding is stand-alone and portable. That is, your marker
or instructor should be able to run your scripts from the type of browser you have
specified by clicking on the main.html or main.htm startup file. Use only HTML5 and
CSS3 to develop your website. The web browser you specified should render your
markup and scripts without problems.
2. The report should be named REPORT_A and saved as a single file in DOC or DOCX
format. This file should be located outside the ZIP folder.
Submit (1) PROJECT_A.ZIP and (2) REPORT_A.DOCX as separate files. That is, submit ONE ZIP
file and ONE DOCX file. Both need to be separate items when you submit through the online
submission portal.
PLAGIARISM
CQUniversity regards plagiarism as a serious offence and it can
have serious consequences for you as a student. To avoid
plagiarism, please read:
5
https://www.cqu.edu.au/student-life/services-and-facilities/referencing/what-is-plagiarism
Assessment Criteria
The following criteria will be used to assess your assignment:
Criteria
Marks
Task as documented in report:
• Overview and description. (2 marks)
• User and task analysis are appropriate and sufficiently in-depth.
That is, present your evidence that this task have been carried out.
(6 marks).
• Design and system requirements. Present your evidence that this
task have been carried out. E.g. Different designs have been
considered or mentioned; analysis and evaluation of data are
presented, etc. (6 marks)
• User Feedback of the low-fidelity prototype. Present your evidence
that this task have been carried out. E.g. Users were involved;
analysis and evaluation of data are presented, etc. (6 marks)
• Recommendation as a result of the above tests and results. (3
marks)
23
Low-fidelity prototype:
• Interface adheres to HCI principles in general and does not break
major HCI rules. (4 marks)
• The prototype sufficiently demonstrates the main features of the
initial design and its intended purpose. (4 marks)
8
Presentation:
• Report professionally presented. (2 marks)
• Written style and expression and overall presentation. (2 marks)
4
Total marks for Project A:
6
35
Marker’s Guideline
•
To obtain 76-100% of the marks allocated for a specific section of the assessment, the
student’s work is expected to demonstrate a very high level of knowledge and
understanding of concepts, facts and procedures, and application of knowledge within the
scope of the course.
•
To obtain 51-75% of the marks allocated for a specific section of the assessment, the
student’s work typically demonstrate a high level of knowledge and understanding of
concepts, facts and procedures, and application of knowledge within the scope of the
course.
•
To obtain 26-50% of the marks allocated for a specific section of the assessment, the
student’s work typically demonstrate a sound level of knowledge and understanding of
concepts, facts and procedures, and application of knowledge within the scope of the
course.
•
To obtain 1-25% of the marks allocated for a specific section of the assessment, the
student’s work typically demonstrate a limited level of knowledge and understanding of
concepts, facts and procedures, and application of knowledge within the scope of the
course.
•
0 marks will be allocated for a specific section of the assessment, where an erroneous or no
attempt has been made by the student.
— End —
7

Purchase answer to see full
attachment

GradeAcers
Calculate your paper price
Pages (550 words)
Approximate price: -

Why Work with Us

Top Quality and Well-Researched Papers

We always make sure that writers follow all your instructions precisely. You can choose your academic level: high school, college/university or professional, and we will assign a writer who has a respective degree.

Professional and Experienced Academic Writers

We have a team of professional writers with experience in academic and business writing. Many are native speakers and able to perform any task for which you need help.

Free Unlimited Revisions

If you think we missed something, send your order for a free revision. You have 10 days to submit the order for review after you have received the final document. You can do this yourself after logging into your personal account or by contacting our support.

Prompt Delivery and 100% Money-Back-Guarantee

All papers are always delivered on time. In case we need more time to master your paper, we may contact you regarding the deadline extension. In case you cannot provide us with more time, a 100% refund is guaranteed.

Original & Confidential

We use several writing tools checks to ensure that all documents you receive are free from plagiarism. Our editors carefully review all quotations in the text. We also promise maximum confidentiality in all of our services.

24/7 Customer Support

Our support agents are available 24 hours a day 7 days a week and committed to providing you with the best customer experience. Get in touch whenever you need any assistance.

Try it now!

Calculate the price of your order

Total price:
$0.00

How it works?

Follow these simple steps to get your paper done

Place your order

Fill in the order form and provide all details of your assignment.

Proceed with the payment

Choose the payment system that suits you most.

Receive the final file

Once your paper is ready, we will email it to you.

Our Services

No need to work on your paper at night. Sleep tight, we will cover your back. We offer all kinds of writing services.

Essays

Essay Writing Service

No matter what kind of academic paper you need and how urgent you need it, you are welcome to choose your academic level and the type of your paper at an affordable price. We take care of all your paper needs and give a 24/7 customer care support system.

Admissions

Admission Essays & Business Writing Help

An admission essay is an essay or other written statement by a candidate, often a potential student enrolling in a college, university, or graduate school. You can be rest assurred that through our service we will write the best admission essay for you.

Reviews

Editing Support

Our academic writers and editors make the necessary changes to your paper so that it is polished. We also format your document by correctly quoting the sources and creating reference lists in the formats APA, Harvard, MLA, Chicago / Turabian.

Reviews

Revision Support

If you think your paper could be improved, you can request a review. In this case, your paper will be checked by the writer or assigned to an editor. You can use this option as many times as you see fit. This is free because we want you to be completely satisfied with the service offered.

Order your essay today and save 15% with the discount code DISCOUNT15