KISI-KISI BIDANG LOMBA : WEB DESIGN

(1)

aaa

KISI-KISI

BIDANG LOMBA :

(2)

LKS SMK 2016 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 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)

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)

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

o Membuat sebuah situs yang interaktif

4. Server Side Programming

o Bagaimana mengembangkan aplikasi dengan kode PHP

o Bagaimana memanfaatkanOpen 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 Programming Interface), libraries and frameworks

(5)

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 beserta kelengkapan software yang ada, karena kesalahan atau error yang terjadi selama perlombaan tidak akan diberikan tambahan waktu.

(6)

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

2 Notebook untuk juri (spesifikasi yang sama dengan _peserta) 5 Unit 1 untuk masing-_{masing Juri}

3 USB Flashdisk 16GB 1 Unit 1 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)

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)

(9)

aaa

LAY OUT

BIDANG LOMBA :

(10)

DENAH LOMBA

WEB DESIGN

15 X 25meter

K25 K24 K23 K22 K21 K20 K27 K1 8 K2 K3 K4 K5 K6 K7 K1 7 K1 6 K15 K14 K13 K12 K11 K29 K29 K2 30 K3 1 3 2 1

_J

U

R

I

P P

PANITIA

K32 K33 K8 K19 K10 K1 K2 6 K9

(11)

aaa

JADWAL

BIDANG LOMBA :

(12)

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 Alat

3 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

3 12.30 – 13.30 Istirahat/Makan Siang

HARI 4

1 08.00 – 12.00 Penilaian 4 jam

4 12.00 – 13.00 Makan Siang 5 13.00 – 14.00 Penutupan

(13)

aaa

LEMBAR INFORMASI

BIDANG LOMBA :

(14)

LOMBA KETERAMPILAN SISWA

SEKOLAH MENENGAH KEJURUAN

TINGKAT NASIONAL 2016

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

(15)

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:

(16)

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

(17)

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.

(18)

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

(19)

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)

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

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.

(22)

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

(23)

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:

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

(24)

(25)

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)

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;

(27)

Save your files in your root directory on the server called "XX _Module_C" where XX is your computer code.

(28)

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

2  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 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.

(29)

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

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

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