culture preservation through web media development: panglima bukit sadok

CULTURE PRESERVATIONTHROUGH WEB MEDIA DEVELOPMENT: PANGLIMA BUKIT SADOK

Mohd Fairuz Bin Ali

Diterbit oleh Mohd Fairuz Bin Ali

No. 25 Jalan USJ 3/3C, 47600 Subang Jaya, Selangor Darul Ehsan, Malaysia. +60122847284 [email protected]

© 2013 Mohd Fairuz Bin Ali, 2013

Hak Cipta terpelihara.

Tidak dibenarkan mengeluar ulang mana-mana bahagian daripada terbitan ini sama ada illustrasi dan isi kandungannya dalam apa jua bentuk dan cara sama ada secara elektronik, fotokopi, mekanikal, rakaman dan sebagainya sebelum mendapat izin bertulis daripada pemilik hak cipta terlebih dahulu.

Perpustakaan Negara Malaysia Dicetak oleh: Songden Enterprise

Published by Mohd Fairuz Bin Ali

No. 25 Jalan USJ 3/3C, 47600 Subang Jaya, Selangor Darul Ehsan, Malaysia. +60122847284 [email protected] © 2013 Mohd Fairuz Bin Ali, 2013

All rights reserved.

Without limiting the rights under copyright reserved above, no part of this publication may be reproduced, stored in or introduced into a retrieval system, or transmitted, in any form, or by any means ( electronic, mechanical, photocopying, recording, or otherwise) , without the prior written permission of both the copyright owner and publisher of this book.

Perpustakaan Negara Malaysia Printed by: Songden Enterprise

Contents

Chapter I: Web Media Development Process \ Planning \ Design\ Development\ Panglima Bukit Sadok Website Screenshot

Chapter II: Illustrations of Panglima Bukit Sadok\ Hand Sketches Illustrations of Panglima Bukit Sadok\ Computer Illustrations of Panglima Bukit Sadok\ Images Study of Panglima Bukit Sadok

Chapter III: Panglima Bukit Sadok in CGI Perspective\ Guideline For PBS Character Animation\ Pre-Production\ Production

3

29

23

Author of Culture Preservation Through Web Media Development: Panglima Bukit Sadok

Mohd Fairuz Ali is a lecturer at Universiti Tunku Abdul Rahman in Faculty of Creative Industries, Petaling Jaya. His area of expertise is in Web Media Development and really passionate in Digital Photography. His previous research are on Preservation of Malaysian Traditional Game of Wau in A Form of Computer Technology and Interactive Learning Application: Taharah.

Acknowledgements

This first book is specially dedicated to my beloved wife Nazifah Mohd Anuar & my lovely son Umayr Rifq.

Special thanks to my colleagues Aloysisus Yapp and Goh Kian Kuang for the contribution made to the writing of this book and its success.

Editor:

Mohd Fairuz Bin Ali

1

Introduction

Website can act as a powerful medium to convey and deliver information.

2

This page intentionally left blank

3

CHAPTER IWEB DESIGN & DEVELOPMENT TECHNIQUES

OBJECTIVE

This chapter will introduce main process and techniques in

developing a Website.

4

Chapter 1 \ Web Design & Development Techniques

PLANNING

This is where we define our work as for example the title of the project, the concept and theme, the contents that we want to havefor each Webpage, and the structure of the Website (how we want to bring user from one page to other pages).

> Information Architecture

Panglima Bukit Sadok(index page)

Home

Sketches Computer Illustration

CGI Video Photos

Background Gallery The Team

IA (Information Architecture of Panglima Bukit Sadok Website)

5

Wireframe for index page


> Wireframes

Website Title

Image of Panglima Bukit Sadok Enter Button

Footer

6


> Wireframes

Banner

Navigation buttons

Footer

Image

Wireframe for homepage

7


> Wireframes

Banner

Navigation buttons

Footer

Wireframe for Sketches, Computer Illustrations & Photos Page

Photo Thumbnail

Step Navigation

Enlargement Photo

8


> Wireframes

Banner

Navigation buttons

Footer

Flash Video

Wireframe for CGI & Video Page

9


> Wireframes

Banner

Navigation buttons Image

Footer

Wireframe for The Team Page

Photo

Photo

Photo

Text

Text

Text

10


DESIGN

> Working With GraphicsThe most important aspect when dealing with graphics is to make sure that they have been optimized. The benefit of having them optimized is that it can minimize the overall file size of Website and so the user can retrieve or load the Webapage faster. This technique can be applied by using Adobe Photoshop software. See example below:

The Steps:1- While the graphic is still active in Adobe Photoshop, go to FILE > SAVE FOR WEB2- In the Save For Web setting panel, choose JPEG or GIF from preset setting. 3- Click on SAVE button > type in relevant file name for the file (e.g: banner.jpg) > choose IMAGES ONLY under format setting and click SAVE.

Banner of Panglima Bukit Sadok Website that has been designed in Adobe Photoshop.

11


DESIGN

> Working With TextThere are few things that required consideration when choosing the type for the text that will be placed on the Webpage. It is as listed below:

1. The Size - Will guide user to identify the heading, subheading and body text easily.

Heading 1Heading 2

Body text

2. The Space - Will give a better legibilaty to the text and provide a better readibility to the user when they read through the text on a Web. a) Kerning: Changing the space in between individual letters LE || TTERS b)Tracking: Changing the space in between every letter L E T T E R S c) Leading: Changing the space in between lines SPACE SPACE

3. The Contrast - It is always a good idea to have a darker text on light background as it will give a better contrast when user read them.

Bad contrast Better contrast

Text Text

12


4. The Typeface - Serif or Sans-Serif?

This might be most suitable for a heading or title text but it is still might not be readable for some people.

It is the most readable type for typeface.

Serif Sans-Serif

13


> Working With Multimedia Elements

Multimedia elements can be incorporated in making the Website more interesting and more alive. As for the Panglima Bukit Sadok Website, the Multimedia elements of flash photo slideshow and a flash video are applied. Below are the process involved in creating both multimedia elements:

a) Flash Photo Slideshow

There are many ways on creating a photo slideshow. We can achieve that by using jQuery which is a type of Javascript library, or Adobe Flash but both required user’s ability in handling basic programming language. There are also applications that does not require any programming background such as Aneesoft Flash Gallery. It is a software that allows user to create a creative photo slideshow presentation in a flash format. It offers a simple 3 STEPS as below:

The Steps:

1- ADD PHOTO 2- CHOOSE TEMPLATE

14


3- Publish

Preview of photos slideshow after published in flash (.swf) format.

15


DEVELOPMENT

> Working with web Authoring Software - Adobe Dreamweaver

Adobe Dreamweaver has been used for the development of Panglima Bukit Sadok Website. The main process involved during this stage are:

A. Creating The Web Structure

The easiest way to create the Web structure is by using table or DIV.

The Steps:1- Using Table: INSERT > TABLE2- Using DIV > INSERT > AP DIV

The Web structure used for Panglima Bukit Sadok Website

16


2. Inserting Images

The Steps:1- INSERT > IMAGE > Choose the image by navigating to the image folder > Click ok.

Images used in Homepage of Panglima Bukit Sadok Website

17


3. Inserting Multiemedia Elements

i- Flash File

The Steps:1- INSERT > MEDIA > SWF > Choose the flash file by navigating to the flash folder > Click ok.

ii- Video File1- INSERT > MEDIA > FLV for Flash video or SHOCKWAVE > Choose the video file by navigating to the video folder > Click ok.

The used of flash file in Panglima Bukit Sadok Webpage

The used of video file in Panglima Bukit Sadok Webpage

18


4. Designing Navigation System

Navigation Design by using DHTML

19


5. Save and Publish the Web

Each HTML page shall be saved as HTML (.html) document in the root folder.

20


PANGLIMA BUKIT SADOK WEBSITE SCREENSHOTS

Index Page Background Page

Homepage

21



CGI Page Digital Illustrations Page

Photos page

22



Sketches Page Video Page

Team Team page

23

CHAPTER IIILLUSTRATIONS OF PANGLIMA BUKIT SADOK

OBJECTIVE

This chapter will showcase some artworks of Panglima Bukit

Sadok in a form of Illustrations.

24PBS Concept Board

Chapter 2 \ Illustrations of Panglima Bukit Sadok

25PBS Concept Board


26PBS Sketches


27PBS Sketches


28PBS Images Study


29

CHAPTER IIICGI FOR PANGLIMA BUKIT SADOK

OBJECTIVE

This chapter will showcase some artworks of Panglima Bukit

Sadok in a form of CGI

30

CGI For Panglima Bukit Sadok

Chapter 3 \ CGI of Panglima Bukit Sadok

31Guideline For PBS Character Animation

Chapter 3 \ CGI of Panglima Bukit Sadok

32

Chapter 3 \ CGI For Panglima Bukit Sadok

THE TASK PROCESS

1. PRE-PRODUCTION

Idea and development of design

33


THE TASK PROCESS

2. PRODUCTION

Building the 3D character body with basic polygon meshes from scratch .

34


THE TASK PROCESS

2. PRODUCTION

Building the head of PBS with polygon modelling method.

35


THE TASK PROCESS

2. PRODUCTION

Detailing the PBS model with Iban warrior costume

36


THE TASK PROCESS

2. PRODUCTION

The warrior costume of PBS

37


THE TASK PROCESS

2. PRODUCTION

The complete 3D model of PBS

culture preservation through web media development: panglima bukit sadok

Documents