PENGENALAN KEPADA LAMAN WEB

Transkripsi

1 PENGENALAN KEPADA LAMAN WEB 1.1 Pengenalan kepada World Wide Web (WWW) 1.2 Rekabentuk laman web 1.3 Jenis-jenis penyunting HTML (HTML editors) 1.4 Pelayan Web * Klik pada tajuk untuk keterangan selanjutnya* F3026 WEB AUTHORING 1

2 Objektif Memperkenalkan sejarah World Wide Web (WWW) dan istilah-istilah yang berkaitan dengan World Wide Web. Memberi panduan dalam merekabentuk laman web yang baik. Mendedahkan kepada para pelajar elemen-elemen rekabentuk laman web yang baik. Memperkenalkan kepada para pelajar ciri-ciri bentuk laman peribadi, semasa, komersil dan hiburan. F3026 WEB AUTHORING 2

3 1.1 Pengenalan Kepada World Wide Web Satu medium komersil Kebanyakan dokumen web dibangunkan menggunakan HTML Dicipta pada tahun 1989 di institut penyelidikan CERN- The European Laboratary for Particle Physics Pelayar web pertama yang popular ialah Mosaic WORLD WIDE WEB (WWW) Menggunakan internet sebagai alat hubungan Bergantung kepada pelayar web dan http Di kenali sebagai WEB, WWW atau W3 1 rangkaian sejagat dan maya yang dihubungkan melalui sistem pautan F3026 WEB AUTHORING 3

4 Istilah : Beberapa istilah atau konsep yang berkaitan dengan World Wide Web (WWW): Tapak web (web site): Satu set halaman yang dihubungkan antara satu sama lain. Laman web (web page): Dokumen elektronik yang mempunyai kombinasi teks, bunyi dan grafik. Home page: Halaman permulaan laman web dimana pelawat memulakan pencarian di tapak web tersebut. Hyperlink: Pautan diantara perkataan atau grafik di pelayar web yang aktif yang memaparkan laman web kepada fail lain di World Wide Web. Pemetaan imej (image map): Grafik yang mempunyai lebih daripada satu pautan. Pelayar web (web browsers): pelanggan perumah (hosted clients) seperti NetScape, Mosaic, dan lain-lain, yang membaca fail yang dibangunkan dengan menggunakan HTML dan memaparkan halaman yang interaktif kepada pengguna. F3026 WEB AUTHORING 4

5 1.2 Rekabentuk Laman Web Elemen-elemen rekabentuk halaman web yang baik Teks Warna Navigasi Elemen-elemen elemen yang perlu dipertimbang dalam merekabentuk halaman web yang baik Stail Saiz halaman Kekonsistenan Grafik *Klik pada perkataan untuk penerangan selanjutnya* F3026 WEB AUTHORING 5

6 Warna Penggunaan warna yang salah akan memusnahkan rekabentuk laman web. Gunakan warna putih atau pastel untuk latarbelakang. Warna teks mesti berlawanan dengan warna latarbelakang. Bezakan warna pautan untuk membezakan pautan yang telah dilawati atau belum. Jenis-jenis pautan : belum dilawati, telah dilawati dan pautan yang aktif. Contoh :- biru tua untuk pautan yang belum dilawati, ungu untuk pautan yang sudah dilawati dan merah untuk pautan yang aktif. F3026 WEB AUTHORING 6

7 Teks Atribut yang boleh ditambah pada teks : tebal, condong, bergaris dan berkelip. Teks yang ditebalkan untuk memberi penekanan kepada teks. Teks yang berkelip menunjukkan amaran atau kesalahan. Tulisan dan saiz tulisan penting kepada rekabentuk. Gunakan tag di dalam HTML untuk setkan tulisan dan saiznya. F3026 WEB AUTHORING 7

8 Stail Terdapat 3 generasi dalam merekabentuk stail laman web : 1. Halaman generasi yang pertama. 2. Halaman generasi yang kedua. 3. Halaman Generasi yang ketiga. *Klik pada jenis generasi untuk penerangan selanjutnya* F3026 WEB AUTHORING 8

9 1. Halaman generasi yang pertama Linear. Turutan teks dan imej dari atas-ke-bawah, kiri-ke-kanan diasingkan dengan tanda kembali dan pemisah aliran data. Mempunyai headline banner dan tersusun. Direkabentuk oleh orang-orang teknikal. F3026 WEB AUTHORING 9

10 2. Halaman generasi kedua Ciri-ciri sama seperti halaman generasi pertama tetapi ikon menggantikan perkataan. Imej menggantikan latarbelakang kelabu. Terdapat butang dengan beveled edge. Banner menggantikan tajuk utama. Menggunakan model atas_bawah, senarai bullet dan model berpandukan menu untuk mempersembahkan maklumat secara berhieraki F3026 WEB AUTHORING 10

11 3. Halaman generasi yang ketiga Kombinasi typografi dan susunatur secara visual yang kreatif. Gunakan tema visual untuk menarik perhatian serta sebagai panduan kepada pengguna. Cenderung menjadikan tapak yang ramahpengguna dan mudah dikemudikan, isi kandungan yang berkualiti serta nilai pengeluaran yang tinggi. Direkabentuk oleh beberapa orang dalam kumpulan. F3026 WEB AUTHORING 11

12 Saiz halaman Pastikan halaman pendek. Panjang halaman yang dicadangkan kurang dua muatan-skrin di mana terdapat pautan di halaman pertama dan terakhir. Grafik tidak melebihi 30K bagi memudahkan proses muatan. Dimensi Halaman Dimensi Halaman Cetakan Paparan Kelebaran Maksimum 535 piksel 595 piksel Ketinggian Masimum (satu skrin) 295 piksel 295 piksel F3026 WEB AUTHORING 12

13 Grafik Grafik dikurangkan kerana ia akan mengganggu perhatian pengguna dan memperlahankan proses navigasi. Majoriti grafik di web dalam format GIF atau JPEG. Fail GIF untuk imej bergambarajah bagi ikon dan animasi. Fail JPEG untuk imej yang besar dan kompleks. F3026 WEB AUTHORING 13

14 Konsistensi Gunakan pendekatan yang konsisten untuk susunatur, latarbelakang, dan rekabentuk supaya pengguna dapat menyesuaikan diri dengan rekabentuk anda. Rekabentuk, grafik dan latarbelakang yang bercampur aduk akan memperlahankan masa pindah turun serta mengelirukan pelawat tapak anda. Contoh rekabentuk susunan yang konsisten F3026 WEB AUTHORING 14

15 Navigasi Sediakan alat navigasi seperti butang, secara konsisten di lokasi yang sama di keseluruhan laman web. Butang navigasi perlulah jelas dan logik. Setiap halaman mesti mempunyai pautan untuk kembali ke halaman pertama atau ke mana-mana titik navigasi di dalam tapak web. F3026 WEB AUTHORING 15

16 1.2.1 Soalan yang perlu diambil kira semasa membentuk laman web Siapakah yang akan membaca laman web ini? Apakah ciri-ciri yang akan membuatkan mereka melawat laman web anda semula? Kenapa mereka melawat tapak web anda? Bagaimana ia boleh berkomunikasi dengan anda? Adakah mereka mempunyai soalan, keperluan atau kaitan? F3026 WEB AUTHORING 16

17 1.2.3 Panduan untuk membangunkan laman web Rancang secara berhati-hati Rancang isi kandungan, susunatur dan rekabentuk. Susunatur hendaklah berbeza untuk kanak- kanak atau orang dewasa. Buat papan cerita untuk menunjukkan bagaimana semua halaman dipautkan. Pautkan setiap halaman kembali kepada halaman pertama. Jadikan setiap halaman konsisten Gunakan templet (template) supaya setiap elemen yang berulang akan berada di tempat yang sama di setiap halaman. Sambungan F3026 WEB AUTHORING 17

18 Bina halaman yang mempunyai visual Seimbangkan teks dan grafik serta gunakan latarbelakang bewarna putih. Gunakan animasi dan bunyi yang tidak keterlaluan kerana pengguna tidak mahu mengambil masa yang lama untuk proses pemuatan. Bina halaman pertama yang ringkas Halaman yang pertama mestilah ringkas (tanpa skrol) dan dipautkan kepada keseluruhan isi kandungan. Sekiranya isi kandungan, guna anchor untuk memisahkannya. Sambungan F3026 WEB AUTHORING 18

19 Beri kepercayaan kepada halaman anda Beri akuan dan pautan emel kepada anda. Semak dan ulangi menyemak kerja anda Membuat semakan untuk memastikan adakah semua pautan berfungsi. Semak ejaan dan tatabahasa. Semak navigasi dari satu halaman ke halaman yang lain. Adakah susunatur berfungsi secara logik? Buka laman web anda di beberapa pelayar web untuk memastikan paparan yang sama. F3026 WEB AUTHORING 19

20 1.2.4 Ciri-ciri rekabentuk laman web Terdapat beberapa jenis laman web: 1. Laman peribadi (personal page) 2. Laman semasa (topical page) 3. Laman komersil (commercial page) 4. Laman hiburan (entertainment page) * Klik pada jenis laman web untuk keterangan selanjutnya * F3026 WEB AUTHORING 20

21 Laman peribadi (personal page) Dibina secara peribadi. Membenarkan anda berkongsi maklumat bersama rakan-rakan, keluarga dan orang ramai. Merupakan satu latihan yang menyeronokkan. Maklumat yang selalu dipaparkan: - Latarbelakang peribadi - Maklumat untuk dihubungi - Hobi - Pekerjaan - Koleksi gambar peribadi - Maklumat tentang penerbitan laman web - Pautan kepada laman web yang lain F3026 WEB AUTHORING 21

22 Laman semasa (topical page) Homepage untuk topik tertentu. Ditulis oleh ahli kumpulan sukarelawan atau seseorang yang meminati isu tersebut. Halaman ini boleh diubah dari masa ke semasa. Perkara yang perlu dipertimbangkan: - Apa yang dimasukkan dahulu? - Fokus pada isi penting - Halaman komersil - Buat rancangan pertukaran F3026 WEB AUTHORING 22

23 Halaman komersil (Commercial page) Dibina oleh organisasi untuk mengurangkan kos penerbitan. Penghantaran katalog barangan kepada penjual. Fokus kepada isi kandungan. Merangkumi pelbagai stail. Memerlukan matlamat, kepakaran dan sumber. Pastikan semua halaman di laksanakan dengan baik dan berkualiti. Mesti ada ciri-ciri keselamatan. Beberapa tip yang perlu dipertimbangkan: - Apa yang dimasukkan dahulu? - Dapatkan kebenaran. - Di dalam atau di luar firewall. - Perlukan pakar. - Keunikan. - Awasi penggunaannya. F3026 WEB AUTHORING 23

24 Laman hiburan (entertainment page) Fokus pada peningkatan bilangan pelawat ke tapak web kerana peningkatan hasil pengiklanan adalah fokus perniagaan seperti ini. Laman web yang paling popular dan perlu di kemaskini setiap hari. Pelawat boleh berkomunikasi melalui laman web ini. Lebih daripada hiburan semata-mata. Cadangan untuk membina laman web ini: - Pastikan ia sentiasa kelihatan segar dan ceria. - Gunakan teknologi terkini. F3026 WEB AUTHORING 24

25 1.3 Jenis-jenis penyunting HTML (HTML editors) Penyunting HTML -> satu alat yang memudahkan anda membina laman web. Penyunting HTML yang paling asas -> NotePad. Antara jenis-jenis penyunting yang berada di pasaran : - Microsoft FrontPage - Macromedia Dreamweaver F3026 WEB AUTHORING 25

26 1.3.1 Microsoft Frontpage Sesuai untuk sesiapa sahaja yang mahu merekabentuk laman web yang mudah dengan sedikit kesan khas, dengan cepat dan pantas. Mudah dipelajari ->mempunyai sistem kerja dan tapak templet yang mudah diikuti. Tapak templet membantu anda membina tapak web dalam masa yang singkat. Mudah memformat teks, memasukkan imej atau jadual dengan menggunakan mana-mana pemprosesan web. Boleh menguruskan struktur tapak web dengan menggunakan struktur pokok. Sesuai dengan program Office yang lain. Sambungan F3026 WEB AUTHORING 26

27 Kelebihan bagi kesesuaian tugas: - Mencipta halaman yang mudah Cemerlang - Mencipta halaman yang kompleks Baik - Pengurusan tapak (site) Cemerlang - Kod Server-side Cemerlang Peringkat mudah bagi kesesuaian tugas: - Mencipta halaman yang mudah Cemerlang - Mencipta halaman yang kompleks Cemerlang - Pengurusan tapak (site) Cemerlang - Kod Server-side Cemerlang F3026 WEB AUTHORING 27

28 1.3.2 Macromedia Dreamweaver Sesuai untuk membina isi kandungan yang lebh profesional dan rekabentuk yang lebih baik menggunakan Flash atau Firework ke tapak web yangberkaitan dengan pangkalan data dan e-dagang. Membenarkan anda merekabnetuk halaman dengan beberapa lapisan Boleh membina pemetaan imej dari imej asal yang terletak di dalam program itu sendiri. Membenarkan anda membuat imej interaktif tanpa guna JavaScript dalaman Sesuai dengan produk Macromedia yang lain. Mudah diurus dan mengubah penampilan keseluruhan halaman. Sambungan F3026 WEB AUTHORING 28

29 kelebihan bagi kesesuaian tugas: - Mencipta halaman yang mudah Cemerlang - Mencipta halaman yang kompleks Baik - Pengurusan tapak (site) Sederhana - Kod Server-side Sederhana Peringkat mudah bagi kesesuaian tugas: - Mencipta halaman yang mudah Cemerlang - Mencipta halaman yang kompleks Cemerlang - Pengurusan tapak (site) Baik - Kod Server-side Sederhana F3026 WEB AUTHORING 29

30 1.4 Pelayan Web Definisi Pelayan Web -> Program komputer yang melayan permintaan fail / carian laman web daripada pelayar pelanggan. Pelayan web juga dirujuk sebagai sebuah komputer di mana perisian pelayan yang menyimpan fail-fail bagi satu atau lebih laman web. F3026 WEB AUTHORING 30