Anda di halaman 1dari 7

LOMBA KOMPETENSI SISWA

SEKOLAH MENENGAH KEJURUAN


TINGKAT NASIONAL
TINGKAT XXV - 2017
KAB. JEPARA

KISI-KISI

BIDANG LOMBA
WEB DESIGN AND DEVELOPMENT

DINAS PENDIDIKAN DAN KEBUDAYAAN


KEMENTRIAN PENDIDIKAN DAN KEBUDAYAAN
PROVINSI
DIREKTORAT JAWA
JENDERAL TENGAH
PENDIDIKAN MENENGAH
DIREKTORAT PEMBINAAN SEKOLAH
TAHUN 2018MENENGAH KEJURUAN
JALAN JENDERAL SUDIRMAN GEDUNG E LT.12-13
SENAYAN - JAKARTA

LKS SMK Kab. Jepara 2018 Bidang Lomba Web Design


LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT KAB. JEPARA 2018

KISI-KISI SOAL
KELOMPOK TEKNOLOGI INFORMASI
BIDANG LOMBA WEB DESIGN AND DEVELOPMENT

A. Pendahuluan

LKS tahun 2018 bidang lomba Web Design akan memperlombakan kompetensi meliputi
pengetahuan, pemahaman, dan keterampilan di bidang web design dan pemrograman
web. Bidang lomba ini akan digarap secara individu, yang mewakili SMK yang ada di Kab.
Jepara.
Dalam kompetisi keterampilan, penilaian pengetahuan dan pemahaman akan berlangsung
melalui penilaian kinerja. Tidak ada tes terpisah untuk pengetahuan dan pemahaman.
Perlombaan ini menganut sistem fair play, yakni berlomba pada batasan yang sudah
diketahui sebelumnya, kemampuan yang dituntut adalah kemampuan bekerja dengan
cepat, tepat dan hasil sesuai dengan test project.

B. Kisi-kisi dan kriteria Lomba

Lomba yang dilaksanakan merupakan satu kesatuan yang utuh, mengacu pada
kemampuan teori dan praktek khususnya pada kemampuan design dan kemampuan
pemrograman web.
Adapun tema dalam lomba ini adalah Visit to Jepara (Pariwisata Jepara)
Test Project adalah cara untuk mengukur penilaian kompetisi sesuai kriteria keterampilan
yang mengacu ke Standar Spesifikasi yang ada. Penentuan penilaian lomba di Kompetisi
LKS meliputi pengukuran dan penilaian dalam bentuk penilaian obyektif dan subyektif.

No Jenis Soal Bobot Waktu Ranah Kompetensi


1 • Design 100% 7 Jam Keterampilan dan Sikap
• Slicing Layout (420 Menit)
• Client Side
• Server Side
Programming

2 Wawancara - 10-15 Pengetahuan, Keterampilan


Menit/Peserta dan Sikap

1. Design
Individu perlu mengetahui dan memahami:
o Masalah yang berkaitan dengan kognitif, sosial, budaya, teknologi dan konteks
ekonomi untuk design
o Cara membuat grafis untuk web dan design yang sesuai dengan spesifikasi
o Bagaimana untuk mengikuti prinsip-prinsip dan pola design
o Keterampilan yang diperlukan untuk merancang web dan memanfaatkan
komposisi warna dan tipografi.
o Prinsip-prinsip dan teknik untuk menggunakan grafis untuk digunakan dalam
layout website dan logo
o Penerapan elemen design yang disesuaikan dengan target pasar (audience).

LKS SMK Kab. Jepara 2018 Bidang Lomba Web Design


o Cara untuk mempertahankan identitas profil tempat bersejarah
o Penerapan website dalam beragam device sesuai dengan keterbatasan
internet dan resolusi layar.
o 1440 x 900 px
o 768 x 1024 px
o 320 x 480 px
o Penerapan design yang konsisten dan mengikuti trend.

Individu harus dapat:


o Membuat, menganalisa dan mengembangkan grafik yang dapat
menyampaikan informasi dengan baik sesuai pemahaman komposisi hirarki,
tipografi dan estetika
o Membuat, memanipulasi dan mengoptimalkan gambar untuk internet
o Analisa target pasar dan produk yang disampaikan
o Menentukan sebuah ide yang paling sesuai dengan target pasar
o Mempertimbangkan dampak dari setiap elemen yang ditambahkan selama
proses design
o Menggunakan semua elemen yang diperlukan untuk membuat design
o Menghormati ada pedoman identitas kearifan budaya lokal dan panduan gaya
modern
o Membuat design responsif yang berfungsi dengan benar pada beberapa
resolusi layar dan / atau perangkat
o 1440 x 900 px
o 768 x 1024 px
o 320 x 480 px
o Ketinggian resolusi layar dari design boleh melebihi batas maksimal dari
resolusi yang sudah ditentukan.
o Membuat sebuah design yang orisinil (asli) dan kreatif
o Transform ide menjadi design estetis dan kreatif

2. Layouting Design
Individu perlu mengetahui dan memahami:
o Menerapkan aksesibilitas dan berkomunikasi dengan audience dengan
kebutuhan khusus
o Standar World Wide Web Consortium (W3C) untuk HTML5, CSS3 dan Aria
Role.
o Metode website layout dan website structure.
o Web Accessibility Initiative (WAI)
o Bagaimana mengidentifikasi aturan CSS yang tepat untuk mendapatkan hasil
yang diinginkan
o Bagaimana untuk mengintegrasikan animasi dalam website
o Membuat gridding system dan menerapkannya dalam layout website.
o Membuat struktur responsive design dalam layout menggunakan HTML5 dan
CSS3
Individu harus dapat:
o Menerapkan keterampilan pemecahan masalah untuk mengakomodasi
kelompok pengguna dengan kebutuhan khusus
o Menggunakan CSS3 dengan cara yang paling efisien dan efektif untuk
konsistensi antara web browser
o Membuat halaman web yang konsisten dan berfungsi pada berbagai
perangkat dan perbedaan resolusi layar
o Membuat website yang sesuai dengan standar W3C saat ini
(http://www.w3.org).

LKS SMK Kab. Jepara 2018 Bidang Lomba Web Design


o Menggunakan CSS atau file eksternal lainnya untuk memodifikasi tampilan
website

3. Client Side Programming


Individu perlu mengetahui dan memahami:
o Bagaimana mengintegrasikan JavaScript dengan template HTML yang telah
diberikan.
Individu harus dapat:
o Membuat animasi menggunakan javascript, tanpa menggunakan framework
atau library javascript apapun.
o Event handling menggunakan javascript.

4. Server Side Programming


Individu perlu mengetahui dan memahami:
o Bagaimana mengembangkan aplikasi dengan kode PHP .
o Merancang pemodelan data (data modeling) dan mengimplementasikan
database dengan MySQL
o Cara membuat aplikasi web yang aman, seperti penggunaaan json web
tokens.

Individu harus dapat:


o Mengembangkan design query database dan layanan web sesuai dengan
kebutuhan client
o Memberikan solusi kebutuhan database yang kuat
o Terjemahkan ER (Entity-Relationship) Diagram ke dalam database
o Membuat SQL (Structured Query Language) statements dengan benar
o Melindungi terhadap gangguan keamanan
o Solusi keamanan website dengan menerapkan beberapa teknik seperti CSRF,
JWT, dan lainnya.
o Mengintegrasikan dengan kode yang ada dengan API (Application
Programming Interface), libraries and frameworks

C. Time Schedule

No. Pukul Keterangan


1 07.30 – 08.00 Pembukaan
2 08.00 – 12.00 Lomba
3 12.00 – 13.00 Ishoma
4 13.00 – 15.00 Lomba
5 15.00 – 15.30 Istirahat
6 15.30 – 16.30 Wawancara
7 16.30 – 17.30 Pengumuman

D. Soal Praktek ( Bobot 100% )

Soal praktek terdiri dari 4 bagian penilaian. Berikut penjelasan dari masing-masing bagian:
1. Bagian 1 – Design
Deskripsi: Membuat sebuah design layout home page dan logo dari sebuah website
sesuai kreativitas peserta dengan menggunakan program editing image. Design harus
memperhatikan beberapa aspek seperti webpage style, warna, layout scheme, text,
images, animasi, dan user friendly interface. Halaman design website dibuat

LKS SMK Kab. Jepara 2018 Bidang Lomba Web Design


menggunakan photoshop dengan tiga jenis ukuran (1440x900px, 768x1024px,
320x480px)
Media yang disediakan berupa images, text, dan font type.
Total Nilai: 25 poin.

2. Bagian 2 – Layouting Design


Deskripsi: Membuat sebuah website yang terintegrasi multimedia berupa animasi
sesuai dengan rancangan yang telah ditentukan, Halaman website dibuat dengan
HTML5, CSS3 dan JQuery.
Media yang disediakan berupa images, text, dan font type.
Total Nilai : 25 poin.

3. Bagian 3 – Client Side Programming


Deskripsi: Membuat sebuah game interaktif dengan menggunakan JavaSript dan
mengolah data yang didapatkan dari server berupa JSON.
Media yang disediakan berupa halaman HTML dan images.
Total Nilai : 25 poin.

4. Bagian 4 – Server Side Programming


Deskripsi: Membuat aplikasi web interaktif menggunakan server side PHP dan
MYSQL. Fungsionalitas dasar dalam web meliputi login, logout, sistem administrator
add, edit, delete data dan searching data
Media yang disediakan berupa skema database, database (file sql), layout (HTML dan
CSS), images.
Total Nilai : 25 poin.

E. Kelengkapan Fasilitas

1. Komputer (PC) yang digunakan adalah minimum Intel Core i5 atau i7 Processor
dengan kelengkapan minimal: Memori 8GB, Harddisk 120GB, DVD RW, Monitor 20”,
headset, mouse pad, dan driver (lihat tabel).
2. Software yang digunakan: lihat tabel.
3. Masing-masing peserta harus mencoba terlebih dahulu komputer (PC) yang akan
digunakan beserta kelengkapan software yang ada, karena kesalahan atau error yang
terjadi selama perlombaan tidak akan diberikan tambahan waktu.
4. Kemacetan dan gangguan pada software merupakan resiko peserta.

LKS SMK Kab. Jepara 2018 Bidang Lomba Web Design


DAFTAR ALAT DAN BAHAN

No Nama Alat dan Bahan Banyaknya Keterangan


Komputer (PC) untuk peserta dengan
spesifikasi :
• Intel core i5 / i7 2.2 GHz
• Mouse Optical
• Harddisk 120 GB 1 untuk masing-
1 • Standard Memori 8 GB 1 Unit masing peserta
• DVD-RW + 3 unit cadangan
• Headset
• Monitor 20"
• UPS
• Mouse pad
Sudah disediakan
2 Bahan gambar web 1 Paket
di komputer
Komputer untuk juri (spesifikasi yang sama 1 untuk masing-
3 2 Unit
dengan peserta) masing Juri
4 Notebook untuk Sekretariat 1 Unit Panitia
5 Printer Color untuk Sekretariat 1 Unit Panitia
Untuk masing-
6 ATK 1 Paket masing peserta
dan Juri

LKS SMK Kab. Jepara 2018 Bidang Lomba Web Design


DAFTAR SOFTWARE PADA KOMPUTER

No. Nama Program


1. Microsoft Windows 10
XAMPP 7.2.9, link download : https://www.apachefriends.org/index.html
Ekstensi yang dibuka untuk lomba :
- OpenSSL PHP Extension
- Mbstring PHP Extension
- Tokenizer PHP Extension
- Reflection extension
- PCRE extension
- SPL extension
- Ctype extension
2. - 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
3. Adobe Dreamweaver, Photoshop, Illustrator (CC Edition 2015 atau CS6)
4. Sublime v3, link download : http://www.sublimetext.com/3
5. Office standard (any version)
Firefox Developer Edition, link download : https://www.mozilla.org/en-
6.
US/firefox/developer/
Google Chrome (newest), link download :
7. https://support.google.com/chrome/answer/95346?hl=en AND Microsoft Edge
Browser
8. Notepad++, link download : https://notepad-plus-plus.org/download/v7.1.html
Sublime Autocomplete plugin, link :
9.
https://packagecontrol.io/packages/All%20Autocomplete

LKS SMK Kab. Jepara 2018 Bidang Lomba Web Design