PENGEMBANGAN MODEL. A. Pengembangan Model

(1)

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

(2)

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">

<defs>

//---

Digunakan untuk menciptakan efek-efek filter seperti drop shadow dan

emboss yang kemudian akan diberlakukan pada elemen utama. //---

</defs>

//-- Digunakan untuk menciptakan sebuah persegi panjang berukuran 4,2cm

x 1,1cm yang kemudian diberi warna dasar hijau.

<!-- Digunakan untuk menerapkan filter efek yang telah didefinisikan pada script 1 kepada bentuk dasar yang dibuat pada script 3 dan 4. Dan setelah

(3)

script ini dijalankan, maka terciptalah bentuk akhir dari tombol navigasi

seperti tampak pada Gambar 10.

--> <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.

(4)

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"

<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>

<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

(5)

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.

(6)

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"?>

class="textelt">S</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.

(7)

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"?>

<text x="12" y="35" font-family="Verdana" font-size="32" fill="white">SEMIGRUP DAN MONOID</text></a>

<text x="475" y="35" font-family="Verdana" font-size="32" fill="white">INVERS DALAM MONOID</text></a>

<text x="940" y="35" font-family="Verdana" font-size="32" fill="white">PEMETAAN INVERS</text></a>

<text x="1300" y="35" font-family="Verdana" font-size="32" fill="white">KONSEP GRUP</text></a>

<text x="1590" y="35" font-family="Verdana" font-size="32" fill="white">SUBGRUP</text></a>

</svg>

Penjelasan program:

<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 link ke halaman semigrup.htm.

(8)

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.

Kekurangan : Belum memiliki standardisasi yang jelas pada

spesifikasi HTML versi 4. Sintaks penulisan :

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

(9)

Sintaks penulisan :

codebase="http://www.adobe.com/svg/viewer/install/" />

3. Tag <iframe>

Kelebihan : Berjalan pada hampir semua browser walaupun belum

terdokumentasikan

Kekurangan : Tanpa pemrograman yang spesifik, akan terbentuk

sebuah kerangka seperti sebuah window yang mengelilingi objek SVG.

Sintaks penulisan :

Dari ketiga metode yang ada, metode yang dipilih dalam proses penggabungan antara file SVG dengan aplikasi induk berformat HTML adalah

formating dan dukungan yang cukup tinggi dari Internet Explorer.

1. Menyatukan file-file SVG dengan file mikro_modul5.htm

Berikut adalah penggalan script yang digunakan untuk menyisipkan file SVG (btn_menu.svg) yang akan menjadi tombol navigasi.

... ...

<tr>

(10)

</td> </tr> ...

Berikut adalah penggalan script yang digunakan untuk menyisipkan file SVG (glikolisis.svg) yang akan menampilkan bentuk persamaan reaksi.

... <p>

pluginspage="http://www.adobe.com/svg/viewer/install/" /> </p>

...

Setelah semua file SVG disisipkan ke dalam file mikro_modul5.htm, maka apabila file mikro_modul5.htm dibuka pada jendela browser menggunakan

Internet Explorer dengan mengakses melalui lokal webserver Apache, akan

tampak halaman seperti Gambar 15 dan Gambar 16.

(11)

Gambar 16 mikro_modul5.htm pada jendela browser Microsoft IE, bagian 2

Pada Gambar 15, komponen yang diubah ke dalam format SVG hanya menu Pengantar, Modul 1, Modul 2, Modul 3, Modul 4, Modul 5, Modul 6, dan Rujukan. Semua tombol navigasi tetap merujuk kepada halaman tujuan yang sebenarnya. Terdapat link-link yang akan mengarahkan pengunjung ke halaman PENGANTAR (index.htm), MODUL 1 (mikro_modul1.htm), MODUL 2 (mikro_modul2.htm) MODUL 3 (mikro_modul3.htm), MODUL 4 (mikro_modul4.htm), MODUL 6 (mikro_modul6.htm), dan halaman

RUJUKAN (mikro_rujukan.htm). Tetapi karena halaman ini

(mikro_modul5.htm) saja yang dijadikan sebagai contoh pengembangan aplikasi menggunakan SVG, maka halaman-halaman lain tetap merupakan halaman standar yang mengandung file-file gambar berformat JPG.

Script lengkap elemen-elemen SVG pada halaman mikro_modul5.htm

(12)

2. Menyatukan file-file SVG dengan file semigrup.htm

Berikut adalah penggalan script yang digunakan untuk menyisipkan file SVG (up_menu.svg) yang akan menjadi menu navigasi.

... ... <tr>

Berikut adalah penggalan script yang digunakan untuk menyisipkan file SVG (equa000.svg) yang akan menampilkan sebuah bentuk persamaan matematika.

... ...

<i>Suatu grupoid </i>(<i>G</i>,

<font face="Symbol">*</font> )<i> disebut semigrup jika </i> <embed src="content/equa000.svg" autostart="true"

width="150" height="30px" type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/" /> <i>berlaku</i>

</p> ... ...

Setelah semua file SVG disisipkan ke dalam file semigrup.htm, maka apabila dibuka pada jendela browser menggunakan Microsoft Internet Explorer dengan mengakses melalui webserver lokal Apache, akan tampak halaman

(13)

Gambar 17 semigrup.htm pada jendela browser Microsoft IE, bagian 1

(14)

Pada halaman ini, semua tombol navigasi tetap merujuk kepada halaman tujuan yang sebenarnya. Terdapat link-link yang akan mengarahkan pengunjung kehalaman INVERS DALAM MONOID (invers.htm), PEMETAAN INVERS (pemetaan.htm), KONSEP GRUP (grup.htm), dan halaman SUBGRUP (subgrup.htm).

Tetapi karena hanya halaman SEMIGRUP DAN MONOID (semigrup.htm) saja yang dijadikan sebagai contoh pengembangan aplikasi menggunakan SVG, maka halaman-halaman lain tetap merupakan halaman standar yang mengandung file-file gambar berformat JPG dan GIF tetapi tetap dapat diakses oleh pengunjung.