Multimedia dalam Web : HTML5 dan SVG.

Pengertian HTML5 dan SVG

Apa itu HTML5…?

HTML (HyperText markup language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Sedangkan HTML5 merupakan standar baru untuk HTML, XHTML, dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan website dunia semakin berkembang. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browse sudah mendukung HTML5.

HTML5 merupakan hasil proyek dari W3C ( World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

· Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript

· Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

· Penanagan kesalahan yang lebih baik

· Lebih markup untuk menggantikan scripting

· HTML5 merupakan perangkat mandiri

· Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

· Unsur kanvas untuk menggambar

· Video dan elemen audio untuk media pemutaran

· Dukungan yang lebih baik untuk penyimpanan secara offline

· Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section

· Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browse sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Exploree ) akan mendukung beberapa fitur dari HTML5

Apa itu SVG…?

SVG singkatan dari Scalable Vector Graphics adalah sebuah format file baru untuk menampilkan grafik dalam pengembangan. SVG memiliki dua bagian: sebuah file berbasis XML format dan API untuk pemrograman aplikasi grafis.

SVG juga bebas royalti netral vendor-standar terbuka yang dikembangkan di bawah W3C Proses. Memiliki dukungan industri yang kuat, Penulisan dari spesifikasi SVG meliputi Adobe, Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharp dan Sun Microsystems. Tampilan SVG dikerahkan ke lebih dari 100 juta desktop, dan ada dukungan luas dalam banyak authoring tools.

SVG ini dibangun berdasarkan standar-standar sukses lainnya seperti XML (SVG grafis berbasis teks dan dengan demikian mudah untuk menciptakan), JPEG dan PNG untuk format gambar, script dan DOM untuk interaktivitas, SMIL untuk animasi dan CSS untuk styling.

SVG juga dioperasikan. W3C merilis sebuah suite dan pelaksanaan tes hasil untuk memastikan kesesuaian.

Macam- Macam SVG

SVG 1,1 adalah Rekomendasi W3C dan merupakan versi terbaru dari spesifikasi lengkap.

SVG Tiny 1,2 adalah Rekomendasi W3C, dan target perangkat mobile. Ada berbagai SVG pengembangan modul di bawah yang akan memperluas versi sebelumnya dari spesifikasi, dan yang akan berfungsi sebagai inti dari perkembangan SVG masa depan.

Fungsi SVG untuk menampilkan grafik -grafik dimensional dalam kode XML dan juga dapat mengkreasikan sebuah grafik yang terdiri dari banyak vektor yang berbeda-beda. Pada dasarnya, SVG dapat digunakan untuk membuat tiga jenis objek grafik, yaitu :

1. Path, terdiri dari garis lurus dan kurva.

2. gambar.

3. teks.

Struktur SVG

Dalam struktur penulisannya, dokumen SVG mempunyai sedikit aturan sederhana. Aturan dasar yang paling penting adalah dokumen SVG dimulai dengan elemen <SVG> dan diakhiri dengan elemen </SVG>. Selain aturan dasar di atas terdapat aturan lain dalam penulisan sintaksnya antara lain:

Di bawah ini adalah contoh dokumen SVG.

<?xml version=”1.0″ encoding=”iso-8859-1″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD svg 20000303 Stylable//EN”

“http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303 stylable.dtd”>

<text style=”fill:red” x =”10″ y=”20″>Hello World !</text>

</svg>

Dokumen SVG dapat juga diletakkan ke dalam dokumen lain, seperti dokumen XML atau HTML. Untuk membuat dokumen SVG tercakup dalam dokumen HTML dapat menggunakan tag <embed>, tag <object> dan tag <iframe> seperti contoh dibawah ini:

Contoh <embed>

contoh <object>

contoh <iframe>

Bentuk Dasar SVG

SVG menetapkan enam bentuk dasar, termasuk juga path dan teks, yang dapat digabungkan untuk membentuk image yang mungkin. Setiap bentuk ini mempunyai properti yang menjelaskan posisi dan ukuran dari bentuk. Warna dan garis ditentukan oleh properti fill dan stroke.

Lingkaran

Elemen untuk membangun sebuah lingkaran menggunakan elemen <circle> dimana terdapat atribut cx dan cy yang mendefinisikan posisi tengah lingkaran, serta atribut r yang mendefinisikan jari-jari lingkaran. Contohnya,

Elips

Elemen untuk membangun sebuah elips menggunakan elemen <ellipse> dimana terdapat atribut rx yang mendefinisikan jari-jari horisontal dan ry yang mendefinisikan jari-jari vertikal. Contohnya,

Persegi empat

Elemen untuk membangun segi empat menggunakan <rect> dimana terdapat atribut rx dan ry untuk mendefinisikan ujung bulat dari bujur sangkar. Jika ujungnya tidak bulat maka rx=ry=0 atau tidak ada atribut tersebut. Contohnya,

<rect x=”40” y=”40” width=”75” height=”100” rx=”30” ry=”20”/>,

Garis

Menampilkan garis diantara dua koordinat dan untuk membangunnya menggunakan elemen <line>. Contohnya,

Banyak garis (Polyline)

Menampilkan sebuah rangkaian garis dengan vertek yang sudah ditentukan dan untuk membangunnya menggunakan elemen <polyline>. Contohnya,

Poligon

Sama dengan polyline, tetapi ditambah sebuah garis dari titik terakhir ke titik yang pertama, membuatnya dan mengandung paling sedikit tiga sisi. Contohnya,

Path

Path memiliki konsep menghubungkan titik ke titik lainnya. Konsep ini dapat diperluas untuk menggambar kurva-kurva atau form-form yang sangat kompleks. Path juga dapat digunakan untuk membuat animasi dan bahkan untuk mengkreasikan teks. Path dapat membuat tiga tipe kurva, antara lain:

Teks

Elemen teks dapat dipecah menjadi beberapa bagian menggunakan elemen tspan, membuat masing-masing bagian menjadi bentuk individual. Contohnya,

<text x=”20” y=”20” font-size=”30”>by their

values</text>

Kelebihan dan Kekurangan

1.Kelebihan SVG

gambar tidak akan kehilangan kualitasnya apabila diperbesar atau diperkecil (scalable), karena dibuat berdasarkan metode vektor (vector), bukan pixel (seperti format grafik pada umumnya, GIF, JPEG dan PNG). Sehingga memungkinkan pengembang web dan juga designer untuk membuat grafik dengan kualitas mutu tinggi. Walaupun SVG berbasis vektor (dalam artian semua objek dibangun dengan prinsip vektor), SVG ternyata juga dapat dikreasikan untuk efek bayangan, gradasi warna atau juga pencahayaan, Selain itu, animasi juga dapat dikembangkan SVG, sesuatu yang tidak dimiliki oleh GIF, JPEG dan PNG. Hal ini dimungkinkan dengan integrasi DOM (Document Object Modell). Jadi, grafik SVG dapat dianimasikan melalui perintah script.

2. pengkodeannya yang lumayan mudah karena berakar XML. Tidak perlu susah payah untuk mengerjakan pengembangan pada web untuk mempelajari bahasa baru, karena pada dasarnya SVG adalah pengimplementasian objek vektor dalam web dengan menggunakan XML. Informasi (vektor) yang disimpan SVG berbentuk teks (dalam XML), bukan binary code, ini memiliki keunggulan dalam kecepatan proses download karena kecilnya kapasitas file.

a) SVG is free

b) SVG support scalable graphics

c) Animation and multimedia support ( bikin aplikasi mirip flash)

d) CSS, javascript (ECMA Script)

e) Simple (XML based)

f) Multiplatform : internet explorer menggunakan adobe svg viewer, rencananya sih svg akan diadopsi di ie8, opera sejak versi 8 sudah support svg, untuk browser lain ada svg viewer, apache batik.

g) SVGtiny, SVG mobile : untuk dapat diakses di perangkat mobile : smartphone, pda dll.

kekurangan SVG

Untuk membaca SVG kita harus menginstall dulu plug-in, yaitu SVG-Viewer, SVG-Viewer teraktual dikembangkan oleh ADOBE. Browser Croczilla, variasi dari Mozilla-0.9, sudah mendukung SVG, tanpa perlu menginstal SVG-Viewer terlebih dahulu.

Bagaimana HTML5 dan SVG mendukung dalam web…?

HTML5 Mendukung multimedia dalam web…
Dengan Firefox 4, Google Chrome, IE 9, Safari 5 dan Opera semua menawarkan yang lebih baik, dukungan yang lebih kuat untuk HTML5, CSS3 (Cascading Style Sheet) dan JavaScript, kita sudah melihat sekilas tentang apa yang mungkin dan seperti apa web masa depan akan terlihat.

Web Open Font Format, atau WOFF, secara teknis mungkin bagian dari spesifikasi HTML5, tapi WOFF, SVG (Scalable Vector Graphic) dan CSS3 @ font-face semua spesifikasi tambahan umumnya digunakan untuk HTML5.

Penerapan web font, apakah itu menggunakan WOFF, layanan seperti Fonts.com, Typekit atau Google Web Font API (Application Programming Interface) meningkat dengan pesat. Perkembangan ini memberikan pencipta konten, merek dan pengembang cara untuk lebih mengekspresikan dan mengontrol bagian terpenting dari sebuah aplikasi atau website - teks itu sendiri - tanpa harus bergantung pada gambar atau implementasi Flash yang tidak selalu bekerja dengan baik untuk teks diterjemahkan atau dengan search engine.

jumlah aplikasi web yang mendukung custom font menggunakan Google, Typekit, Fonts.com atau sejumlah solusi lainnya makin meningkat. Kami berharap ini akan berlanjut, terutama karena penerapan web browser terbaru dan terbaik terus berkembang.

SVG mendukung multimedia dalam web..

SVG sendiri merupakan suatu pengembangandari format dokumen yang sering kita sebut XML (eXtensible Markup Language). Ini menjawab kenapa SVG ringan dalam ukuranfile karena SVG ini berbasis teks dan dapat dengan mudah diedit dengan teks prosessor.

SVG yang menjadi salah satu standar W3C, yang sampai sekarang masih terus dikembangkan dilaunching pada 2 Agustus 2000. Ini merupakan standar baku penulisan XML untuk mendeskripsikan grafik vektor 2 dimensi. Format ini dengan mudah dikombinasikan dengan elemen web yang lain seperti DOM ataupun CSS. Jadi memungkinkan bagi SVG untuk diatur perubahan elemennya seperti HTML yang dibumbui dengan JavaScript. Namun disini kita mendapat lebih, bukan teks tapi grafik, yang artinya animasi gambar.

Sejauh ini sudah ada banyak perusahaan dan badan-badan yang mensupport adanya SVG. Antara lain ini nama-namanya: Adobe, Apple, AutoDesk, Bit-Flash, Corel, HP, IBM, ILOG, Inso, Kodak, Macromedia, Microsoft, Netscape, Oasis, Open Text, Oxford University, Quark, RAL, Sun-Microsystems, W3C und Xerox. Tidak menutup kemungkinan perkembangannya akan semakin baik.

Keuntungan lain dari SVG adalah vektor itu tidak mengenal resolusi. Ini menjadi poin lebihyang tidak dimiliki oleh citra raster.

Elemen lain yang berhubungan dengan SVG antara lain proses rendering gambarnya yang menggunakan painters algorithm. Sistem ordinat yang dipakai mirip dangan koordinat kartesius dengan nilai sumbu y yang dibalik. Seperti sudah dijelaskan, SVG ini teks sekaligus gambar, kita bisa mengeditnya dengan teks editor atau dengan editor gambar yang support SVG. Elemen-elemen dasar bangun datar juga di dukung oleh SVG sampai ke properti tiap bangun. Kemampuan klipping dan masking juga dibekalkan, jadi SVG tidak cuma mendukung vektor tapi juga citra raster dan teks. Penambahan Script di SVG juga dimungkinkan sehingga SVG ini bisa dibuat interaktif dan dianimasi. Hal lain yang tidak didapat dari citra raster adalah SVG memiliki metadata dan bisa di beri ekstensi tanpa merusak kualitas gambar.

Bagaimana HTML5 dan SVG digunakan untuk membuat media dalam web? Jelaskan dengan beberapa contoh!

HTML5 untuk membuat media dalam web juga contohnya..

HTML 5, salah satu teknologi yang sangat ditunggu-tunggu oleh para web developer maupun para pengguna Internet. Banyak hal yang dijanjikan akan hadir di HTML 5 yang dapat mengubah sebuah website menjadi lebih interaktif serta lebih kaya konten dan fungsinya. Tetapi sayangnya implementasinya masih belum sempurna. Masalah kompatibilitas dari browser dan juga belum matangnya si HTML 5, sedikit menjadi kendala. Walupun begitu, sudah banyak para developer web yang mencoba membuat aplikasi web berbasiskan HTML 5. Berikut adalah 5 contoh website yang menurut saya menerapkan fitur yang diberikan HTML 5 dengan tepat dan menarik

Contohnya :

A.DeviantART muro

Sebuah aplikasi web “drawing” yang memiliki efek menarik di brush toolnya. DeviantART muro juga mendukung fitur layering serta fitur “save on the fly” yang tentunya menggunakan konsep cloud computing

B. Bert’s Breakdown

Contoh penggunaan HTML 5 untuk membuat game bisa anda lihat disini. Grafis yang disuguhkan cukup halus di game ini. Bert’s Breakdown mampu menunjukan bagaimana keunggulan HTML 5 di dunia web based game development.

C.Wikipedia Knowledge Map

Wikipedia Knowledge Map adalah salah satu implementasi dari penggunaan HTML 5 yang cukup unik. Fitur utama yang disuguhkan adalah pembuatan Knowledge Map menggunakan HTML 5, yang menghubungkan artikel-artikel yang ada di Wikipedia

SVG membuat media dalam web dan contohnya…

Target platform dan operating sistem yang diharapkan adalah Windows dan Linux dengan memakai browser Internet Explorer dan Mozilla Firefox. Hanya di Linux ada sedikit masalah karena Mozilla Firefox masih dalam tahap beta untuk linux.

Proyek ini telah menunjukkan bahwa SVG memiliki potensi untuk menampilkan peta interaktif. Dengan hanya standar biasa dari W3C, dan tambahan perangkat lunak open-source dan yang gratis, perusahaan kecil dan universitas dapat membuat sebuah peta topografi interaktif yang bagus. Ini membuktikan kehandalan SVG dalam membuat aplikasi gambar bergerak yang interaktif. Dengan dukungan banyak standar web yang lain untuk mengolah data dan membuat script, serta web browser banyak yang mulai memasukkan SVG viewer di dalam paket default-nya, SVG benar-benar handal, aplikatif, murah dan mudah untuk dipakai, khususnya dalam pengaplikasian peta interaktif. Dan adapun

contoh-contohnya yaitu : AutoDesk, Bit-Flash, Corel, HP, IBM, ILOG, Inso, Kodak, Macromedia, Microsoft, Netscape, Oasis, Open Text, Oxford University, Quark, RAL, Sun-Microsystems, W3C und Xerox.

Grafik Berbasis Vektor Pada Web Dengan SVG / VML”. sebelumnya untuk menggambarkan lingkaran dengan vektor pada SVG, coba anda tes pada IE kodingan tersebut. Pasti tidak akan terlihat gambarnya karena IE tidak mengenal SVG, berikut adalah kodingan yang menghasilkan vektor yang mirip dengan yang telah ditulis sebelumnya

<html xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<title>VML yang terintegrasi dengan HTML</title>
<style type=”text/css”>
<!–
v\:* {behavior:url(#default#VML);}
–>
</style>
</head>
<body>
<h1>VML yang terintegrasi dengan HTML</h1>
<v:arc style=”width:100;height:100″ startangle=”0″ endangle=”360″ fillcolor=”red”></v:arc>
</body>

SUMBER

http://ianpanrita.com

http://hendynoize.net

http://novindasari.ngeblogs.com

http://wartanasional.com

http://greenupyourlife.wordpress.com

http://www.teknojurnal.com

SILAHKAN COPY JIKA ARTIKEL INI MENARIK NAMUN HARAP CANTUMKAN SUMBERNYA