STUDI KASUS UNIVERSITAS TERBUKA (UT)
RUSTAM EFFENDY
SEKOLAH PASCASARJANA
INSTITUT PERTANIAN BOGOR
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. 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 Graphics (SVG),
ABSTRACT
RUSTAM EFFENDY. Implementation of Scalable Vector Graphics (SVG) in e-Learning 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.
©
Hak cipta milik Institut Pertanian Bogor, tahun 2007
Hak cipta dilindungi
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
STUDI KASUS UNIVERSITAS INDONESIA (UT)
Nama : Rustam Effendy
NIM : G651044094
Disetujui,
Komisi Pembimbing
Dr. Drh. S. Hamdani Nasution Irman Hermadi, S.Kom, M.S.
Ketua Anggota
Diketahui,
Ketua Program Studi Dekan Sekolah Pascasarjana
Ilmu Komputer Institut Pertanian Bogor
Dr. Sugi Guritman Prof. Dr. Ir. Khairil Anwar Notodiputro, MS.
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
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
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
STUDI KASUS UNIVERSITAS TERBUKA (UT)
RUSTAM EFFENDY
SEKOLAH PASCASARJANA
INSTITUT PERTANIAN BOGOR
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. 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 Graphics (SVG),
ABSTRACT
RUSTAM EFFENDY. Implementation of Scalable Vector Graphics (SVG) in e-Learning 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.
©
Hak cipta milik Institut Pertanian Bogor, tahun 2007
Hak cipta dilindungi
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
STUDI KASUS UNIVERSITAS INDONESIA (UT)
Nama : Rustam Effendy
NIM : G651044094
Disetujui,
Komisi Pembimbing
Dr. Drh. S. Hamdani Nasution Irman Hermadi, S.Kom, M.S.
Ketua Anggota
Diketahui,
Ketua Program Studi Dekan Sekolah Pascasarjana
Ilmu Komputer Institut Pertanian Bogor
Dr. Sugi Guritman Prof. Dr. Ir. Khairil Anwar Notodiputro, MS.
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
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
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
Halaman
DAFTAR TABEL ... xii
DAFTAR GAMBAR ... xiii
DAFTAR LAMPIRAN ... xv
PENDAHULUAN Latar Belakang ... 1
Tujuan Penelitian ... 2
Ruang Lingkup Penelitian ... 3
Manfaat Penelitian ... 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 ... 19
Kajian Pustaka... 19
Analisis Masalah ... 20
Pengumpulan Data Awal ... 20
Pengembangan Model... 20
Pengumpulan Data Penelitian ... 21
Komparasi ... 21
Analisis Hasil ... 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 filesemigrup.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
Halaman
1 Timeline SVG. Sumber: World Wide Web Consortium ((2) 2006) ... 2
2 Performa beberapa SVG viewer (World Wide Web Consortium (4)
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
DAFTAR GAMBAR
Halaman
1 Kualitas format bitmap saat dilakukan perbesaran (resizing) ... 7
2 Kelebihan vektor terhadap bitmap saat diletakkan diatas objek lain ... 8
3 Vektor vr 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
28 Grafik file semigrup.htm (offline test)... 60
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
A. Latar Belakang
Belakangan ini semakin meluas penggunaan dan pemanfaatan Internet
dalam kehidupan sehari-hari. Begitu pula dalam dunia pendidikan, bermunculan
penggunaan Internet bagi penyelenggaraan pendidikan yang salah satunya dikenal
dengan istilah seperti e-Learning. e-Learning dapat didefinisikan sebagai sebuah
bentuk teknologi informasi yang diterapkan dibidang pendidikan dalam bentuk
maya, digunakan untuk mendukung usaha-usaha pengajaran melalui teknologi
elektronik diinternet dimana proses belajar-mengajar tidak dilakukan melalui tatap
muka secara fisik akan tetapi melalui media Internet (Hartanto & Purbo 2001).
Fokus dari sebuah e-Learning lebih pada efisiensi proses belajar-mengajar.
Universitas Terbuka (UT) merupakan salah satu perguruan tinggi
penyelenggara pendidikan jarak jauh (PJJ) yang menerapkan metode e-Learning
dengan istilah Sistem Belajar Jarak Jauh (SBJJ). Beberapa kendala ditemui UT
dalam menyelenggarakan model pembelajaran SBJJ adalah banyaknya keluhan
yang disampaikan para mahasiswa akan lambatnya kecepatan akses halaman Web
UT dan besarnya file-file atau modul-modul kuliah yang harus di download oleh
para mahasiswa. Terlepas dari infrastruktur jaringan internet yang telah tersedia di
Indonesia dan spesifikasi dari komputer yang digunakan untuk mengakses
internet, salah satu kendala yang dihadapi hampir setiap pengguna jasa Internet
termasuk aplikasi e-Learning (baik pengembang aplikasi maupun pengguna
aplikasi) adalah besarnya file yang dihasilkan sebuah aplikasi. Terutama aplikasi
yang memanfaatkan grafis berkualitas tinggi dan menyisipkan elemen-elemen
animasi ke dalamnya. Hal ini akan membebani sistem apalagi jika format gambar
grafis yang dibuat menggunakan kedalaman warna yang lebih tinggi. Semua ini
sangat besar pengaruhnya terhadap kecepatan akses. Juga masih diperlukannya
player khusus terinstal dalam sistem kita untuk dapat menjalankan file animasi
tertentu yang biasanya dibuat dengan Macromedia Flash berformat flash (.swf)
2
Sebuah teknologi berbasis eXtensible Markup Language (XML) yang
dikenal dengan Scalable Vector Graphics (SVG) mampu menciptakan vektor
grafis yang memiliki ukuran file yang relatif kecil, beresolusi tinggi, dan relatif
cepat saat ditampilkan pada sebuah halaman Web (Peng 2000).
Tabel 1 Timeline SVG. Sumber: World Wide Web Consortium ((2) 2006)
Periode Progres
Agustus 2000 SVG 1.0, kandidat yang direkomendasikan oleh W3C
September 2001 SVG 1.0, resmi direkomendasikan oleh W3C
Januari 2001 Adobe SVG Viewer 2 dirilis
November 2001 Adobe SVG Viewer 3 dirilis
November 2002 SVG 1.1, diusulkan oleh W3C
November 2002 SVG 1.1, draf kerja pertama dari W3C
Januari 2003 SVG Mobile Profiles telah direkomendasikan oleh W3C
Januari 2003 SVG 1.1 resmi direkomendasikan oleh W3C
Juli 2003 Adobe SVG Viewer beta 6 dirilis, draf kerja dari SVG 1.2
juga dirilis pada bulan Juli 2003
B. Tujuan Penelitian
Tujuan yang ingin dicapai dari penelitian ini adalah:
1. Memberikan perbandingan kecepatan akses aplikasi e-Learning di UT
antara penggunaan teknologi lama (menggunakan gambar-gambar statis
berformat JPG dan GIF yang telah dibuat sebelumnya dengan software
pengolah grafis) dengan penggunaan teknologi SVG.
2. Melakukan implementasi terhadap aplikasi e-Learning di UT.
3. Memberikan wacana tentang SVG, terkait dengan kemungkinan SVG
berkembang dalam teknologi pemrograman grafis untuk halaman Web
C. Ruang Lingkup Penelitian
Ditetapkan sejumlah batasan ruang lingkup penelitian, sebagai berikut:
1. Komponen yang akan dijadikan sebagi objek penelitian hanyalah image
atau gambar dan bukan animasi.
2. Penggunaan salah satu fitur yang tesedia dalam SVG, yaitu filter effects,
kemampuan untuk melakukan serangkaian operasi grafis terhadap objek
seperti drop shadow, emboss, dan lain-lain.
3. Melakukan migrasi terhadap 2 modul/materi kuliah yang telah ada ke
dalam format SVG.
D. Manfaat Penelitian
Beberapa manfaat yang diharapkan dapat diperoleh dari penelitian ini adalah:
1. Dapat mengimplementasikan teknologi SVG dalam pengembangan
aplikasi e-Learning di UT secara keseluruhan jika memang SVG memiliki
keunggulan dibanding teknologi yang selama ini telah digunakan.
2. Dapat memberikan gambaran yang lebih jelas kepada masyarakat luas
terhadap teknologi SVG baik keunggulan maupun kelemahan yang masih
dimiliki pada saat ini.
3. Dapat memberikan wacana bagi beberapa pihak yang terkait dengan
penerapan teknologi SVG. Seperti para Web developer, Web designer,
perusahaan atau perorangan yang bergerak dalam pembuatan Web, praktisi
Teknologi Informasi (TI) dan semua pihak yang mungkin tertarik dengan
TINJAUAN PUSTAKA
A. e-Learning
e-Learning mulai diperkenalkan pada dunia pendidikan sejak tahun 1996
(Hartanto & Purbo 2001), dan hingga sekarang terus disempurnakan ketingkat
yang paling efektif dan bahkan melebihi tingkat efektivitas yang dapat dihasilkan
oleh sebuah lembaga penyelenggara pendidikan konvensional. Untuk dapat
merancang sebuah e-Learning yang bermanfaat dan diminati ada beberapa syarat
yang harus dipenuhi (Hartanto & Purbo 2001), yaitu:
1. Sederhana
Sebuah sistem yang sederhana akan memudahkan peserta dalam
memanfaatkan teknologi dan menu yang ada. Dan dengan kemudahan
pada panel yang disediakan, akan mengurangi waktu pengenalan sistem
e-Learning itu sendiri. Sehingga waktu belajar peserta dapat diefisiensikan
untuk proses belajar dan bukan untuk belajar menggunakan sistem
e-Learning tersebut.
2. Personal
Dengan merancang sistem e-Learning yang personal, pengajar dapat
berinteraksi dengan baik seperti layaknya seorang dosen yang
berkomunikasi dengan mahasiswanya di ruang kuliah.
3. Cepat
Dengan sistem yang cepat, respon terhadap keluhan dan kebutuhan
mahasiswa dan penyampaian materi dapat lebih ditingkatkan. Dengan
respon yang cepat terhadap kondisi mahasiswa yang sedang belajar,
memudahkan dosen maupun pengelola untuk mengadakan
perbaikan-perbaikan selama proses belajar-mengajar berjalan tanpa perlu menunggu
proses tersebut berakhir terlebih dahulu. Sebuah sistem yang cepat di sini
juga dimaksudkan sebuah sistem yang memiliki kecepatan yang memadai
e-Learning di UT lebih dikenal dengan istilah pendidikan jarak jauh (PJJ)
(Supratman & Zuhairi 2004) dideskripsikan sebagai berikut:
1. PJJ di tandai dengan terpisahnya jarak orang yang belajar, baik dengan
pengajar maupun dengan pengelola pendidikan.
2. PJJ lebih banyak menggunakan dan mengandalkan pada penggunaan
media, baik media cetak, media audiovisual dan atau media elektronik
daripada menggunakan pengajaran tatap muka.
3. Siswa tidak selalu berada dalam bimbingan pengajar, tetapi lebih
banyak belajar mandiri.
4. Siswa dapat belajar di mana saja, kapan saja, dan dapat memilih
program studi menurut kebutuhannya sendiri.
5. PJJ menawarkan program-program yang jenis dan tujuannya sama
seperti pendidikan biasa pada umumnya, walaupun strategi
penyelenggaraan proses instruksionalnya yang menggunakan media
dan mengandalkan belajar mandiri siswa berbeda dengan strategi
pengajaran tatap muka pada pendidikan biasa.
6. PJJ menjadi arena penyebaran keahlian dalam sistem instruksional
secara luas, karena prinsip-prinsip belajar dan prinsip instruksional
yang digunakan dalam bahan ajar jarak jauh sama dengan
prinsip-prinsip pengajaran tatap muka.
7. Pengelolaan PJJ beroperasi seperti industri karena berbagai subsistem
di dalamnya memang merupakan kegiatan industri, seperti subsistem
produksi dan reproduksi bahan ajar, subsistem distribusi bahan ajar
dan bahan registrasi, serta subsistem jaringan komunikasi baik untuk
6
B. Raster atau Bitmap Grafik
Bitmap images (juga dikenal sebagai raster images) terbuat dari sekumpulan
piksel dalam sebuah kelompok data. Piksel adalah elemen-elemen gambar yang
terbdiri dari sekumpulan titik-titik warna yang akan membentuk sebuah gambar
yang tampak pada layar (Wikipedia (1) 2007). Bitmap images bersifat resolution
dependent. Resolution merujuk kepada banyaknya piksel yang terdapat dalam
sebuah gambar dan biasanya dinyatakan dalam satuan dpi (dots per inch). Karena
bitmaps bersifat resolution dependent, sangat sulit bagi kita untuk mengurangi
atau memperbesar ukuran file (resizing image) tanpa mengorbankan kualitas dari
gambar tersebut (Wikipedia (1) 2007).
Bitmap graphics memiliki beberapa kelemahan, salah satunya adalah kita
harus memilih antara kualitas atau waktu download (Watt 2001). Jika kita ingin
menghasilkan bitmap graphics pada sembarang ukuran dan memiliki kualitas
tinggi, akan tercipta file yang besar sehingga proses download pada sebuah
jaringan atau Internet akan berjalan lebih lambat. Untuk kondisi dimana kita
memiliki koneksi Internet akses yang tinggi, hal ini tidak terlalu menjadi masalah.
Sementara bagi sebagian besar pengguna Internet, disebabkan oleh kecepatan
modem, satu-satunya cara untuk menampilkan sebuah grafik di Web adalah
menggunakan untuk format GIF beresolusi rendah.
Saat kita melakukan pengurangan ukuran filebitmap menggunakan software
pengolah bitmap, software tersebut harus membuang beberapa piksel. Dan saat
kita hendak memperbesar ukuran dari file bitmap menggunakan software
pengolah bitmap, software tersbut harus menciptakan piksel-piksel baru. Saat
menciptakan piksel-piksel baru, software harus mengestimasi nilai warna dari
piksel baru yang hendak diciptakan berdasarkan data-data dari piksel-piksel lain
yang mengelilinginya. Proses ini dikenal dengan istilah interpolation.
Ada hal yang harus dipahami tentang mengubah ukuran file gambar
(resizing images) dengan melakukan pembesaran dan pengecilan tampilan gambar
(zooming in and out). Resizingimage adalah melakukan perubahan ukuran secara
permanen. Metodenya adalah dengan menambah jumlah piksel jika ingin
zooming in dan zooming out lebih dikenal dengan istilah penskalaan (scaling).
Penskalaan hanyalah mengubah besar gambar secara tampilan saja dan tidak
secara permanen mengubah ukuran asli gambar tersebut. Dengan kata lain, proses
[image:33.595.248.377.188.316.2]ini tidak mengubah jumlah piksel dari sebuah gambar.
Gambar 1 Kualitas format bitmap saat dilakukan perbesaran (resizing)
Berikut adalah beberapa format bitmap yang banyak digunakan.
• BMP
• GIF
• JPEG, JPG
• PNG
• PICT (Macintosh)
• PCX
• TIFF
• PSD (Adobe Photoshop)
Berikut adalah beberapa software pengolah bitmap.
• Microsoft Paint
• Adobe Photoshop
• Corel Photo-Paint
• Jasc Paint Shop Pro
8
C. Vector Grafik
Vector image diciptakan dari sekumpulan objek yang didefinisikan oleh
persamaan matematika dan bukan piksel (Wikipedia(2) 2007). Objek-objek
tersebut dapat terdiri dari garis, kurva, dan bentuk dengan atribut-atribut yang
dapat diedit. Mengubah atribut dari sebuah objek vektor tidak akan
memperngaruhi objek itu sendiri. Kita dapat dengan bebas mengubah atribut dari
sebuah objek vektor tanpa merusak objek dasarnya. Sebuah objek dapat
dimodifikasi tidak hanya dengan mengubah atributnya tetapi juga bentuknya.
Karena bersifat scalable, gambar yang berbasiskan vektor bersifat
resolution independent. Kita dapat memperbesar maupun memperkecil ukuran
gambar vektor hingga berapapun tanpa kehilangan kualitas gambar. Gambar akan
tetap tajam, jernih baik di layar maupun saat dicetak. Kelebihan lain dari vektor
adalah tidak dibatasi oleh bentuk persegi seperti bitmap. Sebuah objek vektor
dapat diletakkan di atas objek lain, dan objek di bawahnya hanya akan tertutupi
oleh objek vektor sebatas bentuk dan ukuran dari objek vektor tersebut. Sebagai
contoh terlihat pada Gambar 2. Sebuah vektor tidak dibatasi oleh ukuran kanvas
sehingga baik diletakkan di atas kanvas berwarna apapun, hasil yang tampak
dilayar tetap sama dan latar hanya tertutup oleh bentuk objek grafik yang
diletakkan di atasnya. Sementara pada raster berformat BMP, saat kita
mendefinisikan kanvas berwarna putih, saat objek tersebut diletakkan diatas latar
putih, kanvas tidak tampak mengganggu buntuk yang dihasilkan. Tetapi saat
diletakkan di atas latar yang berwarna lain (misalkan biru), akan terlihat sebuah
persegi mengeliligi image sebesar ukuran kanvasnya.
Gambar 2 Kelebihan vektor terhadap bitmap saat diletakkan
Objek vektor memiliki banyak kelebihan, akan tetapi kelemahan utamanya
adalah metode ini tidak cocok untuk memproduksi objek yang bersifat
photo-realistic karena akan menghasilkan file dengan ukuran yang sangat besar bahkan
mungkin melebihi ukuran yang dihasilkan format raster. Hal ini dikarenakan
semakin rumitnya bentuk yang hendak di buat, maka semakin banyak pula
titik-titik vektor yang harus di ciptakan.
Objek vektor dapat dengan mudah dikonversi ke dalam format bitmap.
Proses ini dikenal dengan istilah rasterizing. Alasan utama dari konversi vektor
menjadi bitmap adalah agar dapat digunakan dalam halaman Web. Saat ini format
vektor yang dapat digunakan dalam Web diantaranya adalah Shockwave Flasf
(SWF). Selain itu juga terdapat beberapa format yang masih dalam
pengembangan, yaitu Scalable Vector Graphics (SVG), sebuah bahasa
pemrograman script berbasiskan XML.
Berikut adalah beberapa format vektor yang banyak digunakan.
• AI (Adobe Illustrator)
• CDR (CorelDRAW)
• CMX (Corel Exchange)
• CGM Computer Graphics Metafile
• DXF AutoCAD
• WMF Windows Metafile
Berikut adalah beberapa software pengolah bitmap. • Adobe Illustrator
• CorelDRAW
• Macromedia Freehand
10
D. eXtensible Markup Language (XML)
XML (World Wide Web Consortium (3) 2006) merupakan kependekan dari
eXtensible Markup Language, mulai dikembangkan pada tahun 1996 dan
mendapatkan pengakuan dari World Wide Consortium (W3C) pada bulan Februari
1998 (Gossens, 2000). Teknologi yang digunakan pada XML sebenarnya bukan
teknologi baru, tapi merupakan pengembangan dari teknologi Hyper Text Markup
Language (HTML).
Seperti halnya HTML, XML juga menggunakan elemen yang ditandai
dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup
(diawali dengan ‘</‘ diakhiri ‘>’) dan atribut elemen (parameter yang
dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya bedanya,
HTML medefinisikan dari awal tag dan atribut yang dipakai didalamnya,
sedangkan pada XML kita bisa menggunakan tag dan atribut sesuai kehendak kita
asalkan didefinisikan terlebih dulu (World Wide Web Consortium (3) 2006).
Dibandingkan dengan HTML, XML lebih tegas dalam penulisan sintaks
(Gossesn 2000). Kalau kita menulis sebuah dokumen HTML, beberapa kesalahan
penulisan masih ditolerir. Misalnya kita menempatkan tag bersilangan seperti
contoh berikut.
<p><b>Huruf Tebal</p></b>
Meskipun tidak dianjurkan, HTML masih bisa bekerja dan menampilkan hasil
seperti yang kita inginkan. Namun tidak demikian dengan XML. Penulisan tag
pada XML harus mengikuti aturan Last In First Out (LIFO). Jika penulisan
susunan tag seperti contoh diatas terjadi, maka browser akan menampilkan pesan
kesalahan. Penyusunan tag yang benar haruslah sebagai berikut.
<p><b>Huruf tebal</b></p>
Hal ini tidak akan terjadi pada pemrograman menggunakan HTML versi 4 atau
E. Scalable Vector Graphics (SVG)
SVG (World Wide Web Consortium (1) 2006) adalah sebuah bahasa
pemrograman berbasis XML untuk mendefinisikan grafis dua dimensi yang
kemudian digunakan dalam sebuah halaman Web dan aplikasi-aplikasi lain yang
menggunakan XML. SVG memungkinkan pembuatan tiga tipe objek grafis:
1. path (berupa garis dan kurva),
2. gambar, dan
3. teks.
Objek-objek grafis tersebut kemudian dapat dikelompokkan, dimodifikasi,
ditransformasi dan digabungkan dengan objek-objek yang telah di bentuk
sebelumnya (World Wide Web Consortium (1) 2006). SVG dapat mengkreasikan
sebuah grafik yang terdiri dari banyak vektor yang berbeda-beda. Sebuah vektor
pada dasarnya adalah garis yang menghubungkan dua titik.
v
i j
Gambar 3 Vektor vr yang menghubungkan titik idan j
Kelebihan SVG yang paling utama adalah gambar tidak akan kehilangan
kualitasnya apabila diperbesar atau diperkecil (scalable), karena dibuat
berdasarkan metode vektor (vector) bukan pixel (seperti format grafik pada
umumnya, GIF, JPG dan PNG). Sehingga memungkinkan pengembang Web dan
12
Gambar 4 Kualitas yang hilang pada file dengan format JPG apabila dilakukan
perbesaran (zooming in)
Gambar 5 Kualitas gambar file SVG sama sekali tidak berkurang saat di lakukan
perbesaran (zooming in)
Karena SVG terbentuk dari kumpulan perintah-perintah (script) XML yang
berbasis teks dan bukan binary code, SVG memiliki keunggulan dalam kecepatan
proses download karena kecilnya kapasitas file. Selain itu script SVG dapat
dibuat, diedit, dan dimanipulasi cukup dengan menggunakan program-program
teks editor sederhana seperti notepad di Microsoft Windows. Bahkan, modifikasi
terhadap tampilan juga dapat dilakukan saat aplikasi dijalankan. Hal ini
sebenarnya karena script SVG yang dibuat telah memiliki beberapa script yang
Sementara itu, kekurangan SVG terletak pada belum semua Internet
browser dapat mengenali file SVG. Untuk itu harus diinstal terlebih dulu sebuah
plug-in agar sistem dapat mengenali file SVG. Plug-in ini sering disebut sebagai
SVG-Viewer. SVG-Viewer teraktual dikembangkan oleh ADOBE yaitu Adobe
SVG Viewer yang saat ini telah mencapai versi ke 3.03 (Adobe Systems, 2003).
Selain itu, SVG masih kurang mendukung aplikasi multimedia, salah satinya
adalah tidak mampu untuk menampilkan suara (dalam format apapun) dan video.
Namun SVG memiliki kemampuan untuk melakukan integrasi dengan aplikasi
lain yang dikenal dengan SMIL (Synchronized Multimedia Integration
Language).
Tabel 2 Performa beberapa SVG viewer (World Wide Web Consortium (4)
2006).
SVG Viewers Hasil
Proses ASV6 ASV3 BATIK CSV
Amaya-81
Mozilla SVG
Pass 173 168 150 116 51 48
Fail 6 10 30 53 104 126
Partial 2 3 1 12 26 7
Unknown 0 0 0 0 0 0
Total 181 181 181 181 181 181
Keterangan
ASV6 : Adobe SVG Viewer, version 6 (beta)
ASV3 : Adobe SVG Viewer version 3
Batik : Apache Batik Squiggle browser (JAVA platform)
CSV : Corel SVG viewer, version 2
Amaya-81 : Amaya Editor/browser version 8.1
Mozilla SVG : Mozilla SVG project
Tabel 2 menunjukkan performa dari beberapa SVG-viewer yang
dikembangkan oleh beberapa vendor. Dari 181 file SVG yang di akses,
masing-masing viewer menunjukkan banyaknya file yang berhasil dijalankan (Pass), yang
gagal dijalankan (Fail) dan yang berhasil dijalankan tetapi tidak sesuai dengan
14
Syntax SVG
Sebelum kita memulai ‘bermain’ dengan kode SVG, sangat penting sekali
untuk mengetahui ‘aturan mainnya’ (syntax) terlebih dahulu.
- SVG sangat memperhatikan sistem penulisan. Semua tag, atribut dan nilai
atribut ditulis dengan huruf kecil
- Semua tag harus ditutup. Untuk tag, seperti <text> akan ditutup dengan tag
pasangannya </text>.
- Komentar memiliki kode yang sama seperti HTML yaitu diawali dengan <!--
dan diakhiri dengan -->
- Untuk memposisikan sebuah elemen digunakan atribut x dan y, bukan top atau
left seperti HTML
- Semua atribut dimulai dan diakhiri dengan tanda kutip " ... "
Contoh kode (Werld Wide Web Consortium(1) 2006)
<?XML version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg XMLns="http://www.w3.org/2000/svg">
<style type="text/css">
circle:hover {fill-opacity:0.9;} </style>
<g style="fill-opacity:0.7;">
<circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm"
transform="translate(0,50)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm"
transform="translate(70,150)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
</g> </svg>
Jika script di atas disimpan (save) dengan diberi nama file circle.svg kemudian
dibuka pada jendela browser Microsoft Internet Explorer, akan diperoleh tampilan
Gambar 6 Tampilan dari scriptcircle.svg yang dibuka pada internet explorer
Saat ini SVG masih terus dalam pengembangan. Beberapa pihak yang telah
menyatakan kesediaannya dalam mengembangkan format SVG datang dari
pimpinan industri teknologi informasi seperti Adobe Systems, AOL/Netscape,
Apple, Autodesk, Canon, Corel, CSIRO, Eastman Kodak, Excosoft, Hewlett
Packard, IBM, ILOG, IntraNet Systems, Micromedia, Microsoft, OASIS, Opera,
Oxford Brookes University, Quark, Sun Microsystems, dan Xerox serta beberapa
pihak lain yang kemudian juga menyatakan dukungannya terhadap pengembangan
SVG (Peng 2000).
Filter Effects Pada SVG
Filter Effects adalah kemampuan untuk melakukan serangkaian operasi
grafis terhadap objek sumber yang akan menghasilkan bentuk-bentuk grafis yang
telah termodifikasi. Sejauh ini SVG telah mendukung enam belas jenis filter
seperti: Blend, ColorMatrix, ComponentTransfer, Composite, ConvolveMatrix,
DiffuseLighting, DisplacementMap, Flood, GaussianBlur, Image, Merge,
Morphology, Offset, SpecularLighting, Tile, dan Turbulance (World Wide Web
[image:41.595.221.403.85.264.2]16
Interactivity pada SVG
Gambar-gambar yang dibuat dengan SVG dapat menjadi interaktif dan
dinamis (World Wide Web Consortium (1), 2006). Sebagai contoh, menggerakkan
pointer mouse di atas sebuah elemen SVG, melakukan penekanan tombol pada
mouse (klik tunggal maupun klik ganda) terhadap elemen SVG, melakukan
penekanan tombol pada keyboard), akan menghasilkan sebuah umpan balik
(feedback). Animasi yang diinginkan juga dapat diatur untuk terjadi satu kali saja
saat pertama kali sebuah elemen SVG ditampilkan ataupun dilakukan berulang
kali dengan menggunakan fasilitas penghitungan waktu (timer). Animasi dapat
dipicu baik secara deklaratif (dengan cara menggabungkan elemen-elemen
animasi SVG dalam sebuah konten SVG) atau melalui pembuatan sebuah script.
Tabel 3 Beberapa event yang tesedia dalam SVG(World Wide Web Consortium
(1) 2006)
Nama Event Deskripsi Penulisan
Activate Dipicu saat sebuah elemen diaktifkan, sebagai
contoh, melalui penekanan tombol mouse atau
penekanan tombol pada keyboard.
Onactivate
Click Dipicu saat mouse ditekan saat berada di atas
sebuah elemen. Sebuah click didefinisikan
sebagai gabungan antara mousedown dan
mouseup pada lokasi yang sama secara bersamaan. Urutan dari event ini adalah:
mousedown, mouseup, click.
Onclick
Mousedown Dipicu saat mouse ditekan saat berada di atas sebuah elemen
onmousedown
Mouseup Dipicu saat penekanan tombol mouse di lepas saat berada diatas sebuah elemen
onmouseup
Mouseover Dipicu saat penunjuk mouse dipindahkan tepat diatas sebuah elemen
onmouseover
Mousemove Dipicu saat penunjuk mouse digerakkan saat masih berada tepat diatas sebuah elemen
onmousemove
Mouseout Dipicu saat penunjuk mouse digerakkan meninggalkan sebuah elemen
onmouseout
beginEvent Dimulainya animasi dari sebuah elemen onbegin endEvent Dipicu saat animasi dari sebuah elemen
berakhir
onend
Animasi Pada SVG
Dikarenakan Web adalah sebuah media yang dinamis, SVG sangat
mendukung kemungkinan untuk melakukan perubahan vektor grafik setiap saat.
Elemen-elemen animasi SVG mulanya dikembangkan oleh W3C Synchronized
Multimedia (SYMM) Working Group bekerjasama dengan para pengembang dari
Synchronized Multimedia Integration Language (SMIL) 1.0 Specification (World
Wide Web Consortium (6) 2006). Group pengembang SYMM, bekerjasama
dengan group pengembang SVG, mengembangkan animasi yang dapat dilakukan
oleh SMIL yang kemudian dikenal dengan SMIL Animation (World Wide Web
Consortium (1) 2006), yang merepresentasikan tujuan utama dari sekumpulan
fitur animasi pada XML.
SVG adalah bahasa pengantar untuk mengaktifkan SMIL Animation.
Terkecuali untuk aturan-aturan spesifik dari SVG yang disebutkan dalam
spesifikasinya, definisi normatif dari elemen-elemen animasi dan atribut pada
SVG adalah menggunakan spesifikasi pada SMIL Animation (World Wide Web
Consortium (1) 2006).
Berikut beberapa elemen animasi yang dapat digunakan dalam SVG:
1. <animate> : untuk memulai penganimasian.
2. <animateMotion> : untuk animasi gerakan sepanjang sebuah path.
3. <animateColor> : untuk animasi perubahan warna.
4. <animateTransform> : untuk animasi sebuah transformasi.
5. <mpath> : untuk referensi sebuah path dari gerakan <animateMotion>.
Berikut ini contoh script SVG yang akan melakukan sebuah animasi sederhana:
<?XML version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010719//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 500 300">
<desc>Contoh Animasi </desc>
<rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" />
<!-- Membuat jalur pergerakan berwarna biru, beserta tiga buah lingkaran kecil pada awal, tengah dan akhir jalur. -->
<path d="M100,250 C 100,50 400,50 400,250"
18
<circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- Berikut adalah sebuah segitiga yang akan bergerak sepanjang jalur -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" > <!-- Mendefinisikan animasi pergerakan -->
<animateMotion dur="6s" repeatCount="indefinite"
path="M100,250 C 100,50 400,50 400,250" rotate="auto" /> </path>
</svg>
Jika script di atas dijalankan pada sebuah browser yang telah terpasang plugins
SVG Viewer, akan tampak hasil sebagai berikut :
a. b. c.
Gambar 7 Animasi pergerakan segitiga sepanjang jalur (a) pada detik ke nol,
A. Tahapan Penelitian
Tahapan penelitian dari penelitian ilmiah ini dapat digambarkan dalam
diagram alir penelitian seperti tampak pada Gambar 8.
Analisis Masalah
Analisis Hasil Komparasi Pengembangan Model Pengumpulan Data Awal
Pengumpulan Data Penelitian
Selesai
[image:45.595.189.472.244.549.2]Kajian Pustaka Mulai
Gambar 8 Diagram Alir Tahapan Penelitian
1. Kajian pustaka
Mempelajari teknologi SVG, meliputi kelebihan, kekurangan dan
teknik pemrograman terkait dengan rencana pengaplikasian terhadap sistem
e-Learning di UT. Metode yang dilakukan:
• Mempelajari manual pengunaan SVG (World Wide Web Consortium
20
• Mempelajari jurnal-jurnal ilmiah yang mengupas tentang teknologi
SVG terutama yang terkait dengan aplikasi SVG terhadap sistem
e-Learning
• Melakukan studi lapangan terhadap sistem yang telah ada di UT
2. Analisis Masalah
Analisis masalah ditekankan pada:
• Permasalahan-permasalahan yang dihadapi pengembang aplikasi
e-Learning pada umumnya, dan
• Permasalahan-permasalahan yang dihadapi pengembang aplikasi
e-Learning di Universitas Terbuka (UT) pada khususnya
3. Pengumpulan Data Awal
Pada tahap ini dikumpulkan data-data awal berupa halaman Web dari
dua modul kuliah yang akan dikembangkan dan dimigrasikan dari format
HTML menjadi format SVG. Langkah yang dilakukan hanyalah dengan
menyalin seluruh halaman Web dari modul kuliah yang ingin dimigrasikan.
Hasilnya kemudian dikembangkan menjadi format SVG.
4. Pengembangan Model
Pada tahap ini akan dicoba menciptakan template dari aplikasi
e-Learning yang selama ini telah digunakan di UT. Template ini kemudian akan
digunakan sebagai dasar pengembangan halaman Web yang menggunakan
script SVG. Kemudian akan diusahakan menciptakan seluruh gambar-gambar
statis berupa tombol-tombol, gambar-gambar yang dijadikan link, dan
gambar-gambar statis yang telah ada pada tampilan halaman Web di e-Learning UT ke
dalam script SVG.
Dipilih dua buah halaman Web modul kuliah untuk dikembangkan yaitu
Matematika dan Mikrobiologi. Untuk mata kuliah Matematika dipilih Modul
Kuliah Aljabar 1 (kode mata kuliah MATA4321) pada bagian halaman Materi
Mikrobiologi (Kode Mata Kuliah BIOL4223) diambil materi Modul 5 yaitu
Penggolongan Bakteri dan Metabolismenya. Kedua halaman ini dipilih karena
mengandung cukup banyak elemen-elemen gambar berekstensi JPG dan GIF
sehingga dirasakan mewakili.
5. Pengumpulan Data Penelitian
Pada tahap ini akan dicoba dilakukan pengumpulan data-data penelitian
berupa pengujian kecepatan akses dari tiap-tiap modul kuliah yang telah
dimigrasikan ke dalam format SVG dan penghitungan besar file yang
diperoleh dari hasil migrasi. Juga dilakukan pengumpulan data-data kecepatan
akses dari tiap-tiap modul kuliah yang yang masih menggunakan format lama
(GIF & JPG) dan perhitungan besar file yang ada.
Metode pengumpulan data dilakukan dengan dua cara yaitu secara
offline dan secara online. Secara online adalah dengan cara meng-upload
aplikasi e-Learning ke Internet menggunakan hosting pribadi. Kemudian akan
dicoba mengakses aplikasi tersebut untuk menguji kecepatan aksesnya.
Pengambilan data dilakukan pada waktu-waktu tertentu yang dibagi kedalam
tiga kelompok waktu yaitu pukul 07:00 – 17:00 (diasumsikan penggunaan
jalur Internet padat karena relatif sesuai dengan rata-rata jam kantor pada hari
kerja), pukul 17:00 – 23:00 dan pukul 23:00 – 07:00 (diasumsikan
penggunaan jalur Internet tidak padat).
6. Komparasi
Pada tahap ini akan dicoba membuat komparasi terhadap aplikasi
e-Learning yang sebelumnya telah digunakan di UT dengan aplikasi e-Learning
baru yang dibuat dalam format SVG. Beberapa atribut yang akan
22
Tabel 4 Atribut-atribut yang digunakan untuk komparasi
Atribut Komparasi
Besar file images SVG vs GIF, SVG vs JPG
Besar total file aplikasi e-Learning
Aplikasi e-Learning UT terdahulu vs Aplikasi UT menggunakan SVG
Kecepatan akses Aplikasi e-Learning UT terdahulu vs
Aplikasi UT menggunakan SVG
Penghitungan kecepatan akses akan dilakukan dengan menggunakan
browser Microsoft Internet Explorer dengan bantuan software yang memiliki
kemampuan menghitung waktu akses sebuah halaman Web.
7. Analisis Hasil
Pada tahap ini akan dilakukan penganalisaan terhadap semua hasil yang
telah diperoleh. Kemudian akan dicoba membuat beberapa kesimpulan dari
hasil penelitian yang telah dilakukan dengan menekankan kepada
kemungkinan menjadikan SVG sebagai teknologi baru dalam pemrograman
grafis berbasis Web.
B. Peralatan Yang Digunakan
Penelitian ini menggunakan beberapa perangkat yang akan berbeda pada
saat pengembangan sistem dan pada saat melakukan pengujian dan komparasi.
Perangkat yang digunakan pada saat pengembangan sistem dibagi menjadi:
1. Perangkat Keras (hardware)
Perangkat keras yang digunakan adalah seperangkat personal computer
(PC) dengan spesifikasi yang beragam sesuai dengan ketersediaan perangkat
keras tersebut saat melakukan penelitian. Sedangkan pada saat melakukan
Notebook DELL Latitude D510, GenuineIntel Centrino 1,73 GHz, Memory
512.00 MB, hard disk 80 GB, DVD/CDRW dan layar 15 inchi.
2. Perangkat Lunak (software)
Tabel 5 Software yang digunakan
No Perangkat Lunak Fungsi Keluaran
1 Macromedia Dreamweaver MX
Mengembangkan Template
e-Learning
Template aplikasi
e-Learning
2 Notepad Membuat script SVG Script SVG 3 Adobe Illustrator Melakukan konversi file
image kedalam format SVG
Script SVG
4 Adobe Photoshop Membuat image JPG dan GIF
File JPG dan GIF
5 sMArTH (xsMATH) Membuat persamaan-persamaan matematika
Equation dalam format SVG
6 InetBench (Internet
Benchmark)
Menghitung waktu akses
sebuah halaman Web
Throughput yang didapat, total waktu akses dan rata-rata waktu akses
7 Adobe SVG Viewer Plugins agar browserdapat mengenali dan menjalankan
script SVG
SVG file pada jendela browser
8 Microsoft Internet Explorer
Internet browser Aplikasi
e-Learning
C. Tempat dan Waktu Penelitian
Penelitian direncanakan dilakukan dari bulan Juli 2006 hingga Juli 2007.
Pada saat melakukan pengembangan model akan bertempat di kampus Universitas
Terbuka Pondok Cabe pada bagian komputasi UT, di Laboratorium Komputer
Pascasarjana Departemen Ilmu Komputer FMIPA-IPB kampus Baranangsiang
dan di rumah penulis sendiri. Sedangkan pada saat melakukan uji coba dan
komparasi akan dilakukan di Laboratorium Pascasarjana Departemen Ilmu
PENGEMBANGAN MODEL
A. Pengembangan Model
Pengembangan model dilakukan terhadap beberapa halaman modul
perkuliahan yang dapat diakses oleh siapa saja pengunjung website dari UT.
Penekanannya adalah mengganti elemen-elemen yang sebelumnya menggunakan
file-file gambar berekstensi JPG, GIF, BMP menjadi file-file SVG. Untuk itu
dipilih dua buah halaman Web untuk mata kuliah Matematika dan Mikrobiologi.
Dua halaman inipun hanya akan diambil masing-masing satu halaman yang dirasa
mewakili dari tujuan penelitian ini. Untuk mata kuliah Matematika dipilih Modul
Kuliah Aljabar 1 (kode mata kuliah MATA4321) pada bagian halaman Materi 1
yaitu SEMIGRUP DAN MONOID. Sedangkan untuk mata kuliah Mikrobiologi
(Kode Mata Kuliah BIOL4223) diambil materi Modul 5 yaitu Penggolongan
Bakteri dan Metabolismenya. Kedua halaman ini dipilih karena relatif
mengandung cukup banyak elemen-elemen gambar berekstensi JPG dan GIF
sehingga dirasakan mewakili tujuan dan ruang lingkup penelitian ini.
1. Pengembangan Halaman Modul Kuliah Mikrobiologi mikro_modul5.htm
Template halaman diambil dari halaman asli dari website milik UT. Pada
halaman ini terdapat dua bagian utama yang mengandung elemen-elemen
gambar berekstensi JPG dan GIF. Kedua bagian itu adalah tombol-tombol
navigasi yang merujuk ke halaman lain dan beberapa gambar persamaan
reaksi.
a. Migrasi terhadap tombol-tombol navigasi dari format jpg menjadi svg
Gambar 10 Tombol navigasi (btn_menu.svg) yang telah melalui filter efect
Bentuk tombol navigasi (btn_menu.svg) seperti Gambar 9 dapat dibuat dengan
menggunakan script SVG sebagai berikut.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010719//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg width="4.2cm" height="1.1cm"> <title>Menu Button</title>
<defs>
//---
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0"
width="4.2cm" height="8.6cm">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge> </filter>
Digunakan untuk menciptakan efek-efek filter seperti drop shadow dan
emboss yang kemudian akan diberlakukan pada elemen utama.
//--- </defs>
<rect x="0" y="0" width="4.2cm" height="8.6cm" fill="#5C743D"/>
//-- Digunakan untuk menciptakan sebuah persegi panjang berukuran 4,2cm
x 1,1cm yang kemudian diberi warna dasar hijau.
<g filter="url(#MyFilter)" >
<!-- Digunakan untuk menerapkan filter efek yang telah didefinisikan pada
26
script ini dijalankan, maka terciptalah bentuk akhir dari tombol navigasi
seperti tampak pada Gambar 10.
--> <g>
<path fill="none" stroke="#D90000" stroke-width="5" d="M20,30 C0,300,8 20,8 L130,8 C150,8 150,30 130,30 z" /></g>
//-- Menciptakan sebuah tombol (button) berbentuk oval memanjang
dengan ketebalan garis sebesar 5 piksel dan diberi warna merah.
<g fill="White" font-size="22" font-family="Viner Hand ITC" >
<text x="20" y="25">Pengantar</text></g>
//-- Digunakan untuk menyisipkan teks di tengah tombol (button) dan akan
membentuk gambar seperti tampak pada Gambar 9.
</svg>
Pada (World Wide Web Consortium (7) 2007) dan (SAMS 2007)
dinyatakan bahwa SVG menyediakan juga elemen <a>, analog dengan elemen
<a> pada HTML untuk mengindikasikan sebuah link (juga dikenal sebagai
Hyperlink atau Web links). SVG menggunakan XLink ([XLink]) untuk
mendefinisikan seluruh link.
Berikut adalah sintaks yang digunakan:
<a xlink:href="http://alamat_hyperlink"> ...
... </a>
Script ini kemudian diterapkan pada tombol navigasi sebagai berikut:
<g fill="White" font-size="22" font-family="Viner Hand ITC"> <a xlink:href="../index.htm" name="index" id="index"> <text x="20" y="25">Pengantar</text>
</a> </g>
Hasilnya adalah sebuah elemen grafis berbentuk tombol navigasi yang dapat
di-klik untuk kemudian mengantar kita kepada halaman yang yang telah
b. Migrasi terhadap gambar persamaan reaksi dari format jpg menjadi svg
Gambar 11 Tampilan script glikolisis.svg pada jendela browser Internet
Explorer
Isi dari script SVG untuk menciptakan gambar diatas adalah sebagai berikut:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010719//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg width="12.4cm" height="1.25cm" viewBox="0 0 1240 125"> <desc>Persamaan Reaksi Glikolisis</desc>
<rect x="0" y="0" width="1250" height="130" fill="#F5FFE4"/>
<text x="20" y="50" font-family="Verdana" font-size="30" fill="blue"> C<tspan baseline-shift="sub">6</tspan>H<tspan baseline-
shift="sub">12</tspan>O<tspan baseline-shift="sub">6</tspan>
+ 2 NAD + 2 ADP + 2 Pa </text>
// Persamaan reaksi yang hendak dibentuk
<text x="700" y="50" font-family="Verdana" font-size="30" fill="blue"> 2CH<tspan baseline-shift="sub">3</tspan>COCOOH + 2NADH<tspan
baseline-shift="sub">2</tspan> + 2 ATP </text>
<path d="M580,40 L680,40 M660,25 L680,40 L660,55" stroke="blue" stroke-width="5" fill="none" />
<text x="20" y="90" font-family="Verdana" font-size="30" fill="blue">glukosa</text>
<text x="480" y="90" font-family="Verdana" font-size="30" fill="blue">fosfat</text>
<text x="480" y="120" font-family="Verdana" font-size="30" fill="blue">an organik</text>
<text x="700" y="90" font-family="Verdana" font-size="30" fill="blue">piruvat</text>
</svg>
Perintah <tspan baseline-shift="sub"></tspan> adalah untuk
membuat font bertipe subscript (cetak bawah).
Seluruh elemen SVG kemudian disatukan ke dalam sebuah halaman
Web berformat HTML dengan nama mikro_modul5.htm menggunakan teknik
28
2. Pengembangan model file materi kuliah Matematika semigrup.htm
Pada halaman ini banyak terdapat gambar-gambar persamaan
matematika berformat GIF dan JPG. Persamaan-persamaan matematika itu
kemudian dibuat dalam format .svg yang kemudian disisipkan ke dalam file
aslinya menggantikan image-image grafis yang memiliki format GIF dan JPG.
Dalam pembuatan persamaan-persamaan matematika ini digunakan bantuan
dari software sMArTH versi 0.05 (SMARTH 2004) yang dapat didownload
gratis di http://smarth.sourceforge.net. Aplikasi ini berbasis Web dan memiliki
ekstensi .svg. sMArTH mengharuskan PHP:Hypertext Prepocessor (PHP)
(PHP 2003) terinstal di sistem dan menyarankan menggunakan webserver
Apache (APACHE 2002) karena Microsoft IIS tidak mendukung secara penuh
aplikasi ini. Karena juga menggunakan PHP maka sMArTH hanya dapat
dijalankan secara online di Internet atau secara offline tetapi melalui
webserver lokal.
sMArTH memiliki kemampuan menciptakan persamaan-persamaan
matematis seperti Microsoft Equation pada Ms Word. Hasil dari persamaan
[image:54.595.160.468.457.689.2]yang talah dibuat dapat disimpan dalam format MathML, LaTEX, dan SVG.
Persamaan matematika yang tampak seperti Gambar 12 dibuat dengan
menggunakan aplikasi sMArTH dan menghasilkan script seperti dibawah ini:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet href="equation.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010719//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg x="10" y="2" width="59.4375" height="27.34404182434082" viewBox="0 0 59.4375 27.34404182434082">
<svg x="0" y="0" width="16" height="25" viewBox="0 0 16 25"> <text baseline-shift="-80%" x="2" y="2" startOffset="0"
class="textelt">S</text> </svg>
<svg x="16" y="2.0928955078125" width="19.28125" height="25.25114631652832" viewBox="0 0 19.28125
25.25114631652832">
<text baseline-shift="-80%" x="2" y="2" startOffset="0" class="Operator">≠</text> </svg>
<svg x="35.28125" y="2.0928955078125" width="24.15625" height="25" viewBox="0 0 24.15625 25">
<text baseline-shift="-80%" x="2" y="2" startOffset="0" class="Operator">∅</text> </svg>
</svg>
Aplikasi sMArTH selain harus dijalankan pada browser, ia juga
menghendaki terinstalnya font khusus pada windows yaitu CODE2000
(CODE2000 2004). Persamaan-persamaan matematika yang ada tidak
mengandung link ke halaman lain. Sehingga tidak memerlukan tambahan
script untuk membuat link ke halaman lain. Terdapat 25 persamaan
matematika yang akan disisipkan ke halaman semigrup.htm.
Terdapat pula menu-menu yang merupakan link menuju halaman lain.
Menu ini terletak di bagian awal dari halaman semigrup.htm yang pada
halaman aslinya dibuat dengan format JPG dimana tiap menu diwakili oleh
satu elemen gambar berformat JPG seperti tampak pada Gambar 13.
Menu-menu ini kemudian dibuat dalam format SVG dengan hanya dijadikan satu
elemen SVG saja seperti tampak pada Gambar 14.
30
Gambar 14 Elemen menu pada semigrup.htm berformat SVG
Elemen menu seperti pada Gambar 14 yang berformat SVG akan
memiliki script seperti berikut:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010719//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg width="18cm" height=".5cm" viewBox="0 0 1800 50"> <desc>Menu Link</desc>
<rect x="0" y="0" width="1800" height="50" fill="#0359C2"/>
<a xlink:href="../semigrup.htm" name="Pengantar" id="Pengantar" target="_parent">
<text x="12" y="35" font-family="Verdana" font-size="32"
fill="white"&
