konsep asas pembinaan laman web

KONSEP ASAS PEMBINAAN LAMAN WEB

Oleh : M.Ramlee b KamarudinPusat Kegiatan Guru Kawasan Kuala Pilah

Negeri Sembilan Darul Khusus

TUJUAN PEMBINAAN PERISIAN

Secara umumnya, laman Web memberikan ruang kepada anda untuk memaparkan kreativiti anda, berkongsi pengetahuan atau pengalaman ataupun hobi dengan dunia antarabangsa, mencari kenalan baru, memberikan panduan tentang sesuatu (seperti lokasi pelancongan dan petua), membentangkan bahan ilmiah (seperti ilmu ugama, sains dan teknologi), mempersembahkan kertas penyelidikan, mempromosikan produk atau barang jualan, ruangan hiburan, sukan dan sebagainya.

APA YANG DIPERLUKAN

Anda boleh menghasilkan sebuah tapak Web yang profesional dengan hanya menggunakan Notepad untuk menulis kod HTML dan alplikasi Paint untuk grafiknya. Akan tetapi bahan HTML terdiri daripada kod yang banyak dan mungkin menyulitkan atau mengambil masa panjang bagi pembina baru. Sebenarnya terdapat berpuluh-puluh program yang boleh kita gunakan untuk membina halaman Web.

Contohnya kita boleh gunakan Microsoft Frontpage, Frontpage Express, Netscape Composer, Cute page, Hot Dog, Macromedia Dreamweaver dan lain-lain lagi.

HTML

Untuk menerbitkan maklumat yang boleh diedarkan secara global, kita memerlukan satu bahasa umum yang boleh difahami sejagat. Demikian juga Jaring Web memerlukan satu bahasa penerbitan yang dapat difahami oleh semua sistem seperti Windows, Macintosh, Unix, Linux, FreeBSD, BeOs, Solaris dan sebagainya. Bahasa Penerbitan yang digunakan oleh WWW ialah Bahasa HTML (HyperText Markup Language)

LANGKAH PERTAMA: PERANCANGAN

Sesebuah projek pembangunan laman Web perlu dirancang terlebih dahulu. Sebelum anda membangunkan laman Web itu, anda perlu memikirkan tentang kenapa anda hendak menubuhkan laman Web itu. Adakah anda mahu membina laman peribadi mengenai biodata atau hobi anda? Mahukah anda membina sebuah laman hiburan? Ataupun anda mahu membangunkan laman Web kerohanian atau keagamaan. Adakah laman yang dirancangkan itu besar atau kecil?

Perancangan

Jika anda hanya mahu membangunkan sebuah laman Web kecil, seperti laman biodata yang cuma mengandungi beberapa muka surat, langkah perancangan ini mungkin tidak seberapa penting. Tetapi jika anda mahukan sebuah laman Web yang agak besar, anda perlukan perancangan yang teliti kerana ia dapat memudahkan anda membina sesebuah laman Web dan menguruskannya di masa hadapan.

Dalam langkah perancangan, anda boleh mengambarkan laman Web anda secara kasar dengan carta alir. Carta alir ini harus mengandungi:

subjek utama subtopik bagi subjek utama subtopik bagi setiap subtopik subjek

utama (jika ada) pautan ke halaman yang berkaitan imej grafik yang diperlukan

Perancangan

CONTOH-CONTOH JENIS LAMAN WEB YANG BOLEH DIHASILKAN

kerohanian/keagamaan komik/hiburan/filem politik pelancongan pertanian komputer dan Internet sekolah/persatuan/

kelab

muzik tanahair hobi pendidikan pengetahuan am resepi dan masakan pertubuhan/organisasi/

syarikat/perniagaan sukan

GARIS PANDUAN PEMBINAAN LAMAN WEB

Pembangun perlu bijak menggunakan elemen-elemen yang sesuai untuk memberitahu pengguna bagaimana paparan tersebut berfungsi.

Rekabentuk paparan skrin yang baik harus mudah, bersih dan menarik.

GRAFIK

Susun Atur Paparan Skrin Seimbang - Kedudukan teks dan grafik dalam

keadaan seimbang. Kemas - Susun letak paparan skrin dalam

keadaan kemas, bersih dan menarik. Konsisten - Teks dan grafik perlu berada pada

kedudukan yang tetap pada setiap paparan.

Contoh Laman Web 1 http://dictionary.ajeeb.com

Bidang perkamusan yang dibentangkan telah dibahagikan kepada dua iaitu kamus (al-qawamis) dan ensiklopedia (al-m’ajim)

Contoh 2http://www.arabicwata.org/Arabic/Terjemahan bahasa Arab

KEPERLUAN PERISIAN GRAFIK

Perisian grafik profesionalContoh: Adobe PhotoShop, Corel Photo Paint, Paint Shop Pro

Perisian grafik biasaContoh : Paint Brush Windows, Ulead Photo Impact, Gif Construction Set, Ulead Gif Animator, Xara 3D, Xara Webstyle, Ulead Cool 3D

Perisian grafik jenis lukisan vektorContoh : Adobe Illustrator, Corel Draw, Macromedia Freehand, Xara Webster

KERTAS DINDING (Latarbelakang)

Warna yang sesuai supaya tidak menjadi masalah untuk memilih warna font – cerah/bersih/kemas

Kesesuaian grafik dengan isi kandungan

KERTAS DINDING (Latarbelakang)

Pemilihan sesuatu kertas dinding hendaklah disesuaikan dengan warna tulisan dan objek-objek di dalam laman Web. Jangan memilih kertas dinding yang mempunyai warna yang tidak seragam iaitu mempunyai ton warna cerah ke gelap untuk mengelakkan kesukaran membaca sesuatu teks.

Lihat contoh di bawah.

Tulisan ini tidak kelihatandi berapa tempat

Tulisan ini jelas kelihatan

FORMAT GAMBAR

Menggunakan format JPEG ( *.jpg) (*.jpeg) atau GIF (*.gif) fail yang terhasil lebil kecil saiznya lebih mampat dan lebih pantas dimuat turun dari internet.

Tidak digalakkan menggunakan .bmp, .tga, .wmf, .tif, .pcx saiznya besar kerana ia melambatkan perjalanan perisian yang dibina

FORMAT FAIL GAMBAR

Fail gambar yang boleh digunakan adalah JPG dan GIF. Anda tidak digalakkan menggunakan fail gambar yang bersaiz lebih daripada 100kb kerana ia melambatkan proses muat turun oleh pelayar Web. Sebaiknya fail gambar untuk kertas dinding hendaklah bersaiz kurang daripada 50kb. Kertas dinding yang baik mestilah mempunyai kecerahan yang berlawanan dengan warna teks iaitu tulisan gelap hendaklah dipadankan dengan kertas dinding berwarna cerah dan begitu juga sebaliknya.

OBJEK-OBJEK GAMBAR

Perlu diingatkan sekali lagi bahawa jumlah saiz fail imej di dalam setiap dokumen HTML anda mestilah tidak melebihi 200 kb bagi mengurangkan masa dokumen dimuat turun. Saiz fail grafik hendaklah sekecil yang mungkin. Kegagalan anda berbuat demikian hanya akan menyusahkan pengunjung di mana jika ada laman alternatif pengunjung akan meninggalkan laman anda. Jangan sekali-kali memasukkan fail yang besar yang kemudiannya dikecilkan ukuran mengikut nisbah (saiz fail tidak berubah) ke dalam dokumen. Gunakan perisian grafik seperti Paint Shop Pro, PhotoShop, CorelDraw-PhotoPaint dan sebagainya untuk mengecilkan saiz gambar.

SPESIFIKASI GAMBAR YANG DIIMBAS

Warna asli: 24 bit – RGB (red-green-blue), 16 juga warna. Sesuai untuk laman Web.

Warna asli: 30 bit – CYMK tidak digalakkan untuk penerbitan laman Web. Bilangan warna ini hanya sesuai untuk kegunaan bahan bercetak sahaja. Digunakan dalam kerja DTP atau penerbitan meja.

Warna tinggi: 16 bit – RGB, warna tinggi mempunyai sama ada 64 ribu warna atau 32 ribu warna. Ia sangat sesuai untuk kegunaan laman Web. Fail imej dioptimumkan untuk kegunaan laman Web. Fail disimpan dalam format JPEG.


Warna 256: 8 bit – terdiri dari 256 warna, tidak sesuai untuk menyimpan gambar foto kerana kualiti gambar terjejas dengan teruk. Ia sesuai untuk gambar lukisan biasa (yang tidak menyerupai gambar hidup). Fail disimpan dalam format GIF.

Warna 16: 4 bit – terdiri dari 16 warna sahaja, sesuai untuk kegunaan baner iklan. Biasanya lukisan. Fail disimpan dalam format GIF.


Skala kelabu (Greyscale): 8 bit – adalah warna ton hitam putih yang terdiri dari 256 ton warna. Sesuai untuk gambar bahan bercetak. Fail disimpan dalam format GIF.

Warna 2: 1 bit – terdiri dari warna hitam dan putih sahaja. Sesuai untuk gambar bahan bercetak yang mengandungi tulisan dan rajah. Fail disimpan dalam format GIF.

PELERAIAN (resolution)

Peleraian (resolution) fail imej diukur di dalam unit bilangan titik per inci atau dot per inch (dpi). Peleraian optimum yang dicadangkan untuk kegunaan laman Web ialah 72dpi hingga 75dpi (peleraian skrin, 300dpi hingga 600dpi untuk dijadikan bahan bercetak (peleraian pencetak). Anda perlu mengguna peleraian yang dicadangkan ini kerana lebih tinggi peleraian, maka lebih besar saiz fail imej. Jika tidak, anda akan membazirkan ruang cakera keras yang diperuntukkan kepada anda. Peleraian sebanyak 72dpi adalah memadai untuk kegunaan laman Web.

FONT/MUKATAIP

Standard yang terdapat dalam semua komputer : Arial dan Times New Roman

Saiz tajuk – mengikut kesesuaian, biasanya lebih besar daripada isi kandungan dan gunakan font yang mudah dibaca jika menggunakan fon yang lain.

Saiz 10 – 12 point untuk isi kandungan Penggunaan warna merah atau biru untuk

hiperteks Anda boleh menggunakan format-format teks

seperti cetak tebal, italik, bergaris, superskrip, subskrip serta warna, saiz dan jenis fon berlainan seperti yang terdapat di dalam pemproses kata untuk dokument HTML anda.

HURUF BERKEDIP

Memaparkan huruf yang berkedip-kedip (kejap ada – kejap tiada). Sesuai untuk menarik perhatian pembaca pada sesuatu tempat. Huruf berkedip tidak piawai, hanya pelayar Netscape 3.0 ke atas dan Microsoft IE 3.0 ke atas sahaja yang menyokongnya.

Jika menggunakan format SWF (Macromedia Flash) memerlukan Flash Player untuk menyokongnya.

IKON

Rekabentuk ikon hendaklah sesuai dengan topic.

Pemilihan warna harus sesuai dengan mengambil kira warna latarbelakang.

Kedudukan butang harus consistent pada setiap paparan.

Saiz butang harus sesuai.

ANIMASI

Animasi ialah satu siri gambar yang disusun dan ditayangkan satu per satu dengan begitu cepat sehingga kelihatan seperti satu gerakan

Format animasi yang biasa digunakan; (Microsoft GIF Animator) gif, (Macromedia Flash) swf.

Animasi multimedia yang lebih kompleks telah menjadi munasabah dengan menggunakan pemalam Shockwave daripada Macromedia. Shockwave memainkan fail multimedia yang dicipta dengan aturcara popular, Director dan Authorware daripada Macromedia.

Hanya digunakan pada paparan yang sesuai. Penggunaan SWF (Macromedia Flash) digalakkan-saiz

kecil dan ringan.

PAUTAN HIPERTEKS

Terdiri daripada cebisan teks atau maklumat dalam bentuk grafik atau video. Maklumat ini disambung antara satu sama lain melalui pautan dengan warna atau tulisan bergaris dan hasilnya ialah pengaliran maklumat yang tidak linear ataupun tidak mengikut urutan.

PENGGUNAAN BUNYI

Penambahan bunyi latar kepada sesuatu laman web mungkin dapat menceriakan lagi suasana, terutamanya jika sesuatu bunyi latar berkaitan dengan topik yang dibincangkan.

Contoh: Lagu tema filem “XFiles” digunakan di laman Web dengan subjek misteri alam, UFO dan seumpamanya.

PENGGUNAAN BUNYI

Jika anda hendak mengguna bunyi (misalnya kesan bunyi khas, lagu, muzik atau syarahan) di laman Web, anda perlu memperolehi fail audio itu dahulu. Selain mengguna fail audio percuma dari tapak Web tertentu, anda boleh merakamkan bunyi itu atau mengubahnya sendiri.

SAIZ FAIL BUNYI

Kualiti bunyi audio digital mempengaruhi saiz fail audio di mana saiz fail audio bersampel 16 bit adalah lebih besar dari 8 bit dan saiz fail audio dengan frekuensi 44.1 kHz adalah lebih besar dari 22 kHz. Oleh itu, rakaman audio digital dibuat pada kualiti yang optimum mengikut kegunaan. Bagi kegunaan Web adalah lebih baik mengunakan fail audio yang bersaiz sekecil mungkin untuk mengurangkan masa muat turun. Di sini frekuensi 22 kHz, 16 bit dan mono adalah mencukupi untuk kualiti optimum.

FORMAT FAIL AUDIO

Terdapat pelbagai format fail gelombang audio yang boleh digunakan di komputer anda. Format wave (.wav) digunakan dalam platform Windows, format AIFF (.aif) digunakan dalam platform Macintosh dan format AU (.au) digunakan dalam platform Unix. Manakala format RealAudio (.ra, .ram, .rm, .rpm) dan MPEG3 (.mp3) boleh digunakan di pelbagai platform dengan menggunakan pemain yang sesuai.

MP3

MP3 (atau MPEG Audio Layer 3) adalah satu format yang menggunakan teknologi pemampatan audio yang mengandungi sebahagian dari ciri-ciri MPEG-1 dan MPEG-2. Format ini dapat memampatkan saiz fail bunyi berkualiti CD dengan faktor 10 hingga 12 tanpa menjejaskan mutu asalnya. MP3 piawai menyimpan 1 minit muzik per megabit. Format ini amat menarik kepada penggemar muzik. Terdapat banyak tapak Web yang menawarkan fail-fail audio MP3 yang boleh dimuat turun.

MIDI

MIDI (atau Musical Instrument Digital Interface) adalah satu format piawai bagi komputer. Fail MIDI tidak mengandungi sebarang gelombang bunyi tetapi ia mengandungi penerangan bagaimana sesuatu lagu dimainkan. Anda boleh mengubah lagu tanpa suara di dalam format MIDI. Bunyi yang dihasilkan datangnya dari kad bunyi dan bukan fail MIDI. Oleh kerana fail MIDI tidak menyimpan bunyi maka saiznya adalah lebih kecil. Oleh itu ia sesuai dijadikan bunyi latar bagi laman Web anda.

PERISIAN AUDIO

Perisian audio profesionalContoh: Cool Edit Pro, Sound Forge, Cubasis, Cakewalk, Wavelab, GoldWave, Win Groove

Perisian audio biasaContoh: Sound Recorder Windows, Wave Studio Sound Blaster atau sebarang perisian dibekal oleh pengeluar kad bunyi

Pengubah format audioContoh: Real Audio Encoder, SoundVq Encoder, WinAmp3 Encoder, Xing MP3 Encoder

Perisian sintesis untuk memainkan lagu berformat MIDI bagi kad bunyi tanpa ciri wave synthesizer (iaitu pengguna kad bunyi 16/32 bit)

KEPERLUAN PERISIAN AUDIO

Minimum:Sebarang program rakaman yang dibekalkan bersama sistem pengendalian (Contoh: Sound Recorder untuk Windows) ATAU sebarang program rakaman audio yang dibekalkan bersama kad bunyi (Contoh: Wave Studio untuk kad bunyi keluarga (Sound Blaster).

Adalah lebih baik menggunakan program editor audio profesional (Contoh: CoolEdit Pro, SoundForge).

VIDEO

Fail video cenderung menjadi amat besar oleh sebab ia mengandungi terlalu banyak maklumat yang terkandung dalamnya.

Menghantar video bukan suatu pilihan yang sangat praktikal ia boleh mengambil masa berjam-jam untuk menghantar satu fail video ke komputer seseorang. Video strim menyelesaikan masalah ini, fail yang lebih kecil dihantar merentasi Internet dan membenarkan komputer menerima mula memainkan video semasa fail itu sedang dihantar. (VDOLive ialah cntoh video strim)

Selain daripada format fail (*.mov) Quick time , (*.flc), fail yang biasa digunakan (*.avi), dan fail yang lebih kecil digunakan (*.mpeg) atau (*.gif)

Pilihan Saiz Video

300k Windows Media Broad Stream

56k/28k Windows Media Dual Stream

300k Real Media Broad Stream

56k/28k Real Media Dual Stream

PERISIAN MUAT NAIK

Untuk memindahkan fail-fail dari komputer anda ke pelayan WebContoh: CuteFTP, WS_FTP95LE, WS_FTP PRO, BulletProof FTP

PERISIAN MUAT TURUN

Untuk memindahkan fail-fail dari pelayan Web ke komputer andaContoh: Go!Zilla, GetRight

UTILITI ZIP DAN UNZIP

Untuk memampatkan fail dan mengembangkannya kembaliContoh:WinZip, PKUnzip

Beberapa Istilah Penting

Halaman web (web page)Setiap halaman individu yang direka bentuk oleh seseorang dan kemudian diterbitkan ke Internet.

Laman Web (home page)Mengandungi satu halaman web atau beberapa halaman yang berkait dimana tiap-tiap satunya akan mempunyai pautan kepada satu sama lain.


Tapak web (web site)dimaksudkan kepada tempat (komputer) di mana kita menyimpan halaman-halaman web kita dan di mana halaman web itu boleh dicapai dan dilayari oleh pengguna Internet.

Hos web (web host)khidmat atau usaha satu pelayan web menyimpan halaman web anda.


Pengurus web (web master)Setiap tapak web dikendalikan dan diuruskan oleh seorang pengurus web. Biasanya sebarang ralat atau masalah yang ditemui di sesuatu tapak web boleh dilaporkan kepada pengurusnya.

Peringatan : Fail yang disimpan

Simpan fail dalam cakera keras, seeloknya buat permulaan, simpan fail dalam folder yang sama dengan halaman web. Ingat nama fail dan folder dimana fail itu disimpan (kerana kita akan merunjuk alamat fail itu dalam kod halaman web)

SEKIAN TERIMA KASIH

konsep asas pembinaan laman web

Documents