1 PENGEMBANGAN MODEL A. Pengembangan Model Pengembangan model dilakukan terhadap beberapa halaman modul perkuliahan yang dapat diakses oleh siapa saja...
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 9 Bentuk dasar dari tombol navigasi (btn_menu.svg)
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. <svg width="4.2cm" height="1.1cm"> Menu Button <defs> //--------------
Digunakan untuk menciptakan efek-efek filter seperti drop shadow dan emboss yang kemudian akan diberlakukan pada elemen utama. //-------------- //--
Digunakan untuk menciptakan sebuah persegi panjang berukuran 4,2cm x 1,1cm yang kemudian diberi warna dasar hijau.
Script ini kemudian diterapkan pada tombol navigasi sebagai berikut: Pengantar
Hasilnya adalah sebuah elemen grafis berbentuk tombol navigasi yang dapat di-klik untuk kemudian mengantar kita kepada halaman yang yang telah ditentukan sebelumnya.
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: <svg width="12.4cm" height="1.25cm" viewBox="0 0 1240 125"> <desc>Persamaan Reaksi Glikolisis C6H12O6 + 2 NAD + 2 ADP + 2 Pa // Persamaan reaksi yang hendak dibentuk 2CH3COCOOH + 2NADH2 + 2 ATP <path d="M580,40 L680,40 M660,25 L680,40 L660,55" stroke="blue" stroke-width="5" fill="none" /> glukosafosfatan organikpiruvat
Perintah 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 penggabungan antara SVG dengan HTML.
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.
Gambar 12
Aplikasi sMArTH (smarth.svg)
29
Persamaan matematika yang tampak seperti Gambar 12 dibuat dengan menggunakan aplikasi sMArTH dan menghasilkan script seperti dibawah ini: <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"> S <svg x="16" y="2.0928955078125" width="19.28125" height="25.25114631652832" viewBox="0 0 19.28125 25.25114631652832"> ≠<svg x="35.28125" y="2.0928955078125" width="24.15625" height="25" viewBox="0 0 24.15625 25"> ∅
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. Menumenu ini kemudian dibuat dalam format SVG dengan hanya dijadikan satu elemen SVG saja seperti tampak pada Gambar 14.
Gambar 13 Elemen menu pada semigrup.htm berformat JPG
30
Gambar 14 Elemen menu pada semigrup.htm berformat SVG
Membuat teks bertuliskan SEMIGRUP DAN MONOID yang akan menjadi link ke halaman semigrup.htm.
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 html2svg scripting. Tag ini juga direkomendasikan oleh Adobe untuk SVG Viewer mereka.
