eXtensible Markup Language XML Scalable Vector Graphics SVG

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. pbHuruf Tebalpb 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. pbHuruf tebalbp Hal ini tidak akan terjadi pada pemrograman menggunakan HTML versi 4 atau dibawahnya

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 v r yang menghubungkan titik i dan 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 juga designer untuk membuat grafik dengan mutu tinggi. 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. 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 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 Editorbrowser 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. 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 Consortium1 2006 ?XML version=1.0? DOCTYPE svg PUBLIC -W3CDTD SVG 1.0EN http:www.w3.orgTR2001REC-SVG-20010904DTDsvg10.dtd svg XMLns=http:www.w3.org2000svg style type=textcss 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=translate0,50 circle cx=6.5cm cy=2cm r=100 style=fill:blue; stroke:black; stroke-width:0.1cm transform=translate70,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. Gambar 6 Tampilan dari script circle.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, AOLNetscape, 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. 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 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 -W3CDTD SVG 20010719EN http:www.w3.orgTR2001PR-SVG-20010719DTDsvg10.dtd svg width=5cm height=3cm viewBox=0 0 500 300 descContoh 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 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 METODOLOGI

A. Tahapan Penelitian