kisi-kisi LKS Web Design 2016
-
Upload
mas-wahjoe -
Category
Documents
-
view
221 -
download
0
Transcript of kisi-kisi LKS Web Design 2016
-
8/18/2019 kisi-kisi LKS Web Design 2016
1/30
aaa
KISI-KISI
BIDANG LOMBA :
WEB DESIGN
-
8/18/2019 kisi-kisi LKS Web Design 2016
2/30
LKS SMK 2016 Bidang Lomba Web Design
LOMBA KOMPETENSI SISWASEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL XXIVMALANG, 23-28 MEI 2016
KISI-KISI SOALKELOMPOK TEKNOLOGI INFORMASI
BIDANG LOMBA WEB DESIGN
A. Pendahuluan
LKS tahun 2016 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 provinsi-provinsi di Indonesia.
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.
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 Praktik/Tugas
Tugas 1 : Redesign
Tugas 2 : Layouting Design
Tugas 3 : Client Side
Programming
Tugas 4 : Server Side
Programming
100% 15 Jam
(900 Menit)
Keterampilan dan Sikap
2 Wawancara - 10-15
Menit/Peserta
Pengetahuan, Keterampilan dan
Sikap
-
8/18/2019 kisi-kisi LKS Web Design 2016
3/30
LKS SMK 2016 Bidang Lomba Web Design
Soal praktek terdiri dari 4 modul. Masing-masing modul tidak terikat satu sama lain (independen).
Berikut adalah keterangan dari masing-masing modul:
1. Redesign
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
o Penerapan elemen design yang disesuaikan dengan target pasar (audience).
o
Cara untuk mempertahankan identitas perusahaan, merk dan style guide
o
Penerapan website dalam beragam device sesuai dengan keterbatasan internet dan
resolusi layar.
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 resolusi gambar untuk tampilan Web
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 Mempertahankan identitas Perusahaan, Merk dan ciri khas perusahaan
o Membuat design responsif yang berfungsi dengan benar pada beberapa resolusi layar
dan / atau perangkat
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 HTML dan CSS.
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, audio dan video dalam website
Individu harus dapat:
o
Menerapkan keterampilan pemecahan masalah untuk mengakomodasi kelompok
pengguna dengan kebutuhan khusus
-
8/18/2019 kisi-kisi LKS Web Design 2016
4/30
LKS SMK 2016 Bidang Lomba Web Design
o
Menggunakan CSS 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).
o
Menggunakan CSS atau file eksternal lainnya untuk memodifikasi tampilan website
3. Client Side Programming
Individu perlu mengetahui dan memahami:
o Bagaimana mengintegrasikan JavaScript
o Cara membuat kode dengan JQuery
o Bagaimana menerapkan layanan web menggunakan XML (Extensible Markup
Language) dan JSON
Individu harus dapat:
o Membuat animasi untuk membantu dalam menjelaskan konteks dan menambahkan
daya tarik visual
o
Membuat dan memperbarui kode JavaScript untuk meningkatkan fungsi dan estetikawebsite
o
Membuat sebuah situs yang interaktif
4. Server Side Programming
Individu perlu mengetahui dan memahami:
o Bagaimana mengembangkan aplikasi dengan kode PHP
o
Bagaimana memanfaatkan Open Source Libraries and Frameworks
o Merancang pemodelan data (data modeling) dan mengimplementasikan database
dengan MySQL
o Bagaimana mengembangkan kode yang mengikuti design pattern (Misalnya: MVC
(Model View Controller))
o
Cara membuat aplikasi web yang aman
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
Mengintegrasikan dengan kode yang ada dengan API (Application ProgrammingInterface), libraries and frameworks
-
8/18/2019 kisi-kisi LKS Web Design 2016
5/30
LKS SMK 2016 Bidang Lomba Web Design
C. Soal Praktek ( Bobot 100% )
Soal praktek terdiri dari 4 modul. Masing-masing modul tidak terikat satu sama lain (independen).
Berikut penjelasan dari masing-masing modul:
1.
Modul 1 – Redesign
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.
Media yang disediakan berupa images , text , dan font type .
Total Nilai: 15 poin.
2.
Modul 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 : 20 poin.
3.
Modul 3 – Client Side Programming
Deskripsi: Membuat sebuah website yang interaktif dengan menggunakan JavaSript dan
JQuery dan mengolah data yang didapatkan dari XML atau JSON.
Media yang disediakan berupa halaman HTML dan images
Total Nilai : 30 poin.
4.
Modul 4 – Server Side Programming
Deskripsi: Membuat aplikasi web interaktif menggunakan server side PHP (menggunakan
Framework (CI/YII/Laravel) 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 dan template PHP Framework.
Total Nilai : 35 poin.
D. Kelengkapan Fasilitas
1.
Notebook yang digunakan adalah minimum Intel Core i5 Processor dengan kelengkapan
minimal: Memori 8GB, Harddisk 120GB, DVD RW, Monitor 18,5”, headset, mouse pad, dan
driver (lihat tabel).
2.
Software yang digunakan: lihat tabel.
3.
Masing-masing peserta harus mencoba terlebih dahulu notebook yang akan digunakan besertakelengkapan 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.
-
8/18/2019 kisi-kisi LKS Web Design 2016
6/30
LKS SMK 2016 Bidang Lomba Web Design
DAFTAR ALAT DAN BAHAN
No Nama Alat dan Bahan Banyaknya Keterangan
1
Notebook untuk peserta dengan spesifikasi :
Intel core i5 / i7 2.2 GHz
Wifi
Mouse Optical
Harddisk 120 GB
Standard Memori 8 GHZ MB
DVD±RW
Headset
Monitor 18.5" UPS
Mouse pad
1 Unit
1 untuk masing-
masing peserta
+ 3 unit cadangan
2Notebook untuk juri (spesifikasi yang sama dengan
peserta)5 Unit
1 untuk masing-
masing Juri
3 USB Flashdisk 16GB 1 Unit1 untuk masing-
masing peserta
4 USB Flashdisk 32GB 5 Unit
1 untuk masing-
masing Juri dan 2
unit cadangan
5 Notebook untuk Sekretariat 1 Unit Panitia
6 Printer Color untuk Sekretariat 1 Unit Panitia
7 ATK 1 Paket
Untuk masing-
masing peserta dan
Juri
-
8/18/2019 kisi-kisi LKS Web Design 2016
7/30
LKS SMK 2016 Bidang Lomba Web Design
DAFTAR SOFTWARE PADA KOMPUTER
No. Nama Program
1.
Microsoft Windows 7
2.
XAMPP 5.6.11 (with php 5.6.11, tolong folder C nanti jangan di-hide ketika
pelaksanaan), link download : https://www.apachefriends.org/index.html
Tolong di-cek juga extension yang ada di php.ini, karena list di bawah ini harus
available ketika menggunakan framework :
- 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
3.
Adobe Dreamweaver, Photoshop, Illustrator (kalau bisa CC Edition 2015, atau CS6)
4.
PHPStorm 9.0.2, link download : https://www.jetbrains.com/phpstorm/download/
5.
Brackets, link download : http://brackets.io/
6.
Notepad++ 6.8.2, link download : https://notepad-plus-
plus.org/download/v6.8.2.html
7.
Sublime v2, link download : http://www.sublimetext.com/2
8.
Composer, link download : https://getcomposer.org/download/
9.
Nodejs v0.12.7, link download : https://nodejs.org/download/
10.
Office standard (any version)
11.
Firefox Developer Edition, link download : https://www.mozilla.org/en-US/firefox/developer/
12.
Google Chrome (newest), link download :
https://support.google.com/chrome/answer/95346?hl=en AND Internet Explorer 10
13.
SQLYog/WebYog, link download : https://www.webyog.com/product/downloads
14.
MariaDB V10, link download : https://downloads.mariadb.org/
15.
MySQL Workbench, link download : http://dev.mysql.com/downloads/workbench/
16.
7zip
-
8/18/2019 kisi-kisi LKS Web Design 2016
8/30
LKS SMK 2016 Bidang Lomba Web Design
-
8/18/2019 kisi-kisi LKS Web Design 2016
9/30
aaa
LAY OUT
BIDANG LOMBA :
WEB DESIGN
-
8/18/2019 kisi-kisi LKS Web Design 2016
10/30
DENAH LOMBA
WEB DESIGN
15 X 25meter
K25 K24 K23 K22 K
K 2 7
K2 K3 K4 K5
K 2 9
K 2 9
K 2 3 0
K 3 1
3
2
1 J
U
R
I
P P
PANITIA K 3 2
K 3 3
K1
K 2 6
-
8/18/2019 kisi-kisi LKS Web Design 2016
11/30
aaa
JADWAL
BIDANG LOMBA :
WEB DESIGN
-
8/18/2019 kisi-kisi LKS Web Design 2016
12/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016
MATA LOMBA WEB DESIGN
JADWAL PELAKSANAAN
HARI 1
NO WAKTU KETERANGAN
1 12.00 - 15.00 Juri Pusat dan Kompetitor diharapkan sudah tiba di Hotel.
2 16.00 - 17.00 Technical Meeting
HARI 2
NO WAKTU KETERANGAN TOTAL WAKTU
1 08.00 – 08.30 Pembukaan
2 08.30 – 09.00 Familiarisasi Alat3 09.00 – 09.30 Membaca soal dan pemahaman modul 1 0.5 jam
4 09.30 – 12.30 Kompetisi: Modul 1 3 Jam
5 12.30 – 13.30 Istirahat/Makan Siang
6 13:30 – 14:00 Membaca soal dan pemahaman modul 2 0.5 jam
7 14.00 – 17.00 Kompetisi: Modul 2 3 jam
HARI 3
NO WAKTU KETERANGAN TOTAL WAKTU
1 08.00 – 08.30 Membaca soal dan pemahaman modul 3 0.5 jam
2 08.30 – 12.30 Kompetisi: Modul 3 4 jam
3 12.30 – 13.30 Istirahat/Makan Siang
4 13.30 – 14.00 Membaca soal dan pemahaman modul 4 0.5 jam
5 14.00 – 19.00 Kompetisi: Modul 4 5 jam
HARI 4
NO WAKTU KETERANGAN TOTAL WAKTU
1 08.00 – 12.00 Penilaian 4 jam
4 12.00 – 13.00 Makan Siang
5 13.00 – 14.00 Penutupan
-
8/18/2019 kisi-kisi LKS Web Design 2016
13/30
aaa
LEMBAR INFORMASI
BIDANG LOMBA :
WEB DESIGN
-
8/18/2019 kisi-kisi LKS Web Design 2016
14/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016
MATA LOMBA WEB DESIGN
DEPARTEMEN PENDIDIKAN NASIONALDIREKTORAT JENDERAL MANAJEMEN PENDIDIKAN DASAR DAN MENENGAH
DIREKTORAT PENDIDIKAN MENENGAH KEJURUAN
I. Pendahuluan
Era globalisasi memberi dampak ganda yaitu disamping membuka kesempatan kerjasama yang
seluas-luasnya antar negara, juga membuka persaingan yang semakin ketat dan tajam di segala
bidang pekerjaan.
Untuk menghadapi tantangan tersebut diatas, maka Pemerintah Indonesia harus memperkuat
daya saing dan keunggulan kompetitif di semua sektor dengan mengandalkan pada kualitas dan
kemampuan sumber daya manusia dengan penguasaan teknologi dan manajemen. Untuk itu
Pemerintah selalu berusaha menyiapkan tenaga kerja yang berkompeten dalam bidangnya
masing-masing.
Penyelenggaraan Lomba Keterampilan Siswa (LKS) Tingkat Nasional ke-XXIV di Jakarta bagi
siswa Sekolah Menengah Kejuruan (SMK) seluruh Indonesia adalah sebagai wujud nyata salah
satu upaya dalam pengembangan sumber daya manusia yang dilakukan oleh Pemerintah melalui
Direktorat Pembinaan SMK-Ditjen Manajemen Dikdasmen.
II. Tujuan
1.
Mendorong SMK untuk meningkatkan kualitas pelaksanaan Kegiatan Belajar Mengajar (KBM)
yang mengacu kepada Standar Keterampilan Kerja Nasional Indonesia (SKKNI) bidang
keahlian Web Design.
2.
Untuk memantau peta kualitas dan kemampuan SMK di seluruh Indonesia sesuai dengan
Standar Keterampilan Kerja Nasional Indonesia (SKKNI) bidang keahlian Web Design.
3.
Mempromosikan Keterampilan siswa SMK bidang keahlian Web Design kepada dunia industri
sebagai calon pengguna tenaga kerja.
4.
Memberikan kesempatan dan motivasi kepada siswa untuk berkompetisi secara positif, untuk
menumbuhkan kebanggaan pada bidang keahlian yang ditekuninya, juga kebanggan bagi
sekolah dan daerah/provinsinya.
-
8/18/2019 kisi-kisi LKS Web Design 2016
15/30
III.
Peserta
Peserta adalah siswa SMK dengan kriteria sebagai berikut :
1.
Warga Negara Kesatuan Republik Indonesia.
2.
Tercatat Siswa tingkat II/III SMK Negeri atau Swasta program keahlian … . . . . . . . . . . di
Indonesia dalam tahun 2016.
3.
Dinyatakan sebagai Pemenang LKS Tingkat Provinsi program keahlian . . . . . . . . . . . dalam
tahun 2016 atau yang ditunjuk oleh Kepala Dinas Pendidikan Nasional di Provinsi sebagai
peserta LKS tingkat Nasional ke-XXIV Tahun 2016 mewakili provinsi yang bersangkutan.
4.
Setiap provinsi hanya dapat diwakili oleh 1 (satu) orang peserta.
IV.
Materi Lomba
A.
Lingkup Lomba
Jenis kegiatan yang dilombakan adalah Tes Praktik (900 menit) meliputi tes keterampilan
terpadu dengan materi Web Design dan Web Programming
B.
Skor dan Bobot Penilaian
Skor maksimal dan bobot :
1.
Tes Praktik (skor maksimal 100, bobot 100%)…............... N1
Perhitungan Nilai Tes N1: Nilai Akhir = N1
C.
Aspek-aspek Penilaian
Ad.1. Aspek yang dinilai untuk Tes Praktik adalah: Aspek penilaian dimuat dalam file ”Marking Sheet.doc” di folder ”Soal”
-
8/18/2019 kisi-kisi LKS Web Design 2016
16/30
V.
Tim Juri
Jumlah Juri sebanyak 5 orang terdiri atas :
No Unsur Jumlah
a. Expert A SC/WSC Web Design 1 orang
b. Profesional industry Web Design 1 orang
c. Dosen Keilmuan Web Design 2 orangd. Pemenang Medallion of Excellence WorldSkills 2013 Web Design 1 orang
VI.
Kriteria Pemenang Lomba
Juara Lomba adalah peserta yang memiliki nilai akhir tertinggi dari seluruh nilai para peserta
lomba. Apabila ada juara lomba yang memiliki nilai akhir yang sama maka pertama akan
diperhitungkan kecepatan menyelesaikan tugas-tugas. Seandainya setelah diperhitungkan
kecepatannya ternyata nilai masih sama maka akan diadakan tes wawancara oleh setiap juri.
Para Juara ditentukan langsung oleh Juri meliputi: Juara I, II dan III, Harapan I dan II. Tetapi
memungkinkan tidak ada peserta yang mendapatkan Juara apabila nilai tidak memenuhi aturan
yang ditetapkan oleh panitia penyelenggara. Penentuan juara bersifat mutlak. Selain para juara
maka seluruh peserta mendapat penghargaan dari panitia penyelenggara.
VII. Panitia Lomba
Panitia lomba adalah :
1. Penanggung Jawab Bidang Lomba (Pusat) : . . . . . . . . . . . . . . . .
2. Penanggung Jawab Bidang Lomba (Daerah) : . . . . . . . . . . . . . . . .
VIII. Tempat Lomba
Tempat lomba untuk : Malang, Jawa Timur
-
8/18/2019 kisi-kisi LKS Web Design 2016
17/30
IX. Tata Tertib Lomba
Pembimbing diharapkan :
1.
Mendampingi peserta pada saat ‘technical meeting’.
2.
Mengisi daftar hadir yang disediakan Panitia.
3.
Menjaga ketertiban dan ketenangan dalam pelaksanaan lomba.
4.
Membantu peserta yang dibimbingnya apabila terjadi gangguan kesehatan.5.
Tidak membantu peserta pada saat lomba berlangsung.
Peserta diharapkan :
1.
Hanya satu orang yang menjadi peserta mewakili provinsi dengan Surat Penunjukkan dari
Dinas Pendidikan Provinsi. Tidak dibenarkan peserta diganti pada saat tengah lomba
berlangsung.
2.
Peserta harus hadir pada saat ‘technical meeting’.
3.
Peserta harus sudah hadir 15 menit sebelum lomba dimulai, bagi yang terlambat harus
mendapat izin dari panitia dan tidak ada perpanjangan waktu.
4.
Wajib mengisi daftar hadir pada saat setiap jenis lomba yang diadakan.
5.
Penentuan nomor peserta dilakukan melalui undian, bagi peserta yang tidak mengikuti
technical meeting, nomor undian ditentukan oleh panitia.
6.
Berpakaian kerja yang rapi, diharapkan hanya memakai identitas nomor peserta dari hasil
undi.
7.
Peserta lomba wajib menempati dan menggunakan peralatan lomba sesuai dengan hasil
undi.
8.
Pelaksanaan lomba dilaksanakan 3 (tiga) hari, dari tanggal 2 s.d. 7 Mei 2015.
9.
Total waktu lomba 15 jam ( 60 menit/jam )
10.
Waktu istirahat 60 menit untuk sholat, istirahat, dan makan.
11.
Peserta tidak dapat melanjutkan lomba dikarenakan sakit atau hal-hal lain, maka dianggap
gugur/ mengundurkan diri.12.
Peserta tidak dibenarkan berkonsultasi atau mendapat pengarahan teknis tentang pekerjaan
(job) pada waktu kegiatan berlangsung dari pembimbing masing-masing kecuali dari tim juri.
13.
Kegagalan/keterlambatan pekerjaan tidak diberikan toleransi (misalnya karena lupa
pekerjaan belum di-save ).
14.
Peserta lomba wajib melakukan pemeriksaan peralatan dan kebersihan lingkungan kerja.
15.
Pemeriksaan peralatan dilakukan oleh peserta di depan juri dan panitia selama lebih kurang
60 menit sebelum perlombaan dimulai.
16.
Kerusakan peralatan (hardware/software) akibat kesalahan prosedur yang dilakukan
peserta, menjadi tanggung jawab peserta itu sendiri.
17.
Tidak dibenarkan menggunakan peralatan (hardware/software) di luar ketentuan yang ada.
18.
Pembimbing tidak dibenarkan masuk ke ruang lomba atau menghubungi peserta baiklangsung maupun alat komunikasi pada saat lomba berlangsung dengan alasan apapun.
19.
Tidak diperbolehkan membawa buku/catatan/HP/flashdisk di ruang ujian.
20.
Untuk alasan kesehatan peserta diperbolehkan membawa makanan kecil dan minuman ke
dalam ruang ujian.
21.
Ketentuan lain yang belum tercantum dalam tata tertib ini diputuskan oleh kebijakan juri
(ditentukan kemudian sesuai kebutuhan);
22.
Pelanggaran terhadap tata tertib ini akan diberikan sanksi berupa teguran sampai berupa
pemberhentian sebagai peserta.
-
8/18/2019 kisi-kisi LKS Web Design 2016
18/30
-
8/18/2019 kisi-kisi LKS Web Design 2016
19/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 1 of 12
Test Project – Module 1
INTRODUCTION
A client has approached you to help on a web design project. The client is a dining company that
operates hamburger restaurants in South America. They have a website that provides information of
their restaurants and the featured food they provide.
There is server-side developer already helped on creating the server-side logic. But the developer is
not good at CSS design and needs your help. You will get the static HTML files that are generated
from the server. These are plain HTML files and your job is to write CSS styles to fulfill the client’s
requirements.
DESCRIPTION OF PROJECT AND TASKS
You are going to design several pages. Here you can find the requirement for each page. There are
several views that you need to redesign. The server-side developer has output them into static HTML
files. The following describes what these files are.
There are several HTML files that you need to redesign:
1. index.html: The home page.
The home page displays the entry point of the website.
2. contact.html: The page that allows customer to fill and post a contact form to the company.
This page shows a contact form. There are 3 types of contact forms. Restaurant review, job
applying and others. These types are separated by tabs.
3. restaurant.html: Describing one restaurant information
This page displays information of one restaurant. Customers can find photos and menu of this
restaurant.
4. photo-view.html: photos present mode.
There is one main photo in this view and several thumbnails of related photos. There is also a
caption and a social network sharing panel.
-
8/18/2019 kisi-kisi LKS Web Design 2016
20/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 2 of 12
Motion designThere are some special buttons in the provided HTML files:
Buttons hovering effects
Buttons active effects
Show success label (in contact.html)
Show error label (in contact.html)
Tab toggling (in contact.html)
Show menu dialog (in restaurant.html)
Close menu dialog (in restaurant.html)
The owner of the dining company wants these labels, tabs and menu to have a nice motion design
applied.
The sever-side developer doesn’t know how these motions should be implemented. Toggle classes
have already been developed for you to integrate with. We want you to add nice motion styles to
these elements.
These functionalities are trigged via JavaScript which has been provided for you. All visibility toggling
is done by using the addClass and removeClass methods. The JavaScript doesn’t actually change
any styles. You need to work on the CSS to create your motion design.
Prefix Library
Prefix-free JS library is provided. So we won’t test for missing vendor prefix.
Mobile screen resolution
We have limited budget now. The client wants the site to work perfect in narrow screen at the current
phrase. We require the site to work in desktop, but we test most of the functionalities in small screen
to target mobile user.
Accessibility
You need to alter the HTML elements to add proper ARIA roles. You should not alter other parts of
the HTML. For instance, you cannot add your own ID or classes to any elements.
-
8/18/2019 kisi-kisi LKS Web Design 2016
21/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 3 of 12
INSTRUCTIONS TO THE COMPETITORSave your files in your root directory on the server called " XX_Module_A"
where XX is your computer code.
You need to submit the CSS file that styles the website according to the requirements. You may submit
extra images by putting them inside the “images” folder.
Please note that you should not alter the provided HTML, JavaScript and Images.
-
8/18/2019 kisi-kisi LKS Web Design 2016
22/30
-
8/18/2019 kisi-kisi LKS Web Design 2016
23/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 5 of 12
design or in additional files. Features and functionality should be self-explanatory, no writteninstructions are allowed in the mock-up files.
All mock-ups should be presented in real pixels size and must include a red line, less than 3 pixels
wide, showing the device screen border resolution.
The re-designed 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 re-design will be assessed by industry standards and needs to incorporate best practice of
responsive design.
Instructions to the Competitor
Save your files in your root directory on the server called " XX_Module_B"
where XX is your country code.
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_Design_Module_B" folder. Source files are the files containing the layers, development
files, i.e. .psd/.ai/.jpg/.svg/…
Below you can find an example of a computer view that may be submitted:
-
8/18/2019 kisi-kisi LKS Web Design 2016
24/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 6 of 12
-
8/18/2019 kisi-kisi LKS Web Design 2016
25/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 7 of 12
Test Project - Module 3
INTRODUCTION
To show your talent as a Web Designer you have decided to create a “Funny Face App” – a small web
application to apply accessories on faces. The main purpose of the application is to allow users to
virtually try accessories on real faces. Accessories are provided to users and faces have to be uploaded
through the web application.
A friend has designed the layout of the application and your task is to program all the functionality to
give the application the necessary usability.
DESCRIPTION OF PROJECT AND TASKS
The folder “Media” contains all the files provided by the designer to develop the application. To develop
the task, you may make use of jQuery and jQuery UI. You are free to modify the provided files if
necessary to guarantee the correct functionalities of the application.
PROJECT REQUIREMENTS
1. Make the object tabs on the menu functional. (Glasses, Beards, Hats)
2. When the user accesses the application, the first step is to upload a photo of a person’s face (face
image). The picture will be used to apply the available accessories (no input type file visible).
3. User can drag the file in a specific droppable area of the web application. When a file is dragged
into the droppable area the background color changes. This file needs to be validated on the front-
end. To be accepted, the file must be JPG format with a maximum size of 300 Kb. If the dragged
file is not in a JPG format or has a size larger than the maximum size permitted, an error message
will be displayed and the file will not be accepted in the droppable area and will not be submitted
to the server.
4. If a correct file is dropped in the specific area, the file will be submitted to the server and will
upload immediately.
5. During the upload process a progress bar is visible to the user.
6. After uploading the file, the photo is presented in the face area of the application and the user can
apply the available accessories (Glasses, Hats and Beards) on the face.
7. The user can change the size of the face image by clicking on it. When the face image is selected
a dotted rectangle border around the face area is visible. It will be possible to change the face
-
8/18/2019 kisi-kisi LKS Web Design 2016
26/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 8 of 12
image size (proportional size, bigger or smaller) using the buttons on the app interface or usingthe keys (+) to increase the size and (-) to reduce the size. The resized face image needed to be
in the center of the face image area. The dotted border of the face image disappears when an
accessory is selected.
8. By using the mouse, the user can drag and drop an accessory on the face image. If an accessory
is dropped on the wrong place (not on the face image), the accessory returns to its original
position.
9. The user can select an accessory by clicking on it to change the size or to move the position of
the accessory. The selected accessory has a dotted rectangle border. Only the current selected
accessory can have the dotted border.
10. The user can move the position of the accessory by using mouse drag and drop on the face image.
The accessory can also be moved with keyboard arrows (←,→,↑,↓) for more precise positioning.
11. It will be possible to change the size (proportional size, bigger or smaller) of the selected accessory
on the face using the buttons on the app interface or using the keys (+) to increase the size and
(-) to reduce the size.
12. It will be possible to rotate the selected accessory on the face using the buttons on the app
interface or using the keys (L) to rotate the accessory to left and (R) to rotate the accessory to
the right.
13. It is not possible to apply more than one accessory from the same category on the face at any
one time. For example, only one pair of glasses can be applied on a face. If the user drops a new
accessory from the same category the previous accessory will be removed from the face.
14. When the user finishes the application of accessories, they can click on the button “Save Picture”
to download the final version of the image created in JPG format. The final version of the modified
image is saved on the server. On the server the two images are saved, the original face image and
final version of it.
15. Your code needs to be developed following the requirements:
a. Indentation;
b. Organization;
c. Code reuse.
d. Use objects in JavaScript code;
e. Include comments in your JavaScript and PHP files to indicate the functionalities of the code.
-
8/18/2019 kisi-kisi LKS Web Design 2016
27/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 9 of 12
INSTRUCTIONS TO THE COMPETITOR Save your files in your root directory on the server called " XX _Module_C"
where XX is your computer code.
-
8/18/2019 kisi-kisi LKS Web Design 2016
28/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 10 of 12
Test Project - Module 4
INTRODUCTION
You are engaged by a web agency that provides full service to non-governmental organizations with
an environmental or social focus. The current customer needs a platform for car sharing. Your task is
to implement the backend persistence and interaction logic. They will provide you with a design and
template for the frontend later. Until then you just use the logo provided together with really simple
HTML-code as provided by the framework of your choice.
DESCRIPTION OF PROJECT AND TASKS
Using car sharing, people that travel a certain route (driver) can offer to give a lift to other people
(passenger). The system should cover the following user stories / test cases:
1 A user (driver or passenger) can login (and logout) into the system on the start page of
the application
After login there are the following links to sub-pages: “Available offers”, “Requested
routes”, “My routes offered” (as driver), “My routes booked” (as passenger)
These links are always visible on the top part of the page while logged in
For each user a field indicating the state (locked, inactive, active) can be stored in the
database2 On a page called “Available offers” the user (driver or passenger) will see a list of all
available routes (including their own): date and time, source location, target location,
name of driver, average rating and number of ratings given
This list only shows the routes available (not booked routes) from the current date and
into the future.
The user (driver) can add a route they would like to offer (form below the list)
The user (passenger) can book a route (link on right to the list entry)
3
On a page called “Requested routes” the users will see all routes that are requested bythemselves or by others: date and time, source location, target location, name of driver,
average rating and number of ratings given.
This list only shows the routes requested (booked routes) from the current date and into
the future.
The user (passenger) can add a route they would like to request (form below the list)
-
8/18/2019 kisi-kisi LKS Web Design 2016
29/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Test Project for Web Design Date: 11.12.15 11 of 12
The user (driver) can book a route they want to drive and give a lift to someone (link on
right to the list entry)4 On a page called “My offered routes” the user will see all routes they have offered as a
driver and are/were booked/used by another user: date and time (future in bold, past
normal), source location, target location, name of passenger, rating given.
They will be able to rate that user (passenger) on a scale from 0 to 5
5 On a page called “My booked routes” they user will see all routes they have booked as a
passenger: date and time, source location, target location, name of driver, rating given.
The user (passenger) will be able to rate the user (driver) on a scale from 0 to 5
Notes
Time always reflects full hours only (no minutes)
All data for user needs to be entered into the database directly. You do not need to provide a user
interface for that. For assessment the following two users will be used to login: “user1” with
“pass1”, “user2” with “pass2”
For the routes you can use the test data that will be provided or create your own.
INSTRUCTIONS TO THE COMPETITOR
Save your files in your root directory on the server called " XX_Module_E"
where XX is your computer code.
Name the file to start the application “index.php” and put it directly into the directory mentioned
above.
Create/generate a DB-diagram named “db-diagram.xxx” (xxx is the extension/type of the file eg.
pdf or jpg) and put it into the directory mentioned above.
-
8/18/2019 kisi-kisi LKS Web Design 2016
30/30
LOMBA KETERAMPILAN SISWA
SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL 2016 MATA LOMBA WEB DESIGN
Example:
Save all your work files (those that will not be assessed) into a subdirectory called “work”.
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 two available frameworks which you installed on f13n-
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_DB_Module_E” on the central
server.