Web Design PDF

aaa
KISI-KISI
BIDANG LOMBA :
WEB DESIGN
LOMBA KOMPETENSI SISWA

SEKOLAH MENENGAH KEJURUAN
TINGKAT NASIONAL XXIV
MALANG, 23-28 MEI 2016
KISI-KISI SOAL
KELOMPOK 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
1 Praktik/Tugas
Tugas 1 : Redesign
Tugas 2 : Layouting Design
Tugas 3 : Client Side
Programming
Tugas 4 : Server Side
Programming
2 Wawancara
LKS SMK 2016 Bidang Lomba Web Design
Bobot
100%
Waktu
15 Jam
(900 Menit)
Ranah Kompetensi
Keterampilan dan Sikap
10-15
Pengetahuan, Keterampilan dan
Menit/Peserta Sikap
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

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
o Menerapkan keterampilan pemecahan masalah untuk mengakomodasi kelompok
pengguna dengan kebutuhan khusus
o
o
o
o
Menggunakan CSS dengan cara yang paling efisien dan efektif untuk konsistensi antara
web browser
Membuat halaman web yang konsisten dan berfungsi pada berbagai perangkat dan
perbedaan resolusi layar
Membuat
website
yang
sesuai
dengan
standar
W3C
saat
ini
(http://www.w3.org).
Menggunakan CSS atau file eksternal lainnya untuk memodifikasi tampilan website
3. Client Side Programming

o Bagaimana mengintegrasikan JavaScript
o Cara membuat kode dengan JQuery
o Bagaimana menerapkan layanan web menggunakan XML (Extensible Markup
Language) dan JSON
o Membuat animasi untuk membantu dalam menjelaskan konteks dan menambahkan
daya tarik visual
o Membuat dan memperbarui kode JavaScript untuk meningkatkan fungsi dan estetika
website
o Membuat sebuah situs yang interaktif
4. Server Side Programming

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
o Mengembangkan design query database dan layanan web sesuai dengan kebutuhan
client
o
o
o
o
o
Memberikan solusi kebutuhan database yang kuat

Terjemahkan ER (Entity-Relationship) Diagram ke dalam database
Membuat SQL (Structured Query Language) statements dengan benar
Melindungi terhadap gangguan keamanan
Mengintegrasikan dengan kode yang ada dengan API (Application Programming
Interface), libraries and frameworks
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
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.
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 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.
DAFTAR ALAT DAN BAHAN

No
Nama Alat dan Bahan

Notebook untuk peserta dengan spesifikasi :
Intel core i5 / i7 2.2 GHz
Wifi
Mouse Optical
Harddisk 120 GB
Standard Memori 8 GHZ MB
DVDRW
Headset
Monitor 18.5"
UPS
Mouse pad
Notebook untuk juri (spesifikasi yang sama dengan
peserta)
Banyaknya
1 Unit
5 Unit
USB Flashdisk 16GB
1 Unit
USB Flashdisk 32GB
5 Unit
5
6
Notebook untuk Sekretariat

Printer Color untuk Sekretariat
1 Unit
1 Unit
ATK
1 Paket
Keterangan
1 untuk masingmasing peserta

+ 3 unit cadangan
1 untuk masingmasing Juri

1 untuk masingmasing peserta
1 untuk masingmasing Juri dan 2
unit cadangan
Panitia
Panitia
Untuk masingmasing peserta dan
Juri
DAFTAR SOFTWARE PADA KOMPUTER

No.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
Nama Program
Microsoft Windows 7
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
Adobe Dreamweaver, Photoshop, Illustrator (kalau bisa CC Edition 2015, atau CS6)
PHPStorm 9.0.2, link download : https://www.jetbrains.com/phpstorm/download/
Brackets, link download : http://brackets.io/
Notepad++ 6.8.2, link download : https://notepad-plusplus.org/download/v6.8.2.html
Sublime v2, link download : http://www.sublimetext.com/2
Composer, link download : https://getcomposer.org/download/
Nodejs v0.12.7, link download : https://nodejs.org/download/
Office standard (any version)
Firefox Developer Edition, link download : https://www.mozilla.org/enUS/firefox/developer/
Google Chrome (newest), link download :
https://support.google.com/chrome/answer/95346?hl=en AND Internet Explorer 10
SQLYog/WebYog, link download : https://www.webyog.com/product/downloads
MariaDB V10, link download : https://downloads.mariadb.org/
MySQL Workbench, link download : http://dev.mysql.com/downloads/workbench/
7zip
aaa
LAY OUT
BIDANG LOMBA :
WEB DESIGN
K25
K22
K21
K20
K19
K26
K27
K17
WEB DESIGN
K23
K18
DENAH LOMBA
K24
15 X 25meter
K29
K16
K29
K11
K32
K12
K31
K13
K230
K14
K15
J
U
R
I
PANITIA
K33
K10
K9
K1
K2
K3
K4
K5
K6
K7
K8
aaa
JADWAL
BIDANG LOMBA :
WEB DESIGN
LOMBA KETERAMPILAN SISWA

TINGKAT NASIONAL 2016
MATA LOMBA WEB DESIGN
JADWAL PELAKSANAAN
HARI 1
NO
1
2
WAKTU
12.00 - 15.00
16.00 - 17.00
KETERANGAN
Juri Pusat dan Kompetitor diharapkan sudah tiba di Hotel.
Technical Meeting
HARI 2
NO
1
2
3
4
5
6
7
WAKTU
08.00 08.30
08.30 09.00
09.00 09.30
09.30 12.30
12.30 13.30
13:30 14:00
14.00 17.00
KETERANGAN
Pembukaan
Familiarisasi Alat
Membaca soal dan pemahaman modul 1
Kompetisi: Modul 1
Istirahat/Makan Siang
Kompetisi: Modul 2
TOTAL WAKTU
KETERANGAN
Kompetisi: Modul 3
Istirahat/Makan Siang
Kompetisi: Modul 4
TOTAL WAKTU
0.5 jam
4 jam
0.5 jam
3 Jam
0.5 jam
3 jam
HARI 3
NO
1
2
3
4
5
WAKTU
08.00 08.30
08.30 12.30
12.30 13.30
13.30 14.00
14.00 19.00
0.5 jam
5 jam
HARI 4
NO
1
4
5
WAKTU
08.00 12.00
12.00 13.00
13.00 14.00
KETERANGAN
Penilaian
Makan Siang
Penutupan
TOTAL WAKTU
4 jam
aaa
LEMBAR INFORMASI
BIDANG LOMBA :
WEB DESIGN

DEPARTEMEN PENDIDIKAN NASIONAL

DIREKTORAT 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.
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 =
C.
N1
Aspek-aspek Penilaian
Ad.1. Aspek yang dinilai untuk Tes Praktik adalah:
Aspek penilaian dimuat dalam file Marking Sheet.doc di folder Soal
V.
Tim Juri
Jumlah Juri sebanyak 5 orang terdiri atas :
No
Unsur
Jumlah
a.
Expert ASC/WSC Web Design
1 orang
b.
Profesional industry Web Design
1 orang
c.
Dosen Keilmuan Web Design
2 orang
d.
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
: ................
: ................
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 baik
langsung 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.
X.
Pendaftaran
Pendaftaran (konfirmasi untuk berpartisipasi) melalui rpendaftaran online selambat-lambatnya
tanggal 29 April 2016 di website psmk.kemdikbud.go.id/pesertadidik
XI. Penutup
Hal-hal yang belum tercantum dalam lembar informasi ini akan diinformasikan pada waktu rapat
teknis (technical meeting).

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 clients
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.
Test Project for Web Design
Date: 11.12.15
1 of 12

Motion design
There 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 doesnt 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 doesnt 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 wont 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.
Date: 11.12.15
2 of 12

INSTRUCTIONS TO THE COMPETITOR

Save
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.
Date: 11.12.15
3 of 12

Test Project Module 2
Introduction
Company X has been in business for several years but has recently been bought out by a new owner.
They have an old website which they have used for many years. The new owner has decided that it
is time to update and renew the website of Company X with a new version which includes a modern
and responsive design. The new owner is looking to increase their business on the web and needs a
new design to carry them into the next decade.
Description of project and tasks

Your task is to re-design a website and create a new responsive version that is designed to work on
several devices with different resolutions. The responsive website should provide an optimal viewing
experience for users accessing the website with a computer, tablet or smartphone.
You have been provided with the URL to Company X old website where you can find the company
logo and the basic information about the company.
You must re-use the company logotype; keep original structure of company logotype/identity, which
has been with the company since it was founded. You must also use all the text and information on
the old website and incorporate it into the new designs. While all information must be included it is
up to the competitor to organize and design how the information is presented and organized on the
new re-designed website. You can use your creativity to create additional content or media where
required. You can also make changes on all of the provided images.
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
Date: 11.12.15
4 of 12

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 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:
Computer: XX_computer.png
Tablet: XX_tablet.png
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:
Computer: XX_computer_2.png, XX_computer_3.png
Tablet: XX_tablet_2.png, XX_tablet_3.png
Smartphone: XX_smartphone_2.png, XX_smartphone_3.png
Save
the
source
files
of
images
to
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:
Date: 11.12.15
5 of 12

Date: 11.12.15
6 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.
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 persons 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 frontend. 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
Date: 11.12.15
7 of 12

image size (proportional size, bigger or smaller) using the buttons on the app interface or using
the 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.
Date: 11.12.15
8 of 12


Save your files in your root directory on the server called "XX _Module_C"
Date: 11.12.15
9 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.
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
database
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)
On a page called Requested routes the users will see all routes that are requested by
themselves 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)
Date: 11.12.15
10 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)
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
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.
Save
your
files
in
your
root
directory
on
the
server
called
"XX_Module_E"
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.
Date: 11.12.15
11 of 12

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 f13nday. 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.
Date: 11.12.15
12 of 12

Web Design PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Web Design PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

aaa

LOMBA KOMPETENSI SISWA

LKS SMK 2016 Bidang Lomba Web Design

Individu perlu mengetahui dan memahami:

LKS SMK 2016 Bidang Lomba Web Design

3. Client Side Programming

Individu perlu mengetahui dan memahami:

Individu perlu mengetahui dan memahami:

Memberikan solusi kebutuhan database yang kuat

LKS SMK 2016 Bidang Lomba Web Design

C. Soal Praktek ( Bobot 100% )

LKS SMK 2016 Bidang Lomba Web Design

DAFTAR ALAT DAN BAHAN

Nama Alat dan Bahan

USB Flashdisk 16GB

USB Flashdisk 32GB

Notebook untuk Sekretariat

LKS SMK 2016 Bidang Lomba Web Design

1 untuk masingmasing peserta

1 untuk masingmasing Juri

DAFTAR SOFTWARE PADA KOMPUTER

LKS SMK 2016 Bidang Lomba Web Design

LKS SMK 2016 Bidang Lomba Web Design

LOMBA KETERAMPILAN SISWA

LOMBA KETERAMPILAN SISWA

SEKOLAH MENENGAH KEJURUAN

DEPARTEMEN PENDIDIKAN NASIONAL

Skor dan Bobot Penilaian

Skor maksimal dan bobot :

Expert ASC/WSC Web Design

Profesional industry Web Design

Dosen Keilmuan Web Design

Pemenang Medallion of Excellence WorldSkills 2013 Web Design

VI. Kriteria Pemenang Lomba

VII. Panitia Lomba

VIII. Tempat Lomba

IX. Tata Tertib Lomba

LOMBA KETERAMPILAN SISWA

Test Project for Web Design

LOMBA KETERAMPILAN SISWA

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)

Test Project for Web Design

LOMBA KETERAMPILAN SISWA

INSTRUCTIONS TO THE COMPETITOR

where XX is your computer code.

Test Project for Web Design

LOMBA KETERAMPILAN SISWA

Description of project and tasks

Computer - 1440 x 900 pixels

Tablet - 768 x 1024 pixels

Smartphone - 320 x 480 pixels

Test Project for Web Design

LOMBA KETERAMPILAN SISWA

design or in additional files. Features and functionality should be self-explanatory, no written

Instructions to the Competitor

where XX is your country code.

Computer: XX_computer_2.png, XX_computer_3.png