Sejarah Perkembangan HTML5 & CSS3
Sejarah HTML5
Menurut WikiPedia: HTML5 merupakan sebuah bahasa markah untuk
menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti
dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011
masih dalam pengembangan.
Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
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.
Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
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 browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.
Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.
Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut
<object type="application/x-shockwave-flash"
width="400" height="220" wmode="transparent"
data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini
<object width="300" height="300"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>
<param name="source" value="SilverlightApplication1.xap"/>
</object>
HTML5
ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard
baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup
menulis script untuk menjalankan file video sebagai berikut
<video src=tutorialku.mp4></video>
Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.
Apakah Browser Saya
Support HTML5?
Bagaimana
caranya untuk menguji apakah browser yang anda install itu sudah support HTML5
atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah,
pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan
ke alamat web sebagai berikut:
http://html5test.com
Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.
Ada beberapa hal yang perlu kita ketahui tentang HML 5. HTML 5
yang saat ini sudah mulai diimplementasikan oleh beberapa browser grade A akan
membawa lebih dari sekedar fitur untuk layout dan format halaman. Beberapa di
antaranya adalah Canvas dan Video.
Canvas
Dulu, untuk
bisa memberikan interaksi menggambar di halaman web kita harus memakai applet
Java atau Flash. HTML 5 akan memberikan satu opsi tambahan: canvas. Seperti a
namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan <canvas> dan javascript maka kita sudah bisa
menggambar langsung di halaman web. Sekarang Anda bisa berimaginasi sendiri, kira-kira apa saja yang orang lakukan dengan <canvas>. Apa yang sebelumnya jadi monopoli Flash dan aplet Java akan di-take-over oleh <canvas>.
namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan <canvas> dan javascript maka kita sudah bisa
menggambar langsung di halaman web. Sekarang Anda bisa berimaginasi sendiri, kira-kira apa saja yang orang lakukan dengan <canvas>. Apa yang sebelumnya jadi monopoli Flash dan aplet Java akan di-take-over oleh <canvas>.
Video dan Audio
Akan ada
tag <audio> dan <video> di HTML 5. Jadi tidak perlu lagi
menempelkan flash untuk sekedar memutar audio. Format video yang didukung akan
bervariasi terhadap browser, kemungkinan besar codecnya adalah Ogg Theora
(patent free) dan H.264. Sepertinya sampai
sekarang codecnya masih jadi kontroversi.
Local Storage
Masih ingat
Google Gears? Sekarang storage untuk browser akan diakomodasi sebagai standard
dalam HTML 5. Aplikasi bisa menyimpan data dalam jumlah lebih besar dari
biasanya tanpa harus mengimplementasikan trik dengan cookie atau Flash.
Tentunya ini kabar baik bagi pengembang aplikasi web. Mungkin bisa meningkatkan
performa aplikasi dengan menggunakan storage sebagai local cache. Coba liat
detilnya di sini.
Web Workers
Yang ini
juga sempat kita nikmati lewat Google Gears. Jika javascript biasanya yang kita
nikmati di web kadangkala menyebabkan komputer kita melambat atau paling tidak
membuat browser seperti sesak napas maka web worker akan bsia jadi pelega. Salah satu fitur web worker adalah threading. Kini javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI.
membuat browser seperti sesak napas maka web worker akan bsia jadi pelega. Salah satu fitur web worker adalah threading. Kini javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI.
Semantics
Nah ini
dia. Buat designer yang sering meng-abuse div dan span sebagia elemen nav, fret
no more. Akan ada tag khusus untuk navigasi, section, footer, dll. Tag yang
kaya semantic
seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa dimengerti.
seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa dimengerti.
Sejarah CSS3
Menurut
WikiPedia: Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen
dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan
merupakan bahasa pemograman melainkan penggaya sebuah halaman web.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama
dalam beberapa berkas file. Pada umumnya CSS dipakai untuk
memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang
berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan
ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang
direkomendasikan oleh World Wide Web atau WEC pada
tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas
browser terbaru mereka yang telah sesuai atau paling tidak hampir
mendekati dengan standar CSS.
Untuk saat ini
terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat
pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan
terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah
versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.
CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada
tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang
kedua diharapkan lebih baik dari versi pertama.
CSS3 juga dapat melakukan animasi pada halaman
website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer
lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan
dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3
seperti: multiple background, border-radius, drop-shadow, border-image, CSS
Math, dan CSS Object Model.
Fitur Terbaru CSS 3
CSS 3 memiliki beberapa fitur baru, seperti:
§
Animasi, sehingga pembuatan animasi tidak memerlukan program
sejenis Adobe Flash dan Microsoft Silverlight.
§
Beberapa efek teks, seperti teks berbayang, kolom koran, dan
"word-wrap".
§
Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak
termasuk "web-safe fonts".
§
Beberapa efek pada kotak, seperti kotak yang ukurannya dapat
diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan
bayangan.
0 komentar:
Posting Komentar