Modul Membuat Website Toko Online

Disusun Oleh: MODUL Gandhi Ermasari MEMBUAT WEBSITE TOKO ONLINE untuk kelas XI/XII SMK Kompetensi Keahlian Multimedia

Modul Membuat Website Toko Online untuk kelas XI/XII SMK Kompetensi Keahlian Multimedia disusun oleh: Gandhi Ermasari

KATA PENGANTAR Puji syukur kami panjatkan ke hadirat Ida Sang Hyang Widhi Wasa, Tuhan Yang Maha Esa, yang telah memberikan anugerah-Nya, sehingga kami mampu menyelesaikan penyusunan modul pembelajaran “Membuat Website Toko Online” untuk kelas XI/XII SMK Kompetensi Keahlian Multimedia ini. Modul ini secara umum disusun untuk menfasilitasi peserta didik dalam mempelajari tentang pengoperasian aplikasi pembuatan website, cara menambahkan unsur-unsur Multimedia dalam sajian Website serta mengevaluasi produk website. Secara khusus, modul ini diharapkan mampu membantu peserta didik dalam mempelajari dan membuat multimedia interaktif berbasis halaman web, yaitu website toko online. Setiap bab pada modul ini dilengkapi dengan Kompetensi Pembelajaran, Tujuan Tembelajaran, Peta Konsep, Materi Pembelajaran, Lembar Kerja Peserta didik (LKS), Video Tutorial, Rangkuman, Latihan Soal dan Refleksi Diri. Materi dalam modul disusun dengan menggunakan bahasa yang lugas dan mudah dipahami. Besar harapan kami, modul ini mampu menfasilitasi peserta didik dalam meningkatkan pengetahuan dan keterampilannya dalam membuat dan mengevaluasi multimedia interaktif berbasis web, secara khusus dalam perancangan website toko online. Akhirnya, semoga modul ini bermanfaat bagi peserta didik, guru dan seluruh pembaca dalam memperoleh pengetahuan dan keterampilan. Penulis

DAFTAR ISI BAB 1. Pengoperasian Aplikasi Multimedia Interaktif 1 Aplikasi yang diperlukan 3 Instalasi XAMPP 3 Pengenalan Aplikasi Wordpress 6 Prosedur Instalasi Wordpress 7 Fitur Aplikasi Wordpress 10 Tools pada Wordpress 11 BAB 2. Penggabungan Media dalam Sajian Website 20 Unsur-Unsur Multimedia 21 Menambahkan Teks Pada Sajian Website 24 Menambahkan Teks Pada Sajian Website 25 Menambahkan GambarPada Sajian Website 26 Menambahkan Suara Pada Sajian Website 27 Menambahkan Video/Animasi Pada Sajian Website 25 BAB 3. Review Produk Website 37 Mengukur Mutu Website 38 Kriteria Website yang Baik 39 Kesalahan pada Produk Website 42

BAB 1 Pengoperasian Aplikasi Multimedia Interaktif

Kegiatan pembelajaran pada modul ini menjelaskan fungsi tools aplikasi pembuat web, dalam hal ini adalah wordpress. Uraian pokok pada modul ini adalah fungsi-fungsi tools, penerapan prosedur pengoperasian aplikasi multimedia interaktif berbasis halaman web. Tujuan kurikulum mencakup aspek kompetensi sikap spiritual, sikap sosial, pengetahuan dan keterampilan yang wajib dipahami oleh peserta didik. KOMPETENSI DASAR INDIKATOR PENCAPAIAN KOMPETENSI 3.4. Menerapkan prosedur • Mengidentifikasi fungsi-fungsi tool aplikasi. aplikasi pengoperasian aplikasi • Menerapkan prosedur pengoperasian multimedia interaktif berbasis halaman web. multimedia interaktif berbasis halaman web. 4.4 Mengoperasikan • Mengoperasikan aplikasi multimedia interaktif berbasis aplikasi multimedia halaman web interaktif berbasis halaman web • Menyajikan hasil pengoperasian aplikasi multimedia berbasis halaman web. Setelah mempelajari modul ini, peserta didik diharapkan mampu mengoperasikan fungsi- fungsi tools aplikasi, dan menerapkan prosedur pengoperasian aplikasi multimedia interaktif berbasis web. Peserta didik juga diharapkan dapat menyajikan hasil pengoperasian aplikasi multimedia interaktif berbasis halaman web. Membuat Website Toko Online 2

Aplikasi yang diperlukan Pada bab ini, kalian akan mempelajari tentang aplikasi yang digunakan dalam pembuatan website, terutama pembuatan website secara offline. Aplikasi yang digunakan dalam pembuatan website adalah Wordpress. Untuk membuat website secara offline diperlukan localhost. Localhost merupakan server lokal yang diinstall pada komputer atau laptop. Dengan menggunakan localhost atau server lokal kita bisa membuat website dengan wordpress secara offline. Terdapat beberapa aplikasi yang dapat digunakan sebagai localhost dan pada modul ini yang digunakan adalah XAMPP. Instalasi XAMPP XAMPP merupakan aplikasi cross platform: Apache, MySQL, PHP dan Perl. XAMPP berguna untuk menjalankan script PHP pada localhost atau komputer tanpa harus ada koneksi internet. Tujuannya untuk menjalankan atau melakukan pengetesan sebuah website supaya lebih cepat ketika diakses jika dibandingkan dengan cara online. Localhost, seperti XAMPP lebih aman dan menyediakan lingkungan pengetesan di komputer tanpa adanya resiko script dirusak oleh orang lain. Yang diperlukan sebelum melakukan proses instalasi XAMPP adalah: a. File installer XAMPP (unduh di https://www.apachefriends.org/index.html) b. Komputer dengan sistem operasi windows. Membuat Website Toko Online 3

Prosedur Instalasi XAMPP a. Setelah mengunduh file installer XAMPP, lakukan proses instalasi. Dalam proses instalasi, kalian akan melihat pesan yang menanyakan apakah yakin akan menginstall. Silahkan tekan Yes untuk melanjutkan proses instalasi. Klik tombol Next b. Pada tampilan selanjutnya akan muncul pilihan mengenai komponen mana dari XAMPP yang ingin dan tidak ingin diinstal. Beberapa pilihan seperti Apache dan PHP adalah bagian penting untuk menjalankan website dan akan otomatis diinstal. Silakan centang MySQL dan phpMyAdmin, untuk pilihan lainnya dibiarkan saja. Membuat Website Toko Online 4

c. Selanjutnya pilih folder tujuan dimana XAMPP ingin kalian instal, pada tutorial ini pada direktori C:/xampp. d. Pada halaman selanjutnya, akan ada pilihan apakah ingin menginstal Bitnami untuk XAMPP, dimana nantinya dapat gunakan untuk install WordPress, Drupal, dan Joomla secara otomatis. Tahapan ini dapat dilewati, karena WordPress akan diinstal secara manual. Pada langkah ini proses instalasi XAMPP akan dimulai. Silakan klik tombol Next. e. Tunggulah sampai proses instalasi selesai. Setelah berhasil diinstal, akan muncul notifikasi untuk langsung menjalankan control panel. Silakan klik Finish. Membuat Website Toko Online 5

f. Menjalankan XAMPP Jalankan aplikasi XAMPP kemudian klik tombol Start pada Apache dan MySQL. Jika berhasil dijalankan, Apache dan MySQL akan berwarna hijau seperti gambar di bawah ini. XAMPP siap untuk digunakan. Pengenalan Aplikasi Wordpress WordPress adalah sistem manajemen konten atau CMS yang dipakai oleh digunakan sekitar 30% dari website yang ada. WordPress dipilih karena merupakan aplikasi web untuk mengatur, mengelola website, dan penerbitan konten bagi para penulis, owner, editor ataupun author dengan mudah tanpa memerlukan penguasaan bahasa program ataupun istilah teknis. WordPress memiliki interface yang mudah diakses, mudah digunakan, dan intuitif. Pengetahuan dasar yang butuhkan adalah Microsoft Word karena pada dasarnya WordPress digunakan untuk membuat dan menerbitkan konten. WordPress menggunakan bahasa pemograman PHP dan MySQL yang didukung oleh sebagian besar penyedia web hosting. WordPress juga dapat dibuat dan digunakan oleh siapapun karena bersifat open-source dimana semua orang yang ada di dunia dapat membuat situs WordPressnya sendiri dengan mudah. Hal ini dikarenakan para pengembang WordPress, ingin membantu instalasi website yang mudah, dapat digunakan oleh semua orang, dan memiliki banyak fitur yang dapat membantu. WordPress memiliki fungsi dan kaya akan fitur sehingga dapat digunakan untuk berbagai kebutuhan seperti blog, yang merupakan tujuan utama dari pembuatan WordPress. Selain itu, WordPress juga dapat digunakan untuk situs bisnis yang kecil dan sederhana, portofolio dari para seniman, fotografer, penulis untuk memamerkan karya-karyanya bahkan toko online. Beberapa penjual e-commerce juga menggunakan WordPress untuk menjual produk-produknya karena pembuatan websitenya sangat mudah dan cepat. Biasanya untuk Membuat Website Toko Online 6

membuat toko online, dapat menggunakan woocommerce, yang merupakan plugin ecommerce dengan fitur-fitur seperti shopping cart, checkout, one-click refund, dan lain-lain. Prosedur Instalasi Wordpress Untuk melakukan proses instalasi WordPress di Localhost menggunakan XAMPP dapat dilakukan dengan melakukan tiga langkah berikut ini: 1. Membuat Database Untuk membuat data base, bukalah dan aktifkan aplikasi XAMPP, kemudian akses link berikut http://localhost/phpmyadmin. klik pada tab Databases, kemudian masukan nama database pada bagian kolom Create database. Pada tutorial ini kalian akan membuat database dengan nama WP. Setelah itu silakan tekan tombol Create. 2. Mengunduh Wordpress dan mengelola database File installer Wordpress dapat diunduh pada: https://wordpress.org/. Salinlah file instalasi WordPress ke dalam folder htdocs, C:\\xampp\\htdocs. Agar proses instalasi wordpress dapat berjalan dengan baik, ekstrak file wordpress dengan menggunakan winrar. Setelah file di ekstrak, rename folder wordPress sesuai keinginan. Pada tutorial ini, nama file wordpress diubah menjadi wp. Membuat Website Toko Online 7

3. Melakukan Instalasi Wordpress Setelah langkah diatas, lakukan proses instalasi WordPress. Buka browser (misalnya: Chorme), kemudian ketikkan URL http://localhost/namafilewordpress. Karena sebelumnya nama folder yang digunakan adalah wp, maka URL yang digunakan adalah http://localhost/wp/. Tampilan yang muncul adalah sebagai berikut. Pilihlah bahasa yang inginkan. Pada tutorial ini dipilih menggunakan bahasa Indonesia. Setelah selesai memilih bahasa, tekan tombol Continue. Langkah selanjutnya, silakan masukkan detail berikut ini. • Database Name: diisi dengan nama database, pada tutorial ini diisi dengan WP. • Username: diisi dengan root. • Password: dikosongkan. • Kemudian klik tombol Submit. Membuat Website Toko Online 8

Kemudian klik tombol Run the install, seperti yang terlihat pada gambar di bawah ini. Kemudian masukkan detail mengenai web WordPress yang dibuat, dan klik tombol Submit. • Site Title: Nama website (sesuai dengan rancangan yang telah dibuat) • Username: username yang akan digunakan untuk login ke dashboard WordPress • Password: password yang akan digunakan untuk login ke dashboard WordPress • Email: alamat email aktif Kalian. Membuat Website Toko Online 9

Jika proses instalasi sudah berhasil, Kalian akan melihat tampilan seperti gambar di bawah ini. Kalian dapat login ke dashboard WordPress dengan cara klik tombol Login dan masukkan username dan password yang dibuat sebelumnya. Sampai pada langkah ini, proses instalasi telah selesai. Fitur Aplikasi Wordpress Halaman Awal/ Dasboard Wordpress Halaman awal adalah tampilan pertama kali yang tampil ketika mengakses Wordpress. Cara mengakses halaman awal wordpress adalah dengan mengetikkan URL: http://localhost/wp- admin. Masukkan username dan password yang telah dibuat sebelumnya. Berikut tampilan halaman awal atau dashboard wordpress ketika pertama kali dibuka. Membuat Website Toko Online 10

1. Pada bagian welcome menu menyediakan beberapa tautan berguna seperti membuat entri blog, membuat halaman dan melihat bagian depan dari website. Kolom terakhir berisi link ke widget, menu, setting yang berhubungan dengan komentar dan juga link ke Langkah Pertama Dengan halaman WordPress di kode WordPres 2. Quick Draft adalah editor posting mini yang memungkinkan penulisan, penyimpanan dan penerbitan sebuah pos dari panel admin. Ini termasuk judul untuk draft, beberapa catatan tentang draft dan menyimpannya sebagai Draft. 3. WordPress News menampilkan berita terbaru seperti versi perangkat lunak terbaru, memperbarui, waspada, berita mengenai perangkat lunak dan lain sebagainya dari blog resmi Wordpress 4. At Glare, memberikan gambaran tentang posting blog Anda, jumlah posting dan halaman yang diterbitkan, dan jumlah komentar. 5. Aktivitas dapat mencakup komentar terbaru pada website, posting terakhir dan posting yang baru diterbitkan Tools pada Wordpress 1. Dashboard Menu ini merupakan halaman utama WP Admin wordpress. Terdiri dari submenu Beranda dan Pembaruan. Beranda menampilkan beberapa wedget status atau informasi, baik bawaan wordpress atau dari plugin. Pembaruan merupakan halaman informasi update wordpress, plugin atau tema. Membuat Website Toko Online 11

2. Pos (Posts) Pos merupakan menu khusus untuk postingan, kategori dan tag. Bagian ini memiliki submenu yaitu Semua Pos, Tambah Baru, Kategori dan Tag. • Submenu Semua Pos merupakan submenu untuk menampilkan daftar keseluruhan postingan. Melalui submenu ini Kalian bisa melihat, mengedit ataupun menghapus postingan. • Submenu Tambah Baru berfungsi untuk membuat postingan baru. • Kategori merupakan submenu yang berfungsi melihat daftar kategori, membuat kategori baru, mengedit atau menghapus kategori yang ada. • Tag berfungsi untuk menampilkan daftar tag, membuat, mengedit dan menghapus tag. 3. Media Media merupakan menu yang berfungsi untuk mengelola berkas atau file, baik itu berupa gambar, atau video. Submenu yang ada pada menu ini yaitu Pustaka dan Tambah Baru. • Submenu Pustaka berfungsi untuk menampilkan semua media yang ada. Pada bagian ini Kalian bisa mengedit atau menghapusnya. • Submenu Tambah Baru berfungsi untuk menambah media baru dari luar blog. Membuat Website Toko Online 12

4. Laman (Pages) Menu laman ini sebenarnya mirip dengan pos. Namun, laman khusus untuk halaman statis seperti kontak, disclaimer dan lainnya. Pada bagian ini memiliki submenu yaitu Semua Laman dan Tambah Baru. • Submenu Semua Laman berfungsi untuk melihat seluruh daftar laman, mengedit dan menghapusnya. • Submenu Tambah Baru berfungsi untuk membuat laman baru. 5. Komentar (Comments) Menu Komentar berfungsi untuk menampilkan semua komentar blog. Baik komentar yang sudah disetujui atau belum, semuanya ada di halaman ini 6. Tampilan (Appearance) Menu Tampilan berfungsi untuk medifikasi tampilan blog. Pada bagian ini tersedia beberapa submenu penting yang perlu diketahui yaitu Tema, Sesuaikan, Wedget dan Menu. Membuat Website Toko Online 13

• Submenu Tema berfungsi untuk mengatur tema. Bisa untuk mengganti tema atau menghapus tema yang tidak dipakai. • Submenu Sesuaikan merupakan fungsi baru pada wordpress dimana Kalian bisa mengotak-atik tampilan tema tanpa perlu tahu kode. • Submenu Wedget berfungsi untuk mengatur tampilan sidebar. • Submenu Menu berfungsi untuk mengatur atau menata menu sesuai keinginan. • Submenu yang lain dapat diabaikan. 7. Plugin Menu ini berfungsi untuk mengatur plugin yang ada atau menambah baru. Terdisi dari submenu plugin terpasang, tambah baru dan penyunting. • Submenu Plugin Terpasang berfungsi menampilkan plugin yang sudah diinstall baik yang sedang aktif atau yang masih non aktif. Pada halaman ini Kalian bisa menghapus plugin yang tidak digunakan, menonaktifkan yang tidak diperlukan dan sebagainya. • Submenu berfungsi untuk menambah plugin baru. Bisa secara online atau menambah lugin yang sudah didownload. • Submenu penyunting, abaikan saja untuk pemula. 8. Pengguna (User) Menu ini berfungsi untuk mengedit profil, melihat semua pengguna dan menambah pengguna baru. Jika hanya saya satu orang penggunanya atau yang mengelola, maka pada bagian ini cukup digunakan untuk mengedit profil saja 9. Perkakas (Tools) Menu ini berfungsi untuk impor dan ekspor blog wordpress. Untuk pemula dapat diabaikan. Membuat Website Toko Online 14

10. Pengaturan (Settings) Menu ini berisi pengaturan yang berhubungan dengan blog. Hati-hati pada bagian ini. Submenunya seperti di bawah ini. • Submenu Umum berfungsi untuk mengedit judul situs, slogan, url, email, tanggal dan lain sebagainya. • Submenu Membaca berfungsi mengatur tampilan berKalian. Bisa ditampilkan halaman statis atau pos-pos baru. Termasuk mengatur jumlah postingan pada halaman berKalian. • Submenu lainnya pada bagian ini abaikan saja. Ikuti yang bawaan wordpress. 11. Persempit Menu (Collapse Menu) Menu ini berfungsi untuk mengecilkan tampilan menu. Dapat dicoba agar dapat mengetahui hasilnya. 1. Dalam memperlajari pembuatan website dapat dilakukan secara offline dengan menggunakan localhost. Salah satu aplikasi Localhost yang dapat digunakan adalah XAMPP. 2. Wordpress merupakan sistem manajemen konten atau CMS yang dapat digunakan dalam pembuatan website. 3. Halaman awal dari Wordpress terdiri dari Welcome menu, Quick Draft, Wordpress News, At Glare, Aktivitas dan Dashboard Menu. Membuat Website Toko Online 15

4. Tools pada Wordpress terdiri atas Dashbooard, Pos, Media, Laman, Komentar, Tampilan, Plugin, Pengguna, Perkakas, Pengaturan dan Persempit Menu. Lembar Kerja Siswa 1. Melakukan Instalasi Tema dan Plugin untuk Website Toko Online Sebelum mengerjakan Lembar Kerja Siswa ini, kumpulkanlah kembali rancangan toko online yang telah kalian buat sebelumnya. Rancangan tersebut meliputi: Data detail dari website toko online, rancangan flowchart dan navigasi, user interface yang telah dibuat dan storyboard. Selain, konten-konten multimedia yang diperlukan juga telah disiapkan. Kegiatan 1. Menginstall xampp Salah satu persiapan yang harus dilakukan sebelum membuat Website Toko Online adalah melakukan instalasi Xampp. Xampp adalah salah satu contoh dari web server. Web server ini nantinya akan berguna untuk menjadi server lokal yang dapat digunakan untuk menjalankan halaman web yang kita buat. Ikuti langkah-langkah berikut ini untuk petunjuk instalasi Xampp. Langkah Keterangan 1 2 Download XAMPP yang sesuai dengan sistem operasi yang gunakan pada link https://www.apachefriends.org/ 3 Install XAMPP yang sudah di download pada langkah-langkah yang telah diuraikan pada modul. Buka browser Anda, ketikkan localhost kemudian jalankan. Catat dan jelaskan apa hasil yang ditampilkan. Lengkapi dengan hasil tangkapan layar (screenshot) setiap langkah yang dilakukan. 1. Apakah terdapat kesulitan dalam proses instalasi xampp? ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… Membuat Website Toko Online 16

Kegiatan 2. Menginstall Wordpress Persiapan yang harus dilakukan sebelum membuat Website Toko Online adalah melakukan instalasi Wordpress. Xampp adalah salah satu contoh dari web server. Web server ini nantinya akan berguna untuk menjadi server lokal yang dapat digunakan untuk menjalankan halaman web yang kita buat. Ikuti langkah-langkah berikut ini untuk petunjuk instalasi Xampp. Langkah Keterangan 1 2 Download Installer aplikasi Wordpress terbaru yang sesuai pada link: wordpress.org 3 Install Wordpress yang sudah di download pada langkah-langkah yang telah diuraikan pada modul. Buka browser Anda, ketikkan localhost/wp-admin, kemudian login. Catat dan jelaskan apa hasil yang ditampilkan. Lengkapi dengan hasil tangkapan layar (screenshot) dari setiap langkah yang dilakukan. Kegiatan 3. Menginstall Tema dan Plugin yang Mendukung Website Toko Online Dalam pembuatan Website toko online menggunakan Wordpress diperlukan tema dan plugin yang mendukung. Pada kegiatan ini, tema yang digunakan adalah tema Shop-Isle dan plugin yang digunakan dalah Woo-Commerce. Ikutilah langkah-langkah berikut untuk petunjuk instalasi Tema dan Plugin tersebut. Langkah Keterangan 1 Download tema dan plugin yang diperlukan pada link: wordpress.org 2 Install Wordpress yang sudah di download pada langkah-langkah yang telah diuraikan melalui Video Tutorial 1. Buka browser Anda, ketikkan localhost/wp-admin, kemudian login. Catat dan 3 jelaskan apa hasil yang ditampilkan setelah melakukan instalasi tema dan plugin. Lengkapi dengan hasil tangkapan layar (screenshot) dari setiap langkah yang dilakukan. 2. Apakah terdapat kesulitan dalam proses instalasi tema dan plugin? ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… Membuat Website Toko Online 17

Video 1. Tutorial Instalasi Tema dan Plugin untuk Website Toko Online 1. Mengapa dalam pembuatan website secara online memerlukan localhost? 2. Sebutkan kelebihan Wordpress sebagai CMS dalam pembuatan website? 3. Jelaskan langkah-langkah proses instalasi tema secara offline pada Wordpress! 4. Apa fungsi plugin pada pembuatan website dengan Wordpress? 5. Jelaskan bagaiman cara mengubah tampilan pada website! Sudahkah kalian memahami materi dalam bab I ini dengan baik? Jika kalian sudah menguasai materi pada bab ini, lakukan evaluasi terhadap pemahamanmu dengan mengerjakan soal- soal Latihan. Namun jika kalian belum melakukan hal tersebut, kalian disarankan untuk berdiskusi dengan beberapa teman dan/atau berkonsultasi dengan guru. Membuat Website Toko Online 18

Tuliskan apa yang kamu Tuliskan manfaat dari apa Tuliskan kesimpulan dari pelajari pada bab ini! yang kamu pelajari pada pembelajaran pada bab ini! bab ini! Membuat Website Toko Online 19

BAB 1 Pengoperasian Aplikasi Multimedia Interaktif

BAB 2 Penggabungan Media dalam Sajian Website

BAB 3 Review Produk Website

Kegiatan pembelajaran pada modul ini menjelaskan tentang unsur-unsur multimedia interaktif berbasis web dan cara untuk menggabungkan image, animasi, audio, video dalam sajian multimedia interaktif berbasis web. Tujuan kurikulum mencakup aspek kompetensi sikap spiritual, sikap sosial, pengetahuan dan keterampilan yang wajib dipahami oleh peserta didik. KOMPETENSI DASAR INDIKATOR PENCAPAIAN KOMPETENSI 3.5 Menerapkan cara • Mengidentifikasi unsur-unsur multimedia interaktif penggabungan image, berbasis web. animasi, audio, dalam sajian multimedia • Memahami cara penggabungan image, animasi, audio, interaktif berbasis video dalam sajian multimedia interaktif berbasis web halaman web. 4.5 Menggabungkan • Menggabungkan unsur-unsur multimedia dalam produk image, animasi, audio, multimedia interaktif dalam sajian multimedia interaktif berbasis • Menyajikan hasil penggabungan unsur-unsur halaman web. multimedia dalam produk media interaktif berbasis web. Setelah mempelajari modul ini, peserta didik diharapkan mampu unsur-unsur multimedia interaktif berbasis web dan cara untuk menggabungkan image, animasi, audio, video dalam sajian multimedia interaktif berbasis web. Peserta didik juga diharapkan dapat membuat menyajikan hasil penggabungan unsur-unsur multimedia dalam produk media interaktif berbasis web. Membuat Website Toko Online 21

Unsur-Unsur Multimedia Multimedia adalah kombinasi dari teks, suara, video, gambar maupun animasi yang kemudian dipersentasikan kepada orang lain atau diolah dan dimanipulasi secara digital. Multimedia memiliki 5 unsur, yaitu: teks, suara, video, audio, gambar dan animasi. 1. Teks Teks adalah unsur dasar dari multimedia yang mewakili dan menjelaskan informasi bagi pengguna. Teks merupakan bagian dari data yang paling sederhana dan tidak membutuhkan tempat penyimpanan yang besar. Hingga saat ini teks masih digunakan untuk menyampaikan informasi. Kata dan simbol dalam bentuk lisan dan tulisan merupakan komunikasi paling umum yang digunakan. Oleh karena itu, teks merupakan elemen yang paling penting dalam menu multimedia, sistem navigasi dan isi. Ilmu yang berkaitan dengan teks disebut tipografi. Penggunaan tipografi dalam sebuah desain harus memperhatikan legibility dan readability. Legibility merupakan kemudahan dalam mengenali dan membedakan masing-masing huruf/karakter, sedangkan readability merupakan tingkat keterbacaan dari teks. Terdapat beberapa hal yang harus diperhatikan dalam menggunakan teks dalam membuat sebuah desain interface Multimedia Interaktif, antara lain sebagai berikut. Membuat Website Toko Online 22

a. Ukuran huruf Ukuran huruf menggunakan satuan point (pt). Besar kecilnya huruf tergantung pada tingkatan. Umumnya judul menggunakan ukuran huruf yang lebih besar daripada teks yang lainnya. Ukuran huruf pada body text tergantung dari target pembacanya. b. Tingkatan tipografi Umumnya pada bagian tengah adalah bagian utama yang terlebih dahulu dilihat oleh pembaca, maka judul dibuat besar pada bagian ini dengan sub judul yang lebih kecil. c. Jumlah jenis huruf yang digunakan Penggunaan jenis huruf jangan terlalu banyak, maksimal menggunakan tiga jenis huruf. Pilih huruf yang kontras, jangan menggunakan jenis huruf yang hamper sama. d. Variasi huruf Kombinasikan tebal (bold), tipis (light), ramping (condensed) dan miring (italic) dan lebar (expanded). Huruf tebal memberikan kesan tegas dan dominan, sehingga cocok digunakan untuk judul. Huruf miring memberikan kesan dinamis dan ramah, sedangkan huruf tipis membeikan kesan modern. e. Penggunaan warna Pastikan warna background dan tulisan memiliki kekontrasan yang baik, agar tulisan dapat terbaca dengan baik. Background dengan warna muda dan teks dengan warna tua akan lebih mudah dibaca daripada background dengan warna tua dan teks warna muda. f. Pengaturan spasi baris dan spasi huruf Atur leading (jarak antar baris dalam teks) yang sesuai tidak terlalu lepat dan terlalu renggang agar tulisan mudah dibaca. g. Panjang baris teks Mata manusia akan cepat Lelah jika membaca teks yang terlalu panjang. Idealnya 50-60 huruf pada satru baris tetapi dapat disesuaikan dengan kebutuhan desain. Jika harus memecah kalimat, maka ikutilah alur dari kalimat tersebut, sehingga mudah untuk dibaca kesinambungan kalimatnya. h. Penataan baris Untuk menghasilkan kenyamanan dalam membaca, maka dapat digunakan alignment seperti rata kiri, rata kanan, rata kiri-kanan, dan rata tengah. Membuat Website Toko Online 23

2. Gambar Gambar merupakan media yang baik dalam menyampaikan informasi. Gambar menjadi unsur penting dalam multimedia yang membuat informasi menjadi lebih efektif dan menarik. Gambar dapat dibagi menjadi dua yaitu gambar bitmap dan vector. Gambar bitmap merupakan gambar foto realistic dan gambar kompleks. Contohnya adalah hasil fotografi berupa foto atau tangkapn video. Adapun gambar vector digunakan untuk garis, kotak, lingkaran, polygon, dan bentuk grafis lainnya. 3. Suara Suara dapat dibagi menjadi tiga kategori yaitu: percakapan, musik dan efek suara. Percakapan berupa suara orang berbicara, musik berupa suara yang dihasilkan dari alat musik baik dalam bentuk akustik maupun elektronik, serta synthezier. Efek suara contohnya suara gelas jatuh, suara hujan dan yang lainnya. Format suara dapat berupa .wma; .mp3; .aac dan lain sebagainya. 4. Video Video merupakan kombinasi dari unsur-unsur multimedia dan menggabungkan semua unsur tersebut untuk menyampaikan informasi. Video sebenarnya ialah suatu animasi yang diambil dari kamera video dan disimpan dalam bentuk file. Terdapat beberapa format video, antara lain: a. NTSC (National Television Standar Committee); b. PAL (Phase Alternate Line); c. SECAM (Sequential Colour dan Memory System); d. HDTV (High Definition TV). 5. Animasi Animasi adalah proses membuat gambar yang diam menjadi terlihat bergerak. Animasi adalah sekumpulan obyek visual yang terus mengalami perubahan dari waktu ke waktu yang dapat menghasilkan presentasi yang lebih hidup. Membuat Website Toko Online 24

Menggabungkan Unsur-Unsur Multimedia ke Sajian Website 1. Menambahkan Teks ke Sajian Website menggunakan aplikasi Wordpress Untuk menambahkan tulisan baru, ada beberapa opsi: a. Pada menu di bagian atas klik ‘New’ pilih Post b. Area ditampilkan dalam bentuk Visual Editting mode artinya kita dapat menambahkan atau mengedit tulisan di blog langsung tanpa harus menggunakan kode HTML. Beberapa fungsi tombol yang terdapat dalam VEM hampir sama dengan fungsi pada Microsoft Word. Pengaturan Teks yang tersedia meliputi • Bold: Menebalkan teks. • Italics: Memiringkan teks. • Strikethrough: Meletakkan garis sepanjang teks. Membuat Website Toko Online 25

• Unordered List: Membuat teks berurut berdasarkan simbol. • Ordered List: Membuat teks berurut berdasarkan angka. • Blockquote: Menyisipkan kutipan kalimat. • Align Left: Rata kiri. • Align Center: Rata tengah. • Align Right: Rata kanan • Insert/Edit Link: Membuat hyperlink pada teks yang dipilih. • Unlink: Menghilangkan hyperlink dari teks yang dipilih. • Insert More Tag: Membagi tulisan pada blog, saat tulisan diterbitkan maka pada tulisan kita akan muncul link ‘Read More’. Cocok digunakan pada tulisan yang panjang. • Toggle Spellchecker: Mengecek kebenaran kata, terdapat beberapa Bahasa yang bisa dipilih, klik tanda panah di bagian kanan. • Toggle Full Screen Mode: Tampilan dalam bentuk full screen, untuk mengembalikan ke tampilan semula klik ‘Exit fullscreen’. • Show/Hide Kitchen Sink: Menampilkan format menu baru, memberikan pilihan untuk menggaris bawahi teks, rata kiri kanan,warna huruf, karakter khusus, undo dan redo, dll. WordPress memiliki fitur autosave yang menyimpan pekerjaan saat sedang mengetik dan mengedit posting baru. Jika browser mengalami crash, atau menutup jendela browser sebelum menyimpan posting, akan disimpan sebagai draf. Untuk menerbitkan tulisan terbaru, klik tombol ‘Publish’. Untuk menerbitkan tulisan sebelumnya yang telah diedit, klik tombol ‘Update’. 2. Menambahkan Image/Gambar ke Sajian Website menggunakan aplikasi Wordpress Klik pada teks di mana Anda ingin menambahkan konten gambar atau media lain tersebut dan klik pada tombol Add Media di bagian kiri atas menu editor. Pada contoh ini akan memasukkan gambar dan menempatkan gambar sebelum paragraf utama. Membuat Website Toko Online 26

Insert Media pop-up akan muncul, kemudian Klik tombol Select file untuk mengambil file yang akan diupload pada komputer, atau dapat juga menyeret gambar yang akan diupload dan letakkan pada area tersebut, maka otomatis gambar tersebut akan terupload. 3. Menambahkan Suara ke Sajian Website menggunakan aplikasi Wordpress File audio yang ditambahkan dapat berupa musik atau rekaman suara. Jika ingin menambahkan audio untuk publikasi di blog. Berikut adalah langkah-langkah yang harus dilakukan dalam WordPress (hampir sama dengan menambahkan video): a. Klik tombol Select Files. Kemudian sebuah Open dialog box akan terbuka. Pilih audio dari file komputer. Klik tombol Open atau double click pada file audio tersebut. b. WordPress akan menampilkan progress bar selama mengunggah file audio kita. c. Ketikkan judul dari audio pada Title text box, caption pada Caption text box, dan deskripsi dari audio pada description text box. d. Klik tombol Insert into Post. 4. Menambahkan Video/Animasi ke Sajian Website menggunakan aplikasi Wordpress Jika ingin menambahkan video karya sendiri untuk publikasi atau video dari Youtube. Berikut adalah langkah-langkah yang harus dilakukan dalam WordPress: a. Menambahkan video dari internet Jika menambahkan dari internet misalnya youtube, ikuti langkah berikut: • Ketikkan URL (alamat internet) dari video pada Video URL textbox. Biasanya situs yang membagikan videonya sevara gratis sudah menyediakan URL yang bisa di copy-paste. • (Optional) Ketikkan judul dari video pada Title text box. Membuat Website Toko Online 27

Klik tombol Insert into Post. b. Menambahkan video dari komputer Jika ingin mengunggah video dari komputer sendiri, adapun langkah yang harus dilakukan adalah: • Klik tombol Select Files. Maka sebuah Open dialog box akan terbuka. Pilih video dari file di komputer. Klik tombol Open atau double click file video tersebut. • WordPress akan menampilkan progress bar selama mengunggah video kita. • Ketikkan judul dari video pada Title text box, caption pada Caption text box, dan deskripsi dari video pada Description text box. • Klik tombol Insert into Post. Membuat Website Toko Online 28

1. Multimedia memiliki 5 unsur, yaitu: teks, suara, video, audio, gambar dan animasi. 2. Pada wordpress dapat menambahkan unsur-unsur multimedia berupa teks, suara, video, audio, gambar dan animasi pada postingan yang akan diunggah. 3. Cara menambahkan audio, animasi dan video dapat diunggah secara online dengan menggunakan link maupun diunggah langsung dari komputer. Lembar Kerja Siswa 2. Melakukan Penambahan Produk dan Deskripsi Produk Sebelum mengerjakan Lembar Kerja Siswa ini, kumpulkanlah kembali rancangan toko online yang telah kalian buat sebelumnya. Rancangan tersebut meliputi: Data detail dari website toko online, rancangan flowchart dan navigasi, user interface yang telah dibuat dan storyboard. Selain, konten-konten multimedia yang diperlukan juga telah disiapkan. Kegiatan 1. Menambahkan Produk dan Deskripsi Produk pada Website Salah satu aspek penting dalam membuat toko online adalah menambahkan produk dan deskripsi produk. Ikutilah langkah-langkah berikut ini untuk menambahkan produk dan deskripsi produk sesuai dengan video 2. Langkah Keterangan 1 Login ke Wordpress, melalui link berikut: http://localhost/wp-admin Pada dashboard, terdapat 2 menu tambahan ketika woo commerce di install, 2 yaitu woocommerce dan produk. Untuk menambahkan produk, klik menu “produk”. 3 Catat dan jelaskan apa hasil yang ditampilkan. Lengkapi dengan hasil tangkapan layar (screenshot) setiap langkah yang dilakukan. Membuat Website Toko Online 29

1. Apakah terdapat kesulitan dalam proses penambahan produk dan deskripsi produk? ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… Video 2. Tutorial Penambahan Produk dan Deskripsi Produk 1. Menurut kalian, unsur multimedia apa yang paling penting dalam website toko online? 2. Sebutkan kelebihan dan kekurangan menggunakan website toko online dengan menggunakan plugin woocommerce? 3. Jelaskan langkah-langkah proses penambahan produk dan deskripsi produk! Membuat Website Toko Online 30

Sudahkah kalian memahami materi dalam bab I ini dengan baik? Jika kalian sudah menguasai materi pada bab ini, lakukan evaluasi terhadap pemahamanmu dengan mengerjakan soal- soal Latihan. Namun jika kalian belum melakukan hal tersebut, kalian disarankan untuk berdiskusi dengan beberapa teman dan/atau berkonsultasi dengan guru. Tuliskan apa yang kamu Tuliskan manfaat dari apa Tuliskan kesimpulan dari pelajari pada bab ini! yang kamu pelajari pada pembelajaran pada bab ini! bab ini! Membuat Website Toko Online 31

BAB 3 Review Produk Website

Kegiatan pembelajaran pada modul ini menjelaskan tentang parameter web yang baik, kesalahan produk website dan evaluasi terhadap produk website. Tujuan kurikulum mencakup aspek kompetensi sikap spiritual, sikap sosial, pengetahuan dan keterampilan yang wajib dipahami oleh peserta didik. KOMPETENSI DASAR INDIKATOR PENCAPAIAN KOMPETENSI 3.7 Mengevaluasi produk web. • Memahami paremeter web yang baik • Mengidentifikasi kesalahan produk web 4.7 Membuat review • Mengevaluasi produk web terhadap produk web. • Mengidentifikasi kesalahan (troubleshooting) pada produk website • Memperbaiki produk web • Membuat review terhadap produk web Setelah mempelajari modul ini, peserta didik diharapkan mampu untuk memahami parameter web yang baik, mengidentifikasi kesalahan pada produk website dan mengevaluasi produk website. Peserta didik juga diharapkan dapat membuat review terhadap produk website. Membuat Website Toko Online 37

Mengukur Mutu Website Website sebagai sebuah media informasi-komunikasi serta publikasi dapat mempengaruhi presepsi pelanggan atau masyarakat secara umum yang mengunjungi web tersebut. Sebuah penelitian menunjukkan bahwa kunjungan dan evaluasi terhadap sebuah website dapat merubah pandangan pelanggan tentang citra perusahaan tersebut. Kualitas website meliputi aspek delivery of site objective, user statisfaction dan usability. Kualitas utama sebuah website adalah kepuasan pelanggan sehingga penting dilakukan survei kepuasan penggunan. Manfaat dari kepuasan pengguna website meliputi: 1. Identifikasi pelanggan/pengguna atau profil demografinya 2. Identifikasi kekuatan dan kelemahan website 3. Rekomendasi perbaikan website 4. Hasil survei dapat digunakan sebagai masukan perencaan strategi dari website 5. Pemahaman yang lebih baik mengenai kinerja website melalui benchmarking dengan website lain. Fitur yang terdapat pada suatu website dapat mempengaruhi persepsi pengguna antara lain, kemudahan navigasi, konten, dan kesan yang ditangkap dari website tersebut. Hal-hal yang Membuat Website Toko Online 38

paling mempengaruhi citra perusahaan jika ditinjau dari websitenya adalah kemudahan navigasi, penamaan atau alamat URL yang intuitif, kontak yang lengkap, dan ketersediaan informasi yang bermanfaat. Lalu bagaimana cara mengukur mutu sebuah website? Penggunaan Webqual banyak dilakukan untuk mengukur mutu suatu website. Webqual pada dasarnya mengukur mutu website berdasarkan persepsi pengguna atau pengunjung website. Jadi pengukurannya menggunakan instrumen kuisioner, yang oleh penemunya dibuat berdasarkan konsep house of quality dengan struktur instrumen juga mengacu ke model SERVQUAL. Kriteria Website yang baik Menurut CNET/Builder, ada tujuh kriteria untuk menentikan sebuah website termasuk website yang baik atau tidak. Ketujuh kriteria tersebut adalah sebagai berikut. 1. Usability Usability adalah upaya seorang user menemukan cara untuk menggunakan website tersebut dengan efektif. Usability memiliki lima karakteristik, yaitu (a) mudah dipelajari; (b) efisien digunakan; (c) mudah untuk diingat; (d) tingkat frekuensi kesalahan kecil dan (e) tingkat kepusan pemakai. 2. Sistem Navigasi, navigasi yang mudah dipahami oleh seluruh penggunjung secara keseluruhan. 3. Graphic Design Pemilihan layout, warna dan bentuk maupun tipografi yang menarik visual pengunjung untuk menjelajahi website. 4. Konten Isi/konten yang bermanfaat bagi pengunjung website. 5. Kompatibilitas Kompatibilitas, yaitu seberapa luas website didukung kompatibilitas peralatan yang ada. Misalnya website dapat dibuka di berbagai web browser. 6. Loading Time Terdapat beberapa faktor yang mempengaruhi waktu panggil (loading time) website saat kita membukanya. Faktor-faktor tersebut antara lain: besar bandwith/koneksi pengakses, kondisi webserver pada saat diakses, aplikasi yang digunakan dalam membangun website, Membuat Website Toko Online 39

dan sebagainya. Delapan detik pertama merupakan waktu yang penting untuk meyakinkan pengunjung untuk meneruskan menjelajahi suatu website. 7. Functionality Functionality akan melibatkan programmer dengan skrip-skripnya, misalnya PHP, ASP, Java dan CGI dan lain sebagainya untuk menciptakan website yang menarik, dinamis, interaktif yang dapat mengajak pengunjung untuk berkomunikasi secara langsung. Salah satu aspek yang penting lainnya dalah Accesibility, yaitu memaksimalkan penggunaan sebuah konten ketika satu/lebih indra dimatikan (khususnya mata). Accesibility berkaitan dengan kemampuan website menyediakan kemudahan untuk segala jenis pengguna, termasuk orang dengan disabilitas. Berikut adalah hal-hal yang perlu dipelajari dalam functionality diantaranya: a. Metode yang digunakan Webqual dapat digunakan untuk menganalisis kualitas banyak jenis website, baik website internal (seperti: pusat karir, perpustakaan dsb) maupun website eksternal (seperti: website maskapai penerbangan atau e-banking). Persepsi pengguna dibagi menjadi dua bagian, yaitu: persepsi tentang mutu layanan yang dirasakan dan Tindakan harapan. b. Apakah semua website dapat diuji kualitasnya? Webqual dapat digunakan untuk mengukur kualitas setiap website, baik yang hanya bersifat informasional maupun transaksional. Penggunaan webqual dapat mengetahui atribut-atribut atau fitur yang sudah baik maupun yang memerlukan perbaikan. c. Tips memilih sebuah website yang baik untuk dijadikna bahan perbandingan Pengertian bagus itu adalah suatu hal yang relatif. Untuk melakukan perbandingan maka sebaiknya dilakukan pada website yang memiliki fitur layanan yang sama, walaupun kualitasnya mungkin berbeda. Pertimbangan lainnya, adalah apakah pengguna akhir (end user) dari sistem tersebut relative mudah dan banyak untuk dijadikan responden. d. Cara menguji sebuah website dengan menggunakan metode Webqual Webqual merupakan salah satu dari banyak tools dalam pengukuran kualitas website yang bisa digunakan saat ini. Webqual melakukan teknik pengukuran berdasarkan persepsi pengguna akhir. Webqual ini merupakan metode yang telah dikembangkan Membuat Website Toko Online 40

dari Servqual yang disusun oleh Parasuraman. Webqual pada dasarnya mengukur mutu sebuah web berdasarkan persepsi dari pengguna atau pengunjung situs. Jadi pengukurannya menggunakan instrumen penelitian atau kuisioner, yang oleh penemunya dibuat berdasarkan konsep house of quality dengan struktur instrumennya juga mengacu ke model SERVQUAL. Servqual banyak digunakan sebelumnya pada pengukuran kualitas jasa. Instrumen penelitian pada Webqual tersebut dikembangkan dengan metode Quality Function Development (QFD). Pada metode penilaian Webqual disusun berdasarkan pada tiga area, yaitu: 1. Kualitas Informasi Pada area ini yang dilihat adalah mutu dari isi yang terdapat pada site, pantas tidaknya informasi untuk tujuan pengguna seperti akurasi, format dan keterkaitannya. 2. Kualitas Interaksi Pada area ini meninjau mutu dari interaksi pelayanan yang dialami oleh pengguna ketika mereka menyelidiki kedalam website lebih dalam, yang terwujud dengan kepercayaan dan empati, sebagai contoh isu dari keamanan transaksi dan informasi, pengantaran produk, personalisasi dan komunikasi dengan pemilik website. Membuat Website Toko Online 41

3. Kemudahan Penggunaan Pada area ini yang ditinjau adalah mutu yang berhubungan dengan rancangan site, sebagai contoh penampilan, kemudahan penggunaan, navigasi dan gambaran yang disampaikan kepada pengguna. Kesalahan pada produk website Terdapat beberapa kesalahan yang dapat terjadi pada produk website, diantaranya: 1. Loading terlalu lama Pengguna biasanya tidak suka menunggu lama ketika mengakses suatu website. Karena hal tersebut dianggap membuang waktu sekaligus kuota internet. Jadi, jangan sampai website yang dibuat terlalu berat dan butuh waktu lama untuk loading. Perbaikilah website tersebut supaya lebih ringan dan mudah diakses. Membuat Website Toko Online 42

2. Navigasi yang rumit Navigasi yang rumit, membuat pelanggan/pengunjung website menjadi tidak nyaman dan meninggalkan website. Untuk membuat navigasi yang baik, cobalah untuk menjawab pertannyaan ini. • Halaman apa saja yang dibutuhkan website ini? (Anda dapat melihat referensi website yang sesuai dengan usaha/bisnis Anda jalankan) • Apakah setiap halaman memiliki skema lain yang lebih luas? • Apakah konten akan dipecah ke dalam beberapa bagian? • Apa tujuan utama pengunjung Anda? 3. Tampilan tidak mobile friendly Berdasarkan survei tentang penggunaan internet, persentase akses internet menggunakan smartphone lebih besar dibandingkan akses melalui laptop atau Personal Computer, sehingga website yang dikembangkan haruslah mobile friendly. Biasanya tampilan website untuk desktop dan mobile sangat berbeda. Namun, fitur-fiturnya harus tetap difungsikan secara maksimal agar pelanggan yang mengakses website via smartphone bisa mendapatkan pengalaman yang praktis dan menyenangkan. 4. Menggunakan Foto/Gambar yang kualitasnya kurang baik Salah satu bagian yang penting ketika membangun desain website adalah foto. Pemilihan foto atau gambar yang tepat dapat menyampaikan jutaan makna, karena foto yang baik dapat menyampaikan emosi, memberikan perintah untuk melaksanakan aksi, menjelaskan fitur atau produk secara rinci, bahkan menggambarkan konsep tanpa harus membaca sebuah kata dalam promosi 5. Penggunaan tipografi dan warna yang salah Menarik memang dibutuhkan untuk sebuah desain website. Tapi tidak ada yang lebih menarik saat ini selain kesederhanaan dan gaya minimalis. Itu artinya tidak ada lagi penggunaan model font dan penggunaan warna yang berlebihan. Itu akan membuat pengunjung website Anda resah dan malas meneruskan aktifitas mereka di website Anda. 6. Sulit kembali ke home Salah satu fitur yang paling penting adalah sebuah navigasi yang memungkinkan untuk bisa kembali ke halaman home. Ini akan sangat dibutuhkan ketika pengunjung Membuat Website Toko Online 43

membutuhkan sebuah halaman home untuk mencari informasi umum seputar website bersangkutan. Jangan hilangkan fitur ini pada website Karena jika tidak, pengunjung akan langsung menutup akses website tersebut. 7. Broken link Tidak jarang kita akan menemukan sebuah halaman yang bertuliskan “404 error pages” dan itu tentu sangat mengganggu untuk sebuah website. Kalian harus benar – benar yakin bahwa semua fungsi dari website yang dibuat berjalan dengan baik. Dan jika memang ada fungsi yang tidak berjalan, sertakan tampilan halaman Broken Link yang menarik dan membuat pengunjung bukan meninggalkan website tersebut melainkan malah segera menghubungi Anda untuk memperbaikinya. 1. Aspek pengukuran kualitas website yang paling penting adalah kepuasan pengguna/pengunjung website. 2. Terdapat 7 aspek yang diperhatikan dalam menentukan kualitas website yaitu usability, sistem navigasi, graphic design, konten, kompabilitas, loading time dan functionality. 3. Tujuh kesalahan pada produk website adalah loading terlalu lama, navigasi rumit, tampilan tidak mobile friendly, menggunakan foto/gambar dengan kualitas yang kurang baik, penggunaan tipografi dan warna yang salah, dan terdapat broken link. Lembar Kerja Siswa 3. Membuat reviu Produk Website Toko Online Sebelum mengerjakan tugas ini, berkumpulah dengan angota kelompokmu. Dalam kegiatan ini masing-masing kelompok mengerjakan tugas berikut. Diskusikan dengan kelompok kalian kegiatan ini berdasarkan instruksi berikut! Berdasarkan penjelasan materi diatas, reviewlah website toko online yang dibuat oleh kelompok di kelasmu! Kerjakan sesuai dengan lembar kerja berikut! Membuat Website Toko Online 44

Situs URL (domain) Deskripsikan GUI (Graphical User Interface atau antarmuka dari website toko online yang diamati! 1. Gambarkan layout landing page yang digunakan! 2. Warna apa saja yang digunakan? 3. Menurut kalian, apakah warna yang digunakan sesuai dengan content/isi dari website tersebut? Jelaskan 4. Elemen navigasi apa yang dimiliki oleh website yang diamati? 5. Apakah susunan navigasi yang digunakan sudah sesuai? 6. Konten multimedia apa saja yang digunakan pada website tersebut? 7. Apakah content/isi yang ditampilkan masih bisa dikembangkan lagi? Pertanyaan 1. Apakah kalian mudah dalam menggunakan website tersebut? Apakah ada kesulitan dalam penggunaan website tersebut? ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………….. Membuat Website Toko Online 45

2. Apakah interkasi yang tersedia pada website mudah untuk dipahami? Jelaskan! ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… 3. Bagaimana kesimpulan tentang kualitas secara keseluruhan website yang kalian amati? ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………….. ……………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………….. …………………………………………………………………………………………………………………………….. …………………………………………………………………………………………………………………………….. 1. Mengapa kepuasan pelanggan atau pengunjung merupakan aspek paling penting dalam menentukan kualitas website? 2. Sebutkan ciri website toko online yang membuat kalian percaya untuk berbelanja atau membeli produknya? 3. Aspek apa dari sebuah website yang membuat kalian akan berkunjung kembali ke website tersebut? 4. Mengapa sistem navigasi dari sebuah website harus mudah untuk dipahami pengguna/pengunjung website? 5. Jelaskan tentang aspek functionality dari sebuah website! Membuat Website Toko Online 46

Sudahkah kalian memahami materi dalam bab I ini dengan baik? Jika kalian sudah menguasai materi pada bab ini, lakukan evaluasi terhadap pemahamanmu dengan mengerjakan soal-soal Latihan. Namun jika kalian belum melakukan hal tersebut, kalian disarankan untuk berdiskusi dengan beberapa teman dan/atau berkonsultasi dengan guru. Tuliskan apa yang kamu Tuliskan manfaat dari apa Tuliskan kesimpulan dari pelajari pada bab ini! yang kamu pelajari pada pembelajaran pada bab ini! bab ini! Membuat Website Toko Online 47