Department of Software Engineering

(SSUET)

CHAPTER#1 :INTRODUCTION
TO WEB ENGINEERING
1
OUTLINE

2
WHAT IS THE COURSE ABOUT?
The World Wide Web has become a major delivery platform for information
resources. Many applications continue to be developed in an ad-hoc way, contributing
to problems of usability, maintainability, quality and reliability. This course examines
systematic, disciplined and quantifiable approaches to developing high- quality,
reliable and usable web applications. The course introduces the methodologies,
techniques and tools that support their design, development, evolution, and evaluation.

3
 COURSE GOALS
The goals of the course are as follows:

 to be able to analyze and design comprehensive Web application.

 to learn and use some of the languages currently used to manipulate
information on the World Wide Web – i.e. HTML, PHP and Javascript.
 to learn techniques and evaluation metrics for ensuring the proper
operability, maintenance and security of a web application.

4
WEB ENGINEERING METHODS & TECHNIQUES

5
WEB APPLICATION DEVELOPMENT

6
SOFTWARE ENGINEERING

7
WHAT IS WEB ENGINEERING?
“The application of systematic and quantifiable approaches to cost-effective
analysis, design, implementation, testing, operation, and maintenance of
high-quality Web applications.” – Kappel et al.

Extends Software Engineering to Web applications, but with Web-centric

approaches.

– And other relevant contributions from many disciplines

8
KEY KNOWLEDGE AREAS

9
DEFINING WEB APPLICATIONS

Unlike traditional software, the Web serves as both development & user
platform.

 A Web application is a system that utilizes W3C standards &

technologies to deliver Web-specific resources to clients (typically)
through a browser.

-Kind of …

 2 aspects:

-Software: static pages are not a Web application

-User-interface: Web services are not a Web application

10
THE CASE FOR WEB ENGINEERING

 Application development on the Web remains largely ad hoc.

-Spontaneous, one-time events

-Individual experience

-Re-use does not go beyond copy/paste

-Little or no documentation for code/design

 Short-term savings lead to long-term problems in operation,

maintenance, usability, etc.
 Because Web apps are so interdependent, the problem is compounded.

11
THE CASE FOR WEB ENGINEERING II
 Root Causes of poor design

-Development is regarded as an authoring activity.

-Development is “easy”.
-Techniques that should not be used are misapplied.
-Software engineering techniques are applied.
-Techniques that should be used are not.
-HCI is often not considered ...
 Particularly alarming given…

-Most projects are now Web-based

-More “mission-critical” apps moving to the Web
12
THE CASE FOR WEB ENGINEERING III
Top project pitfalls (Cutter, 2000)
84% - Failure to meet business objectives
79% - Project schedule delays
63% - Budget overrun
53% - Lack of functionality
Web Engineering’s solution:
-Clearly defined goals & objectives
-Careful planning
-Iterative & continuous auditing of the entire process

13
 THE CASE FOR WEB ENGINEERING IV
 Web Technologies pose new restriction to software development
-HTTP
-URL
-HTML
 HTTP is stateless
-unless you use tricks
 Web is based on the pull mechanism
-unless you use tricks
 Why can not change this? Tricks are not good!
-It’s a trade off…
14
CATEGORIES OF WEB APPLICATIONS

15
CATEGORIES OF WEB APPLICATIONS

16
 DOCUMENT-CENTRIC WEB SITES
 Precursors to Web applications
 Websites are provided in the form of static HTML that are sent
as a reply to a request from the client.
 Manual updates
 Pros
-Simple, stable, short response times
 Cons
-High management costs for frequent updates & large collections
-More prone to inconsistent/redundant info
 Examples
-Static homepages
-Company homepages

17
 INTERACTIVE WEB APPLICATIONS
“The Common Gateway Interface (CGI) is a standard for interfacing
external applications with information servers, such as HTTP or Web
servers. A plain HTML document that the Web daemon retrieves is static,
which means it exists in a constant state: a text file that doesn't change. A
CGI program, on the other hand, is executed in real- time, so that it can
output dynamic information.”

 CGI ...
 Simple interactivity
 Dynamic page creation
 Examples
 Virtual exhibitions
 News sites
 Online train schedule systems

18
 TRANSACTIONAL WEB APPLICATIONS
 More interactivity
-Z.B. Modifications by user are allowed
 Database systems allow
-An efficient and consistent data management
-Structured queries
 Examples:
-Online banking
-E-Shopping
-Reservation systems

19
 WORKFLOW-BASED APPLICATIONS

 Designed to handle business processes across departments,

organizations & enterprises
 Web services provide interoperability.
 Requirement:Processes must be structured!
 Challenges:
-Complexity of all services
-Autonomy of participating parties
-Robustness and flexibility of business processes
 Business logic defines the structure
 The role of Web services
-Interoperability
-Loosely-coupled
-Standards-based
 Examples: B2B & e-Government
20
COLLABORATIVE WEB APPLICATIONS
 Unstructured, cooperative environments with a high
communication need.
 Interpersonal communication is paramount.
 Examples:
-Shared workspaces (Wikis, Office Live, Google Docs)
-Support of meetings and decision making, e.g. chat rooms
-Shared schedule management
-E-learning platforms
-Collaborative tagging systems

21
 PORTAL-ORIENTED

 Single points-of-entry to heterogeneous information

 General portals for access to Web
-Browser, such as Firefox or IE
-Search services, such as Google or Yahoo!
-Onlineservices such as AOL
-Media groups

22
 PORTAL-ORIENTED(C0NT)

 Specialized portals
-Business portals
 employee intranet to share information
-Marketplace portals
 horizontal : B2C and B2B
 Vertical: unifying companies in a sector
-Community portals
 Target groups
 Interactivity and foster customer loyalty
 One-to-one marketing
23
 UBIQUITOUS
 Customized services delivered anywhere via multiple devices.
Access everywhere at any time.
 Example
-Menus for users that enter a restaurant between 11am and 2pm.
 Requirement: extraction of context information.
 HCI is critical
-Limitations of devices (screen size, bandwidth?)
-Context of use
 Still an emerging field; most devices have single focus:
-Personalization
-Location-aware
-Multi-platform delivery

24
CHARACTERISTICS OF WEB APPS

25
 CHARACTERISTICS - PRODUCT
 The “building blocks” of a Web application
-Content
-Hypertext
-Presentation
 Content
-Document-centric character and multimedia (# of dimensions?)
 Presentation in the form of tables, text, graphics, animations, video,
audio
 Communication of contents
 Usability challenge!
-Quality demands
 Up-to-dateness, consistency, reliability, volume
 Price or availability of products
 Critical factor for acceptance!
26
CHARACTERISTICS - PRODUCT

 User interface (Presentation)

-Aesthetics
 Look and feel
 Trends
-Self-explanatory design
 Usage without documentation
 Consistent user logic

27
CHARACTERISTICS - PRODUCT

 Navigation Structure (Hypertext)

-Non-linearity
 Difference to traditional software: possibility of systematic
reading (e.g. Guided tour)
 Moving in information space depending on various factors, such
as interests.
 Challenge for authors!
-Disorientation and cognitive overload
 Disorientation: Loss of sense of direction and location in a non-
linear document
 Cognitive overload: Higher effort and concentration to maintain
overview of various paths
28
 CHARACTERISTICS - USAGE
 Much greater diversity compared to traditional applications
 Social Context (Users)
-Spontaneity of users
 Unknown number of users
 Scalability!
-Multi-cultural
 Development for various user groups
 Challenge: requirements analysis (finding representative group of
users)
 Technical Context (network and devices)
-Quality-of-Service
-Multi-platform delivery

29
 CHARACTERISTICS - USAGE
 Natural Context (place and time)
-Globality
 Internationalisation regarding regional, cultural, and linguistic
differences
 Location-based services
 Increased security demands
-Availability
 24/7
 Time-dependent services

30
CHARACTERISTICS - DEVELOPMENT
 Process
Project members -Flexibility
 No fixed schemata
-Multiple disciplines
 Print Publishing, software development, -Parallelism
marketing and computer science, art and  Sub-applications / phases
technology  Integration
 IT experts, hypertext, designer and -Internal with existing legacy
domain experts
systems
-Developers are often young and
-External with contents and services
inexperienced without interest in old
of other Web applications
and proven methods  High number of changing sources
-Community development (open  High autonomy
source)  Little detail information
 Heterogeneity on various levels

31
CHARACTERISTICS - EVOLUTION

 All the above mentioned dimension are governed by the evolution

principle
-Continuous change
-Competitive pressure
-Fast pace
 Software Engineering: evolution is planned in a constant number of
release version
 Web Engineering: evolution is continuous
-Nowadays this is becoming true also for SE… it’s a loop, when a discipline
overlaps its ancestor, the ancestor learn something back!

32
KEY KNOWLEDGE AREAS

33
 BIBLIOGRAPHY
 Mandatory reading

-Web Engineering(book)
 Chapter 1
 Suggested

-Google “Web Engineering”

34
 ASSIGNMENT 1
 Pick up one of the categories introduced today and provide a small essay on
it
-2 points(line space)
-1 page Word Doc , font-Times New Roman size-11pt

 Figures do not count for the space

 Team1 SOA, SaaS

 Team 2 Participation-Collaboration, Asynchronous Particle Update
 Team 3 Mashup, RUE, Structured Information
 Team 4 The Synchronized Web, Collaborative Tagging
 Team 5 Declarative Living and Tag Gardening, Semantic Web

35
HTML
Head part is to communicate information with other web pages/search engines/robots/algorithms
etc. In short, we can say that head part is to communicate with machines.

Body part is to communicate information with users/humans.

<html>
<head>
<title>Title of page</title>
</head>

<body>
This is my first homepage.
</body>

</html>
HEAD ELEMENT
 HEAD tag always keep behind the HTML tag.

 Head part is to communicate information with other web

pages/search engines/robots/algorithms etc. In short, we can say
that head part is to communicate with machines.

 Things are going in the HEAD section, consider to be META

data content model these includes
 TITLE,
 META,
 LINK, STYLE, SCRIPT and BASE elements.
 EXAMPLE
<!DOCTYPE html>

<html lang=‘en’>
<head>
<meta charset=“UTF-8” />
<title>Title of page</title>
<link rel=“stylesheet” type=“text/css” href=“main.css” /> // To link stylesheet
<link href="scissors-small.png" type="image/gif" rel="shortcut icon" />
// To link short icon which appear in address bar
</head>

<body>
This is my first homepage.
</body>

38
</html>
TITLE ELEMENT
 The TITLE element is used for setting title of a document.

 Title element is required in HTML even its empty. There

may be only one TITLE element in a web page.

 Example:
<head>
<title>Title of page</title>
</head> 39
LINK ELEMENT
 LINK element is used to have relationship with other documents. LINK tag is used
to add external style sheet. Link is also used to place a small image at title portion of
the web page.

 Example:
<head>
<title>Title of page</title>
<link rel=“stylesheet” type=“text/css” href=“main.css” />
<link href="scissors-small.png" type="image/gif"
rel="shortcut icon" />
<script src="myscripts.js“ rel=“javascript” type=“javascript/text”> </script>
</head> 40
STYLE ELEMENT
 STYLE element is used to embed style sheet on a same web page.
 Example:

<head>
<title>Title of page</title>
<style>
p{
line-height: 1.2;
}
p.first:first-line {
font-variant: small-caps;
}
</style>
<script language=“javascript”>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
41
</head>
META TAG
 META tag is used to describe various aspects of your HTML
page. META means its data about data. It helps search engine
to categorize your page.

 The data that can not be display on web page, but can be used
by various process. Like web server deliver it or user web
browsers.

42
SEARCH ENGINE OPTIMIZATION
 The concept of search engine optimization is interesting widely
misunderstood subject.

 There are people who tell you that they can increase search
ranking of your page. So your page show higher in search
engine listing. But most part this is not true.

 Any technique that can effectively submit search engine today

will not work tomorrow because the engineers at search engine
company update their algorithms to defeat those technique. 43
 EXAMPLE
 <meta name=“keywords” content=“Amazing, New, Bill, Page Web
site, C++ Tutorials bla bla” />
 <meta name=“description” content=“Small paragraph with 250 words
about introduction of the page.” />

 Keywords meta tag is originally designed to help the search engine by

allowing content authors to categorize their contents.

 But this feature is abused so badly, that search engine have stopped
using it. So its largely ignored today by major search engines.
44
LINE BREAK TAG
 Normally your browser will decide, where to break the line and
paragraphs. You may force a line to break using the <BR> tag.

 Example:
<p>
The attackers set about acquiring the control over the computers to be
used in the attack. <br /> By scanning using Sscan SW, a large numbers
of computers attached to the Internet.&nbsp;&nbsp; Once a computer
with a weak security scheme is identified, the attackers try a break-in.
</p>
45
FONT ELEMENT
 Sometimes you tell browser to show text something in a different way. Can of
course use CSS for this often as best choice.

 HTML does however provide few simple elements, case where you need
something just simple.
 <b> Bold </b>

 <i> Italic </i>

 <u> Underline </u>

 This is a _subscript

 This is a ^superscript

 This is a <small> small </small>

46
HIGHLIGHTING TEXT
 HTML provides new inline element called MARK to highlighting text.

 Example:
<p>
The attackers set about acquiring the control over the computers to be
used in the attack. By <mark>scanning using Sscan SW,</mark> a
large numbers of computers attached to the Internet. Once a computer
with a weak security scheme is identified, the attackers try a break-in.
</p>
47
HEADING TAGS
 Heading elements are available at six level. Heading is block
level element.

 <h1> Heading 1 </h1>

 <h2> Heading 2 </h2>

 <h3> Heading 3 </h3>

 <h4> Heading 4 </h4>

 <h5> Heading 5 </h5>

 <h6> Heading 6 </h6>

48
HYPER LINK
 In HTML, you create a hyper link with Anchor tag.

 Example:
<body>
<p>
Here is a link to
<a href=“http://www.uol.edu.pk/” target=“_blank” title
=“SEO friendly keyword for link” >my home page</a>.
</p>
</body>
IMAGE TAG
 It is very common to use images as links.

 Example:
<p>
<img src=“images/paper.png” rel=“alternate text to
represent image” border=“0” />
</p>
USING IMAGE AS LINK
 It is very common to use images as links.

 Example:
<p>
Here is a link to <a
href=“http://sites.google.com/site/cs1113webprog/”><img
src=“images/paper.png” border=“0” /></a>.
</p>

51
HTTP, WEB SERVER, WEB BROWSER
Http – Hypertext transport protocol
Web Browser - A web browser (commonly referred to as a browser) is
a software application for retrieving, presenting, and traversing information
resources on the World Wide Web for example IE, Firefox, Chrome etc.
Web Server - Web servers are computers that deliver (serves up) Web pages.
Every Web server has an IP address and possibly a domain name. For example,
if you enter the URL http://www.webopedia.com/index.html in your browser,
this sends a request to the Web server whose domain name is webopedia.com.
ISP, DNS, FTP
 ISP - An Internet service provider (ISP) is an organization
that provides services for accessing, using, or participating in
the Internet.
 DNS - DNS, which stands for domain name system, controls
your domain name's website and email settings. When
visitors go to your domain name, its DNS settings control
which company's server it reaches out to. 
 FTP - The File Transfer Protocol (FTP) is a standard network
protocol used to transfer computer files between a client and
server on a computer network.
 URI, URN, URL
 URI - Uniform Resource Identifier
 URN - Uniform Resource Name

 URL - Uniform Resource Locator