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