SVG (Scalable Vector Graphics) merupakan suatu format gambar Vector yang berbasis Open XML untuk membentuk gambar 2 dimensi termasuk animasinya dalam format XML (eXtensible Markup Language). Untuk mempelajari SVG perlu dasar tentang pemrograman web yaitu menggunakan HMTL dan dasar-dasar XML.
Pengertian SVG lainnya :
> SVG digunakan untuk membuat grafik dengan mendefinisikan vector, yang akan digunakan dalam halaman web.
> SVG menghasilkan grafik yang tidak akan berkurang kualitasnya sebagai akibat proses zoomming maupun resizing.
> Elemen dan attribut dalam SVG dapat dianimaai
> SVG direkomendasikan oleh World Wide Web Consortium (W3C)
> SVG terintegrasi dengan standar W3C lainnya misalnya DOM dan XSL
File yang disimpan dalam format SVG ini sangat kecil ukurannya. Dan sudah didukung oleh hampir semua program gambar karena format gambar ini juga didukung oleh browser Firefox dan Opera.
SVG mendukung beberapa tambahan penting, antara lain:
* anti-aliased rendering,
* pattern dan gradient fills,
* sophisticated filter-effects,
* clipping to arbitrary paths,
* text dan animations.
Yang membedakan antara SVG dan Flash adalah bahwa SVG merupakan rekomendasi dari W3C dan berbasis XML. Sedangkan flash merupakan format yang tertutup.
Native SVG dan Plugin SVG
Ada 2 cara sebuah browser mendukung SVG, yaitu:
1. Native SVG
2. Plugin SVG
Native SVG artinya browser secara langsung sudah mendukung format SVG. Sedangkan untuk browser yang tidak mendukung SVG dapat dilakukan dengan memasang Plugin (atau disebut juga Extension/Add-Ons). Salah satu Plugin yang terkenal adalah Adobe Viewer (http://www.adobe.com/svg/).
Sejarah dan Keuntungan Penggunaan SVG.
SVG 1.1 direkomendasikan oleh W3C pada Januari 2003. Sun Microsystems, Adobe, Apple, IBM, dan Kodak merupakan beberapa organisasi yang terlibat dalam pendefinisian SVG.
Keuntungan penggunaan SVG dibanding format gambar yang lain (misalnya JPEG dan GIF) antara lain:
• File sumber SVG dapat dibaca dan modifikasi dengan menggunakan hampir semua tool/text (misalnya notepad)
• File sumber SVG berukuran lebih kecil dan dapat dikompresi dibanding dengan format gambar JPEG dan GIF
• Gambar dalam format SVG bersifat scalable/diresizing
• Gambar dalam format SVG dapat dicetak dengan kualitas yang tinggi dan sama baiknya pada berbagai resolusi
• Gambar dalam format SVG bersifat zoomable. Setiap bagian dari gambar dapat di zoom tanpa degradasi mutu
• Text dalam SVG “selectable” dan “searchable” (sangat berguna dalam peta)
• SVG dapat bekerja dengan Teknologi Java
• SVG merupakan “open standard”
• SVG merupakan murni XML
Pesaing utama dari SVG adalah Flash. Kelebihan utama dari SVG dibanding Flash adalah bahwa SVG “compliance” dengan standar yang lain (misalnya XSL dan DOM). Flash berlandasan pada teknologi yang tidak open source. Sampai saat ini SVG belum sepenuhnya disupport oleh semua browser. Mozilla, Firefox, dan Opera sudah mendukung SVG, Microsoft baru pada tahap rencana untuk mendukung SVG. Beberapa SVG editor tersedia, salah satu diantaranya adalah Adobe GoLive 5.
Menampilkan File SVG
Untuk menampilkan file dalam format SVG, kita perlu meng- install sebuah plug-in misalnya Adobe SVG Viewer (Klik disini untuk free download dari Adobe.). Jika browser yang kita gunakan tidak mendukung SVG, makan perlu men- download sebuah SVG viewer untuk menampilkan file SVG. Jika kita menggunakan browser Firefox 1.5 atau Opera 9 yang sudah mendukung SVG tidak diperlukan sebuah plug-in/ SVG viewer.
Menulis Kode dalam SVG
Berikut merupakan contoh dari kode sederhana dari SVG. File SVG harus disimpan dalam file dengan ekstension .svg:
SUMBER:
http://aryigustiawan.blogspot.com/2010/04/svg-scalable-vector-graphics-merupakan.html
Kamis, 17 November 2011
EXTENSIBLE STYLESHEET LANGUAGE TRANSFORMATION (XSLT)
XSL merupakan suatu bahasa pedoman transformasi dokumen-dokumen XML menjadi bentuk lainnya, seperti HTML. Proses transformasi ini disebut XSL Transformation (XSLT). Transformasi dilakukan dengan mencocokkan pola-pola dalam file XSL dengan elemen-elemen pada struktur XML. Pola-pola XSL ini kemudian membangkitkan template-template untuk membuat bagian-bagian dari file output.
Contoh pola XSL :
Dari contoh di atas, pola memberikan persyaratan bahwa yang akan diproses adalah elemen para dari file inputnya. Ketika elemen tersebut ditemukan, maka diterapkan template yang telah didefinisikan yaitu setiap elemen para ditulis dengan huruf tebal (diapit dengan tag <B></B> yang merupakan tag HTML untuk menebalkan tulisan).
Contoh lain dari pola-pola di atas adalah :
· <xsl:template match="*"> : dicocokkan dengan semua elemen.
· <xsl:template match="bab/bagian"> : dicocokkan dengan elemen bagian yang mempunyai elemen induk bab
· <xsl:template match="bab|bagian"> : dicocokkan dengan elemen bab dan elemen bagian
· <xsl:template match="bab//para"> : dicocokkan dengan setiap elemen para yang berada satu level atau beberapa level di bawah elemen bab
· <xsl:template match="bab[@id=’2’]"> : dicocokkan dengan elemen bab yang memiliki atribut bernilai 2
Namespace
Setiap file XSL harus memiliki dan menyebutkan Namespace. Namespace ini diperlukan agar prosesor mengenal elemen-elemen dan atribut-atribut yang didefinisikan oleh namespace ini. Dalam contoh dipakai elemen-elemen dan atribut-atribut yang telah didefinisikan oleh World Wide Web Consortium (W3C). Namespace dari W3C adalah : http://www.w3.org/1999/XSL/Transform.
Penyebutan Namespace dalam XSL ini adalah sebagai berikut :
<xsl:stylesheet version=”1.0”
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
…………(template dan pola-pola XSL)
</xsl:stylesheet>
Kita dapat menggunakan definisi tambahan (extension) dengan menyebutkan namespace dari pembuatnya. Definisi ini tidak boleh merubah definisi yang telah ditetapkan oleh W3C, serta namespace dari W3C tidak dapat dihilangkan.
Contohnya :
<xsl:stylesheet version=”1.0”
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:”http://www.apacoba.com/XSL”>
…………(template dan pola-pola XSL)
</xsl:stylesheet>
Bila namespace ini tidak disebutkan, maka prosesor transformasi tidak dapat mengetahui definisi mana yang dipakai. Pada XALAN, pesan kesalahannya berupa :
The prefix “xsl” for element “xsl:stylesheet” is not bound
berarti, stylesheet didefinisikan secara tak terbatas, maka tidak dapat diproses.
Definisi-definisi tambahan (extension) dari namespace, seperti disebutkan di atas, tidak boleh mengubah aturan-aturan dasar dari W3C. Tambahan yang dapat didefinisikan dalam hal ini dapat berupa:
- informasi yang digunakan oleh elemen-elemen dan/atau fungsi-fungsi tambahan
- informasi tentang apa yang akan dilakukan dengan file hasil
- informasi tentang bagaimana memperoleh file input
- metadata XSL
- dokumentasi terstruktur XSL
Version
Setiap elemen teratas dari file XSL harus menyebutkan versi dari XSL. Untuk waktu sekarang ini, versi yang beredar adalah versi 1.0. dan 2.0
Contoh :
<xsl:stylesheet version=”1.0”
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
Contoh Transformasi
Berikut contoh dari transformasi dengan dokumen input present.xml, dokumen stylesheet present2.xsl.
Struktur dari dokumen inputnya sebagai berikut :
Kode file XMLnya adalah :
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="present2.xsl" output="html"?>
<serbaserbi>
<berita minggu="1">
<judul> Mahasiswa berprestasi bulan ini </judul>
<teks>
Sesuai dengan kebijaksanaan jurusan demi memacu prestasi mahasiswanya
maka pada malam <acara> Anugerah Ekselensia Elektro </acara> yang diadakan
<tanggal> 17 Agustus 2002 </tanggal> yang lalu telah diberikan anugerah
kepada empat orang mahasiswa berprestasi. Hadiah yang diberikan sangat
menggiurkan, yaitu dapat tidak mengikuti kuliah selama satu bulan tanpa
sanksi. Berikut daftar mahasiswa berprestasi tersebut.
</teks>
<mhs id="1">
<nim>22729</nim>
<nama>Aditya BS Siregar</nama>
<ipk>3,02</ipk>
<alamat> Jl. Pacar 4 Baciro Baru Yogyakarta </alamat>
<angkatan> 1998 </angkatan>
</mhs>
<mhs id="2">
<nim>22666</nim>
<nama>Pupus Adiwaluyo</nama>
<ipk>3,34</ipk>
<alamat> BangjoNet Tepi selokan </alamat>
<angkatan> 1998 </angkatan>
</mhs>
<mhs id="3">
<nim>21759</nim>
<nama>Yudha Condor Sulaeman</nama>
<ipk>3,88</ipk>
<alamat> FastNet Fakultas Teknik Uge-Em </alamat>
<angkatan> 1997 </angkatan>
</mhs>
<mhs id="4">
<nim>23726</nim>
<nama>Cindy Wanita Palingayu Sadonya</nama>
<ipk>3,99</ipk>
<alamat> Jl. Pacar 4 Baciro Baru Yogyakarta, idem dg Aditya </alamat>
<angkatan> 1998 </angkatan>
</mhs>
</berita>
</serbaserbi>
Sedang kode file XSLnya adalah :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xalan="http://xml.apache.org/xslt">
<xsl:template match="/">
<html><body bgcolor="#675654">
<xsl:apply-templates/>
</body></html>
</xsl:template>
<xsl:template match="berita">
<p/><font face="arial">
<b><u> Berita minggu ke : <xsl:value-of select="@minggu"/></u></b></font>
<p/>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="berita/judul">
<p/>
<font size="6" face="verdana"> <xsl:apply-templates/></font>
<p/>
</xsl:template>
<xsl:template match="berita/teks">
<p/>
<table size="44"><tr><td><font face="verdana" size="2">
<xsl:value-of select="."/>
</font></td></tr></table>
<p/>
</xsl:template>
<xsl:template match="berita/mhs">
<p/><font face="arial" size="2">
<b>Nomor :</b><xsl:value-of select="@id"/><br/>
<xsl:apply-templates/></font>
<p/>
</xsl:template>
<xsl:template match="berita/mhs/*">
<xsl:choose>
<xsl:when test="local-name(.)='nama'">
<b>Nama:</b>
</xsl:when>
<xsl:when test="local-name(.)='nim'">
<b>NIM:</b>
</xsl:when>
<xsl:when test="local-name(.)='angkatan'">
<b>Angkatan:</b>
</xsl:when>
<xsl:when test="local-name(.)='alamat'">
<b>Alamat:</b>
</xsl:when>
<xsl:when test="local-name(.)='ipk'">
<b>IPK:</b>
</xsl:when>
</xsl:choose>
<xsl:value-of select="."/>
<br/>
</xsl:template>
</xsl:stylesheet>
Transformasi ke format HTML dengan XALAN JAVA 2
Xalan-Java merupakan sebuah program yang berfungsi untuk mentransformasikan dokumen XML ke berbagai macam format dokumen lainnya (contoh : HTML, Text (txt)). Dalam proses transformasi tersebut Xalan-Java mengacu pada pedoman transformasi yang disimpan dalam file XSLT (Extensible Stylesheet Language Transformation). Maka, Xalan-Java mendukung seluruh kata-kata transformasi dalam standar XSLT versi 1.0, sekaligus mendukung pula bahasa XPath (XML Path Language) versi 1.0 yang direkomendasikan oleh World Wide Web Consortium (W3C).
Untuk melakukan transformasi, sebelumnya harus diinstal Java Development Kit (JDK) 1.2.2 atau dengan versi yang lebih tinggi.Dalam proses instalasi, pertama yang dilakukan adalah men-download file xalan-j_2_4_D1-bin.zip dari situs http://xml.apache.org/xalan-j. Kemudian setelah disimpan dalam hard disk, file tersebut diekstrak ke direktori yang diinginkan. Untuk dapat melakukan transformasi, file-file .jar yang diperlukan harus disertakan dalam classpath, agar aplikasi java.exe yang terdapat dalam JDK 1.2.2 dapat menemukan kelas-kelas yang diperlukan untuk melaksanakan transformasi.File-file .jar yang diperlukan adalah :
- xerces.jar
- xalan.jar
- xml-apis.jar
File-file .jar di atas telah disertakan dalam distribusi Xalan-Java, terletak dalam folder xalan/bin.
Ketiga file tersebut dimasukkan dalam classpath dengan perintah :
> set classpath = c:\java\xalan\bin\xalan.jar; c:\java\xalan\bin\xerceslmpl.jar; c:\java\xalan\bin\xml-apis.jar
Proses transformasi dilakukan dengan memanggil kelas seperti tersebut di atas, dengan menuliskan flag-flag sebagai berikut :
> java org.apache.xalan.xslt.Process –in present.xml –xsl present.xsl –out present.htm
Perintah di atas memproses input file present.xml, berdasarkan XSL yang terdapat pada file present.xsl, dan menghasilkan output yang berformat HTML pada present.htm
Sedangkan perintah di bawah ini menghasilkan file Microsoft Word (.doc) :
> java org.apache.xalan.xslt.Process –in present.xml –xsl present.xsl –out present.doc
SUMBER:
SUMBER:
Langganan:
Postingan (Atom)
