skills canada national competition · 2018-02-05 · the following screenshots show how the design...

Skills Canada National Competition Project

17- Web Site Development / Postsecondary and Secondary June 4-7, 2014 - Toronto

SCNC 2014 – Project 17- Web Site Development

Project – Module A CONTENTS

This module has the following files:

INTRODUCTION A Charity Organization named “PetAdopt” requires a design for a new website. PetAdopt

is attempting to raise funds to cover administrative costs for their network of animal

shelters and adoption services. The website will be designed to display donated items

which will be auctioned off on the site. The website will also be used to receive donated

items from benefactors. The target audience for this website would be prospective

donors, individuals who wish to support PetAdopt as well as anyone interested in the

items up for auction.

DESCRIPTION OF PROJECT AND MODULE

Your task is to create a design of a website and a logo for the organization “PetAdopt”. You

have been provided with text and images that will help you in your design. You are not

required to use all of the images and text that have been provided but you should ensure

that there is sufficient text and images included in your design to give a good overall feel of

how the website will look once constructed. You may add other text and information if you

wish. Use of text will only be judged on design, not the meaning of the text. Module A involves designing two (2) pages of a website and a logo for the organization “PetAdopt”.

• A logo that will be the corporate identity for the organization. Logo must be used

as part of your design. Your logo should represent the organization and the

subject of the website.

• Front/Home page includes the following:

o Your designed logo o Search functionality o Sign-up functionality o Log in functionality


o Listing of at least six (6) items available for auction, each including:

§ An image of the item being auctioned § A Bid Now button § A heading and a descriptive text § the current bid amount § he auction end date and time

• Bidding page includes the following:

o Your designed logo o The following input fields:

§ Item name § Project image § Descriptive text § Field to enter the Bid Amount § Bidders First and Last Name § Bidder’s

Address § Bidder’s Telephone Number § e-mail address § Password

o Submit button INSTRUCTIONS TO THE COMPETITOR

• Module A is to be completed in a time of 2.5 hours as specified by the

competition schedule.

• Your submitted work for this project should consist of two (2) .PNG files. One

separate file containing your design for “PetAdopt” front page and one separate

file containing your design of the Bidding page.

• When naming your files and folders, “XX” is your competitor number ( ex. 07).

• Name your front page file “XX_index” ex: XX_index.png

• Name your bidding page, “XX_bid”, ex: XX_bid.jpg

• Submit your work by saving your files as directed in the folder named

“XX_Module_A”

• Save the source files of images to a folder called "XX_source_files" inside

"XX_Module_A" folder.

Source files are the files containing the layers - example Photoshop PSD files.


MARKING SCHEME

Your page will be evaluated based on the following criteria:

Criteria Objective Subjective Total Web Multimedia Creation

and Integration 2 2 4

Planning and Designing for the Web

5 5 10

Project – Module B INTRODUCTION

A designer designed a web page design for an online store, Imaginary Store. The design automatically adapts the width of the viewport. Your task is to implement the layout into HTML / CSS.

The following screenshots show how the design looks in 1280px width, 768px width and 480 px width. The breakpoint of narrow and wide screen layout is 500px.

Please also note the following style while the search box is on focus.


DESCRIPTION OF PROJECT AND TASKS

1. The website code should validate to HTML5 . 2. Your CSS code must validate to CSS Level 3. 3. Place comments through your HTML and CSS to highlight what your code is doing. 4. Cross-browser compatible between Internet Explorer and Google Chrome. 5. The design will be marked within Internet Explorer and Google Chrome. 6. The font used is Pacifico and PT Sans font. 7. Some elements are only visible in wide screen layout and some elements only

appear in narrow screen layout. 8. The navigation in narrow screen links to the bottom navigation section. And clicking

on the “Back to top” links back to the top of the page. INSTRUCTIONS TO THE COMPETITOR

Create a folder on your desktop called "XX_Module_B". Save you final website into this

folder. Module B is to be completed in a time of 4 hours as specified by the competition

schedule.

MARKING SCHEME


Criteria Objective

Subjective

Total Client-side Implementation 26 4 30

This module is marked in Google Chrome, full screen resolution unless otherwise stated in an individual aspects description.


Project – Module C INTRODUCTION

WorldSkills International would like to analyse and compare competition results from previous competitions. All data is available and WorldSkills would like to provide the results of this data as an interactive AJAX application, so that interested individuals can look at the data from various perspectives. They have prepared a very basic (static) template for the interface. For this phase they want to test the functionality.

DESCRIPTION OF PROJECT AND TASKS

It is your task to create and implement the AJAX (php, javascript ) functionalities for the aggregation and display of the data. The data will be provided in an XML-Format file. The data contains fields like:

• Trade Group

• Trade Number

• Trade Name

• Country

• Award

• Result/Marks Total

• Result/Marks per Day (days 1 through 4) The user should be able to display the aggregated data for the required abstraction (e.g. total medals per country, average marks per country, number of competitors per trade, etc.).The fields, order (sorting) and the range (one, multiple) of the data should be as sketched below:

Table (example):


Sorting: Trade by Number

Diagram (example):

Filter possibilities: one skill AND all countries; one skill AND one country; all skills AND one country.


INSTRUCTIONS TO THE COMPETITOR

• Server-side libraries may NOT be used in this module - the code needs

to be written from scratch and by hand.

• Client side library (jQuery, mootools, prototype ...) can be used

• Where not stated otherwise, you can return the data in table-format. You

can also use temporary database-tables if that is helpful for you, but any

changes in the data provided should be visible in the output.

• Communication between client and server side should be done with Ajax

• The display of the diagram should be done with the HTML5 canvas

MARKING SCHEME

This module is marked in Google Chrome, full screen resolution unless otherwise stated in an individual aspects description.


Criteria Objective

Subjective

Total Diagram 2

0 2

0 Table 15

15 Data structure, coding and security 2

0 20 TOTAL 2

5 20

55

skills canada national competition · 2018-02-05 · the following screenshots show how the design...

Documents