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





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






TAHUN 2015


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

Email

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”






TAHUN 2015


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






TAHUN 2015


Modul B

KONTENT


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.






TAHUN 2015


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:






TAHUN 2015


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






TAHUN 2015



Saat memberikan nama file dan folder, “XX” adalah nomor urut peserta.

Simpan hasil pekerjaaan pada folder “XX_MODUL_B”

PENILAIAN


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






TAHUN 2015


Modul C

KONTENT


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






TAHUN 2015


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


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”.






TAHUN 2015


PENILAIAN


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

soal terbuka_web design

Documents