PEMBANGUNAN SISTEM PEMBELAJARAN BERASASKAN WEB DI BAWAH TAJUK HTML: INTEGRASI ELEMEN AUDIO DAN VIDEO.

SUHAILI BINTI SAMSURI

UNIVERSITI TEKNOLOGI MALAYSIA

PEMBANGUNAN SISTEM PEMBELAJARAN BERASASKAN WEB DI

BAWAH TAJUK HTML: INTEGRASI ELEMEN AUDIO DAN VIDEO

SUHAILI BT SAMSURI

Laporan projek ini dikemukakan

sebagai memenuhi sebahagian daripada syarat penganugerahan

Ijazah Sarjana Muda Sains dan Komputer serta Pendidikan (Kimia)

Fakulti Pendidikan

Universiti Teknologi Malaysia

APRIL 2006

iii

Khas buat ayah, Hj Samsuri b. Hj Othman dan mak, Hjh Seringatin bt. Hj Jamil. Terima kasih tak terhingga anakanda ucapkan

Semoga Allah merahmati dan melindungi kalian di dunia dan akhirat, Amin.. Suhaili sayang mak & ayah!

Kepada ’tentera-tentera cilik’ - Fariz, Emi, Aqil, Zati, Nadia & Hadi..

Berusahalah.. moga ini pendorong kalian untuk lebih berjaya di masa hadapan!

iv

PENGHARGAAN

Dengan Nama Allah Yang Maha Pemurah Lagi Maha Penyayang.

Alhamdulillah, segala puji bagi Allah, Tuhan sekelian alam. Bersyukur saya ke

hadratNya dengan limpah kurniaNya, dengan Rahmat dan InayahNya serta ilham yang

dicurahkan, maka terhasillah sebuah projek sarjana muda ini dengan baiknya.

Pertama sekali, jutaan penghargaan yang tak terhingga diucapkan kepada Pn

Norah bt. Md. Noor, selaku penyelia projek sarjana muda saya yang banyak memberikan

tunjuk ajar, panduan, dorongan dan sokongan kepada saya dalam menyiapkan projek ini.

Tidak lupa juga kepada Dr Jamalludin Harun selaku penasihat isi kandungan serta para

pensyarah Jabatan Multimedia, Fakulti Pendidikan, Universiti Teknologi Malaysia.

Terima kasih atas tunjuk ajar yang telah diberikan selama empat tahun pengajian saya di

sini.

Kepada rakan-rakan seperjuangan dari 5 SPK, dari Kolej Tuanku Canselor

terutama sekali saudara Mohd Fauzi b. Darus (2 SEC), serta rakan-rakan UTM

umumnya, terima kasih diucapkan. Tanpa bantuan, sokongan dan dorongan kalian, tidak

mampu rasanya untuk saya menyempurnakan projek ini.

Tidak lupa kepada ibu bapa serta seluruh ahli keluarga saya, terima kasih yang

tidak terhingga diucapkan. Sokongan, tiupan semangat serta iringan doa mereka amat

bererti buat saya. Sekian, terima kasih.

v

ABSTRAK

Pembangunan laman web pendidikan yang bertajuk HTML: Integrasi Elemen

Audio Dan Video ini bertujuan untuk menambah bahan pembelajaran berkaitan dengan

HTML. Laman web ini dibina berdasarkan sukatan pelajaran Bahasa Pengaturcaraan

Berasaskan Web yang ditawarkan di Fakulti Pendidikan, UTM. Model reka bentuk yang

diterapkan ialah model Rapid Prototype manakala strategi pengajaran yang digunakan

ialah tutorial, kaedah eksplorasi serta kaedah penyelesaian masalah. Perisian

pengarangan laman web Microsoft FrontPage digunakan kerana ia mudah dikendalikan

dan berkemampuan untuk membina laman web yang interaktif. Selain itu beberapa

perisian tambahan lain seperti Adobe Photoshop, Macromedia Flash MX dan sebagainya

turut digunakan bagi mengintegrasikan elemen-elemen multimedia ke dalam laman web

ini. Pengintegrasian elemen-elemen tersebut membolehkan pelajar meneroka dan

melibatkan diri secara aktif dalam proses pembelajaran. Di harapkan agar laman web ini

dapat memberikan manfaat dan memenuhi keperluan pengguna khususnya para pelajar

Institusi Pengajian Tinggi yang mengikuti kursus Bahasa Pengaturcaraan Berasaskan

Web dan pelajar lain yang berminat mempelajarinya.

vi

ABSTRACT

The purpose of the development of the educational website entitled HTML:

Integrasi Elemen Audio Dan Video is to add more learning materials in HTML. The

development of this website is based on Web Based Programming syllabus from Faculty

of Education, UTM. Instructional design model used for this website development is

Rapid Prototype Model. Teaching strategies used in this website were tutorial,

exploration and problem solving method. Microsoft FrontPage is used as the main

website editing software. This is because it is easy to use and able to produce an

interactive website. Other editing software such as Adobe Photoshop and Macromedia

Flash MX were also used to integrate multimedia elements in this website. The

integration of these elements in the website enables students to explore and participate

actively in the learning process. Hopefully that this website will give benefit and meet

the needs of the target users which are among college students who took Web Based

Programming course and also for those who are interested in learning HTML.

vii

ISI KANDUNGAN

BAB PERKARA MUKA SURAT

BORANG PENGESAHAN STATUS TESIS

PENGESAHAN PENYELIA

HALAMAN JUDUL i

PENGAKUAN PELAJAR ii

DEDIKASI iii

PENGHARGAAN iv

ABSTRAK v

ABSTRACT vi

KANDUNGAN vii

SENARAI RAJAH xii

SENARAI LAMPIRAN xii

1 PENGENALAN 1

1.1 Latar Belakang Projek 2

1.2 Penyataan Masalah 3

1.3 Objektif 4

1.4 Rasional Projek 5

1.5 Skop Projek 5

1.6 Istilah 6

viii

1.6.1 Internet 6

1.6.2 World Wide Web (WWW) atau Web 7

1.6.3 Laman Web 7

1.6.4 Pengajaran dan Pembelajaran (P&P) 7

1.6.5 Pendidikan Jarak Jauh (PJJ) 8

1.6.7 Reka Bentuk Pengajaran (Instructional Design) 8

1.6.8 HTML (Hypertext Markup Language) 8

1.7 Kesimpulan 9

2 SOROTAN PENULISAN 10

2.1 Sejarah Internet dan Web 10

2.2 Perkembangan Internet Dalam Bidang Pendidikan

di Malaysia 11

2.3 Web Dalam Pendidikan 13

2.3.1 Sokongan Kepada Pembelajaran Tradisional 14

2.3.2 Sokongan Kepada Program PJJ 14

2.4 Keberkesanan Laman Web Dalam Proses Pengajaran 16

dan Pembelajaran

2.5 Hyperteks Markup Language (HTML) 18

2.6 Teori dan Strategi Pembelajaran 19

2.6.1 Teori Behaviourisme 19

2.6.2 Teori Kognitif 21

2.6.3 Teori Konstruktivisme 22

2.7 Multimedia Dalam Laman Web 23

2.7.1 Teks dan Hiperlink 24

2.7.2 Grafik 25

2.7.3 Kombinasi Audio dan Video 25

2.7.4 Animasi 26

2.7.5 Hipermedia 27

ix

2.7.6 Interaktiviti 27

2.8 Model Reka Bentuk Instruksi Dalam Membangunkan 28

Laman Web

2.8.1 Model ADDIE 29

2.8.2 Model ASSURE 30

2.8.3 Model Reka Bentuk Prototyping 32

Sebagai Reka Bentuk Pembangunan

2.9 Kesimpulan 34

3 METODOLOGI 35

3.1 Pembangunan Laman Web 35

3.2 Fasa 1: Analisis 37

3.2.1 Analisis Luaran 37

3.2.1.1 Isi Kandungan 38

3.2.1.2 Sasaran Pengguna 38

3.2.1.3 Objektif Pengajaran Aplikasi 39

3.2.1.4 Media Penyebaran 40

3.2.2 Analisis Dalaman 40

3.2.2.1 Keperluan Perkakasan 41

3.2.2.2 Keperluan Perisian 42

3.3 Fasa 2: Reka Bentuk 43

3.3.1 Reka Bentuk Informasi 43

3.3.2 Reka Bentuk Interaksi 46

3.3.3 Reka Bentuk Persembahan 48

3.4 Fasa 3: Pembangunan 49

3.5 Fasa 4: Pelaksanaan 50

3.6 Fasa 5: Pengujian dan Penilaian 51

3.6.1 Pengujian 51

3.6.2 Penilaian 52

x

3.6.2.1 Penilaian Formatif 52

3.6.2.2 Penilaian Sumatif 52

3.7 Kesimpulan 53

4 HASIL REKA BENTUK LAMAN WEB 54

4.1 Paparan Laman Web 54

4.1.1 Paparan Percikan (Splash Screen) 56

4.1.2 Paparan Laman Utama 57

4.1.3 Panduan 58

4.1.4 Peta Laman 58

4.1.5 Glosari 59

4.1.6 Halaman Maklum Balas Pengguna 60

4.1.7 Tutorial 61

4.1.7.1 Bahagian Imbas Kembali 62

4.1.7.2 Bahagian Audio 62

4.1.7.3 Bahagian Video 64

4.1.8 Latihan 65

4.2 Pengujian laman Web dan Kesesuaiannya 67

4.3 Penilaian Laman Web dan Kesesuainnya 69

4.4 Kesimpulan 69

5 KESIMPULAN, MASALAH DAN CADANGAN 70

5.1 Kesimpulan 70

5.2 Masalah-Masalah Atau Kekangan Yang Dihadapi 72

5.2.1 Masa dan Kos 72

5.2.2 Kemahiran dan Kreativiti 73

xi

5.3 Kelebihan Laman Web 73

5.4 Kelemahan Laman Web 74

5.5 Cadangan 76

RUJUKAN 77

Lampiran A-C 80-2

xii

SENARAI JADUAL

NO JADUAL TAJUK MUKA SURAT

4.1 Jadual pengujian laman web di pelayar web dan 68

resolusi yang berbeza

xiii

SENARAI LAMPIRAN

LAMPIRAN TAJUK MUKA SURAT

A Cartalir bagi pembangunan laman web HTML: Audio & Video 80

B Storyboard atau papan cerita laman web 81 C Borang Penilaian Pembangunan Perisian 82

xiv

SENARAI RAJAH

NO. RAJAH TAJUK MUKA SURAT

2.1 Aliran kerja berdasarkan Model ADDIE 29

2.2 Model ASSURE 31

2.3 Model Rapid Prototype 33

3.1 Struktur tutorial 47

4.1 Paparan Laman Percikan (Splash Page) 56

4.2 Paparan Pengenalan 57

4.3 Paparan Panduan 58

4.4 Paparan Peta Laman 59

4.5 Paparan Glosari 60

4.6 Paparan halaman maklum balas pengguna atau

Hubungi Kami 61

4.7 Paparan bahagian Imbas Kembali 62

4.8 Paparan Pengenalan Audio 63

4.9 Paparan Tutorial Audio 64

4.10 Paparan Pengenalan Video 65

4.11 Paparan utama Latihan 66

4.12 Paparan Latihan Teori 66

4.13 Paparan Latihan Praktikal 67

BAB 1

PENGENALAN

Ledakan kemajuan ICT di seluruh dunia menjadi mangkin kepada

pembentukan masyarakat berilmu dan bermaklumat. Atas kesedaran ini, kerajaan

Malaysia telah memperkenalkan Multimedia Super Corridor atau lebih dikenali

sebagai MSC, iaitu inisiatif terulung negara. Melalui projek ini, pihak kerajaan

berusaha membawa ICT kepada rakyat Malaysia.

Tujuh aplikasi perdana dibawa bagi menjayakan MSC. Salah satu

daripadanya ialah sekolah bestari. Ini jelas menunjukkan bahawa bidang pendidikan

turut menjadi fokus utama dalam membawa ICT kepada generasi baru Malaysia.

Pengajaran dan pembelajaran tradisional digantikan dengan pengajaran dan

pembelajaran berasaskan teknologi moden. Ini termasuklah penggunaan Internet

dalam pengajaran dan pembelajaran.

Internet merupakan medium terkini bagi penyebaran ilmu pengetahuan. Ia

juga merupakan pusat sumber terbesar yang menyimpan pelbagai jenis khazanah

ilmu di dalamnya. Menurut Mohamed Amin et al.(2001):

Internet menyediakan akses kepada pelbagai sumber pendidikan yang

disimpan dalam komputer yang terdapat di seluruh dunia. Terdapat

kemungkinan yang besar bahawa sebahagian besar daripada sumber tersebut

sesuai digunakan untuk tujuan pengajaran dan pembelajaran.

2

Internet merupakan media penyebaran maklumat tercanggih pada masa kini

dan kepentingannya memang tidak dapat disangkal lagi. Ia merupakan media

penyebaran maklumat terpantas, interaktif, global dan dinamik yang mana maklumat

yang diperolehi dapat dikongsi bersama. Dengan hanya satu klik sahaja, kita mampu

mengakses pelbagai maklumat terkini dari seluruh dunia dalam sekelip mata pada

bila-bila masa dan di mana jua.

1.1 Latarbelakang Projek

Malaysia mula mendapatkan kemudahan Internet sejak 13 tahun yang lalu

dan kini pengguna Internet semakin meningkat seiring dengan perkembangan

semasa.

Kini, pengguna dapat melayari Internet menggunakan pelbagai teknologi

terkini, samada sambungan melalui talian telefon, perkhidmatan jalur lebar

menggunakan teknologi ADSL, teknologi wayarless, Internet satelit, liputan hotspot

dan yang seumpama dengannya. Maka dengan ini, lebih ramai pengguna di negara

ini berpeluang melayari Internet bila-bila masa dan di mana-mana sahaja.

Bilangan laman-laman web di Internet juga semakin meningkat. Menurut

Trochim (1996, dalam: Mohamed Amin et al., 2001) pelbagai jenis laman web boleh

kita perolehi, masing-masing mempunyai tujuannya tersendiri. Ada yang bertujuan

untuk menyebarkan maklumat, latihan dan pendidikan, perdagangan dan

pengiklanan, hiburan dan komunikasi. Selain dari mendapatkan maklumat, pengguna

juga boleh membeli-belah secara online, membayar bil-bil, membuat tempahan dan

sebagainya.

Internet kini banyak mempengaruhi bidang pendidikan. Laman-laman web

berunsurkan pendidikan dan latihan turut berkembang seiring dengan perkembangan

semasa. Laman-laman web pendidikan dan latihan kebanyakannya dibangunkan oleh

golongan pendidik dalam bidang masing-masing. Para pelajar turut sama

3

menyumbang dan berkongsi ilmu dengan membina laman-laman web. Ini kerana

Internet merupakan medium tercanggih dalam menyampaikan maklumat dengan

sesiapa sahaja di seluruh dunia.

Walaupun begitu banyak sumber yang boleh diperolehi di Internet, namun,

tidak semuanya benar dan boleh diguna pakai. Oleh yang demikian, penggunaan

Internet dalam bidang pendidikan perlu diberi perhatian khususnya dari segi

ketepatan maklumat yang diambil. (Ahmad Muhaimin, 2004).

1.2 Penyataan Masalah

Hasil dari tinjauan yang dibuat, terdapat banyak laman web canggih yang

berkaitan dengan pendidikan dan latihan khususnya yang berkaitan dengan tutorial

pengaturcaraan HTML. Namun, kebanyakan laman web yang ada lebih berperanan

menyampaikan maklumat daripada ‘mengajar’ serta tiada penerapan aspek-aspek

pedagogi atau reka bentuk pengajaran (instructional design). Dengan kata lain, ‘seni

mengajar’ atau ‘art of teaching’ tidak ditekankan. Terdapat juga maklumat-maklumat

yang disampaikan hanyalah seperti memindahkan maklumat daripada buku teks

kepada laman web dan sebahagiannya hanyalah sebagai automated page turners

(Nor Aishah, 2001).

Selain daripada itu, boleh dikatakan semua laman web berkenaan yang

ditemui adalah dalam Bahasa Inggeris. Ini amat menyukarkan pengguna yang kurang

penguasaan dalam Bahasa Inggeris yang ingin mendalami ilmu tersebut. Sehubungan

dengan itu, laman web yang akan dibangunkan dalam Bahasa Melayu ini merupakan

langkah alternatif bagi pengguna yang ingin mendalami ilmu tersebut tetapi kurang

penguasaan dalam Bahasa Inggeris.

Topik pengaturcaraan HTML ini juga amat bersesuaian sekali dibina

berasaskan web berbanding dibina berasaskan CD-ROM atau media cetak. Ini kerana

pelajar dapat mempelajari, mengaplikasi, serta mengalami sendiri apa yang telah

4

dipelajari terus dalam persekitaran web. Menurut Merill (1991, dalam: Baharuddin et

al., 2002 hlm. 67) pembelajaran mestilah berlaku dalam situasi yang sebenar,

penilaian diintegrasi dalam kerja dan bukan suatu yang terpisah. Melalui pautan-

pautan yang disediakan, pelajar berpeluang meneroka maklumat-maklumat tambahan

melalui laman-laman web yang lain.

Perkembangan teknologi yang sentiasa berubah mengikut peredaran zaman

juga menyebabkan ia amat sesuai dibangunkan dalam bentuk web berbanding CD-

ROM atau media cetak. Ini kerana Internet memudahkan pembangun mengubahsuai

isi kandungan laman web mengikut perkembangan semasa. Dengan yang demikian,

kos dan masa perubahan dapat diminimumkan. Berbeza dengan CD-ROM dan media

cetak, ia memerlukan kos yang tinggi dan masa yang panjang bagi sebarang

perubahan isi kandungan.

1.3 Objektif

Projek ini bertujuan menghasilkan satu laman web pendidikan berkenaan

dengan pengaturcaraan HTML yang mengintegrasikan audio dan video yang bertajuk

‘HTML: Audio & Video’. Laman web yang akan dibangunkan ini menggunakan

Bahasa Melayu sebagai bahasa pengantar serta menggunakan pendekatan tutorial

langkah demi langkah, kaedah eksplorasi serta penyelesaian masalah. Selain ia

dibangunkan bagi menambahkan kepelbagaian sumber di ruang siber, ia juga

dibangunkan bagi membantu pengguna yang kurang penguasaan Bahasa Inggeris

yang ingin mendalami ilmu ini. Ia juga merupakan alternatif penyebaran bahan

pembelajaran selain disebarkan melalui CD-ROM.