Responsive Web Design
COIT 20268 - Responsive Web Design (RWD)
(Term 2 – 2018)
Portfolio 1
Practical Assessment 1
Background
Paper
Kraft, 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
for this shop. You have been provided with the following initial and technical
specifications.
Memo: Website
Requirements
From: Paper
Kraft, 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 Artist_Trading_Cards, Art_Diary and
Paper_Structure. Each folder contains images relating to the different type of item as indicated by the
folder names.
2.
A
text file Item_List.txt lists the
proper names of the specific item corresponding to each of the image within each
folder. You need to use the proper names as listed. Do not rename the list or
the images.
3.
A
text file Business_Hours.txt
containing the business and opening hours of the shop.
4.
Logo.png – an image of the logo of the shop.
5.
Floor_Plan.jpg –
an image of the shop’s floor plan.
General
Requirements
The shop management insists that the
following requirements must be adhered to:
1. Each webpage of the website must display
the shop logo. You can edit this image, but the font style, type and colour
must remain as in the original image.
3. All images of each item must be
presented to potential visitors. This can be done within one webpage or
distributed across several web pages. The idea is to ensure that potential
visitors are made aware of the complete selection of item on display at the
shop.
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. re-colour, touch up, sharpen, etc.) or rename the images in any way.
5. Generate a separate page providing the
opening and business hours. The details are found in the Business_Hours.txt file.
6. Text description for each item is not
provided. You can provide your own ‘dummy’ text (i.e. lorem ipsum) to
demonstrate the functionality of your web page design.
Example
of Users Interacting with the Website
The visitor to the website will be
greeted by a welcome message and the following layout of the floor plan of the
shop. The visitor clicks on any of the display sections (red lettering in round
boxes). It should bring up details of the display sections with relevant
categories with details of the items. The visitor clicks on any of the images
of the items to obtain further information on that image. In addition, if the
visitor selects an option to display business hours, a separate page should
appear to provide this information. Note that this is the basic requirement, it
is up to you to implement other details e.g. instructions, navigational
control, etc.
What
to Submit
On the specified due date, you are to
submit two assessment items:
(1)
Portfolio 1, and
(2)
Practical Assessment 1.
End-of-Memo
At
the end of each week, you will complete a different section of the given project
as specified in Background section above. Each of the weekly Individual Case
Project, found at the end of each chapter, will contribute progressively toward
the completion of the given website project. Each weekly Individual Case
Project corresponds with the textbook chapters from each week’s lesson plan.
You are to document and report on each of these weekly Individual Case Project,
cumulating in a final portfolio (i.e. Portfolio 1). Portfolio 1 should be
submitted along with Practical Assessment 1.
Weekly Individual Case Project
|
Marks
|
||
Portfolio 1.1 (Chapter 1)
|
|||
Write up the
following project proposal :
|
|||
• Site title—Specify the working title for the
site.
|
|||
• Developer—Identify yourself.
|
|||
• Rationale or focus—Explain the
content and goals of the site.
|
|||
Planning the
Site:
|
|||
• Main elements outline—Describe the
main features of the site.
|
|||
• Content—Estimate the number of individual web
pages.
|
1.5
|
||
• Target audience—Describe the typical audience
for the site.
|
|||
• Design considerations—List the
design goals for the site.
|
|||
• Limiting factors—Identify the technical or
audience factors that could
|
|||
limit
the design goals of the site.
|
|||
*At this
stage, your proposal and planning is primarily a draft. You will have
|
|||
a chance to
modify the proposal and supplement the design details at
|
|||
different
phases of the project.
|
|||
Portfolio 1.2 (Chapter 2)
Visualize
the page design for your site by sketching a number of page layouts for
different information levels of the site. For example, sketch the main page, a
secondary page, and a content page. You do not have to be concerned with the
exact look of the elements, but be prepared to indicate the main components of
the pages, such as headings, navigation cues, link sets, text areas, and so on.
1.5
Start
to organize your site. Create a visual diagram that indicates the main page,
section pages, content pages, and so on. Indicate the links between the pages.
Indicate whether you will provide alternate navigation choices such as a table
of contents and site map.
* Your
figures and sketches can be hand drawn on paper or created using a drawing
application. To submit hand drawn sketches, please scan or use a digital camera
to capture the originals.
Portfolio 1.3 (Chapter 3)
|
|||
Write a site
specification for the website project. Include as much
|
|||
information as
possible from the project proposal you completed at the end
|
|||
of Portfolio
1.1. Make sure to include a mission statement. Determine how
|
|||
you will
measure the site’s success in meeting its goals. Include a description
|
|||
of the
intended audience. Describe how you will assess user satisfaction with
|
|||
the site.
Include technological issues that may influence the site’s
|
1.
|
||
development or
function.
|
|||
Prepare a
detailed flowchart for your site using the preliminary flowchart
|
|||
you created at
the end of Portfolio 1.2. Create a filename for each page,
|
|||
using a
consistent naming standard. Indicate all links between pages. Write a
|
|||
short summary
that describes the flowchart. Describe why you chose the
|
|||
particular
structure, how it suits your content, and how it benefits the user.
|
|||
Use the page
layouts you sketched in Portfolio 1.2 to create the wireframes.
|
|||
Portfolio 1.4 (Chapter 4)
|
|||
Revisit your
project proposal and the site specifications you created in
|
|||
Portfolio
1.1. How will you implement Cascading Style Sheets (CSS3) into
|
|||
your project
web site? In the next few weeks, you will learn how to control
|
|||
typography,
white space, borders, colors, and backgrounds with CSS3. Think
|
|||
about
each of these style characteristics and how you will apply them to your page
designs. In addition, make a list of possible class names you might use to
identify your content.
For
example, consider using class names for the following page characteristics, as
well as creating some of your own:
•
Body
copy
•
Header
(possibly different levels)
•
Footer
Portfolio 1.5 (Chapter 5)
Design
the type hierarchy for your web site. Create a type specification HTML5 page
that shows examples of the different typefaces and sizes and how they will be
used. This can be a mock-up page that uses generic content but demonstrates the
overall typographic scheme. Consider the following questions:
1.5
• What
will be the typefaces and styles for the body type and headings?
•
How
many levels of headings are necessary?
•
What
are the different weights and sizes of the headings?
•
How
will text be emphasized?
•
Will
hypertext links be standard or custom colors?
•
How
will you ensure the legibility and readability of your text?
•
What
will your line length be?
Portfolio 1.6 (Chapter 6)
Create
the box model conventions for your web site. Build on the typographic classes
you created in Portfolio 1.5 . Think about the different spacing requirements
for your content, and decide how the legibility can be enhanced using the box
properties. Add this information to the type
1.5
specification
HTML page that shows examples of the different typefaces and sizes and how they
will be used. Decide on margins, padding, and borders, and select the elements
that will benefit from their use. Create before-and-after sample HTML5 pages
that reflect the enhanced design.
Design
your website to fit a desktop computer display for an approximate screen
resolution between 1024x768 to 1280x1024.
What to Submit
Submit
one DOC or DOCX file to your Moodle course site online submission portal
for this course. Submit this file with Practical Assessment 1. See next section
for further details.
Please
name this file as PORTFOLIO_1.DOC or
PORTFOLIO_1.DOCX.
What You Need to Do
To
complete the given project specified in the Background section above, you are
to create a prototype of a stand-alone website for a desktop computer. Design your website to be rendered
by a web browser to fit a desktop computer display between 1024x768 to
1280x1024 pixels. The site must have pages that display at least three levels
of information. The contents and resources have been provided in the above
specification. The website will be assessed for cohesiveness, accessibility,
design and development effort.
The
prototype stand-alone website should be created progressively as specified by
each week’s activities. These activities are to be documented and reported in
Portfolio 1. It is understandable that by the end of Portfolio 1, there are
specific techniques or skills that remain to be presented and taught to you.
For all purpose and intention of Practical Assessment 1, your knowledge up to
this point will be sufficient for you to complete a prototype stand-alone website
for a desktop computer. You
will be marked according to your knowledge demonstrated at this point. You will
not be penalised for not demonstrating techniques that have not been presented
or taught to you by the end of Portfolio 1 activities.
Use
any combination of HTML5 and CSS3 to develop this website. Remember to indicate
which desktop browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are
targeting as the main working platform. Do not use Rapid Application
Prototyping (RAD) tools or any other type of scripting languages or services or
add-ons, e.g. Python, Lua, AJAX, Dreamweaver, JavaScript, etc. You are required
to demonstrate your knowledge of HTML5 and CSS3 independently and without the
assistance of automated development and visual design tools. Your website
should be developed to be capable of launching directly from localised desktop
computers. That is, the landing page (i.e.
the first page or top page) of your website can be launched by calling or opening main.html or index.html
directly from within a web browser. No web server is required for Practical
Assessment 1 and 2.
What to Submit
Submit one
ZIP file folder to your Moodle course site online submission portal for this
course.
Please
name this ZIP folder as PRACASSN_1.ZIP. This ZIP folder should contain
the following:
All
necessary files, images, scripts, coding and resources should reside in a
single main folder. 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 index.html startup file.
The web browser you specified should render your markup and scripts without
problems.
Assessment Criteria
The following
criteria will be used to assess your assignment:
Criteria
|
Marks
|
|
• Overall
functionality. Web pages function as intended.
|
5
|
|
• The prototype
sufficiently demonstrates the main features of
|
5
|
|
the
initial design and its intended purpose.
|
||
• Quality of
HTML5 and CSS3 coding techniques. Demonstrates
|
5
|
|
proficiency
in HTML5 and CSS3.
|
||
• Website and
associated webpage design corresponds closely
|
||
to
the work reported in Portfolio 1. Conversely, the details
|
3
|
|
presented
in Portfolio 1 should be supportive of the prototype
|
||
implementation
as demonstrated in Practical Assessment 1.
|
||
• Inline
comments, filename convention and overall file and
|
2
|
|
folder
structure.
|
||
Total marks:
|
20
|
|
• 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.
Comments
Post a Comment