You are on page 1of 33
 Designing is a process of creating a plan and originating the development of a specific
  • Designing is a process of creating a plan

and originating the development of a specific product.

  • In most cases the meaning of “product

design” refers only to the product's

appearance rather than to its

construction, architecture and technical

specifications.

 Web design itself refers to the process of creating a web page’s appearance and to
  • Web design itself refers to the process of creating a web page’s appearance and to the choice of a right color scheme, page layout, fonts and more.

Websites - is a collection of web pages that are under 1 domain (ex. : coolwebsite.com).

Websites - is a collection of web pages that are under 1 domain (ex. :

coolwebsite.com).

Web Pages - is an independent page of

a Website. For example a webpage

would be the testimonials page.

 Writing a Web page is easy  It takes an hour to learn  Web
  • Writing a Web page is easy

  • It takes an hour to learn

  • Web pages use what we call HTML

HyperText Markup Language

  • All word processing packages are moving towards HTML documents as the standard document format.

  • This is now a required skill!

 Web pages consist of three components › Plain ASCII text › HTML Tags › Scripts
  • Web pages consist of three components

Plain ASCII text HTML Tags Scripts and/or applets

  • Scripting languages and applets give

power to the Web page design, but

require somewhat more skill.

 HTML Tags are any of a set of commands found inside the Tag delimiters <…>
  • HTML Tags are any of a set of commands

found inside the Tag delimiters <…>

  • Thus

B is the letter B But <B> mean the following text will be in bold print.

And </B> mean the following text will no longer be in bold print.

  • HTML tags may be either upper or lower case

I recommend UPPERCASE for Readability.

Thus <B> and <b> both work, but <B> will be easier to see when you read the source code.

 Web Pages often have a section called the Header  It is found in between
  • Web Pages often have a section called the Header

  • It is found in between the

<HEAD> and </HEAD> Tags

  • It contains information not visible on the page but perhaps important for the document

 The Title  Put a title on a page, and that will be displayed in
  • The Title

  • Put a title on a page, and that will be displayed in the Title bar of the explorer

window

Try

  • <TITLE>My First Web Page!</TITLE>

  • Authoring Info

  • Keywords

 Anything you want on the page  Commonly found components › The text you want
  • Anything you want on the page

  • Commonly found components

The text you want read Images Links to other web pages Lists Tables Background information/color scheme

 Before you start designing your web page, you have to figure out what sort of
  • Before you start designing your web page,

you have to figure out what sort of a web

page it’s going to be and what contents it

should have. All this information is needed

in order to successfully design a web page.

  • You need to know the type of the page, because there are different methods of approach when you design a static or a dynamic web page.

 You need to know the type of the page, because there are different methods of
  • You need to know the type of the page, because there are different methods of approach when you design a static or a dynamic web page.

 You also need to know the contents of the web page, because you need to
  • You also need to know the contents of the web page, because you need to arrange them within the page's layout.

  • There are different types of content - text, images, videos, animations and

other dynamic elements. In order to

create a successful web page you need to put the right content in the right place.

 It is very important to consider what the page’s purpose will be when you start
  • It is very important to consider what the page’s purpose will be when you start

sketching it. Creating the basic layout,

color scheme and arranging the

content, is the second important step.

• Purpose › The purpose of the site should be clear, along with the intended audience.

Purpose

The purpose of the site should be clear, along with the intended audience.

Educational sites should relate to standards

for the subject matter addressed. A section

called About this Site is valuable.

 Credibility : • The author’s credibility should be evident • Personal Web sites should contain
  • Credibility:

The author’s credibility should be evident

Personal Web sites should contain information about the author.

Teacher Web sites should include their school’s name (many don’t), and schools should identify the district in

which they are located, for example.

 Content • The site emphasizes accurate information. • The reading level should be appropriate for
  • Content

The site emphasizes accurate information.

The reading level should be appropriate for intended audience.

References are available.

Links to additional information on topics discussed should be provided.

 Site accessibility:  Content should be accessible by all users.
  • Site accessibility:

    • Content should be accessible by all users.

 Navigation/Layout: • Users require only a few clicks to find the information they seek. •
  • Navigation/Layout:

Users require only a few clicks to find the information they seek.

Information is chunked, so as not to overwhelm the user.

Menus are used.

Navigation elements consistently appear on all pages

 Multimedia: • Text might be presented on the middle 50% of the page for long
  • Multimedia:

Text might be presented on the middle 50% of the page for long documents meant to be read entirely online, as reading online is generally slower than reading printed pages.

 Page Dates/URLs:  Pages should display the date on which they were last updated. 
  • Page Dates/URLs:

    • Pages should display the date on which they were last updated.

    • A page URL listed at the bottom of the page will help users who print out content to have a record of its source,

but this feature is not as commonly

found.

 Search/Viewing Support: • Look for a search function at sites with many pages, and links
  • Search/Viewing Support:

Look for a search function at sites with many pages, and links to plug-ins for viewing certain types of content, such as pdf files and video

 Contact information: • Contact information should include mailing address, telephone/fax including area code, and email
  • Contact information:

Contact information should include mailing address, telephone/fax including area code,

and email to school officials.

Include the individual who maintains the web site, as often visitors can report errors on web pages or suggestions for content directly to that individual.

 Confirmation: • Sites that permit users to fill-in forms to email the organization, respond to
  • Confirmation:

Sites that permit users to fill-in forms to email the organization, respond to questionnaires online, or provide other content should include a confirmation page to acknowledge their entries.

 The information is available to be accessed by anyone, anywhere, anytime.  The information within
  • The information is available to be accessed by anyone, anywhere, anytime.

  • The information within a site can be quickly accessed. There is no need to sift through several pages.

  • The site may provide links to other sites on the same topic

  • The site can be updated to always provide the latest information.

  • The site creator/author doesn’t need to be present when someone is retrieving information.

  • The author can usually be contacted through an emailing address or a message board connected to the site.

 There is no need to carry a hard copy of information with you. (No heavy
  • There is no need to carry a hard copy of information with you. (No heavy book)

  • You can look at more than one page or source at the one time by having numerous windows.

  • Information is easy to gather and print selectively.

  • Easy to use the information to create your own resource.

  • You can peruse the information at leisure taking as

much time as needed.

  • Saves a trip to the library.

 It may be difficult for researchers to locate, especially if there are many similar sites.
  • It may be difficult for researchers to

locate, especially if there are many similar sites.

  • The information on the site may not be

reliable.

  • Information may be interpreted incorrectly or used inappropriately.

 A connection to the web is needed to access the information, which will be impossible
  • A connection to the web is needed to access the information, which will be impossible if a computer and connection is not available.

  • Because the author is not present when others are retrieving information there is no opportunity to ask questions or have

things explained in greater detail etc.

  • Site may be difficult to use if experience with the internet is limited.

to disseminate static information;
to disseminate static information;

to share news and other changing information;

to provide resources related to course

content; to facilitate interaction, and;

to act as a growing repository of knowledge related to the course

 to present information;  provide interactions of various types on the Web;  to provide

to present information;

provide interactions of various types on the Web;

to provide connections or links to information and interactions elsewhere on the Web.

• be designed with characteristics of the targeted learner in mind • consider how learners read

be designed with characteristics of the targeted learner in mind

consider how learners read and process text

how they might navigate through a potential maze of hyperlinks

Provide a general page of links that are grouped together to reflect their content

THANK YOU!!!

Have a good day