L0MBA KOMPETENSI SISWA

SEKOLAH MENENGAH KEJURUAN

TINGKAT PROVINSI KALIMANTAN SELATAN

Banjarmasin, November 2017

Informasi Lomba

BIDANG LOMBA
WEB DESIGN

PEMERINTAH PROPINSI KALIMANTAN SELATAN

DINAS PENDIDIKAN DAN KEBUDAYAAN
Komplek Perkantoran Pemerintah Provinsi Kalimantan Selatan
Jl. Dharma Praja II Nomo1 Trikora Banjarbaru
www.disdik.kalselprov.go.id
 KEBUTUHAN ALAT DAN SOFTWARE

1. perangkat yg di butuhkan saat lomba

+ PC (jika tidak bisa maka diperbolehkan menggunakan notebook yang sudah di format sebelum lomba
oleh panitia)

 Intel core i5
 Mouse Optical
 Harddisk min 120 GB
 Standard Memori min 8 GB
 Headset

3. aplikasi aplikasi yg di butuhkan bersama versinya

+ XAMPP 7.1.9
Ekstensi yang dibuka untuk lomba :
- OpenSSL PHP Extension
- Mbstring PHP Extension
- Tokenizer PHP Extension
- Reflection extension
- PCRE extension
- SPL extension
- Ctype extension
- MBString extension
- Intl extension >= 1.0.2
- ICU version >= 49
- Fileinfo extension
- DOM extension
- PDO extension
- PDO SQLite extension
- PDO MySQL extension
- GD PHP extension with FreeType support
- ImageMagick PHP extension with PNG support
+ Adobe Dreamweaver, Photoshop, Illustrator (CC Edition atau CS6)
+ PHPStorm 2017.1 – trial edition atau lebih baru
+ Brackets 1.11
+ Sublime v2
+ Composer
+ Nodejs v6.11.4
+ Microsoft Office
+ Firefox Developer Edition (newest)
+ Google Chrome (newest)
+ SQLYog / WebYog
+ MySQL Workbench
+ Atom
+ Notepad++
+ Sublime Autocomplete plugin https://packagecontrol.io/packages/All%20Autocomplete

4. operasional sistem.
+ Windows 10 - 32/64 bit
 PRE TEST PROJECT MODULE A
INTRODUCTION

“Chauffer Cars” is a company service specialise in wedding service car. They need a new website to support
their business which include their service, products offer and reservation. The target audience for their
website is young-couple whom are going to marriage.

DESCRIPTION OF PROJECT AND MODULE

Your task is to create a responsive design of a website and a logo for the “Chauffer Cars”. You have been
provided with text and images that will help you in your design. You also have been provided with
“Chauffer Cars” old website. 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.

You should create mock-ups of your re-design to be presented in individual files for each of the
defined devices and resolutions (width x height):

 Computer - 1440 x 900 pixels

 Tablet - 768 x 1024 pixels
 Smartphone - 320 x 480 pixels

The above resolutions are the devices standard format. Additional space may be used if needed to
illustrate scrolling or swiping as required by some devices. If you incorporate menus or other features into
your design you may illustrate these by include additional views, either within the design or in additional
files. Features and functionality should be self-explanatory, no written instructions are allowed in the
mock-up files.

All mock-ups should be presented in real pixel size and must include a red line, less than 3 pixels wide,
showing the device screen border resolution.
This module involves designing the home pages of a website and a logo for the organization “Chauffer
Cars”. With requirement listed below:

 A logo which will be the corporate identity for the organisation. Logo must be used as part of your
design. Your logo should represent the organisation and the subject of the website. The logo must
be used in the design.
 Search cars and offers
 Log in component
 Listing of at least 3 (three) cars, each including:
o Thumbnail image
o Car Information (name, short description, etc)
o Price information (rent, usage, driver, etc)
 User testimonial

The design of front page must contain at least all information included on the original website. The
computer view should illustrate a hover/mouse over effect.

This is a design module, no coding is allowed and all interactions should be visible in the design images.

Your design will be assessed by industry standards and needs to incorporate best practice of responsive
design.

INSTRUCTIONS TO THE COMPETITOR

 Save your file in the root directory of the folder named "XX_MODULE_A" where XX is your
computer number. Naming of files:
o Computer: XX_computer.png
o Tablet: XX_tablet.png
o Smartphone: XX_smartphone.png
 You can create additional images (optional) per resolution to highlight hidden elements, animations
or any additional information that will aid in the development of the website.
 Naming of additional files:

o Computer: XX_computer_2.png, XX_computer_3.png

o Tablet: XX_tablet_2.png, XX_tablet_3.png
o Smartphone: XX_smartphone_2.png, XX_smartphone_3.png
 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, development files, i.e. .psd/.ai/.jpg/.svg/…

Give red box which will indicate how the web page looks on screen. Below is an example of a computer
display that you will submit.
 PRE TEST PROJECT MODULE B
Introduction

You need to implement a layout for coworking space called Workthink. The UI designer has designed the
interfaces for you to make use of. You can find the design in the project files supplied.

We want you to follow the design to implement the layout by using HTML and CSS.

The layout needs to work in different screen resolutions. From the provided material, you can find
different design screens at width points from 320px width to 1440px width.

Description of project and tasks

There are following sections that you need to implement in your layout.

• Website Heading
• Navigation
• About section
• Plans section
• Newsletter section
• Copyright section

JavaScript

This module tests your HTML and CSS skills. You should not modify the given JavaScript code in this
project. We will disable any extra JavaScript during the marking.

Accessibility

You should apply proper accessibility roles to the essential elements.

Text selection
There is a text selection background colour applied to the web page. The colour follows the major colour
of the website, which is gold colour.

Notes

• The HTML is valid to HTML5 through W3 validator

• The CSS contains no syntax errors
• The people hover animation matches the provided motion design.
• The position of web page sections matches the given design.
• All photos, except explicitly mentioned, must be implemented by img tag.
• The placement of script tag matches the latest practice.
• All text is indexable.
• All image has alternative description.
• There are at least 5 comments in the HTML document.
• There are at least 5 comments in the CSS document.
• The text selection matches the given design.
• The HTML structure is extensible and maintainable.
• The Grid structure is extensible and maintainable.
• The CSS and coding style is readable and easy to maintain.
• Proper accessibility roles are applied to HTML.

Instructions to the Competitor

 Save your files in your root directory on the server called "XX_Layout_Module_B"
where XX is your computer number.
 You are required to submit the implemented website according to the requirements.
 Please make sure you name the HTML file index.html.
 PRE TEST PROJECT MODULE C
Introduction

QuestMe is a company like Quora. They would like to create a website that could help user to get some
features like Quora, such as add question, search question, and answer question.

Description of project and tasks

The QuestMe system should cover the following requirement:

Menu Detail

 User can login using valid email address and valid password.
 Only user that has been registered can be logged in.
 The website is open for public, so unregistered user can register for access the
Login and
website by field: display name, valid and unique email address, and valid
Register
password.
 After registering, the registered user will redirect to main application page.
 Make sure your system is preventing users to access authorized menu.
 User can ask custom question, by fill the following input: question title and
content (optional).
Ask Question
 After ask the question, user will redirect to created question for see the detail
question that has been created.
 Display all question.
 The questions data should be paginate by 5 data per page.
Explorer  For the feeds, there will be 2 filter options:
1. Latest Questions (sort the questions by the created date descending).
2. My Questions (show only user questions).
 You must display the answer question panel if the user’s question not same
as the logged in user.
Detail Question  User can add answer by using the answer question panel.
 Display question detail with the comment feeds.
 Display all answers with the comment feeds.
  User can search all question available.
Search Question
 All questions can click to see the detail question.
Logout You must provide logout to sign out the active user.

DATABASE

You must create your own database for cover all tasks.

Notes

 At least five useful comments are added to this project.

INSTRUCTIONS TO THE COMPETITOR
 Save your files in your root directory on the server called "XX_MODULE_C"

 Name the file to start the application “index.php” and put it directly into the project root directory.
 Create/generate a db-diagram named “xx_erd.xxx” (xxx is the extension/type of the file eg. Pdf,
png, or jpg) and put it into “db-dump” folder inside of project root directory. Example:

 Create/generate a sql dump database named “xx_database.sql” and put it into “db-dump” folder
inside of project root directory.
 Save all your work files (those that will not be assessed) into “work” folder inside of project root
directory.
 Save all other files (those that will be assessed) into a suitable directory structure and naming
inside the directory mentioned above.
 For this module, you must use one of the three available frameworks which installed on
familiarization-day. Applications developed without use of any of these frameworks will not be
considered. You should take advantage of the framework as much as POSSIBLE.
 Assessment will be done on the files and data in your database "xx_module_c" on the central
server.

 XX is your computer number.

 Your Project will be marked in

Google Chrome.

Files PROVIDED

ITEM DESCRIPTION

Laravel v5.4 PHP Framework Web Design Competitor can choose which
one of these frameworks he wants to use.
Installation will be done on the familiarization-
day (C-1)

Yii v2.0 PHP Framework Web Design Competitor can choose which
one of these frameworks he wants to use.
Installation will be done on the familiarization-
day (C-1)