BAB III ANALISIS DAN PERANCANGAN TUTORIAL INTERAKTIF. ini dilakukan sebelum pembuatan tutorial interaktif. Dalam tahap ini, pembuatan tutorial

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN TUTORIAL INTERAKTIF 3.1 Analisis Tutorial Interaktif Analisis tutorial interaktif merupakan tahapan dalam membuat suatu tutorial interaktif. Tahap ini dilakukan sebelum pembuatan tutorial interaktif. Dalam tahap ini, pembuatan tutorial interaktif autoplay express 4.5 dianalisis untuk mengetahui kelemahan - kelemahan dan mencari solusi agar menjadi lebih baik. Setelah mendapatkan solusinya, maka hasil analisis digunakan sebagai dasar desain / perancangan tutorial interaktif Hasil Analisis Tutorial Interaktif Lama Setelah menganalisis tutorial interaktif yang lama, diperoleh kekurangan pada faktor pendukung pembuatan video tutorial tersebut. Faktor - faktor tersebut antara lain: 1. Tidak dilengkapi penjelasan tulisan (callouts) serta keterangan-keterangan sehingga sulit untuk dimengerti dan dipahami. 2. Tidak dilengkapi effects transisi. 3. Kurang lengkapnya musik latar belakang yang digunakan dan memiliki jenis musik yang sama sehingga terkesan monoton dan membuat jenuh yang mendengarkan. 4. Pembuatan videonya terkesan gelap sehingga sulit untuk memahami materi yang disampaikan Hasil Analisis Tutorial Interaktif yang Baru

2 Kekurangan dalam tutorial interaktif yang lama akan diperbaiki dengan melengkapi callouts, effects, dan musik yang lebih jelas. Tutorial interaktif yang dikembangkan didesain dengan menggunakan software : 1. Adobe Audition 1.5 sebagai media pendubbingan. 2. Autoplay Express 4.5 untuk membuat tampilan interface. 3. Photoscape untuk mengedit gambar yang digunakan sebagai penambahan decoration gambar dan pengaturan pencahayaan gambar. 4. Camtasia Studio 7.1 untuk recording, editing, dan publishing pembuatan video presentasi yang ada pada layar (screen) komputer. 5. Microsoft Power Point untuk mengedit gambar yang digunakan sebagai background layer. 3.2 Batasan Perancangan Tutorial Interaktif Aplikasi tutorial ini menampilkan penjelasan seputar tutorial interaktif, yakni cara membuat aplikasi sederhana dan contohnya menggunakan autoplay express 4.5, yang meliputi tahap perancangan, tahap editing dan tahap finishing. 3.3 Rancangan Tutorial Interaktif Pada perancangan tutorial interaktif ada dua tahap yang harus dilakukan, yaitu tahap persiapan dan tahap perencanaan. Tahap persiapan mencakup penentuan tujuan, pengumpulan data, dan mempersiapkan perangkat lunak yang digunakan.

3 3.3.1 Tahap persiapan Beberapa hal yang harus disiapkan pada tahap ini, yaitu : 1. Penentuan tujuan Penentuan tujuan dari perancangan tutorial interaktif ini dimaksudkan untuk memudahkan pembuatan tutorial interaktif dan sesuai dengan kebutuhan yang ada. 2. Pengumpulan data Mengumpulkan informasi informasi terkait bagaimana cara membuat aplikasi sederhana menggunakan autoplay express Mempersiapkan perangkat lunak yang digunakan Membuat media pengenalan tentang membuat aplikasi sederhana, dari proses perancangan, editing dan finishing pada lembar kerja autoplay express Implementasi atau pembuatan tutorial Membuat tutorial interaktif yang dilengkapi dengan menu-menu pendukungnya Rancangan Tutorial Interaktif Autoplay Express 4.5 Perancangan pembuatan tutorial interaktif autoplay express 4.5 diawali dengan menentukan rancangan tutorial interaktif yang akan dibuat, mengetahui permasalahan yang terjadi, mengatur urutan materi tutorial yang akan disampaikan, dan pemecahan masalah. 1. Menentukan rancangan tutorial yang akan dibuat

4 Dalam bagian ini akan dibahas menu- menu yang ada dalam sesi tutorial interaktif autoplay express 4.5 yaitu : 1. Menu Home 3. Menu Tutorial 5. Menu Contact Person 2. Menu About 4. Menu Exemple 2. Mengatur urutan tahapan pembuatan aplikasi sederhana dalam menu tutorial yang akan disampaikan Urutan tahapan pembuatan aplikasi sederhana dalam menu tutorial interaktif autoplay express 4.5 adalah : 1. Tahap pertama Tahap ini merupakan tahap perancangan, pada tahap ini merancang serta mempraktekan cara mendesain suatu menu yang dapat di link pada project lainnya. 2. Tahap kedua Tahap ini merupakan tahap editing. Tahap ini menjelaskan tentang tahap mengedit suatu rancangan yang telah dibuat. Rancangan ini diedit pada menu yang ingin di link atau di share ke page lainnya, maupun perubahan bentuk warna, gambar, tulisan, background dan ukurannya. Sehingga nantinya aplikasi sederhana yang kita buat sesuai dengan yang kita inginkan. 3. Tahap ketiga

5 Tahap ini merupakan tahap finishing. Bagian ini menjelaskan tentang tahap akhir dari perancangan dan editing, yang telah dibuat. 3. Pemecahan masalah Bagian terakhir yaitu menanggulangi permasalahan permasalahan yang ada setelah mengetahui permasalahan yang terjadi dengan cara memperbaikinya. Berdasarkan keadaan di atas, maka dibutuhkan suatu sistem informasi yang dapat mengelola data tersebut secara baik, sehingga dapat menghasilkan laporan yang valid dalam artian data yang didapat oleh user sesuai dengan data yang diinputkan. 3.4 Flowchart Program Pengertian flowchart menurut Kosasih (2006) merupakan diagram alir data dari suatu kerangka program. Fungsinya sama dengan algoritma, akan tetapi langkah langkah penyelesaiannya menggunakan simbol simbol grafis atau digambarkan secara grafis sehingga akan lebih mudah memahami arah logika. 1. Flowchart aplikasi tutorial interaktif 1.1 Menu utama Menu utama adalah kumpulan dari semua menu menu yang ditampilkan dalam tutorial ini. Home About Start Tutorial Example End

6 Gambar 3.1 Flowchart Menu Utama Tutorial Interaktif Gambar 3.1 menjelaskan menu menu yang terdapat pada tutorial interaktif autopaly express Menu home Menu home adalah menu tampilan awal saat pengguna telah menjalankan program tutorial interaktif autoplay express 4.5. Di dalamnya terdapat pilihan menu bar yang dapat diakses. Secara lengkap alur pada menu home tersaji pada Gambar 3.2. Start Masuk Tidak Home Ya Kilas Info 1.3 Menu about End Gambar 3.2 Flowchart Menu Home

7 Menu about adalah menu yang menampilkan tentang informasi autoplay express 4.5. Secara lengkap alur pada menu about tersaji pada Gambar 3.3. Start Masuk About Pilih/Klik 1.4 Menu tutorial Informasi Autoplay End Gambar 3.3 Flowchart Menu About Dalam menu tutorial ditampilkan video tentang berbagai tahapan, yakni video tutorial tahap perancangan, editing dan finishing. Secara lengkap alur pada menu tutorial tersaji pada Gambar 3.4. Start Masuk Tutorial Hal 1 Tahap Perancangan Hal 2 Tahap Editing Hal 3 Tahap Finishing End

8 Gambar 3.4 Flowchart Menu Tutorial 1.5 Menu example Dalam menu example akan ditampilkan tentang hasil pembuatan aplikasi sederhana menggunakan autoplay express 4.5. Secara lengkap alur pada menu example tersaji pada Gambar 3.5. Start Masuk Example End Gambar 3.5 Flowchart Menu Example 1.6 Menu contact Menu ini berisi tentang biodata diri penulis sebagai pembuat program tutorial interaktif ini. Secara lengkap alur pada menu contact tersaji pada Gambar 3.6. Start Masuk Contact End

9 Gambar 3.6 Flowchart Menu Contact 2. Usecase Aplikasi Tutorial Interaktif 2.1 Menu utama Di dalam menu utama user dapat mengakses beberapa menu, seperti : menu home, about, tutorial, example dan contact. Hom Abou Tutorial User Exampl Contact Gambar 3.7 Use Case Menu Utama Tutorial Interaktif Gambar 3.7 menjelaskan tentang menu menu yang dapat dipilih oleh user. 2.2 Menu about

10 Di dalam menu about, user dapat mengakses menu about itu sendiri. Abou t User Gambar 3.8 Use Case Menu About Gambar 3.8 menjelaskan tentang bagaimana user mengakses menu about. 2.3 Menu tutorial Didalam menu mengenal aplikasi, user dapat mengakses 4 sub menu. Tutorial <<include>> <<include>> <<include>> Thp Thp Editing Thp Finish User Gambar 3.9 Use Case Menu Tutorial Gambar 3.9 menjelaskan bagaimana user dapat memilih 3 tahapan. 2.4 Menu example Di dalam menu example, user dapat melihat video sample aplikasi sederhana. Exampl <<include>> Video sample User

11 Gambar 3.10 Use Case Menu Example Gambar 3.10 menjelaskan tentang bagaimana user memilih menu example. 2.5 Menu contact Di dalam menu contact us, user dapat mengakses menu contact itu sendiri. Contact User Gambar 3.11 Use Case Menu Contact Gambar 3.11 menjelaskan cara user untuk mengakses menu contact. 3.5 Desain Input Dan Output Tutorial Secara Terperinci Desain input adalah rancangan sebelum pembuatan program. Desain input dibuat untuk menghasilkan output. Desain output merupakan hasil akhir yang ditentukan oleh suatu kegiatan Tampilan Menu Utama Secara umum tampilan menu utama dibagi beberapa tampilan yaitu header, menu navigasi pada bagian atas, content yang berada di kanan dan kiri. Pada menu-menu navigasi akan menampilkan data atau informasi yang dapat di akses oleh user.

12 Header Menu content content Gambar 3.16 Menu Utama Tutorial Interaktif Gambar 3.12 menampilkan gambaran secara umun pada menu utama Menu Home Menu home menampilkan halaman awal serta beberapa menu tombol yang dapat diakses, seperti menu about, tutorial, example, dan contact. Home About Tutorial Example Contact

13 Gambar 3.13 Menu Home Gambar 3.13 menampilkan gambaran pada menu home Menu About Menu about menampilkan link serta informasi tentang penjelasan autoplay express 4.5. Home About Tutorial Example Contact About Animasi/Gif >>> Info Selanjutnya <<< Info Sebelumnya Link Gambar 3.14 Menu About Gambar 3.14 menampilkan gambaran pada menu about Menu Tutorial Menu tutorial menampilkan 3 tahapan, masing-masing tahap menampilkan video tahapan perancangan, tahapan editing, dan tahapan finishing. Animasi

14 Home About Tutorial Example Contact Tutorial Interaktif Gambar Gambar Gambar Gambar 3.15 Menu Tutorial Gambar 3.15 menampilkan gambaran pada menu tutorial Menu Example Menampilkan video example akhir project yang telah jadi. Home About Tutorial Example Contact Example Video

15 Gambar 3.16 Menu Example Gambar 3.16 menampilkan gambaran pada menu example Menu Contact Us Menampilkan foto serta biodata diri penulis, seperti nama, tempat tanggal lahir sampai ke alamat user. Home About Tutorial Example Contact Animasi Gambar Gambar 3.17 Menu Contact Us Gambar 3.17 menampilkan gambaran menu contact us.