Pengembangan Halaman Modul Kuliah Mikrobiologi mikro_modul5.htm

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 9 Bentuk dasar dari tombol navigasi btn_menu.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 -W3CDTD SVG 20010719EN http:www.w3.orgTR2001PR-SVG-20010719DTDsvg10.dtd svg width=4.2cm height=1.1cm titleMenu Buttontitle 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=urlMyFilter -- Digunakan untuk menerapkan filter efek yang telah didefinisikan pada script 1 kepada bentuk dasar yang dibuat pada script 3 dan 4. Dan setelah 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=25Pengantartextg -- 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=25Pengantartext 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. 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 -W3CDTD SVG 20010719EN http:www.w3.orgTR2001PR-SVG-20010719DTDsvg10.dtd svg width=12.4cm height=1.25cm viewBox=0 0 1240 125 descPersamaan Reaksi Glikolisisdesc rect x=0 y=0 width=1250 height=130 fill=F5FFE4 text x=20 y=50 font-family=Verdana font-size=30 fill=blue Ctspan baseline-shift=sub6tspanHtspan baseline- shift=sub12tspanOtspan baseline-shift=sub6tspan + 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 2CHtspan baseline-shift=sub3tspanCOCOOH + 2NADHtspan baseline-shift=sub2tspan + 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=blueglukosatext text x=480 y=90 font-family=Verdana font-size=30 fill=bluefosfattext text x=480 y=120 font-family=Verdana font-size=30 fill=bluean organiktext text x=700 y=90 font-family=Verdana font-size=30 fill=bluepiruvattext svg Perintah tspan baseline-shift=subtspan 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.

2. Pengembangan model file materi kuliah Matematika semigrup.htm