The web application development

process

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
1
 Summary of the last lecture
Web engineering extends Software Engineering to Web
applications
o Why web engineering?
o Web applications
o Categories of web applications

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
2
Outline
Development Process model
◦ software development process activities
Requirement for a web development process
model
Rational unified process model (RUP)
◦ suitability for web application development

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
3
1. Process model
A set of related activities that leads to the production of
a software product
◦ development of software from scratch
◦ extending and modifying existing systems
Common activities
◦ Software specification
◦ Designing and implementation
◦ System validation
◦ System evolution

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
4
1.1 Process activities
Software specification:
The functionality of the software and constraints
on its operation must be defined
◦ critical stage (can lead to problems in design and
implementation)
Activities:
◦ Feasibility study
◦ Requirement elicitation and analysis
◦ Requirement specification
◦ Requirement validation

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
5
1.1 Process activities…
Software design and implementation:
Design is the description of
◦ System structure
◦ Data models
◦ Interface between components
Implementation: Converting a system specification into
an executable system

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
6
 1.1 Process activities…
System validation:
Intended to show that the system
◦ confirms its specification
◦ meets customer’s expectations

Development testing
◦ tested by the people developed the components

System testing
◦ finding component integration errors

Acceptance testing
◦ System is tested by the customer’s provided data

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
7
1.1 Process activities…
Software evolution:
Software is flexible as compared to hardware
◦ Changes can be made to the system during development or
after the development

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
8
1.2 Common approaches
o The waterfall approach
o Iterative approach
o Reuse oriented approach

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
9
 2. Requirements for a web application
development process

Evolving from informational medium to application

medium
Existing approaches are over-pragmatic
◦ lead to short development time
Web engineering does not have its own mature
development process model
SE development process models are adopted

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
10
 2. Requirements for a web application
development process…

Handling Short development cycles

◦ Development time is short
◦ Normally does not exceed six month

◦ Immediate delivery mechanism

◦ Capture share in the market

◦ Leaves less freedom for systematic development process

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
11
 2. Requirements for a web application
development process…

Handling changing requirement

◦ Requirements often emerge during development
◦ as developer understands the unknown business

◦ Integrate changes rapidly to remain in competition

◦ User involvement is more critical
◦ due to emerging and unstable requirements

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
12
 2. Requirements for a web application
development process…

Reuse and integration

◦ to meet time constraints developer try to reuse components
◦ Leads to integration issues

◦ Development can not be isolated from the development of

other applications within the organization

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
13
2. Requirements for a web application
development process…

Adapting to web application’s complexity level

◦ process depends upon the level of complexity
◦ process is adapted dynamically
◦ for low complexity, it should be like lightweight process
◦ for high complexity, it should be like heavyweight process

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
14
 3. Rational unified process
A heavyweight, phase oriented, incremental and iterative
process
Described in three perspectives
◦ Dynamic perspective: phases
◦ Static perspective: activities in phases
◦ Practice perspective: good engineering practices

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
15
3. Rational unified process
RUP phases:
• Inception: Define the business case for the project
Goals:
◦ Business case
◦ Identify and interact with external entities
◦ Asses the business contribution

Artifacts:
◦ business case

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
16
 3. Rational unified process
RUP phases:
• Elaboration: establish understanding with the problem
Goals:
◦ Establish software scope
◦ Discriminating critical use-cases
◦ Estimating cost, schedules and risks
Artifacts:
◦ development plan, use-case model, architectural description

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
17
3. Rational unified process
RUP phases:
• Construction: involves system design, programming and testing
Goals:
◦ Develop the design
◦ Implement the design
◦ Validate the system
Artifacts:
◦ System, training material

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
18
3. Rational unified process
RUP phases:
• Transition: Installing the system in real environment
Goals:
◦ Testing in real environment
◦ training
◦ Bug fixing, performance enhancements
Artifacts:
◦ A documented system working correctly

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
19
3. Rational unified process
RUP activities (workflows):
◦ Requirements
◦ analysis
◦ design
◦ implementation
◦ test

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
20
3. Rational unified process
RUP good practices:
◦ Develop software iteratively
◦ Manage requirements
◦ Use component-based architectures
◦ Visually model software-using UML
◦ Verify software quality
◦ Control changes to software

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
21
 3. Rational unified process…
phases

activities

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
22
3.1 RUP for web application
Inception phase:
Definition is problematic for web application
◦ no concrete view of the system at beginning
◦ has target group but needs are unknown
Elaboration phase:
◦ due to short development time, first version has priority over
clearly defined end-product

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
23
3.1 RUP for web application…
Construction phase:
◦ exists in web development process
Transition phase:
◦ is meaningful for web application development

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
24
3.1 RUP for web application…
Handling short development cycles:
◦ Conflicting
◦ short cycle means concession in modeling and
documentation while RUP is heavyweight
Handling changing requirements:
◦ Conflicting with time constraints
◦ require concrete vision at the end of inception phase
which require more time in web application due to
evolving requirements

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
25
3.1 RUP for web application…
Parallel development of different releases:
◦ can be met with RUP
◦ RUP only allow parallel development in construction
phase
Reuse and integration:
◦ Conflicting
◦ It requires coordination with development processes of
other applications RUP does not describe this

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
26
3.1 RUP for web application…
Adapting to a Web application’s complexity level:
◦ RUP can be adopted for later stages when complexity of
web application is understood

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
27
1. Introduction to HTML…
HTML – Hyper-Text Markup Language – The Language of Web Pages on the
World Wide Web
 defines the structure of webpages and determines how data is displayed
online
 text formatting language
 a set of special instructions that can be added in the text to add formatting
and linking information
 directly interpreted by the browser

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
28
1. Introduction to HTML…
Hypertext:
◦ Allows for non-linear linking to other documents

Markup Language:
◦ Content is “marked up” or tagged to tell the browser how to display it

•HTML standards are developed under the authority of the World Wide Web
Consortium (W3C), headed by Tim Lee
◦ http://www.w3c.org

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
29
1. Introduction to HTML…
HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland
It was designed to allow scientists to display and share their research
1995- HTML 2
lots of browsers had added their own bits to HTML
Dan Connolly and colleagues collected all the HTML tags that were widely
used and collated them into a draft document

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
30
1. Introduction to HTML…
1997- HTML 3.2
It was the first version developed and standardized exclusively by the W3C
HTML 3.2 included the support for applets, text flow around images,
subscripts and superscripts etc.
1999 – HTML 4.1
extends HTML with mechanisms for style sheets, scripting, frames etc.
HTML5
◦ New style of writing HTML, (XML Syntax)
◦ Video, figure, no script & link types
◦ Much more..

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
31
1. Introduction to HTML…
HTML Tags:
Tags are instruction that are directly embedded into the text of the document
Is a signal to a browser to do something before just throwing text on the
screen
Begin with open angle bracket < and ends with close angle bracket >
◦ For example <HTML>

Paired Tags : <HTML> </HTML>

Singular Tags: <BR>

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
32
1. Introduction to HTML…
oHTML is not case-sensitive
omultiple spaces will appear as a single space
oBlank and new lines are ignored
o<!-- comments -- >
oHTML files have .html extension

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
33
2. Structure of HTML Page
The entire web page is enclosed within <HTML> and </HTML>
Within these tags two distinct sections are created head and body
Head: <HEAD>
<TITLE> …… </TITLE>
</HEAD>

.Body: indicate the start and end of main body of textual information
<BODY>
</BODY>

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
34
2. Structure of HTML Page…
First HTML page:

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
35
3. The BODY Tag
Attributes:
BGCOLOR: Change the background color
BACKGROUND: Place an image at background
TEXT: Change the color of the body text
Example:
<BODY BGCOLOR=123345 TEXT=Red>
<BODY BACKGROUND=“img.jpg” TEXT=Red>

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
36
4. Formatting text

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
37
Formatting Text…...

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
38
4. Formatting text…
<P>….. </p>: starts a new paragraph
◦ Align (left, right, center and justify)

<BR>: gives an one line break

<H1> ….. </H1>: heading
<HR>: draws horizontal line
◦ ALIGN (LEFT,CENTER,RIGHT)
◦ SIZE=2
◦ WIDTH=100%
◦ color

Text Styles:
◦ <B> …. </B> , <I> …. </I>, <U> …. </U>

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
39
4. Formatting text…
<CENTER>….</CENTER>
<FONT>……</FONT>
◦ FONTFACE: Sets the specified font name
◦ SIZE: Size of the text (between 1 and 7)
◦ COLOR: Set the color of the text
Example:
◦ <FONT FONTFACE=“COMIC SANS MS” SIZE=6 COLOR=RED>
Welcome</FONT>

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
40
5. Lists in HTML
Un-ordered Lists:
◦ Starting Tag <UL>, Ending Tag </UL>
◦ List Items <LI>
◦ Type (FILLROUND, SQUARE)
Ordered Lists:
◦ Starting Tag <OL>, Ending Tag </OL>
◦ List Items <LI>
◦ Type (“1”, “A”, ‘”a”, ”I”, ”i”)
◦ Start (Alerts the numbering Sequence)
◦ Value (Changes the number sequence in the middle of an
ordered list)

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
41
5. Lists in HTML…
Definition Lists:
◦ Starting Tag<DL>
◦ Ending Tag </DL>
◦ Definition Term <DT>
◦ Definition Description <DD>

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
42
Summary
Rational unified process model (RUP)
◦ suitability for web application development
What is HTML?
Basic Structure of HTML page
Body tag attributes
Text formatting tags
Lists

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
43
 References
Kappel, G., Proll, B. Reich, S. &
Chapter 10,
Retschitzegger, W. (2006). Web Engineering,
Hoboken, NJ: Wiley & Sons
Chapter 2, Sommerville, Software Engineering,
ISBN-10: 0-13-703515-2 , PEARSON

AWAIS MEHMOOD | DEPARTMENT OF COMPUTER SCIENCE, UET TAXILA,

PAKISTAN.
44