konsep asas pembangunan laman web (proses & … · 2014. 1. 12. · konsep asas pembangunan...

http://www.ctl.utm.my

1

Kursus Asas Pembangunan Laman Web bagi Tujuan P&P

Department of Educational Multimedia, Faculty of Education

Centre for Teaching & Learning (CTL), Canseleri, UTM

KONSEP ASAS PEMBANGUNAN LAMAN WEB

(Proses & Rekabentuk)

2

fASILITATOR

CTLDr. Jamalludin HarunCentre for Teaching & Learning (CTL)

FPDr. Zaidatun TasirJabatan Multimedia PendidikanFakulti Pendidikan, UTM

FPEn. Shaharuddin Mohd. Salleh.Jabatan Multimedia PendidikanFakulti Pendidikan, UTM


2

3

iSI KANDUNGAN CERAMAH

Pembangunan Sepintas Lalu1

Proses Analisis2

Proses Rekabentuk3

Proses Pembangunan4

Proses Penilaian5

4

PENGENALAN

1

Apakah soalanpertama yang anda fikirkansebelum mula

membangunkanlaman web?

2

Apakah pula isuutama yang

anda rasakanpenting sebelum

mulamembangunkan

laman web?


3

5

PENGENALAN

Laman web dibangunkan oleh sekumpulan manusiabagi memenuhi keperluan sekumpulan manusia yang lain.

Namun demikian masalah yang sering timbul dalamproses pembangunan sebenar ialah isu teknologi yang lebih di ambil kira :

Flash, Shockwave, Animasi, Video, XML, ASP, PHP, Java, Real Media, Streaming Media dan sebagainya….

dan bukannya keperluan manusia yang perludipenuhi.

6

Pembangunan laman web sebenarnya memerlukanpakar dari pelbagai aspek :

PenerbitPakar bidang (Content experts) Penulis skripPerekabentuk Instruksi (Instructional Designer)Pereka Grafik/AnimasiPengaturcara

dan bukannya dipelopori oleh pakar atau ahliteknologi semata-mata.

PENGENALAN


4

7

PENGENALAN

Bagi memastikan sesebuah laman web yang dibangunkan menepati objektif atau matlamat ianyadihasilkan, perbagai panduan perlaksanaan fasa kerjadisediakan.

Proses menganalisis keperluan dan prosesmerekabentuk laman merupakan antara fasa kerjayang perlu diberi perhatian sebelum sesebuah lamanweb mula melalui proses pembangunan yang sebenarnya.

8

FASA ANALISIS

Dalam proses atau Fasa Analisis beberapa soalan perludijawab terlebih dahulu sebelum proses merekabentuklaman web boleh dimulakan.

Pada pandangan anda, apakah soalan-soalan tersebut ?

Matlamat pembangunan ?Objektif laman web ?Kumpulan sasaran ?Strategi penyampaian maklumat ?Rekabentuk laman web ?Masa pembangunan ?Perisian & perkakasan ?


5

9

3

RekabentukAntaramuka

FASA REKABENTUK

Proses rekabentuk boleh dibahagikan kepadabeberapa fasa atau kategori. Antara pembahagianfasa kerja yang utama ialah:

1

RekabentukInformasi

2

RekabentukInteraksi

10

FASA REKABENTUK: INFORMASI

Proses merancang dan mengatur isi kandungan dan maklumat yang ingin disampaikan.

Strategi penyampaian maklumat juga akan ditentukan di dalam bahagian ini.

Apakah contoh strategi penyampaian maklumat yang boleh digunakan?


6

11


TutorialLatihtubiSimulasi Permainan pendidikanPenyelesaian masalahPembelajaran menerusi kaedah pencarianPembelajaran aktifPembelajaran berasaskan projekPembelajaran berasaskan masalah

12


Uruskan maklumat secara berkesan Panduan umum:

Bahagikan isi kandungan kepada unit-unit kecilBina hieraki kepentingan di antara unit.Gunakan hieraki tersebut bagi membentuk hubungan di antara unit.Bina laman yang cuba memenuhi struktur yang telah dirancangkan.Analisis fungsi dan keberkesanan sistem yang dibangunkan.

Kesemua maklumat ini kemudiannya akan diringkaskan ke dalam bentuk cartalir laman web.


7

13

FASA REKABENTUK: INTERAKSI

Proses menentukan bagaimana laman webberfungsi dan beroperasi.

Perjalanan laman web yang akan dibangunkan akan dilakarkan.

Selain dari itu, jenis-jenis interaksi, sistem navigasiserta penetapan elemen kawalan yang lain bagi laman web akan ditetapkan.

Kesemunya ini kemudiannya akan dipersembah-kan dalam bentuk papan cerita atau storyboard.

14


Struktur Linear

Struktur Hieraki


8

15


Struktur Rangkaian

Struktur Lingkaran

Struktur Komposit

16


Elemen membantu pengguna melayari laman web:

Menyediakan carta aliran laman web andaMenggunakan konsep bingkai berbentuk “content outline”Memaparkan semula subtajuk yang dipilih.Memaparkan bilangan nombor muka surat di setiaphelaian.Memaparkan maklumat mengenai laluan di manapengguna berada.Menyediakan butang ke helaian lain di bahagianatas dan bawah laman web.


9

17

FASA REKABENTUK: ANTARAMUKA

Proses menentukan bagaimana rupa bentuk laman web yang akan dibangunkan.

Stail paparan dan susun atur pelbagai media yang akan digunakan ditentukan.

Ini meliputi pelbagai aspek seperti pemilihan warna, jenis media, bentuk paparan serta saiz media yang digunakan dan sebagainya akan ditentukan.

Seterusnya proses pembangunan prototaip atau templat bagi laman web yang akan dibangunkan akan dihasilkan.

18


Penggunaan teks : dari jenis sans serif seperti arial, tahoma, verdana dan century gothic.

Penggunaan grafik: .GIF dan .JPGJPG untuk imej realistik (gambar foto)...GIF untuk imej lukisan, teks, logo, ikon, garis...

Penggunaan animasi: Animasi GIF, Flash, Shockwave, Java...

Penggunaan audio/video: .MOV, .RM, .MPG, .ASF, .RA, .SWF


10

19


Panduan Asas Rekabentuk Antaramuka yang Baik

Rekabentuk berpusatkan penggunaBantuan navigasi yang jelasAntaramuka yang ringkas dan konsistenCapaian secara terusMasa muat turun yang pendekMenyediakan alternatifMampu berdiri secara sendiriMenyediakan sokongan penggunaMudah dicapai tanpa sebarang masalah besar

20

FASA PEMBANGUNAN

PembangunanLaman Web

B

E

C

D

APerisianPengarangan

Web

Perisian Multimedia

PerisianPengaturcaraan/

Skrip

PerisianSokongan

PerisianPenyelenggaraan/pangkalan data


11

21

FASA PEMBANGUNAN

A HTML, Notepad, Microsoft FrontPage, Macromedia Dreamweaver, NetObject…

B Adobe Photoshop, Fireworks, Macromedia Flash, Sound Forge, UleadGif Animator…

C ASP, PHP, JSP, Coldfusion, Javascript, Java, PERL…

D Microsoft Access, MySQL, Oracle…

E Shockwave, Flash Player, Adobe Reader, RealSystem, Quicktime…

PerisianPengarangan

Web

PerisianMultimedia

PerisianPengaturcaraan/

Skrip

PerisianPenyelenggaraan/pangkalan data

PerisianSokongan


SOALAN ?

konsep asas pembangunan laman web (proses & … · 2014. 1. 12. · konsep asas pembangunan...

Documents