Reference no: EM133117778

ICTWEB519 Develop complex web page layouts

Web Design Cluster

Brochure Website Project

You are an employee of Uptown IT and you work in the Commercial Creative Department. Your role is to design and develop websites and in recent years you have specialised in designing single page websites (Brochure Websites). Your manager has assigned you to a new project and has provided you with documentation regarding the project requirements. You also attended two client meetings.

Your teacher/assessor will take on the role of a manager for Uptown IT Commercial Creative Department.

Read and familiarise yourself with the Project Scenario or Case Study before proceeding with project tasks. Confirm anything you are not sure about the project with your teacher. It is essential that you have a clear understanding of the scenario and tasks that you need to complete.

This assessment instrument requires the student to complete a project that is divided into four (4) parts:

• PART 1 Identifying the page content and design the HTML page structure
• Task 1 Identifying the HTML page requirements
• Task 2 Design and create HTML page as per requirements
• Task 3 Page layout design considerations
• Task 4 Create HTML page layout sections
• PART 2Cascading style sheet (CSS) to format page layout
• PART 3Test, debug and validate HTML and CSS against the W3C

• Students are required to provide their own storage device. The recommendation for this qualification is an external SSD drive with at least 500 GB capacity, if you need to store a copy of the Virtual Machine (VM). For assessment files only, a 64 GB thumb drive will be sufficient.
• Access to computers. PCs and peripherals - these may differ between classrooms
• Internet access
• Access to a number of browsers
• Access to different devices to test website
• Access to Connect (LMS)
• Word processing software, such as Microsoft Word.
• Special purpose tools, equipment and materials to complete the assessment

To achieve a satisfactory result, your assessor will be looking for your ability to demonstrate the following key skills/tasks/knowledge to an acceptable industry standard. Demonstrated ability to:
• Identify legislative and organisational standards and procedures in relation to webpage development
• Design a web page as per client specifications
• Create HTML and CSS layout structure
• Use HTML semantic elements
• Use complex CSS to formal page layout
• Positioning page elements using complex CSS
• Test design and functionality of a web page against W3C
• Test and debug a web page
• Test is at least two (2) browsers and two (2) devices
• Obtain client sign off
• Six (6) knowledge questions related to CSS, HTML, XHTML and web design.

Case Studio - Scenario
CLIENT DETAILS: ABC Optical - Optical Store
We sell ophthalmic glasses, sunglasses and contact lenses. We specialise in optical requirements for children.

PART 1 - Identifying the page content and designing the HTML page structure

Task 1 Identify the HTML page requirements

1.1 What does the client want to achieve with this web page?
1.2 Who is the target audience for the page?
1.3 Are there any legislative or organisational standards that the designer/developer must comply with in the development of the web page?

Task 2 Prepare site environment: folder structure, naming convention
1.4 Create an appropriate folder structure. All folders must contain relevant files and each folder should not exceed 1 MB.
1.5 The index.html file must be placed in the root folder
1.6 Naming convention: All filenames must be descriptive of the content, lowercase, and no spaces are allowed in the names of files and objects as specified in the style guide.

Task 3 Page layout sections design considerations

1.7 Create a wireframe or skeletal outline of the page layout, that is, a diagram or sketch that identifies each section of the page, with elements positioning and dimensions. Name all sections in the layout diagram. This diagram will be used as the blue print to create the HTML page.
You need two versions of the page layout (wireframe) to suit the layout of at least two (2) devices, for example a PC/laptop screen and a mobile phone screen.

1.8 Access the style guide provided and document the typography, iconography and colour scheme for each elements/section outlined in the wireframe diagram.

1.9 Although the markup language has already been selected by your manager, you have been asked to research and evaluate three (3) markup languages and identify the most appropriate one for the task. Use five (5) selection criteria items. You can use the table below to present your finding and your selection.

Task 4 Create HTML page layout sections
1.10 Create the page as per wireframe structure diagram using HTML 5 and making sure that you:
a) Use semantic elements only for the layout structure
b) Create sections with ID attributes to be used as targets
c) Create the menu with HREF elements that target the required sections
d) Ensure that sections alternate between image background and a coloured background
e) Ensure that content is delivered one screen at a time with internally targeted hyperlinks
f) Correct indentation of HTML code

PART 2 - Cascading style sheet (CSS) to format page layout

2.1 Before creating the CSS to format the page layout appearance, access and review the documentation created in Part 1- 1.7 and ensure that it complies with the organisational procedures presented in the style guide.

2.2 In PART 1 you designed and implemented the HTML layout structure using HTML elements. In this part you need to create and apply the CSS necessary to format the layout of the page. The CSS must include:
a) Responsive layout to suit multiple device sizes - tested in at least two (2) devices
b) Extensive use of CSS box model to ensure sufficient white space between sections
c) Inline CSS methodology: inline-block
d) Layout should be in flow. No position: absolute
e) Styling exclusively on semantic elements not ID or CLASS
f) Demonstrated use a CSS combinator
g) CSS complies with the style guide

PART 3 - Test, debug and validate web page

3.1 Test the webpage functionality to confirm that it has been developed according to the client's requirements and the layout design.

3.2 Use browser developer tools to debug page design and functionality as required until it meets the client's requirements. Check with your manager (teacher/assessor) to confirm requirements, as required.

3.3 Validate HTML and CSS using the W3C Markup Validation Service. Provide screenshots of completion reports.

3.4 In order to confirm accessibility has been met at the required level, you can use Achecker or similar tool. The tool checks HTML elements (sections are also HTML elements) compliance with WCAG 2.1 on each page in the website. The tool outputs a comprehensive report that identifies errors, warnings and tips.
Your task is to run an accessibility checker tool on your completed website. Test for WCAG 2.1 Level-AA. Provide report or screenshot. However, if there are errors, fix them and provide a new report and screenshot. If some errors cannot be fixed, explain why this is the case. For example, it may require assistive technology that you don't have access to. Once all errors are fixed you can add the WCAG 2.1 compliance logo to your website.

3.5 Test cross-browser compatibility. The test includes at least two (2) browsers and two (2) devices. Fix as necessary. Re-test. Provide screenshots as evidence.

3.6 There are areas of concern in terms of cyber security for this project. Implement at least 1 cyber-security measure for each of the following areas:
a) Authentication process
b) Programmatically engineered solutions to avoid cyber-attacks
c) Protocols

3.7 Attend a meeting with your manager seeking confirmation of project completion.
Obtain sign off from the client representative.

PART 4 - Knowledge questions related to CSS, HTML, XHTML and web design

4.1 Propose three (3) methods that could be used to apply CSS to web pages and outline their main features and attributes.

4.2 Simplicity, visual hierarchy and grid-based layout are web design principles. Discuss how each of these could be applied to the single page web project.

4.3 Evaluate two (2) web scripting design principles used in front end web development mostly enabled by software frameworks.

4.4 Compare HTML and XHTML and identify three (3) differences.

4.5 What are the advantages of creating and implementing organisational procedures to develop CSS? Present and outline at least three (3) advantages.

4.6 The items listed below are CSS standard rules. List four (4) more standard rules and evaluate what the advantage of using each of these rules is.
• Use soft-tabs(spaces) with a two space, indent
• Use double quotes
• Place spaces after: (colon) in property declarations
• Place spaces before { (braces) in rule declarations

4.7 The terms web libraries and web frameworks are often mistakenly interchange. Research the terms and clarify the following:
a) What are web libraries and web frameworks?
b) Outline the differences between web frameworks and web libraries. Provide examples to illustrate your answer.

4.8 Contingency task. Assume that you have completed the project and you are ready to attend the schedule testing session in a few hours. Three people were required for the testing:
• Yourself - as the web developer
• Project Lead (your manager)
• Tester

The tester communicates to you that due to illness he cannot attend the planned testing session. Explain how you would resolve this situation.

Attachment:- Web page layouts.rar