media penyampaian informasi seperti modul atau makalah belum memberikan fasilitas yang baik dan menarik untuk penyampaian
materi pelatihan. Hasil lengkap kuisioner yang diperoleh dari 5 anggota staf Mapenda dapat dilihat pada lampiran 2.
4.2. Metode Pengembangan Multimedia
Untuk pengembangan aplikasi, penulis telah melakukannya
berdasarkan enam tahap pengembangan multimedia menurut Luther
2003: 32 yaitu konsep concept, perancangan design, pengumpulan bahan material collecting, pembuatan assembly, tes testing, dan
distribusi implementation.
4.2.1. Konsep Concept
Pembuatan rancangan materi
pelatihan berbasiskan multimedia ini berbentuk CD
interaktif yang akan digunakan sebagai media penyampaian informasi tentang dana Bantuan Operasional Sekolah.
Informasi penting yang disajikan dalam rancangan materi pelatihan ini adalah tentang dana BOS, tujuannya,
mekanisme penyaluran dana BOS, dan sebagainya. Rancangan materi pelatihan ini menggunakan komponen-
komponen multimedia seperti teks, gambar, animasi, audio dan video agar peserta pelatihan dapat menggunakan aplikasi ini
dengan mudah dan menarik. Secara garis besar deskripsi konsep aplikasi yang penulis buat adalah sebagai berikut:
60
Tabel 4.2. Deskripsi Konsep Aplikasi Mapenda
1. Judul
Aplikasi Multimedia Computer Based Training CBT Untuk Bantuan Operasional Sekolah
Pada Kantor Depag Kabupaten Tangerang 2.
Fungsi Sebagai
alat bantu
interaktif yang
memiliki kemampuan untuk mempermudah user mendapatkan
materi pelatihan dengan rancangan desain menarik dengan komponen multimedia
3. Jenis
Aplikasi Aplikasi multimedia computer based training berupa
CD interaktif 4.
Pengguna Mapenda khususnya peserta yang akan melaksanakan
pelatihan dana Bantuan Operasional Sekolah 5.
Gambar Menggunakan format file jpg, png dan psd yang dibuat
sendiri dengan
menggunakan software
Adobe Photoshop CS
dan Macromedia Firework MX 2004 6.
Audio Menggunakan file MP3 dan WAV
7. Teks
Diperoleh langsung dari Mapenda, website Depag, dan tanya jawab dengan staff Mapenda
8. Animasi
Animasi teks dan gambar menggunakan format swf yang dibuat sendiri dengan menggunakan software
Macromedia Flash MX 2004 dan Macromedia
Director MX 10
. Interaktif
Menggunakan link baik berupa tombol, gambar maupun teks yang dapat berpindah dari satu halaman
ke halaman lain
4.2.2. Perancangan Design
Tahap ini merupakan tahap perancangan aplikasi, dimana perancangan tersebut berupa perancangan storyboard, perancangan
flowchart view , perancangan arsitektur navigasi, perancangan
diagram transisi state transition diagram, perancangan antar muka user interface.
61
4.2.2.1. Perancangan Storyboard
Secara umum rancangan storyboard dalam aplikasi ini adalah:
Storyboard
Modul : 1
Halaman : Intro Nama File : INTRO. Dir
Gambar : Halaman1.psd
Audio : Musik_Intro.mp3
Navigasi : Menu Utama
Untuk masuk ke halaman Menu Utama Keluar
Untuk keluar dari aplikasi Notes
Halaman intro merupakan halaman pembuka, dimana dalam halaman ini hanya terdapat dua tombol, yaitu
menuju halaman selanjutnya atau keluar dari aplikasi
Gambar 4.1. Rancangan Storyboard Intro
62
Storyboard
Modul : 2
Halaman : Menu Utama Nama File : MeNu_Utama.dir
Gambar : Halaman2.psd
Audio : Musik_Tmplte.mp3
Navigasi : Profil Mapenda
Untuk masuk ke halaman Profil Mapenda Materi Pelatihan
Untuk masuk ke menu Materi Pelatihan Rekap Madrasah
Untuk masuk ke halaman Rekapitulasi Madrasah Galeri Mapenda
Untuk masuk ke menu Galeri Mapenda Kontak
Untuk masuk ke menu Kontak Intro
Untuk masuk ke halaman Intro Keluar
Untuk keluar dari aplikasi
Notes Halaman menu utama, merupakan halaman
pertama dari aplikasi ini, dimana dalam menu utama ini terdapat lima tombol menu untuk
masuk ke menu selanjutnya yang berisi materi yang berbeda, dan terdapat tombol untuk kembali
ke halaman intro dan tombol untuk keluar dari aplikasi.
Gambar 4.2. Rancangan Storyboard Menu Utama
63
Storyboard
Modul : 3
Halaman : PROFIL Nama File : PROFIL.dir
Gambar : Halaman3.psd
Audio : Musik_Menu.mp3
Navigasi : Gambaran Umum
Untuk masuk ke menu Gambaran Umum Visi Mapenda
Untuk masuk ke menu Visi Mapenda Misi Mapenda
Untuk masuk ke menu Misi Mapenda Struktur Orgnisasi
Untuk masuk ke menu Struktur Organisasi Menu Utama
Untuk kembali ke halaman Menu Utama Keluar
Untuk keluar dari aplikasi
Notes Halaman
Profil Mapenda
menampilkan informasi mengenai gambaran umum, visi, misi,
dan struktur organisasi dari Mapenda. Serta terdapat tombol menu utama untuk kembali ke
menu utama dan tombol keluar untuk keluar dari aplikasi.
Gambar 4.3. Rancangan Storyboard Profil Mapenda
64
Storyboard
Modul : 4
Halaman : Materi Pelatihan Nama File : Materi Pelatihan.dir
Gambar : Halaman4.psd
Audio : Musik_Menu.mp3
Navigasi : Materi Pelatihan
Untuk masuk ke menu Materi Pelatihan Uraian Kegiatan
Untuk masuk ke menu Uraian Kegiatan Lingkup Kerja
Untuk Masuk ke menu Lingkup Kerja Gambaran Tugas
Untuk masuk ke menu Gambaran Tugas Introduction
Untuk masuk ke menu Introduction Flow Proses
Untuk masuk ke menu Flow Proses Menu Utama
Untuk masuk ke Menu Utama Keluar
Untuk keluar dari aplikasi
Notes Halaman Materi Pelatihan menampilkan
informasi mengenai Uraian Kegiatan, Tugas dan tanggung jawab seksi Mapenda Serta
menu lainnya untuk masuk ke menu yang diinginkan. Halaman materi pelatihan ini.
Serta terdapat tombol menu utama untuk kembali ke menu utama dan tombol keluar
untuk keluar dari aplikasi
Gambar 4.4. Rancangan Storyboard Materi Pelatihan
65
Storyboard
Modul : 5
Halaman : REKAPITULASI Nama File : REKAPITULASI.dir
Gambar : Halaman5.psd
Audio : Musik_Menu3
Navigasi : Rekap Madrasah
Untuk masuk ke menu Rekap Madrasah Jumlah Madrasah
Untuk masuk ke menu Jumlah Madrasah Jumlah Pengajar
Untuk masuk ke menu Jumlah Pengajar Jumlah Siswa
Untuk masuk ke menu Jumlah Siswa Menu Utama
Untuk masuk ke Menu Utama Notes
Halaman Rekap Madrasah menampilkan informasi mengenai Jumlah Madrasah,
pengajar dan siswa Kabupaten Tangerang dari tahun ajaran 20052006
sampai 20082010. Serta terdapat tombol menu
utama untuk kembali ke menu utama.
Gambar 4.5. Rancangan Storyboard Rekap Madrasah
66
Storyboard
Modul : 6
Halaman : Galeri_Mapenda
Nama File : Galeri_Mapenda.dir
Gambar : Halaman6.psd
Audio : Musik_Menu.mp3
Navigasi :
Galeri Mapenda Untuk masuk ke menu Galeri Mapenda
Gambar Untuk masuk ke menu Gambar
Video Untuk masuk ke menu Video
Menu Utama Untuk masuk ke Menu Utama
Notes Halaman Galeri Mapenda menampilkan informasi
mengenai Galeri Mapenda. Terdapat dua tombol menu yaitu tombol Gambar untuk menampilkan
hasil kegiatan berupa galeri foto dan tombol Video untuk menampilkan hasil kegiatan berupa galeri
video. Serta terdapat tombol menu utama untuk kembali ke menu utama.
Gambar 4.6. Rancangan Storyboard Galeri Mapenda
67
Storyboard
Modul : 7
Halaman :Kontak Nama File : Kontak.dir
Gambar : Halaman7.psd
Audio : Musik.mp3
Navigasi : Kontak
Untuk masuk ke menu Kontak Menu Utama
Untuk masuk ke Menu Utama Keluar
Untuk keluar dari aplikasi Notes
Halaman Kontak menampilkan informasi mengenai profil perancang aplikasi ini. Serta terdapat tombol
menu utama untuk kembali ke menu utama dan tombol keluar untuk keluar dari aplikasi.
Gambar 4.7. Rancangan Storyboard Kontak
4.2.2.2. Perancangan Bagan Alir Flowchart View
Dengan menggunakan simbol-simbol flowchart dari penjelasan pada bab sebelumnya, maka penulis telah
membuat 7 flowchart, yaitu: Flowchart Intro, Flowchart
Menu Utama, Flowchart Profil Mapenda, Flowchart
Materi Pelatihan,
Flowchart Rekap
Madrasah, Flowchart Galeri Mapenda, dan Flowchart Kontak.
68
Mulai Tampilkan Layar Intro
Pilih Halaman Selanjutnya Ya
Pilih Menu Utama
A
Tidak Terima Kasih
Keluar
Keter anga n : A : Halaman Menu Uta ma
Gambar 4.8. Flowchart Intro
Flowchart diatas menjelaskan bahwa aplikasi ini di
mulai dengan tampilan intro sebagai pembuka, lalu dalam tampilan intro tersebut ada suatu proses yaitu
memilih halaman selanjutnya, jika pengguna memilih menu utama maka akan langsung terhubung ke halaman
menu utama dan jika tidak maka pengguna akan langsung ke halaman keluar yang berisi ucapan terima
kasih kepada banyak pihak yang membantu dalam pembuatan aplikasi dan setelah itu baru keluar dari
aplikasi.
69
B
A
Ta mpilkan Layar Menu Uta ma Pilih Menu
Pilih Menu
Ya
Profil Mapenda
Tidak
Pilih Menu
Ya
C
M ateri Pel atihan
Tidak
Pilih Menu
Ya
Rekap Madrasah
D
Tidak Ya
Pilih Menu
E
Galeri Mapenda
Tidak Ya
Pilih Menu
F
K ontak
Tidak Keluar
Keterangan: A : Halam an Menu Utama
B : Halam an Pr ofil Mapenda C : Halam an Materi Pelatihan D :
Halam an Rekap Madrasah E : Halam an Galeri Mapenda
F : Halam an Kontak
Gambar 4.9. Flowchart Menu Utama
70
Flowchart diatas
menjelaskan bahwa dalam halaman Menu Utama berisi 5 proses menuju menu
selanjutnya, jika pengguna memilih ”ya” maka akan terhubung ke menu yang diinginkan dan jika ”tidak”
maka pengguna bisa memilih menu lainnya atau keluar dari aplikasi.
B
Ta mpilkan Layar Profil Mapenda Pilih Me nu
Pilih Menu Ga mbara n Umu m
Ya
Ta mpilkan Layar Ga mbar a n U mu m
Tidak
Pilih Menu Visi Mape nda
Ya
Ta mpilkan Layar Visi Mapenda
Tidak
Pilih Menu Mi si Mapenda
Ya
Ta mpilkan La yar Misi Mapenda
Tidak
Pilih Menu Str uktur Orga nisasi
Ya
Ta mpilkan Layar Struktur Orga nisasi
Keluar
Keterangan: B : Halam an Pr ofil Mapenda
Gambar 4.10. Flowchart Profil Mapenda
71
Flowchart diatas
menjelaskan bahwa dalam halaman Profil Mapenda berisi 4 proses menuju menu
selanjutnya, jika pengguna memilih ”ya” maka akan terhubung ke menu yang diinginkan dan jika ”tidak”
maka pengguna bisa memilih menu lainnya atau keluar dari aplikasi.
C
Ta mpilkan La yar Materi Pelatihan Pilih Menu
Pilih Menu Intr oduction
Ya
Ta mpilkan Layar Introduction
Tidak
Pilih Menu TugasTan ggung Jawab
Ya
Ta mpil kan Layar TugasTanggung Ja wab
Tidak
Pilih Menu Lingkup Kerja
Ya
Ta mpilkan Layar Lingkup Kerja
Tidak
Pilih Menu MonitoringPe lapora n
Ya
Ta mpilkan Layar Monitori ngPelaporan
Tidak
Pilih Menu Flow Proses
Ya
Ta mpilkan Layar Flow Pr oses
Keterangan:
Keluar
C : Halam an Materi Pelatihan
Gambar 4.11. Flowchart Materi Pelatihan
72
Flowchart diatas
menjelaskan bahwa dalam halaman Uraian Kegiatan berisi 5 proses menuju menu
selanjutnya, jika pengguna memilih ”ya” maka akan terhubung ke menu yang diinginkan dan jika ”tidak”
maka pengguna bisa memilih menu lainnya atau keluar dari aplikasi.
D
Ta mpilka n Layar Rekap Madrasah Pilih Menu
Pilih Menu Jumlah Madrasah
Ya
Ta mpilkan Layar Jumlah Ma drasah
Tidak
Pilih Menu Jumlah Pengajar
Ya
Ta mpilka n Layar Jumlah Pengajar
Tidak
Pilih Menu Jumla h Sis wa
Ya
Ta mpilkan Layar Jumlah Siswa
Keluar
Keterangan: D : Halam an Rekapitulasi Madrasah
Gambar 4.12. Flowchart Rekap Madrasah
73
Flowchart diatas
menjelaskan bahwa dalam halaman Rekapitulasi Pendidikan berisi 3 proses
menuju menu selanjutnya, jika pengguna memilih ”ya” maka akan terhubung ke menu yang diinginkan dan jika
”tidak” maka pengguna bisa memilih menu lainnya atau keluar dari aplikasi.
E
Ta mpil kan Layar Galeri Mapenda Pilih Menu
Pilih Menu Ga mbar
Ya
Ta mpil kan Layar Ga mbar
Tidak
Pilih Menu Video
Ya
Ta mpilka n Layar Vi deo
Keluar
Keterangan: E : Halam an Galeri Mapenda
Gambar 4.13. Flowchart Galeri Mapenda
Flowchart diatas
menjelaskan bahwa dalam halaman Galeri Mapenda berisi 2 proses menuju menu
selanjutnya, jika pengguna memilih ”ya” maka akan terhubung ke menu yang diinginkan dan jika ”tidak”
maka pengguna bisa memilih menu lainnya atau keluar dari aplikasi.
74
F
Ta mpilkan Layar Kont ak Pilih Menu
Pilih Menu Kontak
Ya
Ta mpilkan Layar Kontak
Tidak Keluar
Keterangan: F : Halam an Kont ak
Gambar 4.14. Flowchart Kontak
Flowchart diatas
menjelaskan bahwa dalam halaman Kontak berisi satu proses menuju menu
kontak, jika pengguna memilih ”ya” maka akan langsung terhubung ke menu yang diinginkan dan jika
”tidak” maka pengguna bisa memilih menu lainnya atau keluar dari aplikasi.
75
Jumlah Madrasah Jumlah Pengajar
Jumlah Siswa
4.2.2.3. Perancangan Arsitektur Navigasi
Intro Menu
Profil Mapenda Materi Pelatihan
Rekap Madrasah Galeri Mapenda
Kontak Gambaran Umum
Introduction Gambar
Visi Mapenda TugasTanggung Jawab
Video Misi Mapenda
Lingkup Kerja Struktur
MonitoringPelaporan Flow Proses
Gambar 4.15. Struktur Navigasi
76
Materi Pelatihan
Introduction TugasTanggung Jawab
Lingkup Kerja MonitoringPelaporan
Flow Proses
Latar Belakang Sasaran Program
Alokasi Dana
TIM PROGRAM BOS PROPINSI
Tujuan Besar Bantuan
Mekanisme Pelaksanaan
KANWIL DEPAG PROPINSI
Waktu Penyaluran Dana
KPPN PROPINSI
Jenis Biaya Pendidikan
Madrasah Penerima Dana
BANK KPPN
KANTOR POS BANK PROPINSI
REKENING MADRASAH PONDOK PESANTREN
Gambar 4.16. Struktur NavigasiMateri Pelatihan
77
4.2.2.4. Perancangan Diagram Transisi State Transition Diagram
Gambar 4.17. Rancangan STD Menu Utama
Gambar 4.18. Rancangan STD Profil Mapenda
78
Gambar 4.19. Rancangan STD Materi Pelatihan
Gambar 4.20. Rancangan STD Rekap Madrasah
79
Gambar 4.21. Rancangan STD Galeri Mapenda
Gambar 4.22. Rancangan STD Kontak
4.2.2.5. Perancangan Antarmuka Pemakai User Interface
Perancangan antarmuka pemakai user interface disebut
juga desain
visual ,
yaitu pengaturan
penempatan elemen grafik yang digunakan pada interface
, termasuk layout, menu, desain form, warna, coding
, dan penempatan tiap bagian informasi. Elemen harus dirancang dengan baik dan dapat bekerja sama.
Komunikasi yang efektif dipengaruhi oleh desain visual,
karena manusia berorientasi pada visual.
80
Rancangan antarmuka pemakai user interface yang akan ditampilkan pada aplikasi multimedia ini
akan disesuaikan dengan kebutuhan pengguna yang akan melihat informasi yang mereka butuhkan, sebagai
berikut : 1. Rancangan Layar Intro
Rancangan ini merupakan tampilan awal sebelum masuk ke tampilan menu utama. Pada
tampilan intro
terdapat dua tombol
untuk menentukan halaman selanjutnya, yaitu:
a. Tombol Menu Utama untuk masuk ke halaman
menu utama b.
Tombol Keluar untuk keluar dari aplikasi 2. Rancangan Layar Menu Utama
Rancangan ini merupakan tampilan utama dari rancangan teknis materi pelatihan berbasiskan
multimedia, dimana dalam tampilan menu utama ini terdapat 5 tombol, yaitu:
a. Tombol Profil Mapenda untuk masuk ke
halaman Profil Mapenda b.
Tombol Materi Pelatihan untuk masuk ke menu Materi Pelatihan
81
c. Tombol Rekap Madrasah masuk ke halaman
Rekap Madrasah d.
Tombol Galeri Mapenda untuk masuk ke menu Galeri Mapenda
e. Tombol Kontak untuk masuk ke menu Kontak
3. Rancangan Layar Profil Mapenda Rancangan menu ini digunakan untuk
membahas gambaran umum tentang Mapenda yang terdiri dari menu Gambaran Umum Mapenda, Visi
Mapenda, Misi Mapenda , serta Struktur Organisasi Mapenda.
a. Tombol Gambaran Umum Mapenda
Menampilkan Gambaran Umum Mapenda yang didalamnya terdapat elemen multimedia
seperti animasi teks dan suara. b.
Tombol Visi Mapenda Menampilkan visi dari seksi Mapenda yang
didalamnya terdapat elemen multimedia seperti animasi teks dan suara.
c. Tombol Misi Mapenda
Menampilkan misi dari seksi Mapenda yang didalamnya terdapat elemen multimedia seperti
animasi teks dan suara.
82
d. Struktur Organisasi
Menampilkan tentang Struktur Organisasi yang didalamnya terdapat elemen multimedia seperti
animasi teks dan suara. 4. Rancangan Layar Materi Pelatihan
Rancangan menu ini digunakan untuk menampilkan penjelasan mengenai materi yang
akan dibahas mengenai introduction, tugas dan tanggung jawab, lingkup kerja, monitoring dan
pelaporan, serta flow proses. Dalam rancangan layar Materi Pelatihan ini terdapat 5 tombol menu, yaitu:
a. Tombol Introduction
Tombol ini berfungsi untuk masuk ke menu Introduction.
b. Tombol Tugas dan Tanggung Jawab
Tombol ini berfungsi untuk masuk ke menu Tugas dan Tanggung Jawab.
c. Tombol Lingkup Kerja
Tombol ini berfungsi untuk masuk ke menu Lingkup Kerja.
d. Tombol Monitoring dan Pelaporan
Tombol ini berfungsi untuk masuk ke menu Monitoring dan Pelaporan.
83
e. Tombol Flow Proses
Tombol ini berfungsi untuk masuk ke menu Flow Proses.
5. Rancangan Layar Rekap Madrasah
Pada rancangan layar
ini menampilkan penjelasan tentang berapa banyak jumlah Madrasah,
Pengajar dan Siswa dalam 4 empat tahun terakhir. Terdapat beberapa tombol menu diantaranya:
a. Tombol Jumlah Madrasah
Tombol ini berfungsi untuk menampilkan Jumlah Madrasah SeKabupaten Tangerang
Tahun Pelajaran 20062007 sampai 20092010. b.
Tombol Jumlah Pengajar Tombol ini berfungsi untuk menampilkan
Jumlah Pengajar SeKabupaten Tangerang Tahun Pelajaran 20062007 sampai 20092010.
c. Tombol Jumlah Siswa
Tombol ini berfungsi untuk menampilkan Jumlah Siswa SeKabupaten Tangerang Tahun
Pelajaran 20062007 sampai 20092010
.
84
6. Rancangan Layar Galeri Mapenda
Pada rancangan layar ini menampilkan Galeri Mapenda yang terdapat beberapa tombol menu,
yaitu: a.
Tombol Gambar Tombol ini berfungsi untuk menampilkan
Gambar atau foto Mapenda. b.
Tombol Video Tombol ini berfungsi untuk menampilkan
beberapa hasil
kegiatan yang
sudah dilaksanakan berupa video
7. Rancangan Layar Kontak
Pada rancangan layar kontak, ketika kita memilih untuk masuk ke menu kontak maka
langsung menampilkan sekilas tentang biodata pembuat rancangan aplikasi ini.
85
Adapun rancangan tampilan layar aplikasi secara umum sebagai berikut :
Gambar 4.23. Rancangan Tampilan Aplikasi
4.2.3. Pengumpulan Bahan Material Collecting
