CBMP2203 (T1) Pembangunan Aplikasi Multimedia

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





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






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






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

U N I T

1UNIT 1

PEMBANGUNANAPLIKASIMULTIMEDIA






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


http://slidepdf.com/reader/full/cbmp2203-t1-pembangunan-aplikasi-multimedia 7/100Subject Matter Expert/Author: Nor Aisyah Fadil (OUM)



7

U N I T

1UNIT 1 PEMBANGUNANAPLIKASI MULTIMEDIABAB 1Proses Pembangunan Multimedia





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.





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





1.1 Proses Pembangunan Multimedia

Model Rekabentuk:

Rajah 1.1: Model RekabentukInstruksi Hannafin & Peck

Rajah 1.2:Model ADDIE





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





1.3 Fasa 1: Perancangan

Fasa 1Perancangan

Pernyataan Tujuan

Kenalpasti Pengguna

Cara Perlaksanaan

Papan Cerita

Spesifikasi

Pembangunan Konsep

Rajah 1.3: Fasa PembangunanMultimedia






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.






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.






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






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.






1.3.4 Penentuan Cara Perlaksanaan

• Konsep; objektif; sasaran pengguna; menentukangaya persembahan aplikasi.

• Komponen yang perlu ditentukan: Ton

Pendekatan

Metafora

Penekanan






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






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.






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.







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







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






Isi kansungan

Pengarangan

1.4 Fasa 2: Penghasilan

Rajah 1.3:

Fasa PembangunanMultimedia

Fasa 2Penghasilan







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.







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







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






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






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






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.







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







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.






Copyright © ODL Jan 2005 Open University Malaysia32

U N I T

1UNIT 1 PEMBANGUNANAPLIKASI MULTIMEDIABAB 2Perisian Pengarangan Multimedia

Fakulti Teknologi Maklumat






2.0 Pengenalan

Objektif

• Memahami KEPENTINGAN Perisian pengarangan

dalam Multimedia.

• Memahami 6 KRITERIA PEMILIHAN Perisian

Pengarangan

• Memahami 4 METAFORA Perisian Pengarangan







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.







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.







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.







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.







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.







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







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







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








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






43



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,






44



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





a u t e o og a u atdan Komunikasi Multimedia

45



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





gdan Komunikasi Multimedia

46


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.







47

U N I T

1UNIT 1 PEMBANGUNAN

APLIKASI MULTIMEDIABAB 3Interaktiviti dan Navigasi






48


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






49


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.





dan Komunikasi Multimedia

50


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…”






51


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.






52


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.






53



(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






54



(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





55


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





56



(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






57



(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.






58


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





59



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.






60



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.






61


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.






62


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






63


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.






64


3.7 Interaktiviti & Navigasi

KAWALAN

NAVIGASI

1) Mengawal

Jujukan

Kandungan

2) Menyediakan

Pautan

Sejarah

3) Menyediakan

Maklum balas

Interaksi

4) Menyediakan

Rujukan

Silang






65


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.






66



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






67



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






68


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






69



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






70



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.






71


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





o


72

U N I T

1UNIT 1 PEMBANGUNAN

APLIKASI MULTIMEDIABAB 4Rekabentuk Antaramuka





73


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,





74


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.





75


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.





76


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





77


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





78


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





79


4.5 Komponen Antaramuka

KomponenAntaramuka

Latar Belakangdan Tekstur

Rollover danSlider

Butang, Ikondan Pikon

Maklum Balas

Hot Area, Highlightdan Menu





80



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





81



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.





82



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.





83



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.





84



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.





85


4.6 Prinsip Rekabentuk Antaramuka

Kedudukan

Seimbang&

Perspektif

Ruang putih Keseragaman

PenalNavigasi

yangKonsisten

Warna

PrinsipRekabentukAntaramuka





86



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.





87



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





88



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.





89



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.





90



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.





91



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.





92


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





93



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





94



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





95



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.





96



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


R l D l R k b k A k




97



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.


4 7 R l D l R k b k A k




98



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.


K i l




99


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.




Terima Kasih

CBMP2203 (T1) Pembangunan Aplikasi Multimedia

Documents

Transcript of CBMP2203 (T1) Pembangunan Aplikasi Multimedia