## APLIKASI E-NOTETAKING BERBASISKAN MULTIMEDIA UNTUK KEGIATAN PENCATATAN
Budi Yulianto; Arizka Pramita; M. Fadly F. N.; Meidyta H. N.
Computer Science Department, School of Computer Science Binus University Jl. K.H. Syahdan No. 9, Palmerah, Jakarta Barat 11480 laboratory@binus.ac.id

## ABSTRACT
This article presents analysis and design of multimedia based e-notetaking application. The goals of the research are to optimize audio-visual usage in taking note, to organize notes to be tidied and categorized, and to make easy copying and sharing notes to other users. Output of the research is an e-notetaking application implemented on laptops. The designed e-notetaking application has features for users in taking notes by using notebook or netbook as easily as taking notes by using book.
Keywords: e-notetaking, multimedia, audio-visual, notebook, netbook

## ABSTRAK
Artikel ini membahas analisis dan perancangan perangkat lunak e-notetaking (pencatatan) berbasiskan multimedia. Adapun tujuan penelitian ini yaitu mengoptimalkan penggunaan media audio-visual dalam kegiatan pencatatan, mengorganisir catatan agar lebih rapi dan terstruktur, serta memudahkan proses duplikasi dan sharing catatan kepada pengguna lain. Hasil penelitian merupakan perancangan aplikasi e-notetaking yang diimplementasikan pada komputer jinjing. Aplikasi e-notetaking yang dirancang memiliki fitur yang dapat memudahkan pengguna dalam melakukan proses pencatatan menggunakan komputer jinjing seperti notebook/netbook dengan rancangan menyerupai buku catatan kertas.
Kata kunci: e-notetaking, multimedia, audio-visual, notebook, netbook

## PENDAHULUAN
Perkembangan teknologi informasi memberikan dampak yang besar dalam banyak aspek kehidupan, salah satunya pada kegiatan belajar. Munculnya teknologi digital disertai penggunaan notebook/netbook pada kehidupan sehari-hari mengarahkan proses pencatatan pada digital notetaking ( e-notetaking ).
Aplikasi e-notetaking diperlukan untuk memenuhi kebutuhan digital mahasiswa secara khusus saat mencatat materi kuliah. Melalui e-notetaking , mahasiswa dapat menyisipkan file multimedia yang berhubungan dengan materi tertentu ke dalam halaman pada aplikasi. Mahasiswa juga dapat dengan mudah bertukar informasi catatan kepada mahasiswa atau pihak lain. E-notetaking dapat menjadi alternatif pencatatan di era teknologi digital dengan meminimalisasi penggunaan kertas dan mengoptimalkan penggunaan multimedia sebagai pengumpulan informasi dalam pencatatan (Wax, 2011).
Definisi multimedia yang dimaksud mencakup penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi dan video dengan alat bantu dan koneksi sehingga pengguna dapat bernavigasi, berinteraksi, berkarya dan berkomunikasi (Hofstetter, 2001). Elemen- elemen multimedia mencakup teks, suara, gambar, animasi, dan video.
Teks adalah bentuk data multimedia yang paling mudah disimpan dan dikendalikan. Secara umum ada empat macam teks yaitu teks cetak, teks hasil scan, teks elektronik, dan hypertext . Suara adalah kompresi mekanikal atau gelombang longitudinal yang merambat melalui suatu media. Media atau zat perantara ini dapat berupa zat cair, padat, dan gas. Citra atau gambar atau bayangan atau imaji adalah benda buatan manusia, biasanya dua dimensi, yang mempunyai kemiripan dengan suatu objek.
Animasi, atau disebut dengan film animasi, adalah film yang merupakan hasil dari pengolahan gambar tangan sehingga menjadi gambar yang bergerak. Pada awal penemuannya, film animasi dibuat dari berlembar-lembar kertas gambar yang kemudian di-"putar" sehingga muncul efek gambar bergerak. Empat jenis animasi yang dapat digunakan yaitu Frame Animation, Vector Animation, Computational Animation, dan Morphing. Video adalah teknologi pengiriman sinyal elektronik dari suatu gambar bergerak. Aplikasi umum dari sinyal video adalah televisi, tetapi dapat pula digunakan dalam aplikasi lain di dalam bidang teknik, saintifik, produksi dan keamanan.
Tujuan penelitian ini adalah untuk mengoptimalkan penggunaan media audio-visual dalam kegiatan belajar mengajar di dalam kelas, memudahkan proses mencatat materi kuliah dan mengorganisir catatan sehingga lebih rapi dan terstruktur, memudahkan duplikasi dan sharing catatan kepada mahasiswa atau pihak lain, serta menarik minat mahasiswa dalam mencatat (Dunkel  dan Pialorsi, 2005).
Manfaat penelitian ini adalah untuk meminimalkan penggunaan buku atau kertas untuk mencatat materi kuliah, aplikasi dapat digunakan tidak hanya untuk perkuliahan, namun juga untuk aktivitas pencatatan lain seperti rapat.

## METODE
Metode perancangan yang digunakan meliputi studi pustaka dan studi lapangan. Pada metode studi pustaka dilakukan pengumpulan bahan-bahan pustaka baik yang dilakukan di perpustakaan maupun pencarian melalui internet. Metode ini berguna dalam membantu memperdalam pembahasan
materi, pembuatan program aplikasi, dan penyusunan laporan penelitian. Pada metode studi lapangan dilakukan penambahan data dari pengguna e-notetaking yang sudah ada. Metode ini berguna untuk mengetahui kebutuhan pengguna, model tampilan yang disukai, dan kemudahan pengoperasian (Pressman, 2001).
Metode pengembangan perangkat lunak yang digunakan adalah Unified Modified Language (UML) , Extensible Markup Language (XML) , dan storyboard . Perancangan menggunakan pendekatan UML terdiri dari Class Diagram dan Use Case Diagram . Perancangan XML menggunakan metode perantara untuk menyimpan project yang telah dibuat dan membuka project yang telah disimpan. Sedangkan pada storyboard , perancangan difokuskan pada desain antarmuka pengguna (Shneiderman dan Plaisant, 2005).
UML adalah sebuah bahasa yang telah menjadi standar dalam industri untuk memvisualisasi, menspesifikasi, merancang, dan mendokumentasi sistem piranti lunak (Booch et al, 1999). UML memberikan standar penulisan sebuah sistem blueprint , yang meliputi konsep bisnis proses, penulisan kelas-kelas dalam bahasa program yang spesifik, skema database, dan komponen-komponen yang diperlukan dalam sistem piranti lunak.
Teori bahasa membahas bahasa formal ( formal language ), terutama untuk kepentingan perancangan kompilator ( compiler ) dan pemroses naskah ( text processor ). Bahasa formal adalah kumpulan kalimat. Semua kalimat dalam sebuah bahasa dibangkitkan oleh sebuah tata bahasa ( grammar ) yang sama. Automata (Hopcroft et al, 2001) adalah mesin abstrak yang dapat mengenali, menerima, atau membangkitkan sebuah kalimat dalam bahasa tertentu. Salah satu contoh penerapan dari automata adalah XML.
XML ( Extensible Markup Language ) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML bertujuan untuk menggambarkan semantik teks, dan bukan bertujuan untuk menggambarkan format dokumen. Sebagai contoh XML, teks “12 Maple St.” terlihat seperti sebuah alamat. Dalam XML, tags akan melingkupi sebuah frase yang direpresentasikan sebuah alamat: <ADDR>12 Maple St.</ADDR>
Tidak dapat dibenarkan bahwa <ADDR> pasti bermakna alamat dari suatu bangunan. Apabila terdapat dokumen mengacu pada alokasi memori, pengecualian tag <ADDR> akan merujuk ke suatu alamat memori. Untuk membuat jelas perbedaan tag dan kemungkinan struktur agar dapat terlihat di antara pasangan yang sesuai dari tag , dibangunlah standar dalam bentuk sebuah DTD ( Document Type Definition ). DTD adalah suatu context-free grammar , dengan notasi berupa gambaran variabel dan produksi.
Contoh sederhana DTD (Griffith (2002): penjual komputer bersama-sama membuat standar DTD yang dapat digunakan secara umum, dalam web, untuk mendeskripsikan macam-macam PC yang terjual. Setiap deskripsi dari sebuah PC akan memiliki sebuah nomor dan detail tentang fitur-fitur dari modelnya, misalnya RAM, kapasitas disk, dan sebagainya.
<!DOCTYPE PcSpecs [ <!ELEMENT PCS (PC*)> <!ELEMENT PC (MODEL, PRICE, PROCESSOR, RAM, DISK+)> <!ELEMENT MODEL (\#PCDATA)> <!ELEMENT PRICE (\#PCDATA)> <!ELEMENT PROCESSOR (MANF, MODEL, SPEED)> <!ELEMENT MANF (\#PCDATA)> <!ELEMENT MODEL (\#PCDATA)> <!ELEMENT SPEED (\#PCDATA)>
<!ELEMENT RAM (\#PCDATA)> <!ELEMENT DISK (HARDDISK | CD | DVD)> <!ELEMENT HARDDISK (MANF, MODEL, SIZE)> <!ELEMENT SIZE (\#PCDATA)> <!ELEMENT CD (SPEED)> <!ELEMENT DVD (SPEED)> ]>
Keterangan untuk contoh di atas:
Nama dari DTD yaitu PcSpecs. Elemen pertama yang seperti simbol pertama dari CFG adalah PCS (daftar dari spesifikasi PC). PC* mendefinisikan bahwa suatu PCS adalah nol atau lebih dari masukan PC. Elemen PC terdiri dari lima macam rangkaian. Empat yang pertama dari elemen lainnya menghubungkan ke model, price, processor typ e, dan RAM dari PC. Terakhir adalah DISK+ menyatakan bahwa akan terdapat satu atau lebih dari masukan untuk suatu PC. MODEL, PRICE, dan RAM adalah jenis teks yang sederhana. Namun, PROCESSOR memiliki lebih struktur yaitu terdiri dari manufacturer, model, dan speed. Suatu masukan DISK yang paling kompleks. Pertama, suatu disk juga adalah suatu hard disk , CD, atau DVD, sebagai indikasi dengan aturan elemen DISK. Hard disk memiliki struktur dalam manufacturer, model, dan size yang dispesifikasikan, sedangkan CD dan DVD direpresentasikan hanya dengan kecepatannya.
Adapun notetaking atau mencatat adalah praktek pencatatan informasi diambil dari sumber transien, seperti diskusi lisan pada pertemuan, atau kuliah. Electronic Notetaking ( e-notetaking ) adalah sistem yang menyediakan akses yang hampir bersamaan untuk informasi komunikasi dengan orang- orang yang tuli dan sulit mendengar, memfasilitasi  partisipasi yang setara dengan pendengaran kolega, rekan kerja, maupun teman sekelas. E-notetaking sering digunakan dalam sesi pendidikan atau pelatihan, tetapi juga dapat digunakan pada jadwal perawatan kesehatan, rapat, atau interview.

## HASIL DAN PEMBAHASAN

## Perancangan Layar
Aplikasi e-notetaking yang dirancang bertujuan untuk transformasi proses pencatatan manual menjadi digital dan dilengkapi dengan komponen atau fitur yang memudahkan pengguna. Rancangan menu (Gambar 1) dan pane disusun menyerupai aplikasi document processing Microsoft Word yang berbasiskan pada konsep ribbon (pada menu dan sub-menu ) dan small window (pada pane ).
Gambar 1 . Perancangan menu.
Pada setiap menu ( File, Insert, View , dan About ) terdapat sub-menu yang diletakan berjajar dengan konsep ribbon . Sub-menu (Gambar 2) ini merupakan command button yang memiliki fungsi tertentu seperti penyisipan teks ( text ), gambar ( image ), atau penulisan ( paint ).
Gambar 2. Perancangan sub-menu.
Pane (Gambar 3) dirancang menggunakan konsep small window yang tampil pada saat object tertentu (seperti image ) diaktifkan. Komponen yang muncul pada pane adalah unik sesuai dengan property dari object yang diaktifkan.
Gambar 3 . Perancangan pane window.

## Perancangan UML
Perancangan UML terdiri dari Class Diagram , dan Use Case Diagram . Pada Class Diagram , sistem ditampilkan dalam notasi-notasi class berdasarkan konsep object-oriented (Booch et al, 1999). Pada Use Case Diagram , sistem digambarkan dari sisi aktor. Aktor dalam sistem ini merupakan pengguna ( user ) dari aplikasi e-notetaking .
Class Diagram di bawah ini (Gambar 4)menggambarkan struktur pemodelan dari sistem yang dibangun. Setiap class mewakili setiap entity pada sistem dan terdiri dari properti serta perilaku dari class tersebut. Sebagai contoh, Class User memiliki perilaku untuk menampilkan ( display ) aplikasi. Class ApplicationProject memiliki atribut window sebagai tampilan, x dan y sebagai pengatur posisi koordinat, dan button sebagai komponen untuk melakukan aksi, serta memiliki perilaku createNewProject untuk membuat project baru, openProject dan saveProject untuk membuka dan menyimpan project , openHelp untuk membuka fasilitas bantuan/manual, closeProject dan closeApplication untuk menutup project dan aplikasi.
Gambar 4 . Class diagram.
Use Case Diagram di bawah ini (Gambar 5) menggambarkan pemodelan dari apa yang aktor ( user ) dapat lakukan pada sistem yang dibangun. Pengguna dapat membuat project baru, membuka project yang sudah ada, menyisipkan komponen multimedia ke dalam catatan, menghapus atau memindahkan komponen, menyimpan dan menutup project .

## Perancangan XML dan DOM pada I/O
Sistem penyimpanan file pada aplikasi e-notetaking menggunakan metode parser XML dan DOM (Gambar 6). Metode ini diterapkan pada saat membaca project yang sudah ada, atau pada saat melakukan proses penyimpanan ( save ) project .
Gambar 5. Use case diagram.
Gambar 6. Perancangan XML dan DOM pada I/O.
Format output pada file project yang di-save melalui mekanisme XML/DOM sebagai berikut: <BeeProject> <Text>A <italic>magic</italic>word</stmt> <Image> Image01 </Image> <PDF> PDF01 </PDF> </BeeProject>
Pada saat pengguna memulai pembuatan project yang baru, aplikasi akan membuatkan struktur folder (Gambar 7) dan menyiapkan halaman kosong. Apabila pengguna melakukan aktivitas penyisipan komponen multimedia, maka file sumber akan di- copy ke struktur folder dan data lokasi file ( path ) akan disimpan dalam memori.
Gambar 7 . Struktur Folder Pada Pembuatan Project

## Implementasi Piranti Lunak
Aplikasi e-notetaking dapat dijalankan pengguna tanpa memerlukan proses instalasi. Aplikasi akan menyediakan halaman utama sehingga pengguna dapat langsung memulai proses pencatatan. Pengguna dapat memadukan aplikasi dengan perangkat mouse-pen agar lebih memudahkan pencatatan menyerupai aktivitas manual.
Pengguna dapat memilih format tampilan halaman apakah menyerupai kertas kosong  atau blank page (Gambar 8) atau kertas bergaris  atau folio page (Gambar 9).
Penyisipan teks (Gambar 10) dilakukan apabila pengguna lebih memilih melakukan pencatatan menggunakan ketikan ( keyboard ). Pengguna dapat melakukan format atau memberikan style pada teks agar tampak lebih menarik.
Gambar 8 . Tampilan aplikasi blank page.
Gambar 9 . Tampilan aplikasi folio page.
Gambar 10 .Tampilan aplikasi penyisipan teks.
Fitur paint (Gambar 11) digunakan apabila pengguna lebih memilih melakukan pencatatan menggunakan metode manual (tulisan). Pada saat penggunaan fitur ini, pengguna diharapkan
menggunakan perangkat bantu seperti mouse-pen agar memudahkan pengguna dalam mencatat. Fitur audio (Gambar 12) dan video (Gambar 13) diperlukan pada saat pengguna ingin menyisipkan komponen multimedia berupa suara atau video . Suara dan video yang disisipkan dapat berupa hasil rekaman pada saat proses perkuliahan.
Gambar 11. Tampilan aplikasi penyisipan paint.
Gambar 12. Tampilan aplikasi penyisipan audio.
Gambar 13. Tampilan aplikasi penyisipan video.
Dokumen populer yang sering digunakan seperti Word (Gambar 14), Excel (Gambar 15), PowerPoint (Gambar 16), PDF (Gambar 17), ataupun file teks biasa (Gambar 18), dapat disisipkan oleh pengguna. Fitur ini tentunya sangat membantu pengguna dalam mengintegrasikan bahan-bahan perkuliahan.
Gambar 14. Tampilan aplikasi penyisipan komponen Microsoft Word.
Gambar 15. Tampilan aplikasi penyisipan komponen Microsoft Excel.
Gambar 16. Tampilan aplikasi penyisipan komponen Microsoft PowerPoint.
Gambar 17. Tampilan aplikasi penyisipan komponen PDF.
Gambar 18. Tampilan aplikasi penyisipan komponen Text File.

## Evaluasi
Aplikasi e-notetaking dapat memudahkan pengguna dalam mencatat secara digital, berbagi informasi dengan yang pengguna lainnya, dapat  dioperasikan pada berbagai jenis sistem operasi. Aplikasi e-notetaking dikaji melalui evaluasi (Tabel 1) terhadap aplikasi sejenis pada beberapa aspek yang umum.

## Table 1
Evaluasi Aplikasi E-notetaking Sejenis
Komponen Aplikasi Hasil Aplikasi Pembanding Microsoft Word OpenOffice Windows Journal Multi-platform Ya, dapat dikembangkan Tidak Ya Tidak Freeware Ya Tidak  Ya Tidak, built-in dalam Windows 7 Insert Text Ya Ya Ya Ya Insert Paint Ya Ya, dengan plugin Tidak Ya View Image Ya Ya Ya Ya View PDF Ya Ya Tidak Ya Open Audio Ya Ya Ya Ya
Open Video Ya Ya Ya Ya Add-in Tidak Ya Ya  Tidak Print Tidak Ya Ya  Ya Setting Tidak Ya Ya Ya Khusus untuk pencatatan manual Ya Tidak  Tidak Ya

## PENUTUP
Simpulan yang diperoleh dari penelitian ini yaitu aplikasi e-notetaking berbasiskan multimedia mencakup fitur text , paint , image , audio , dan video yang merupakan fitur umum yang sering digunakan pengguna saat melakukan proses pencatatan secara digital; aplikasi memiliki fitur yang dapat memudahkan pengguna dalam mencatat secara digital sehingga dapat meminimalkan penggunaan buku catatan ( paperless ).
Saran untuk penelitian dan pengembangan lebih lanjut yaitu: (1) penambahan fitur print agar pengguna dapat mencetak hasil catatannya bila diperlukan; (2) penambahan database untuk penyimpanan setting dan konfigurasi pengguna, penambahan fitur add-on ; (3) penerapan metode keamanan ( enkripsi ) dan kompresi data untuk efisiensi penggunaan sumber daya memori serta tingkat keamanan data yang lebih baik; (4) kompilasi ulang pada sistem operasi lain ( multiplatform ); (5) penerapan pada tablet PC dan sejenisnya.

## DAFTAR PUSTAKA
Booch, G., Rumbaugh, J. & Jacobson, Ivar. (1999). The Unified Modeling Language User Guide. Massachusetts: Addison Wesley Longman.
Booch, G., Rumbaugh, J. & Jacobson, Ivar. (1999). The Unified Modeling Language Reference Manual . MA: Addison Wesley Longman.
Dunkel, Patricia & Pialorsi, Frank. (2005). Advanced Listening Comprehension: Developing Aural and Notetaking Skills . Singapore: Thomson Learning.
Griffith, Arthur. (2002). Java, XML, and JAXP . New York: John Wiley & Sons.
Hofstetter, Fred T. (2001). Multimedia Literacy , (3 rd ed.). New York: McGraw-Hill USA.
Hopcroft, J. E., Motwani, R. & dan Ullman, J. D. (2001). Introduction to Automata Theory, Languages, and Computation , (2 nd ed.). Massachusetts: Addison-Wesley.
Pressman, Roger S. (2001). Software Engineering: A Practitioner’s Approach , (5 th ed.). Singapore:
McGraw-Hill.
Shneiderman, Ben & Plaisant, Catherine. (2005). Designing The User Interface: Strategies for Effective Human-Computer Interaction, (4 th ed.). Massachusetts: Addison-Wesley.
Wax, Dustin. (2011). Advice for Students: Taking Notes that Work . Diakses dari http://www.lifehack.org/articles/productivity/advice-for-students-taking-notes-that-work.html .