9:00am - 9:30am          Competitor Registration & Welcome

9:30am - 12:30pm          Competition

12:30pm - 1:00pm          Lunch

1:00pm - 3:30pm          Competition

3:30pm - 4:00pm          Clean up

4:00pm - 5:00pm          Pizza & Results Submitted

5:30pm - 6:30pm          Awards

6:30pm - 7:30pm          Open House & Collect Projects/Tools

1. GENERAL CONTEST INFORMATION

1.1 Purpose of the Contest 

To provide competitors with the opportunity to demonstrate, through practical and theoretical application, their skills in client and server-side Web design and development. 

This contest is offered as an official contest 

This contest is offered at the Skills Canada National Competition (SCNC)

For WorldSkills Information, please visit the Skills Ontario website under Competitor Eligibility. 

1.2 Technical Committee 

Technical Co-Chair(s) : 

Dalibor Dvorski, University of Waterloo 

Harsh Thakkar, Sheridan College Institute of Technology and Advanced Learning 

Contact: competitions@skillsontario.com 

Any questions regarding this scope must be sent at least two weeks prior to the contest date to be guaranteed a response. 

2. SKILLS AND KNOWLEDGE TO BE TESTED 

PRACTICAL 100% 

The Web Design and Development contest challenges competitors to design a Web solution based on provided requirements. The implementation of functional and non-functional requirements – using the HTML, CSS, JavaScript, and PHP languages, a relational database, and software frameworks and tools – is the primary focus on this contest.

3. JUDGING CRITERIA 

Content:

 o The purpose of the web application is clearly identified. Titles, logos, and headings, communicate intents and objective of application. 

o Content is organized in a logical and useful manner; it moves from introductory or general content to specific or detailed content. 

o Content supports the intention of the application. The information is useful and creative. The content is presented in an interesting and original manner. 

o Text and graphics are organized in a way to promote readability. White space and other devices make pages easy to read or view. 

o Graphics and text work together to realize the objectives of the application. Graphics are not used for their own sake. 

o Page format is appropriate. Pages are not inordinately long. Scrolling is kept to an acceptable level. 

o Content must be only material that the contestants create during the contest or is provided to them by the contest organizers.

Navigation: 

o Links are easily identifiable and their use is intuitive. Users can move easily both forward and backward through the application. 

o The path to desired information is clear. Menus direct visitors to relative information. 

o The user experience is reasonable; visual elements are effectively used to provide the user with a high level of engagement. 

o Links to information located on the same page (anchors) are appropriate. 

Visual: 

o The application is aesthetically appealing. Use of background and foreground colour promotes readability. 

o Graphic size, positioning and type enhance text and navigability. 

o The visual theme is consistent. There are no jarring changes in layout, font usage, colour, as the visitor moves from page to page. 

o Visual design is creative. The visual design has a high level of originality. o The design includes original vector or bitmap graphics created by the competitor.

o The solution includes photographs and images (conversion to GIF or JPEG may be required).

Solution Structure: 

o Web pages must validate as (X)HTML. 

o Web application must be consistent across all Web browsers. 

o Design a solution that allows for easy updates and maintenance. 

Cascading Style Sheets: 

o Clearly separate content from presentation through the use of Cascading Style Sheets. 

o ID and class names are properly written and referenced using camel case notation. 

Web Form: 

o Demonstrate proficiency in the design of Web forms and the validation (client- or server-side) of form data. 

o Ensure that Web forms are properly marked up and accessible.

Client-side Frameworks: 

Use of Bootstrap and/or jQuery in a meaningful and useful manner in the development of the competition project. 

MariaDB: 

o Create a database and tables from a description using MariaDB and phpMyAdmin. 

o Write PHP code to create, read, update, and delete data entries to a MariaDB database. 

Overview and Marking Rubric: 

There are two groups of judges: 

o Coding judges who evaluate the technical aspects of the solution. 

o Design judges who evaluate the appearance, content, usability and accessibility of the solution. 

As the rules state, there are no ties. 

In the Event of a Tie: Should the competitors be tied in total points, the individual with the best score in the coding component will break the tie.

4. EQUIPMENT AND MATERIALS 

Supplied By Technical Committee: 

• Tables and chairs 

• Maximum of 2 120V power outlets 

Equipment and material provided by the competitor:

• Computer terminal with Windows 10 

▪ Please ensure you bring your own network adapter if your computer does not have one built in (There is no WIFI available). 

▪ Any device brought to the competition must include a driver that is compatible with Windows 10

▪ Competitiors may wish to bring a back-up device as no back up devices will be available/ supplied 

• Latest versions of modern Web browsers: 

o Mozilla Firefox (https://www.mozilla.org/firefox/) 

o Opera (https://www.opera.com/) 

o Google Chrome (https://www.google.com/chrome/) 

o Microsoft Edge (https://www.microsoft.com/edge/) 

• XAMPP (https://www.apachefriends.org/): 

o Apache 

o MariaDB 

o phpMyAdmin 

o PHP 

• Development environments 

o Aptana Studio (http://www.aptana.com/) 

o Visual Studio Code (https://code.visualstudio.com/) 

o Adobe Dreamweaver (commercial software) (https://www.adobe.com/ca/products/dreamweaver.html) 

• Text editors: 

o HTML Kit (http://htmlkit.com/) 

o Vim with Cream (http://cream.sourceforge.net/) 

o Notepad (included with Windows) 

o TextPad (commercial software) (https://www.textpad.com/) 

• Graphics and multimedia applications: 

o GIMP (https://www.gimp.org/) 

o Inkscape (https://inkscape.org/) 

o Paint.NET (https://www.getpaint.net/) 

o Adobe Photoshop (commercial software) (https://www.adobe.com/ca/products/photoshop.html) 

o Adobe Illustrator (commercial software) (https://www.adobe.com/ca/products/illustrator.html) 

• Frameworks: 

o Bootstrap (https://getbootstrap.com/) 

o jQuery (https://jquery.com/) 

Books, notes, materials and assisting devices are not permitted unless listed above.

Devices such as smartphones and media players are not permitted on the contest site. 

Prior to attending the Skills Ontario Competition, students should be familiar and competent in the use of the tools and equipment listed above as well as safety precautions that should be observed.

5. SAFETY 

Safety is a priority at the Skills Ontario Competition. At the discretion of Technical Committee, any competitor can be removed from the competition site for not having the proper safety equipment and/or not acting in a safe manner.