KTORAT PEMBINAAN SEKOLAH MENENGAH KEJURUAN. Kompleks
Kemdiknas Gedung E Lantai 12-13. Jalan Jenderal Sudirman Senayan Jakarta
10270.
LKS SMK Tingkat Nasional Ke-XIX Ke Tahun 2011
SOAL BIDANG LOMBA
Web Design
KEMENTERIAN PENDIDIKAN NASIONAL DIREKTORAT JENDERAL PENDIDIKAN MENENGAH DIREKTORAT PEMBINAAN SEKOLAH MENENGAH KEJURUAN Kompleks Kemdiknas Gedung E Lantai 12-13 Jalan Jenderal Sudirman Senayan Jakarta 10270 Telepon (021) 5725477 (hunting), 5725466-69, 5725466 69, 5725471 5725471-75 Fax. 5725467, 5725469, 5725049 Site: www.ditpsmk.net
WEB DESIGN Guidance: Read every step below carefully before you create the website. You are please to ask the judge if you have any problem concerning the requested form. Time to read about 30 minutes.
Task: You are required to create Journal Online website.
The website consists of
several pages, with appropriate internal links, and if relevant, external links as well. The website must be accessible to a wide audience and must therefore follow basic usability and accessibility and W3C (XHTML, CSS) guidelines.
Certain Rules: 1. All the competitors is not permitted to use own files or data. All will be provided by the committee 2. Not all the given data / files should be used. The competitor may choose all or some of the files according to the design concept intended. 3. No wizard function to create a page (harm full by judged) 4. Script by Java and PHP is free to choose. 5. There are at least 8 pages in the website.
Content of Website: Your website must include the following design elements and functionality: 1. An index/home page comprising a. An animation appropriate for the online Journal website [To be located on the home page] b. Provided link to page author, user, librarians as admin c. Browse journal ; by title and by subject (mathematics, computer, electronic etc) d. News e. Info related to journal e.g New journals f. Register for account g. Add journals to the basket or Cart Soal LKS SMK XIX Tahun 2011
1
2. About section comprising a. Contact Us b. Site Map c. Help 3. Journals catalogue a. Search Engine consist of two functionality ; quick search and advanced search that allows end user to search for any information from the journal database based on keyword(s), e.g keyword, author, title, subject, etc. Search results should include information from any page including journals information b. A to Z alphabetical listing of catalogue journal 4. Site Map is dynamically linked to the menu.
When a menu item is
created/updated/deleted in the CMS, a site map element is automatically created/updated/deleted. 5. Contact section 6. Navigation a. Footer information (Privacy policy, legal and copyright information) b. A Navigation including main, sub-menu, search, site map, contact
Your website must comply with the following technical specifications: 1. The website code should validate to XHTML 1.0 Strict. 2. Accessibility and usability standards: a. Use Alt tags b. Cross-browser compatible between Firefox 3.6 and IE 8 c. Allow end user to change font size. d. Work in different screen resolutions (Native: 1024 pixels by 768 pixels). Note: Judges will evaluate the website based on native screen resolution and check it in 1024 pixels x 768 pixels. e. Use the tab key to navigate through menu and form input boxes. f. Format layout and presentation using CSS – [table-less page/template layout]. Note: If CSS is disabled the page content keeps it’s logical structure. g. Identify row and column headers for tabulated data. h. Provide sufficient contrast between text and background colours
Soal LKS SMK XIX Tahun 2011
2
i.
Keep navigation systems consistent
j.
Use internal documentation in PHP, XHTML, and CSS
k. Use label tags for form input fields 3.
Author page supported to open journals and upload new journals.
4.
Librarian page consist of journals update, download, and price list.
5.
User page consist of upload journals, FAQ, and download premium journals.
6.
The Member registration area should collect the following data: Note:
M – Mandatory
O - Optional
P – Public
H – Hidden
a. Title M|H
k. Email Address M | H
b. First Name M | H
l.
c. Last Name M | H
m. Mobile Phone O|H
d. Organisation
n. Affiliation O|H
e. Country O | H
o. User Name M | H
f. Province O|H
p. Password M | H
g. Address O | H
q. Email M|H
Fax O|H
h. City O | H i.
Country M | P
j.
Phone Number M | H
7. Search Engine Optimization: a. Use meta tags with proper meta tag information [e.g. Description and Key Words] b. Use search engine friendly URL’s
Ex: Not a search engine friendly url: http://www.journalol.com?page=contact
Ex: Search engine friendly url: http://www.journalol.com/contact
8. Admin/Librarians Module should be integrated into the website and should
Allow admin/librarians to add, modify, or delete menu items
Allow admin/librarians to add, modify, or delete member
Soal LKS SMK XIX Tahun 2011
3
Allow admin/librarians to add, modify, or delete web site content
Note : The admin/librarians area is integrated into the website. 9. Security Details
Encrypt passwords in database
Safe handling of variables (Guard against PHP and MySQL code injection)
Validate form field entries that are mandatory (See point 3 above). Choose client side or server-side validation.
Day 1 ( 7 hours ) : At the end of this day the following site elements have to be completed for: 1. Page Layout(s) – this may be an image of the design of your site 2. Animation 3. Directory structure 4. GUI – the code of the layout is completed 5. Authors, user, and librarians page. 6. Navigational is operational 7. Member registration form is visually complete (functionally complete) 8. Search engine friendly URL’s You may proceed with the tasks for day 2 if you have finished day 1 tasks.
Day 2 ( 3 hours ): If you include special features that are not listed in the project indicate them on the site plan. You should highlight special features during your presentation.
At the end of this module, these following tasks have to be accomplished: 1. Site Navigation including search functionality 2. journals Catalogue completed 3. Membership Registration with validation form 4. Download journals completed 5. A functional website complete with Content Management System (CMS) and security. 6. Include your username and passwords for admin areas on form provided at the end of the competition. Soal LKS SMK XIX Tahun 2011
4
7. Testing and debugging 8. Optional site demonstration: You can use your live site for the demonstration. Note – this demonstration is evaluated.
Criterion ID
Criterion Description
Total
A
Animation
10.00
B
Graphic Template Design
25.00
C
Front End Implementation
25.00
D
Back End Implementation
40.00
TOTAL
100.00
Day 1 (7 hours): Session 1 (4 hours) At the end of this day, the design and front-end will be marked:
A4: Journals Online animation
Design of the journals Online animation
A5: Technical quality of Journals animation
A6: All animations added to the website Whether the animations have been
Content used, file size
added
B1: Usability
Text, easy access to information
B2: Aesthetics
Colours, balance of elements
B3: Creativity
Originality
B4: Lay-out
Positioning of elements
C3: Design of the website Look and feel of the site
C4: Graphic User Interface
Elements added to the site such as header,
footer
C1: Coding
Structure of coding
C2 : Usability
Easy use of site
C5: Finalising
C6: User Friendly
Soal LKS SMK XIX Tahun 2011
Whether everything is finished Site is user friendly
5
Session 2 (3 hours) At the end of this day, the parts of the back-end will be marked:
D1: Usability
D4 : Authors section
D5: User section
D6 Admin/librarians
Search engine friendly url’s Registration, Login Registration, login
Day 2 (3 hours): At the end of this day, the animations and the parts of the back-end will be marked:
D2: Security
Protection of passwords and
database
D3: Search functionality
The ability to search through
database
D6: admin/librarians section
D7: Journals Catalogue
Login, insert, edit, delete
Good Luck
Soal LKS SMK XIX Tahun 2011
6
