KONSEP ASAS PEMBINAAN LAMAN WEB

1. KONSEP ASAS PEMBINAAN LAMAN WEB Oleh : M.Ramlee b Kamarudin Pusat Kegiatan Guru Kawasan Kuala Pilah Negeri Sembilan Darul Khusus

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

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

4. 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)

5. 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?

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

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

8. 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 CONTOH-CONTOH JENIS LAMAN WEB YANG BOLEH DIHASILKAN

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

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

11. 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)

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

13. KEPERLUAN PERISIAN GRAFIK • Perisian grafik profesional Contoh: Adobe PhotoShop, Corel Photo Paint, Paint Shop Pro • Perisian grafik biasa Contoh : Paint Brush Windows, Ulead Photo Impact, Gif Construction Set, Ulead Gif Animator, Xara 3D, Xara Webstyle, Ulead Cool 3D • Perisian grafik jenis lukisan vektor Contoh : Adobe Illustrator, Corel Draw, Macromedia Freehand, Xara Webster

14. KERTAS DINDING (Latarbelakang) • Warna yang sesuai supaya tidak menjadi masalah untuk memilih warna font – cerah/bersih/kemas • Kesesuaian grafik dengan isi kandungan

15. 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 kelihatan di berapa tempat KERTAS DINDING (Latarbelakang) Tulisan ini jelas kelihatan

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

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

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

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

20. SPESIFIKASI GAMBAR YANG DIIMBAS • 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.

21. SPESIFIKASI GAMBAR YANG DIIMBAS • 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.

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

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

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

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

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

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

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

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

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

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

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

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

34. PERISIAN AUDIO • Perisian audio profesional Contoh: Cool Edit Pro, Sound Forge, Cubasis, Cakewalk, Wavelab, GoldWave, Win Groove • Perisian audio biasa Contoh: Sound Recorder Windows, Wave Studio Sound Blaster atau sebarang perisian dibekal oleh pengeluar kad bunyi • Pengubah format audio Contoh: 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)

35. 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).

36. 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)

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

38. PERISIAN MUAT NAIK • Untuk memindahkan fail-fail dari komputer anda ke pelayan Web Contoh: CuteFTP, WS_FTP95LE, WS_FTP PRO, BulletProof FTP

39. PERISIAN MUAT TURUN • Untuk memindahkan fail-fail dari pelayan Web ke komputer anda Contoh: Go!Zilla, GetRight

40. UTILITI ZIP DAN UNZIP • Untuk memampatkan fail dan mengembangkannya kembali Contoh:WinZip, PKUnzip

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

42. Beberapa Istilah Penting • 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.

43. Beberapa Istilah Penting • 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.

44. 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)

45. SEKIAN TERIMA KASIH