Fundamentals of Internet Programming 2020

Chapter Two
Web Design and Development
Gathering requirements
– The first stage of any web designing project
– Is the process of understanding client’s requirement in a detailed manner.
– Sources
• Users
• Reports
• Forms
• Procedures
– Techniques
• Interviews
• Questionnaires
• Observation
• Document
– Objective of Gathering requirements
– Establish a deep understanding of the intended users and their environment
– Identify users’ unfulfilled needs
– Specify which of those needs should be meet
– To clearly and thoughtfully understand the key goals, mission and derivatives of
the project.
– To have a right picture of target audiences
– To make the client-company relationship trusted
– To reduce the chances of delivering unfocussed business solutions.
– To eliminate project rework possibilities
– Requirements gathering may occur throughout the product lifecycle. Traditional
processes establish the requirements at the beginning of the process.

1 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020

Information organization and architecture

• Information architecture
– Is the art of defining the structure, organization, navigation, labeling and indexing
of a Website.
– focuses on the structure or organization of a web site
• How the different pages of the site relate to one another
– The person who decide how a site should be structured, what kind of content it
should host, and how to accommodate future growth is called information
architect.
• The role of the Information Architect
– Clarify the mission and vision for the website;
– Determines the information structure and functionality of the website;
– Defines the navigation, labeling and searching systems;
– Defines how the website is will accommodate to future changes.
• Information architecture
• involves such activities as
• Organization and Clustering of the pages
• Labeling, search techniques, and navigation design
• Information Organization & Clustering
– Information organization
• The most important step in developing your website is organizing your
information.
• Steps to build a usable information structure:
• Divide the content into logical units;
• Chunk the information into sections and subsections (clusters);
• Think about which sections are more important;
• Think about how the sections relate to one another;
• Build links between related sections.

2 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020

• Labeling Systems
– Labels are concepts that represent chunks of information.
– The About us page of a website, for instance, may include:
• background information;
• Relevant addresses;
• Other contact information.
– Labels must be clear and intuitive to be effective.
• Navigation Systems
– Navigation concerns
• Location
• Where should the links be placed on the page?
– Global Navigation : appear in every page and enable user to quickly jump
between sections
– Local Navigation : can be list of topics, menu of choices or list of related items
• Searching Systems
– Searching
• When designing a searching system for a website, the information
architect have to consider the following points:
• The level of searching skill users have;
• The kind of information users want;
• The type/format of information being searched;
• How much information is being search

3 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020

• Effective information architectures enable people to quickly, easily and intuitively find
content. This avoids frustration and increases the chance that the user will return to the
system the next time they require similar information.
Information visualization
• Information Visualization is the science of transforming given information into an easily
perceivable and illustrative form.
• Visualization links the two most powerful information processing systems known—the
human mind and the modern computer
• A process, it transforms data, information, and knowledge into a visual form.
• visual properties
• Position
• color

4 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020
• size
• Font etc.
• Effective visual interfaces enable us to observe, manipulate, search, navigate, explore,
filter, discover, understand, and interact with large volumes of data far more rapidly and
far more effectively to discover hidden patterns.
Evaluating Web Resources
• Criteria in order to Evaluate Web Resources
– Authority
– Accuracy
– Objectivity
– Currency
– Coverage
– Design
• Authority
– Is there an author or sponsoring organization?
– Is the page signed?
– Is there a link to information about the author or sponsor?
– Is there a way of verifying the legality of the page's sponsor? That is, is there a
phone number or address to contact for more information?
– What is the website’s extension?
• .com
• .edu
• .org
• .gov
• Accuracy
– Is the information accurate?
– Facts documented or well researched
– Is the information reliable and error-free?
– Is there an editor or someone who verifies the information?
• Objectivity
– Purpose

5 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020
• What is the purpose/objective of the website? is the purpose of the site
clear,
• Public service
• Educational
– Advertising
• Is the information free of advertising?
• If there is any advertising on the page, is it clearly differentiated from the
informational content?
• Currency
– Is the page dated?
– If so, when was the last update?
– Have the links been kept current?
• Coverage
– Relevant
• Is the content relevant to my topic?
• Is the information useful?
– Complete
• Is there an indication that the page has been completed, and is not still
under construction?
– Compare
• How does the website compare in content to similar websites?
• What does this page offer that is not found elsewhere?
• Design
– Navigation
• Are the links clearly labeled?
• Can you move from page to page easily?
• Can you find information easily?
– Interactivity
• Does the user engage with the site?
• How long does it take to load?
– Appearance

6 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020
• Is there good use of graphics and color?
• Can the page be read without excessive scrolling?
The Nature of web design
• browser version
– One of the biggest challenges in designing for the web is dealing with the
different browsers.
– In the past browsers were so incompatible that web authors were forced to crate
two separate sites one for internet explorer and one for Netscape
– Things have improved dramatically now that browsers have better support for
web standards by the World Wide Web consortium (W3C).
– Nearly all browsers in use today support HTML 4.01And XHTML standards with
only a few exceptions.
• deal with with various browser versions
– Stick with standard
– Start with good markup
– Don’t use browser specific (x)html element
A web page, step by step
 Step 1: start with content
 Step 2: give the document structure
 Step 3: identify text elements
 Step 4: add an image if any
 Step 5: change the look with a style sheet
Step 1: start with content
Rules Naming Conventions
– Use proper suffixes for your files:- HTML files must end with .html (some servers
allow .htm).
– Never use character spaces within filenames
– Avoid special characters such as?, %, #, /, :, ;, •, etc.
– Filenames may be case-sensitive, depending on your server configuration
What Browsers Ignore

7 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020
– Line breaks (carriage returns)
– Tabs and multiple spaces
– Unrecognized markup
– Text in comments
• Anything you put between comment tags (<!-- -->) will not display in the
browser and will not have any effect on the rest of the source.
Step 2: give the document structure
• Elements are identified by tags in the text source.
• A tag consists of the element name (usually an abbreviation of a longer descriptive name)
within angle brackets (<>)
• The tags added around content are referred to as the markup
• It is important to note that an element consists of both the content and its markup
< element name >content here</ element name >
E.g.<h1>black lion </h1>

8 Compiled by Tadesse K.
 Fundamentals of Internet Programming 2020

Step 3: identify text elements

• Block-level and inline element
– Block-level element: - each block-level element begins on new line and space is
also usually added above and below the entire element by default.
e.g. header(h1-h5) and paragraph(p)
– Inline element:-do not start new line :they just go with flow.
Step 4: add an image
• If there is an image add an image to the page using the img element <img>
Empty element
– Empty elements are do not have text content b/c are used to provide a simple
instruction
e.g. image element(img)
line break(br)
Step 5: change the look with a style sheet
• change the layout of the page By using CSS
When good web page go bad
• The following are same typical problem that crop up when crating web page & viewing
them in browser
– Problem:- When I reload the page in my browser it look the same
Cause: - if you didn’t save your html document with proper suffix .html or .htm
this problem may occur.
– Half of my page dis appeared
Cause: - if you didn’t put close bracketafter the element name or you missclosing tag this
problem may occur
– Image put using img element but all that shows up is a broken graphics icon
Cause: - if you didn’t proper suffix for your image or you didn’t give proper path
of the image this problem may occur.

9 Compiled by Tadesse K.