Top Banner
MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology Universiti Tenaga Nasional (UNITEN) [email protected] T.J. Iskandar Bin Abd. Aziz Web Manager - Public Affairs Department Lecturer - Graphics & Multimedia Department College of Information Technology Universiti Tenaga Nasional (UNITEN)
39

MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Dec 25, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

MODULE 1 DESIGNING & DEVELOPING

EFFECTIVE ACADEMIC WEBSITE

Noorazizun Mohd SaadLecturer – Information Systems DepartmentCollege of Information TechnologyUniversiti Tenaga Nasional (UNITEN)[email protected]

T.J. Iskandar Bin Abd. AzizWeb Manager - Public Affairs DepartmentLecturer - Graphics & Multimedia DepartmentCollege of Information TechnologyUniversiti Tenaga Nasional (UNITEN)[email protected]

Page 2: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Objectives

• Upon completion of this module, you should be able to: – understand basic terms and concepts related

to Internet and the World Wide Web (WWW)– understand basic processes in planning,

designing, developing and implementing a web site

– describe the best practices in developing academic website

Page 3: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

General Terms And Concepts

• What is the Internet ? The Web ?• Internet and the Web are not the same thing !!!• Internet = collection of computers and other

devices connected by equipment that allows them to communicate with each other

• The Web or WWW (world wide web) = a collection of software and protocols that has been installed on most, if not all, of the computers on the Internet

Page 4: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

General Terms And Concepts

• A Web page is a simple text file that contains not only text, but also a set of special tags (such as HTML) that describe how the text should be formatted when a browser displays it on the screen.

• A Web site is a collection of Web pages that are created and maintained by a company, a university or college, a government agency, or even an individual.

Page 5: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Building A Web Site

• Planning the Web site– Strategy, Categories, Planning Documents,

Navigational / Organizational structure

• Develop the Web site– Appearance & Interactivity

• Implement the Web site– Do’s & Don’ts

• Learning Extensions• Example

Page 6: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site

• Design strategy– Purpose – Audience

• Web categories

• Define the planning documents

• Organizational & Navigational structure

Page 7: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Design strategy

1. Purpose – How will users be using this Website?– Why will users want to visit the Web site?– What will users gain from this Web site?– What type of features will be most useful to

the users of this Web site?– Example:

• The Web site will give students access to all course requirements including a syllabus, list of assignments, due dates and staff information.

Page 8: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Design strategy

2. Audience– For what purpose does the target audience use the

Web?– What type of Web sites does the target audience

frequent?– How does the target audience spend its time online?– What interests, beliefs, and values does the target

audience have in common?– What are the demographics of the target audience?– Then, create specification based on:

• Multimedia elements• Functionality• User interface

Page 9: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Web Categories

1. Static- Normally for self-branding- Electronic copy of brochure- Little or no interactivity- Example: http://metalab.uniten.edu.my/~june

2. Dynamic- Provide information AND offer some interactivity

such as email, searches, questionnaires and order processing.

- Example: http://www.google.com

Page 10: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Define The Planning Documents

1. Flowcharts- is a schematic

representation of an algorithm or a process.

Page 11: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Define the planning documents

2. Storyboards• Helps designer to

visualise: – website structure – navigation patterns– page layout

• Can be used to design a rough layout for homepage and sub-pages

Example

Page 12: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Organizational & Navigational Structure

1. Hierarchical

2. Linear

3. Nonlinear

homepage

Main topic 1 Main topic 2 Main topic 3

Topic 1.1 Topic 1.2 Topic 2.1

A hierarchical organization structured in a way such

that every entity in the organization, except one, is subordinate to a single

other entity.

Page 13: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Organizational & Navigational Structure

1. Hierarchical

2. Linear

3. Nonlinear

Topic 1 Topic 2 Topic 3 Topic 4

A linear organization structured in a way such that it has a set

sequence that must be followed in order for information to make

sense.

Page 14: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Organizational & Navigational Structure

1. Hierarchical

2. Linear

3. Nonlinear

Topic 1 Topic 2 Topic 3 Topic 4

A nonlinear organization structured in a way such that there are links from

one piece of information to another. It uses no

prescribed or sequential path.

Page 15: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Organizational & Navigational Structure

• Hierarchical

Page 16: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Organizational & Navigational Structure

• Hierarchical

• Linear

Page 17: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Organizational & Navigational Structure

• Hierarchical

• Linear

• Interlinked

Page 18: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Planning the Web site Organizational & Navigational Structure

• Hierarchical• Linear• Interlinked

• Site Map

Page 19: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Develop the Web site Appearance

1. Consistency

2. Template

3. Content

4. Balanced Layout

5. Movement

6. Color Scheme

7. Independent & Functional

Page 20: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Develop the Web site Interactivity

1. User Interface

2. User Access and Control

3. Quick to Load

4. Link Effectively

5. Sense of Context

6. Choices & Escapes

Page 21: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Implement the Web site The DO'S and DON'TS of Web Design

• Don't use background music on your web pages! • Don't create automatic pop-up windows! • Don't automatically resize a visitor's browser window • Don't automatically redirect visitors except in very special

circumstances. • Don't center everything on your web pages. • Don't set your type to all capital letters in your body text• Don't have more than a few words in italics or bold• Don't use too many colors in your web site

Page 22: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Implement the Web site The DO'S and DON'TS of Web Design

• Do keep the structure of your web pages consistent throughout your website.

• Do use standard styles for your navigation

• Do make you web pages viewable at 800 x 600 resolution

• Do create a site map page.

• Do keep your web pages under 60k in size.

Page 23: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Do Don’ts

The scope of design web sites

Do check the scope of the web site you are

designing.

Don't design heavy sites with several links if it is

used for personal purposes or representing

a small business.

The layout for design websites

Do the designing of the website according to the

requirement of the websites.

Don't ever try to heavily decorate a web page to

impress people

The compatibility of design websites

Do check that the design website is compatible

with the major browsers which are being used in

the world.

Don't upload your websites on server if

they are not run on most common browsers

Page 24: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Do Don’ts

Documentation of design websites

Do make sure that the text on your design website is relevant

Don't fill your design sites with useless links

and irrelevant text as this diverts most of the traffic

from the web site

Safe and secure mechanism

Do make sure that your website is safe from viruses and hackers

Don't encourage the sharing of security

protocol and protection mechanism with the

general public

http://www.killersites.com/

Page 25: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Learning Extensions Using Templates or Create Your Own

• Using Templates – Layout is easy to follow– Colors are pre-set/typically good design– Images are easy to insert

• Create Your Own Design– Freedom to choose layout, colors, image

locations, links, etc…

Page 26: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Learning Extensions Saving Images & Uploading Documents

• Tips for saving images: – Save all images for a specific page in one folder.– Rename images something you will remember later!– Upload all images you think you might use at one

time.

• Know what your limitations are:– How much space do you need?– How many and what type of images can you upload?– Is there any cost?

Page 27: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Web-based Learning (WBL)a.k.a Online Instruction

• Any formal educational process in which the instruction occurs

• The learner and the instructor are not in the same place

• Internet technology is used to provide a communication link among the instructor and students.

• Different forms of online instruction include: – Share info on web site (i.e course syllabus, notes etc) – Provide practice for new concepts (online simulations &

games)– Communicate one-to-one or one-to-many (via email, video

conferencing, virtual classroom)

Page 28: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

• Different forms of online instruction include: – Conduct discussions and holding

office hours (using forum / bulletin, Chat, online tutorial)

– Deliver library resources via the Internet (Electronic databases, electronic course reserves)

– Give practice tests (using online assessments)

– Submit assignments electronically

Web-based Learning (WBL)a.k.a Online Instruction

Page 29: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

WBL features

Customized WBL can include any of these features:• Content Indexing/ Search Function

• Hyperlink/hypermedia

• Modular Content

• Bookmarks

• Audio/Video

• Animation /Simulations/ 3D Graphics

• Flash Transitions

• Lab Assignments

• Reporting/Tracking

• Word Definition Referencing

• Module Summaries

• Online Assessment/

Quizzes

Page 30: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

UNITAR’s Courseware – Main Page

Examples – WBL Courseware

Page 31: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Examples – WBL Courseware

Content Page with Flash Animation

Title Page with Learning Objectives

Page 32: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Example of a simple website that a lecturer could create to made their course materials available to the students, anytime and anywhere.http://metalab.uniten.edu.my/~nazrita/

Materials for a particular course (lab handouts, slides, assignments), could be organized and stored online

Page 33: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

• Examples of simple course website created for CMPB474, CMPB425 and CMPF114 (UNITEN-COIT Courses)• Developed using Joust Outliner Version 2.5.4 (JavaScript Tool)http://www.ivanpeters.com/ • need to know a little bit of programming and creativity..

Page 34: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

The main page of the course website for CMPB474http://metalab.uniten.edu.my/~iskandar/CMPB474/index.html

Example of A Course Website(Simplified Courseware)

Page 35: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Objectives for each modules / topics / chapter are provided

Easily accessed menu are always available for the learners to navigate around the site

Page 36: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Adobe PDF documents can be integrated in any pages

Example of A Course Website

Page 37: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Example of A Course Website

Detail information of each lecturer teaching the

same subjects (timetable, email, contact no, etc)

are easily accessible

Page 38: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Example of A Course Website

Course owner can post important announcement to any sections / students anytime, anywhere.

Page 39: MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE Noorazizun Mohd Saad Lecturer – Information Systems Department College of Information Technology.

Examples of Coding/Scripts

//Course Infolevel1ID = theMenu.addEntry(-1, "Document", "Announcement", "docs/announce.htm", "Latest Course Announcement");

level1ID = theMenu.addEntry(-1, "Folder", "Course Information", "", "Info About The Course ");level2ID = theMenu.addChild(level1ID, "Document", "Course Outline", "docs/outline.pdf", "Course Outline");level2ID = theMenu.addEntry (level2ID, "Document", "Course Policies", "docs/policy.htm", "Important Policies");level2ID = theMenu.addEntry (level2ID, "Document", "Section Info", "section/allsection.htm", "About your section");level2ID = theMenu.addEntry (level2ID, "Document", "Lecturer Info", "section/lecturer.htm", "About your lecturer");

//Course Infolevel1ID = theMenu.addEntry(-1, "Document", "Announcement", "docs/announce.htm", "Latest Course Announcement");

level1ID = theMenu.addEntry(-1, "Folder", "Course Information", "", "Info About The Course ");level2ID = theMenu.addChild(level1ID, "Document", "Course Outline", "docs/outline.pdf", "Course Outline");level2ID = theMenu.addEntry (level2ID, "Document", "Course Policies", "docs/policy.htm", "Important Policies");level2ID = theMenu.addEntry (level2ID, "Document", "Section Info", "section/allsection.htm", "About your section");level2ID = theMenu.addEntry (level2ID, "Document", "Lecturer Info", "section/lecturer.htm", "About your lecturer");