kisi-kisi LKS Web Design 2016

8/18/2019 kisi-kisi LKS Web Design 2016

1/30

aaa

KISI-KISI

BIDANG LOMBA :

WEB DESIGN


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


3/30


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

Individu harus dapat:

o

Menerapkan keterampilan pemecahan masalah untuk mengakomodasi kelompok

pengguna dengan kebutuhan khusus


4/30


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


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 estetikawebsite

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

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


5/30


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.


6/30


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


7/30


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/30



9/30

aaa

LAY OUT

BIDANG LOMBA :

WEB DESIGN


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


11/30

aaa

JADWAL

BIDANG LOMBA :

WEB DESIGN


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


1 08.00 – 08.30 Membaca soal dan pemahaman modul 3 0.5 jam


3 12.30 – 13.30 Istirahat/Makan Siang

4 13.30 – 14.00 Membaca soal dan pemahaman modul 4 0.5 jam


HARI 4


1 08.00 – 12.00 Penilaian 4 jam

4 12.00 – 13.00 Makan Siang

5 13.00 – 14.00 Penutupan


13/30

aaa

LEMBAR INFORMASI

BIDANG LOMBA :

WEB DESIGN


14/30



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.


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”


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


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.


18/30


19/30



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.


20/30





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.


21/30





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.


22/30


23/30





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:


24/30






25/30





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


26/30





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.


27/30





INSTRUCTIONS TO THE COMPETITOR Save your files in your root directory on the server called " XX _Module_C"



28/30





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

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)


29/30





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"


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.


30/30




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.

Documents

kisi-kisi LKS Web Design 2016