Solusi Konsep Pengumpulan Bahan

85 menciptakan dinamika kemasan data dan informasi dengan cara yang berbeda, bukan dengan teks statis tetapi dengan animasi teks, gambar, suara, serta video. Berdasarkan latar belakang tersebut dapat dirumuskan bahwa permasalahan yang ada adalah:  Bagaimana membuat suatu aplikasi belajar Teknik Informasi Komunikasi berbasis multimedia yang dapat digunakan untuk membantu belajar siswa Madrasah Aliyah Cadangpinggan  Bagaimana rancangan tampilan dibuat sehingga memenuhi kebutuhan belajar siswa?

4.3 Solusi

Untuk mengatasi permasalahan yang ada diperlukan suatu aplikasi yang dapat memberikan solusi, yaitu: 1. Menyajikan Materi lengkap mata pelajaran Teknologi Informasi Komunikasi mulai dari hardware, browser Internet dan e-mail. 2. Dapat dijadikan sebagai alat belajar siswa, dan membantu siswa untuk memahami materi pelajaran. 3. Aplikasi tersebut dapat dijadikan sebagai media presentasi penyampaian materi bagi guru.

4.4 Konsep

Concept Aplikasi belajar ini berbentuk CD interaktif yang digunakan sebagai media belajar dan sebagai alat bantu mengajar. 86 Deskripsi konsep aplikasi belajar Teknologi Informasi Komunikasi seperti Tabel 4.1. Tabel 4.1. Deskripsi Konsep Aplikasi

4.5 Perancangan

Design Pada tahap ini peneliti melakukan perancangan aplikasi berupa perancangan storyboard, perancangan flowchart, desain struktur navigasi berupa hirarki menu, perancangan STD State Definition Diagram dan perancangan antarmuka pemakai user interface.

4.5.1 Perancangan S toryboard

Storyboard merupakan deskripsi tiap scene tampilan, dengan mencantumkan semua obyek multimedia dan link ke scene lain. Secara umum rancangan storyboard yang dihasilkan terdiri dari 6 scene, yaitu: Judul : Pengembangan Aplikasi Belajar Teknologi Informasi Komuniksi Berbasis Multimedia User : Siswa SLTA kelas XI Image : Menggunakan format file jpg dan gif yang dibuat sendiri Teks : Font tombol menu Arial ukuran 12 pt dan tampilan menu menggunkan font Arial ukuran 11 pt Audio : Menggunakan format file mp3 yang diperoleh dari koleksi mp3 pribadi Video : Menggunakan format flv yang diperoleh dari Internet Animasi : Animasi teks dan gambar yang dibuat sendiri Interaktif : Menggunakan link untuk berpindah dari satu halaman ke halaman lain yang dibuat sendiri 87 Tabel 4.2 Story Board SCENE VISUAL AUDIO DURASI 1 LINK: Sene 2 Gawil.mp3 ± 10 detik 2 LINK: Scene 3, Scene 4, Scene 5, Scene 6 Gawil.mp3 3 LINK: Scene 2, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 88 3.1 LINK: Scene 2, Scene 3, Scene 3.1A, Scene 3.1B, Scene 3.1C, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.1A LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.1B, Scene 3.1C, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.1B LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.1A, Scene 3.1C, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 89 3.1C LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.1A, Scene 3.1B, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.2 LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2A, Scene 3.2B, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.2A LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.2B, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 90 3.2B LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.2A, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.3 LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3A, Scene 3.3B, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.3A LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.3B, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 91 3.3B LINK: Scene 2,Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.3A, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.4 LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4A, Scene 3.4B, Scene 3.4C, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.4A LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.4B, Scene 3.4C, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 92 3.4B LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.4A, Scene 3.4C, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.4C LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.4A, Scene 3.4B, Scene 3.5, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.5 LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5A, Scene 3.5B, Scene 4, Scene 5, Scene 6 The Calling.mp3 93 3.5A LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 3.5B, Scene 4, Scene 5, Scene 6 The Calling.mp3 3.5B LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 3.5A, Scene 4, Scene 5, Scene 6 The Calling.mp3 4 LINK: Sene 2, Scene 3, Scene 4.1, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 94 4.1 LINK: Sene 2, Scene 3, Scene 4, Scene 4.1A, Scene 4.1B, Scene 4.1C, Scene 4.1D, Scene 4.1E, Scene 4.1F, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 4.1A LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1B, Scene 4.1C, Scene 4.1D, Scene 4.1E, Scene 4.1F, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 4.1B LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A, Scene 4.1C, Scene 4.1D, Scene 4.1E, Scene 4.1F, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 95 4.1C LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A, Scene 4.1B, Scene 4.1D, Scene 4.1E, Scene 4.1F, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 4.1D LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A, Scene 4.1B, Scene 4.1C, Scene 4.1E, Scene 4.1F, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 4.1E LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A, Scene 4.1B, Scene 4.1C, Scene 4.1D, Scene 4.1F, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 96 4.1F LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A, Scene 4.1B, Scene 4.1C, Scene 4.1D, Scene 4.1E, Scene 4.2, Scene 5, Scene 6 Djaduk8.mp3 4.2 LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.2A, Scene 4.2B, Scene 5, Scene 6 Djaduk8.mp3 4.2A LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.2, Scene 4.2A, Scene 5, Scene 6 Djaduk8.mp3 97 4.2B LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.2, Scene 4.2A, Scene 5, Scene 6 Djaduk8.mp3 5 LINK: Sene 2, Scene 3, Scene 4, Scene 5.1, Scene 5.2, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 5.1 LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1A, Scene 5.1B, Scene 5.1C, Scene 5.1D, Scene 5.1E, Scene 5.2, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 98 5.1A LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.1B, Scene 5.1C, Scene 5.1D, Scene 5.1E, Scene 5.2, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 5.1B LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.1A, Scene 5.1C, Scene 5.1D, Scene 5.1E, Scene 5.2, Scene 5.3, Scene 6 5.1C LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.1A, Scene 5.1B, Scene 5.1D, Scene 5.1E, Scene 5.2, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 99 5.1D LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.1A, Scene 5.1B, Scene 5.1C, Scene 5.1E, Scene 5.2, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 5.1E LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.1A, Scene 5.1B, Scene 5.1C, Scene 5.1D, Scene 5.2, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 5.2 LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.2A, Scene 5.2B, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 100 5.2A LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.2, Scene 5.2B, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 5.2B LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.2, Scene 5.2A, Scene 5.3, Scene 6 Kebyar- legong_1.mp3 5.3 LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.2, Scene 5.3A, Scene 5.3B, Scene 6 Kebyar- legong_1.mp3 101 5.3A LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.2, Scene 5.3, Scene 5.3B, Scene 6 Kebyar- legong_1.mp3 5.3B LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1, Scene 5.2, Scene 5.3, Scene 5.3A, Scene 6 Kebyar- legong_1.mp3 6 LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6.1, Scene 6.2, Scene 6.3 Jalan Satapak.mp3 102 6.1 LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6, Scene 6.2, Scene 6.3 Jalan Satapak.mp3 6.2 LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6, Scene 6.1, Scene 6.3 Jalan Satapak.mp3 6.3 LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6, Scene 6.1, Scene 6.2 Jalan Satapak.mp3 103

4.5.2 Perancangan Flowchart

Gambar 4.2 Flowchart Intro Keterangan: 1: Hardware Internet 2: Browser Internet 3: E-mail 4: Kuis Tampilkan Layar Intro Tampilkan Layar Home Start Pilih Menu Hardware Internet Pilih Menu Browser Internet Exit Ya Tidak Ya Pilih Menu E-Mail Ya Tidak Tidak 3 2 1 Pilih Menu Kuis 4 Tidak Ya 104 Gambar 4.3 Flowchart Hardware Internet Keterangan: A: Seluk Beluk dan Perkembangan Internet B: Deskripsi dan Fungsi Hardware untuk Akses Internet C: Deskripsi Peran ISP D: Deskripsi User ID dan Password E: Setup Modem dan Dial Up Tampilkan Layar Hardware Internet Pilih Menu Seluk Beluk dan Perkembangan Internet Pilih Menu Deskripsi dan Fungsi Hardware Untuk Akses Internet Pilih Menu Deskripsi Peran ISP Pilih Menu Deskripsi User ID dan Password Pilih Menu Setup Modem dan Dial Up Exit Ya Tidak Ya Tidak Ya Tidak Ya Tidak Ya Tidak 1 A B C D E 105 Gambar 4.4 Flowchart Seluk Beluk dan Perkembangan Internet Tampilkan Layar Seluk Beluk dan Perkembangan Internet Pilih Menu Local Area Network LAN Pilih Menu Wide Area Network WAN Pilih Menu Manfaat Internet Tampilkan Layar Manfaat Internet Tampilkan Layar Wide Area Network WAN Tampilkan Layar Local Area Network LAN Ya Tidak Ya Tidak Ya Tidak A 1 Keterangan: 1: Hardware Internet 106 Gambar 4.5 Flowchart Deskripsi dan Fungsi Hardware Untuk Akses Internet Tampilkan Layar Deskripsi dan Fungsi Hardware untuk Akses Internet Pilih Menu Hardware Internet Pilih Menu Istilah-istilah dalam Internet Tampilkan Layar Hardware Internet Tampilkan Layar Istilah-istilah dalam Internet Ya Tidak Ya Tidak B 1 Keterangan: 1: Hardware Internet 107 Gambar 4.6 Flowchart Deskripsi Peran ISP Tampilkan Layar Deskripsi Peran ISP Pilih Menu Cara memilih ISP Pilih Menu Telkomnet Instan Tampilkan Layar Cara memilih ISP Tampilkan Layar Telkomnet instan Ya Tidak Ya Tidak C 1 Keterangan: 1: Hardware Internet 108 Gambar 4.7 Flowchart Deskripsi User ID dan Password Tampilkan Layar Deskripsi User ID dan Password Pilih Menu user ID dan paswoord Pilih Menu Domain Name Service Pilih Menu hirarki DNS Tampilkan Layar hirarki DNS Tampilkan Layar Domain Name Service DNS Tampilkan Layar user ID dan paswoord Ya Tidak Ya Tidak Ya Tidak D 1 Keterangan: 1: Hardware Internet 109 Gambar 4.8 Flowchart Setup Modem dan Dial Up Tampilkan Layar Setup Modem dan Dial Up Pilih Menu setup modem Pilih Menu dial up telepon Tampilkan Layar setup modem Tampilkan Layar dial up telepon Ya Tidak Ya Tidak E 1 Keterangan: 1: Hardware Internet 110 Gambar 4.9 Flowchart Browser Internet Keterangan: A: Deskripsi Cara Akses Internet B: Mempraktekan Akses Internet Tampilkan Layar Browser Internet Pilih Menu Deskripsi Cara Akses Internet Pilih Menu Mempraktekan Akses Internet Exit Ya Tidak Ya Tidak 2 A B 111 Gambar 4.10 Flowchart Deskripsi Cara Akses Internet Tampilkan Layar Deskripsi cara Akses Internet Pilih Menu identifikasi IE Pilih Menu menggunakan fasilitas IE Pilih Menu website sebagai sumber informasi Pilih Menu pengertian URL dan HomePage Pilih Menu deskripsi Hypertext dan HTML Pilih Menu search engine Tampilkan Layar identifikasi IE Tampilkan Layar menggunakan fasilitas IE Tampilkan Layar website sebagai sumber informasi Tampilkan Layar pengertian URL dan HomePage Tampilkan Layar deskripsi Hypertext dan HTML Tampilkan Layar search engine Ya Tidak Tidak Tidak Tidak Tidak Tidak Ya Ya Ya Ya Ya A 2 Keterangan: 2: Browser Internet 112 Gambar 4.11 Flowchart Mempraktekan Akses Internet Tampilkan Layar Mempraktekan Akses Internet Pilih Menu menggunakan search engine Yahoo Pilih Menu mengelola Informasi dari Internet Tampilkan Layar menggunakan search engine Yahoo Tampilkan Layar mengelola Informasi dari Internet Ya Tidak Ya Tidak B 2 Keterangan: 2: Browser Internet 113 Gambar 4.12 Flowchart E-Mail Keterangan: A: E-mail B: Mailing List C: Chatting Tampilkan Layar E-Mail Pilih Menu e-mail Pilih Menu Mailing List Pilih Menu Chating Exit Ya Tidak Ya Tidak Ya Tidak 3 A B C 114 Gambar 4.13 Flowchart E-mail Tampilkan Layar e-mail Pilih Menu e-mail sebagai alat komunikasi Pilih Menu membuat e-mail dengan Yahoo Pilih Menu login ke account e- mail Pilih Menu attachment Pilih Menu e-mail dengan IE Tampilkan Layar e-mail sebagai alat komunikasi Tampilkan Layar membuat e-mail dengan Yahoo Tampilkan Layar login ke account e-mail Tampilkan Layar attachment Tampilkan Layar e-mail dengan IE Ya Tidak Tidak Tidak Tidak Ya Ya Ya Ya Tidak A 3 Keterangan: 3: E-mail 115 Gambar 4.14 Flowchart Mailing List Tampilkan Layar Mailing List Pilih Menu mendaftar ke mailing list Pilih Menu diskusi di mailing list Tampilkan Layar mendaftar ke mailing list Tampilkan Layar diskusi di mailing list Ya Tidak Ya Tidak 3 B Keterangan: 3: E-mail 116 Gambar 4.15 Flowchart Chatting Tampilkan Layar Chating Pilih Menu chatting dengan yahoo.com Pilih Menu chatting dengan mIRC Tampilkan Layar chatting dengan yahoo.com Tampilkan Layar chatting dengan mIRC Ya Tidak Ya Tidak C 3 Keterangan: 3: E-mail 117 Gambar 4.16 Flowchart Kuis Tampilkan Layar Kuis Pilih Menu Kuis 1 Pilih Menu Kuis 2 Pilih Menu Kuis 3 Exit Ya Tidak Ya Tidak Ya Tidak 4 Tampilkan Layar Kuis 1 Tampilkan Layar Kuis2 Tampilkan Layar Kuis 3 Keterangan: 4: Kuis 118

4.5.3 Perancangan Struktur Navigasi Hierarchical Model

Gambar 4.17 Struktur Navigasi Hierarchical Model INTRO HOME Hardware Internet Browser Internet E-Mail Seluk Beluk dan Perkembangan Internet Deskripsi dan Fungsi Hardware Untuk Akses Internet Deskripsi Peran ISP Deskripsi User ID dan Password Setup Modem dan Dial Up Local Area Network LAN Wide Area Network WAN Manfaat Internet Hardware Internet Istilah-istilah dalam Internet User ID dan Paswoord Domain Name Service Hirarki DNS Cara Memilih ISP Telkomnet Instan Setup Modem Dial up Telepon e-mail e-mail sebagai alat Komunikasi Membuat e-mail dengan Yahoo Login ke Account e-mail Attachment E-mail dengan IE Mailing List Mendaftar ke Mailing List Diskusi di Mailing List Chating Chatting dengan yahoo.com Chatting dengan mIRC Deskripsi Cara Akses Internet Identifikasi IE Menggunakan Fasilitas IE Website Sebagai Sumber Informasi Pengertian URL dan HomePage Deskripsi Hypertext dan HTML Search Engine Mempraktekkan Akses Internet Menggunakan Search Engine Yahoo Mengelola Informasi dari Internet Kuis Kuis 1 Kuis 2 Kuis 3 119 Struktur navigasi yang digunakan adalah hierarchiecal model dengan sedikit modifikasi. Pada model ini dapat dilihat penggunaan setiap scene yang dihubungkan dengan scene lainnya.

4.5.4 Perancangan State Transition Diagram STD

 Rancangan STD Home Gambar 4.18 Rancangan STD Home HOME INTRO EXIT Hardware Internet Browser Internet E-Mail Klik “Home” Tampilkan Home Klik “Home” Tampilkan Home Klik “Browser Internet” Tampilkan Browser Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “e-mail” Tampilkan e-mail Klik “Home” Tampilkan Home Klik “Home” Tampilkan Home Klik “Exit” Keluar dari Program KUIS Klik “Home” Tampilkan Home Klik “Kuis” Tampilkan Kuis 120  Rancangan STD Hardware Internet Gambar 4.19 Rancangan STD Hardware Internet Hardware Internet HOME Setup Modem dan Dial Up Deskripsi User ID dan Password Browser Internet Deskripsi dan Fungsi Hardware Untuk Akses Internet Deskripsi Peran ISP Seluk Beluk dan Perkembangan Internet E-Mail EXIT Klik “Home” Tampilkan Home Klik “Exit” Keluar dari Program Klik “E-mail” Tampilkan Email Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Browser Internet” Tampilkan Browser Internet Klik “Seluk Beluk dan Perkembangan Internet” Tampilkan Seluk Beluk dan Perkembangan Internet Klik “Deskripsi dan Fungsi Hardware Untuk Akses Internet” Tampilkan Deskripsi dan Fungsi Hardware Untuk Akses Internet Klik “Deskripsi Peran ISP” Tampilkan Deskripsi Peran ISP Klik “Deskripsi User ID dan Password” Tampilkan Deskripsi User ID dan Password Klik “Setup Modem dan Dial Up” Tampilkan Setup Modem dan Dial Up KUIS Klik “Kuis” Tampilkan Kuis Klik “Hardware Internet” Tampilkan Hardware Internet 121  Rancangan STD Browser Internet Gambar 4.20 Rancangan STD Browser Internet  Rancangan STD E-mail Gambar 4.21 Rancangan STD E-mail Browser Internet HOME EXIT Hardware Internet E-Mail Mempraktekkan Akses Internet Deskripsi cara Akses Internet Klik “Home” Tampilkan Home Klik “Exit” Keluar dari Program Klik “Deskripsi cara Akses Internet” Tampilkan Deskripsi cara Akses Internet Klik “Browser Internet” Tampilkan Browser Internet Klik “Browser Internet” Tampilkan Browser Internet Klik “Browser Internet” Tampilkan Browser Internet Klik “Browser Internet” Tampilkan Browser Internet Klik “e-mail” Tampilkan e-mail Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Browser Internet” Tampilkan Browser Internet Klik “Mempraktekkan Akses Internet” Tampilkan Mempraktekkan Akses Internet KUIS Klik “Kuis” Tampilkan Kuis Klik “Browser Internet” Tampilkan Browser Internet E-Mail HOME EXIT Hardware Internet Browser Internet Mailing List e-mail Chating Klik “Home” Tampilkan Home Klik “Exit” Keluar dari Program Klik “E-mail” Tampilkan E-mail Klik “E-mail” Tampilkan E-mail Klik “E-mail” Tampilkan E-mail Klik “e-mail” Tampilkan e-mail Klik “E-mail” Tampilkan E-mail Klik “E-mail” Tampilkan E-mail Klik “Mailing Listl” Tampilkan Mailing List Klik “Browser Internet” Tampilkan Browser Internet Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Chating” Tampilkan Chating KUIS Klik “Kuis” Tampilkan Kuis Klik “E-mail” Tampilkan E-mail Klik “E-mail” Tampilkan E-mail 122  Rancangan STD Kuis Gambar 4.22 Rancangan STD Kuis

4.5.5 Perancangan Antarmuka Pemakai User Interface

Rancangan antarmuka pemakai user interface yang akan ditampilkan pada aplikasi multimedia ini akan disesuaikan dengan kebutuhan pengguna yang akan melihat informasi yang mereka butuhkan. Pada program aplikasi belajar ini terdapat 18 rancangan layar, yaitu: KUIS HOME Hardware Internet Browser Internet KUIS 2 KUIS 3 KUIS 1 E-Mail EXIT Klik “Exit” Keluar dari Program Klik “E-mail” Tampilkan Email Klik “Hardware Internet” Tampilkan Hardware Internet Klik “Browser Internet” Tampilkan Browser Internet Klik “Home” Tampilkan Home Klik “Kuis” Tampilkan Kuis Klik “Kuis” Tampilkan Kuis Klik “Kuis” Tampilkan Kuis Klik “Kuis 2” Tampilkan Kuis 2 Klik “Kuis” Tampilkan Kuis Klik “Kuis 1” Tampilkan Kuis 1 Klik “Kuis” Tampilkan Kuis Klik “Kuis 3” Tampilkan Kuis 3 Klik “Kuis” Tampilkan Kuis Klik “Kuis” Tampilkan Kuis 123 1. Rancangan Intro Rancangan ini merupakan tampilan awal sebelum masuk ke tampilan utama program. Pada tampilan intro ini terdapat tombol Start untuk mulai masuk ke tampilan utama. 2. Rancangan Menu Home Rancangan ini berfungsi sebagai tampilan utama program yang menyediakan beberapa tombol menu, yaitu:  Tombol Intro untuk kembali ke intro  Tombol Hardware Internet untuk masuk ke menu Hardware Internet  Tombol Browser Internet untuk masuk ke menu Browser Internet  Tombol E-mail untuk masuk ke menu E-mail  Tombol Exit untuk keluar dari program 3. Rancangan Menu Hardware Internet Pada rancangan layar ini akan ditampilkan sub bab dari Hardware Internet yang menyediakan beberapa tombol menu, yaitu:  Tombol Home untuk masuk ke menu Home  Tombol Browser Internet untuk masuk ke menu Browser Internet  Tombol E-mail untuk masuk ke menu E-mail  Tombol Seluk Beluk dan Perkembangan Internet untuk melihat lebih detail tentang Seluk Beluk Perkembangan Internet  Tombol Deskripsi dan fungsi Hardware untuk Akses Internet untuk melihat lebih detail tentang Deskripsi dan fungsi Hardware untuk Akses Internet 124  Tombol Deskripsi Peran ISP untuk melihat lebih detail tentang Deskripsi Peran ISP  Tombol Deskripsi User ID dan Password untuk melihat lebih detail tentang Deskripsi User ID dan Password  Tombol Setup Modem dan Dial Up untuk melihat lebih detail tentang Setup Modem dan Dial Up  Tombol Local Area Network untuk melihat lebih detail topik Local Area Network yang menjadi topik pada sub bab Seluk Beluk dan Perkembangan Internet  Tombol Wide Area Network untuk melihat lebih detail topik Wide Area Network yang menjadi topik pada sub bab Seluk Beluk dan Perkembangan Internet  Tombol Manfaat Internet untuk melihat lebih detail topik Manfaat Internet yang menjadi topik pada sub bab Seluk Beluk dan Perkembangan Internet  Tombol Hardware Internet untuk melihat lebih detail topik Hardware Internet yang menjadi topik pada sub bab Deskripsi dan Fungsi Hardware untuk Akses Internet  Tombol Istilah-istilah dalam Internet untuk melihat lebih detail topik Istilah-istilah dalam Internet yang menjadi topik pada sub bab Deskripsi dan Fungsi Hardware untuk Akses Internet  Tombol Cara Memilih ISP untuk melihat lebih detail topik Cara Memilih ISP yang menjadi topik pada sub bab Deskripsi peran ISP 125  Tombol Telkomnet Instan untuk melihat lebih detail topik Telkomnet Instan yang menjadi topik pada sub bab Deskripsi peran ISP  Tombol User ID dan Password untuk melihat lebih detail topik User ID dan Password yang menjadi topik pada sub bab Deskripsi User ID dan Passsword  Tombol Domain Name Service untuk melihat lebih detail topik Domain Name Service yang menjadi topik pada sub bab Deskripsi User ID dan Passsword  Tombol Hirarki DNS untuk melihat lebih detail topik Hirarki DNS yang menjadi topik pada sub bab Deskripsi User ID dan Passsword  Tombol Setup Modem untuk melihat lebih detail topik Setup Modem yang menjadi topik pada sub bab Setup Modem dan Dial Up  Tombol Dial Up Telepon untuk melihat lebih detail topik Dial Up Telepon yang menjadi topik pada sub bab Setup Modem dan Dial Up  Tombol Exit untuk keluar dari program 4. Rancangan Menu Browser Internet Pada rancangan layar ini akan ditampilkan sub bab dari browser Internet yang menyediakan beberapa tombol menu, yaitu:  Tombol Home untuk masuk ke menu Home  Tombol Hardware Internet untuk masuk ke menu Hardware Internet 126  Tombol E-mail untuk masuk ke menu E-mail  Tombol Deskripsi Cara Akses Internet untuk melihat lebih detail tentang Deskripsi Cara Akses Internet  Tombol Mempraktikkan Akses Internet untuk melihat lebih detail tentang Mempraktikkan Akses Internet  Tombol Identifikasi IE untuk melihat lebih detail topik Identifikasi IE yang menjadi topik pada sub bab Deskripsi Cara Akses Internet  Tombol Menggunakan Fasilitas IE untuk melihat lebih detail topik Menggunakan Fasilitas IE yang menjadi topik pada sub bab Deskripsi Cara Akses Internet  Tombol website sebagai Sumber Informasi untuk melihat lebih detail website sebagai sumber Informasi yang menjadi topik pada sub bab Deskripsi Cara Akses Internet  Tombol Pengertian URL dan Homepage untuk melihat lebih detail topik Pengertian URL dan Homepage yang menjadi topik pada sub bab Deskripsi Cara Akses Internet  Tombol Deskripsi Hypertext dan HTML untuk melihat lebih detail topik Deskripsi Hypertext dan HTML yang menjadi topik pada sub bab Deskripsi Cara Akses Internet  Tombol Search Engine untuk melihat lebih detail topik Search Engine yang menjadi topik pada sub bab Deskripsi Cara Akses Internet 127  Tombol Menggunakan Search Engine Yahoo untuk melihat lebih detail topik Menggunakan Search Engine Yahoo yang menjadi topik pada sub bab Mempraktikkan Akses Internet  Tombol Mengelola Informasi dari Internet untuk melihat lebih detail topik Mengelola Informasi dari Internet yang menjadi topik pada sub bab Mempraktikkan Akses Internet  Tombol Exit untuk keluar dari program 5. Rancangan Menu E-mail Pada rancangan layar ini akan ditampilkan sub bab dari e-mail yang menyediakan beberapa tombol menu, yaitu:  Tombol Home untuk masuk ke menu Home  Tombol Hardware Internet untuk masuk ke menu Hardware Internet  Tombol Browser Internet untuk masuk ke menu Browser Internet  Tombol E-mail untuk melihat lebih detail tentang Surat Elektronik e-mail  Tombol Mailing List untuk melihat lebih detail tentang Mailing List  Tombol Chatting untuk melihat lebih detail tentang Chatting  Tombol E-mail Sebagai Alat Komunikasi untuk melihat lebih detail topik E-mail Sebagai Alat Komunikasi yang menjadi topik pada sub bab E-mail 128  Tombol Membuat e-mail dengan Yahoo untuk melihat lebih detail topik Membuat e-mail dengan Yahoo yang menjadi topik pada sub bab E-mail  Tombol Login ke Account e-mail untuk melihat lebih detail topik Login ke Account e-mail yang menjadi topik pada sub bab E-mail  Tombol Attachment untuk melihat lebih detail topik Attachment yang menjadi topik pada sub bab E-mail  Tombol E-mail dengan IE untuk melihat lebih detail topik E-mail dengan IE yang menjadi topik pada sub bab E-mail  Tombol Mendaftar ke Mailing List untuk melihat lebih detail topik Mendaftar ke Mailing List yang menjadi topik pada sub bab Mailing List  Tombol Diskusi di Mailing List untuk melihat lebih detail topik Diskusi di Mailing List yang menjadi topik pada sub bab Mailing List  Tombol Chatting dengan Yahoo untuk melihat lebih detail topik Chatting dengan Yahoo yang menjadi topik pada sub bab Chatting  Tombol Chatting dengan mIRC untuk melihat lebih detail topik Chatting dengan mIRC yang menjadi topik pada sub bab Chatting  Tombol Exit untuk keluar dari program 6. Rancangan Menu Kuis Pada rancangan layar ini akan ditampilkan sub bab dari kuis yang menyediakan beberapa tombol menu, yaitu:  Tombol Home untuk masuk ke menu Home 129  Tombol kuis 1 untuk masuk ke menu kuis bab Hardware Internet  Tombol kuis 2 untuk masuk ke menu kuis bab Browser Internet  Tombol kuis 3 untuk masuk ke menu kuis bab E-mail  Tombol Exit untuk keluar dari program Adapun rancangan tampilan layar program secara umum seperti pada Gambar 4.23 Gambar 4.23 Rancangan Tampilan Program

4.6 Pengumpulan Bahan

Material Collecting Pengumpulan bahan-bahan berupa file-file audio, gambar, foto dan teks dilakukan dengan cara mengambil dari berbagai sumber dan membuatnya sendiri. Bahan-bahan berupa file, gambar dan foto, peneliti peroleh dari sekolah dan file audio dan video peneliti peroleh dari internet dan dari koleksi pribadi, sedangkan file teks ada yang peneliti dapatkan dari sekolah dan buku yang dirangkum sendiri Tombol Menu Tampilan Menu Exit Home Jam Logo 130 oleh peneliti. Animasi dari semua bahan yang peneliti dapatkan, dibuat oleh peneliti sendiri. Tabel 4.3 Bahan Pengembangan Aplikasi No Judul Kapasitas Sumber 1 Bikin Account Yahoo.flv 40.8 MB Internet 2 HTML Dasar.flv 24.3 MB Internet 3 LAN Connection.flv 23.3 MB Internet 4 Video mIRC.flv 25.7 MB Internet 5 Logo CDP.psd 1.32 MB Sekolah 6 Memigen.mp3 508 KB Koleksi Pribadi 7 Djaduk2.mp3 1.865 MB Koleksi Pribadi 8 Djaduk8.mp3 2.055 MB Koleksi Pribadi 9 Beyond The sunset.mp3 3.505 MB Koleksi Pribadi 10 01. The calling.mp3 1.382 MB Koleksi Pribadi 11 Gawil.mp3 8.609 MB Koleksi Pribadi 12 Jalan Stapak.mp3 6.657 MB Koleksi Pribadi 13 Kebyar-legeng_1.mp3 5.139 MB Koleksi Pribadi 14 Magic Reong.mp3 4.364 MB Koleksi Pribadi 15 Firefox.jpg 4 KB Internet 16 Ict15.jpg 3 KB Internet 17 Ict17.jpg 3 KB Internet 18 IE.jpg 3 KB Internet 19 Kabel6.jpg 3 KB Internet 20 Kabel7.jpg 3 KB Internet 131 21 LAN.jpg 3 KB Internet 22 LAN Card.jpg 2.74 KB Internet 23 Man3.jpg 3 KB Internet 24 Mirc.jpg 3 KB Internet 25 Switch.jpg 1.40 KB Internet 26 Tang krimping.jpg 2.95 KB Internet 27 Topologi mesh.jpg 3 KB Internet 28 Topologi star.jpg 3 KB Internet 29 Topologi ring.jpg 3 KB Internet 30 YM.jpg 872 MB Internet 31 Flash0.jpg 2 KB Scan dari buku sekolah 31 Flash0 copy.jpg 2 KB Scan dari buku sekolah 32 Gbr 2.1.jpg 3 KB Scan dari buku sekolah 33 Gbr 2.2.jpg 3 KB Scan dari buku sekolah

4.7 Pembuatan