Implementasi Scalable Vector Graphics (SVG) Terhadap Aplikasi e-Learning: Studi Kasus Universitas Terbuka (UT)
IMPLEMENTASI SCALABLE VECTOR GRAPHICS (SVG)
TERHADAP APLIKASI e-LEARNING
STUDI KASUS UNIVERSITAS TERBUKA (UT)
RUSTAM EFFENDY
SEKOLAH PASCASARJANA
INSTITUT PERTANIAN BOGOR
BOGOR
2007
(2)
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
(3)
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 Graphics (SVG),
(4)
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.
Keywords: internet, e-Learning, Scalable Vector Graphics (SVG) , vector base programming, raster graphics
(5)
©
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
(6)
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
(7)
Judul Tesis : IMPLEMENTASI SCALABLE VECTOR GRAPHICS (SVG) TERHADAP APLIKASI E-LEARNING
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.
(8)
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
(9)
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
(10)
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.
(11)
IMPLEMENTASI SCALABLE VECTOR GRAPHICS (SVG)
TERHADAP APLIKASI e-LEARNING
STUDI KASUS UNIVERSITAS TERBUKA (UT)
RUSTAM EFFENDY
SEKOLAH PASCASARJANA
INSTITUT PERTANIAN BOGOR
BOGOR
2007
(12)
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
(13)
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 Graphics (SVG),
(14)
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.
Keywords: internet, e-Learning, Scalable Vector Graphics (SVG) , vector base programming, raster graphics
(15)
©
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
(16)
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
(17)
Judul Tesis : IMPLEMENTASI SCALABLE VECTOR GRAPHICS (SVG) TERHADAP APLIKASI E-LEARNING
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.
(18)
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
(19)
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
(20)
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.
(21)
DAFTAR ISI
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
(22)
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 DAFTAR PUSTAKA ... 65
(23)
DAFTAR TABEL
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 21 Pengumpulan data secara offline terhadap file mikro_modul5.htm... 61
(24)
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 25 Grafik file mikro_modul5.htm (23:00 – 07:00)... 56
(25)
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
(26)
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
(27)
PENDAHULUAN
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) (Hakim & Mutmainah 2003).
(28)
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
(29)
3
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 SVG.
(30)
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 pada saat diakses oleh dosen, pengelola, dan terutama mahasiswa.
(31)
5
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 kebutuhan administrasi maupun akademik.
(32)
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 memperbesar dan mengurangi jumlah piksel jika ingin memperkecil. Sementara
(33)
7
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 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
(34)
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
(35)
9
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
(36)
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 dibawahnya
(37)
11
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
(38)
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 akan berjalan saat menerima perintah (trigger).
(39)
13
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 bentuk yang sebenarnya (partial).
(40)
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 seperti Gambar 4.
(41)
15
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 Consortium (1), 2006).
(42)
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 repeatEvent Dipicu saat animasi dari sebuah elemen diulang onrepeat
(43)
17
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"
fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" />
(44)
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, (b) pada detik ketiga, (c) pada detik keenam
(45)
METODOLOGI
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
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
(46)
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 1 yaitu SEMIGRUP DAN MONOID. Sedangkan untuk mata kuliah
(47)
21
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 dikomparasikan, ditunjukkan dalam Tabel 4.
(48)
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
(49)
23
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 Komputer FMIPA-IPB kampus Baranangsiang dan di rumah penulis.
(50)
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
(51)
25
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
(52)
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 ditentukan sebelumnya.
(53)
27
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
(54)
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
yang talah dibuat dapat disimpan dalam format MathML, LaTEX, dan SVG.
(55)
29
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.
(56)
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">SEMIGRUP DAN MONOID</text></a>
<a xlink:href="../invers.htm" name="Pengantar" id="Pengantar" target="_parent">
<text x="475" y="35" font-family="Verdana" font-size="32"
fill="white">INVERS DALAM MONOID</text></a>
<a xlink:href="../pemetaan.htm" name="Pengantar" id="Pengantar" target="_parent">
<text x="940" y="35" font-family="Verdana" font-size="32"
fill="white">PEMETAAN INVERS</text></a>
<a xlink:href="../grup.htm" name="Pengantar" id="Pengantar" target="_parent">
<text x="1300" y="35" font-family="Verdana" font-size="32"
fill="white">KONSEP GRUP</text></a>
<a xlink:href="../subgrup.htm" name="Pengantar" id="Pengantar" target="_parent">
<text x="1590" y="35" font-family="Verdana" font-size="32" fill="white">SUBGRUP</text></a>
</svg>
Penjelasan program:
<a xlink:href="../semigrup.htm" name="Pengantar" id="Pengantar" target="_parent">
<text x="12" y="35" font-family="Verdana" font-size="32"
fill="white">SEMIGRUP DAN MONOID</text></a>
Membuat teks bertuliskan SEMIGRUP DAN MONOID yang akan menjadi
(57)
31
Seluruh elemen SVG kemudian disatukan kedalam sebuah halaman Web
berformat HTML dengan nama semigrup.htm menggunakan teknik
penggabungan antara SVG dengan HTML.
B. Menyatukan file-file SVG dengan HTML
Terdapat tiga metode yang dapat digunakan untuk menyisipkan file SVG ke
dalam file HTML (W3SCHOOLS 2006) (CARTO 2006). Tiga metode itu adalah:
1. Tag <embed>
Kelebihan : Telah didukung oleh sebagian besar Internet browser,
mendukung scripting seperti svg2html scripting dan
html2svgscripting. Tag ini juga direkomendasikan oleh Adobe untuk SVG Viewer mereka.
Kekurangan : Belum memiliki standardisasi yang jelas pada
spesifikasi HTML versi 4. Sintaks penulisan :
<embed src="rect.svg" width="300" height="100" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Internet Explorer mendukung tambahan atribut, wmode="transparent", yang
memungkinkan background dari halaman HTML tetap tampak.
2. Tag <object>
Kelebihan : Telah menjadi standar pada HTML versi 4 dan
sesudahnya dan telah didukung oleh generasi Internet
browser terbaru.
Kekurangan : Berjalan pada sebagian besar browser terbaru, namun
belum mendukung penggunaan svg2html scripting dan
(1)
format SVG secara online tes
07-19-07 18:59 29057 bytes 2.4 secs
http://www.obengkembang.com/tesis/svg/matematika/semigrup.htm 07-19-07 18:59 17191 bytes 5.1 secs
www.obengkembang.com/tesis/svg/matematika/content/banner-aljabar.JPG 07-19-07 18:59 2024 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa000.svg 07-19-07 18:59 4085 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa001.svg 07-19-07 18:59 933 bytes 0.2 secs
www.obengkembang.com/tesis/svg/matematika/content/equa002.svg 07-19-07 18:59 3811 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa003.svg 07-19-07 18:59 1388 bytes 0.2 secs
www.obengkembang.com/tesis/svg/matematika/content/equa004.svg 07-19-07 18:59 4856 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa005.svg 07-19-07 18:59 2618 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa006.svg 07-19-07 18:59 1133 bytes 0.3 secs
www.obengkembang.com/tesis/svg/matematika/content/equa007.svg 07-19-07 18:59 1133 bytes 0.2 secs
www.obengkembang.com/tesis/svg/matematika/content/equa008.svg 07-19-07 18:59 3374 bytes 0.3 secs
www.obengkembang.com/tesis/svg/matematika/content/equa009.svg 07-19-07 18:59 2939 bytes 0.3 secs
www.obengkembang.com/tesis/svg/matematika/content/equa010.svg 07-19-07 18:59 15287 bytes 0.7 secs
www.obengkembang.com/tesis/svg/matematika/content/equa011.svg 07-19-07 18:59 2241 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa012.svg 07-19-07 18:59 5155 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa013.svg 07-19-07 18:59 2904 bytes 0.3 secs
www.obengkembang.com/tesis/svg/matematika/content/equa014.svg 07-19-07 18:59 44143 bytes 1.8 secs
www.obengkembang.com/tesis/svg/matematika/content/equa015.svg 07-19-07 18:59 58740 bytes 2.5 secs
www.obengkembang.com/tesis/svg/matematika/content/equa016.svg 07-19-07 18:59 4082 bytes 0.5 secs
www.obengkembang.com/tesis/svg/matematika/content/equa017.svg 07-19-07 18:59 496 bytes 0.2 secs
www.obengkembang.com/tesis/svg/matematika/content/equa018.svg 07-19-07 18:59 4449 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa019.svg 07-19-07 18:59 7152 bytes 0.6 secs
www.obengkembang.com/tesis/svg/matematika/content/equa020.svg 07-19-07 18:59 2595 bytes 0.4 secs
www.obengkembang.com/tesis/svg/matematika/content/equa021.svg 07-19-07 18:59 39607 bytes 1.7 secs
www.obengkembang.com/tesis/svg/matematika/content/equa022.svg 07-19-07 18:59 7078 bytes 0.6 secs
www.obengkembang.com/tesis/svg/matematika/content/equa023.svg 07-19-07 18:59 4160 bytes 0.3 secs
www.obengkembang.com/tesis/svg/matematika/content/equa024.svg 07-19-07 18:59 1238 bytes 0.3 secs
www.obengkembang.com/tesis/svg/matematika/content/up_menu.svg
(2)
78
Lanjutan
07-19-07 18:59 URL Summary for www.obengkembang.com: Total Files = 28 Total Bytes = 273,869 Total Seconds = 22 Total Errors = 0
(3)
format HTML secara online tes
07-21-07 11:32 16814 bytes 1.8 secs
http://www.obengkembang.com/tesis/html/matematika/semigrup.htm 07-21-07 11:32 17191 bytes 3.3 secs
www.obengkembang.com/tesis/html/matematika/content/banner-aljabar.JPG
07-21-07 11:32 981 bytes 0.3 secs
www.obengkembang.com/tesis/html/matematika/content/equa000.gif 07-21-07 11:32 1077 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa001.gif 07-21-07 11:32 914 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa002.gif 07-21-07 11:32 1139 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa003.gif 07-21-07 11:32 919 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa004.gif 07-21-07 11:32 1134 bytes 0.3 secs
www.obengkembang.com/tesis/html/matematika/content/equa005.gif 07-21-07 11:32 1031 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa006.gif 07-21-07 11:32 866 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa007.gif 07-21-07 11:32 856 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa008.gif 07-21-07 11:32 995 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa009.gif 07-21-07 11:32 974 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa010.gif 07-21-07 11:32 916 bytes 0.3 secs
www.obengkembang.com/tesis/html/matematika/content/equa011.gif 07-21-07 11:32 983 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa012.gif 07-21-07 11:32 430 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa013.gif 07-21-07 11:32 1000 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa014.gif 07-21-07 11:32 3430 bytes 0.8 secs
www.obengkembang.com/tesis/html/matematika/content/equa015.gif 07-21-07 11:32 7385 bytes 1.5 secs
www.obengkembang.com/tesis/html/matematika/content/equa016.gif 07-21-07 11:32 1085 bytes 0.3 secs
www.obengkembang.com/tesis/html/matematika/content/equa017.gif 07-21-07 11:32 865 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa018.gif 07-21-07 11:33 837 bytes 0.3 secs
www.obengkembang.com/tesis/html/matematika/content/equa019.gif 07-21-07 11:33 1279 bytes 0.3 secs
www.obengkembang.com/tesis/html/matematika/content/equa020.gif 07-21-07 11:33 1034 bytes 0.2 secs
www.obengkembang.com/tesis/html/matematika/content/equa021.gif 07-21-07 11:33 2433 bytes 0.6 secs
www.obengkembang.com/tesis/html/matematika/content/equa022.gif 07-21-07 11:33 1911 bytes 0.5 secs
www.obengkembang.com/tesis/html/matematika/content/equa023.gif 07-21-07 11:33 799 bytes 0.4 secs
www.obengkembang.com/tesis/html/matematika/content/equa024.gif 07-21-07 11:33 3056 bytes 0.8 secs
www.obengkembang.com/tesis/html/matematika/content/icon1.JPG 07-21-07 11:33 3014 bytes 0.7 secs
(4)
80
Lanjutan
07-21-07 11:33 2597 bytes 0.6 secs
www.obengkembang.com/tesis/html/matematika/content/icon3.JPG 07-21-07 11:33 2269 bytes 0.5 secs
www.obengkembang.com/tesis/html/matematika/content/icon4.JPG 07-21-07 11:33 1884 bytes 0.7 secs
www.obengkembang.com/tesis/html/matematika/content/icon5.JPG
07-21-07 11:33 URL Summary for www.obengkembang.com: Total Files = 32 Total Bytes = 82,098 Total Seconds = 17 Total Errors = 0
(5)
A. Kesimpulan
Berdasarkan hasil dari penelitian yang dilakukan, dapat diambil beberapa
kesimpulan, yaitu :
1.
Pada kondisi dimana
file
SVG dibuat secara langsung dengan teknik
pemrograman
script
berbasis XML, akan di peroleh besar
file
yang jauh
lebih kecil jika dibandingkan dengan
file
berformat JPG atau GIF.
2.
Jika SVG di peroleh dengan cara melakukan konversi dari
file
JPG
ataupun GIF dengan menggunakan software konversi seperti Adobe
Illustrator hasil yang di peroleh justru akan lebih besar dibandingkan
dengan
file
aslinya.
3.
Besar
file
sangat berpengaruh terhadap kecepatan akses yang di dapat.
Semakin besar sebuah
file
, semakin lama waktu yang dibutuhkan untuk
mengunduh
file
tersebut. Sebaliknya semakin kecil
file
, semakin cepat
sebuah
file
dapat di
download
.
4.
Migrasi dari format JPG dan GIF menjadi format SVG akan sangat
terasa manfaatnya jika dilakukan semenjak awal pengembangan sebuah
aplikasi. Sebaliknya, migrasi dengan metode transformasi dari JPG dan
GIF menjadi SVG tidak banyak membantu. Bahkan pada beberapa
kasus justru menghasilkan kinerja yang memburuk.
5.
Hingga saat ini dirasakan masih sulit bagi SVG untuk dapat
menggantikan metode sebelumnya (JPG dan GIF) dalam menciptakan
file
-
file
gambar. Hal ini dikarenakan tingkat kesulitan yang cukup tinggi
dalam membuat
script
SVG dan masih belum sempurnanya aplikasi
konversi dari format JPG atau GIF kedalam format SVG.
(6)