LOMBA KOMPETENSI SISWA 2023

SEKOLAH MENENGAH KEJURUAN

TINGKAT KABUPATEN TANGGAMUS

BIDANG LOMBA
WEB DESIGN

PEMERINTAH PROVINSI LAMPUNG

DINAS PENDIDIKAN DAN KEBUDAYAAN

Seleksi Tingkat Kabupatan LKS

BIDANG WEB DESIGN
TAHUN 2023
1. PENDAHULUAN
1.1 Nama dan Deskripsi Lomba
1.1.1 Nama Lomba
Web Design and Development

1.1.2. Deskripsi Lomba

Web Design and Development mencakup berbagai keterampilan dan disiplin dalam produksi dan
pemeliharaan situs web. Keterampilan yang dibutuhkan developer web sangat beragam, seringkali sulit
bagi developer untuk unggul dalam semua aspek. Akibatnya, tim dapat mengikuti proses desain web,
dengan setiap anggota tim memiliki kekuatan, spesialisasi, dan peran masing-masing dalam proses
pengembangan.
Web Design melibatkan penerapan solusi spesifik yang mengikuti aturan dan tujuan bisnis yang
dideskripsikan oleh klien. Web Designer mengembangkan hubungan profesional dengan klien mereka,
berinteraksi untuk mengembangkan pemahaman mendalam tentang persyaratan, dan mengubahnya
menjadi spesifikasi situs web. Desain dan kemampuan komunikasi yang kuat, ditambah dengan teknik
penelitian dan pemahaman khalayak target, pasar dan tren, akan memastikan kepuasan dan kredibilitas
klien awal untuk Web Designer.

Setelah menyelesaikan perencanaan dan perancangan situs web, Web Designer kemudian
mengintegrasikan situs web dengan alat dan platform pihak ketiga. Selama proses pengembangan web
designermenerapkan desain, menggunakan keterampilan pemrograman mereka untuk menciptakan
fungsionalitas dinamis, tes, dan debug situs web dengan menggunakan berbagai perangkat. Tren saat ini
adalah untuk juga mengintegrasikan situs web dengan media sosial untuk memanfaatkan platform
pemasaran online yang ada.
Semua keterampilan ini mungkin berlaku sama untuk desain ulang atau upgrade dari situs web yang
ada.
Perancang Web memiliki banyak kesempatan kerja. Ini bisa berkisar dari menjadi freelancer atau
pengusaha, dipekerjakan oleh biro iklan dan perusahaan pengembangan web serta berbagai jenis
organisasi lainnya. Posisi Web Designer mungkin luas dalam lingkup atau spesialisasi di bidang seperti
desain grafis untuk Web, desain antarmuka pengguna, desain pengalaman pengguna digital,
pengembangan front end, pengembangan back end, pengembang sistem manajemen konten serta
manajemen klien dan proyek. Peran apa pun yang dipilih oleh Perancang Web untuk mengambil
spesialisasi di dalamnya, mereka memerlukan akses ke fasilitas TIK, perpustakaan sumber terbuka, dan
kerangka kerja.
Perancang Web berperforma tinggi mungkin memiliki keahlian web-related yang luas atau khusus.
Mereka harus memahami nilai artistik, memiliki kemampuan mendesain antarmuka pengguna yang
solid, keterampilan pemrograman, dan bertanggung jawab secara pribadi karena selalu berada di garis
depan tren dan teknologi web. Mereka juga harus responsif terhadap klien dan memiliki kemampuan
untuk bekerja dalam tim dan kelompok terstruktur dan tidak terstruktur. Kualitas ini memungkinkan
Web Designer untuk berkontribusi dan memanfaatkan aspek teknologi komunikasi modern yang
berkembang pesat ini.
1.2 Isi Deskripsi Teknis
Dokumen ini berisi informasi tentang standar yang dibutuhkan untuk bersaing dalam kompetisi
keterampilan ini,dan prinsip penilaian, metode, dan prosedur yang mengatur persaingan. Setiap ahli dan
kompetitor harus mengetahui dan memahami Deskripsi Teknis ini.
1.3 Dokumen Terkait
Dokumen ini hanya berisi informasi tentang aspek teknis keterampilan, dokumen lain yang juga harus
dipelajari adalah:
 Soal Lomba
 Daftar Kebutuhan Alat
 Daftar Kebutuhan Software/Bahan

1.4 Spesifikasi Kompetensi LKS-SMK Kabupaten Pesawaran

Section %-tasi
1. Manajemen dan Organisasi Kerja 10
Mengetahui dan memahami:
 Prinsip dan praktik yang memungkinkan kerja tim produktif
 Prinsip dan perilaku sistem
 Aspek sistem yang berkontribusi terhadap produk, strategi yang
berkelanjutan dan praktik
 Bagaimana cara berinisiatif dan giat untuk mengidentifikasi, menganalisa
dan mengevaluasi informasi dari berbagai sumber
 Identifikasi beberapa solusi untuk masalah dan menawarkan opsi terhadap
waktu, anggaran, dan kendala lainnya. Dapat melaksanakan:
 Troubleshoot masalah desain dan pengembangan web secara umum
 Membatasi waktu dan tenggat waktu
 Debug dan Error handling
 Menggunakan komputer atau perangkat dan berbagai paket perangkat lunak
 Terapkan teknik dan keterampilan penelitian untuk selalu mengikuti
perkembangan terbaru berdasarkan pedoman industri
 Rencanakan jadwal produksi setiap hari sesuai waktu yang tersedia
 Menyertakan gambar terkait, font, file asli dan format file produksi saat
pengarsipan

2. Komunikasi dan Keterampilan Interpersonal 10

Mengetahui dan memahami:
 Bagaimana mengatasi masalah komunikasi termasuk
mengidentifikasimasalah, penelitian, analisis, pembuatan solusi, prototyping,
user pengujian dan evaluasi hasil
 Membuat, menganalisa, dan mengembangkan respon visual terhadap
komunikasimasalah, termasuk pengertian hierarki, tipografi, estetika,dan
komposisi
 Membuat, manipulasi dan optimalkan gambar untuk internet
 Identifikasi target pasar dan buat konsep untuk desain
 Buat desain responsif yang berfungsi dengan benar pada beberapa
layarresolusi dan / atau perangkat
 Mengubah ide menjadi desain yang estetis dan kreatif
 Konsep konsep kritik, pilihan warna dan tipografi
3. Desain Website 20
Mengetahui dan memahami:
 Cara mengikuti prinsip dan pola desain agar bisa memproduksi desain yang
estetis dan kreatif
 Buat desain responsif yang berfungsi dengan benar pada beberapa layar
resolusi dan / atau perangkat
  Mengubah ide menjadi desain yang estetis dan kreatif
 Konsep konsep kritik, pilihan warna dan tipografi
 Cara membuat dan mengadaptasi grafis untuk web
4. Layout Website 30
Mengetahui dan memahami:
 Menggunakan HTML dan CSS
 Metode penentuan dan tata letak
 Cara menanamkan dan mengintegrasikan animasi, audio dan video

5. Server Side Development 30

Mengetahui dan memahami:
 Bagaimana merancang dan mengimplementasikan database dengan MySQL
untuk login
 Menggunakan PHP

Jumlah 100

1.5 Daftar Alat yang dibawa peserta

No. Nama Alat Jumlah

1. Keyboard 1
2. Mouse 1
3. Headseat 1

1.6 Daftar Kebutuhan Software/Bahan

No. Nama Software Versi

1. Sublime Text 3/ Adobe Dreamweaver CS6 -
2. Xampp 5.6.32 atau terupdate
PART A : LAYOUT
B1: HTML tags (Easy)

A customer wants you to make his writings into HTML so that it displays well in web
browser. He has written the text. Your job is to use HTML to define the content for web
browser to properly display it. Please consider semantic tags and accessibility.

B2: CSS Grid (Normal)

Please implement the following layout in CSS grid.

@2019 footer
PART B : MODERN LAYOUT (EASY)

Your task is to create the following layout, the posts’ width is ⅓ of the container’s on
desktop screen size (>=1440px) and full width below this.
PART C : MODERN LAYOUT
Your task is to create the following layout with HTML
and CSS

HEADER----

HOME BLOG CATEGORIES OUR PRODUCT CONTACT US

NAMA ARTICLE 1
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Integer mi tortor, imperdiet
IMG sed hendrerit non, consequat luctus magna.
IMG 1
Nullam accumsan odio ac lectus mollis
finibus.

NAMA ARTICLE 2
HTML Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Integer mi tortor, imperdiet
CSS
IMG 2 sed hendrerit non, consequat luctus magna.
PHP Nullam accumsan odio ac lectus mollis
JAVASCRIPT finibus.

MYSQL

FOOTER----

Tata Tertib Lomba

1) Peserta hadir di tempat lomba 30 menit sebelum acara dimulai, dan
mengisi daftar hadir yang telah disediakan panitia.
Bagi yang terlambat harus mendapat izin masuk dari panitia.
2) Peserta yang tidak hadir sesuai dengan jadwal, dan atau
melebihi 45 menit dari jadwal yang ditentukan dianggap
mengundurkan diri.
3) Setiap peserta berpakaian seragam jurusan SMK
4) Penentuan nomor peserta dilakukan melalui undian, bagi peserta yang
tidak mengikuti technical meeting, nomor undian ditentukan oleh panitia.
5) Selama perlombaan berlangsung setiap peserta wajib
mengenakan Nomor Undian;
6) Peserta lomba menempati/ menggunakan peralatan lomba sesuai
hasil undi;
7) Pelaksanaan lomba dilaksanakan 2 (dua) hari, tentative.
8) Waktu lomba 8 jam ( 60 menit/jam );
9) Waktu istirahat 60 menit untuk sholat, istirahat, dan makan;
10)Peserta tidak dapat melanjutkan lomba dikarenakan sakit atau hal-hal
lain, maka dianggap gugur/ mengundurkan diri;
11) Peserta tidak dibenarkan berkonsultasi atau mendapat pengarahan teknis
tentang pekerjaan (job) pada waktu kegiatan berlangsung dari pembimbing
masing-masing kecuali dari tim juri;
12) Kegagalan/ keterlambatan pekerjaan tidak diberikan toleransi (misalnya
karena lupa pekerjaan belum di-save);
13) Peserta lomba wajib melakukan pemeriksaan peralatan dan
kebersihan lingkungan kerja;
14) Pemeriksaan peralatan dilakukan oleh peserta di depan juri
dan panitia selama lebih kurang 30 menit sebelum perlombaan dimulai;
15) Kerusakan peralatan (hardware/software) akibat kesalahan
16) Pen tablet merupakan peralatan penunjang yang
diperkenankan dibawa peserta dan tidak disediakan penyelenggara.
17) Tidak dibenarkan menggunakan software di luar ketentuan
yang ada, termasuk penggunaan internet;
18) Pembimbing tidak dibenarkan masuk ke ruang lomba atau
menghubungi peserta baik langsung maupun alat komunikasi \
pada saat lomba berlangsung dengan alasan apapun;
19) Ketentuan lain yang belum tercantum dalam tata tertib ini
diputuskan oleh kebijakan juri (ditentukan kemudian sesuai kebutuhan);
20) Pelanggaran terhadap tata tertib ini akan diberikan sanksi
berupa teguran sampai berupa pemberhentian sebagai peserta.

Agenda Lomba
Mengikuti agenda panitia pembukaan Lomba Keterampilan Siswa :
Durasi Kegiatan PIC
HARI PERTAMA 8 JAM
30’ Technical Meeting & Pengundian Peserta Panitia

30’ Brief Modul

150’Pelaksanaan Lomba
4 60’ ISHOMA
5 150’ Pelaksanaan Lomba Kemasan
6 30’ Penjurian Tahap I

7
8
HARI KEDUA 8 Jam
1 150 Pelaksanaan Lomba Menu

2 60 ISHOMA
3 210’ Pelaksanaan Lomba Panitia
4 60’ Penjurian Tahap II
5
6