dasar dasar web design 2 ~ Global Surfing

Judul	:	Dasar-dasar Design Web
Penulis	:	Komarudin Surya
Copyright	:	Suryatekno © 2008
Aturan	:	Materi ini boleh Anda Copy hanya untuk kepentingan Pribadi. Tidak boleh diperjual-belikan, atau dimanfaatkan untuk kepentingan Komersial. Pengutipan atau pemindahan sebagian atau keseluruhan materi ke situs ataupun Media Lain, tidak di ijinkan dengan alasan apapun tanpa seijin dari Penulis cq:Komarudin Surya.

D E S I G N E R S E J A T I T U M B U H D E W A S A

Waktu pun terus berlalu, setapak-demi setapak di hadapinya. Kini sang designer mulai memikirkan cara bagaimana membuat sesuatu yang bermanfaat akan tetapi disukai oleh banyak orang. Untuk mencari Inspirasi dia berjalan-jalan keliling kota. Ketika diperjalanan dia melihat banyak sekali iklan-iklan yang bertebaran di sudut-sudut Kota, mulai dari spanduk, reklame, sampai neon-neon yang berkelap-kelip. Aha...!, Saya rasa mungkin tampilan Web akan lebih indah kalau ditaruh gambar-gambar seperti itu guman nya dalam hati. Yah betul..! teriaknya kegirangan, sampai tak menyadari kalau semua penumpang dalam bis kota

yang ia tumpangi memperhatikan nya. Karena merasa diperhatikan oleh semua orang, dia jadi malu sendiri. Akhirnya dia memutuskan untuk turun saja dari bis kota itu, dan kembali ke rumahnya untuk meng-aplikasikan pengalaman nya itu.

Image adapted from http://www.designart.com/ with permittion

Dari pengalaman tongtong diatas, ada baiknya kalau kita mengambil hikmahnya. Yah tentu suatu design Web akan terlihat lebih indah dan menarik bila kita sajikan gambar atau images disamping teks-teks yang ada. bukankah Anda sendiri suka akan ke-indahan..?, kalau begitu marilah kita lanjutkan materi kita dengan fokus penempatan image, animasi dan flash pada design Web kita.

Untuk menempatkan images dalam suatu document HTML tidaklah sulit, Anda tinggal mengetikan TAG, dan lokasi dari file image itu berada. Image yang dapat Anda masukan ke Document HTML dapat berjenis BMP, JPG, JPEG, GIF, TIFF, dan lain sebagainya. Bila Anda ingin memasukan images yang berupa animasi, Anda dapat memasukan file images berektensi GIF. Tapi saya sarankan kepada Anda, jangan memasukan file image yang berukuran besar, sebab itu akan mempengaruhi proses pemuatan file di Browser. Sebaiknya bila Anda ingin menampilkan images yang berukuran besar harus disediakan Halaman khusus untuk menampilkannya, dalam arti image tersebut ditampilkan secara tersendiri tanpa ada tag-tag yang lain. Sebagai contoh Anda dapat membuka HalamanWorld of Electronics, sesi ANEKA PROJECT. disitu ada beberapa image yang saya tempatkan pada Halaman tersendiri, agar tidak mempengaruhi loading file tersebut. Atau Anda juga dapat menggunakan Tool peng-edit gambar seperti ADOBE PHOTOSHOP, untuk memperkecil ukuran file tersebut.

Penempatan Images, Animasi dan Flash pada Halaman HTML

Tag untuk menempatkan images pada document HTML sebagai berikut :

<img src="lokasi file" alt="keterangan gambar" border="tebalnya bingkai">

Pada tag diatas ada beberapa atribut yang harus Anda tuliskan untuk menampilkan suatu image pada Dokumen HTML. Antara lain :

img	:	Tag ini merupakan inti dari perintah untuk menampilkan image pada Halaman Web.
src	:	Atribut ini merupakan bagian dari tag yang berfungsi untuk memberitahu kan kepada browser tentang nama file image yang akan ditampilkan serta lokasi dari file image itu berada. Misalkan nama file image yang akan ditampilkan adalah gambar1.jpg dan lokasi file tersebut Anda simpan pada folder: C:\my document\gambar\, maka penulisannya seperti berikut ini : src="file:///C:/my document/gambar/gambar1.jpg"
		Anda juga dapat menggunakan url dari situs yang lain, misal gambar tersebut Anda simpan di http://www.test.com/test-juga.maka penulisan atribut src nya menjadi seperti berikut ini: src="http://www.test.com/test-juga/gambar1.jpg" Agar memudahkan penulisan dan pemanggilan image, saya menyarankan agar file image tersebut disimpan menjadi satu folder dengan document HTML yang memanggil file image tersebut, sehingga penulasan atribut src nya menjadi seperti ini :src="gambar1.jpg"
alt	:	Atribut ini digunakan untuk memberikan keterangan terhadap images tersebut. teks yang dituliskan pada atribut ini akan ditampilkan oleh browser dengan latar belakang kuning ketika mouse mendekati gambar tersebut.
border	:	Atribut ini untuk memberikan efek garis tepi, yang besarnya dapat kita tentukan dengan ukuran pixel, misalnya kita ingin memberikan efek garis tepi sebesar 2 pixel pada file image, maka penulisannya menjadi seperti ini : border="2"

contoh penggunaan nya dalam program :
<img src="images/tongtong1.gif" alt="Contoh ke 1" border="0">
<img src="images/tongtong1.gif" alt="Contoh ke 2" border="2">
<img src="images/tongtong1.gif" alt="Contoh ke 3" border="4">

Maka setelah dijalankan di browser akan tampak seperti dibawah ini :


Border = 0	Border = 2	Border = 4

Pada paragraf diatas disebutkan bahwa selain images kita juga dapat menampilkan animasi pada dokumen HTML. Animasi itu dapat berupa images dengan Compuserver file yang biasanya ber-ekstensi GIF, Flash animation yang biasanya berekstensi SWF, Java Applet yang biasanya berekstensi CLASS, dan sebagainya.

Untuk file animasi berjenis GIF, penulisan tag nya sama dengan penulisan images biasa seperti pada ketiga contoh diatas. Sedangkan untuk FLASH dan JAVA APPLET, diperlukan beberapa tag dan atributnya seperti di bawah ini:

Contoh penulisan TAG HTML untuk menampilkan Animasi Flash :

Uhh..panjang sekali...!, apa ada yang lebih ringkas..?. Hmm.., dalam hal ini memang saya pernah membaca sebuah Artikel berbahasa inggris yang ditulis oleh : Drew McLellan dengan judul : Embedding Flash While Supporting Standards. Pada artikel itu dia berusaha untuk membuat suatu standard penulisan sebuah kode HTML untuk menampilkan animasi Flash. Akan tetapi hasil penelitian nya belum mendapatkan standarisasi dari W3C, walaupun di beberapa browser kode HTML hasil penelitiannya berjalan dengan mulus. Bila Anda punya kesempatan silahkan Anda membaca Artikel tersebut secaralangsung di sini.

Dari hasil kerja Drew McLellan itulah, maka kode atau tag HTML untuk menampilkan animasi flash menjadi sedikit lebih ringkas, akan tetapi karena Anda sedang mempelajari dasar-dasar design web, maka Anda juga harus mengerti tentang tag-tag serta atribut yang digunakan. Jadi ada baiknya Anda mencoba terlebih dahulu tag HTML untuk flash terdahulu yang sedikit menyeramkan, Itung-itung latihan lah.

Adapun tag ringkas hasil kerja Drew McLellan untuk maksud yang sama seperti tag HTML sebelumnya, menjadi seperti dibawah ini :

Setelah di jalankan pada browser maka tag pertama dan yang terakhir ini akan menampilkan animasi flash yang sama seperti dibawah ini:

Tag HTML untuk menampilkan animasi flash terdiri dari beberapa atribut yang perlu Anda ketahui antara lain :

object	:	Tag ini merupakan penanda untuk Browser Internet explorer (IE) dan kompatibelnya, agar dapat menjalankan flash dengan plugins yang ada. Untuk Netscape (N) dan kompatibelnya Tag ini tidak berfungsi atau di abaikan.
width	:	Atribut ini untuk menentukan lebar dari animasi Flash yang akan ditampilkan oleh Browser
height	:	Atribut ini untuk menentukan tinggi dari animasi Flash yang akan ditampilkan oleh Browser
classid	:	Atribut ini merupakan penanda atau ID yang di gunakan oleh Macromedia. Atribut ini tidak perlu disetting biarkan saja seperti itu.
codebase	:	Atribut ini merupakan kode lokasi yang digunakan oleh Macromedia. Atribut yang ini juga tidak perlu Anda rubah-rubah biarkan apa adanya, kecuali Anda sudah seperti McLellan
param	:	Atribut ini digunakan untuk men-set parameter dari file flash yang digunakan, atribut param mempunyai beberapa bagian antara lain :
movie		Lokasi dari file flash yang akan ditampilkan
quality		Kualitas dari file flash yang akan ditampilkan. Pilihannya bisa high, medium atau low.
loop		Untuk menentukan apakah file flash akan diputar ulang setelah selesai. 1 diulang, 0 tidak diulang.
menu		Untuk menset menu dari file flash ketika di klik kanan pada file tersebut. True - menu enable, false - menu disable.
Dan masih banyak lagi yang lainnya, tapi itu sudah cukup untuk sekedar Anda ketahui.
embed	:	Atribut ini digunakan oleh Netscape dan kompatibel nya untuk menjalankan file flash. Sedangkan untuk IE dan kompatibelnya, parameter ini diabaikan. Parameter ini bukan tag standar yang divalidkan oleh W3C.

Setelah Anda mengetahui hirarki dari tag HTML untuk Flash, sekarang Anda tinggal membuat Animasi flash untuk menyemarakan design web Anda. Tidak Bisa..!, Belajar dong...!, Dimana...? Disini juga ada. Klik aja ini. Setelah Anda cukup pandai membuat flash tentunya Anda akan sedikit bersemangat untuk mendesign web yang Anda idamkan, dengan demikan maka Anda sudah cukup dewasa untuk lebih memperdalam lagi mengenai design web ini. Perlu juga Anda ketahui bahwa bila Anda sudah mahir dengan pembuatan flash, maka dengan mudah juga Anda dapat membuat suatu design web yang Trendy.

Uh..., ternyata cukup panjang juga materi ini yah. Apa sudah cukup..?. tentu saja belum karena masih ada satu lagi tatacara penulisan tag HTML untuk animasi yang lain, yaitu tag untuk menampilkan animasi yang menggunakan Java Applet, yang biasanya berekstensi CLASS. Untuk yang satu ini, cukup banyak parameter-parameter yang harus di deklarasikan, tergantung dari jenis program dan keinginan dari si pembuat animasi tersebut. Selain itu pada browser komputer client harus di install plugins untuk JAVA APPLET yaitu JAVA 2 RUNTIME ENVIRONTMENT (J2RE). Bila browser di komputer client tidak di Install J2RE maka Applet tersebut tidak akan bisa dijalankan.

Kelebihan dari JAVA APPLET ini adalah bersifat OPEN SOURCE, sehingga kita dapat dengan mudah mencari sumber-sumber yang kita perlukan. Kekurangan nya adalah animasi ini membutuhkan spesifikasi komputer yang cukup baik, karena bila tidak tampilan animasi nya akan telihat patah-patah. Saya pernah mencoba membandingkan antara animasi yang dibuat dengan Flash dan Java Applet ini pada komputer dengan spesifikasi : Pentium 233 MHZ, memori 64 MB, dan grafik video sebesar 4 MB. Hasilnya adalah : Flash berjalan normal seperti pada komputer yang mempunyai spesifikasi lebih tinggi, sedangkan Java Applet bisa jalan tapi terlihat gejala yang tidak normal. Baru pada komputer dengan speed 400 Mhz applet dapat berjalan dengan Normal. Jadi menurut saya itulah salah satu penyebab Flash lebih populer dibandingkan Java Applet. Selain itu untuk dapat membuat animasi dengan java applet Anda harus mahir dengan bahasa pemrograman JAVA, yang mungkin bagi seorang pemula akan terasa sedikit kesulitan.

Contoh penulisan TAG HTML untuk menampilkan Animasi Java Applet :

Tampilan di browser :
( Animasi tidak ditampilkan bila browser Anda belum di install J2RE )

Seperti yang Anda lihat diatas, penulisan tag HTML untuk applet ini sebenarnya cukup mudah di ingat ketimbang flash, selain itu kita dapat merubah dengan cepat parameter-parameter yang kita inginkan. Seperti pada contoh diatas, tag utama untuk meng-embed java applet cukup dengan memakai tag < applet + atribut nya > , dilanjutkan dengan parameter-parameter yang berlaku kemudian menutupnya dengan tag </applet>.

Adapun fungsi dan kegunaan dari atribut dan parameternya sedikit mirip dengan flash hanya saja pen-deklarasian parameter pada JAVA APLLET ini saya rasa Anda juga tentunya akan lebih mudah untuk membaca nya dan mengerti maksud dari parameter-parameter yang dituliskan itu. Dengan demikian maka kedewasaan sang designer akan terlihat bila dia sudah mengerti akan maksud dan tujuan dari pendeklarasian parameter tersebut.

Posted in: info,InfoBlog

Global Surfing

Monday, October 4, 2010

dasar dasar web design 2

0 komentar:

Post a Comment

Archives