Nota Multimedia

100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM) Fakulti Teknologi Maklumat dan Komunikasi Multimedia Copyright © ODL Jan 2005 Open University Malaysia 1 PEMBANGUNAN APLIKASI MULTIMEDIA TUTORIAL 1 – UNIT 1 Pembangunan Aplikasi Multimedia PN SITI RAFEAH YAAKUB

description

NOTA PEMBANGUNAN MULTIMEDIA

Transcript of Nota Multimedia

Page 1: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1

PEMBANGUNAN APLIKASI MULTIMEDIATUTORIAL 1 – UNIT 1 Pembangunan Aplikasi Multimedia

PN SITI RAFEAH YAAKUB

Page 2: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

2

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Objektif Kursus

Ke arah MERANCANG dan MEMBANGUNKAN sebuahaplikasi multimedia merangkumi 2 komponen utama:

pemprosesan imej & pengarangan.

Ia meliputi : Pemahaman FASA pembangunan aplikasi multimedia Teknik asas dalam 2 perisian PEMPROSESAN IMEJ

untuk kesan imej grafik Kemahiran 2 perisian PENGARANGAN untuk

pembangunan aplikasi Multimedia

Page 3: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

3

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Kerja Kursus 50% Penglibatan online 5% Tugasan X 1 20% Ujian X 2 25%

Peperiksaan (final) 50% Bahagian A - 20% Bahagian B - 30%

Keadah Penilaian

Page 4: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

4

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Perancangan TutorialTutorial Aktiviti Masa

T1 - Overviu kursus - Perbincangan UNIT 1 / latihan / soalan tutorial- Proses instalasi perisian di makmal

- 10 m - 70 m- 40 m

T2 - Perbincangan UNIT 2 – ADOBE PHOTOSHOP- UJIAN 1- Perbincangan Tugasan

- 70 m- 30 m- 20 m

T3 - Perbincangan UNIT 2 – PAINT SHOP- Perbincangan UNIT 3 – MACR. DIRECTOR (Beg)- Perbincangan Tugasan

- 60 m- 45 m- 15 m

T4 - Perbincangan UNIT 3 MACR. DIRECTOR (Adv)- UJIAN 2- Penyerahan tugasan

- 80 m- 30 m- 10 m

T5 - Ulangkaji – UNIT 1 – 3- Bincang contoh2 soalan exam- Penyelarasan Borang TMA

- 45 m- 45 m- 30 m

Page 5: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

5

UN

IT 1 UNIT 1

PEMBANGUNANAPLIKASI MULTIMEDIA

Page 6: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

6

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Komponen UNIT 1 Proses Pembangunan Multimedia Fasa pembangunan MultimediaProses Pembangunan

Multimedia

Perisian PengaranganMultimedia

Interaktif & Navigasi

Perisian Pengarangan Kepentingan Perisian pengarangan Kriteria Pemilihan Perisian Pengarangan Metafora Perisian pengarangan

Konsep/tahap/ciri/jenis/Interaktiviti Kelebihan Multimedia Interaktiviti Interaktiviti & Navigasi Kawalan & jenis kawalan Navigasi

RekabentukAntaramuka

Definisi Antaramuka Pengguna Kepentingan Antaramuka Pengguna Kriteria Rekabentuk Antaramuka Jenis-jenis Antaramuka Komponen Antaramuka Prinsip Rekabentuk Antaramuka

Page 7: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

7

UN

IT 1 UNIT 1

PEMBANGUNAN APLIKASI MULTIMEDIABAB 1Proses Pembangunan Multimedia

Page 8: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

8

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.0 Pengenalan

Objektif

• Mengenalpasti BEBERAPA PENDEKATAN PEMBANGUNAN multimedia;

• Memahami FASA DAN LANGKAH di dalam proses pembangunan multimedia

• Mengenalpasti dan membandingkan JENIS-JENIS SISTEM PENYEBARAN MULTIMEDIA yang terdapat di pasaran.

Page 9: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

9

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.1 Proses Pembangunan Multimedia

•Melibatkan fasa-fasa pembangunan dan langkah yang terlibat dalam setiap fasa.

•Bermula dari perancangan sehingga pemasangan aplikasi.

•Proses pembangunan mempunyai kitaran hayat tertentu – memastikan aplikasi sentiasa tersedia dan memenuhi keperluan semasa.

•Langkah-langkah lazim:

Pra-Produksi Produksi Pos Produksi

Page 10: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

10

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.1 Proses Pembangunan Multimedia

Model Rekabentuk:

Rajah 1.1: Model Rekabentuk Instruksi Hannafin & Peck

Rajah 1.2: Model ADDIE

Page 11: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

11

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.2 Fasa Pembangunan Multimedia

Fasa 1Perancangan

Fasa 2Penghasilan

Fasa 3Pengujian

Pernyataan Tujuan

Kenalpasti Pengguna

Cara Perlaksanaan

Papan Cerita

Spesifikasi

Pembangunan Konsep

Rajah 1.3: Fasa Pembangunan Multimedia

Pengujian

Isikansungan

Pengarangan

Langkah-langkah

Page 12: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

12

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

Fasa 1Perancangan

Pernyataan Tujuan

Kenalpasti Pengguna

Cara Perlaksanaan

Papan Cerita

Spesifikasi

Pembangunan Konsep

Langkah-langkah

Rajah 1.3: Fasa Pembangunan Multimedia

Page 13: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

13

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.1 Pembangunan Konsep

• Konsep berasaskan idea

• Mesti selari dengan tujuan, kesauran, kos produksi dan

penyebaran projek multimedia

• Proses menjana sebuah idea adalah: sesi brainstorming; melukis / melakar pada kertas cara formal seperti: senarai semak berserta kriteria penilaian.

Page 14: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

14

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.1 Pembangunan Konsep (smb)

• Idea digunakan untuk menetapkan visi

• Perlu dinyatakan dengan jelas, boleh diukur dan mempunyai objektif-objektif yang dicapai.

• Perlu ada garis panduan yang tersusun dan merancang dengan rasional meliputi: kepakaran, masa, belanja, peralatan dan sumber yang ada pada

ketika itu.

• Rancang keseluruhan proses bermula dengan idea pertama anda dan berakhir dengan projek yang telah siap untuk penyebaran.

Page 15: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

15

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.2 Pernyataan Tujuan

• Menentukan matlamat & objektif dengan terperinci

• Matlamat dan objektif membantu menentukan hala tuju proses pembangunan aplikasi multimedia

• Boleh digunakan untuk menilai kesesuaian sesebuah aplikasi multimedia sewaktu dan selepas ianya dibangunkan.

Matlamat adalah suatu pernyataan yang luasmengenai apa yang akan dicapai

Objektif – suatu pernyataan yang lebih tepat & spesifik

Page 16: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

16

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.3 Kenalpasti Pengguna Sasaran

• Profail pengguna perlu difahami bagi memastikan aplikasi yang dihasilkan memenuhi keperluan dan kehendak pengguna

• Pengguna atau audien boleh diterangkan dengan banyak cara seperti menurut faktor demografik, juga gaya hidup dan tingkah laku seseorang.

• Pembangun perlu analisa profail pengguna dan menggunakan maklumat tersebut untuk membangunkan aplikasi yang berjaya memenuhi kehendak pengguna.

Page 17: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

17

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.4 Penentuan Cara Perlaksanaan

• Konsep; objektif; sasaran pengguna; menentukan gaya persembahan aplikasi.

• Komponen yang perlu ditentukan: Ton

Pendekatan

Metafora

Penekanan

Page 18: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

18

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.4 Penentuan Cara Perlaksanaan (smb)

• Ton

Memilih ton yang sesuai dengan objektif dan konsep aplikasi

Dipengaruhi oleh elemen-elemen media yang digunakan

• Pendekatan Langkah atau arahan yang disediakan kepada

pengguna

Perlulah sesuai dengan konper dan sasaran pengguna

Page 19: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

19

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.4 Penentuan Cara Perlaksanaan (smb)

• Metafora

Merujuk kepada peta imej istimewa – menggunakan imej dalam konteks yang lebih bermakna.

Informasi disembahkan dalam bentuk objek.

Sering digunakan pada antaramuka utama

• Penekanan Penekanan dipertimbangkan apabila berlaku

kengkangan masa, kewangan, sumber dll.

Page 20: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

20

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.5 Pembangunan Spesifikasi

• Spesifikasi merujuk kepada kepada: spefikasi perkakasan dan spefikasi perisian.

• Tujuan:- memastikan aplikasi yang dibangunkan memenuhi objektif dan menepati kehendak pengguna sasaran.

• Elemen dalam spesisfikasi ialah perkakasan untuk sistem pembangunan dan sistem penyebaran (sistem main semula), perisian, elemen yang akan dimasukkan, kebolehfungsian dan antaramuka pengguna.

Page 21: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

21

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.5 Pembangunan Spesifikasi (smb)Elemen Spesifikasi:• Perkakasan

• Perkakasan berkeupayaan tinggi yang mampu menyokong elemen multimedia

• Sistem Pembangunan• Perkakasan pembangunan yang

digunankan:Sistem Penyebaran & Sistem Pengarangan

• Sistem Penyebaran• Digunakan oleh pengguna akhir

utk memainkan aplikasi

• Elemen yang dimasukkan• Spesifikasi lengkap bagi

setiap elemen yang kita masukkan

• Kebolehanfungsian• Bagaimana aplikasi

bertindak balas dengan pengguna

• Antaramuka pengguna• Rekabentuk objek pasa

skrin dan berinteraksi dengan pengguna

Page 22: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

22

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.3 Fasa 1: Perancangan

1.3.6 Papan Cerita

• Papan cerita mewakili: apa yang kita lihat pada setiap skrin dan

perhubungan antara skrin-skrin

• Tujuan Membantu Pembangun merancang dan mengendalikan proses

pembangunan.

Membolehkan Pembangun menguji keseluruhan konsep secara gambaran visual.

Memudahkan komunikasi secara visual antara pembangun- pengguna

Page 23: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

23

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Isikansungan

Pengarangan

1.4 Fasa 2: Penghasilan

Rajah 1.3: Fasa PembangunanMultimedia

Fasa 2Penghasilan

Page 24: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

24

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.4 Fasa 2: Penghasilan

1.4.1 Pembangunan Isi Kandungan

• Isi kandungan merupakan maklumat atau bahan-bahan yang membentuk jantung sesebuah projek yang dibangunkan.

• Pembangunan isi kandungan melibatkan: Proses pengumpulan,

Proses penterjemahan, dan

Proses Pengubahsuaian elemen-elemen yang digunakan di dalam aplikasi yang dibangunkan.

Page 25: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

25

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.4 Fasa 2: Penghasilan Pemilihan media atau bahan yang akan digunakan- grafik, audio, video.

Cara: Mendapatkan bahan luar; menggunakan koleksi sendiri; hasilkan yang baru atau upah pakar grafik

Pengumpulan elemen-elemen multimedia bukan satu kerja yang mudah, malah ia memerlukan perancangan yang rapi dan sistematik.

Pengumpulan Elemen

Mengubah format elemen kepada format yang interaktif – Cth: Format analog kepada Digital

Tujuan Terjemahan: memastikan elemen boleh diterima oleh perisian Pengarangan

Proses Pengubahsuaian: Proses manipulasi untuk memberi kesan menarik kepada elemen multimedia. (cth: penggunaan Adobe Photoshop)

Penterjemahan & Pengubahsuaian Elemen

1.4.1 Pembangunan Isi Kandungan

AKTIVITI

Page 26: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

26

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.4 Fasa 2: Penghasilan

1.4.2 Pengarangan

• Dilakukan selepas pembangunan spesifikasi dan papan cerita telah disempurnakan.

• Proses pengarangan melibatkan pengintegrasian semua bahan-bahan media.

• Elemen interaktiviti dimasukkan pada peringkat ini. Elemen ini akan mengeratkan lagi perhubungan antara aplikasi – pengguna

Page 27: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

27

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.5 Fasa 3: Pengujian

• Menguji aplikasi yang telah siap dibina bagi memastikan ia telah memenuhi matlamat pembangunan.

• Pengujian merupakan proses yang berterusan dan boleh bermula di peringkat pembangunan konsep lagi.

• Memastikan aplikasi yg dibangunkan bebas daripada pepijat, tepat, beroperasi, mengikut peruntukan masa dan kehendak pelangganFasa 3

Pengujian

Pengujian

Page 28: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

28

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.5 Fasa 3: Pengujian

Proses Pengujian

• Pengujian Alfa Ujian secara dalaman tanpa melibatkan orang luar.

Ia cuma untuk edaran dalaman sahaja.

Versi produk untuk pengujian alfa biasanya merupakan draf kerja pertama projek anda.

• Pengujian Beta

Pengujian dengan pengguna sebenar

Tujuan: untuk mendapat maklum balas yang sebanyak mungkin daripada pengguna berpotensi terhadap prestasi sebenar aplikasi

Page 29: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

29

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.6 Penyebaran

• Penyebaran merupakan proses penyerahan aplikasi kepada pengguna.

• Aplikasi yang dibangunkan sedia disebarkan dalam pelbagai cara: Online, CD-ROM, DVD

• Format penyebaran berbeza mengikut jenis penyebaran aplikasi yang dipilih.

• Format penyebaran yang berbeza mempunyai teknik, kepakaran, dan kandungan yang berbeza.

• Cth: Utk aplikasi elemen video sesuai menggunakan format penyebaran CD / DVD berbanding format online.

Page 30: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

30

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

1.6 Penyebaran

Aktiviti Penyebaran

Sistem penyebaran adalah medium atau peranti storan data yang digunakan untuk penyebaran aplikasi multimedia.

Ia mungkin CD-ROM, cakera liut, DVD-ROM,Internet atau Intranet.

Sistem Penyebaran Multimedia

Melibatkan penyediaan fail, storan, perkakasan utk membolehkan aplikasi dipasang pada persekitaran pengguna.

Terdapat program yang berfungsi sebagai rutin pemasangan yang membolehkan aplikasi dilarikan secara automatik pada komputer pengguna. Cth: Installer Vise; InstallerMaker

Penyediaan dokumentasi dan manual pengguna juga diperlukan.

Penyediaan khidmat layanan pelanggan dan sokongan teknikal

Penyediaan untuk Penyebaran

Page 31: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

31

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Rumusan

• Proses pembangunan aplikasi multimedia adalah rumit, mahal dan memakan masa yang lama.

• Oleh itu, pastikan proses perancangan amat penting dan dirujuk di sepanjang proses pembangunan.

• Peruntukkan Proses Pembangunan Multimedia: 80% perancangan dan 20% penghasilan.

• 2 langkah utama yang memberi fokus terhadap penghasilan / pembangunan: Pembangunan Isi Kandungan & Pengarangan.

• Proses pembangunan yang rapi merupakan faktor kejayaan sesuatu projek.

Page 32: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

32

UN

IT 1 UNIT 1

PEMBANGUNAN APLIKASI MULTIMEDIABAB 2Perisian Pengarangan Multimedia

Page 33: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

33

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.0 Pengenalan

Objektif

• Memahami KEPENTINGAN Perisian pengarangan dalam Multimedia.

• Memahami 6 KRITERIA PEMILIHAN Perisian Pengarangan

• Memahami 4 METAFORA Perisian Pengarangan

Page 34: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

34

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.1 Definasi Pengarangan

Dari Konteks Multimedia

Pengarangan membawa pengertian satu ciptaan atau hasil kreativiti minda seseorang dalam

proses yang mengabungkan teks, grafik, animasi, audio dan video untuk mencipta suatu

aplikasi Multimedia dalam format CD-ROM, laman web, kiosks dan sebagainya.

Page 35: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

35

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.2 Definasi Perisian Pengarangan

Larry dan Nancy (1995)Perisian yang membolehkan aplikasi-aplikasi multimedia diciptadengan m’gabungkan bunyi, pergerakan, grafik, audio, video dan

teks ke dalam sesuatu perisian.

McGloughin (2001)Aplikasi komputer yang membenarkan pengguna membangunkan

satu perisian dengan mengheret dan meletakkan pelbagai komponen media tanpa kemahiran bahasa pengaturcaraan.

Vaughan (2001) Suatu integrasi yang mengumpulkan kandungan dan fungsi

sesebuah projek yang dibangunkan.

Page 36: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

36

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.2 Definasi Perisian Pengarangan

Pakej perisian yang membenarkan andamengumpul dan mengintegrasi elemen-elemen

media ke dalam suatu aplikasi multimedia.

Istilah ‘pengarangan’ atau ‘penggubah’ digunakan kerana anda dianggap sebagai

pengarang untuk aplikasi berkenaan.

Page 37: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

37

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.3 Kepentingan Perisian Pengarangan

• Menjimatkan masa dalam menghasilkan suatu aplikasi yang sofistikated.

• Membolehkan integrasi atau kesepaduan teks, audio, video dan animasi ke dalam persembahan interaktif.

• Membolehkan aplikasi multimedia dibangunkan tanpa kemahiran & pengalaman pengaturcaraan yang kompleks.

• Menyediakan persekitaran bersepadu bagi menghubungkan semua isi kandungan dan fungsi sebuah aplikasi yang ingin dibangunkan.

Page 38: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

38

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.4 Kriteria Pemilihan Perisian Pengarangan

Menyokong Fitur Mengedit: peralatan mengedit elemen-elemen multimedia: grafik, animasi, teks, audio digital, video.

Cth: Adobe Photoshop

Membantu anda menyusun atau mengorganisasi projek multimedia.

Rajah atau diagram papan cerita dan navigasi digunakan utk mewakili aplikasi

Cth: Macromedia Athorware

Interaktiviti membenarkan pengguna mempunyai kawalan sepenuhnya ke atas kandungan dan aliran maklumat di dalam aplikasi tersebut.

Page 39: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

39

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.4 Kriteria Pemilihan Perisian Pengarangan

Boleh dimainkan pada kedua-dua persekitaran Macintosh dan Windows.

Macintosh: sesuai sebagai platform pembangun Windows: sesuai sebagai platform pengguna

Memandangkan Web telah menjadi medium penyebaran multimedia yang penting, pastikan aplikasi yang dibangunkan boleh disebarkan pada Internet.

Menyokong fitur penyebaran dengan menyediakan kemudahan penyediaakn versi run-time.

Versi run-time membolehkan pengguna mencapai aplikasi tanpa dapat mengubah kandungan.

Lebih mudah fitur penyebaran; lebih meluas pasaran

Page 40: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

40

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.5 Pengarangan VS Peraturcaraan

Perisian PengaranganBoleh digunakan untuk

aplikasi multimedia.Punyai peralatan tahap

tinggi. Pembangun membangunkan

aplikasi tanpa pengetahuan pengaturcaraanCapaian fungsi yang terhadPembangun hanya memilih arahan untuk diberikan kepada

sistem komputer daripada set yang terhad.Masa pembangunan – cepatSaiz aplikasi agak besar

Perisian Pengaturcaraan Boleh digunakan untuk aplikasi multimedia. Punyai peralatan tahap rendah. Pembangun mesti mempunyai pengetahuan pengaturcaraan.

Capaian fungsi yang banyak Pembangun boleh mengarah komputer untuk laksanakan apa-apa tugas yang diingini.

Masa pembangunan – lama Saiz aplikasi lebih kecil

Page 41: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

41

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.6 Metafora Perisian Pengarangan

• METAFORA digunakan untuk mengurus dan menyusun jujukan elemen-elemen Multimedia.

• Perisian Pengarangan Multimedia dibahagikan kepada 4 kategori utama berdasarkan METAFORA.

Metafora Berasaskan Ikon Persembahan Slaid

Metafora Berasaskan Ikon

Metafora Berasaskan tatasusunan Kad / Lembaran Buku

Metafora Berasaskan Masa

Page 42: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

42

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.6 Metafora Perisian Pengarangan

2.6.1 Metafora Berasaskan Tatasusunan

• Beroperasi berdasarkan tatasusunan kad / lembaran buku.

• Imej-imej grafik disusun dalam bentuk jujukan logikal atau mengumpulnya mengikut bab dan lembaran buku atau kad di dalam kad katalog

• Cth: HyperCard, HyperStudio dan Asymetrix ToolBook

Page 43: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

43

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.6 Metafora Perisian Pengarangan

2.6.1 Metafora Berasaskan Ikon

• Menggunakan konsep carta alir untuk menghasilkan peta hubungkait antara elemen multimedia.

• Menggunakan pendekatan pengaturcaraan visual untuk menyusun dan mempersembahkan multimedia.

• Cth: Macromedia Authorware, Icon Author,

Page 44: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

44

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.6 Metafora Perisian Pengarangan

2.6.1 Metafora Berasaskan Masa

• Berasaskan frame atau movie

• Objek-objek disusun di sepanjang garis masa.

• Sesuai digunakan untuk pembinaan animasi.

• Mengandungi set fitur-fitur yang luas untuk menghasilkan persembahan multimedia, animasi dan aplikasi interaktif multimedia.

• Cth: Macromedia Director / Flash

Page 45: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

45

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

2.6 Metafora Perisian Pengarangan

2.6.1 Metafora Berasaskan Slaid

• Berasaskan persembahan slaid atau slide show

• Kelebihan: boleh digunakan pada kedua-dua persekitaran Windows dan juga persekitaran Macintosh.

• Cth: PowerPoint

Page 46: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

46

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Kesimpulan

• Terdapat pelbagai jenis perisian pengarangan yang boleh digunakan untuk membangun pelbagai jenis aplikasi multimedia yang canggih dalam pelbagai bidang.

• Pemilihan perisian pengarangan yang sesuai dalam pembangunan aplikasi multimedia adalah penting.

• Pembangun aplikasi multimedia tidak semestinya memilih perisian pengarangan yang mahal lagi kompleks.

• Pelbagai jenis pengarangan yang mudah diperolehi dengan percuma atau dengan harga yang murah boleh digunakan dalam pembangunan aplikasi multimedia.

Page 47: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

47

UN

IT 1 UNIT 1

PEMBANGUNAN APLIKASI MULTIMEDIABAB 3Interaktiviti dan Navigasi

Page 48: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

48

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.0 Pengenalan

Objektif

• Memahami KONSEP DAN KEPENTINGAN Interaktiviti dan Navigasi dalam Multimedia.

• Memahami 3 TAHAP dan 7 CIRI Interaktiviti yang terdapat dalam Multimedia

• Mengetahui FUNGSI dan JENIS KAWALAN Navigasi yang digunakan dalam Multimedia

Page 49: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

49

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.1 Definasi Interaktiviti

Menurut Kamus Dewan (1997)Tindakan atau perhubungan aktif antara satu sama lain,

tindak balas antara dua atau beberapa pihak.

Lipmann (1987) Aktiviti yang dijalankan serentak oleh kedua-dua belah pihak

yang terlibat untuk mencapai satu tujuan tertentu.

Manakala Phillips (1997)Suatu proses yang memberikan kuasa kepada pengguna untukmengawal persekitarannya dengan menggunakan komputer.

Page 50: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

50

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.1 Definasi Interaktiviti

National Consortium For Environmental Education And Training

“…Suatu alat yang menawarkan kepada pengguna pelbagai pilihan atau senario yang berbeza.

Pengguna boleh membuat pilihan untuk mengikut jujukan yang telah ditetapkan atau mengikut

subjek atau perkara yang ingin dijelajahi.

Perisian akan berinteraksi dengan pengguna dengan cara bertindakbalas terhadap pilihan

atau input dari pengguna…”

Page 51: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

51

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.2 Konsep Interaktiviti

Interaktiviti: elemen Multimedia yang dianggap sebagai jantung kepada aplikasi multimedia.

Interaktiviti ini dikenali sebagai multimedia tidak linear.

Ciri interaktiviti ini telah menjadikan multimedia lebih popular berbanding komponen media yang lain.

Page 52: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

52

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.3 Tahap Interaktiviti

(i) Interaktiviti Tahap Rendah (Navigasi)

• Tahap interaktiviti yang paling asas.

• Interaksi difokuskan kepada tugas menavigasi perisian menerusi klik butang, arahan menu atau pautan.

• Pengguna hanya mengawal sebahagian kecil perisian.

Page 53: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

53

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.3 Tahap Interaktiviti

(ii) Interaktiviti Tahap Pertengahan (Fungsian)

• Pada tahap ini, pengguna berinteraksi dengan sistem / perisian untuk mencapai suatu matlamat.

• Interaktiviti dibentuk berdasarkan fungsian iaitu apakah fungsi perisian itu dibangunkan.

• Sepanjang interaksi, pengguna akan diberikan maklumbalas di atas capaian mereka

Page 54: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

54

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.3 Tahap Interaktiviti

(iii) Interaktiviti Tahap Tinggi (Adaptif)

• Tahap interaktiviti yang paling tinggi.

• Interaktiviti dibentuk berdasarkan fungsi adaptif iaitu kebolehan perisian untuk menyesuaikan pengguna dengan kemampuan mereka.

• Pengguna diberikan kuasa yang lebih untuk mengawal perisian dan boleh berinteraksi dengan perisian secara langsung.

Page 55: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

55

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.4 Ciri Interaktiviti

(i) Tindak balas yang Segera(ii) Capaian Maklumat yang Tidak Berjujukan(iii) Maklum balas Pantas

(iv) Kesesuaian(V) Pilihan(VI) Kawalan Pengguna(VII) Grain-Size

CIRI-CIRIINTERAKTIF

Page 56: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

56

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.4 Ciri Interaktiviti

(i) Tindak balas yang Segera Pengguna boleh mencapai maklumat seperti grafik, video

atau teks dengan hanya mengklik pada tetikus.

Masa tindak balas pantas.

(ii) Capaian Maklumat yang Tidak BerjujukanMaklumat boleh dicapai oleh pengguna mengikut kehendak

mereka dan tidak perlu berjujukan.

(iii) Maklum balas yang Pantas Interaktiviti tidak akan wujud tanpa maklum balas

Maklum balas seperti “Betul”! dan “Salah!” tidak mencukupi - pengguna perlu tahu bagaimana untuk memperbaiki kesilapan dan meneruskan program

Page 57: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

57

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.4 Ciri Interaktiviti

(iv) Kesesuaian Perisian mempunyai kebolehan untuk mengubahsuai tindakannya

mengikut tahap pengetahuan pengguna.(v) Pilihan

Perisian akan menyediakan banyak pilihan: Pengguna bebas membuat pilihan mereka

(vi) Kawalan Pengguna Pengguna berkuasa mengawal sebahagian dari program

Boleh meningkatkan motivasi pengguna.(vii) Grain-Size

Masa yang diperlukan oleh perisian bagi setiap interaksi pengguna.

Jika masa menunggu terlalu lama pengguna akan merasa bosan dan interaktiviti menjadi kurang.

Page 58: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

58

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.5 Jenis Interaktiviti

Interaktiviti Objek

Objek - butang, manusia dan benda dalam perisian diaktifkan apabila input diterima untuk tindakbalas.

Interaktiviti Linear

Fungsi yang membenarkan pengguna bergerak ke depan / ke belakang dalam suatu jujukan linear.

Interaktiviti Hierarki

Perisian memberikan pengguna set-set pilihan yang telah ditetapkan - pengguna boleh memilih laluan yang spesifik untuk mengakses kandungan

Page 59: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

59

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.5 Jenis Interaktiviti

Interaktiviti Sokongan

Pengguna dibekalkan dengan pelbagai jenis bantuan ‘help’ sokongan dan mesej, dari yang ringkas kepada yang sangat rumit.

Interaktiviti Kemaskini

Komponen perisian yang memulakan dialog antara pengguna dengan kandungan yang dihasilkan oleh komputer.

Program memberi soalan atau masalah yang mesti diselesaikan oleh pengguna.

Page 60: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

60

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.5 Jenis Interaktiviti

Interaktiviti Reflektif

Merujuk kepada tindakbalas teks.

Perisian memberi jawapan kepada pengguna menggunakan jawapan yang telah dikumpul dari pengguna lain.

Perbandingan boleh dilakukan.

Interaktiviti Hyperlink

Pengguna diberi akses dan penerokaan terhadap kandungan perisian yang dibuat melalui konsep pautan.

Page 61: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

61

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.6 Kelebihan Interaktiviti

3.6.1 Peningkatan Tahap Produktiviti

Membantu kadar penyimpanan (retention) dan keselesaan pada sesuatu topik.

Pengguna boleh mencari maklumat dengan segera & menjimatkan masa.

3.6.2 Kadar Pembelajaran yang Lebih Tinggi

Interaksi dengan aplikasi multimedia mampu meningkatkan kadar pembelajaran.

Page 62: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

62

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.6 Kelebihan Interaktiviti

3.6.3 Kawalan Cara Pembelajaran

Membolehkan pengguna mengawal kandungan sesuatu aplikasi.

Pengguna boleh mencorak gaya pembelajarannya.

3.6.4 Mencapai Audien dan Pasaran yang Luas

Mempunyai potensi untuk mencapai audien yang luas pada satu-satu masa - penggunaan web

Boleh digunakan untuk meluaskan pasaran dan mencapai bilangan pengguna yang ramai. Cth: e-marketing

Page 63: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

63

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.7 Interaktiviti & Navigasi

Navigasi

Ciri penting pembangunan multimedia.

Berkait rapat dengan interaktiviti.

Membolehkan penggunaan aplikasi dengan lebih berkesan.

Kawalan Navigasi

Teknik interaktif yang digunakan di dalam aplikasi multimedia

Membantu pengemundian aplikasi multimedia.

Page 64: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

64

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.7 Interaktiviti & Navigasi

KAWALANNAVIGASI

1) Mengawal Jujukan Kandungan

2) Menyediakan Pautan Sejarah

3) Menyediakan Maklum balas Interaksi

4) Menyediakan Rujukan Silang

Page 65: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

65

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.8 Kawalan Navigasi

3.8.1 Mengawal Jujukan Kandungan

Butang-butang navigasi: “Next”, “Previous”, “Continue” membolehkan pengguna mengawal perjalanan aplikasi

3.8.2 Menyediakan Pautan Sejarah (history of links)

Membolehkan kita menjejaki skrin-skrin yang anda telah paut atau lawati

Menyediakan lompatan tidak linear ke mana-mana skrin yang telah dilawati sebelum ini.

Page 66: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

66

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.8 Kawalan Navigasi

3.8.3 Maklum Balas Interaksi Pengguna

Memberitahu pengguna hasil tindakannya,

Membantu mengukuhkan proses pembelajaran.

Maklum balas dalam bentuk tekstual / paparan gambar, fail bunyi / klip video.

3.8.4 Rujukan-Silang untuk Maklumat Berkaitan

Pengguna boleh mengelintar atau menerokai aplikasi untuk mendapatkanm maklumat yang diingini

Cth: penggunaan Kamus Elektronik

Page 67: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

67

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.8 Kawalan Navigasi

Struktur Asas Navigasi

Linear : Navigasi Secara Berjujukan antara bingkai

Hierarki : Navigasi secara bersturktur antara nod atas ke nod bawah.

Tidak Linear : Susunan Navigasi secara bebas.

Composite : Gabungan antara struktur navigasi yang lain

Page 68: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

68

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.9 Jenis Kawalan Navigasi

1) Menu Peta navigasi yang menyediakan

antaramuka utama untuk memulakan pengemudian.

Butang atau hypermedia di mana pengguna perlu mengklik untuk meneruskan navigasi.

MENU

Cth: Pull Down Menu

Page 69: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

69

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.9 Jenis Kawalan Navigasi

2) Butang Peralatan navigasi yang popular

di dalam kebanyakan aplikasi multimedia

Objek di atas skrin yang menghasilkan tindak balas apabila pengguna mengklik pada tetikus

BUTANG

Cth: Push Button

Page 70: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

70

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

3.9 Jenis Kawalan Navigasi

3) Hiperpaut Hiperpaut adalah kawalan

interaktif yang terdapat di dalam aplikasi multimedia

Kaedah yang lebih canggih untuk mencapai maklumat

Struktur pautan yang tidak linear: hiperteks dan hipermedia.

Hiperpaut

Page 71: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

71

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Rumusan

• Elemen interaktiviti dan navigasi merupakan ELEMEN PENTING dalam Multimedia

• Membantu PROSES PEMBELAJARAN dan meningkatkan kadar pemahaman pengguna.

• TANPA elemen-elemen ini sesebuah persembahan multimedia akan kelihatan PASIF DAN MEMBOSANKAN.

• Konsep interaktiviti juga akan membina satu IKATAN DI ANTARA PENGGUNA DENGAN APLIKASI

Page 72: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

72

UN

IT 1 UNIT 1

PEMBANGUNAN APLIKASI MULTIMEDIABAB 4Rekabentuk Antaramuka

Page 73: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

73

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.0 Pengenalan

Objektif• Memahami KEPENTINGAN REKABENTUK

antaramuka dalam Multimedia,

• Memahami 5 KRITERIA REKABENTUK antaramuka yang baik,

• Mengetahui 6 JENIS antaramuka dan 5 KOMPONEN antaramuka dlm Multimedia,

• Memahami 6 PRINSIP REKABENTUK antaramuka Multimedia,

Page 74: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

74

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.1 Definasi Antaramuka

Dix et al (1998) Interaksi manusia komputer menyediakan input yang sangat

penting di dalam rekabentuk pakej pembelajaran danmerupakan sebahagian penting daripada proses rekabentuk.

Johnson (1992)Antaramuka di antara pengguna dan komputer dan boleh

melibatkan perkakasan dan perisian.

Lewis dan Rieman (1993)Antaramuka pengguna yang asas sepatutnya termasuk perkara-perkara seperti menu, tetingkap, papan kekunci, tetikus, bunyi

beep dan bunyi lain yang dihasilkan oleh komputer.

Page 75: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

75

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.2 Kepentingan Antaramuka

Memudahkan & Melicinkan Proses Pembelajaran

Perubahan antara persekitaran manual ke komputer akan lebih mudah digunakan.

Gaya Pengemudian yang Bebas

Antaramuka meniru persekitaran semulajadi

Menyokong Kandungan dan Mesej

Sekiranya mesej dan kandungan tidak diurus dengan baik, sukar dijumpai, atau pengguna berasa bosan atau sesat: aplikasi anda akan gagal mencapai objektif pembangunannya.

Page 76: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

76

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.3 Kriteria Rekabentuk Antaramuka

4.3.1 Memahami Pengguna Sasaran

Perlulah bersesuaian dengan pengguna sasaran.

Oleh itu, keperluan pelanggan mesti dikenalpasti dengan tepat

4.3.2 Kenal Pasti Elemen-elemen yang Penting

Penggunaan elemen-elemen yang bersesuai

Pastikan aplikasi tidak terlalu sesak dengan elemen-elemen sehingga menyekat objektif aplikasi

Page 77: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

77

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.3 Kriteria Rekabentuk Antaramuka

4.3.3 Mengurangkan Ledakan Maklumat

Jumlah kandungan yang dipaparkan mesti seimbang dengan jumlah maklumat yang dapat diproses.

Pastikan kesederhanaan pada skrin antaramuka supaya maklumat dapat disampaikan dengan cepat.

4.3.4 Menyediakan Alternatif untuk Kawalan Antaramuka

Menyediakan shortcut atau kekunci alternatif pada kawalan antaramuka.

Memberikan pengawalan bebas kpd pengguna

4.3.5 Menampung Tahap Kepakaran Pengguna yang Berbagai

Aplikasi boleh digunakan oleh semua lapisan pengguna

Page 78: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

78

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.4 Jenis-Jenis Antaramuka

1) Antaramuka Bilik BeritaUntuk aplikasi yang menyampai Maklumat

2) Metafora PenceritaanUntuk aplikasi yang berunsurkan didikan dan mempunyai ciri hiburan

3) Pendekatan PermainanUntuk aplikasi yang bertemakan pengembaraan

4) Metafora BukuUntuk aplikasi yang membolehkan pengguna mengemundi aplikasi

5) Metafora Teknologi Tinggi

Aplikasi yang mempunyai tema yang sofistikated

6) Pendekatan MenuUntuk aplikasi yang berasaskan perkhidmatan pelanggan

Jenis-JenisAntaramuka

Page 79: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

79

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.5 Komponen Antaramuka

KomponenAntaramuka

Latar Belakang dan Tekstur

Rollover dan Slider

Butang, Ikondan Pikon

Maklum Balas

Hot Area, Highlight dan Menu

Page 80: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

80

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.5 Komponen Antaramuka

4.5.1 Latar Belakang dan Testur

Lapisan antaramuka yang paling asas

Menyediakan latar yang menarik untuk paparan kandungan.

Perlulah kelihatan menarik di mata pengguna.

Sebagai simbol visual kepada kandungan

Perlu sekata dengan skrin untuk membolehkan pengguna memberi tumpuan terhadap maklumat yang tertera pada skrin

Page 81: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

81

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.5 Komponen Antaramuka

4.5.2 Butang, Ikon dan Pikon

Merupakan PERALATAN NAVIGASI

Butang paling mudah direka dengan pelbagai bentuk dan saiz dan amat gemar digunakan.

Ikon adalah simbol visual kecil yang menunjukkan fungsi sesuatu bahagian yang diwakilinya.

Pikon ialah ikon bergambar yang boleh membawa maksud yang lebih abstrak.

Page 82: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

82

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.5 Komponen Antaramuka

4.5.3 Rollovers dan Sliders

Rollovers diaplikasikan kepada kursor yang diletakkan pada bahagian-bahagian yang telah ditentukan terlebih dahulu pada skrin dan menghasilkan reaksi multimedia yang berbeza.

Sliders memberi pengguna petanda tentang kedudukan semasa mereka di dalam aplikasi.

Page 83: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

83

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.5 Komponen Antaramuka

4.5.4 Hot Areas, Highlights dan Menu

Hot areas mungkin grafik atau teks dan boleh dibezakan dengan objek-objek lain yang tidak interaktif dengan warna atau perubahan yang berlaku pada kursor.

Menu merupakan alternatif kepada butang dan hot areas, dan ia boleh memuatkan lebih maklumat.

Page 84: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

84

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.5 Komponen Antaramuka

4.5.5 Maklum Balas

Maklum balas berfungsi untuk memberi pengguna reaksi terhadap tindakan pengguna pada komponen-komponen antaramuka.

Maklum balas boleh tercetus dengan mengklik butang, ikon, pikon, menu dan sebagainya dan boleh menghasilkan kesan bunyi, klip video, animasi atau skrin yang memaparkan maklumat.

Maklum balas boleh digunakan untuk menggalakkan pengguna untuk meneroka aplikasi dengan lebih lanjut.

Page 85: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

85

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.6 Prinsip Rekabentuk Antaramuka

Kedudukan

Seimbang&

Perspektif

Ruang putih Keseragaman

PenalNavigasi

yangKonsisten

Warna

PrinsipRekabentukAntaramuka

Page 86: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

86

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.6 Prinsip Rekabentuk Antaramuka

4.6.1 Kedudukan

Skrin selalunya dibahagikan kepada kawasan kandungan dan kawasan navigasi.

Ratio yang selalu digunakan oleh pereka ialah dua pertiga (2/3) untuk kandungan dan satu pertiga (1/3) untuk navigasi dan menu.

Pembahagian ini akan memberikan pengguna idea tentang apakah elemen pada skrin yang yang perlu diberi perhatian.

Page 87: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

87

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.6 Prinsip Rekabentuk Antaramuka

4.6.2 Seimbang dan Perspektif

Keseimbangan pada skrin merujuk kepada pengagihan nilai optikal = keupayaan elemen untuk menarik mata pengguna.

Perspektif menyediakan mata pengguna dengan posisi-posisi relatif sesuatu elemen pada skrin untuk menghalang skrin tersebut daripada menjadi ‘mendatar’.

Perspektif Belakang = untuk elemen yang kurang memerlukan fokus pengguna.

Perspektif Hadapan = untuk elemen yang memerlukan lebih fokus daripada pengguna

Page 88: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

88

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.6 Prinsip Rekabentuk Antaramuka

4.6.3 Ruang Putih

Merujuk kepada jumlah ruang putih yang diperuntukkan di antara teks dan grafik pada sesuatu muka surat.

Lebih banyak ruang putih di antara teks dan grafik, lebih mudah tumpuan yang boleh diberikan oleh pengguna.

Ruang putih sepatutnya digunakan juga untuk mengarah perhatian ke titik fokus sesuatu skrin.

Page 89: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

89

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.6 Prinsip Rekabentuk Antaramuka

4.6.4 Warna

Menggunakan warna adalah satu cara untuk membuatkan rekabentuk antaramuka anda lebih menarik.

Warna cerah dan terang adalah warna yang sering dipilih kerana warna-warna tersebut boleh merangsangkan otak supaya aktif

Pemilihan warna yang sesuai amat dititik-beratkan di dalam membina aplikasi

Cth: aplikasi permainan kerana sewaktu menggunakan aplikasi sebegini, pelajar biasanya mengikut gerak hati dan bermain dengan emosi.

Page 90: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

90

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.6 Prinsip Rekabentuk Antaramuka

4.6.5 Penal Navigasi yang Konsisten

Panel navigasi menyediakan pengguna dengan peralatan sokongan untuk membimbing pengguna mengemudi sesuatu skrin.

Panel navigasi perlu diletakkan di tempat yang konsisten di atas skrin untuk memudahkan pengguna melihatnya dengan segera dan menghubungkaitkan fungsi-fungsinya tanpa banyak masalah.

Page 91: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

91

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.6 Prinsip Rekabentuk Antaramuka

4.6.6 Keseragaman

Merujuk kepada kesepaduan pelbagai elemen yang terdapat pada skrin.

Keseragaman mengukuhkan mesej atau tema pada sesuatu skrin dan memberi konsisten pada keseluruhan aplikasi

Keseragaman boleh dicapai sekiranya bentuk, warna, gaya teks dan tema aplikasi adalah konsisten dan bersepadu.

Keseragaman melibatkan rekaan interaktif di mana pengguna mengemudi dari satu skrin ke skrin berikutnya.

Page 92: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

92

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.7 Ralat Dalam Rekabentuk Antaramuka

Antaramukayang kompleks

Interaktivitiyang terlalu

banyak

Maklumatyang tidakberkaitan

Tiada Kawalanuntuk Audio &

Video

Antaramukayang berwarna

ekstrim

Teks yangterlampau

banyak

Kesalahan Umumdalam RekabentukAplikasi Multimedia

Page 93: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

93

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.7 Ralat Dalam Rekabentuk Antaramuka

4.7.1 Antaramuka yang Kompleks

Terlalu banyak butang fungsi pada skrin antaramuka

Grafik yang kelihatan serupa dengan butang

Tiada butang kawalan yang sepatutnya menyebabkan pengguna sukar mengemundikan skrin

Page 94: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

94

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.7 Ralat Dalam Rekabentuk Antaramuka

4.7.2 Tahap Interaktiviti Terlalu Banyak

Tahap interaksi yang banyak menyebabkan pengguna sukar melayari aplikasi – pengguna boleh sesat dalam aplikasi.

Terjadi kerana tiada jalan balik ‘back’ ke program asal.

Penanda progres perlu disediakan utk mengatasi masalah ini

Page 95: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

95

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.7 Ralat Dalam Rekabentuk Antaramuka

4.7.3 Maklumat yang Tidak Berkaitan

Maklumat yang sesak dan tidak disusun secara teratur sehingga menyukar pengguna untuk memperolehinya.

Menyebabkan pengguna memperuntukkan banyak masa untuk mendapatkan sesuatu maklumat yang relaven

Cara atasi dengan menyediakan menu berhirarki untuk menguruskan maklumat.

Page 96: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

96

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.7 Ralat Dalam Rekabentuk Antaramuka

4.7.4 Teks yang Terlampau Banyak

Antaramuka yang padat dengan teks menyebabkan pengguna merasa bosan.

Cara atasi dengan letakkan grafik atau elemen lain bagi mengantikan elemen teks

Page 97: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

97

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.7 Ralat Dalam Rekabentuk Antaramuka

4.7.5 Antaramuka yang berwarna Ekstrim

Elakkan dari menggunakan warna yang terlalu ekstrim kerana akan mengganggu tumpuan pengguna terhadap maklumat yang dicapai

Penggunaan warna-warna harmoni amat digalakkan.

Perlu ada kesesuaian warna antara elemen-elemen yang digunakan.

Page 98: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

98

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

4.7 Ralat Dalam Rekabentuk Antaramuka

4.7.6 Tiada Kawalan untuk Audio dan Video

Jika memasukkan klip video ke dalam antaramuka aplikasi, pastikan kawalan untuk audio dan video diletakkan

Tujuannya supaya pengguna dapat mengawal kemasukan dan menggunakannya dengan senang.

Page 99: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

99

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

Kesimpulan

• Rekabentuk antaramuka bergrafik telah memudahkan interaksi antara manusia dengan komputer.

• Rekabentuk antaramuka adalah amat penting supaya pengguna dari semua lapisan masyarakat boleh menggunakan komputer dengan mudah.

• Rekabentuk antaramuka sepatutnya menjadi pelengkap dan menyokong cara pengguna memproses maklumat.

Page 100: Nota Multimedia

Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)

Fakulti Teknologi Maklumatdan Komunikasi Multimedia

100

Copyright © ODL Ja n 2 0 0 5 Open University Malaysia

T e rim a K a s ih