Web engineering notes unit 2

Unit II/ Web Engineering St.Aloysius Institute of Technology, Jabalpur
Information architecture (IA)
IA is the art of expressing a model or concept of information used in activities that require
explicit details of complex systems. Among these activities are library systems, Content
Management Systems, web development, user interactions, database development,
programming, technical writing, enterprise architecture, and critical system software design.
Information architecture has somewhat different meanings in these different branches of IS or
IT architecture. Most definitions have common qualities: a structural design of shared
environments, methods of organizing and labelling websites, intranets, and online
communities, and ways of bringing the principles of design and architecture to the digital
landscape.
Role of information architect
An Information Architect organizes a website so that users have a better online
experience. In general, their main responsibilities are to:
 Assign tasks to team members.
 The Information Architect often doubles up as the Project Manager.
 Capture the site’s design goals.
 Communicate the business objectives, such as the site’s sales targets, audience,
and language requirements.
 Create access points to content from different in-coming pages.
 Design the navigation system, menus, sitemaps etc.
 Label and organize data.
 Map content to the appropriate section.
 Protect users from getting lost on the site.
 Before any coding begins, the Information Architect meets the client and defines
the project's scope, objectives and target audience.
Documentation of Success Criteria
The meeting minutes are then returned to the client for confirmation. Once confirmed, they’re
circulated to all members involved in the development process. When the project enters the
production stage, the Information Architect works with the web designers to develop the
interface, icons and ensure the navigation systems are integrated correctly with the overall
site architecture. For very complicated sections, the Information Architect and Software
Engineers work together to ensure that each site component make sense so that the user can
easily achieve their goal. The Information Architect communicates with the team during all
key stages in the development cycle. On small projects the Information Architect may
perform Project Management duties as these two areas frequently overlap. It is imperative to
record client feedback at all stages and circulate it accordingly.
Communication
Lack of planning at the kickoff phase often results in untold disasters at later stages-often
with serious financial repercussions. This may occur when, for example, the person delegated
to lead the project lacks sufficient technical understanding to extract relevant information
from the client. Finally, the Information Architect also works with the Quality Control team
Prepared By: Mr.Aditya Patel Page 1

to ensure that the site is performing correctly and, for example, by analyzing the log files,
identify areas where users are struggling to locate date or getting lost.
Collaboration and Communication
The information architect must communicate effectively with the web site development team.
This is challenging, since information architecture is highly abstract and intangible. Besides
communicating the architecture verbally, documents (such as blueprint diagrams) must be
created in ways that can be understood by the rest of the team regardless of their own
disciplinary backgrounds.
In the early days of the Web, web sites were often designed, built, and managed by a single
individual through sheer force of will. This webmaster was responsible for assembling and
organizing the content, designing the graphics, and hacking together any necessary CGI
scripts. The only prerequisites were a familiarity with HTML and a willingness to learn on
the job. People with an amazing diversity of backgrounds suddenly became webmasters
overnight, and soon found themselves torn in many directions at once. One minute they were
information architects, then graphic designers, then editors, then programmers. Then
companies began to demand more of their sites and, consequently, of their webmasters.
Simple home pages quickly evolved into complex web sites. People wanted more content,
better organization, greater function, and prettier graphics. Extensions, plug-ins, and
languages proliferated. Tables, VRML, frames, Shockwave, Java, and ActiveX were added to
the toolbox. No mortal webmaster could keep up with the rising expectations and the
increasing complexity of the environment. Increasingly, webmasters and their employers
began to realize that the successful design and production of complex web sites requires an
interdisciplinary team approach. An individual cannot be an expert in all facets of the
process. Rather, a team of individuals with complementary areas of expertise must work
together. The composition of this team will vary, depending upon the needs of a particular
project, available budget, and the availability of expertise. However, most projects will
require expertise in marketing, information architecture, graphic design, writing and editing,
programming, and project management.
Marketing: The marketing team focuses on the intended purposes and audiences for the web
site. They must understand what will bring the right people to the web site and what will
bring them back again.
Information Architecture: The information architects focus on the design of organization,
indexing, labelling, and navigation systems to support browsing and searching throughout the
web site.
Graphic Design: The designers are responsible for the graphic design and page layout that
defines the graphic identity or look of the web site. They strive to create and implement a
design philosophy that balances form and function.
Editorial: Editors focus on the use of language throughout the web site. Their tasks may
involve proof reading and editing copy, massaging content to ensure a common voice for the
site, and creating new copy.
Technical: The technical designers and programmers are responsible for server
administration and the development or integration of site production tools and web site

applications. They advise the other teams regarding technology-related opportunities and
limitations.
Project Management: The project manager keeps the project on schedule and within budget.
He or she facilitates communication between the other teams and the clients or internal
stakeholders. The success of a web site design and production project depends on successful
communication and collaboration between these specialized team members. A linear, black-
box, throw-it-over-the-wall methodology just won't work. Everyone needs to understand the
goals, perspectives, and approaches of the other members of the team. For example, while the
marketing specialist may lead the audience analysis process, he or she needs to anticipate the
types of questions about the audience that the specialists will have. Otherwise, each will need
to start from scratch in learning about that audience, wasting substantial time and resources.
Organizing Information
Here organize to understand, to explain, and to control. Our classification systems inherently
reflect social and political perspectives and objectives. We live in the first world. They live in
the third world. She is a freedom fighter. He is a terrorist. The way we organize, label, and
relate information influences the way people comprehend that information. As information
architects, we organize information so that people can find the right answers to their
questions. We strive to support casual browsing and directed searching. Our aim is to apply
organization and labelling systems that make sense to users. The Web provides us with a
wonderfully flexible environment in which to organize. We can apply multiple organization
systems to the same content and escape the physical limitations of the print world. So why
are many large web sites so difficult to navigate? Why can't the people who design these sites
make it easy to find information? These common questions focus attention on the very real
challenge of organizing information.
Organizational Challenges
In recent years, increasing attention has been focused on the challenge of organizing
information. Yet, this challenge is not new. People have struggled with the difficulties of
information organization for centuries. The field of librarianship has been largely devoted to
the task of organizing and providing access to information.. This quiet yet powerful
revolution is driven by the decentralizing force of the global Internet. Not long ago, the
responsibility for labelling, organizing, and providing access to information fell squarely in
the laps of librarians.. They classified, catalogued, and helped us find the information we
needed. The Internet is forcing the responsibility for organizing information on more of us
each day. How many corporate web sites exist today? How many personal home pages? What
about tomorrow? As the Internet provides us all with the freedom to publish information, it
quietly burdens us with the responsibility to organize that information. As we struggle to
meet that challenge, we unknowingly adopt the language of librarians. How should we label
that content? Is there an existing classification system? Who's going to catalogue all of that
information? We're moving towards a world where tremendous numbers of people publish
and organize their own information. The challenges inherent in organizing that information
become more recognized and more important. Let's explore some of the reasons why
organizing information in useful ways is so difficult.
Heterogeneity: Heterogeneity refers to an object or collection of objects composed of
unrelated or unlike parts. You might refer to grandma's homemade broth with its assortment

of vegetables, meats, and other mysterious leftovers as heterogeneous. At the other end of the
scale, homogeneous refers to something composed of similar or identical elements. For
example, Oreo cookies are homogeneous. Every cookie looks and tastes the same most web
sites are highly heterogeneous in two respects. First, web sites often provide access to
documents and their components at varying levels of granularity. A web site might present
articles and journals and journal databases side by side. Links might lead to pages, sections of
pages, or to other web sites. Second, web sites typically provide access to documents in
multiple formats. The heterogeneous nature of web sites makes it difficult to impose highly
structured organization systems on the content. It doesn't make sense to classify documents at
varying levels of granularity side by side. An article and a magazine should be treated
differently. Similarly, it may not make sense to handle varying formats the same way. Each
format will have uniquely important characteristics
Internal Politic: Politics exist in every organization. Individuals and departments constantly
position for power or respect. Because of the inherent power of information organization in
forming understanding and opinion, the process of designing information architectures for
websites and intranets can involve a strong undercurrent of politics. The choice of
organization and labelling systems can have a big impact on how users of the site perceive
the company, its departments, and its products.
Organizing Web sites and Intranets
The organization of information in web sites and intranets is a major factor in determining
success, and yet many web development teams lack the understanding necessary to do the job
well. Our goal in this chapter is to provide a foundation for tackling even the most
challenging information organization projects. Organization systems are composed of
organization schemes and organization structures. An organization scheme defines the shared
characteristics of content items and influences the logical grouping of those items. An
organization structure defines the types of relationships between content items and groups.
Before diving in, it's important to understand information organization in the context of web
site development. Organization is closely related to navigation, labelling, and indexing. The
hierarchical organization structures of web sites often play the part of primary navigation
system. The labels of categories play a significant role in defining the contents of those
categories. Manual indexing is ultimately a tool for organizing content items into groups at a
very detailed level. Despite these closely knit relationships, it is both possible and useful to
isolate the design of organization systems, which will form the foundation for navigation and
labelling systems. By focusing solely on the logical grouping of information, you avoid the
distractions of implementation details and design a better web site.
Creating Cohesive Organization Systems
You also need to think about the organization structures that influence how users can navigate
through these schemes. Should you use a hierarchy or would a more structured database-
model work best? Perhaps a loose hyper textual web would allow the most flexibility? Taken
together, in the context of a large web site development project, these questions can be
overwhelming. That's why it's important to break down the site into its components, so you
can tackle one question at a time. Also, keep in mind that all information retrieval systems
work best when applied to narrow domains of homogeneous content. By decomposing the
content collection into these narrow domains, you can identify opportunities for highly
effective organization systems.

In considering which organization schemes to use, remember the distinction between exact
and ambiguous schemes. Exact schemes are best for known-item searching, when users know
precisely what they are looking for. Ambiguous schemes are best for browsing and
associative learning, when users have vaguely defined information need. Whenever possible,
use both types of schemes. Also, be aware of the challenges of organizing information on the
Web. Language is ambiguous, content is heterogeneous, people have different perspectives,
and politics can rear its ugly head. Providing multiple ways to access the same information
can help to deal with all of these challenges. When thinking about which organization
structures to use, keep in mind that large web sites and intranets typically require all three
types of structure. The top-level, umbrella architecture for the site will almost certainly be
hierarchical. As you are designing this hierarchy, keep a lookout for collections of structured,
homogeneous information. These potential sub sites are excellent candidates for the database
model. Finally, remember that less structured, creative relationships between content items
can be handled through hypertext.
Architectural Page Mock-ups
Information architecture blueprints are most useful for presenting a bird's-eye view of the
web site. However, they do not work well for helping people to envision the contents of any
particular page. They are also not straightforward enough for most graphic designers to work
from. In fact, no single format does a perfect job of conveying all aspects of an information
architecture to all audiences. Because information architectures are multidimensional, it's
important to show them in multiple ways. For these reasons, architectural page mock-ups are
useful tools during conceptual design for complementing the blueprint view of the site.
Mock-ups are quick and dirty textual documents that show the content and links of major
pages on the web site. They enable you to clearly (yet inexpensively) communicate the
implications of the architecture at the page level. They are also extremely useful when used in
conjunction with scenarios. They help people to see the site in action before any code is
written. Finally, they can be employed in some basic usability tests to see if users actually
follow the scenarios as you expect. Keep in mind that you only need to mock-up major pages
of the web site. These mock-ups and the designs that derive from them can serve as templates
for the design of subsidiary pages.
In this architectural mock-up of a combination search/browse page, we show an area for

Entering queries and an area for browsing. We typically use a word processor like Microsoft
Word to create these mock-ups quickly. However, you can also create quick and dirty HTML
mock-ups, and even work quite interactively with the graphic designer. In the example in,
you see that mock-ups are easier to read than blueprints. By integrating aspects of the
organization, labelling, and navigation systems into one view, they will help your colleagues
to understand the architecture. In laying out the content on a page mock-up, you should try to
show the logical visual grouping of content items. In this example, the search interface and
the browsing options are two separate content groups. You can also indicate prominence in
these mock-ups. Placing a content group at the top of the page or using a larger font size
indicates the relative importance of that content. While the graphic designer will make the
final and more detailed layout decisions, you can make a good start with these mock-ups.
Design Sketches
Once you've developed high-level blueprints and architectural page mock-ups , you're ready
to collaborate with your graphic designer to create design sketches on paper of major pages in
the web site. In the research phase, the design team has begun to develop a sense of the
desired graphic identity or look and feel. The technical team has assessed the information
technology infrastructure of the organization and the platform limitations of the intended
audiences. They understand what's possible with respect to features such as dynamic content
management and interactivity. And, of course, the architect has designed the high-level
information structure for the site. Design sketches are a great way to pool the collective
knowledge of these three teams in a first attempt at interface design for the top level pages of
the site. This is a wonderful opportunity for interdisciplinary user interface design. Using the
architectural mock-ups as a guide, the designer begins sketching pages of the site on sheets of
paper. As the designer sketches each page, questions arise that must be discussed. Here is a
sample sketching session dialog:
1. Programmer: I like what you're doing with the layout of the main page, but I'd
like to do something more interesting with the navigation system.
2. Designer: Can we implement the navigation system using pull-down menus?
Does that make sense architecturally?
3. Architect: That might work, but it would be difficult to show context in the
hierarchy. How about a tear-away table of contents feature? We've had pretty
good reactions to that type of approach from users in the past.
4. Programmer: We can certainly go with that approach from a purely technical
perspective. How would a tear-away table of contents look? Can you sketch it for
us? I'd like to do a quick-and-dirty prototype.
As you can see, the design of these sketches requires the involvement of people from all three
teams. It is much cheaper and easier for the group to work with the designer on these rough
sketches than to begin with actual HTML page layouts and graphics. These sketches allow
rapid iteration and intense collaboration. The final product of a sketching session might look
something like that in Figure

In this example, Employee Handbook, Library, and News are grouped together as the major
areas of the web site. Search/Browse and Guidelines/Policies make up the bottom of the page
navigation bar. A news area defines space for a dynamic Java-based news panel.
Designing Navigation Systems
On the Web, navigation is rarely a life or death issue. However, getting lost in a large web
site can be confusing and frustrating. While a well-designed hierarchical organization scheme
will reduce the likelihood that users will become lost, a complementary navigation system is
often needed to provide context and to allow for greater flexibility of movement within the
site. Navigation systems can be designed to support associative learning by featuring
resources that are related to the content currently being displayed. For example, a page that
describes a product may include see also links to related products and services a well
designed navigation system, they learn about products, services, or topics associated to the
specific content they set out to find. Any page on a web site may have numerous
opportunities for interesting see also connections to other areas of the site. The constant
challenge in navigation system design is to balance this flexibility of movement with the
danger of overwhelming the user with too many options. Navigation systems are composed of
a variety of elements. Some, such as graphical navigation bars and pop-up menus, are
implemented on the content-bearing pages themselves. Others, such as tables of contents and
site maps, provide remote access to content within the organization structure. While these
elements may be implemented on each page, together they make up a navigation system that
has important site-wide implications. A well-designed navigation system is a critical factor in
determining the success of your web site.
Browser Navigation Features: When designing a navigation system, it is important to
consider the environment the system will exist in. On the Web, people use web browsers such
as Netscape Navigator and Microsoft Internet Explorer to move around and view web sites.
These browsers sport many built-in navigation features.
 Open URL allows direct access to any page on a web site.

 Back and Forward provide a bidirectional backtracking capability.
 History menu allows random access to pages visited during the current session, and
Bookmark enables users to save the location of specific pages for future reference. If
the hypertext link leads to another web site on another server, prospective view
provides the user with basic information about this offsite destination.
Types of Navigation Systems: A complex web site often includes several types of navigation
systems. To design a successful site, it is essential to understand the types of systems and
how they work together to provide flexibility and context.
1. Hierarchical Navigation Systems: Although we may not typically think of it this
way, the information hierarchy is the primary navigation system. From the main page
to the destination pages that house the actual content, the main options on each page
are taken directly from the hierarchy. The hierarchy is extremely important, but also
rather limiting. It is these limitations that often require additional navigation systems.
2. Global Navigation Systems: A global or site-wide navigation system often
complements the information hierarchy by enabling greater vertical and lateral
movement throughout the entire site. At the heart of most global navigation systems
are some standard rules that dictate the implementation of the system at each level of
the site. The simplest global navigation system might consist of a graphical navigation
bar at the bottom of each page on the site. On the main page, the bar might be
unnecessary, since it would duplicate the primary options already listed on that page.
On second level pages, the bar might include a link back to the home page and a link
to the feedback facility
3. Local Navigation Systems: For a more complex web site, it may be necessary to
complement the global navigation system with one or more local navigation systems.
To understand the need for local navigation systems, it is necessary to understand the
concept of a sub-site. For example, a software company may provide an online
product catalogue as one area in their web site. This product catalogue constitutes a
sub-site within the larger web site of the software company. Within this sub-site area,
it makes sense to provide navigation options unique to the product catalogue, such as
browsing products by name or format or market.
4. Ad Hoc Navigation: Relationships between content items do not always fit neatly
into the categories of hierarchical, global, and local navigation. An additional
category of ad hoc links is more editorial than architectural. Typically an editor or
content specialist will determine appropriate places for these types of links once the
content has been placed into the architectural framework of the web site. In practice,
this usually involves representing words or phrases within sentences or paragraphs
(i.e., prose) as embedded hypertext links. This approach can be problematic if these
ad hoc links are important, since usability testing shows "a strong negative correlation
between embedded links (those surrounded by text) and user success in finding
information." Apparently, users tend to scan pages so quickly that they often miss
these less conspicuous links. You can replace or complement the embedded link
approach with external links that are easier for the user to see.
Searching Systems:
When Not To Make Your Site Searchable: Your site should of course support the finding
of its information. But don't assume a search engine alone will satisfy all users' information
needs. While many users want to search a site, some just want to browse it. Because many

site developers see search engines as the solution to the problems that users are experiencing
when trying to find information in their sites, search engines become bandages for sites with
poorly designed browsing systems. Search engines are fairly easy to get up and running, but
like much of the Web, they are difficult to set up effectively. As a user of the Web, you've
certainly seen incomprehensible search interfaces, and we're sure that your queries have
retrieved some pretty strange results. This often is the result of a lack of planning by the site
developer, who probably installed the search engine with its default settings, pointed it at his
or her site, and forgot about it. So, if you don't plan on putting some significant time into
configuring your search engine properly, reconsider your decision to implement it.
When To Make Your Site Searchable: Most web sites, as we know, aren't planned out in
much detail before they're built. Instead, they grow organically. This may be all right for
smaller web sites that aren't likely to expand much, but for ones that become popular, more
and more content and functional features get added haphazardly, leading to a navigation
nightmare. Your site probably doesn't contain as much content as Yahoo! does, but if it's a
substantial site, it probably merits a search engine. There are good reasons for this: users
won't be willing to browse through your site's structure. Their time is limited, and their
cognitive overload threshold is lower than you think. Interestingly, sometimes users won't
browse for the wrong reasons; that is, they search when they don't necessarily know what to
search for. Even though they would be better served by browsing, they search anyway
You should also consider creating a searching system for your site if it contains highly
dynamic content. For example, if your site is a Web-based newspaper, you could be adding
dozens of story files daily. For this reason, you probably wouldn't have the time each day to
maintain elaborate tables of contents, brows able indices, and other browsing systems. A
search engine can help you by automatically indexing the contents of the site once or many
times per day. Automating this process ensures that users have quality access to your site's
content, and you can spend time doing things other than manually indexing and linking the
story files.
Good Web Design and bad Web Design
Web design is a broad term used to encompass the way that content (usually hypertext or
hypermedia) is delivered to an end-user through the World Wide Web, using a web browser
or other web-enabled software is displayed. The intent of web design is to create a website—
a collection of online content including documents and applications that reside on a web
server/servers. A website may include text, images, sounds and other content, and may be
interactive. Such elements as text, forms, images (GIFs, JPEGs, Portable Network Graphics)
and video can be placed on the page using HTML/XHTML/XML tags. Older browsers may
require Plug-ins such as Adobe Flash, QuickTime, Java run-time environment, etc. To
display some media, which are embedded into web page by using HTML/XHTML tags Web
design involves the structure of the website including the information architecture (navigation
schemes and naming conventions), the layout or the pages (wireframes or page schematics
are created to show consistent placement of items including functional features), and the
conceptual design with branding. Typically web pages are classified as static or dynamic:
Static pages don’t change content and layout with every request unless a human (web
master/programmer) manually updates the page. A simple HTML page is an example of
static content. Dynamic pages adapt their content and/or appearance depending on end-user’s
input/interaction or changes in the computing environment (user, time, database
modifications, etc.) Content can be changed on the client side (end-user's computer) by using
client-side scripting languages (JavaScript, JScript, Actionscript, etc.) to alter DOM elements

(DHTML). Dynamic content is often compiled on the server utilizing server-side scripting
languages (Perl, PHP, ASP, JSP, ColdFusion, etc.). Both approaches are usually used in
complex applications. With growing specialization in the information technology field there
is a strong tendency to distinguish between web design and web development. Web design is
a kind of graphic design intended for the development and styling of objects of the Internet's
information environment to provide them with high-end consumer features and aesthetic
qualities.
The process of designing web pages, web sites, web applications or multimedia for the Web
may utilize multiple disciplines, such as animation, authoring, communication design,
corporate identity, graphic design, human-computer interaction, information architecture,
interaction design, marketing, photography, search engine optimization and typography.
One of the elements of good web design is a lack of the elements that make bad
web design.. In addition, keep these concepts in mind:
1. Text
 Background does not interrupt the text
 Text is big enough to read, but not too big
 The hierarchy of information is perfectly clear
 Columns of text are narrower than in a book to make reading easier on the
screen
2. Navigation
 Navigation buttons and bars are easy to understand and use
 Navigation is consistent throughout web site
 Navigation buttons and bars provide the visitor with a clue as to where they
are, what
 page of the site they are currently on
 Frames, if used, are not obtrusive
 A large site has an index or site map
3. Links
 Link colors coordinate with page colors
 Links are underlined so they are instantly clear to the visitor
4. Graphics
 Buttons are not big and dorky
 Every graphic has an alt label
 Every graphic link has a matching text link
 Graphics and backgrounds use browser-safe colors
 Animated graphics turn off by themselves
5. General Design
 Pages download quickly
 First page and home page fit into 800 x 600 pixel space
 All of the other pages have the immediate visual impact within 800 x
600 pixels
 Good use of graphic elements (photos, subheads, pull quotes) to break up
large areas of text
 Every web page in the site looks like it belongs to the same site; there
are repetitive elements that carry throughout the pages
 Process of web publishing
6. Publishing is the process of production and dissemination of literature or information
the activity of making information available for public view. In some cases authors

may be their own publishers, meaning: originators and developers of content
also provide media to deliver and display the content.
Plan Your Web Site: Determine the audience, purpose and content for your Web site. Who is
the audience? What are they looking for on your site? How can you organize your content so
the audience can find what they want? Do you have information that they might not realize
they will need? Do you need to lay out a process, or sequence of steps? Try to do this from
the perspective of your audience, rather than from your own organizational structure,
reporting needs, or processes. Think through the organization of your content to present your
information in a logical manner, understandable to your anticipated audience. Prepare a
schedule for maintaining links and updating content.
Get Approval (new sites or additions to existing sites): Work through your normal reporting
channels for approval to produce a Web site for
your class, program, department or unit.
Avoid Duplication: Evaluate the information already published Web site to avoid duplication
of information or contradictions with prior publications. If you have doubts about whether
your content may already exist on the Web site, check with Web Coordinator. Do not post
duplicate copies of existing documents; link to them at their original Web address. This helps
prevent broken links. Official institutional publications are already on the Web. These
include the undergraduate Bulletin, the Graduate Bulletin, and handbooks and so on. You
must link to these documents to avoid multiple or conflicting versions of University
information. If your site includes information about programs, minors, specializations or
course descriptions, you must call them by their official name and link to existing documents.
Phases of Web Site development
There are numerous steps in the web site design and development process. From gathering
initial information, to the creation of your web site, and finally to maintenance to keep your
web site up to date and current. The exact process will vary slightly from designer to
designer, but the basics are generally the same.
 Information Gathering
 Planning
 Design
 Development
 Testing and Delivery
 Maintenance

1. Information Gathering: The first step in designing a successful web site is to gather
information. This first step is actually the most important one, as it involves a solid
understanding of the company it is created for. It involves a good understanding of
you – what your business goals and dreams are, and how the web can be utilized to
help you achieve those goals. It is important that your web designer start off by asking
a lot of questions to help them understand your business and your needs in a web site.
Certain things to consider are:
 Purpose: What is the purpose of the site?
 Goals: What do you hope to accomplish by building this web site?
 Target Audience: Is there a specific group of people that will help
you reach your goals?.

 Content: What kind of information will the target audience be looking
for on your site? Are they looking for specific information, a particular
product or service, online ordering?

2. Planning: Using the information gathered from phase one, it is time to put together a
plan for your web site. This is the point where a site map is developed. The site map
is a list of all main topic areas of the site, as well as sub-topics, if applicable. This
serves as a guide as to what content will be on the site, and is essential to developing a
consistent, easy to understand navigational system. A good user interface creates an
easy to navigate web site, and is the basis for this. During the planning phase, your
web designer will also help you decide what technologies should be implemented.
Elements such as interactive forms, ecommerce, flash, etc. are discussed when
planning your web site.
3. Design: Drawing from the information gathered up to this point, it’s time to
determine the look and feel of your site. Target audience is one of the key factors
taken into consideration. As part of the design phase, it is also important to
incorporate elements such as the company logo or colours to help strengthen the
identity of your company on the web site. Your web designer will create one or more
prototype designs for your web site. Your designer should allow you to view your
project throughout the design and development stages. The most important reason for
this is that it gives you the opportunity to express your likes and dislikes on the site
design. In this phase, communication between both you and your designer is crucial to
ensure that the final web site will match your needs and taste. It is important that you
work closely with your designer, exchanging ideas, until you arrive at the final design
for your web site.
4. Development: The developmental stage is the point where the web site itself is
created. At this time, your web designer will take all of the individual graphic
elements from the prototype and use them to create the actual, functional site. This is
typically done by first developing the home page, followed by a ―shell‖ for the
interior pages. The shell serves as a template for the content pages of your site, as it
contains the main navigational structure for the web site. Once the shell has been
created, your designer will take your content and distribute it throughout the site, in
the appropriate areas. Elements such as interactive contact forms, flash animations or
ecommerce shopping carts are implemented and made functional during this phase, as
well. This entire time, your designer should continue to make your in-progress web
site available to you for viewing, so that you can suggest any additional changes or
corrections you would like to have done.
5. Testing and Delivery: At this point, web designer will attend to the final details and
test your web site. They will test things such as the complete functionality of forms or
other scripts, as well last testing for last minute compatibility issues (viewing
differences between different web browsers), ensuring that your web site is optimized
to be viewed properly in the most recent browser versions. The basic technologies
currently used are XHTML and CSS (Cascading Style Sheets). As part of testing,
designer should check to be sure that all of the code written for web site validates.
Valid code means that your site meets the current web development standards – this is
helpful when checking for issues such as cross-browser compatibility as mentioned
above. Once you give your web designer final approval, it is time to deliver the site.
An FTP (File Transfer Protocol) program is used to upload the web site files to your

server. Most web designers offer domain name registration and web hosting services
as well. Once these accounts have been setup, and your web site uploaded to the
server, the site should be put through one last run-through. This is just precautionary,
to confirm that all files have been uploaded correctly, and that the site continues to be
fully functional. This marks the official launch of your site, as it is now viewable to
the public.
6. Maintenance: The development of your web site is not necessarily over, though. One
way to bring repeat visitors to your site is to offer new content or products on a
regular basis. Update your own content, there is something called a CMS (Content
Management System) that can be implemented to the web site. This is something that
would be decided upon during the Planning stage. With a CMS, your designer will
utilize online software to develop a database driven site for you. A web site driven by
a CMS gives you the ability to edit the content areas of the web site yourself. You are
given access to a back-end administrative area, where you can use an online text
editor (similar to a mini version of Microsoft Word).

Web engineering notes unit 2

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Web engineering notes unit 2 (20)

Recently uploaded (20)

Web engineering notes unit 2