Chapter Objectives:1.Understand the Internet and its associated key terms.2.Describe the World Wide Web and its associated key terms.

INTRODUCTIONWeb Design and Development

Internet – worldwide collection of networks that links together millions of businesses, the government, educational institutions, and individuals using modem, telephone lines, and other communication devices and media.

Network – consists of 2 or more computers connected for the purpose of sharing information and resources.

World Wide Web (WWW or Web) – is the part of the internet that supports multimedia and consists of a collection of linked documents.

Web Pages or Web Document – documents or pages of information linked in the Web.

Terminologies

textgraphics

soundanimation

video

Different types of information

Web Site or Web Presentation – is a collection of Web pages that are created and maintained by any institutions or even an individual.

Web Server or Host – a computer where the web pages are stored and connected to internet.

Publishing – copying files or web pages into a web server

Hyperlink or Link – is used to connect a Web page to another Web page on the same, or a different Web server located anywhere in the world.

-an address identifying a computer file path name or URL in a Web page-clickable to access another location on the same page, another Web page stored on that Web site or Web Page stored somewhere else on the internet.

Hyperlink documents – files containing hyperlinks.

HTML (Hypertext Markup Language) – is a set of special instructions to create Web pages.

Hypertext – system of linked information

URL (Uniform Resource Locator) – a unique address that identifies Web pages

http (Hypertext Transfer Protocol) – standard for communication that governs transfer of several types of Web objects.

ftp (File Transfer Protocol) – allow files to be downloaded from a particular site to another computer.

Domain – identifies the computer where the document is stored.Samples:

.fi - country

.org - organization

.edu - educational institution or school

.gov - government agency

.com - commercial enterprise

.net - Internet service provider

Markup or Tags – codes that specify links to other documents as well as how the page is displayed.

Subdirectories or Path – identifies the exact location on the computer

HTML document – last URL entry

Web browser or browser – is a software program that enables access, view and navigate all the documents on the web.

Some examples of Web Browser:-Netscape Navigator-Microsoft Internet Explorer-Mosaic-Mozilla Firefox-Safari (Apple)

Viewers – individuals who access and look at Web pages

Two Kinds of Viewer:Surfers – people who simply access pages and look at themUsers - people with a decided interest in the pages

Homepage – the first page the viewer sees on reaching the site.

Intranet – an Internet-like network that is internal to an organization

Extranets – an Internet-like network joining business organizations with common interests.

Parts of a Web Page:Web Page Title – the first element that can be seen, it identifies the subject or purpose of the page.

Web Page Body – contains the information that displays in the browser window

Background – the Web pages’ wallpaper familiar to Windows

Normal Text - is the text that makes up the main content of a Web page.

Headings – are larger or bolder text used to set off different paragraphs of text or different sections of a page.

Image, graphic or inline images – is an important element of a Web page, represents objects such as icons, bullet, line, photo, illustration or other picture.

Horizontal rules – are inline images that display lines across the page to separate different sections.

Hyperlink or link – is one of the most important elements of a Web page, they not only serves as the primary way to navigate between pages, they distinguish the Web page as a unique repository of information. Usually it has a given color different from the normal text for easy distinction.

Internet Resources and Application

World Wide Web (WWW)The Web is the most eclectic Internet application. It

consists of countless sites supplied by entities too numerous to count that are connected by a vast labyrinth of computers

GopherAn early internet tool, it is a text-only menu-based

interface for accessing internet documents.

Wide Area Information Service (WAIS)A text-only index of internet databases that acts as a

search engine. It is a system that looks for documents that contain keywords entered by users and the returns a list of documents rated on how closely they matches the search criteria.

Electronic Mail (E-mail)Electronic mail was developed in the early days of the

Internet and is currently popular and widely used application. It is a mean of communication by simply writing messages on their computers and electronically sending to its recipients’ computers.

ListservsListservs are similar to e-mail in that message is sent

to an electronic mailbox for lateral retrieval. E-mail messages are addressed to individual recipients, whereas listserv messages are addressed to the listserv’s address and are forwarded only to subscriber’s electronic mailboxes.

Usenet NewsgroupsA conferencing bulletin board system that has been in

existence since1980’s and it acts as a discussion and information exchange forum for specific topics.

Chat ForumsChat forums are themselves off from listservs and

Usenet newsgroups by allowing participants to exchange live, real-time messages. Instead of conversations done in telephones, in response the participants type in messages to which others immediately respond. Internet Relay Chat (IRC) software must be installed to access chat forums.

Communication Models and the World Wide Web

One-to-many – one source speaker at one time to many people who comprise a homogenous mass audience.

Media Used: broadcast, cable, satellite television, radio, print media, books, magazines, and theatrical films.

One-to-one – one source speaker and one receiver.

Media Used: Telephone, e-mail, letters and video streamers.

Many-to-one – combination of computer system and the internet; it a cross between mass broadcasting and interpersonal communication. Information through different sources is stored into one until retrieved by individual.

Media Used: Large mainframe computers, local or wide area networks.

Three Criteria in Designing Web Presentation

1.Effectiveness – rational criterion (complete, sensibly organized, and accurate)

2.Affectiveness – emotional criterion (interesting, stimulating and enjoyable)

3.Navigaitonal Efficiency – users can easily use, locate the information they want

End of Lesson 1 and Lesson 2

Three Basic Purpose of Designing Web Presentations

1. To Inform (Informational Page) – to provide the user with information that he/she wants and currently doesn’t have. The user wants to obtain facts, learn something, or better understand something.

Informational pages should answer questions such as:What is it?Where is it?When does it take place?Who does it?How does it work?How much does it cost?How do I buy it?

Information Objects: Maps, tables, charts, graphs, simulations, animated illustrations and audio/video clips.

Criteria: Effectiveness such clarity, simplicity, directness and reinforcements

2. To entertain (Entertainment Page) – to provide amusement, relaxation or diversion. User’s want to have fun, play a game or engage in a new experience.Entertainment pages should have the following emphasis:

•Whimsical•In variety of attractions and other forms of amusements•Tent to surprise the user•Action packed•Criteria: Affectiveness criteria

3. To enable exchange (Exchange page) – allow users to perform some useful action – buy, submit information, request information, answer questions, or otherwise interact with the site.

Exchange pages should have the following emphasis:•Advertisements•Persuasion•Fact access•Search engine equipped

Information is in the forms of•Interactive order forms•E-mail addresses•Registration forms•Toll-free phone numbers

Threads between Web pages – is composed of the information on a series of Web pages, with hyperlinks identifying the location of the information and providing access to it. Primary purpose is to exchange, but in a complete Web presentation should contain the three elements.

The Roles of Web Creators and the Reactions of Users

Web Creators:1. Presenter: The Ultimate Decision Maker

Presenters are the people representing a corporation or organization who are responsible for deciding the scope of the Web application and for allocating resources to it.

Decides on:the overall strategy that determines what information to present on the Web

what information not to present

what resources will be needed in terms of personnel and funding

what information should be shared not only with current customers but also to the rest of the world

2. The Information Steward: Keeper of InformationIt is a person who manages someone else’s property,

finances or affairs, usually their employer’s information.

Roles:same as the presenter, though they may not participate in the design process but as guardians, their cooperation and approval are absolutely necessary

they present organization, it might include managers of public relations

to determine who Web users are and then consequently their wants and needs

they participate in testing the information and threads to make sure they match the needs of one or more user groups.

3. The Designer: Technical Guru, Wordsmith, Media DeveloperRoles:

they are responsible for developing a Web application, beginning with information and materials collection and ending with a fully operational application

create a Web presentation that achieves mutual understanding between presenters and users while meeting the demands of information stewards

they must be able to generate a variety of design alternatives

they must be familiar with many different approaches to Web page presentation

they must be able to estimate each alternatives if it satisfies the purposes of the users, presenters and stewards.

they must be able to communicate to others (programmers, graphic artists, writers, managers and co-designers)

Knowledge and Skills needed by Web presentation Designers

1. Understand of information, semantics2. Ability to translate information into a structure3. Ability to translate instruction into text and pages4. Artistic sensibility that translate into capacity for visualization, color sense, page layout, multimedia selection and use.5. Capacity for language selection and use.6. Facility with multimedia technology, selection, item creation techniques, implementation, Web storage.7. Facility with database technologies, Web access, security.

Web Designer’s verbal abilities:understand the meaning of the words

interpret the importance of variations on the meanings for the company

translate the company’s information into coherent text

link ideas from multiple departments into coherent interpretation of the organization and its information

Visual Skills – refer to the ability to be mindful of user and technical limitations

Required knowledge to acquire Visual skills:

multimedia tools and techniques

multimedia selection

graphic design

page layout

multimedia design capabililities

Technical Skills – refer to the skills to translate pages and multimedia designs into digital realm

Required knowledge to acquire technical skills:proficiency in programming languages

the ability to break down a problem into solvable sections

specialized code for Web access, data manipulation, Web and local security and Web storage techniques.

Understanding the UsersUsers visit a web site without preconceived ideas. They

have a model of the world in their heads, a mental map, built on the basis of their culture and experience, which provides structure for their thoughts and actions.

Designing a Web site must use an organizational scheme that matches users’ mental map as closely as possible, information must be presented in such a way that it makes intuitive sense to user.

Users Reactions to Web Presentation

it must first attract the user’s attention or the concentration of the user’s mental powers on the Web pages

it must be sufficiently rewarding

it should stand out from the rest or because it responds to the user’s needs

User’s Responses

Emotional Responses – joy, excitement, serenity, anger or revulsion

Mental Responses – selection, combination, separation, correction, completion, synthesis, abstraction, simplification and problem solving

Information anxiety – is an uncomfortable feeling of dread that occurs when a person feels unable to understand a situation

Information proficiency – is the opposite of information anxiety, that is, the feeling of competence and complete understanding.

End of Lesson 3 and 4