Soal LKS SMK Web Design 2018
Thursday, November 8, 2018
Edit
Soal LKS SMK Web Design 2018. Pada kesempatan ini kami akan membagikan file Soal LKS SMK Bidang Lomba Web Design (Desain Web) Tahun 2018. Pada tahun 2018 ini Lomba LKS SMK Tingkat Nasional akan diselenggarakan di Nusa Tenggara Barat, Bagi para siswa yang ingin mengikuti lomba di tingkat nasional kalian harus menjadi jawara di tingkat provinsi dan mewakili provinsinya. Dibutuhkan latihan dan kerja keras untuk bisa menjadi seorang jawara di Lomba Kompetensi Siswa kali ini. Maka dari itu, sebagai bahan belajar di rumah Anda bisa langsung mengunduh file Soal LKS SMK 2018 Bidang Web Design ini dan langsung mengerjakannya di rumah. Apabil ada sesuatu hal yang tidak bisa dikerjakan dirumah, anda bisa minta tolong ke guru pembimbing di SMK yang mahir mengenai Desain web.
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.
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.
Proyek Uji LKS
Ketentuan Umum
Tujuan dari Proyek Uji adalah untuk memberikan kesempatan penuh dan seimbang untuk penilaian dan menandai seluruh Standar Spesifikasi, dalam hubungannya dengan Skema Marking. Hubungan antara Proyek Uji, Menandai Skema dan Standar Spesifikasi akan menjadi indikator kunci dari kualitas.
Uji Proyek tidak akan menutupi area luar Standar Spesifikasi, atau mempengaruhi keseimbangan tanda dalam Spesifikasi Standar selain dalam keadaan yang ditunjukkan oleh Bagian 2.
Test Project akan memungkinkan pengetahuan dan pemahaman yang akan dinilai hanya melalui mereka aplikasi dalam kerja praktek. Uji Proyek tidak akan menilai pengetahuan tentang aturan dan peraturan WorldSkills.
Deskripsi Teknis ini akan mencatat setiap masalah yang mempengaruhi kapasitas Test Project untuk mendukung penuh berbagai penilaian relatif terhadap Standar Spesifikasi. Bagian 0 mengacu.Format dan Struktur Proyek Uji.
Modul proyek uji berjumlah tiga test project yang berlangsung selama tiga hari.
Persyaratan Proyek Uji
a. Content Management System
• Membuat desain website yang responsif dengan menggunakan Adobe
Photoshop CS6 / CC.
• Membuat icon atau aset-aset yang dibutuhkan dengan menggunakan Adobe Photoshop CS6 / CC atau Adobe Illustrator CS6 / CC.
• Membuat halaman website dengan menggunakan HTML5 dan CSS3 sesuai dengan standar W3C yang dapat diverifikasi lewat validator milik w3.org.
• Membuat desain halaman website yang responsif dengan menggunakan grid system dan CSS3.
• Membuat animasi dengan menggunakan CSS3 dan Javascript.
• Membuat website interaktif dengan menggunakan Javascript dan JQuery.
• Melakukan instalasi dan konfigurasi Wordpress sebagai basis Content Management System.
• Menggunakan, membuat dan memodifikasi themes untuk mengubah tampilan standar Wordpress.
• Menggunakan, membuat dan memodifikasi plugins untuk menambahkan fiturfitur dari Wordpress.
b. Client Side
• Membuat game dengan menggunakan fitur canvas di HTML5.
• Mendeteksi input melalui keyboard dan pointer mouse dengan menggunakan Javascript.
• Menampilkan dan menganimasikan gambar maupun sprite dalam canvas HTML5 menggunakan Javascript.
• Mendeteksi tabrakan yang terjadi antar objek dalam canvas.
• Memainkan suara musik latar maupun efek suara dengan menggunakan Javascript.
• Mengirim dan menampilkan data ke API yang sudah disiapkan menggunakan fitur AJAX pada javascript.
c. Server Side
• Membuat backend API sebuah website menggunakan salah satu dari framework PHP berikut: Laravel atau Yii
• Membuat API sesuai dengan input dan format yang diberikan.
• Menggunakan Postman untuk melakukan pengecekan terhadap API yang dibuat.
• Membuat Frontend yang menerima dan mengirim data ke API dengan menggunakan salah satu JS Framework berikut: ReactJS, AngularJS atau VueJS
• Menghubungkan Backend API dengan beberapa komponen HTML5 di Frontend seperti Canvas, Form dan Komponen Halaman Website lainnya.
Langsung aja pada soalnya ya sob.... informasi mengenai detail waktu pengerjaan soal nanti bisa anda lihat pada File Soalnya langsung..
Soal BIDANG LOMBA Web Design and Development
CMSIntroduction
GLOBAL FASHION 2017 IS A BRAND NEW FASHION EVENT THAT IS TO BE HELD IN ABU DHABI. THE COMPANY RUNNING THIS EVENT NEEDS HELP IN DESIGNING A NEW AND VIBRANT WEBSITE IN ORDER TO MARKET THE EVENT AND SELL TICKETS.
Description of project and tasks
THIS MODULE INVOLVES KNOWLEDGE ABOUT WEBSITE DESIGN, WEBSITE LAYOUT TECHNIQUES, CLIENT-SIDE SCRIPTING, AND SERVER-SIDE SCRIPTING, ALL COMBINED IN ONE CMS PROJECT. YOU WILL BE USING MOST POPULAR CMS, WORDPRESS. YOU WILL DEVELOP YOUR THEME AS A CHILDTHEME FOR THE BLANKSLATE WORDPRESS THEME, CALLED BLANKSLATE_CHILD_WORLDFASHION.
FOR THE FULLY FUNCTIONAL WEBSITE YOU WILL NEED TO ADD SOME OF THE PROVIDED OR SELFDEVELOPED PLUGINS.
The company wants the possibility to create pages to show information about current, former and future events. They also want to publish news items. Make proper use of the provided plugins like SEO, social media support and security.
The website design needs to be classy and modern to fit with the target audience for Global Fashion 2017: Mainly female owners of fashion web shops.
Website Design Details
Create a design for a responsive front page for the fashion event ‘Global Fashion 2017’.
Make a design for how the website will looks like at the following resolutions:
Desktop:1330px,
Tablet:768px,
Mobile: 320px.
Add the designs to a mockup to present your website.
The website consists of 2 page templates. A main page template for the upcoming events, and another page template for former events. You only need to design the main page.
The main page template:
The main page template includes
- Page title
- Header video gallery
- Event description (placeholder text)
- Countdown timer (October,19 th 18.00)
- News posts
- Book tickets button
- Maps location (Screenshot)
- Tab to open the hidden sidebar
- Footer with copyrights and social media links The page template for the former events
- Page title
- Header video
- Image gallery
- Event description (placeholder text)
- Maps location (Screenshot)
- Tab to open the hidden sidebar
- Footer with copyrights and social media links
The sidebar is added to all pages. The sidebar is hidden and just has a small tab. When clicking the tab, the sidebar slides or fades in.
The sidebar needs to support adding search widget, images of sponsors and a calendar widget.
The footer is added to all pages. The footer contains copyrights and links to at least three social media platforms.
The header section of the main page shows all videos in a gallery –instead of one video:
The video for the 2017 event will cover the header section of the main page. Other videos about former events are displayed smaller. The small videos contain year and place as title.
At the video gallery, when hovering small videos, the hovered video will be played and the large video will be paused. With mouse-out the small video stops and the large video continues.
The video gallery is the eye catcher of the main page. The design must be very appealing, but without loosing the classy and modern look and feel.
The main page shows an accurate countdown timer to the start of the event (October,19 th 18.00).
Posts will be displayed in the main page with category icons. You should produce the icons for:
- Fashion catwalk (catwalk show related news items),
- Pop-up stores (news items related to available stores at the venue),
- Brand parade (news items related to the big parade where all famous brands participate)
- Posts will have a short message with 'read more' option and optional there can be an image.
Readability and attraction is very import for the design of the post.
The UI of the slider should have a minimal and elegant design for leading all the attention to the images.
Style guide Details
Necessary elements for the style guide including colors, sizes and fonts
o Buttons
o Backgrounds
o Main title
o Subpage title
o Section title
o Paragraphs
o Navigation
o News category Icons.
• Add comments to the style guide to specify how to use the logo and the interactive
elements.
The designs should be saved as: Desktop_WorldFashion.*, Tablet_WorldFashion.* and
Mobile_WorldFashion.*.
The designs should be saved as *.png and .psd or .ai.
Add your designs to one of the provided mockups and save it as:
Mockup_WorldFashion.png
In addition to the website design you need to design a style guide for future development of the website. You have to use one of the two provided logos, but you are allowed to make changes to the color of the logo.
Save your design, style guide and mockup files in this location:
http://competitorYY.wsad.local/XX_cms_module/design XX is your country code. YY is workstation number.
TECHNIQUE
The website layout should be developed with the ability to add menu items (up to 5 items each maximum 15 characters) and content without damaging the design. For future use widgets will be placed in the sidebar. Make sure the content of the sidebar can easily be changed without damaging the design.
The layout of the website needs to be identical to your designs, but also needs to scale without damaging the design when scaling the browser window between 320px and 1330px.
Make use of HTML and CSS by the W3C standards for proper SEO support.
Clicking at menu and post items should not cause a page refresh, but post content will be loaded asynchronous from the server.
CMS Details
For safety reasons two user profiles needs to be created:
• The Admin user - access to the complete WordPress main dashboard.
o Username: adMinX
o Password: Never4get!
• The Client user - access to the main WordPress dashboard showing only pages,
posts, media and relevant plugins (image sliders, video gallery, security, seo).
o Username: 4Clients
o Password: Never4get2
The Wordpress login page should have the logo of GlobalFashion.
Pages
In the Wordpress dashboard for each page there are fields to fill for:
- Title
- Place
- Start date (yyyy, mm, dd), end date (yyyy, mm,dd)
- Description of the event
- Location (maps) image
- Video
Posts
In the Wordpress dashboard each posts contains:
- Title,
- Date,
- Message,
- Category-icon,
*Images are optional.
Create Image slider (plugin)
Create an image slider plugin that appears directly in the main dashboard menu as a plugin.
By using the plugin in the main dashboard menu, clients can create multiple sliders with at least three images. The sliders can be implemented on the pages by adding shortcodes. The slider can be paused by mouse-over, continued by mouse-out and individual images can be shown large by clicking at the corresponding thumbnail or button.
Header video gallery (plugin)
Create a plugin that adds a video gallery to the header of the main page. The video gallery contains a large video for the current event and small videos for th e past events.
- For all videos year and place of the corresponding event can be described.
- Videos can be uploaded.
- Videos can be removed.
- Videos can be arranged by year (automatically or manual).
*It is allowed to add the code for the video gallery directly into the post page.
Download Juga: Pedoman LKS SMK Ke-26 Tahun 2018Langsung aja ya sob, pada Front Endnya seperti ini
Front End
On the front-end there will be some functionality that is required by “Bani Yas”.
Create a front-end website for this company. Create all the functionalities for the page with communication with the backend web services API.
Link Download:
Sumber http://www.arsipguru.web.id/
