9/25/2018

ITC 351; Web Technologies

Lecture Two

1. Web Browsers and Servers

2. Web Browser Reference
Architecture.
3. The Web Design Process *.

Lecture Objectives
• By the end of the lecture, the student will be able
to:
– Define a web browser.
– Describe the components of web browser reference
architecture.
– Describe the key functions of web servers.
– Explain the various stages of the web design process.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

1
 9/25/2018

Web Browsers - 1
• A web browser is a software application for
retrieving, presenting, and traversing
information resources on the web.
• A web browser can also be defined as
an application software or program designed to
enable users to access, retrieve and view
documents and other resources on the Internet.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Web Browsers - 2
• Although browsers are primarily intended to use
the World Wide Web, they can also be used to
access information provided by web
servers in private networks or files in file
systems.
• The major web browsers are:
Firefox, Chrome, Internet Explorer, Opera,
and Safari.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

2
 9/25/2018

Reference Architecture for Web Browsers

User Interface

Data Persistence
Browser Engine

Rendering Engine

JavaScript XML Display

Networking
Interpreter Parser Backend

Fig 2.1: Reference Architecture for Web Browsers

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Browser Architecture - 1
• The web browser architecture consist of eight
major subsystems and the relationships that
exist between them:
1.The User Interface lies between the user and
the browser engine.
• This includes the address bar, back/forward
buttons, bookmarking menu etc.
• Basically every part of the browser display except
the main window where you see the requested
page.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

3
 9/25/2018

Browser Architecture - 2
2. The Browser Engine subsystem provides an interface
for the rendering engine.
• It is responsible for loading a given URI and supports
browsing actions such as forward, back, refresh/reload.
• It makes querying and manipulation of rendering engine
settings possible.
3. The Rendering Engine subsystem is responsible for the
visual representation of URI inputs.
• It displays HTML and XML documents, including
embedded contents (e.g. images, videos) if there are any.
• It is responsible for positioning of page elements within
the page and sets up the page layout. It includes the
HTML parser.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Browser Architecture - 3
4. Networking subsystem is where file transfer
protocols FTP and HTTP are enforced.
• It resolves MIME types of files.

5. JavaScript Interpreter assesses Java scripts

which may be embedded in web pages.
• Some JavaScript functionalities include pop up
windows and these may be blocked/disabled by
the browser engine or rendering engine for
security purposes.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

4
 9/25/2018

Browser Architecture - 4
6. The XML Parser subsystem is one of the most reusable
subsystems in the architecture.
• Almost all browser implementations enforce an existing
XML Parser rather than building their own from scratch.
7. The Display Backend subsystem offers drawing and
windowing primitives, a set of user interface widgets,
and a set of fonts. May be tied closely to the OS.
8. The Data Persistence subsystem stores various data
associated with the browsing session on disk.
• This may be high-level data such as bookmarks or
toolbar settings, or it may be low-level data such as
cookies, security certificates, or cache.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Web Servers - 1
• A Web server can refer to either the hardware
(the computer) or the software (the computer
application) that helps to deliver web contents
that can be accessed through the Internet.
• The most common use of web servers is to host
websites, but there are other uses such as data
storage or running enterprise applications.
• The primary function of a web server is to deliver
web pages on the request to clients using the
Hypertext Transfer Protocol (HTTP).

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

5
 9/25/2018

Web Servers - 2
• Some of the major web servers are:
– Apache
– Apache Tomcat
– IIS
– Jigsaw
– Lighttpd.
– Klone.
– Zeus.
• Refer to the URL below and read more on web
servers:
• http://www.webdevelopersnotes.com/hosting/list_of_web_servers.php3

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

The Web Design Process

• Designing a web site goes through a series of
steps refer to as the Web design process.
• The exact order in which the process is carried
varies from organization to organization, and
developer to developer.
• Check this site out for details on the web design
process.
• http://www.printmag.com/featured/phases-
of-the-web-design-process/

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

6
 9/25/2018

Phases of the Web Design Process

• The phases of the web design process include
the following steps.
1. Project Definition
2. Project Scope
3. Site Architecture
4. Visual Design
5. Site Development
6. Site Testing
7. Launching
8. Site Maintenance
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Project Definition

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

7
 9/25/2018

Project Definition - 1
• Organizations have a need to communicate to
stakeholders their positions on issues and make
audiences aware of their products and services.
• Many times the communication need, such as a
web site, is triggered by a change of strategic
direction or a new offering.
• Identifying the reasons of the site’s existence and
what it is supposed to achieve are the first step in
the process.
• The goals and objectives that are established at the
outset of the project inform all future decisions,
from site structure and naming conventions used
in the navigation to the visual design of the site.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Project Definition - 2
• The first step in the definition process is interviewing
the organization’s stakeholders to identify the strategic
goals of the site, understand key audience needs and
identify key competitors.
• The goal of the definition step is to identify three
measurable key outcomes that are directly related to the
strategic goals of the organization.
• The challenge in this step is limiting the number of goals.
• Most organizations will have more goals than they know
what to do with, and each department believes their
individual unit’s goals are the most important.
• Being able to bring focus to organizational goals will
make developing the site easier and make the final
product more effective.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

8
 9/25/2018

Project Definition - 3
• Once all the information and assessments gathered from
the stakeholder interviews are completed, they should
be collected in a well-formatted project brief.
• The brief contains the following elements.
1. Project summary: Outlines the general overview of
the project, organizational background, the
environment the organization exists in, the people the
organization serves and the unique value it provides to
its audience.
2. Goals: What are two or three specific measurable goals
that the site should achieve? Clear goals allow the Web
team the ability to focus on what will provide the most
impact and move the organization forward.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Project Definition - 3
3. Target audiences: Who will help the organization
achieve its stated goals? Most organizations speak to
customers, stakeholders, internal audience, suppliers,
partners, or government institutions.
4. Messages: What are the key messages that attract and
motivate key audiences to engage with the
organization? What are the key brand messages that
help differentiate the organization from its peers?
5. Competition: Who are rival organizations that provide
similar offerings to your audience? Include an overview
of competitive organizations’ web sites, considering
visual branding, messaging, navigation, calls to action
and key differentiators.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

9
 9/25/2018

Project Scope

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Project Scope - 1
• Defining the scope of the project is a critical
step.
• One of the most common frustrations with web,
and other information system projects is scope
creep.
• By creating a well-defined project scope plan
that outlines specific activities and deliverables,
along with specific timelines, you will be able to
clearly set expectations for your clients.
• One of the most common ways of tracking Web
projects is through the use of a Gantt chart.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

10
 9/25/2018

Project Scope - 2
• A Gantt chart not only outlines major activities but
also the tasks associated with each activity and
start and end dates.
• The Gantt chart provides a visual reference for the
team, showing the timeframe of each step and the
dependencies between steps.
• The Gantt chart also creates accountability
between the Web team and the client (which could
be an outside client or simply your boss), letting
the client and the team know that the delivery
schedule is dependent on everyone hitting their
marks; if someone misses a date by a day, the
entire schedule shifts by a day.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Site Architecture
• Site architecture includes the sitemap and
wireframes of pages.
• Creating the sitemap ensures that you’ve
considered all the key pages in the site, showing
their relationship to each other and defining how
the sties overall navigation should be structured.
• Wireframes provide a detailed view of the content
that will appear on each page.
• Although they do not show any actual design
elements, the wireframes provide a guide for
defining content hierarchy on the page.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

11
 9/25/2018

Site Architecture
• Site architecture includes the sitemap and wireframes of
pages.

Site Map Wireframe

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Visual Design

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

12
 9/25/2018

Visual Design
• Once the blueprint for the site has been defined
through the creation of the sitemap and
wireframes, the next step is to create a visual style.
• The overall visual style will most likely be
determined by the visual brand of the
organization; the goal being to connect the Web
with all other forms of the organization’s
communications.
• The organization’s brand plays an important role
in this part of the process, as designers will want to
visually convey key brand perceptual ideas within
the design.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Site Development

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

13
 9/25/2018

Site Development
• With designs approved, it’s time to flesh out the
design of the pages, develop new content and
refine old content, create videos, slideshows,
podcasts and other media that will appear on
the site as well as start to build out the HTML
and CSS of the site.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Site Testing

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

14
 9/25/2018

Site Testing
• Before the site is launched, it will be placed on a
production server where only internal audiences and
anyone who you share the link with can view it.
• Testing of the site is critical as there will inevitably be
issues that need to be addressed before the site goes live.
• There is nothing that erodes a brand more than a site
that doesn’t function properly or that has misspellings or
broken design elements.
• At this stage the site will need to be reviewed on
multiple browsers (Firefox, Safari, Internet Explorer)
and multiple devices (laptops, tablets, and mobile) to see
if and where breaks occur.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Site Launching

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

15
 9/25/2018

Launching the Site - 1

• Once the site is reviewed and approved by the
project stakeholders, then you are ready to
launch and make it known to the world.
• Register a domain
• Find a hosting company
• Upload the website

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Launching the Site - 2

• But once the site is launched, the project isn’t
over.
• Be prepared to address feedback from users
adapting to the new site.
• Expect to make some immediate changes to the
site, such as fixing broken links, editing content
and making adjustments.
• Note that the Web is a fluid medium that
changes on a daily, if not hourly basis — change
is inevitable.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

16
 9/25/2018

Site Maintenance

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Site Maintenance
• Just like any other information system, websites
constant care and maintenance.
• Updating content, making changes to the backend
and fixing broken links are all in a day’s work.
• All of these phases are critical to the Web design
process.
• A proper maintenance strategy must therefore be
put in place for your website projects.
• This will help organizations achieve a goal, move
forward, and prosper in a competitive
environment.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

17
 9/25/2018

Focus Questions?
• What are the key functions of web browsers and
web servers.
• In your own perspective, describe what you think
should constitute the process of developing a
website.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Our Next Lecture …

1. Overview of HTML

2. HTML Elements and Tags

3. HTML Document Structure

4. Our First Web Page in HTML

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

18