PENGENALAN KEPADA SISTEM MULTIMEDIA (WXET 3142)

1. PENGENALAN KEPADA SISTEM MULTIMEDIA(WXET 3142) BAB 7 : REKABENTUK PRODUK MULTIMEDIA nazlita@fsktm.um.edu.my

2. Pengenalan • Faktor penting : Bagaimana produk multimedia itu ‘looks’, ‘feels’ dan ‘works’ • Rekabentuk produk : untuk memahami pengguna. • Untuk membincangkan rekabentuk produk, kita gunakan ‘page’ sebagai perwakilan ‘presentation’. • ‘page’ dirujuk sebagai ‘frame’ atau ‘slide’. nazlita@fsktm.um.edu.my

3. Pembinaan Blok (Building Blocks) • Dalam rekabentuk produk multimedia, • ‘page’ : maklumat yang menyokong struktur dan aliran persembahan. • ‘Page’ digunakan untuk • ‘navigation’ • persembahan maklumat • sokongan kepada pengguna nazlita@fsktm.um.edu.my

4. ‘Page’ dikategorikan kepada : • Introduction • Splash • Menu • Content • Help Credits • Quit nazlita@fsktm.um.edu.my

5. ‘Introduction and Splash Page’ : memulakan sesuatu persembahan. • ‘Splash pages’ digunakan untuk menyatakan bahawa sesuatu produk sedang ‘loading’, • di mana ia berguna jika kandungan suatu produk multimedia sedang ‘preloaded’ untuk hasil yang lebih baik nazlita@fsktm.um.edu.my

6. ‘Introduction pages’ membekalkan ciri : • Mengenalpasti produk • Mengenalpasti sumber bagi produk • Membekalkan arahan begaimana hendak menggunakan program • Membekalkan ciri keselamatan seperti penggunaan katalaluan (password) nazlita@fsktm.um.edu.my

7. ‘Menu and Content Pages’ : untuk menguruskan kandungan produk multimedia • Ia akan menghubungkan dengan ‘page’ yang lain yang dipanggil ‘branch’ • ‘Branch’ membenarkan produk dilapisi (layered) untuk pencapaian ke kandungan (content) yang lebih baik nazlita@fsktm.um.edu.my

8. ‘Menu pages’ selalunya mengandungi kandungan yang sedikit dengan latar belakang gambar dan audio. • ‘Content pages’ mempersembahkan kandungan produk multimedia tersebut nazlita@fsktm.um.edu.my

9. ‘Help, Credit and Quit pages’ membenarkan fungsi sokongan pengguna untuk melicinkan operasi sesuatu produk nazlita@fsktm.um.edu.my

10. ‘Help pages’ membekalkan maklumat bagaimana persembahan diuruskan dan bagaimana kerja dikawal. • ‘Help pages’ boleh dicapai dari mana-mana poin di dalam persembahan dan pengguna boleh kembali ke tempat asal selepas mencapai ‘help pages’ nazlita@fsktm.um.edu.my

11. ‘Credit pages’ membekalkan maklumat mengenai pembangun (developer) dan maklumat mengenai sumber kandungan • Ia juga akan menyenaraikan produk dan maklumat terkini • ‘Quit pages’ pula digunakan untuk menamatkan program nazlita@fsktm.um.edu.my

12. Pengkelasan Produk • Terdapat 2 strategi asas untuk pengkelasan produk multimedia : • Tidak-interaktif : pengguna hanya mempunyai sedikit kawalan ke atas produk • Interaktif : pengguna yang menentukan aliran penghantaran maklumat nazlita@fsktm.um.edu.my

13. Produk tidak-interaktif : mudah kerana kandungannya dipersembahkan secara linear • Pengguna akan melihat jujukan ‘pages’ seperti yang telah ditentukan • Produk interaktif : sering digunakan untuk membangunkan produk multimedia • Pengguna boleh mengawal penghantaran maklumat dengan menekan butang, memainkan bunyi atau video. nazlita@fsktm.um.edu.my

14. Multimedia Tidak-Interaktif • Contoh : animasi dan persembahan ‘standalone’ spt ‘movie’ ataupun video • Digunakan untuk mempersembahkan maklumat kepada penonton yang ramai pada skrin besar ataupun pada monitor televisyen. • Produk dimainkan dari mula sehingga tamat. • Pengguna mempunyai sedikit kawalan ke atas produk dengan ‘clicking the mouse’ ataupun dengan ‘pressing a key’ untuk ke ‘page’ yang berikutnya. nazlita@fsktm.um.edu.my

15. Format Persembahan Tidak-Interaktif Pengenalan produk Apakah itu produk? Lebih mengenai produk Muka Pengenalan Muka mula (kandungan) Muka berikutnya nazlita@fsktm.um.edu.my

16. Gambarajah merupakan salah satu format yang paling mudah bagi suatu aplikasi multimedia. • Persembahan tidak-interaktif selalunya sesuai untuk aplikasi seperti berikut : • Persembahan korporat • Persembahan pengajaran dan latihan • Persembahan jualan dan pemasaran nazlita@fsktm.um.edu.my

17. Bagi setiap kes, terdapat ciri yang kerap digunakan untuk persembahan maklumat. • Yang paling penting ialah maklumat yang dibina pada maklumat lain. •  Sebagai contoh : • Nama syarikat, diikuti dengan • Misi syarikat • Sejarah syarikat • Organisasi syarikat • Produk nazlita@fsktm.um.edu.my

18. Pada setiap ‘page’, pengguna akan dibekalkan penerangan mengenai syarikat tersebut. • Maklumat diberikan sedikit demi sedikit supaya pengguna mudah untuk memahami. nazlita@fsktm.um.edu.my

19. Bagi produk latihan, selalunya bergantung kepada jujukan maklumat berdasarkan masa. • Contoh, produk yang mengajar bagaimana untuk memasak. • Ia akan bermula dengan menyediakan bahan-bahan yang diperlukan kemudian mencampurkan bahan-bahan tersebut, memasak dan akhir sekali cara menghidangkan makanan tersebut. nazlita@fsktm.um.edu.my

20. Bagi multimedia tidak-interaktif, format linear merupakan kaedah yang paling berkesan untuk mempersembahkan maklumat sebegini. • Ini kerana pengguna tidak boleh bergerak ke sebarang ‘page’ dan ini dapat mengurangkan pengguna tertinggal maklumat yang penting nazlita@fsktm.um.edu.my

21. Persembahan tidak-intertaktif digunakan di dalam media seperti pita video. • Sebagai contoh, pita video semasa penganugerahan ijazah kepada siswazah Universiti Malaya. Kandungan pita akan disusun seperti : • Muzik pengenalan • Ucapan • Penyampaian ijazah nazlita@fsktm.um.edu.my

22. Multimedia Interaktif • Multimedia interaktif : model yang paling sering digunakan oleh pembangun semasa membina produk komersial termasuklah produk hiburan, latihan dan pembelajaran. • Multimedia interaktif dikategorikan dengan kebolehannya untuk mengikut laluan yang berbeza melalui maklumat. • Gambarajah berikut menunjukkan contoh bagaimana persembahan interaktif bekerja. nazlita@fsktm.um.edu.my

23. Bahagian 1 ‘Next’ Pengenalan MENU Bahagian 1 Bahagian 2 Bahagian 3 Bahagian 2 ‘Next’ Bahagian 3 ‘Next’ Maklumat Berikutnya ‘Next’ nazlita@fsktm.um.edu.my

24. Persembahan multimedia interaktif disusun sebagai menu dan ‘content page’ yang membenarkan pengguna membuat keputusan ke mana untuk meneruskan. • Antara teknik yang biasa digunakan untuk membenarkan pengguna membuat pilihan ialah : • Buttons • Graphic hot spots • Text-based hyperlinks • Menu lists nazlita@fsktm.um.edu.my

25. Persembahan multimedia interaktif mungkin akan menjadi kompleks. • Ia bergantung kepada produk dan kandungan produk tersebut. • Format interaktif sesuai untuk produk-produk seperti berikut : • Alat rujukan (ensiklopedia / kamus) • Pembelajaran dan latihan • Penghantaran akhbar dan majalah secara elektronik • Hiburan nazlita@fsktm.um.edu.my

26. Alat rujukan perlu disusun agar dapat dicapai dengan pantas kerana ia mempunyai kandungan yang banyak. • Produk pembelajaran dan latihan memerlukan capaian interaktif di mana pengguna akan berkomunikasi dengan produk. • Akhbar dan majalah elektronik akan dibahagikan mengikut seksyen seperti berita tempatan, luar negara, politik, sukan dan hiburan. nazlita@fsktm.um.edu.my

27. Produk hiburan pula dibahagikan mengikut jenis permainan, paras kepakaran (skill levels) yang membenarkan pengguna keluar dan kembali ke seksyen tertentu. nazlita@fsktm.um.edu.my

28. Strategi Interaktif untuk Menguruskan Maklumat • Maklumat boleh disusun dengan pelbagai cara. • Ia selalunya bergantung kepada jumlah maklumat yang disimpan dan kekompleksan maklumat yang terdapat di dalam produk tersebut. nazlita@fsktm.um.edu.my

29. 3 kategori asas untuk menyusun maklumat di dalam sesuatu produk iaitu : • Linear • Maklumat dipersembahkan secara terus (straightforward) seperti di dalam buku di mana ia dibahagikan mengikut bab, seksyen dan perenggan. • Tree / hierarchical • Maklumat dipecahkan kepada beberapa sub-lapisan berdasarkan struktur logic. • Network • Maklumat dihubungkan ke bahagian lain produk. nazlita@fsktm.um.edu.my

30. Strategi Interaktif dan Persembahan • Sistem interaktif dibangunakan dengan pelbagai cara yang berbeza bergantung kepada produk, kandungan produk dan alatan yang digunakan. • Tetapi secara keseluruhannya, pengguna mengawal maklumat yang akan dicapai dan terdapat 3 pendekatan asas iaitu : • Linear • Programmed Branching • Hypermedia nazlita@fsktm.um.edu.my

31. Linear • Menyerupai strategi tidak-interaktif • Persembahan maklumat secara ‘pages’ • Pengguna boleh ke muka berikutnya atau kembali ke muka asal nazlita@fsktm.um.edu.my

32. Programmed branching • Kaedah yang paling sering digunakan di dalam multimedia komersial • Selalunya digunakan di dalam produk pembelajaran dan hiburan • Pengguna mempunyai kawalan yang terhad terhadap laluan • Kawalan melalui pilihan dari antaramuka seperti ‘button’, ikon atau menu nazlita@fsktm.um.edu.my

33. Setiap muka selalunya mengandungi kandungan dan pilihan • Pilihan membolehkan pengguna ke muka lain atau atau menu ‘help’ atau terus keluar dari produk tersebut • Menjadi pilihan ramai pembangun kerana memberi kebebasan kepada pengguna semasa menggunakan produk nazlita@fsktm.um.edu.my

34. Hypermedia • Jujukan : secara tidak-linear di mana pengguna mempunyai kawalan sepenuhnya terhadap kandungan produk • Selalunya digunakan untuk World Wide Web (WWW) • Ia sering digunakan sebagai muka teks ataupun grafik di mana pengguna boleh klik teks atau gambar yang dipaparkan • Formatnya menyerupai ‘programmed branching’ keran memberi kebebasan kepada pengguna untuk mengawal navigasi nazlita@fsktm.um.edu.my

35. ‘Storyboarding’ • ‘Storyboarding’ merupakan proses yang diambil dari pembangunan media termasuklah pembuatan filem atau animasi kartun. • Ia menceritakan produk di atas kertas yang menerangkan keterperincian cerita produk tersebut. • Bagi multimedia, ‘storyboarding’ digunakan untuk menghubungkan kandungan supaya dapat diterjemahkan ke produk multimedia yang dibina. nazlita@fsktm.um.edu.my

36. Terdapat 2 paras ‘storyboarding’ iaitu • ‘storyboard page’ • ‘product storyboard’ nazlita@fsktm.um.edu.my

37. ‘storyboard page’ • ‘Storyboard page’ digunakan untuk menerangkan ‘frame of time’ tertentu di dalam suatu persembahan multimedia. • Ia selalunya bersamaaan dengan muka ataupun ‘page’ yang kita telah bincangkan sebelum ini. • Tiada undang-undang khas untuk membuat ‘storyboard’. • Ia sering bergantung kepada produk yang hendak dibangunkan. nazlita@fsktm.um.edu.my

38. ‘Storyboard page’ ini dapat digambarkan seperti dalam gambarajah berikutnya menerangkan : • mesej suatu muka tersebut • kandungan muka termasuklah sumber dan arahan untuk penformatan muka • ‘Layout’ bagi kandungan muka • ‘Layout’ bagi kawalan navigasi bagi muka tersebut • interaktiviti bagi muka tersebut nazlita@fsktm.um.edu.my

39. maklumat pereka termasuklah siapa yang mereka, bila dan di mana • komen atau maklumat lain yang berguna nazlita@fsktm.um.edu.my

40. Teks Teks Nama Projek: Ketua projek: Pereka: Tarikh: Tarikh kemaskini: ‘storyboard page’ nazlita@fsktm.um.edu.my

41. ‘product storyboard’ Oleh kerana produk multimedia selalunya melebihi dari 1 muka, maka perlulah ia dihubungkan dengan muka yang lain untuk mempersembahkan keseluruhan kandungan produk multimedia tersebut. • ‘Product storyboard’ merupakan gambaran keseluruhan yang menerangkan bagaimana muka individu dipersembahkan nazlita@fsktm.um.edu.my

42. Terdapat beberapa cara untuk menguruskan muka-muka tersebut iaitu : • Menggunakan ‘loose-leaf notebook’ untuk menyimpan ‘pages’. • Meletakkan ‘pages’ pada dinding satu demi satu secara linear. • Meletakkan ‘pages’ pada dinding atau kertas yang besar dengan menunjukkan hubungan di antara ‘pages’ dan navigasi. • Menggunakan kad rujukan yang berkaitan dengan ‘storyboard sheets’ yang disusun pada kad yang besar. nazlita@fsktm.um.edu.my

43. Storyboard Page Storyboard Page Storyboard Page Storyboard Page Storyboard Page Storyboard Page Storyboard Page Storyboard Page Aplikasi ‘storyboard’ nazlita@fsktm.um.edu.my

44. ‘Storyboarding’ yang baik penting untuk menghasilkan produk multimedia yang baik • Tujuan : membantu pereka untuk menguruskan ide dan kandungan. • Ia selalu digunakan sebagai ide asas untuk diceritakan kepada pengguna. nazlita@fsktm.um.edu.my

45. Tutorial Bab 7 • Apakah perbezaan di antara produk multimedia interaktif dan tidak-interaktif? • Jelaskan kategori-kategori asas untuk menyusun maklumat di dalam sesuatu produk. • Apakah keburukan penggunaan kaedah ‘linear’ di dalam penyusunan maklumat. • Senaraikan paras ‘storyboarding’ yang ada. Bincangkan setiap satu. • Terangkan kebaikan ‘storyboarding’ . nazlita@fsktm.um.edu.my