IMPLEMENTASI SCALABLE VECTOR GRAPHICS (SVG) TERHADAP APLIKASI e-LEARNING STUDI KASUS UNIVERSITAS TERBUKA (UT)
RUSTAM EFFENDY
SEKOLAH PASCASARJANA INSTITUT PERTANIAN BOGOR BOGOR 2007
PERNYATAAN MENGENAI TESIS DAN SUMBER INFORMASI
Dengan ini saya menyatakan bahwa Tesis Implementasi Scalable Vector Graphics (SVG) Terhadap Aplikasi e-Learning: Studi Kasus Universitas Terbuka (UT), adalah karya saya sendiri dan belum diajukan dalam bentuk apapun kepada Perguruan Tinggi mana pun. Sumber informasi yang berasal atau dikutip dari karya yang diterbitkan maupun tidak diterbitkan dari penulis lain telah disebutkan dalam teks dan dicantumkan dalam Daftar Pustaka di bagian akhir tesis ini.
Bogor, Juli 2007
Rustam Effendy NRP. G651044094
ABSTRAK RUSTAM EFFENDY. Implementasi Scalable Vector Graphics (SVG) Terhadap Aplikasi e-Learning: Studi Kasus Universitas Terbuka (UT). Di bawah bimbingan Syahrun Hamdani Nasution dan Irman Hermadi. Dunia pendidikan saat ini sudah tidak bisa dilepaskan lagi dari Internet. Konsep pendidikan jarak jauh e-Learning mulai menjadi alternatif bagi pihak penyelenggara pendidikan. Namun lambatnya akses dan besarnya file yang harus di download menjadi salah satu kendala utama sistem e-Learning. Scalable Vector Graphics (SVG) sebuah pemrograman grafik berbasis vektor yang memiliki kemampuan menciptakan gambar dengan ukuran file relatif lebih kecil dibandingkan format raster (bitmap) tanpa mengorbankan kualitas file yang dihasilkan. Teknik pemrograman ini tidak akan menghasilkan file yang mengalami perubahan kualitas meskipun mengalami proses resizing mupun zooming. Penelitian ini bertujuan untuk mempelajari kemampuan SVG dalam memberikan peningkatan kinerja sebuah halaman web. Terutama dari sisi kecepatan akses dan besarnya file aplikasi yang akan dihasilkan. Dari hasil komparasi dua format gambar yaitu format SVG dengan format JPG dan GIF tampak bahwa pengembangan SVG yang dilakukan dengan pemrograman manual secara langsung akan menghasilkan aplikasi yang memiliki ukuran file yang relatif lebih kecil dan kecepatan akses yang lebih tinggi. Kata kunci:
internet, e-Learning, Scalable Vector pemrograman berbasis vektor, raster
Graphics
(SVG),
ABSTRACT RUSTAM EFFENDY. Implementation of Scalable Vector Graphics (SVG) in eLearning Application: Case Study at Open University (UT). Under the direction of Syahrun Hamdani Nasution and Irman Hermadi. The world of education nowadays cant be separated from the internet. The concept of distance learning using the e-learning system starting to be an alternative for the education institutions. However, the low speed access and the enormous files which should be downloaded is one of the handicaps for this system. Scalable Vector Graphics (SVG) is a vector base programming which had the ability to create smaller size images compares to raster (bitmap) methods without sacrificing the quality of the images. This programming technique will not reduce the quality of images although after resizing or zooming. The aim of this research is to study the ability of SVG in order to give better performance for the web pages. Especially in speed of access and the size of the applications. From the comparison between SVG format application with JPG and GIF format application shows that SVG application give better speed access and smaller file size as long as the development use direct manual programming. Keywords:
internet, e-Learning, Scalable Vector Graphics (SVG) , vector base programming, raster graphics
© Hak cipta milik Institut Pertanian Bogor, tahun 2007 Hak cipta dilindungi Dilarang mengutip dan memperbanyak tanpa izin tertulis dari Institut Pertanian Bogor, sebagian atau seluruhnya dalam bentuk apa pun, baik cetak, fotokopi, microfilm, dan sebagainya
IMPLEMENTASI SCALABLE VECTOR GRAPHICS (SVG) TERHADAP APLIKASI e-LEARNING STUDI KASUS UNIVERSITAS TERBUKA (UT)
RUSTAM EFFENDY
Tesis Sebagai salah satu syarat untuk memperoleh gelar Magister Sains pada Program Studi Ilmu Komputer
SEKOLAH PASCASARJANA INSTITUT PERTANIAN BOGOR BOGOR 2007
Judul Tesis : IMPLEMENTASI SCALABLE VECTOR GRAPHICS (SVG)
Nama NIM
TERHADAP APLIKASI E-LEARNING STUDI KASUS UNIVERSITAS INDONESIA (UT) : Rustam Effendy : G651044094
Disetujui, Komisi Pembimbing
Dr. Drh. S. Hamdani Nasution Ketua
Irman Hermadi, S.Kom, M.S. Anggota
Diketahui, Ketua Program Studi Ilmu Komputer
Dr. Sugi Guritman
Tanggal ujian : 24 Juli 2007
Dekan Sekolah Pascasarjana Institut Pertanian Bogor
Prof. Dr. Ir. Khairil Anwar Notodiputro, MS.
Tanggal lulus : …………………
KATA PENGANTAR
Syukur alhamdulillah penulis panjatkan kehadirat Allah S.W.T, karena atas segala karunia-Nya penulisan tesis dengan judul Implementasi Scalable Vector Graphics (SVG) Terhadap Aplikasi e-Learning: Studi Kasus Universitas Terbuka dapat diselesaikan tepat pada waktunya. Tesis ini disusun sebagai salah satu syarat untuk memperoleh gelar Magister Sains pada Program Studi Ilmu Komputer, Sekolah Pascasarjana Institut Pertanian Bogor. Pada kesempatan ini penulis menyampaikan perhargaan dan ucapan terima kasih kepada : 1. Bapak Dr. drh. S. Hamdani Nasution selaku ketua komisi pembimbing dan bapak Irman Hermadi, S.Kom, M.S. selaku anggota komisi pembimbing yang telah meluangkan waktu, tenaga dan pikiran sehingga tesis ini dapat diselesaikan, 2. Bapak Firman Ardiansyah, S.Kom, M.Si selaku dosen penguji yang telah memberikan arahan dan masukkan untuk perbaikan tesis ini, 3. Bapak Dr. Sugi Guritman selaku Ketua Program Studi Ilmu Komputer atas kerjasamanya selama studi dan penelitian, 4. Kedua orang tua penulis yang selalu memberikan doa dan restunya, 5. Ay Ay Yuliani yang selalu menyemangati agar tesis ini terselesaikan, 6. Saudara Kun Pamungkas yang selalu bersedia membantu mencarikan literatur dan software aplikasi yang penulis perlukan serta bersedia meminjamkan Notebook bagi penulis, 7. Staff Pengajar Program Studi Ilmu Komputer yang telah memberi bekal pengetahuan. 8. Staff Departemen Ilmu Komputer Institut Pertanian Bogor atas kerjasamanya selama studi dan penelitian, 9. Staff Pusat Komputer Universitas Terbuka (UT) atas kerjasamanya selama penelitian,
10. Rekan mahasiswa Program Studi Ilmu Komputer, Ade, Inay, bu Tiwi, mas Unggul, mas Yuri, mas Aji, dan Sophan. Dan para senior bung Jeff, pak Mahyus, 11. Dan seluruh pihak lain yang tidak dapat penulis sebutkan namanya satu persatu.. Penulis menyadari masih banyak kekurangan dalam penyajian tesis ini, Meskipun demikian penulis berharap semoga tesis ini bermanfaat bagi bidang ilmu komputer dan dunia pendidikan.
Bogor, Juli 2007
Rustam Effendy
RIWAYAT HIDUP
Penulis dilahirkan di Surabaya pada tanggal 16 Juni 1975 dari ayah bernama A. Muin Tangnga dan ibu Nurhaedah Purwati. Penulis merupakan putra ke-dua dari tiga bersaudara. Pada tahun 1994 penulis lulus dari SMA Negeri 1 Bogor. Pada tahun 1998 berhasil menyelesaikan pendidikan Diploma-3 Program Studi Instrumentasi dan Elektronika pada Jurusan Fisika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Indoensia. Dan pada tahun 2002 menyelesaikan pendidikan Strata-1 Program Studi Teknik Sistem Komputer, Jurusan Teknik Elektro, Fakultas Teknologi Industri, Universitas Jayabaya Jakarta. Penulis diterima sebagai staf pengajar Fisika pada Lembaga Bimbingan Belajar Ganesha Operation pada tahun 1998 sampai dengan sekarang.
DAFTAR ISI
Halaman DAFTAR TABEL .............................................................................................. xii DAFTAR GAMBAR ......................................................................................... xiii DAFTAR LAMPIRAN ...................................................................................... xv PENDAHULUAN Latar Belakang .......................................................................................... Tujuan Penelitian ...................................................................................... Ruang Lingkup Penelitian ......................................................................... Manfaat Penelitian ....................................................................................
1 2 3 3
TINJAUAN PUSTAKA e-Learning .................................................................................................. 4 Raster atau Bitmap Grafik.......................................................................... 6 Vector Grafik.............................................................................................. 8 eXtensible Markup Language (XML)......................................................... 10 Scalable Vector Graphics (SVG) ............................................................... 11 METODOLOGI Tahapan Penelitian .................................................................................... Kajian Pustaka................................................................................... Analisis Masalah ............................................................................... Pengumpulan Data Awal ................................................................. Pengembangan Model....................................................................... Pengumpulan Data Penelitian .......................................................... Komparasi ......................................................................................... Analisis Hasil ....................................................................................
19 19 20 20 20 21 21 22
Peralatan Yang Digunakan ........................................................................ 22 Perangkat Keras (hardware) ............................................................. 22 Perangkat Keras (software) ............................................................... 23 Tempat dan Waktu Penelitian ................................................................... 23 PENGEMBANGAN MODEL Pengembangan Model................................................................................ 24 Pengembangan Halaman Modul Kuliah Mikrobiologi mikro_modul5.htm ............................................................................ 24 Pengembangan model file materi kuliah Matematika semigrup.htm..................................................................................... 28 Menyatukan File-File SVG dengan HTML............................................... 31 Menyatukan file-file SVG dengan file mikro_modul5.htm ............... 32
Menyatukan file-file SVG dengan file semigrup.htm........................ 35 PENGUMPULAN DATA DAN ANALISIS Pengumpulan Data Besar File dan Komparasi .......................................... 38 Modul Kuliah Mikrobiologi mikro_modul5.htm.............................. 38 Modul Kuliah Matematika semigrup.htm ......................................... 40 Pengumpulan Data Terhadap Waktu Akses............................................... 43 Pengumpulan Data Secara Online Dan Analisis Data Terhadap Halaman semigrup.htm ..................................................................... 44 Pengumpulan Data Secara Online Dan Analisis Data Terhadap Halaman mikro_modul5.htm ............................................................. 44 Komparasi Rata-Rata Waktu Akses Pada Tiga Sesi Pengambilan Data ........................................................................................................... 56 Halaman semigrup.htm ..................................................................... 56 Halaman mikro_modul5.htm ............................................................ 58 Pengumpulan Data Secara Offline Dan Analisis Data............................... 59 Halaman semigrup.htm ..................................................................... 59 Halaman mikro_modul5.htm ............................................................ 60 KESIMPULAN DAN SARAN Kesimpulan ................................................................................................ 63 Saran........................................................................................................... 64 DAFTAR PUSTAKA ........................................................................................ 65
DAFTAR TABEL
Halaman 1
Timeline SVG. Sumber: World Wide Web Consortium ((2) 2006) ..............
2
Performa beberapa SVG viewer (World Wide Web Consortium (4)
2
2006) ............................................................................................................. 13 3
Beberapa event yang tesedia dalam SVG (World Wide Web Consortium (1) 2006) ................................................................................... 16
4
Atribut-atribut yang digunakan untuk komparasi ........................................ 22
5
Perangkat lunak yang digunakan ................................................................. 23
6
Besar file mikro_modul5.htm yang dihasilkan dalam format SVG .............. 38
7
Besar file mikro_modul5.htm yang dihasilkan dalam format JPG dan GIF ......................................................................................................... 39
8
Besar file semigrup.htm yang dihasilkan dengan format SVG...................... 40
9
Besar file semigrup.htm yang dihasilkan dengan format JPG dan GIF ....... 41
10 Komparasi total besar file semigrup.htm ...................................................... 42 11 Komparasi total besar file mikro_modul5.htm .............................................. 42 12 Pengumpulan data terhadap file semigrup.htm (07:00 – 17:00) ................... 45 13 Pengumpulan data terhadap file semigrup.htm (17:00 – 23:00) ................... 47 14 Pengumpulan data terhadap file semigrup.htm (23:00 – 07:00) ................... 49 15 Pengumpulan data terhadap file mikro_modul5.htm (07:00 – 17:00).......... 51 16 Pengumpulan data terhadap file mikro_modul5.htm (17:00 – 23:00).......... 53 17 Pengumpulan data terhadap file mikro_modul5.htm (23:00 – 07:00).......... 55 18 Komparasi waktu akses semigrup.htm.......................................................... 57 19 Komparasi waktu akses mikro_modul5.htm ................................................. 58 20 Pengumpulan data secara offline terhadap file semigrup.htm....................... 59 21 Pengumpulan data secara offline terhadap file mikro_modul5.htm .............. 61
DAFTAR GAMBAR Halaman 1
Kualitas format bitmap saat dilakukan perbesaran (resizing) ......................
7
2 3
Kelebihan vektor terhadap bitmap saat diletakkan diatas objek lain ............ 8 r Vektor v yang menghubungkan titik i dan j ............................................... 11
4
Kualitas yang hilang pada file dengan format JPG apabila dilakukan perbesaran (zooming in) ................................................................................ 12
5
Kualitas gambar file .svg sama sekali tidak berkurang saat di lakukan perbesaran (zooming in) ................................................................................ 12
6
Tampilan dari script circle.svg yang dibuka pada internet explorer............. 14
7
Animasi pergerakan segitiga sepanjang jalur (a) pada detik kenol, (b) pada detik ketiga, (c) pada detik keenam ................................................ 18
8
Diagram Alir Tahapan Penelitian.................................................................. 19
9
Bentuk dasar dari tombol navigasi (btn_menu.svg) ...................................... 24
10 Tombol navigasi (btn_menu.svg) yang telah melalui filter efect .................. 25 11 Tampilan script glikolisis.svg pada jendela browser Internet Explorer........ 27 12 Aplikasi sMArTH (smarth.svg) .................................................................... 28 13 Elemen menu pada semigrup.svg berformat JPG ......................................... 29 14 Elemen menu pada semigrup.svg berformat SVG......................................... 30 15 mikro_modul5.htm pada jendela browser Microsoft IE, bagian 1 ................ 33 16 mikro_modul5.htm pada jendela browser Microsoft IE, bagian 2 ................ 34 17 semigrup.htm pada jendela browser Microsoft IE, bagian 1 ........................ 36 18 semigrup.htm pada jendela browser Microsoft IE, bagian 2 ........................ 36 19 InetBench ver 1.8 .......................................................................................... 43 20 Grafik file semigrup.htm (07:00 – 17:00) ..................................................... 46 21 Grafik file semigrup.htm (17:00 – 23:00) ..................................................... 48 22 Grafik file semigrup.htm (23:00 – 07:00) ..................................................... 50 23 Grafik file mikro_modul5.htm (07:00 – 17:00)............................................. 52 24 Grafik file mikro_modul5.htm (17:00 – 23:00)............................................. 54 25 Grafik file mikro_modul5.htm (23:00 – 07:00)............................................. 56
26 Komparasi Rata-rata Waktu Akses file semigrup.svg .................................. 57 27 Komparasi Rata-rata Waktu Akses file mikro_modul5.svg ......................... 58 28 Grafik file semigrup.htm (offline test)........................................................... 60 29 Grafik file mikro_modul5.htm (offline test) .................................................. 62
DAFTAR LAMPIRAN
Halaman 1
Script btn_menu.svg pada mikro_modul5.htm .............................................. 68
2
Script glikolisis.svg pada mikro_modul5.htm ............................................... 69
3
Script gliserol.svg pada mikro_modul5.htm.................................................. 69
4
Script protein.svg pada mikro_modul5.htm .................................................. 69
5
Script krebs.svg pada mikro_modul5.htm ..................................................... 70
6
Script trigliserida.svg pada mikro_modul5.htm............................................ 70
7
Contoh logfile software iNetBench terhadap file mikro_modul5.htm format SVG secara offline tes ........................................................................ 71
8
Contoh logfile software iNetBench terhadap file mikro_modul5.htm format HTML secara offline tes..................................................................... 71
9
Contoh logfile software iNetBench terhadap file mikro_modul5.htm format SVG secara online tes ........................................................................ 72
10 Contoh logfile software iNetBench terhadap file mikro_modul5.htm format HTML secara online tes ..................................................................... 72 11 Contoh logfile software iNetBench terhadap file semigrup.htm format SVG secara offline tes.................................................................................... 73 12 Contoh logfile software iNetBench terhadap file semigrup.htm format HTML secara offline tes ................................................................................ 75 13 Contoh logfile software iNetBench terhadap file semigrup.htm format SVG secara online tes .................................................................................... 77 14 Contoh logfile software iNetBench terhadap file semigrup.htm format HTML secara online tes................................................................................. 79
