Soal Lks Smk Web Design 2018
Soal LKS Sekolah Menengah kejuruan Web Design 2018. Pada kesempatan ini kami akan membagikan file Soal LKS Sekolah Menengah kejuruan Bidang Lomba Web Design (Desain Web) Tahun 2018. Pada tahun 2018 ini Lomba LKS Sekolah Menengah kejuruan 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 LKS kali ini. Maka dari itu, sebagai materi mencar ilmu di rumah Anda bisa eksklusif mengunduh file Soal LKS Sekolah Menengah kejuruan 2018 Bidang Web Design ini dan eksklusif mengerjakannya di rumah. Apabil ada sesuatu hal yang tidak bisa dikerjakan dirumah, anda bisa minta tolong ke guru pembimbing di Sekolah Menengah kejuruan yang mahir mengenai Desain web.
Web Design and Development meliputi aneka macam keterampilan dan disiplin dalam produksi dan pemeliharaan situs web. Keterampilan yang diharapkan developer web sangat beragam, seringkali sulit bagi developer untuk unggul dalam semua aspek. Akibatnya, tim sanggup mengikuti proses desain web, dengan setiap anggota tim mempunyai kekuatan, spesialisasi, dan tugas masing-masing dalam proses pengembangan.
Web Design melibatkan penerapan solusi spesifik yang mengikuti hukum dan tujuan bisnis yang dideskripsikan oleh klien. Web Designer menyebarkan kekerabatan profesional dengan klien mereka, berinteraksi untuk menyebarkan pemahaman mendalam perihal 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 dapat dipercaya klien awal untuk Web Designer.
Setelah menuntaskan perencanaan dan perancangan situs web, Web Designer kemudian mengintegrasikan situs web dengan alat dan platform pihak ketiga. Selama proses pengembangan web designermenerapkan desain, memakai keterampilan pemrograman mereka untuk membuat fungsionalitas dinamis, tes, dan debug situs web dengan memakai aneka macam perangkat. Tren dikala ini ialah untuk juga mengintegrasikan situs web dengan media umum 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 mempunyai banyak kesempatan kerja. Ini bisa berkisar dari menjadi freelancer atau pengusaha, dipekerjakan oleh distributor iklan dan perusahaan pengembangan web serta aneka macam jenis organisasi lainnya. Posisi Web Designer mungkin luas dalam lingkup atau spesialisasi di bidang menyerupai desain grafis untuk Web, desain antarmuka pengguna, desain pengalaman pengguna digital, pengembangan front end, pengembangan back end, pengembang sistem administrasi konten serta administrasi klien dan proyek. Peran apa pun yang dipilih oleh Perancang Web untuk mengambil spesialisasi di dalamnya, mereka memerlukan jalan masuk ke akomodasi TIK, perpustakaan sumber terbuka, dan kerangka kerja.
Perancang Web berperforma tinggi mungkin mempunyai keahlian web-related yang luas atau khusus. Mereka harus memahami nilai artistik, mempunyai kemampuan mendesain antarmuka pengguna yang solid, keterampilan pemrograman, dan bertanggung jawab secara pribadi alasannya selalu berada di garis depan tren dan teknologi web. Mereka juga harus responsif terhadap klien dan mempunyai 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 isu perihal standar yang diharapkan untuk bersaing dalam kompetisi keterampilan ini,dan prinsip penilaian, metode, dan mekanisme yang mengatur persaingan. Setiap jago dan kompetitor harus mengetahui dan memahami Deskripsi Teknis ini.
Proyek Uji LKS
Ketentuan Umum
Tujuan dari Proyek Uji ialah untuk menunjukkan kesempatan penuh dan seimbang untuk evaluasi 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 perihal hukum dan peraturan WorldSkills.
Deskripsi Teknis ini akan mencatat setiap duduk perkara yang mempengaruhi kapasitas Test Project untuk mendukung penuh aneka macam evaluasi 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 memakai Adobe
Photoshop CS6 / CC.
• Membuat icon atau aset-aset yang diharapkan dengan memakai Adobe Photoshop CS6 / CC atau Adobe Illustrator CS6 / CC.
• Membuat halaman website dengan memakai HTML5 dan CSS3 sesuai dengan standar W3C yang sanggup diverifikasi lewat validator milik w3.org.
• Membuat desain halaman website yang responsif dengan memakai grid system dan CSS3.
• Membuat animasi dengan memakai CSS3 dan Javascript.
• Membuat website interaktif dengan memakai 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 memakai fitur canvas di HTML5.
• Mendeteksi input melalui keyboard dan pointer mouse dengan memakai Javascript.
• Menampilkan dan menganimasikan gambar maupun sprite dalam canvas HTML5 memakai Javascript.
• Mendeteksi ukiran yang terjadi antar objek dalam canvas.
• Memainkan bunyi musik latar maupun imbas bunyi dengan memakai Javascript.
• Mengirim dan menampilkan data ke API yang sudah disiapkan memakai fitur AJAX pada javascript.
c. Server Side
• Membuat backend API sebuah website memakai salah satu dari framework PHP berikut: Laravel atau Yii
• Membuat API sesuai dengan input dan format yang diberikan.
• Menggunakan Postman untuk melaksanakan pengecekan terhadap API yang dibuat.
• Membuat Frontend yang mendapatkan dan mengirim data ke API dengan memakai salah satu JS Framework berikut: ReactJS, AngularJS atau VueJS
• Menghubungkan Backend API dengan beberapa komponen HTML5 di Frontend menyerupai Canvas, Form dan Komponen Halaman Website lainnya.
Langsung aja pada soalnya ya sob.... isu 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 sasaran 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 hidangan 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 hidangan 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 hidangan 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 Sekolah Menengah kejuruan Ke-26 Tahun 2018Langsung aja ya sob, pada Front Endnya menyerupai 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:
