WEB SYSTEMS AND

TECHNOLOGIES
Web Application Architecture
Principles, protocols and
practices
By Leon Shklar, Richard Rosen
PRE-REQUISITES
Programming Fundamentals
What is Communication
Communication Components
Communication Devices
What is Network
What is WWW (Web)
What is Protocols
Programming
Fundamentals
A Sequence of statements to
accomplish a specific task is
called program.
Program to sort a list of values
Program to manipulate area and volume of
given dimensions.
Program to generate 50 random numbers

Programming Methodologies:
Sequential Programming
Procedural Programming
Object oriented Programming
Event-Driven Programming
Communication
Exchange of Information between two parties.
The Process to communicate data, messages,
files, and software through some means.
 Communication Components:
Source
Transmitter
Transmission medium
Receiver
Destination
Communication Devices:
LAN Card, Wi Fi Card, DSL, WAP, Switch, Router,
Repeater etc.
Network
Inter-connection of two or more nodes for
communication
Nodes mean Computer or Communication
Device
Why we use Network?
To Share
Data and Information
Software
Hardware Resources
To Reduce Cost
To minimize time period of communication
To implement Security Policies
To ensure user’s privacy
Network Types
LAN (Local Area Network)
MAN (Metropolitan Area Network)
WAN (Wide Area Network)
PAN (Personal Area Network)
CAN (Campus Area Network)
Intranet
Extranet
Internet
 WEB
A most widely used Internet Service.
“World Wide Web” or simply Web is a virtual
library or a document control system. OR
“The Web is a global information sharing
architecture that integrates multiple online
contents and information services in a fast, cost
effective and easy to use manner.” OR
“The Web is a collection of distributed documents
referred to as pages located on computers all
over the world”. OR
“The aggregate of information available at
different servers in the whole world is called
web”.
The WEB in Perspective:
 Internet was developed in late 1960s to share information like
messages, or e-mails, but the WWW emerged in the early
1990s to share files, software, and business activities.
 Tim Berners Lee Presented a proposal for an information
management system at CERN (European Council for Nuclear
Research) Laboratory near Geneva and he called it, ”World
Wide Web”.
 Educational Institutions and research laboratories were the
very first users of web.
 WWW fulfilled wide variety of purposes like:
 International Postal Services,
 Bulletin board for posting virtual photo albums.
 Businesses engaged in E-Commerce.
 Later on, Tim Provided the concept of URLs and hypertext
links.
 Ted Nelson’s Xanadu project aspired to make the dream of
people into reality that use the Internet as universal medium
for exchanging information over computer Networks
The WEB:
The fundamental technology behind the Web is
relatively simple.
A computer connected to the Internet,
Running a Web server to serve documents.
Freely available Web server software.
A small amount of HTML knowledge and the proper
computing resources.
A terminal (at user side) that let you to Log-in to a large
Server over direct connection or dial-up phone line.

System
Backend
WEBPAGE
An electronic document on the web is called webpage.
A web page may contains text, graphics, animation,
audio and video.
Web pages usually have built-in connections to other
documents.
Web pages may be Static or Dynamic
Visitors to a static webpage all see the same
contents.
Visitors to a dynamic webpage can view customized
contents such as:
Desired stock quotes
Weather for a region
Ticket availability for flights.
The Contents of dynamic WebPages from backend
system are generated by page-generation
technologies like ASP, JSP and PHP
 WEBSITE:
A website is a collection of related WebPages and associated
items ( documents and pictures) stored on a web server.
The same web server can store multiple websites.
Website provides a mean for users to share personal
information (such as social networking websites)
Website allows user to modify website contents (such as wikis)
Websites have application software built into the site for visitor
to use (such as e-mail and word processing programs).
A Web Browser is application software that allows users to
access and view WebPages from the website.
A web browser retrieves a webpage using its unique web
address, URL (Uniform Resource Locator). E.g.
http://www.uos.edu.pk/result
The first page that a website displays is called home page.
 Website Characteristics:
Content-related concerns.
 Maintaining thematic consistency of content is important
in giving a site some degree of identity.
Aesthetic concerns:
 A Web site should also have a common look and feel
across all of its pages, this means utilizing a common style
across the site; page layout, graphic design, and
typographical elements should reflect that style.
Architectural concerns:
 As a site grows in size and becomes more complex, it
becomes critically important to organize its content
properly. This includes: 1. layout of content on individual
pages
2. Interconnections between the pages
3. Use framing approach
4. In short information can be accessed quickly and easily.
 Guidelines to develop a
Website:
“Beauty lies in the eyes of the beholder”, it
means that every individual has his/her own
opinion on the beauty.
So website will be well laid out and practical.
As a developer, you have three roles to play:
Visualizer, web page is attractive enough for
user to come on the page.
Architect, Website is well structured and has
logical path
Librarian, the contents are catalogued and ease
to locate.
Developing a web site can span various phases:
Design Phase
Design Phase:
Goals and Objectives:
Identify and set the goals and objectives of your website
as per the nature of your organization.
Target Audience:
Type of user, who will be visiting your site, their interest,
their taste and priorities.
Storyboarding:
Prepare storyboard ( description of the layouts,
contents, sequences, operation) to define conceptual
model of the website.
Organize your information:
Identify and define the navigation scheme,
Divide it into logical units.
Create hierarchy of important and general topics.
Define relationship structure among units of information.