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”>
<svg
width=”100px” height=”50px”>
<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>
<embed
src=”/library/test.svg” width=”80″ height=”80″ type=”image/svg+xml” />
contoh <object>
<object
data=”rect.svg” width=”300″ height=”100″ type=”image/svg+xml”
codebase=”http://www.adobe.com/svg/viewer/install/” />
contoh <iframe>
<iframe
src=”/library/rect.svg” width=”300″ height=”100″></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,
<circle cx=”40” cy=”40” r=”35”/>
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,
<ellipse cx=”40” cy=”40” rx=”35”
ry=”25”/>
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”/>,
<rect x=”40” y=”40” width=”75”
height=”100”/>
Garis
Menampilkan garis diantara dua
koordinat dan untuk membangunnya menggunakan elemen <line>. Contohnya,
<line x1=”0” y1=”150” x2=”400”
y2=”150”/>
Banyak garis (Polyline)
Menampilkan sebuah rangkaian
garis dengan vertek yang sudah ditentukan dan untuk membangunnya menggunakan
elemen <polyline>. Contohnya,
<polyline points=”50,175 150,175 150,125
250,200”/>
Poligon
Sama dengan polyline, tetapi ditambah sebuah garis dari titik terakhir ke titik yang
pertama, membuatnya dan mengandung paling sedikit tiga sisi. Contohnya,
<polygon points=”350,75 379,175 355,175
355,200 345,200 345,175 321,175”/>
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:
<path d=”M75,100 a50,25 0 1,0 50,25”/>
<path d=”M75,100 c25,-75 50,50 100, 0
s50,-50 150,50”/>
<path d=”M75,225
q25,-75 100,0 t150,50”/>
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
<tspan
fill=”rgb(255,0,0)”>R</tspan>
<tspan
fill=”rgb(0,255,0)”>G</tspan>
<tspan
fill=”rgb(0,0,255)”>B</tspan>
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 :
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
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.
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
SILAHKAN COPY JIKA ARTIKEL INI MENARIK NAMUN HARAP CANTUMKAN SUMBERNYA
