CBMP 2203 PEMBANGUNAN APLIKASI MULTIMEDIA CBMP 2203 OBJEKTIF

CBMP 2203 PEMBANGUNAN APLIKASI MULTIMEDIA

CBMP 2203 OBJEKTIF KURSUS Ke arah MERANCANG dan MEMBANGUNKAN sebuah aplikasi multimedia merangkumi 2 komponen utama: pemprosesan imej & pengarangan. Ia meliputi : q Pemahaman FASA pembangunan aplikasi multimedia q Teknik asas dalam 2 perisian PEMPROSESAN IMEJ untuk kesan imej grafik q Kemahiran 2 perisian PENGARANGAN untuk pembangunan aplikasi Multimedia 2

CBMP 2203 KAEDAH PENILAIAN q Kerja Kursus q q q Penglibatan online Tugasan X 1 Ujian X 2 q Peperiksaan q q 50% Bahagian A Bahagian B - 5% 20% 25% (final) 50% 20% 3

CBMP 2203 PERANCANGAN TUTORIAL Tutorial Aktiviti Masa T 1 - Overviu kursus - Perbincangan UNIT 1 / latihan / soalan tutorial - proses instalasi perisian di makmal - Perbincangan UNIT 2 – ADOBE PHOTOSHOP - UJIAN 1 - Perbincangan Tugasan - Perbincangan UNIT 2 – PAINT SHOP - Perbincangan UNIT 3 – MACR. DIRECTOR (Beg) - Perbincangan Tugasan - 10 m - 70 m - 40 m - 70 m - 30 m - 20 m - 60 m - 45 m - 15 m - - T 2 T 3 T 4 T 5 Perbincangan UNIT 3 MACR. DIRECTOR (Adv) UJIAN 2 Penyerahan tugasan Ulangkaji – UNIT 1 – 3 Bincang contoh 2 soalan exam Penyelarasan Borang TMA 80 30 10 45 45 30 m m m 4

UNIT 1 PEMBANGUNAN APLIKASI MULTIMEDIA

CBMP 2203 KOMPONEN UNIT 1 Proses Pembangunan Multimedia q Fasa pembangunan Multimedia q Perisian Pengarangan q Kepentingan Perisian pengarangan q Kriteria Pemilihan Perisian Pengarangan q Metafora Perisian pengarangan Perisian Pengarangan Multimedia Interaktif & Navigasi Rekabentuk Antaramuka q q Konsep / tahap / ciri / jenis / Interaktiviti Kelebihan Multimedia Interaktiviti & Navigasi Kawalan & jenis kawalan Navigasi q q q Definisi Antaramuka Pengguna Kepentingan Antaramuka Pengguna Kriteria Rekabentuk Antaramuka Jenis-jenis Antaramuka Komponen Antaramuka Prinsip Rekabentuk Antaramuka 6

UNIT 1 BAB 1 PROSES PEMBANGUNAN MULTIMEDIA

CBMP 2203 1. 0 PENGENALAN q. Objektif q Mengenalpasti BEBERAPA PENDEKATAN PEMBANGUNAN multimedia; q Memahami FASA DAN LANGKAH di dalam proses pembangunan multimedia q Mengenalpasti dan membandingkan JENIS SISTEM PENYEBARAN MULTIMEDIA yang terdapat di pasaran. 8

CBMP 2203 1. 1 PROSES PEM. MULTIMEDIA q Melibatkan fasa-fasa pembangunan dan langkah yang terlibat dalam setiap fasa. q Bermula dari perancangan sehingga pemasangan aplikasi. q Proses pembangunan mempunyai kitaran hayat tertentu – memastikan aplikasi sentiasa tersedia dan memenuhi keperluan semasa. q Langkah-langkah lazim: Pra-Produksi Pos Produksi 9

CBMP 2203 1. 1 PROSES PEM. MULTIMEDIA Rajah 1. 2: Model ADDIE Rajah 1. 1: Model Rekabentuk Instruksi Hannafin & Peck q Model Rekabentuk: 10

CBMP 2203 1. 2 FASA PEM. MULTIMEDIA Rajah 1. 3: Fasa Pembangunan Multimedia ah k g lan - La h ka ng Papan Cerita Spesifikasi Pengujian Pengarangan Isi kansungan Cara Perlaksanaan Kenalpasti Pengguna Pernyataan Tujuan Pembangunan Konsep Fasa 1 Perancangan Fasa 2 Penghasilan Fasa 3 Pengujian 11

CBMP 2203 1. 3 Fasa 1: Perancangan Rajah 1. 3: Fasa Pembangunan Multimedia Papan Cerita h gka lan h ka g n La Spesifikasi Cara Perlaksanaan Kenalpasti Pengguna Pernyataan Tujuan Pembangunan Konsep Fasa 1 Perancangan 12

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 1 Pembangunan Konsep q. Konsep berasaskan idea q. Mesti selari dengan tujuan, kesauran, kos produksi dan penyebaran projek multimedia q. Proses menjana sebuah idea adalah: q sesi brainstorming; q melukis / melakar pada kertas q Cara formal seperti: senarai semak beserta kriteria penilaian. 13

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 1 Pembangunan Konsep (smb) q Idea digunakan untuk menetapkan visi q Perlu dinyatakan dengan jelas, boleh diukur dan mempunyai objektif-objektif yang boleh dicapai. q Perlu ada garis panduan yang tersusun dan merancang dengan rasional meliputi: q kepakaran, masa, belanja, peralatan dan sumber yang ada pada ketika itu. q Rancang keseluruhan proses bermula dengan idea pertama anda dan berakhir dengan projek yang telah siap untuk penyebaran. 14

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 2 Pernyataan Tujuan q Menentukan matlamat & objektif dengan terperinci Matlamat adalah suatu pernyataan yang luas mengenai apa yang akan dicapai Objektif - suatu pernyataan yang lebih tepat & spesifik. q Matlamat dan objektif membantu menentukan hala tuju proses pembangunan aplikasi multimedia q Boleh digunakan untuk menilai kesesuaian sesebuah aplikasi multimedia sewaktu dan selepas ianya dibangunkan. 15

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 3 Kenalpasti Pengguna Sasaran q Profailpengguna perlu difahami bagi emmastikan aplikasi yang dihasilkan memenuhi keperluan dan kehendak pengguna q Pengguna atau audien boleh diterangkan dengan banyak cara seperti menurut faktor demografik , juga gaya hidup dan tingkah laku seseorang. q Pembangun perlu analisa profail pengguna dan menggunakan maklumat tersebut untuk membangunkan aplikasi yang berjaya memenuhi kehendak pengguna. 16

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 4 Penentuan Cara perlaksanaan q. Konsep; objektif; sasaran pengguna; menentukan gaya persembahan aplikasi. q. Komponen yang perlu ditentukan: q Ton q Pendekatan q Metafora q Penekanan 17

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 4 Penentuan Cara perlaksanaan (smb) q. Ton q Memilih ton yang sesuai dengan objektif dan konsep aplikasi q Dipengaruhi oleh elemen-elemen media yang digunakan q. Pendekatan q Langkah atau arahan yang disediakan kepada pengguna q Perlulah sesuai dengan konper dan sasaran pengguna 18

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 4 Penentuan Cara perlaksanaan (smb) q. Metafora q Merujuk kepada peta imej istimewa – menggunakan imej dalam konteks yang lebih bermakna. q Informasi disembahkan dalam bentuk objek. q Sering digunakan pada antaramuka utama q. Penekanan q Penekanan dipertimbangkan apabila berlaku kengkangan masa, kewangan, sumber dll. 19

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 5 Pembangunan Spesifikasi q Spesifikasi merujuk kepada: q spefikasi perkakasan dan spefikasi perisian. q Tujuan: - memastikan aplikasi yang dibangunkan memenuhi objektif dan menepati kehendak pengguna sasaran. q Elemen dalam spesisfikasi ialah perkakasan untuk sistem pembangunan dan sistem penyebaran (sistem main semula), perisian, elemen yang akan dimasukkan, kebolehfungsian dan antaramuka pengguna. 20

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 5 Pembangunan Spesifikasi (smb) Elemen Spesifikasi: q Perkakasan berkeupayaan tinggi yang mampu menyokong elemen multimedia q Sistem Pembangunan q Elemen yang dimasukkan q Spesifikasi lengkap bagi setiap elemen yang kita masukkan q Kebolehfungsian q Bagaimana aplikasi bertindak balas dengan pengguna Perkakasan pembangunan yang digunakan: Sis. Penyebaran & Sis. q Antaramuka pengguna Pengarangan q Rekabentuk objek pasa skrin q Sistem Penyebaran dan berinteraksi dengan pengguna q Digunakan oleh pengguna akhir utk memainkan aplikasi q 21

CBMP 2203 1. 3 Fasa 1: Perancangan 1. 3. 6 Papan Cerita q. Papan cerita mewakili: q apa yang kita lihat pada setiap skrin dan q Perhubungan antara skrin-skrin q. Tujuan q Membantu Pembangun merancang dan mengendalikan proses pembangunan. q Membolehkan Pembangun menguji keseluruhan konsep secara gambaran visual. q Memudahkan komunikasi secara visual antara pembangun- pengguna 22

CBMP 2203 1. 4 Fasa 2: Penghasilan Rajah 1. 3: Fasa Pembangunan Multimedia Pengarangan Isi kansungan Fasa 2 Penghasilan 23

CBMP 2203 1. 4 Fasa 2: Penghasilan 1. 4. 1 Pembangunan isi kandungan q. Isi kandungan merupakan maklumat atau bahan-bahan yang membentuk jantung sesebuah projek yang dibangunkan. q. Pembangunan isi kandungan melibatkan: q Proses pengumpulan, q Proses penterjemahan, dan q Proses Pengubahsuaian elemen-elemen yang digunakan di dalam aplikasi yg dibangunkan. 24

CBMP 2203 1. 4 Fasa 2: Penghasilan 1. 4. 1 Pembangunan isi kandungan Pengumpulan Elemen A K T I V I T I ü Pemilihan media atau bahan yang akan digu ü Cara: Mendapatkan bahan luar; menggunak yang baru atau upah pakar grafik ü Pengumpulan elemen-elemen multimedia bu malah ia memerlukan perancangan yang rap Penterjemahan & Pengubahsuaian Elemen ü Mengubah format elemen kepada format yang Cth: Format analog kepada Digital ü Tujuan Terjemahan: memastikan elemen bole Pengarangan ü Proses Pengubahsuaian: Proses manipulasi un menarik kepada elemen multimedia. (cth: peng 25

CBMP 2203 1. 4 Fasa 2: Penghasilan 1. 4. 2 Pengarangan q. Dilakukan selepas pembangunan spesifikasi dan papan cerita telah disempurnakan. q. Proses pengarangan melibatkan pengintegrasian semua bahan-bahan media. q. Elemen interaktiviti dimasukkan pada peringkat ini. Elemen ini akan mengeratkan lagi perhubungan antara aplikasi – pengguna 26

CBMP 2203 1. 5 Fasa 3: Pengujian Fasa 3 Pengujian q. Menguji aplikasi yang telah siap dibina bagi memastikan ia telah memenuhi matlamat pembangunan. q. Pengujian merupakan proses yang berterusan dan boleh bermula di peringkat pembangunan konsep lagi. qmemastikan aplikasi yg dibangunkan bebas daripada pepijat, tepat, beroperasi, mengikut peruntukan masa dan kehendak pelanggan 27

CBMP 2203 1. 5 Fasa 3: Pengujian Proses Pengujian q. Pengujian Alfa Ujian secara dalaman tanpa melibatkan orang luar. q Ia Cuma untuk edaran dalaman sahaja. q Versi produk untuk pengujian alfa biasanya merupakan draf kerja pertama projek anda. q q. Pengujian Beta Pengujian dengan pengguna sebenar q Tujuian: untuk mendapat maklum balas yang sebanyak mungkin daripada pengguna berpotensi terhadap prestasi sebenar aplikasi q 28

CBMP 2203 1. 6 Penyebaran q. Penyebaran merupakan proses penyerahan aplikasi kepada pengguna. q. Aplikasi yang dibangunkan sedia disebarkan dalam pelbagai cara: Online, CD-ROM, DVD q. Format penyebaran berbeza mengikut jenis penyebaran aplikasi yang dipilih. q. Format penyebaran yang berbeza mempunyai teknik, kepakaran, dan kandungan yang berbeza. q. Cth: Utk aplikasi elemen video sesuai menggunakan format penyebaran CD / DVD berbanding format online. 29

CBMP 2203 1. 6 Penyebaran Aktiviti Penyebaran Sistem Penyebaran Multimedia 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. Penyediaan Utk Penyebaran ü Melibatkan penyediaan fail, storan, perkakasan u Aplikasi dipasang pada persekitaran pengguna ü Terdapat program yang berfungsi sebagai rutin membolehkan aplikasi dilarikan secara automa pengguna. Cth: Installer Vise; Installer. Maker ü Penyediaan dokumentasi dan manual pengguna ü Penyediaan khidmat layanan pelanggan dan sok 30

CBMP 2203 RUMUSAN q Proses pembangunan aplikasi multimedia adalah rumit, mahal dan memakan masa yang lama. q Oleh itu pastikan proses perancangan amat penting dan dirujuk di sepanjang proses pembangunan. q Peruntukkan Proses Pem. Multimedia: 80 % perancangan dan 20% penghasilan. q 2 langkah utama yang memberi fokus terhadap penghasilan / pembangunan: Pembangunan Isi Kandungan & Pengarangan. q Proses pembangunan yang rapi merupakan faktor kejayaan sesuatu projek. 31

UNIT 1 BAB 2 PERISIAN PENGARANGAN MULTIMEDIA

CBMP 2203 2. 0 PENGENALAN q. Objektif q Memahami KEPENTINGAN Perisian pengarangan dalam Multimedia. q Memahami 6 KRITERIA PEMILIHAN Perisian Pengarangan q Memahami 4 METAFORA Perisian Pengarangan 33

CBMP 2203 2. 1 DEFINISI PENGARANGAN Dari Konteks Multimedia Pengarangan membawa pengertian satu ciptaan atau hasil kreativiti minda seseorang dalam proses yang menggabungkan teks, grafik, animasi, audio dan video untuk mencipta suatu aplikasi Multimedia dalam format CD-ROM, laman web, kiosks dan sebagainya. 34

CBMP 2203 2. 1 DEF. PERISIAN PENGARANGAN Larry dan Nancy (1995) Perisian yang membolehkan aplikasi-aplikasi multimedia dicipta dengan m’gabungkan bunyi, pergerakan, grafik, audio, video dan teks ke dalam sesuatu perisian. Mc. Gloughin (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. 35

CBMP 2203 2. 2 DEF. PERISIAN PENGARANGAN Pakej perisian yang membenarkan anda mengumpul dan mengintegrasi elemen media ke dalam suatu aplikasi multimedia. Istilah ‘pengarangan’ atau ‘penggubah’ digunakan kerana anda dianggap sebagai pengarang untuk aplikasi berkenaan. 36

CBMP 2203 2. 3 Kepentingan Perisian Pengarangan q Menjimatkan masa dalam menghasilkan suatu aplikasi yang sofistikated. q Membolehkan integrasi atau kesepaduan teks, audio, video dan animasi ke dalam persembahan interaktif. q Membolehkan aplikasi multimedia dibangunkan tanpa kemahiran & pengalaman pengaturcaraan yang kompleks. q Menyediakan persekitaran bersepadu bagi menghubungkan semua isi kandungan dan fungsi sebuah aplikasi yang ingin dibangunkan. 37

CBMP 2203 2. 4 Kriteria Pemilihan Per. Pengarangan q Menyokong Fitur Mengedit: peralatan mengedit elemen-elemen multimedia: grafik, animasi, teks, audio digital, video. q Cth: Adobe Photoshop q Membantu anda menyusun atau mengorganisasi projek multimedia. q Rajah atau diagram papan cerita dan navigasi digunakan utk mewakili aplikasi q Cth: Macromedia Athorwere q Interaktiviti membenarkan pengguna mempunyai kawalan sepenuhnya ke atas kandungan dan aliran maklumat di dalam aplikasi tersebut. 38

CBMP 2203 2. 4 Kriteria Pemilihan Per. Pengarangan q Boleh dimainkan pada kedua-dua persekitaran Macintosh dan Windows. q Macintosh: sesuai sebagai platform pembangun q Windows: sesuai sebagai platform pengguna q Memandangkan Web telah menjadi medium penyebaran multimedia yang penting, pastikan aplikasi yang dibangunkan boleh disebarkan pada Internet. q Menyokong fitur penyebaran dengan menyediakan kemudahan penyediaakn versi run-time. q Versi run-time membolehkan pengguna mencapai aplikasi tanpa dapat mengubah kandungan. q Lebih mudah fitur penyebaran; lebih meluas pasaran 39

CBMP 2203 2. 5 Pengarangan VS P’aturcaraan Perisian Pengarangan Perisian Pengaturcaraan q Boleh digunakan untuk aplikasi multimedia. q Punyai peralatan tahap tinggi. rendah. q Pembangun mesti membangunkan aplikasi mempunyai pengetahuan tanpa pengetahuan pengaturcaraan q Capaian fungsi yang terhad q Capaian fungsi yang banyak q Pembangun hanya memilih q Pembangun boleh arahan utk diberikan mengarah komputer untuk kepada sistem komputer laksanakan apa-apa tugas daripada set yang terhad. yang diingini. q Masa pembangunan – cepat q Masa pembangunan – lama q Saiz aplikasi agak besar q Saiz aplikasi lebih kecil 40

CBMP 2203 2. 6 METAFORA PER PENGARANGAN q METAFORA digunakan utk mengurus dan menyusun jujukan elemen 2 Multimedia. q Perisian Pengarangan Multimedia dibahagikan kepada 4 kategori utama berdasarkan METAFORA. Metafora Berasaskan tatasusunan Kad / Lembaran Buku Metafora Berasaskan Ikon Metafora Berasaskan Masa Metafora Berasaskan Ikon Persembahan Slaid 41

CBMP 2203 2. 6 METAFORA PER PENGARANGAN 2. 6. 1 Metafora Berasaskan Tatasusunan q. Beroperasi berdasarkan tatasusunan kad / lembaran buku. q. Imej-imej grafik disusun dalam bentuk jujukan logikal atau mengumpulnya mengikut bab dan lembaran buku atau kad di dalam kad katalog. q. Cth: Hyper. Card, Hyper. Studio dan Asymetrix Tool. Book 42

CBMP 2203 2. 6 METAFORA PER PENGARANGAN 2. 6. 1 Metafora Berasaskan Ikon q. Menggunakan konsep carta alir untuk menghasilkan peta hubungkait antara elemen multimedia. q. Menggunakan pendekatan pengaturcaraan visual untuk menyusun dan mempersembahkan multimedia. q. Cth: Macromedia Authorware, Icon Author, 43

CBMP 2203 2. 6 METAFORA PER PENGARANGAN 2. 6. 1 Metafora Berasaskan Masa q. Berasaskan frame atau movie q. Objek 2 disusun di sepanjang garis masa. q. Sesuai digunakan untuk pembinaan animasi. q. Mengandungi set fitur-fitur yang luas untuk menghasilkan persembahan multimedia, animasi dan aplikasi interaktif multimedia. q. Cth: Macromedia Director / Flash 44

CBMP 2203 2. 6 METAFORA PER PENGARANGAN 2. 6. 1 Metafora Berasaskan Slaid q. Berasaskan persembahan slaid atau slide show q. Kelebihan: boleh digunakan pada kedua-dua persekitaran Windows dan juga persekitaran Macintosh. q. Cth: Power. Point 45

CBMP 2203 KESIMPULAN q Terdapat pelbagai jenis perisian pengarangan yang boleh digunakan untuk membangun pelbagai jenis aplikasi multimedia yang canggih dalam pelbagai bidang. q Pemilihan perisian pengarangan yang sesuai dalam pembangunan aplikasi multimedia adalah penting. q Pembangun aplikasi multimedia tidak semestinya memilih perisian pengarangan yang mahal lagi kompleks. q Pelbagai jenis pengarangan yang mudah diperolehi dengan percuma atau dengan harga yang murah boleh digunakan dalam pembangunan aplikasi multimedia. 46

UNIT 1 BAB 3 INTERAKTIVITI DAN NAVIGASI

CBMP 2203 3. 0 PENGENALAN q. Objektif q Memahami KONSEP DAN KEPENTINGAN Interaktiviti dan Navigasi dalam Multimedia. q Memahami 3 TAHAP & 7 CIRI Interaktiviti yang terdapat dalam Multimedia q Mengetahui FUNGSI dan JENIS KAWALAN Navigasi yang digunakan dalam Multimedia 48

CBMP 2203 3. 1 DEFINISI 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 untuk mengawal persekitarannya dengan menggunakan komputer. 49

CBMP 2203 3. 1 DEFINISI 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…” 50

CBMP 2203 3. 2 KONSEP INTERAKTIVITI q. Interaktiviti: elemen Multimedia yang dianggap sebagai jantung kpd aplikasi multimedia. q. Interaktiviti ini dikenali sebagai multimedia tidak linear. q. Ciri interaktiviti ini telah menjadikan multimedia lebih popular berbanding komponen media yang lain. 51

CBMP 2203 3. 3 TAHAP INTERAKTIVITI (i) Interaktiviti Tahap Rendah (Navigasi) q. Tahap interaktiviti yang paling asas. q. Interaksi difokuskan kepada tugas menavigasi perisian menerusi klik butang, arahan menu atau pautan. q. Pengguna hanya mengawal sebahagian kecil perisian. 52

CBMP 2203 3. 3 TAHAP INTERAKTIVITI (ii) Interaktiviti Tahap Pertengahan (Fungsian) q. Pada tahap ini, pengguna berinteraksi dengan sistem / perisian untuk mencapai suatu matlamat. q. Interaktiviti dibentuk berdasarkan fungsian iaitu apakah fungsi perisian itu dibangunkan. q. Sepanjang interaksi, pengguna akan diberikan maklumbalas di atas capaian mereka 53

CBMP 2203 3. 3 TAHAP INTERAKTIVITI (iii) Interaktiviti Tahap Tinggi (Adaptif) q. Tahap interaktiviti yang paling tinggi. q. Interaktiviti dibentuk berdasarkan fungsi adaptif iaitu kebolehan perisian untuk menyesuaikan pengguna dengan kemampuan mereka. q. Pengguna diberikan kuasa yang lebih untuk mengawal perisian dan boleh berinteraksi dengan perisian secara langsung. 54

CBMP 2203 3. 4 CIRI INTERAKTIVITI (i)Tindak balas Yang Segera (ii) Capaian Maklumat Yang Tidak Berjujukan CIRI-CIRI INTERAKTIF (iii) Maklum balas Pantas (iv) Kesesuaian (v) Pilihan (vi) Kawalan Pengguna (vii) Grain-Size 55

CBMP 2203 3. 4 CIRI INTERAKTIVITI (i) Tindak balas Yang Segera q Pengguna boleh mencapai maklumat seperti grafik, video atau teks dengan hanya mengklik pada tetikus. q Masa tindak balas pantas. (ii) Capaian Maklumat Yang Tidak Berjujukan q Maklumat boleh dicapai oleh pengguna mengikut kehendak mereka dan tidak perlu berjujukan. (iii) Maklum balas Yang Pantas q Interaktiviti tidak akan wujud tanpa maklum balas q Maklum balas seperti “Betul”! dan “Salah!” tidak mencukupi - pengguna perlu tahu bagaimana untuk memperbaiki kesilapan dan meneruskan program 56

CBMP 2203 3. 4 CIRI INTERAKTIVITI (iv) Kesesuaian q Perisian mempunyai kebolehan untuk mengubahsuai tindakannya mengikut tahap pengetahuan pengguna. (v) Pilihan q Perisian akan menyediakan banyak pilihan: Pengguna bebas membuat pilihan mereka (vi) Kawalan Pengguna q Pengguna berkuasa mengawal sebahagian dari program q Boleh meningkatkan motivasi pengguna. (vii) Grain-Size q Masa yang diperlukan oleh perisian bagi setiap interaksi pengguna. q Jika masa menunggu terlalu lama pengguna akan merasa bosan dan interaktiviti menjadi kurang. 57

CBMP 2203 3. 5 JENIS INTERAKTIVITI Interaktiviti Objek q Objek - butang, manusia dan benda dalam perisian diaktifkan apabila input diterima untuk tindakbalas. Interaktiviti Linear q Fungsi yang membenarkan pengguna bergerak ke depan / ke belakang dalam suatu jujukan linear. Interaktiviti Hierarki q Perisian memberikan pengguna set-set pilihan yang telah ditetapkan - pengguna boleh memilih laluan yang spesifik untuk mengakses kandungan 58

CBMP 2203 3. 5 JENIS INTERAKTIVITI Interaktiviti Sokongan q Pengguna dibekalkan dengan pelbagai jenis bantuan ‘help’ sokongan dan mesej, dari yang ringkas kepada yang sangat rumit. Interaktiviti Kemaskini q Komponen perisian yang memulakan dialog antara pengguna dengan kandungan yang dihasilkan oleh komputer. q Program memberi soalan atau masalah yang mesti diselesaikan oleh pengguna. 59

CBMP 2203 3. 5 JENIS INTERAKTIVITI Interaktiviti Reflektif q Merujuk kepada tindakbalas teks. q Perisian memberi jawapan kepada pengguna menggunakan jawapan yang telah dikumpul dari pengguna lain. q Perbandingan boleh dilakukan. Interaktiviti Hyperlink q Pengguna diberi akses dan penerokaan terhadap kandungan perisian yang dibuat melalui konsep pautan. 60

CBMP 2203 3. 6 KELEBIHAN INTERAKTIVITI 3. 6. 1 Peningkatan Tahap Produktiviti q. Membantu kadar penyimpanan (retention) dan keselesaan pada sesuatu topik. q. Pengguna boleh mencari maklumat dengan segera & menjimatkan masa. 3. 6. 2 Kadar Pembelajaran yang Lebih Tinggi q. Interaksi dengan aplikasi multimedia mampu meningkatkan kadar pembelajaran. 61

CBMP 2203 3. 6 KELEBIHAN INTERAKTIVITI 3. 6. 3 Kawalan Cara Pembelajaran q Membolehkan pengguna mengawal kandungan sesuatu aplikasi. q Pengguna boleh mencorak gaya pembelajarannya. 3. 6. 4 Mencapai Audien dan Pasaran yang Luas q Mempunyai potensi untuk mencapai audien yang luas pada satu-satu masa- penggunaan web q Boleh digunakan untuk meluaskan pasaran dan mencapai bilangan pengguna yang ramai. Cth: emarketing 62

CBMP 2203 3. 7 INTERAKTIVITI & NAVIGASI Navigasi q. Ciri penting pembangunan multimedia. q. Berkait rapat dengan interaktiviti. q. Membolehkan penggunaan aplikasi dengan lebih berkesan. Kawalan Navigasi q. Teknik interaktif yang digunakan di dalam aplikasi multimedia q. Membantu pengemundian aplikasi multimedia. 63

CBMP 2203 3. 7 INTERAKTIVITI & NAVIGASI 1) Mengawal Jujukan Kandungan 3) Menyediakan Maklumbalas Interaksi 2) Menyediakan Pautan Sejarah KAWALAN NAVIGASI 4) Menyediakan Rujukan Silang 64

CBMP 2203 3. 8 KAWALAN NAVIGASI 3. 8. 1 Mengawal Jujukan Kandungan q Butang-butang navigasi: “Next”, “Previous”, “Continue” membolehkan pengguna mengawal perjalanan aplikasi 3. 8. 2 Menyediakan Pautan Sejarah (history of links) q Membolehkan kita menjejaki skrin-skrin yang anda telah paut atau lawati q Menyediakan lompatan tidak linear ke mana-mana skrin yang telah dilawati sebelum ini. 65

CBMP 2203 3. 8 KAWALAN NAVIGASI 3. 8. 3 Maklum Balas Interaksi Pengguna q Memberitahu pengguna hasil tindakannya, q Membantu mengukuhkan proses pembelajaran. q Maklum balas dalam bentuk tekstual / paparan gambar, fail bunyi / klip video. 3. 8. 4 Rujukan-Silang untuk Maklumat Berkaitan q Pengguna boleh mengelintar atau menerokai aplikasi untuk mendapatkanm maklumat yang diingini q Cth: penggunaan Kamus Elektronik 66

CBMP 2203 3. 8 KAWALAN NAVIGASI Linear: Navigasi Secara Berjujukan antara bingkai Hierarki: Navigasi secara berstruktur antara nod atas ke nod bawah. Tidak Linear: Susunan Navigasi secara bebas. Composite: Gabungan antara struktur navigasi yang lain: . Struktur Asas Navigasi 67

CBMP 2203 3. 9 JENIS KAWALAN NAVIGASI 1) Menu NU ME Ø Peta navigasi yang menyediakan antaramuka utama untuk memulakan pengemudian. Ø Butang atau hypermedia di mana pengguna perlu mengklik untuk meneruskan navigasi. Cth: Pull Down Menu => 68

CBMP 2203 3. 9 JENIS KAWALAN NAVIGASI 2) Butang NG A BUT Ø Peralatan navigasi yang popular di dalam kebanyakan aplikasi multimedia Ø Objek di atas skrin yang menghasilkan tindak balas apabila pengguna mengklik pada tetikus Cth: Push Button => 69

CBMP 2203 3. 9 JENIS KAWALAN NAVIGASI 3) Hiperpaut Ø Hiperpaut adalah kawalan interakitf yang terdapat di dalam aplikasi multimedia Ø kaedah yang lebih canggih untuk mencapai maklumat. Ø Struktur pautan tidak linear: hiperteks dan hipermedia. R HIPE T PAU 70

CBMP 2203 RUMUSAN q. Elemen interaktiviti dan navigasi merupakan ELEMEN PENTING dalam Multimedia q. Membantu PROSES PEMBELAJARAN dan meningkatkan kadar pemahaman pengguna. q. TANPA elemen-elemen ini sesebuah persembahan multimedia akan kelihatan PASIF DAN MEMBOSANKAN. q. Konsep interaktiviti juga akan membina satu IKATAN DI ANTARA PENGGUNA DENGAN APLIKASI 71

UNIT 1 BAB 4 REKABENTUK ANTARAMUKA

CBMP 2203 4. 0 PENGENALAN q. Objektif q Memahami KEPENTINGAN REKABENTUK antaramuka dalam Multimedia, q Memahami 6 KRITERIA REKABENTUK antaramuka yang baik, q Mengetahui 5 JENIS antaramuka dan 5 KOMPONEN antaramuka dlm Multimedia, q Memahami 6 PRINSIP REKABENTUKantaramuka Multimedia, 73

CBMP 2203 4. 1 DEFINNISI ANTARAMUKA Dix et al (1998) Interaksi manusia komputer menyediakan input yang sangat penting di dalam rekabentuk pakej pembelajaran dan merupakan 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. 74

CBMP 2203 4. 2 KEPENTINGAN ANTARAMUKA Memudahkan & Melicinkan Proses Pembelajaran q Perubahan antara persekitaran manual ke komputer akan lebih mudah digunakan. Gaya Pengemundian yang Bebas q Antaramuka meniru persekitaran semulajadi Menyokong Kandungan dan Mesej q Sekiranya mesej dan kandungan tidak diurus dengan baik, sukar dijumpai, atau pengguna berasa bosan atau sesat: aplikasi anda akan gagal mencapai objektif pembangunannya. 75

CBMP 2203 4. 3 KRITERIA R/B ANTARAMUKA 4. 3. 1 Memahami Pengguna Sasaran q Perlulah bersesuaian dengan pengguna sasaran. q Oleh itu keperluan pelanggan mesti dikenalpasti dengan tepat 4. 3. 2 Kenal Pasti Elemen-elemen yang Penting q Penggunaan elemen-elemen yang bersesuai q Pastikan aplikasi tidak terlalu sesak dengan elemen sehingga menyekat objektif aplikasi 76

CBMP 2203 4. 3 KRITERIA R/B ANTARAMUKA 4. 3. 3 Mengurangkan Ledakan Maklumat q Jumlah kandungan yang dipaparkan mesti seimbang dengan jumlah maklumat yang dapat diproses. q Pastikan kesederhanaan pada skrin antaramuka supaya maklumat dapat disampaikan dengan cepat. 4. 3. 4 Menyediakan Alternatif untuk Kawalan Antaramuka q Menyediakan shortcut atau kekunci alternatif pada kawalan antaramuka. q Memberikan pengawalan bebas kpd pengguna 4. 3. 5 Menampung Tahap Kepakaran Pengguna yang Berbagai q Aplikasi boleh digunakan oleh semua lapisan pengguna 77

CBMP 2203 4. 4 JENIS-JENIS ANTARAMUKA 4) Metafora Buku 1) Antaramuka Bilik Berita - Utk aplikasi yang membolehkan pengguna mengemundi aplikasi - Utk aplikasi yang menyampaikan maklumat 2) Metafora Penceritaan - Utk aplikasi yang berunsurkan didikan dan mempunyai ciri hiburan JENIS ANTARA MUKA 3) Pendekatan Permainan - Utk aplikasi yang bertemakan pengembaraan 5) Metafora Teknologi Tinggi - Aplikasi yang mempunyai tema yang sofistikated 6) Pendekatan Menu - Untuk aplikasi yang berasaskan perkhidmatan pelanggan 78

CBMP 2203 4. 5 KOMPONEN ANTARAMUKA Butang, Ikon Dan Pikon Latar Belakang Dan Tekstur KOMPONEN ANTARAMUKA Rollover & Slider Maklum Balas Hot Area, Highlight dan Menu 79

CBMP 2203 4. 5 KOMPONEN ANTARAMUKA 4. 5. 1 Latar Belakang dan Tekstur q Lapisan antaramuka yang paling asas q Menyediakan latar yang menarik untuk paparan kandungan. q Perlulah kelihatanmenarik di mata pengguna. q Sebagai simbol visual kepada kandungan q Perlu sekata dengan skrin untuk membolehkan pengguna memberi tumpuan terhadap maklumat yang tertera pada skrin 80

CBMP 2203 4. 5 KOMPONEN ANTARAMUKA 4. 5. 2 Butang, Ikon dan Pikon q Merupakan PERALATAN NAVIGASI q Butang paling mudah direka dengan pelbagai bentuk dan saiz dan amat gemar digunakan. q Ikon adalah simbol visual kecil yang menunjukkan fungsi sesuatu bahagian yang diwakilinya. q Pikon ialah ikon bergambar yang boleh membawa maksud yang lebih abstrak. 81

CBMP 2203 4. 5 KOMPONEN ANTARAMUKA 4. 5. 3 Rollovers dan Sliders q Rollovers diaplikasikan kepada kursor yang diletakkan pada bahagian-bahagian yang telah ditentukan terlebih dahulu pada skrin dan menghasilkan reaksi multimedia yang berbeza. q Sliders memberi pengguna petanda tentang kedudukan semasa mereka di dalam aplikasi. 82

CBMP 2203 4. 5 KOMPONEN ANTARAMUKA 4. 5. 4 Hot Areas, Highlights dan Menu q Hot areas mungkin grafik atau teks dan boleh dibezakan dengan objek-objek lain yang tidak interaktif dengan warna atau perubahan yang berlaku pada kursor. q Menu merupakan alternatif kepada butang dan hot areas, dan ia boleh memuatkan lebih maklumat. 83

CBMP 2203 4. 5 KOMPONEN ANTARAMUKA 4. 5. 5 Maklum Balas q Maklum balas berfungsi untuk memberi pengguna reaksi terhadap tindakan pengguna pada komponen -komponen antaramuka. q 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. q Maklum balas boleh digunakan untuk menggalakkan pengguna untuk meneroka aplikasi dengan lebih lanjut. 84

CBMP 2203 4. 6 PRINSIP R/B ANTARAMUKA Kedudukan Seimbang & Perspektif Ruang Putih PRINSIP REKABENTUK ANTARAMUKA Warna Keseragama n Panel Navigasi Yang Konsisten 85

CBMP 2203 4. 6 PRINSIP R/B ANTARAMUKA 4. 6. 1 Kedudukan q Skrin selalunya dibahagikan kepada kawasan kandungan dan kawasan navigasi. q Ratio yang selalu digunakan oleh pereka ialah dua pertiga (2/3) untuk kandungan dan satu pertiga (1/3) untuk navigasi dan menu. q Pembahagian ini akan memberikan pengguna idea tentang apakah elemen pada skrin yang perlu diberi perhatian. 86

CBMP 2203 4. 6 PRINSIP R/B ANTARAMUKA 4. 6. 2 Seimbang dan Perspektif q Keseimbangan pada skrin merujuk kepada pengagihan nilai optikal = keupayaan elemen untuk menarik mata pengguna. q Perspektif menyediakan mata pengguna dengan posisi relatif sesuatu elemen pada skrin untuk menghalang skrin tersebut daripada menjadi ‘mendatar’. q Perspektif Belakang = untuk elemen yang kurang memerlukan fokus pengguna. q Perspektif Hadapan = untuk elemen yang memerlukan lebih fokus daripada pengguna 87

CBMP 2203 4. 6 PRINSIP R/B ANTARAMUKA 4. 6. 3 Ruang Putih q Merujuk kpd jumlah ruang putih yang diperuntukkan di antara teks dan grafik pada sesuatu muka surat. q Lebih banyak ruang putih di antara teks dan grafik, lebih mudah tumpuan yang boleh diberikan oleh pengguna. q Ruang putih sepatutnya digunakan juga untuk mengarah perhatian ke titik fokus sesuatu skrin. 88

CBMP 2203 4. 6 PRINSIP R/B ANTARAMUKA 4. 6. 4 Warna q Menggunakan warna adalah satu cara untuk membuatkan rekabentuk antaramuka anda lebih menarik. q Warna cerah dan terang adalah warna yang sering dipilih kerana warna-warna tersebut boleh merangsangkan otak supaya aktif q Pemilihan warna yang sesuai amat dititik beratkan di dalam membina aplikasi q Cth: aplikasi permainan kerana sewaktu menggunakan aplikasi sebegini, pelajar biasanya mengikut gerak hati dan bermain dengan emosi. 89

CBMP 2203 4. 6 PRINSIP R/B ANTARAMUKA 4. 6. 5 Panel Navigasi yang Konsisten q Panel navigasi menyediakan pengguna dengan peralatan sokongan untuk membimbing pengguna mengemudi sesuatu skrin. q Panel navigasi perlu diletakkan di tempat yang konsisten di atas skrin untuk memudahkan pengguna melihatnya dengan segera dan menghubungkaitkan fungsi-fungsinya tanpa banyak masalah. 90

CBMP 2203 4. 6 PRINSIP R/B ANTARAMUKA 4. 6. 6 Keseragaman q Merujuk kepada kesepaduan pelbagai elemen yang terdapat pada skrin. q Keseragaman mengukuhkan mesej atau tema pada sesuatu skrin dan memberi konsisten pada keseluruhan aplikasi q Keseragaman boleh dicapai sekiranya bentuk, warna, gaya teks dan tema aplikasi adalah konsisten dan bersepadu. q Keseragaman melibatkan rekaan interaktif di mana pengguna mengemudi dari satu skrin ke skrin berikutnya. 91

CBMP 2203 4. 7 RALAT DLM R/B ANTARAMUKA Antaramuka yang Kompleks Interaktiviti yang terlalu banyak Maklumat yang tidak Berkaitan KELASALAH UMUM DALAM REKABENTUK APLIKASI MM Teks yang terlampau banyak Antaramuka yang berwarna Ekstrim Tiada kawalan untuk Audio & Video 92

CBMP 2203 4. 7 RALAT DLM R/B ANTARAMUKA 4. 7. 1 Antaramuka yang Kompleks q Terlalu banyak butang fungsi pada skrin antaramuka q Grafik yang kelihatan serupa dengan butang q Tiada butang kawalan yang sepatutnya menyebabkan pengguna sukar mengemundikan skrin 93

CBMP 2203 4. 7 RALAT DLM R/B ANTARAMUKA 4. 7. 2 Tahap Interaktiviti Telalu Banyak q Tahap interaksi yang banyak menyebabkan pengguna sukar melayari aplikasi – pengguna boleh sesat dalam aplikasi. q Terjadi kerana tiada jalan balik ‘back’ ke program asal. q Penanda progres perlu disediakan utk mengatasi masalah ini 94

CBMP 2203 4. 7 RALAT DLM R/B ANTARAMUKA 4. 7. 3 Maklumat yang Tidak Berkaitan q Maklumat yang sesak dan tidak disusun secara teratur sehingga menyukar pengguna untuk memperolehinya. q Menyebabkan pengguna memperuntukkan banyak masa utk mendapatkan sesuatu maklumat yang relaven q Cara atasi dengan menyediakan menu berhirarki untuk mengurukan maklumat. 95

CBMP 2203 4. 7 RALAT DLM R/B ANTARAMUKA 4. 7. 4 Teks Terlampau Banyak q Antaramuka yang padat dengan teks menyebabkan pengguna merasa bosan. q Cara atasi dengan letakkan grafik atau elemen lain bagi mengantikan elemen teks 96

CBMP 2203 4. 7 RALAT DLM R/B ANTARAMUKA 4. 7. 5 Antaramuka yang Berwarna Ekstrim q Elakkan dari menggunakan warna yang terlalu ekstrim kerana akan mengganggu tumpuan pengguna terhadap maklumat yang dicapai q Penggunaan warna-warna harmoni amat digalakkan. q Perlu ada kesesuaian warna antara elemen-elemen yang digunakan. 97

CBMP 2203 4. 7 RALAT DLM R/B ANTARAMUKA q 4. 7. 6 Tiada Kawalan untuk Audio dan Video q Jika memasukkan klip video ke dalam antaramuka aplikasi, pastikan kawalan untuk audio dan video diletakkan q Tujuannya supaya pengguna dapat mengawal kemasukan dan menggunakannya dengan senang. 98

CBMP 2203 KESIMPULAN q. Rekabentuk antaramuka bergrafik telah memudahkan interaksi antara manusia dengan komputer. q. Rekabentuk antaramuka adalah amat penting supaya pengguna dari semua lapisan masyarakat boleh menggunakan komputer dengan mudah. q. Rekabentuk antaramuka sepatutnya menjadi pelengkap dan menyokong cara pengguna memproses maklumat. 99