Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Skills Canada National Competition Project
17- Web Site Development / Postsecondary and Secondary June 4-7, 2014 - Toronto
SCNC 2014 – Project 17- Web Site Development
Page 2
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
SCNC 2014 – Project 17- Web Site Development
Page 3
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.
SCNC 2014 – Project 17- Web Site Development
Page 4
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.
SCNC 2014 – Project 17- Web Site Development
Page 5
SCNC 2014 – Project 17- Web Site Development
Page 6
SCNC 2014 – Project 17- Web Site Development
Page 7
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
Your page will be evaluated based on the following criteria:
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.
SCNC 2014 – Project 17- Web Site Development
Page 8
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):
SCNC 2014 – Project 17- Web Site Development
Page 9
Sorting: Trade by Number
Diagram (example):
Filter possibilities: one skill AND all countries; one skill AND one country; all skills AND one country.
SCNC 2014 – Project 17- Web Site Development
Page 10
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.
Your page will be evaluated based on the following criteria:
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