E-Learning Design: 2013

Kamis, 07 Maret 2013

Perbedaan HTML4 dengan HTML5.

Kali ini saya akan memberikan sedikit informasi mengenai perbedaan html4 dan html5. Berikut perbedaannya :

> Pada Doctype Tags

- HTML 4 Doctype berbentuk sangat panjang dan kompleks (rumit)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-mobile10.dtd">>

- HTML 5 Doctype bentuknya akan lebih simpel dibandingkan dengan HTML 4
<!DOCTYPE html>
> Pada Meta Tags

- Pada HTML 4 masih terlihat panjang dan kompleks
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

- Pada HTML 5 lebih simpel dibandingkan dengan HTML 4
<meta charset=utf-8 />
> Pada HTML 5 spesifikasi web form 2.0 terintegrasi baik karena terdapat :

- Date picker, collor picker, dan numeric step control

- Input fields type sudah bisa di dapati di fields emael, search dan url, jadi tidak perlu lagi

menggunakan javascript external

- PUT dan DELETE metode di form sudah didukung, jadi sangat mudah membuat nya dan sekali lagi

simple tanpa menggunakan javascript external.

Membuat kotak dengan CSS

Pada artikel sebelumnya kita telah membahas tentang definisi CSS3 dan HTML 5, sekarang kita langsng saja mulai dengan tahap awal untuk pembuatan sebuah website.

Model Kotak CSS !!!

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak. Model kotak CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, border, padding, dan konten yang sebenarnya. Model kotak memungkinkan kita untuk menempatkan border sekitar dan unsur ruang dalam kaitannya dengan unsur lainnya.

Penjelasan dari bagian-bagian yang berbeda:
> Margin - Menghapus sebuah daerah di sekitar border. Margin tidak memiliki warna latar belakang, itu benar-benar transparan
> Perbatasan / Border - Sebuah batas yang terjadi di sekitar padding dan konten. Perbatasan dipengaruhi oleh warna latar belakang kotak
> Padding - Menghapus sebuah area di sekitar konten. Padding dipengaruhi oleh warna latar belakang kotak
> Konten - Isi kotak, di mana teks dan gambar muncul.

Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu mengetahui bagaimana model kotak bekerja.

Lebar dan Tinggi dari Elemen yang Penting.

Penting: Bila Anda menentukan sifat lebar dan tinggi dari sebuah elemen dengan CSS, Anda hanya mengatur lebar dan tinggi area konten. Untuk mengetahui ukuran penuh dari elemen, Anda juga harus menambahkan margin, border, padding. Lebar total elemen pada contoh di bawah ini 300px:
width:250px;
margin:10px;
border:5px solid gray;
padding:10px;

Mari kita uraikan:
250px (lebar)
+ 20px (margin kiri dan kanan)
+ 10px (border kiri dan kanan)
+ 20px (padding kiri dan kanan)
= 300px

Bayangkan bahwa Anda hanya memiliki 250px ruang. Mari kita buat elemen dengan total lebar 250px:

Contoh:
<html>
<head>
<style type="text/css"> div.ex {
width:220px;
padding:10px;
border:5px solid gray;
margin:0px; }
</style>
</head>
<body>
<img src="250px.gif" width="250" height="1" /><br /><br />
<div class="ex">The line above is 250px wide.<br />
The total width of this element is also 250px.</div>
<p><b>Important:</b> This example will not display correctly in IE8 and earlier versions!<br /> However, we will solve that problem in the next example.</p>
</body>
</html>

Lebar total elemen selalu harus dihitung seperti ini:
Jumlah elemen width = lebar + padding kiri + kanan + bantalan perbatasan kiri + kanan + perbatasan + margin kiri margin kanan

Tinggi total elemen selalu harus dihitung seperti ini:
Ketinggian elemen Total = tinggi + bantalan bantalan atas + bawah + atas + perbatasan perbatasan margin atas bawah + + margin bawah.

HTML 5

Pengertian HTML5

Dari penjelasan yang ada di 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.

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>

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>

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>

Itu 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.

Senin, 21 Januari 2013

Apa itu CSS ( Cascading Style Sheet )??

Sebelum anda melangkah jauh ,
penting untuk mengetahui tentang Style Sheet. Style Sheet adalah text sederhana dengan eksitensi (.css) yang ditulis menurut aturan bahasa pemrograman yang merujuk rekomendasi dari CSS 1 atau CSS 2 dari W3C/ World Wide Web (w3.org) yang merupakan badan gabungan dari pemilik web,

universitas, perusahaan ( seperti : Microsoft, Netscape, Apple, Opera, Mozilla dan Macromedia) tak luput juga para ahli dalam bidang web. W3C dapat dikatakan sebagai acuan atau pedoman dalam menentukan teknologi paling muktakir pada web, tujuannya adalah untuk mengurangi kekacauan Kode pada sebuah web serta mempermudah akses web oleh user dari berbagai macam Browser.

Rekomendasi yang dikeluarkan W3C merupakan standardisasi dari pemgembang Web, Web Design dan Programming web. Jika sebuah web yang sudah menggunakan kode yang sudah sesuai dengan standarisasi W3C, maka web tersebut akan mudah diakses oleh berbagai macam browser.

Apa yang menjadi keuntungan menggunakan CSS

Dengan CSS anda bisa mempercantik halaman sesuai dengan yang anda inginkan, memang dengan HTML saja anda bisa membuat sebuah website ,apa lagi jika anda tambahkan CSS pastinya akan lebih mudah dalam membuat sebuah website dengan tampilan yang tidak biasa.

Salah satu keuntungan CSS yaitu anda dapat membuat puluhan bahkan ratusan halaman dengan satu kali penulisan bahasa CSS.

Sebagai Contoh : anda akan membuat Heading 1 pada halaman web anda dengan Font Arial dan warna Merah, jika tanpa menggunakan CSS anda harus menulis satu persatu halaman web anda yang ada Heading 1 , tetapi jika menggunakan CSS, anda cukup satu kali saja membuat penulisan, dan selanjutnya anda hanya tinggal menulis artikelnya saja.

Keuntungan lainnya dalam menggunakan CSS adalah karena CSS sudah menjadi elemen penting dalam pembuatan web yang sesuai dengan teknologi Web 2.0 atau web modern yang sudah menjadi tren saat ini dan beberapa tahun yang akan datang.

Minggu, 20 Januari 2013

Pengertian Website Statis Dan Dinamis

Website Statis

merupakan website yang kontennya atau informasi yang ada di dalamnya jarang di-update. Dan website tersebut tidak memiliki fitur atau tidak memliliki system pemrograman yang memungkinkan pengunjung web berinteraksi secara langsung dengan pemilik web dan atau orang lain yang juga sedang mengakses web tersebut. website statis tidak memiliki halaman administrator dimana dari halaman tersebut bisa dilakukan proses update isi website seperti menulis artikel baru, membuat halaman baru, mengupload file gambar dsb.

Jadi proses update website langsung dikerjakan pada file-file yang bersangkutan secara offline. Baru kemudian diupload kembali ke server online. Contoh web statis : web company profile, web catalog, dll. Namun perlu diketahui kalau sekarang sangat jarang sekali orang yang membuat web dengan jenis web statis ini.

Contoh Web Statis

Website Dinamis

merupakan website yang kontennya atau informasi yang ada di dalamnya bersifat dinamis, sering di-update. Website jenis ini memiliki system pemrograman atau fitur-fitur yang memungkinkan pengunjung web berinteraksi secara langsung dengan pemilik web dan atau orang lain yang juga sedang mengakses web melalui fitur-fitur yang disediakan. Website dinamis juga memiliki halaman administrator.

Dari halaman administrator inilah pemilik atau pengguna bisa melakukan editing isi website. Baik mengedit konten, menambah artikel, menghubungkan antar halaman, upload gambar atau video dll, semua bisa dilakukan dari halaman admin. Contoh web dinamis sangat banyak. Kebanyakan website saat ini bersifat dinamis. Facebook, twitter, detik dot com dan website portal berita lainnya, wordpress, blogspot, dan masih banyak lagi.

Contoh Web Dinamis