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
