VISUALISASI AKTIVITAS SISTEM ORGAN TUBUH BERBASIS WEB

VISUALISASI AKTIVITAS SISTEM ORGAN TUBUH BERBASIS WEB DAN
MULTIMEDIA : APLIKASI E-LEARNING
Sarifuddin Madenda, Tommy F. R.*
ABSTRAK
VISUALISASI AKTIVITAS SISTEM ORGAN TUBUH BERBASIS WEB DAN
MULTIMEDIA : APLIKASI E-LEARNING. Perkembangan teknologi telekomunikasi dan teknologi
informasi telah memungkinkan untuk pertukaran informasi yang cepat dan akurat. Pertukaran informasi
dapat dilakukan baik berupa teks, suara, gambar, video dan animasi. Ini berarti bahwa teknologi tersebut
cukup efektif untuk pelaksanaan Distance Learning atau penyediaan materi keilmuan untuk kebutuhan Elearning, Virtual University dan E-Library seperti yang telah mulai banyak dikembangkan saat ini.
Makalah ini menguraikan tentang perancangan pemrograman dan implementasi materi keilmuan
berbasis multimedia dan web untuk kebutuhan E-learning, Virtual University dan E-Library. Salah satu
contoh materi yang akan ditampilkan dalam makalah ini adalah mengenai organ tubuh manusia : fungsi
dan aktivitasnya. Semua organ tubuh dan fungsinya diuraikan dalam bentuk teks dan suara. Sedang
aktivitas organ ditampilkan dalam bentuk gambar, video dan animasi. Penyajian materi dalam bentuk
multimedia ini dapat memudahkan pengguna untuk pemahaman materi keilmuan tersebut.
Keywords : visual organ tubuh, multimedia, e-learning.
ABSTRACT
AN E-LEARNING PROGRAMMING METHOD AND IT’S IMPLEMENTATION BASED
ON MULTIMEDIA AND WEB. New developments in information technology and telecommunication
play an important rile in exchanging fast and accurate information which range from text, sound, graphic
to video. These technologies seem to be very effective for Distance learning, Virtual University and Elearning.
This paper presents an E-learning programming method and it’s implementation based on
multimedia and Web. An example of the study case corresponds to human organ, where the organ
functions are presented as texts and sounds and the activities as graphic and video.
PENDAHULUAN
Internet, suatu istilah yang saat ini sudah tidak asing lagi bagi masyarakat
umum. Hal ini bisa kita lihat dari perkembangan pemakaian internet di dunia pada
umumnya, dan di Indonesia khususnya. Baik itu dari jumlah komputer pribadi yang
*
Universitas Gunadarma, Email : [email protected]
terhubung ke internet, komputer jaringan lokal suatu badan/perusahaan yang
terhubung ke internet, ataupun jasa Warung Internet yang menyediakan penyewaan
internet untuk umum.
Dengan keadaan seperti itu, internet memegang peranan sangat penting dalam
kehidupan manusia dalam berbagai bidang. Seperti bidang informasi, dimana kita
dapat mendapatkan informasi terkini dari hasil pertandingan Sepak bola dari penjuru
dunia, informasi tentang kebudayaan dunia, informasi tentang produk teknologi
tercanggih dan terbaru, melakukan transaksi pembelian dan penjualan barang, lelang,
konsultasi kesehatan, mendengarkan musik, mencari teman baru, mengobrol lewat
internet, dan kegiatan lainnya.
Salah satu sarana internet yang banyak diminati adalah World Wide Web
(disebut “web”) yang mampu menyediakan informasi dalam berbagai media, baik
teks, gambar, animasi, maupun kombinasinya. Dengan memanfaatkan kemampuan
dan fungsi yang dimiliki oleh web, pada makalah ini penulis hendak membahas
mengenai pemanfaatan web sebagai media untuk belajar jarak jauh lewat internet.
Informasi yang tersedia dalam web ini dapat diakses oleh siapa saja, dimana saja, dan
kapan saja bagi mereka yang ingin belajar. Memang pengembangan web seperti ini
sudah dibuat oleh beberapa situs luar negri. Web multimedia yang dibahas pada
makalah ini adalah tentang visualisasi Organ Tubuh Manusia dan fungsi kerjanya
secara interaktif.
Metode penelitian yang dikembangkan terdiri dari studi pustaka, perancangan,
implementasi dan uji coba. Studi pustaka merupakan langkah awal untuk mempelajari
buku, majalah dan jurnal yang berhubungan dengan internet, Web site, multimedia
dan organ tubuh manusia. Hasil studi ini merupakan acuan untuk tahap perancangan
multimedia dan web. Tahap perancangan merupakan tahap yang sangat penting, tahap
ini terdiri dari perancangan struktur navigasi dan perancangan tampilan informasi
Internet
Istilah internet pada mulanya diciptakan para pengembangnya karena mereka
memerlukan kata yang dapat menggambarkan jaringan dari jaringan-jaringan yang
saling terkoneksi yang tengah dibuat waktu itu. Internet merupakan kumpulan orang
dan komputer di dunia yang seluruhnya terhubung oleh bermil-mil kabel dan saluran
telepon, masing-masing pihak dapat juga berkomunikasi karena menggunakan bahasa
yang umum dipakai.
Jadi apa yang dimaksud internet itu sendiri? Pertama, Internet adalah kumpulan
yang luas dari jaringan komputer besar dan kecil yang saling bersambungan
menggunakan jaringan komunikasi yang ada di seluruh dunia. Kedua, Internet adalah
seluruh manusia yang secara aktif berpartisipasi sehingga membuat Internet menjadi
sumber daya informasi yang sangat berharga. [1]
Tidak ada jaringan tunggal yang dikenal sebagai Internet, tetapi merupakan
gabungan dari jaringan-jaringan regional seperti SuraNet, PrepNet, NearNet,
AARNET, yang saling dikoneksikan bersama sebagai satu kesatuan dengan TCP/IP
protokol.
World Wide Web (WWW)
Web adalah pelayanan terbaru Internet, yang dikembangkan di CERN,
laboratorium Fisika Partikel Eropa yang didasarkan pada teknologi hypertext. Mulamula web dikembangkan sebagai sarana pertukaran informasi/ dokumen diantara para
ilmuan. Dengan menggunakan web, pengaksesan berbagai macam sumber informasi
dan layanan di Internet misal, ftp, mail, gopher dan lain sebagainya dapat dilakukan
melalui satu cara yang general. [1][2]
Pada prinsipnya, web bekerja dengan cara menampilkan file-file HTML yang
berasal dari server web pada program client khusus, yaitu browser web. Program
browser pada client mengirimkan permintaan (request) kepada server web, yang
kemudian akan dikirimkan oleh server dalam bentuk HTML. File HTML ini berisi
instruksi-instruksi yang diperlukan untuk membentuk tampilan. Perintah HTML ini
kemudian diterjemahkan oleh browser web sehingga isi informasi dapat ditampilkan
secara visual kepada pengguna di layar komputer.
Multimedia
Multimedia merupakan suatu teknik baru dalam pengembangan aplikasi yang
bertujuan untuk menarik minat pemakai melalui elemen-elemennya (teks, gambar,
suara, video dan animasi) yang disajikan secara interaktif. Suatu aplikasi multimedia
terdiri dari teks, gambar, suara, video dan animasi yang digabungkan dan disajikan
secara interaktif dengan menggunakan pemrograman. Dalam proses pembuatannya,
aplikasi multimedia sebaiknya dibuat oleh sebuah tim yang masing-masing
anggotanya berkompeten dalam bidangnya, karena aplikasi multimedia tidak hanya
mengandalkan pemrogramannya saja, tetapi juga mengandalkan unsur-unsur yang
dapat memberi kenyamanan bagi pemakai seperti design interface, suara, animasi dan
tentu saja interaktivitas. [2]
Aplikasi multimedia selain yang bersifat interaktif, ada juga yang bersifat linier.
Bila aplikasi bersifat linier, maka pemakai hanya dapat menyaksikan aplikasi tersebut
tanpa harus terlibat, sama seperti menyaksikan suatu presentasi. Namun bila aplikasi
bersifat interaktif, maka pemakai harus terlibat dalam pengoperasian aplikasi tersebut.
Aplikasi multimedia yang interaktif membutuhkan kendali yang biasanya disebut
Navigasi, agar pemakai dapat menjelajahi isi aplikasi. Komponen multimedia terdiri
dari: [2]
a. Teks
Teks pada multimedia berfungsi sebagai narasi yang menjelaskan tentang isi
aplikasi. Teks dapat dibuat secara internal dan eksternal. Teks yang dibuat secara
internal dibuat dengan word processing yang ada pada authoring tools. Biasanya teks
internal digunakan untuk membuat teks yang pendek-pendek, misalnya tooltip. Teks
eksternal dibuat dengan menggunakan word processing lain di luar authoring tools.
b. Gambar
Penggunaan gambar dalam multimedia meliputi :
§ Background Image, digunakan sebagai gambar latar belakang aplikasi.
Background image harus sesuai dengan tema aplikasi. Background image dapat
menggunakan gambar yang sudah ada, dan dapat juga membuat background
berupa tekstur.
§ Button Image, biasa kita kenal dengan tombol. Pada button image inilah terletak
kontrol program (navigasi). Pembuatan button image harus sesuai dengan
kebiasaan pemakai atau minimal memiliki kedekatan dengan kontrol yang akan
direpresentasikan.
§ Partial Image, dalam pembuatan aplikasi multimedia berfungsi sebagai gambargambar pendukung..
c. Suara
Dalam multimedia, ada dua jenis format suara yang umum digunakan. Yang
pertama adalah format WAV dan yang kedua adalah format MIDI.
Format WAV paling tinggi adalah CD Quality, dengan 44,1 KHz , 16 bit.
Namun dalam perekaman jarang sekali digunakan kualitas ini mengingat waktu yang
dibutuhkan cukup lama. Biasanya digunakan kualitas 44,1 KHz, 8 bit.
MIDI (Music Interface for Digital Instrument) merupakan format yang dapat
menghasilkan lagu-lagu berdurasi panjang dengan ukuran file yang kecil. Sedangkan
menurut penggunaannya suara terbagi atas :
§ Musik, digunakan untuk melatari aplikasi. Biasanya musik dibuat sesuai dengan
tema aplikasi.
§ Suara (Natural Sound), terdiri dari suara-suara yang direkam dalam format WAV.
§ Sound FX, merupakan suara-suara yang direkam dan secara sengaja dimodifikasi
untuk memberi theme sound pada aplikasi. Biasanya digunakan sebagai suara
pada saat mengklik tombol, suara peringatan kesalahan dan sebagainya.
d. Animasi
Animasi juga merupakan objek yang dapat bergerak. Pada dasarnya animasi
merupakan gabungan beberapa gambar yang ditampilkan secara berurut. Yang
membedakannya dengan video ialah jika video didapat dari kejadian yang sebenarnya,
maka animasi didapat dengan membuat sendiri.
Animasi terbagi atas animasi dua dimensi (2D) dan tiga dimensi (3D). Animasi
2D umumnya berupa kartun-kartun, sedangkan animasi 3D berupa objek-objek tiga
dimensi.
e. Authoring
Pemrograman dalam multimedia biasa disebut dengan Authoring. Pada
authoring inilah interaktivitas sebuah aplikasi dirancang. Seorang pemrogram harus
menguasai teknik-teknik penempatan navigasi, struktur navigasi dan sedapat mungkin
menghindari tampilan-tampilan standar yang mudah sekali membuat pemakai jemu.
Perangkat yang digunakan disebut Authoring tools. Jenis authoring tools terbagi
atas :
§ Authoring tools berbasis ikon. Dengan authoring tools ini biasanya
programmer hanya menempatkan ikon-ikon tertentu dan menyusun
struktur aplikasi saja.
§ Authoring tools berbasis visual. Dengan authoring tools ini programmer
dapat menggunakan fasilitas yang telah disediakan, kemudian
menempatkannya pada suatu form dan memberi beberapa baris script
pada elemen-elemen tertentu.
§ Authoring tools berbasis waktu nyata (real time). Dengan authoring tools
ini programmer dihadapkan pada sebuah scoreboard yang berisi areaarea frame agar programmer dapat meletakkan objek-objeknya. Sama
seperti authoring tools berbasis visual, programmer juga perlu
menambahkan beberapa baris script pada objek-objek yang
diinginkannya.
Macromedia Flash 4.0
Macromedia Flash adalah utilitas yang digunakan untuk membuat suatu aplikasi
multimedia yang interaktif dan untuk berbagai tujuan. Aplikasi yang dihasilkan oleh
Flash disebut Flash Movie (untuk selanjutnya disebut “movie” saja).
Movie dapat menjadi aplikasi apa saja, tergantung dari tujuan dan designnya,
seperti [3] :
K Animasi Splash page pada suatu web.
K Suatu Form interaktif pada suatu web
K Suatu database interaktif yang mengirim dan menerima informasi dengan
CGI script.
K Aplikasi web yang mandiri (standalone)
K Suatu web interaktif secara keseluruhan, yang akan dikembangkan dalam
penelitian ini.
Flash menggunakan layer-layer dan frame-frame untuk mengatur tampilan,
animasi, bentuk dan alur dari movie. Alasan utama penulis memilih Macromedia
Flash adalah karena ukuran file yang dihasilkan kecil, meskipun movie yang dibuat
berisi berbagai image, teks, dan animasi yang diperlukan untuk membuat suatu
aplikasi multimedia, sehingga dalam pengaksesan pada web dapat mengurangi waktu
dan menambah kecepatan akses. Hal ini bisa terjadi, karena Flash menggunakan
elemen simbol untuk menampung berbagai elemen yang hendak digunakan. Tipe
simbol yang ada di Flash adalah [3]:
1. Graphic Symbol, digunakan untuk gambar statis, atau animasi sederhana
yang dikontrol oleh timeline movie utama.
2. Movie clips, sebenarnya seperti movie didalam movie. Digunakan untuk
animasi yang berjalan secara bebas terlepas dari movie utama. Dapat
berisi suatu aksi, simbol yang lain, dan suara. Movie clips dapat
diletakkan didalam simbol lain, dan sangat berguna untuk membuat
animasi untuk tombol.
3. Button Symbol, sangat berguna untuk membuat tombol interaktif. Disini
tombol mempunyai beberapa keadaan (Up, Over, Down, dan Hit) yang
menunjuk kepada gerakan dari mouse yang dapat didefinisikan dengan
grafik, simbol dan suara.
Perancangan dan Implementasi
Sesuai dengan tujuan penelitian yaitu mengembangkan web yang menyajikan
informasi tentang organ tubuh manusia secara interaktif berbasis multimedia. Untuk
itu diperlukan langkah-langkah perancangan sebagai berikut :
Menentukan jenis aplikasi multimedia
Menentukan struktur dan peta navigasi yang
akan digunakan
Membuat desain antarmuka yaitu
storyboard aplikasi multimedia
Pembuatan Elemen-elemen yang akan
digunakan dalam aplikasi
Pembuatan elemen
dengan
menggunakan
perangkat lunak
yang sesuai.
Penggabungan elemen-elemen yang sudah
dibuat menggunakan Authoring tools
Implementasi dan analisa aplikasi
Gambar 1. Langkah Perancangan Aplikasi Multimedia
Struktur Navigasi
Langkah pertama adalah menentukan struktur navigasi. Struktur navigasi
merupakan rancangan alur program. Dalam Aplikasi ini penulis menggunakan struktur
navigasi komposit, hal ini disesuaikan dengan isi dari web multimedia yang terdiri
dari berbagai menu dan tiap menu terdiri dari halaman-halaman. Peta navigasi yang
digambarkan berikut ini merupakan struktur detail dari navigasi untuk menjelajahi
setiap halaman web :
Halaman Utama
Rangka & Otot
Sistem peredaran
darah
Sistem Pernafasan
3
2
1
Sistem Pencernaan
Sistem Saraf
Sistem Indera
4
5
6
1
Sistem Peredaran darah
Organ dalam peredaran
2
Rangka tubuh manusia
Otot tubuh manusia
3
Sistem Pernafasan
Organ-organ Pernafasan
4
Sistem Pencernaan
Organ-organ Pencernaan
5
Mat
Hidung
Kulit
Teling
Lidah
6
Sistem safaf
Organ-organ Sistem Saraf
Gambar 2. Peta Navigasi web
Desain Antar Muka
Antar-muka merupakan jembatan antara setiap halaman menu terhadap halaman
lain yang saling terkait. Disain antar-muka lebih dikenal pembuatan storyboard
sebagai pedoman dalam pembuatan setiap halaman dari web multimedia ini. Setiap
halaman menu pada web membutuhkan disain Storyboard. Salah satu contoh
Storyboard Halaman Utama di tampilkan sebagai berikut :
1
6
2
3
4
5
7
8
Gambar 3. storyboard halaman utama
Keterangan:
1. Judul web multimedia
2. Tombol animatif untuk sistem peredaran darah
3. Tombol animatif untuk sistem pernafasan
4. Tombol animatif untuk rangka dan otot
5. Teks dengan latar belakang animasi untuk penjelasan tiap bagian menu
6. Tombol animatif untuk sistem pencernaan
7. Tombol animatif untuk sistem indera
8. Tombol animatif untuk sistem saraf.
Pembentukan Elemen-elemen
Sebelum memasuki tahap implementasi, terlebih dulu kita membuat elemenelemen multimedia yang dibutuhkan dalam pengembangan web multimedia ini.
a. Teks
Elemen teks dibuat dengan menggunakan tools yang disediakan secara
internal oleh Macromedia Flash. Elemen ini digunakan sebagai penjelasan
dari suatu tombol, gambar dan bagian dari suatu gambar.
b. Gambar
Elemen gambar yang digunakan dalam web multimedia ini berdasarkan
sumbernya terdiri dari:
1. Gambar yang di-copy menggunakan perangkat lunak snapshoots,
kemudian diedit sesuai dengan kebutuhan.
2. Gambar yang diambil dari proses 1 disimpan sebagai gambar baru
dengan tujuan khusus.
3. Gambar yang dibuat sendiri dengan menggunakan fasilitas gambar yang
disediakan oleh Flash.
Sedangkan penggunaan gambar dalam web ini antara lain:
1. Sebagai sumber gambar bagi animasi
2. Sebagai gambar peraga informasi yang ingin disampaikan
3. Sebagai gambar untuk tombol-tombol animatif
4. Sebagai gambar untuk latar belakang.
c. Animasi
Animasi yang digunakan dalam web ini dibuat dengan menggunakan fasilitas
yang disediakan oleh Macromedia Flas, yang terdiri dari:
1. Animasi Frame-by-frame, dimana setiap frame berisi gambar berbeda
yang menggambarkan suatu urut-urutan sehingga bila dijalankan seolaholah merupakan suatu animasi yang utuh.
2. Animasi Shape Tweening, animasi ini tidak memerlukan gambar yang
berbeda pada setiap frame, kita cukup menentukan awal gambar dan
frame serta akhir gambar dan frame dari animasi, kemudian Flash akan
menginterpolasi perubahan yang ada menjadi suatu animasi yang utuh.
3. Animasi Motion Tweening, animasi ini sangat berguna untuk membuat
animasi yang bergerak, berubah ukuran, berputar, dan memindahkan
elemen, baik itu tombol, gambar, maupun movie clips.
Authoring
Setelah elemen-elemen yang digunakan dalam web multimedia ini siap, kita
masuk pada tahap authoring, yaitu tahap menggabungkan semua elemen yang ada,
mengatur bentuk tampilan, penempatan elemen, alur aplikasi, pemunculan elemen,
pengontrolan, fasilitas akses yang diberikan kepada pengguna. Gambar yang ada,
dikonversi ke dalam simbol Flash dengan tipe yang sesuai dengan kegunaannya (Tiga
tipe simbol pada Flash). Kemudian diatur penempatan, dan pemunculan setiap simbol
pada Stage dimana simbol yang ada diletakan pada timeline dengan mengatur layer
dan frame mana simbol tersebut dimasukkan. Setelah semua proses ini selesai, tahap
berikutnya adalah pengaturan alur dengan menentukan kapan dan bagaimana suatu
simbol muncul pada stage dan apa yang akan dilakukan.
Untuk mengatur alur dan kontrol dari movie yang dibuat, Flash menyediakan
fasilitas pemrograman ActionScript. Secara sintaks, ActionScript hampir mirip dengan
PERL, dan seperti bahasa pemograman yang lain, ActionScript juga disusun dari blok
program, variabel, operator, kondisi, perulangan, ekspresi, subrutin, dan fungsi.
Contoh dari statement ActionScript adalah:
On (Roll Over)
Begin Tell Target ("/keterangan_klip")
Go to and Play ("darah")
End Tell Target
End On
Setelah semua halaman web pada flash selesai dibuat, untuk mengubah file
flash menjadi format HTML, digunakan fasilitas “publish” yang disediakan flash.
Selanjutnya harus dilakukan pengaturan tentang bentuk, kualitas, ukuran dari
halamannya yang akan divisualisasikan.
Hasil Implementasi
Beberapa tampilan hasil implementasi dapat diuraikan pada bagian ini. Gambar
4 memperlihatkan salah satu halaman dari sistem peredaran darah yang berisi
informasi tentang sistem peredaran darah. Disini Pengguna bisa mendapatkan
informasi yang lebih jelas dengan mengarahkan pointer mouse pada keterangan
gambar, dimana informasi yang terkait ditampilkan pada kotak sebelah kanan.
Kemudian jika pengguna ingin menuju kehalaman berikut, atau ke halaman menu
utama, atau kembali ke halaman menu sistem, tinggal memilih salah satu tombol
animatif yang ada di kanan bawah, dan menekan tombol kiri mouse.
Gambar 4. Sistem Peredaran darah.
Gambar 5 memperlihatkan halaman yang berisikan informasi tentang salah satu organ
dari sistem peredaran darah yaitu organ jantung. Disini pengguna bisa mendapatkan
informasi tentang sistem tubuh manusia dari judul sistem yang ada di bagian kiri,
kemudian informasi halaman yang ada disebelah judul sistem, kemudian pada gambar
jantung yang ada, pengguna bisa mendapatkan informasi yang lebih lengkap dengan
memilih bagian jantung yang diwakili oleh teks dimana informasi tersebut ditampilkan
pada kotak sebelah kanan. Seperti juga halaman sistem peredaran, pada halaman
sistem peredaran darah, disediakan ikon animatif sebagai navigator untuk pengguna
yang ingin kehalaman yang lain, ke menu utama, atau kembali ke menu sistem.
Gambar 5. Organ Jantung
KESIMPULAN
1. Web multimedia bersifat interaktif, dinamis, dan animatif sehingga tidak
membosankan dan dapat mendukung keinginan pengguna untuk mempelajari
materi yang disajikan dalam web ini.
2. Web multimedia yang dikembangkan, dapat di download oleh umum dimana saja,
kapan saja, dan siapa saja.
3. Web multimedia ini dapat digunakan untuk mendukung Pola belajar jarak jauh,
namun untuk itu perlu dikembangkan lebih jauhlagi. Disamping perkayaan materi
belajar maupun penambahan web engine.
DAFTAR PUSTAKA
1. LEPKOM, “Naskah Kursus INTERNET”, Universitas Gunadarma, Jakarta.
2. PRABATH K. ANDLEIGH, dll, “Multimedia System Design”, Prentice Hall PTR,
New Jersey, (1996)
3. ROBERT REINHARDT, dll, “Flash 4 Bible”, IDG Books Worldwide, New York,
(2000)
4. SUSAN L., dll, “Bagaimana Tubuh Anda Bekerja”, Elex Media Komputindo,
Jakarta, (1995)
5. GLASKAR TEAM, “CD-ROM Our Body”, Glaskar Compact, (1999)
HOME
KOMPUTASI DALAM SAINS DAN TEKNOLOGI NUKLIR XII