Kriteria modul pembelajaran untuk membuat website bisnis

14 programmer web dapat menguji aplikasi web yang dikembangkan dan mempresentasikannya ke pihak lain secara langsung dari komputer, tanpa perlu terkoneksi ke internet. XAMPP juga dilengkapi fitur manajemen database PHPMyAdmin seperti pada server hosting sungguhan, sehingga pengembang web dapat mengembangkan aplikasi web berbasis database secara mudah. Gambar 3.4 : Tampilan aplikasi XAMPP Control Panel

3.4 Kriteria modul pembelajaran untuk membuat website bisnis

Sebelum membuat modul pembelajaran, diperlukan perumusan kriteria bahan ajar yang akan digunakan dimulai dari jumlah, judul modul, pokok materi dan tujuan pembelajaran dalam tiap modul. Berikut merupakan kriteria tersebut : 3.4.1. Modul I : HTML No. Judul Modul Pokok Materi Tujuan Pembelajaran 1. Dasar HTML dan Desain Web - Bahasa HTML - Struktur script HTML - List Linebreak - Heading - Anchor 1. Membuat halaman web dengan text editor. 2. Menggunakan Sublime Text 2 sebagai text editor script HTML 3. Menggunakan berbagai tag pemformatan teks dalam script HTML 5 4. Menggunakan tag list dan linebreak 5. Menganalisa struktur halaman HTML 6. Menggunakan tag heading 7. Menggunakan anchor 15 3.4.2. Modul II : CSS No. Judul Modul Pokok Materi Tujuan Pembelajaran 1. Pengenalan CSS - Definisi Fungsi CSS - Sejarah CSS - Konsep Hirarki CSS - Menerapkan CSS 1. Memahami CSS sebagai bahasa yang digunakan dalam membuat tampilan halaman web. 2. Mengetahui sejarah pengembangan CSS dalam kaitannya dengan HTML. 3. Memahami konsep dasar penerapan CSS ke dalam halaman web. 4. Menerapkan CSS untuk membuat style dalam 1 halaman. 2. Selector - Tipe Selector - Perbedaan tipe selector - Grouping script CSS - Combinatory selector - Attribute selector - Pseudo classes 1. Memahami selector beserta tipe- tipe selector 2. Memahami perbedaan selector pada ID dan Class 3. menggunakan teknik Grouping pada CSS untuk efisiensi script 4. Memahami penggunaan combinatory selector 5. Memahami penggunaan attribute- selectors 6. Memahami penggunaan pseudo- classes 3. CSS Box Models - Konsep CSS Box Models - Box models properti - Floating element’s concepts - CSS Positioning 1. Memahami konsep box-model pada CSS, serta mampu menerapkan padding, margin, dan border dalam property. 2. Memahami property yang digunakan untuk mengatur ukuran box, seperti width, height, display, visibility, dan overflow. 3. Memahami konsep floating- elemen untuk membuah layout sederhana, dengan menggunakan property float, clear dan clearfix. 4. Memahami berbagai positioning- property dalam CSS, untuk mengatur posisi suatu elemen. 4. Background and border - Property Border and Background - Property Box shadow 1. Memahami property border dan background dalam suatu elemen CSS 2. Memahami property border- radius untuk membuat border menjadi circular dalam elemen CSS 3. Memahami property box-shadows dalam CSS 16 4. Memahami property image- background tingkat lanjut untuk membuat tampilan full-image- background 5. Web Typography - Tipografi dalam web - Responsive text - Menambahkan tipografi 1. Memahami pemilihan typography dalam desain web dengan baik. 2. Mampu meningkatkan tampilan desain web dengan menggunakan typography. 3. Mampu membuat responsive text dalam typography halaman web dan memahami vertical rhythm 4. Mampu memakai berbagai jenis web-font untuk di terapkan ke dalam artikel halaman web. 6. CSS Gradient - Linear Gradient - Radial Gradient - Transparent Gradient - Repeat Gradient 1. Mampu memahami penggunaan property linear gradient dalam membuat background suatu elemen 2. Mampu memahami penggunaan property radial gradient dalam membuat background suatu elemen 3. Mampu memahami penggunaan property transparent-gradient dalam membuat kombinasi background suatu elemen 4. Mampu memahami penggunaan property repeat-gradient dalam membuat kombinasi dari berbagai gradient. 7. Flex-box Multi- column layout - Flexbox - Multi-column layout 1. Mampu memahami fungsi flex- box dan berbagai propertynya. 2. Mampu membuat layout web sederhana dengan menggunakan property flexbox 3. Mampu memahami property multi-column layout. 4. Mampu membuat layout tampilan responsive dengan menggunakan property flex-box dan multi column layout. 17 3.4.3. Modul III : Front-end web development No. Judul Modul Pokok Materi Tujuan Pembelajaran 1. Menulis script HTML sebuah landing page - Desain web - Landing Page - Boostrap - Scripting HTML 1. Memahami struktur sebuah landing page 2. Menerapkan Grid System menggunakan bootsrap v.3.1.1 untuk teknik layouting 3. Menulis script HTML untuk setiap section HTML. 2. Sprites Slice Image - Sprites images - Slice image - Retina Display 1. Menggunakan gambar dari desain photoshop untuk sebuah landing page. 2. Membuat Sprites Image dalam photoshop 3. Melakukan Slice-image di dalam CSS 4. Melakukan konfigurasi gambar untuk tampilan retina display retina ready 3. Stylist halaman landing page - Reset style - Typography - Less Variable - General Style - Stylist halaman web 1. Melakukan reset-style dalam sebuah stylesheet default. 2. Melakukan stylist halaman HTML yang berkaitan dengan typography. 3. Membuat Less Variable dalam sebuah stylesheet. 4. Membuat General Styles untuk sebuah landing page 5. Membuat stylesheet elemen HTML untuk berbagai bagian dalam sebuah landing page 4. Front-end Web Development - Javascript - Jquery - Responsive Layout 1. Membuat slideshow dalam sebuah landing page dengan menggunakan jquery. 2. Menggunakan beberapa plugin tambahan untuk memaksimalkan tampilan 3. Membuat desain layout responsive untuk berbagai ukuran layar dan browser. 18 3.4.4. Modul IV : Konversi static pages ke dalam wordpress No. Judul Modul Pokok Materi Tujuan Pembelajaran 1. Instalasi Konfigurasi Wordpress - Instalasi Wordpress - Pages Post - Custom Post Type Fields 1. Mengkonfigurasi Server Lokal dan Instalasi wordpress 2. Menambahkan Pages Post di dalam Wordpress 3. Membuat Custom post Type Fileds di dalam wordpress 4. Membuat Advanced Custom fields 5. Menambahkan Custom post type fields 6. Mengaplikasikan Custom Post Type Fields 2. Wordpress template themes - HTML Prototype - Wordpress Template - Wordpress theme - Custom Wordpress theme 1. Memahami HTML Prototype 2. Memahami struktur Wordpress templates 3. Mengkonfigurasi theme di dalam wordpress 4. Membuat header-footer file 5. Menambahkan style.css dan screenshot templates 6. Mengaktifkan custom-wordpress- theme 3. Konfigurasi halaman wordpress - Variables, tags, and functions - Wordpress Loop - Permalink - Custom post and fields 1. Memahami variables, tags dan functions di dalam wordpress 2. Membuat wordpress loop 3. Mengkonfigurasi permalink 4. Membuat menu yang dinamis 5. Menampilkan custom-post and fields di dalam template 4. CSS Javascript dalam wordpress - Title Meta tags - CSS - Javascript - Flexslider 1. Menambahkan title meta tags di dalam template wordpress 2. Menautkan CSS ke dalam wordpress template 3. Menambahkan flexslider ke dalam wordpress template 4. Menambahkan javascript ke dalam wordpress template 5. Konversi template wordpress - Konversi template - Blog Category - Custom post type details - Custom post type list 1. Membuat script header footer di dalam wordpress 2. Mengkonversi template pages 3. Mengkonversi halaman blog post ke dalam wordpress template 4. Membuat blog category 5. Mengkonversi custom post type list di dalam template 6. Mengkonversi custom post type details ke dalam template 19 6. Konten widgets wordpress - Konten wordpress - widgets 1. Menambahkan konten testimonials dengan teknik dinamis. 2. Menambahkan konten dinamis pada front-page.php 3. Menambahkan widgets ke dalam wordpress template 7. Plugin Form - Plugin - Form 1. Menambahkan beberapa plugins untuk contact form 2. Menambahkan simple form 3. Menambahkan gravity form 4. Mengkonfigurasi gravity form 8. Konfigurasi live server - Live server - SEO - Wordpress performace - User role 1. Memindahkan wordpress ke dalam live server 2. Meningkatkan SEO halaman wordpress 3. Meningkatkan performance halaman wordpress 4. Menambahkan user-role di dalam wordpress 3.4.5. Modul V : Search Engine Optimation SEO No. Judul Modul Pokok Materi Tujuan Pembelajaran 1. Pengenalan SEO - Search engine Optimation - Sejarah mesin pencari - Prinsip Kerja SEO - Kegunaan SEO - Hasil pencarian berbayar - Black hat SEO 1. Memahami pengertian SEO 2. Mengetahui sejarah mesin pencari 3. Mengetahui prinsip kerja SEO 4. Mengetahui kegunaan SEO 5. Memahami hasil pencarian berbayar 6. Memahami teknik Black hat SEO 2. Meningkatkan SEO melalui konten - Konten informasi - Keyword - Variety and Freshness - Link - Quality content 1. Mampu meningkatkan SEO melalui konten 2. Menggunakan keyword 3. Memahami konsep variety and freshness dalam SEO 4. Menggunakan link 5. Memahami Quality content dalam SEO 3. Meningkatkan SEO melalui koding - Koding - Title tag - Meta data - Site architecture - Cononicalization - Page Structure - Noindex and no follow 1. Mampu meningkatkan SEO melalui koding 2. Menggunakan Title tag 3. Menggunakan Meta data 4. Mengetahui site architecture 5. Memahami konsep canonicalization dalam SEO 6. Memahami page structure 7. Memahami teknik no index and no follow dalam SEO 20 4. Meningkatkan SEO melalui tools - Google webmaster and ananlytics - Authorship and places - Opengraph and twitter cards - Website speed - SEO tools and analytics - Ensuring SEO success in the future 1. Menggunakan Google webmaster and analytics sebagai tools SEO 2. Memahami prinsip athorship and places dalam SEO 3. Membuat opengraph and twitter cards untuk meningkatkan SEO 4. Memahami konsep website speed dalam SEO 5. Memahami berbagai SEO tools and analytics 6. Mengetahui konsep ensuring SEO success in the future

3.5 Perancangan modul pembelajaran