SVG Web Graphics using Microsoft Visio

Divisi Network di tempat kerja saya saat ini sedang mencoba meningkatkan layanan ke seluruh pengguna jaringan. Salah satu layanan adalah memberikan solusi yang cepat dan baik terhadap keluhan terutama jika terjadi putusnya hubungan jaringan baik internet maupun intranet. Aplikasi peta monitoring jaringan pun sudah disediakan setiap saat tim dari divisi jaringan dapat memonitor di layar monitor server atau router mana yang mati / putus dan mana yang jalan. Visualisasi yang ditampilkan dalam peta monitoring jaringan tersebut kurang interaktif dan informatif karena output yang ditampilkan secara online adalah berupa image (PNG) dengan beberapa informasi IP address dan beberapa informasi hasil proses ping ke server – server yang ditampilkan, disamping itu bagan yang ditampilkan hanya bagan dalam bentuk kotak, sehingga.  Harapan mereka akan lebih interaktif jika Peta monitoring bisa ditampilkan dalam bentuk Peta dan lokasi server, atau peta dalam bentuk Skema jaringan seperti menggunakan visio (biasanya mereka merancang skema jaringan di visio) , kalo ada server mati , server nya bisa kedip dan muncul suara, dan bisa di klik menampilkan informasi server tersebut lebih detail. Dengan  teknologi SVG  sebenarnya bisa!.

Microsoft visio merupakan sebuah software aplikasi desain grafis untuk pemodelan objek seperti berbagai jenis bagan flowchart, denah rumah, skema jaringan, object oriented design dan lain-lain.
Ms Visio memang sangat mudah digunakan apalagi model- model objek yang dapat dimasukan untuk versi terbaru lebih cantik dan menarik. Dari berbagai produk microsoft mungkin software ini yang mengejutkan saya, SVG format grafis untuk web yang diusung W3C masuk ke format yang didukung visio, tapi Internet Explorer emooh mengadopsi teknologi ini padahal para browser pesaing dah support.  Ini keuntungan buat para programmer yang terbiasa desain skema pake visio bisa tuh rancangannya disave as svg / svgz dan hasilnya bisa dilihat di browser (kalo di IE harus install adobe SVGviewer versi akhir meskipun gak dilanjutkan adobe atau batik).

Kebetulan sekali tim jaringan bikin rancangan skema jaringan biasanya pake visio, selanjutnya disave as ke svg , jadi tuh rancangan Peta monitoring jaringan. Selanjutnya kita tinggal buat program aplikasi webservices yang dipasang di sebuah server yang memerintahkan berbagai perintah termasuk administrasi data server.

How to connect svg with network webservice?

SVG yang sudah dihasilkan masih statis, bagaimana supaya bisa terhubung ke data webservice nya ? disini peran AJAX sangat penting. SVG support ke Javascript dan ECMAscript, jadi programming javascript dan akses ke aplikasi web tidak terlalu sulit dengan menggunakan perintah2 AJAX dan mengenal sedikit properties dan method dari obejct SVG. Tampilan yang skema yang sebelumnya dibuat visio itu sudah bisa interaktif mungkin bisa dibilang hasil tampilan seperti dibuat dengan Flash atau Silverlight.

Bahan ini sedang dijadikan tugas akhir oleh seorang mahasiswa. Jadi kalo beres akan saya laporkan disini.