Responsive Web Design
COIT 20268 - Responsive Web Design (RWD)
(Term 2 – 2018)
Portfolio 2
Practical Assessment 2
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
Assessment details for: Portfolio 2 (10
marks).
What You Need to Do
The
Individual Case Project specified in Portfolio 2 is a continuation from Portfolio
1.
At
the end of each week, you will complete a different section of the given
project as specified in the above section. Each of the weekly Individual Case
Project will contribute progressively toward the completion of the given
website project. Each Individual Case Project corresponds with the textbook
chapters from each week’s lesson plan. You are to document and report on each
of these Individual Case Project, cumulating in a final portfolio (i.e.
Portfolio 2). Portfolio 2 should be submitted along with Practical Assessment
2.
Weekly Individual Case Project
|
Marks
|
||
Portfolio 2.1 (Chapter 7)
|
|||
Use your
design sketches from Portfolio 1 and start to build wireframe page
|
|||
mock-ups for
the different page levels of your site. Your website should
|
|||
adopt a
flexible design. Using the skills you learned in this chapter, build and
|
1.5
|
||
submit page
layouts for the different levels of information your site will
|
|||
contain. For
example, you need to build a home page mock-up, an article
|
|||
page mock-up,
and a section page mock-up. Remember to test your page
|
|||
mock-ups with
some text content and at different browser sizes and screen
|
|||
resolutions as
specified in the details for Practical Assessment 2.
|
|||
Portfolio 2.2 (Chapter 8)
|
|||
Gather the
graphics to use on the different pages of your site. This is
|
|||
provided in
the PRORESOURCE.ZIP folder. For other graphics that are not
|
|||
included,
please exercise your creativity to create graphics that you will use
|
|||
in the
project. These include banner, navigation, section, or identifying
|
1.5
|
||
graphics. Add
these graphics to the test pages of your site. Test the images in
|
|||
multiple
browsers to make sure they are displayed properly. Think about the
|
|||
different
color requirements for your content, and decide how you can
|
|||
enhance the
legibility of the content. Can color help communicate the
|
|||
structure of
your information?
|
|||
Determine the
color choices for your web site. Pick the colors for text, table
|
|||
backgrounds,
and page backgrounds. Establish graphics standards for your web site, including
but not limited to the following:
• Decide whether you will use a standard
amount of white space around each graphic.
•
Determine exactly which img attributes
should be included in all <img> tags.
•
Formulate
a standard for all alt and title attributes.
• Formulate a basic set of image standards
for your site. Use this as the display standard for testing your graphics.
•
Determine
colors of links and visited links.
• Write a short standards document that
can be provided to anyone who contributes to the site.
Portfolio 2.3 (Chapter 9)
Examine
the flowchart you created for your web site. Consider the requirements of both
internal and external navigation. Create a revised flowchart that shows the variety
of navigation options you are planning for the web site. Using your HTML
editor, mark up examples of navigation bars for your content. Make sure your
filenames are intact before you start coding.
Save the various navigation bars as separate HTML5 files for later 1.5
inclusion in your web pages. Plan the types of navigation graphics you want to
create. Use graphics from Portfolio 2.2 for your page banners, navigation
buttons, and related graphics.
* Do
not include the HTML5 script files in your portfolio. Include only a selection
of examples of the work you have carried out at this stage. It is assumed that
the HTML5 script files will subsequently be improved and expanded and becomes
part of your final project for Practical Assessment 2.
Portfolio 2.4 (Chapter 10)
|
||
Examine the
content of BUSINESS_HOURS.TXT provided in the
|
1.5
|
|
PRORESOURCE.ZIP.
Design and implement the data contained in this file to
|
||
be
appropriately displayed.
|
||
margins
on all sides, single-sided, Time Romans or New Time Romans font, 12pt font
size, DOC or DOCX format.
Submit
this report as DOC or DOCX into your course website Moodle online submission
portal.
What to Submit
Submit
one DOC or DOCX file to your Moodle course site online submission portal
for this course.
Please name this
file as PORTFOLIO_2.DOC or PORTFOLIO_2.DOCX.
Assessment details for: Practical
Assessment 2 (30 marks).
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 and mobile
device. Design your website to be rendered by a web browser to fit a
desktop computer display between 1024x768 to 1280x1024 pixels. The website
should also adapt responsively to mobile devices. The breakpoint between the display sizes for desktop computer and
mobile device should be approximately
500x720 pixels. The mobile device should also adapt responsively when it is
rotated to a landscape orientation.
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. Responsiveness of each of the webpages will be tested using
Google Chrome’s developers device simulator. The breakpoint for the simulated
mobile device will be set to approximately 500x720 pixels.
The
complete stand-alone website should be created progressively as specified by
each week’s activities. These activities are to be documented and reported in
Portfolio 2.
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 for desktop computers. As for mobile
devices, please use a generic device with a display of approximately 500x720
pixels to be tested using Google Chrome’s developers device simulator.
Do
not use Rapid Application Prototyping (RAD) tools or any other type of
scripting languages or services, e.g. Python, Lua, AJAX, Dreamweaver, 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.
Submit one
ZIP file folder to your Moodle course site online submission portal for this
course.
Please name this
ZIP folder as PRACASSN_2.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
|
|
• Website demonstrates all aspects of a
responsive web implementation.
|
10
|
|
• The completed
website sufficiently demonstrates the main features of
|
5
|
|
the
initial design and its intended purpose.
|
||
• Quality of
HTML5 and CSS3 coding techniques. Demonstrates proficiency
|
5
|
|
in
HTML5 and CSS3.
|
||
• Website and
associated webpage design corresponds closely to the work
|
||
reported
in Portfolio 2. Conversely, the details presented in Portfolio 2
|
3
|
|
should
be supportive of the prototype implementation as demonstrated
|
||
in
Practical Assessment 2.
|
||
• Inline
comments, filename convention and overall file and folder
|
2
|
|
structure.
|
||
Total marks:
|
30
|
|
Comments
Post a Comment