390 likes | 580 Vues
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 sitedescribe the best practices in developing academic websit
E N D
1. MODULE 1 DESIGNING & DEVELOPING EFFECTIVE ACADEMIC WEBSITE
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
Do’s & Don’ts
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
13. Planning the Web site ? Organizational & Navigational Structure 1. Hierarchical
2. Linear
3. Nonlinear
14. Planning the Web site ? Organizational & Navigational Structure 1. Hierarchical
2. Linear
3. Nonlinear
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 Consistency
Template
Content
Balanced Layout
Movement
Color Scheme
Independent & Functional
20. Develop the Web site ? Interactivity User Interface
User Access and Control
Quick to Load
Link Effectively
Sense of Context
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.
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. 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
29. WBL features
34. Example of A Course Website(Simplified Courseware)
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.htm", "About your section");
level2ID = theMenu.addEntry (level2ID, "Document", "Lecturer Info", "section/lecturer.htm", "About your lecturer");