Download - Soal Terbuka_web Design
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 1/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARATTAHUN 2015
NASKAH SOAL
(Terbuka)
Bidang Lomba
WEB DESIGN
PEMERINTAH PROVINSI JAWA BARAT
DINAS PENDIDIKAN Jl. Dr. Radjiman No. 6 Telp. (022) 4264813 Fax. (022) 4264881
Wisselbord (022) 4264944, 4264957, 4264973
Bandung
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 2/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 1 dari 10
Modul A
KONTEN
Soal ini dilengkapi dengan file:
LKSP_Modul_A_Media.zip
LKSP_Modul_A.doc
LKSP_Modul_A_Marking_Scheme.xls
INTRO
Sebuah organisasi yang bergerak di bidang komunikasi dan informasi mengenai
travelling bernama “TripTV” membutuhkan website baru yang berguna bagi para
pengunjung untuk menonton video mereka secara online. Target website ini adalah
bagi para remaja yang menyukai travelling dan menonton video mengenai destinasi
lokasi travelling yang menyenangkan.
DESKRIPSI
Tugas anda adalah membuat desain website dan logo untuk organisasi “TripTV”.
Anda akan disediakan teks dan gambar yang dapat membantu anda dalam
melakukan desain website dan logo.
Anda tidak harus menggunakan seluruh gambar dan dan teks yang disediakan.
Anda boleh menggunakan teks selain yang diberikan. Teks digunakan hanya untuk
penilaian dalam desain, bukan arti dari teks tersebut.
Terdapat tiga (3) halaman dan logo yang harus dikerjakan pada Modul ini:
Logo yang dibuat harus sesuai dengan organisasi “TripTV” dan tema organisasitersebut. Logo yang dibuat mengandung teks “TripTV” dan minima satu elemen
grafis.
Halaman Depan, yang meliputi:
o Logo
o Fungsi Search
o Fungsi Sign-Up
o Fungsi Login
o List video terbaru, minimal tiga (3) video yang terdiri dari:
Gambar thumbnail video
Heading dan deskripsi singkat video Tanggal video di upload
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 3/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 2 dari 10
Rating video
o Testimoni user berupa nama dan foto user
Halaman Sign-Up, yang meliputi:
o Logo
o Input Field, yang terdiri dari:
Nama Lengkap
Tanggal Lahir
Username Password
Captcha
o Tombol Submit
o Tombol Reset
Halaman Detail Video, yang meliputi:
o Logo
o Video dengan tombol play
o Heading, Sub Heading dan deskripsi singkat video
o Tanggal video di upload
o
Komentar videoo Rating video
o Satu textfield dilengkapi dengan tombol “Beri Komentar” untuk memberikan
komentar pada video tersebut
o Social Media Icon untuk share (Facebook, Twitter dan Google+)
INSTRUKSI UNTUK PESERTA
File yang dikumpulkan terdiri dari tiga (3) tipe file: .PNG, .JPG atau .SVG. Satu file
terpisah untuk Halaman Depan, satu file terpisah untuk Halaman Sign-Up dan satu
file terpisah untuk Halaman Detail Video.
Saat memberik an nama file dan folder, “XX” adalah nomor urut peserta.
Beri nama file Halaman Depan dengan “XX_index”, contoh: XX_index.png (atau .jpg
atau .svg)
Beri nama file Halaman Sign-Up dengan “XX_sign-up”, contoh: XX_sign-up.png
(atau .jpg atau .svg)
Beri nama f ile Halaman Detail Video “XX_detail”, contoh: XX_detail.png (atau .jpg
atau .svg)
Simpan pekerjaan anda dalam folder dengan nama “XX_MODUL_A”
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 4/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 3 dari 10
Simpan source file yang anda gunakan dalam desain anda pada folder
“XX_source_files” didalam folder “XX_MODUL_A” . Source file adalah file yang
berisikan layer (contoh: Photoshop PSD files).
PENILAIAN
Kriteria Judge Objektif Total
Desain Logo 3.00 1.00 4.00
Fungsi Halaman Web 0.00 2.50 2.50
Desain Halaman Web 17.0 6.50 23.50
Total 20.00 10.00 30.00
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 5/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 4 dari 10
Modul B
KONTENT
Soal ini dilengkapi dengan file:
LKSP_Modul_B_Media.zip
LKSP_Modul_B.doc LKSP_Modul_B_Marking_Scheme.xls
INTRO
Seorang desainer sudah membuat konsep halaman web untuk website Bus Gratis.
Desain ini otomatis mengadaptasi ukuran layar sesuai dengan perangkat dan browser
yang digunakan. Tugas anda adalah mengimplementasikan konsep tersebut ke HTML5 /
CSS3.
Anda akan menemukan file dengan nama 1280.png, 720.png dan 480.png yang
menunjukan bagaimana desain terlihat ukuran lebar 1280px, 720px dan 480px.
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 6/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 5 dari 10
Tombol Home dan Bus Sekolah:
Tombol Navigasi pada ukuran layar 480px dan 720px:
Link Back to Top di Navigation Footer pada ukuran layar 480px dan 720px:
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 7/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 6 dari 10
Text selection:
DESKRIPSI
Ada beberapa bagian yang harus diimplementasikan pada layout HTML anda: Search Website Heading (Logo & Menu) Featured Section, (Tombol dan Tulisan) Service Section Penjelasan Service
Latest News dengan 3 item Contact Us 3 Footer Section Copyright
Tombol Home dan Bus Sekolah dibuat menggunakan CSS tanpa menggunakangambar
Ketika tombol navigasi pada layout ukuran 720px dan 480px akan menuju ke menunavigasi pada footer.
Ketika link “Back to Top” pada navigasi footer di ukuran layar 480px dan 720px diklik, maka halaman akan kembali ke atas. Anda harus mengimplementasikan background color untuk text selection. Warna
text selection mengikuti warna dari website, yaitu orange Gunakan custom font yang sudah disediakan Prefix-free JS disediakan HTML harus valid untuk HTML5 melalui W3 Validator CSS harus valid untuk CSS level 3 Beri komentar untuk file HTML dan CSS anda Accessibility Roles digunakan pada HTML yang dibuat Desain akan dinilai pada Google Chrome
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 8/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 7 dari 10
INSTRUKSI UNTUK PESERTA
Saat memberikan nama file dan folder, “XX” adalah nomor urut peserta.
Simpan hasil pekerjaaan pada folder “XX_MODUL_B”
PENILAIAN
Kriteria Judge Objektif Total
Validasi 0.00 3.00 3.00
Layout 0.00 12.00 12.00
Struktur 6.00 0.00 6.00
Tipografi 4.00 5.00 9.00
Total 10.00 20.00 30.00
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 9/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 8 dari 10
Modul C
KONTENT
Soal ini dilengkapi dengan file:
LKSP_Modul_C_Media.zip
LKSP_Modul_C.doc LKSP_Modul_C_Marking_Scheme.xls
INTRO
Anda diminta untuk membuat sebuah backend sistem website yang memberikan
informasi mengenai LKS Nasional. Anda hanya diminta untuk membuat sistem dengan
desain yang sederhana karena bagian frontend akan diberikan kemudian.
DESKRIPSI
Skenario dan test case setiap menu yang ada pada website ini adalah:
1 User (admin atau peserta) dapat login kedalam sistem dengan username danpassword pada halaman awal saat website tersebut diakses
Bagi user yang belum memiliki username dan password dapat mengakseshalaman Pendaftaran untuk melakukan pendaftaran sebagai peserta
2 Peserta dapat mengakses halaman Bidang Lomba untuk melihat bidang apasaja yang dilombakan pada LKS Nasional.
Peserta yang belum melakukan registrasi dapat melakukannya pada menuBidang Lomba dengan mengklik tombol yang ada pada daftar bidang lombatersebut. Peserta yang sudah registrasi bisa membatalkan registrasinya danbisa melakukan registrasi ke bidang lomba yang lainnya.
Admin dapat mengakses halaman Bidang Lomba untuk menambah data Admin dapat mengakses halaman Bidang Lomba untuk mengubah data Admin dapat mengakses halaman Bidang Lomba untuk menghapus data
3 Halaman Kontingen hanya digunakan oleh admin untuk mendaftarkan data-data kontingen
Admin dapat mengakses halaman Kontingen untuk menambah data
Admin dapat mengakses halaman Kontingen untuk mengubah data Admin dapat mengakses halaman Kontingen untuk menghapus data
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 10/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 9 dari 10
4 Halaman Registrasi Peserta digunakan untuk registrasi peserta ke bidanglomba oleh admin
Hanya admin yang dapat mengakses halaman tersebut Halaman Registrasi Peserta dapat menampilkan peserta yang belum dan
sudah melakukan registrasi ke bidang lomba Data yang muncul pertama kali adalah data peserta yang belum melakukan
registrasi Admin dapat melakukan registrasi dan membatalkan registrasi beberapa
peserta dalam waktu yang bersamaan
5
Halaman Penilaian Lomba digunakan untuk melakukan penilaian kepadapara peserta per bidang Hanya admin yang dapat mengakses halaman tersebut Penilaian dilakukan dengan rentang nilai 0 - 100
6 Pada halaman Dashboard akan muncul informasi Peraihan Medali SetiapKontingen dan Peraihan Medali Setiap Bidang Lomba
Halaman Dashboard dapat dilihat oleh siapapun, baik user (admin ataupeserta) maupun pengunjung yang belum melakukan pendaftaran
7 User yang sudah login dapat keluar dari sistem dengan mengakses menulogout
INSTRUKSI UNTUK PESERTA
Terdapa satu user admin dengan username “admin” dan password “lks”.
Terdapat satu user peserta dengan username “peserta” dan password
“webdesign”.
Seluruh inputan diamankan dari serangan SQL Injection.
Simpan hasil pekerjaan anda pada folder dengan nama “ XX_MODUL_C”.
Nama file untuk menjalankan aplikasi ini adalah “index.php”.
Pada modul ini anda harus menggunakan framework dan schema database yang
sudah disediakan. Export dan simpan database anda didalam folder “ XX_MODUL_C” dengan nama
“ XX_MODUL_C_DB.sql”.
7/25/2019 Soal Terbuka_web Design
http://slidepdf.com/reader/full/soal-terbukaweb-design 11/11
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT PROVINSI JAWA BARAT
TAHUN 2015
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2015 10 dari 10
PENILAIAN
Kriteria Judge Objektif Total
Menampilkan Data 0.00 19.00 19.00
Mengubah Data 0.00 10.00 10.00
Manajemen User 0.00 5.50 5.50
Penggunaan Library 0.00 4.00 4.00
Data & Struktur 1.50 0.00 1.50
Total 1.50 38.50 40.00