MODULE 1 DESIGNING

1
MODULE 1 DESIGNING DEVELOPING EFFECTIVE
ACADEMIC WEBSITE
Noorazizun Mohd Saad Lecturer Information Systems Department College of Information Technology Universiti Tenaga Nasional (UNITEN) noorazizun_at_uniten.edu.my T.J. Iskandar Bin Abd. Aziz Web Manager - Public Affairs Department Lecturer - Graphics Multimedia Department College of Information Technology Universiti Tenaga Nasional (UNITEN) tjiskandar_at_uniten.edu.my
2
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

3
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

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

5
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
• Dos Donts
• Learning Extensions
• Example

6
Planning the Web site

• Design strategy
• Purpose
• Audience
• Web categories
• Define the planning documents
• Organizational Navigational structure

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

8
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

9
Planning the Web site ? Web Categories

• 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

10
Planning the Web site ? Define The Planning
Documents

• Flowcharts
• is a schematic representation of an algorithm or
  a process.

11
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

12
Planning the Web site ? Organizational
Navigational Structure

• 1. Hierarchical
• 2. Linear
• 3. Nonlinear

A hierarchical organization structured in a way
such that every entity in the organization,
except one, is subordinate to a single other
entity.
13
Planning the Web site ? Organizational
Navigational Structure

• 1. Hierarchical
• 2. Linear
• 3. Nonlinear

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.
Topic 1
Topic 2
Topic 3
Topic 4
14
Planning the Web site ? Organizational
Navigational Structure

• 1. Hierarchical
• 2. Linear
• 3. Nonlinear

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.
Topic 1
Topic 2
Topic 3
Topic 4
15
Planning the Web site ? Organizational
Navigational Structure

• Hierarchical

16
Planning the Web site ? Organizational
Navigational Structure

• Hierarchical
• Linear

17
Planning the Web site ? Organizational
Navigational Structure

• Hierarchical
• Linear
• Interlinked

18
Planning the Web site ? Organizational
Navigational Structure

• Hierarchical
• Linear
• Interlinked
• Site Map

19
Develop the Web site ?Appearance

1. Consistency
2. Template
3. Content
4. Balanced Layout
5. Movement
6. Color Scheme
7. Independent Functional

20
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

21
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

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

23
Do Donts
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
24
Do Donts
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/
25
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

26
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?

27
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)

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

• 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

29
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

30
Examples WBL Courseware
UNITARs Courseware Main Page
31
Examples WBL Courseware
Title Page with Learning Objectives
Content Page with Flash Animation
32
Materials for a particular course (lab handouts,
slides, assignments), could be organized and
stored online
Example of a simple website that a lecturer could
create to made their course materials available
to the students, anytime and anywhere. http//met
alab.uniten.edu.my/nazrita/
33

• 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..?

34
Example of A Course Website(Simplified
Courseware)
The main page of the course website for
CMPB474 http//metalab.uniten.edu.my/iskandar/CMP
B474/index.html
35
Easily accessed menu are always available for the
learners to navigate around the site
Objectives for each modules / topics / chapter
are provided
36
Example of A Course Website
Adobe PDF documents can be integrated in any pages
37
Example of A Course Website
Detail information of each lecturer teaching the
same subjects (timetable, email, contact no, etc)
are easily accessible
38
Example of A Course Website
Course owner can post important announcement to
any sections / students anytime, anywhere.
39
Examples of Coding/Scripts

• //Course Info
• level1ID 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.ht
  m", "About your section")
• level2ID theMenu.addEntry (level2ID,
  "Document", "Lecturer Info", "section/lecturer.htm
  ", "About your lecturer")