5th National Skills Competition for disable persons Skills-area : Creating Web Pages 1. Task Assignment 1-1. Outline Contestants shall be creating a homepage introducing National Skills Competition for disable persons for Office of Skills Standard and Testing Development in order to promote the contest and encourage Office of Skills Standard and Testing Development, contestants and visitors to use web pages as the communication and knowledge-sharing tools. Contestants should understand the characteristics of this site for planning and producing. The site shall be accessible to various visitors, and contestants shall follow the guidelines of the usability, accessibility and W3C (HTML, CSS) based on the web standards. 1-2. Site Map Index page
Sub menu Introduction Welcome Vision Technology Skills area Crafts National Skills Competition Registration for disable persons Information Department of Skills About us Development
ฉ
Index
บ ับ
Main menu
ร
ง า
1-3. Notice
Text for the sub menu needed for creating the site shall be provided. If there is no text in the sub menus, create a page stating“Under construction”and link it to the menu. Contestants shall refer and use the images from the ‘images’folder when producing the website, but they must be advised that there is no need to use all the images. Contestants shall install the software XAMPP, and then a bulletin board shall be created using PHP for the ‘Notice’ under the sub menus
1-4. Details Contestants shall install XAMP and set configurations, such as the Database of MySQL, then complete the webpage by using PHP.
Page 1 of 6
Index page of the finished task websites must open when inputting http://127.0.0.1 or http://localhost in the web browser URL.
Criteria
O = Obj S = Sub
Description
Design
ง า
Color should coincide with the concept of the site. Also, selection of the color should increase readability and usability through the color contrast of the background color, text, and others. S S
ฉ O S
Criteria
บ ับ
ร
Color coinciding with the concept of the site.
Selection of the color increasing readability and usability. The color contrast of the background color, text, and others. (Background and color(1), text(1), others(1))
Layout should be creative and appealing in the aesthetic point of view.
O
Title, content-area and other important texts should be emphasized and differentiated in order to intuitionally distinguish the importance of the connection between the texts. (2 points will be deducted for each missing item)
O
At least 2 images should be used in the content-area of the index page.
O = Obj S = Sub O
Description Buttons for interaction and hyperlinks should be made in the content-area of the index page. (1 point will be deducted for each redirecting failure)
Page 2 of 6
O
The length of text in the index page should not be long. (A line should contain texts with appropriate length based on the web page structure and design)
Animation
ง า
The animation story should relate with the site concept consistently.
ร
O
S
In general, the animation story should relate with the site concept consistently and understandably.
S
Create the animation story-board.
บ ับ
Image in the animation and text should be well balanced. At least 2 photo images, except the animation logo that is inserted in the index page, should be animated.
O
ฉ S
O
Programming
Criteria
An animation contains at least 2 photo images.
The photo images should be animated correctly.
File size of the animation should be under 800KB.
O
Animation time should be at least 5 seconds.
O
Navigation should be intuitive and convenient for users. (Users can use the web site without spending much time to learn how to use the web page. Users should get their desirable information by performing within 3 clicks)
O
Name and structure of files and directories should be well classified and organized.
O = Obj S = Sub
Description
O
Line-height of the sub-page should be 1.2 times the size of the text.
Page 3 of 6
O
Layout must not contain horizontal scrolling and its size in width should not exceed the 1024x768 pixel resolution. Design elements should not be scattered when monitor resolution is changed.
O
Index page should have a layout done by CSS.
O
Footnotes should be added in CSS.
O
Users should be able to adjust font size from the available fontsizes. (Available font-sizes are 16, 20 and 24)
O O
ฉ O
O
บ ับ
ร
ง า
Print CSS should be used to provide optimized printing mode. (The default paper-size is A4) Alt tags should be used in image. (On the index page) Layouts of the 2 browsers, Internet Explorer and Firefox, should be compatible. No errors should occur when running an error test in a general CSS file through W3C Validator. (1 point will be deducted for each error) Bulletin board should be completed in order to add, delete, and correct contents.
O O O
2. Allocated Time 6 Hours 3. Requirements Page 4 of 6
Contestants are not permitted to refer to any books, notes or memory devices during the contest. All necessary software programs shall be prepared by the Organizing Committee. Contestants are not permitted to prepare nor bring any software programs. Contestants shall notify the judge prior to the contest, if they require the use of any special assistive device (hardware, software). As a rule, contestants may bring the approved device to the Orientation and install in the presence of the judges. ※ No special considerations shall be given if any problems occur with the installed device. The judge shall arrange the seating of the contestants. Contestants are not permitted to communicate with other contestants nor outsiders, and are not permitted to exchange any files during the contest. Contestants shall keep order by following the safety guidelines and the instruction of the judges.
บ ับ
4. List of Materials to be provided No. 1
Materials
ฉ
USB Memory
ง า
ร
Specifications
Qty per person
4 GB
1
5. List of Facilities Installed at Contest Site No.
Facilities
Specifications
Qty per person
1
Computer (for contestants)
Core i3, RAM 2 GB
1
2
Monitor (for contestants)
LCD 17”
1
3
Mouse
USB
1
4
Keyboard
USB
1
Specifications
Qty per person
No.
Facilities
5
OS
Window 7 (English)
1
6
Adobe Creative Suite 5 Web Premium
English, windows
1
7
EditPlus Text Editor
English v3.20 (2010-08-04)
1
8
UltraEdit
English v16.20.0
1
Page 5 of 6
9 10 11
Notepad++ Adobe Flash Player 10.1.102.64 Microsoft Internet Explorer
12
Mozilla Firefox
13
XAMPP
14
GIMP
Latest version
1
English, for Windows v10.1
1
v8 English
1
ง า
v3.6.12 English
1
XAMPP Lite 1.7.3
1
Latest version
1
ร
No Software programs other than the specified are permitted for use. ※ Contestants are not permitted to use the internet during the contest. ※
บ ับ
6. Evaluation Criteria No. Main Items to be Evaluated 1 Design 2 Animation 3 Programming Total
ฉ
Marks 25 25 50 100
Page 6 of 6