cbmp2203 (t1) pembangunan aplikasi multimedia
TRANSCRIPT
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 1/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
Copyright © ODL Jan 2005 Open University Malaysia
1
PEMBANGUNANAPLIKASI MULTIMEDIA
TUTORIAL 1 –
UNIT 1 Pembangunan
Aplikasi Multimedia
Nor Asiyah FadilCBMP2203 Pembangunan Aplikasi MultimediaJan 2005
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 2/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
2Copyright © ODL Jan 2005 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 untukpembangunan aplikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 3/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
3Copyright © ODL Jan 2005 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
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 4/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
4Copyright © ODL Jan 2005 Open University Malaysia
Perancangan Tutorial
Tutorial 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
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 5/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
Copyright © ODL Jan 2005 Open University Malaysia
5
U N I T
1UNIT 1
PEMBANGUNANAPLIKASIMULTIMEDIA
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 6/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
6Copyright © ODL Jan 2005 Open University Malaysia
Komponen UNIT 1
Proses Pembangunan Multimedia
Fasa pembangunan MultimediaProses PembangunanMultimedia
Perisian Pengarangan
Multimedia
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
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 7/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
Copyright © ODL Jan 2005 Open University Malaysia
7
U N I T
1UNIT 1 PEMBANGUNANAPLIKASI MULTIMEDIABAB 1Proses Pembangunan Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 8/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
8Copyright © ODL Jan 2005 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 dipasaran.
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 9/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
9Copyright © ODL Jan 2005 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
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 10/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
10Copyright © ODL Jan 2005 Open University Malaysia
1.1 Proses Pembangunan Multimedia
Model Rekabentuk:
Rajah 1.1: Model RekabentukInstruksi Hannafin & Peck
Rajah 1.2:Model ADDIE
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 11/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
11Copyright © ODL Jan 2005 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 PembangunanMultimedia
Pengujian
Isi kansungan
Pengarangan
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 12/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
12Copyright © ODL Jan 2005 Open University Malaysia
1.3 Fasa 1: Perancangan
Fasa 1Perancangan
Pernyataan Tujuan
Kenalpasti Pengguna
Cara Perlaksanaan
Papan Cerita
Spesifikasi
Pembangunan Konsep
Rajah 1.3: Fasa PembangunanMultimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 13/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
13Copyright © ODL Jan 2005 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 kriteriapenilaian.
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 14/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
14Copyright © ODL Jan 2005 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 merancangdengan rasional meliputi:
kepakaran, masa, belanja, peralatan dan sumber yang ada pada
ketika itu.
• Rancang keseluruhan proses bermula dengan ideapertama anda dan berakhir dengan projek yang telahsiap untuk penyebaran.
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 15/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
15Copyright © ODL Jan 2005 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 ianyadibangunkan.
Matlamat adalah suatu pernyataan yang luasmengenai apa yang akan dicapai
Objektif – suatu pernyataan yang lebih tepat & spesifik
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 16/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
16Copyright © ODL Jan 2005 Open University Malaysia
1.3 Fasa 1: Perancangan
1.3.3 Kenalpasti Pengguna Sasaran
• Profail pengguna perlu difahami bagi memastikanaplikasi yang dihasilkan memenuhi keperluan dankehendak pengguna
• Pengguna atau audien boleh diterangkan denganbanyak cara seperti menurut faktor demografik, jugagaya hidup dan tingkah laku seseorang.
• Pembangun perlu analisa profail pengguna danmenggunakan maklumat tersebut untukmembangunkan aplikasi yang berjaya memenuhikehendak pengguna.
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 17/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
17Copyright © ODL Jan 2005 Open University Malaysia
1.3 Fasa 1: Perancangan
1.3.4 Penentuan Cara Perlaksanaan
• Konsep; objektif; sasaran pengguna; menentukangaya persembahan aplikasi.
• Komponen yang perlu ditentukan: Ton
Pendekatan
Metafora
Penekanan
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 18/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
18Copyright © ODL Jan 2005 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 yangdigunakan
• Pendekatan Langkah atau arahan yang disediakan kepada
pengguna
Perlulah sesuai dengan konper dan sasaran
pengguna
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 19/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
19Copyright © ODL Jan 2005 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.
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 20/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
20Copyright © ODL Jan 2005 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 dibangunkanmemenuhi objektif dan menepati kehendak penggunasasaran.
• Elemen dalam spesisfikasi ialah perkakasan untuk
sistem pembangunan dan sistem penyebaran (sistemmain semula), perisian, elemen yang akandimasukkan, kebolehfungsian dan antaramukapengguna.
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 21/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
21Copyright © ODL Jan 2005 Open University Malaysia
1.3 Fasa 1: Perancangan
1.3.5 Pembangunan Spesifikasi (smb) Elemen Spesifikasi:• Perkakasan
• Perkakasan berkeupayaan
tinggi yang mampu menyokongelemen multimedia
• Sistem Pembangunan• Perkakasan pembangunan yang
digunankan:
Sistem Penyebaran & SistemPengarangan
• Sistem Penyebaran• Digunakan oleh pengguna akhir
utk memainkan aplikasi
• Elemen yang dimasukkan• Spesifikasi lengkap bagi
setiap elemen yang kitamasukkan
• Kebolehanfungsian• Bagaimana aplikasi
bertindak balas dengan
pengguna• Antaramuka pengguna
• Rekabentuk objek pasa
skrin dan berinteraksi
dengan pengguna
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 22/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
22Copyright © ODL Jan 2005 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 prosespembangunan.
Membolehkan Pembangun menguji keseluruhan konsep secaragambaran visual.
Memudahkan komunikasi secara visual antara pembangun-pengguna
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 23/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
23Copyright © ODL Jan 2005 Open University Malaysia
Isi kansungan
Pengarangan
1.4 Fasa 2: Penghasilan
Rajah 1.3:
Fasa PembangunanMultimedia
Fasa 2Penghasilan
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 24/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
24Copyright © ODL Jan 2005 Open University Malaysia
1.4 Fasa 2: Penghasilan
1.4.1 Pembangunan Isi Kandungan
• Isi kandungan merupakan maklumat atau bahan-bahanyang membentuk jantung sesebuah projek yangdibangunkan.
• Pembangunan isi kandungan melibatkan:
Proses pengumpulan,
Proses penterjemahan, dan
Proses Pengubahsuaian elemen-elemen yang digunakan didalam aplikasi yang dibangunkan.
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 25/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
25Copyright © ODL Jan 2005 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
A
K TIVIT
I
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 26/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
26Copyright © ODL Jan 2005 Open University Malaysia
1.4 Fasa 2: Penghasilan
1.4.2 Pengarangan
• Dilakukan selepas pembangunan spesifikasi dan papan
cerita telah disempurnakan.
• Proses pengarangan melibatkan pengintegrasiansemua bahan-bahan media.
• Elemen interaktiviti dimasukkan pada peringkat ini.
Elemen ini akan mengeratkan lagi perhubungan
antara aplikasi – pengguna
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 27/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
27Copyright © ODL Jan 2005 Open University Malaysia
1.5 Fasa 3: Pengujian
• Menguji aplikasi yang telah siap dibina
bagi memastikan ia telah memenuhi
matlamat pembangunan.
• Pengujian merupakan proses yangberterusan dan boleh bermula di
peringkat pembangunan konsep lagi.
• Memastikan aplikasi yg dibangunkan
bebas daripada pepijat, tepat,
beroperasi, mengikut peruntukan masa
dan kehendak pelangganFasa 3Pengujian
Pengujian
k l i k l i kl
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 28/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
28Copyright © ODL Jan 2005 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 sebanyakmungkin daripada pengguna berpotensi terhadap prestasisebenar aplikasi
F k lti T k l i M kl t
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 29/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
29Copyright © ODL Jan 2005 Open University Malaysia
1.6 Penyebaran
• Penyebaran merupakan proses penyerahan aplikasi
kepada pengguna.
• Aplikasi yang dibangunkan sedia disebarkan dalampelbagai cara: Online, CD-ROM, DVD
• Format penyebaran berbeza mengikut jenispenyebaran 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 formatonline.
F k lti T k l i M kl t
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 30/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
30Copyright © ODL Jan 2005 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
F k lti T k l i M kl t
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 31/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
31Copyright © ODL Jan 2005 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 IsiKandungan & Pengarangan.
• Proses pembangunan yang rapi merupakan faktorkejayaan sesuatu projek.
F k lti T k l i M kl t
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 32/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
Copyright © ODL Jan 2005 Open University Malaysia32
U N I T
1UNIT 1 PEMBANGUNANAPLIKASI MULTIMEDIABAB 2Perisian Pengarangan Multimedia
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 33/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
33Copyright © ODL Jan 2005 Open University Malaysia
2.0 Pengenalan
Objektif
• Memahami KEPENTINGAN Perisian pengarangan
dalam Multimedia.
• Memahami 6 KRITERIA PEMILIHAN Perisian
Pengarangan
• Memahami 4 METAFORA Perisian Pengarangan
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 34/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
34Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 35/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
35Copyright © ODL Jan 2005 Open University Malaysia
2.2 Definasi Perisian Pengarangan
Larry dan Nancy (1995)Perisian yang membolehkan aplikasi-aplikasi multimedia dicipta
dengan m‟gabungkan bunyi, pergerakan, grafik, audio, videodan teks ke dalam sesuatu perisian.
McGloughin (2001)Aplikasi komputer yang membenarkan pengguna
membangunkan satu perisian dengan mengheret danmeletakkan pelbagai komponen media tanpa kemahiran
bahasa pengaturcaraan.
Vaughan (2001)
Suatu integrasi yang mengumpulkan kandungan dan fungsi
sesebuah projek yang dibangunkan.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 36/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
36Copyright © ODL Jan 2005 Open University Malaysia
2.2 Definasi Perisian Pengarangan
Pakej perisian yang membenarkan anda
mengumpul dan mengintegrasi elemen-elemen
media ke dalam suatu aplikasi multimedia.
Istilah ‘pengarangan’ atau ‘penggubah’
digunakan kerana anda dianggap sebagai
pengarang untuk aplikasi berkenaan.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 37/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
37Copyright © ODL Jan 2005 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 bagimenghubungkan semua isi kandungan dan fungsi
sebuah aplikasi yang ingin dibangunkan.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 38/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
38Copyright © ODL Jan 2005 Open University Malaysia
2.4 Kriteria Pemilihan PerisianPengarangan
Menyokong Fitur Mengedit: peralatan mengedit elemen-elemen multimedia: grafik, animasi, teks, audio digital,video.
Cth: Adobe Photoshop
Membantu anda menyusun atau mengorganisasi projekmultimedia.
Rajah atau diagram papan cerita dan navigasi digunakanutk mewakili aplikasi
Cth: Macromedia Athorware
Interaktiviti membenarkan pengguna mempunyai kawalansepenuhnya ke atas kandungan dan aliran maklumat didalam aplikasi tersebut.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 39/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
39Copyright © ODL Jan 2005 Open University Malaysia
2.4 Kriteria Pemilihan PerisianPengarangan
Boleh dimainkan pada kedua-dua persekitaran Macintoshdan Windows.
Macintosh: sesuai sebagai platform pembangun
Windows: sesuai sebagai platform pengguna
Memandangkan Web telah menjadi medium penyebaranmultimedia yang penting, pastikan aplikasi yangdibangunkan boleh disebarkan pada Internet.
Menyokong fitur penyebaran dengan menyediakankemudahan penyediaakn versi run-time.
Versi run-time membolehkan pengguna mencapai aplikasitanpa dapat mengubah kandungan.
Lebih mudah fitur penyebaran; lebih meluas pasaran
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 40/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
40Copyright © ODL Jan 2005 Open University Malaysia
2.5 Pengarangan VS Peraturcaraan
Perisian Pengarangan Boleh digunakan untuk aplikasi
multimedia.
Punyai peralatan tahap tinggi.
Pembangun membangunkan
aplikasi tanpa pengetahuan
pengaturcaraan
Capaian fungsi yang terhad
Pembangun hanya memilih
arahan untuk diberikan kepadasistem komputer daripada set
yang terhad.
Masa pembangunan – cepat
Saiz 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 laksanakanapa-apa tugas yang diingini.
Masa pembangunan – lama
Saiz aplikasi lebih kecil
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 41/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
41Copyright © ODL Jan 2005 Open University Malaysia
2.6 Metafora Perisian Pengarangan
• METAFORA digunakan untuk mengurus dan menyusunjujukan elemen-elemen Multimedia.
• Perisian Pengarangan Multimedia dibahagikan kepada 4kategori utama berdasarkan METAFORA.
Metafora Berasaskan Ikon Persembahan Slaid
Metafora Berasaskan Ikon
Metafora Berasaskan tatasusunan Kad / Lembaran Buku
Metafora Berasaskan Masa
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 42/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
42Copyright © ODL Jan 2005 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 jujukanlogikal atau mengumpulnya mengikut bab danlembaran buku atau kad di dalam kad katalog
• Cth: HyperCard, HyperStudio dan AsymetrixToolBook
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 43/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
43
Copyright © ODL Jan 2005 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,
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 44/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
44
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 45/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
a u t e o og a u atdan Komunikasi Multimedia
45
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 46/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
gdan Komunikasi Multimedia
46
Copyright © ODL Jan 2005 Open University Malaysia
Kesimpulan
• Terdapat pelbagai jenis perisian pengarangan yangboleh digunakan untuk membangun pelbagai jenisaplikasi multimedia yang canggih dalam pelbagaibidang.
• Pemilihan perisian pengarangan yang sesuai dalampembangunan aplikasi multimedia adalah penting.
• Pembangun aplikasi multimedia tidak semestinyamemilih perisian pengarangan yang mahal lagi
kompleks.
• Pelbagai jenis pengarangan yang mudah diperolehidengan percuma atau dengan harga yang murah bolehdigunakan dalam pembangunan aplikasi multimedia.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 47/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
gdan Komunikasi Multimedia
Copyright © ODL Jan 2005 Open University Malaysia
47
U N I T
1UNIT 1 PEMBANGUNAN
APLIKASI MULTIMEDIABAB 3Interaktiviti dan Navigasi
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 48/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
gdan Komunikasi Multimedia
48
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 49/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
gdan Komunikasi Multimedia
49
Copyright © ODL Jan 2005 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 untuk
mengawal persekitarannya dengan menggunakan komputer.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 50/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
50
Copyright © ODL Jan 2005 Open University Malaysia
3.1 Definasi Interaktiviti
National Consortium For EnvironmentalEducation 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 penggunadengan cara bertindakbalas terhadap pilihan
atau input dari pengguna…”
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 51/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
51
Copyright © ODL Jan 2005 Open University Malaysia
3.2 Konsep Interaktiviti
Interaktiviti: elemenMultimedia yang dianggapsebagai jantung kepadaaplikasi multimedia.
Interaktiviti ini dikenalisebagai multimedia tidaklinear.
Ciri interaktiviti ini telahmenjadikan multimedialebih popular berbandingkomponen media yang lain.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 52/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
52
Copyright © ODL Jan 2005 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 ataupautan.
• Pengguna hanya mengawal sebahagian kecil
perisian.
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 53/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
53
Copyright © ODL Jan 2005 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 iaituapakah fungsi perisian itu dibangunkan.
• Sepanjang interaksi, pengguna akan diberikan
maklumbalas di atas capaian mereka
Fakulti Teknologi Maklumat
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 54/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
54
Copyright © ODL Jan 2005 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 menyesuaikanpengguna dengan kemampuan mereka.
• Pengguna diberikan kuasa yang lebih untuk
mengawal perisian dan boleh berinteraksi denganperisian secara langsung.
Fakulti Teknologi Maklumatd ik i l i di
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 55/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
55
Copyright © ODL Jan 2005 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-CIRI
INTERAKTIF
Fakulti Teknologi Maklumatd K ik i M lti di
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 56/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
56
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumatd K ik i M lti di
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 57/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
57
Copyright © ODL Jan 2005 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-SizeMasa yang diperlukan oleh perisian bagi setiap interaksi
pengguna.
Jika masa menunggu terlalu lama pengguna akan merasabosan dan interaktiviti menjadi kurang.
Fakulti Teknologi Maklumatd K ik i M lti di
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 58/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
58
Copyright © ODL Jan 2005 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 telahditetapkan - pengguna boleh memilih laluan yang spesifik
untuk mengakses kandungan
Fakulti Teknologi Maklumatdan Kom nikasi M ltimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 59/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
59
Copyright © ODL Jan 2005 Open University Malaysia
3.5 Jenis Interaktiviti
Interaktiviti Sokongan Pengguna dibekalkan dengan pelbagai jenis bantuan „help‟
sokongan dan mesej, dari yang ringkas kepada yang sangatrumit.
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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 60/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
60
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 61/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
61
Copyright © ODL Jan 2005 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 meningkatkankadar pembelajaran.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 62/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
62
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 63/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
63
Copyright © ODL Jan 2005 Open University Malaysia
3.7 Interaktiviti & Navigasi
Navigasi Ciri penting pembangunan multimedia.
Berkait rapat dengan interaktiviti.
Membolehkan penggunaan aplikasi dengan lebihberkesan.
Kawalan Navigasi
Teknik interaktif yang digunakan di dalam aplikasimultimedia
Membantu pengemundian aplikasi multimedia.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 64/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
64
Copyright © ODL Jan 2005 Open University Malaysia
3.7 Interaktiviti & Navigasi
KAWALAN
NAVIGASI
1) Mengawal
Jujukan
Kandungan
2) Menyediakan
Pautan
Sejarah
3) Menyediakan
Maklum balas
Interaksi
4) Menyediakan
Rujukan
Silang
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 65/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
65
Copyright © ODL Jan 2005 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 yangtelah dilawati sebelum ini.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 66/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
66
Copyright © ODL Jan 2005 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, failbunyi / 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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 67/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
67
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 68/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
68
Copyright © ODL Jan 2005 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 untukmeneruskan navigasi.
Cth: Pull Down Menu
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 69/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
69
Copyright © ODL Jan 2005 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 balasapabila pengguna mengklik pada
tetikus
Cth: Push Button
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 70/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
70
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 71/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
dan Komunikasi Multimedia
71
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 72/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
o
Copyright © ODL Jan 2005 Open University Malaysia
72
U N I T
1UNIT 1 PEMBANGUNAN
APLIKASI MULTIMEDIABAB 4Rekabentuk Antaramuka
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 73/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
73
Copyright © ODL Jan 2005 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 5KOMPONEN antaramuka dlm Multimedia,
• Memahami 6 PRINSIP REKABENTUK antaramukaMultimedia,
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 74/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
74
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 75/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
75
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 76/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
76
Copyright © ODL Jan 2005 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 dengantepat
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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 77/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
77
Copyright © ODL Jan 2005 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 supayamaklumat dapat disampaikan dengan cepat.
4.3.4 Menyediakan Alternatif untuk Kawalan Antaramuka
Menyediakan shortcut atau kekunci alternatif pada kawalanantaramuka.
Memberikan pengawalan bebas kpd pengguna
4.3.5 Menampung Tahap Kepakaran Pengguna yang Berbagai
Aplikasi boleh digunakan oleh semua lapisan pengguna
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 78/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
78
Copyright © ODL Jan 2005 Open University Malaysia
4.4 Jenis-Jenis Antaramuka
1) Antaramuka BilikBerita
Untuk aplikasiyang menyampaiMaklumat
2) MetaforaPenceritaan
Untuk aplikasi yangberunsurkan didikandan mempunyai ciri
hiburan3) Pendekatan Permainan
Untuk aplikasi yangbertemakanpengembaraan
4) Metafora BukuUntuk aplikasi yangmembolehkanpenggunamengemundiaplikasi
5) Metafora TeknologiTinggi
Aplikasi yangmempunyai temayang sofistikated
6) Pendekatan Menu
Untuk aplikasi yangberasaskanperkhidmatanpelanggan
Jenis-JenisAntaramuka
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 79/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
79
Copyright © ODL Jan 2005 Open University Malaysia
4.5 Komponen Antaramuka
KomponenAntaramuka
Latar Belakangdan Tekstur
Rollover danSlider
Butang, Ikondan Pikon
Maklum Balas
Hot Area, Highlightdan Menu
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 80/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
80
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 81/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
81
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 82/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
82
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 83/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
83
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 84/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
84
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 85/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
85
Copyright © ODL Jan 2005 Open University Malaysia
4.6 Prinsip Rekabentuk Antaramuka
Kedudukan
Seimbang&
Perspektif
Ruang putih Keseragaman
PenalNavigasi
yangKonsisten
Warna
PrinsipRekabentukAntaramuka
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 86/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
86
Copyright © ODL Jan 2005 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 duapertiga (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 perludiberi perhatian.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 87/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
87
Copyright © ODL Jan 2005 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 kurangmemerlukan fokus pengguna.
Perspektif Hadapan = untuk elemen yang memerlukan
lebih fokus daripada pengguna
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 88/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
88
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 89/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
89
Copyright © ODL Jan 2005 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 dipilihkerana warna-warna tersebut boleh merangsangkan otaksupaya aktif
Pemilihan warna yang sesuai amat dititik-beratkan didalam membina aplikasi
Cth: aplikasi permainan kerana sewaktu menggunakanaplikasi sebegini, pelajar biasanya mengikut gerak hatidan bermain dengan emosi.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 90/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
90
Copyright © ODL Jan 2005 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 mengemudisesuatu skrin.
Panel navigasi perlu diletakkan di tempat yangkonsisten di atas skrin untuk memudahkan penggunamelihatnya dengan segera dan menghubungkaitkanfungsi-fungsinya tanpa banyak masalah.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 91/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
91
Copyright © ODL Jan 2005 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 keseluruhanaplikasi
Keseragaman boleh dicapai sekiranya bentuk, warna,gaya teks dan tema aplikasi adalah konsisten dan
bersepadu.
Keseragaman melibatkan rekaan interaktif di manapengguna mengemudi dari satu skrin ke skrinberikutnya.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 92/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
92
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 93/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
93
Copyright © ODL Jan 2005 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 menyebabkanpengguna sukar mengemundikan skrin
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 94/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
94
Copyright © ODL Jan 2005 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
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 95/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
95
Copyright © ODL Jan 2005 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 masauntuk mendapatkan sesuatu maklumat yang relaven
Cara atasi dengan menyediakan menu berhirarki untuk
menguruskan maklumat.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 96/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
96
Copyright © ODL Jan 2005 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 lainbagi mengantikan elemen teks
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
R l D l R k b k A k
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 97/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
97
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
4 7 R l D l R k b k A k
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 98/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
98
Copyright © ODL Jan 2005 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
K i l
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 99/100
Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)
99
Copyright © ODL Jan 2005 Open University Malaysia
Kesimpulan
• Rekabentuk antaramuka bergrafik telah memudahkaninteraksi 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.
Fakulti Teknologi Maklumatdan Komunikasi Multimedia
5/12/2018 CBMP2203 (T1) Pembangunan Aplikasi Multimedia - slidepdf.com
http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 100/100
Terima Kasih