Implementasi ECMA Script Pada Scalable Vector Graphics (SVG) Untuk Melakukan Algoritma Selection Sort.

Munculnya SVG telah membuat standar baru dalam menampilkan citra dan animasi dalam kualitas tinggi.  Pada waktunya nanti SVG ini akan bisa menggantikan XHTML dan CSS dalam menampilkan data melalui protokol HTTP.

Perkembangan XML yang pesat akhir-akhir ini membawa perubahan yang cukup pesat dalam pemrograman web.  Sudah ada  banyak perusahaan yang mensupport XML dalam implementasinya.   Kemudahan XML akan membawa perubahan yang cukup baik untuk perkembangan web.  Selain itu, sifatnya yang extensible ini membuat XML bisa dipakai untuk penggunaan yang lebih spesifik seperti MathML untuk matematika, SMIL untuk multimedia, XSL untuk stylesheet dan juga SVG untuk grsfik ber basis vektor.  Pada perkembangannya SVG akan bisa dianimasikan dengan memakia ECMA script.

XML adalah dokumen yang memperbolehkan kita menjadikannya sebuah data yang akan ditampilkan.  Dengan ini kita bisa membuat dokumen lengkap dan sarat akan isi, namun mudah dan ringan untuk ditransferkan.  Untuk membuat dokumen XML tidak sulit, asalkan kita mengikuti struktur penulisannnya maka dokumen ini sudah jadi sebuah dokumen XML.

Contoh dokumen XML :

<?xml version=”1.0″?>

<?xml:stylesheet href=”AccessoriesXSL.xsl” ?>

<accessories>

<accessory>

<name>Auxiliary Seats</name>

<price>$395.00</price>

<description>New seat design.</description>

</accessory>

<accessory>

<name>Monsoon Premium Audio</name>

<price>200.00</price>

<description>Kick Ass Audio System</description>

</accessory>

</accessories>

Sedangkan SVG adalah bahasa yang mendeskripsikan grafik dua dimensi dalam format bahasa XML.  Karena formatnya yang berupa vektor, SVG tidak memiliki masalah dengan proses zoom, sselain itu formatnya yang menganut XML (berbasis teks) membuat SVG ringan ukurannya, juga dapat ditelusur oleh search engine, tidak seperti citra raster yang berbasis piksel.

Contoh dokumen SVG :

<?xml version=”1.0″ encoding=”us-ascii”?>

<svg xmlns=”http://www.w3.org/2000/svg&#8221; version=”1.0″>

<title>Uji coba</title>

<desc></desc>

<ellipse stroke=”black” fill=”none” cy=”39px” cx=”101px”

rx=”48px”/>

<rect stroke=”black” fill=”none” rx=”5px” y=”137px”

x=”158px”

width=”202px” height=”73px”/>

<switch>

<foreignObject

requiredExtensions=”http://www.w3.org/1999/xhtml&#8221;

width=”169px” height=”50px” y=”146px” x=”170px”>

<div xmlns=”http://www.w3.org/1999/xhtml&#8221; dir=”ltr”>

<p>Teks dalam SVG</p>

<p><a href=”http://localhost”>Testing tes></p>

</div>

</foreignObject>

<text y=”146px” x=”170px”>&lt;html&gt;

</text>

</switch>

</svg>

Seperti sudah dijelaskan, kita dapat membuat grafik SVG beranimasi.  Ini dilakukan dengan cara menambahkan sebuah script yang biasa disebut ECMA script.  ECMA script ini sendiri adalah script standar hasil pengembangan Microsoft dan Netscape, namun lebih diturunkan dari Netscape JavaScript.  Penggunaan ECMA script ini akan menjamin konsistensi kode yang akan diimplementasikan di Netscape, microsoft ataupun implementasi lainnya.

ECMA script memang ditujukan untuk bahasa scripting web, dimana gunanya adalah membuat web browser lebih hidup dan mempercepat transaksi dengan server.  ECMA script juga memiliki struktur object oriented, yang membuat script ini mudah ditambahkan ke dokumen HTML yang memakai DOM (Document Object Model) mirip seperti pemakaian Jscript dan JavaScript saat ini.

Untuk menampilkan SVG ada beberapa cara yaitu memakai web browser yang sudah memiliki plug in (adobe atau corel SVG) atau memakai aplikasi tersendiri.  Aplikasi ini akan merubah format XML yang seperti tree untuk dirender jadi image.  Disini akan dicoba diterapkan algoritma selection sort untuk mengurutkan diagram blok yang pada awalnya tersusun acak memakai ECMA script.

Algoritma Selection Sort :

for(i = 0; i < .length; i++){

min = i;

for (j = i + 1; j < .length; j++){

i (a[j] < min])

min = j;

}

T = a[min];

a[min] = a[i];

[i] = T;

}

Jadi, dengan memanipulasi kode SVG dan menambahkan ECMA Script, kita dapat menampilkan animasi yang bagus.  Ini memungkinkan SVG akan terus berkembang mengalahkan teknologi XHTML dan CSS yang saat ini paling diminati.

Sumber : IMPLEMENTING ECMA SCRIPT ON SCALABLE VECTOR GRAPHICS TO PERFORM SELECTION SORT ALGORITHM, Mukhammad Andri Setiawan

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s