2/26/2026

Why Web Engineering Web Engineering

An Introduction

 Web Engineering is
 Modern Web applications are full-
fledged, complex software systems “A discipline that comprises of the use of
systematic and quantifiable approaches
 Therefore,
in order to accomplish the specification, implementation, operation,
and maintenance
“The development of Web applications
requires a methodologically sound of high quality Web applications”
engineering approach”
 Web Engineering extends Software Engineering to Web
applications, but with Web -centric approaches

12 13

Web Based Systems Web Based Systems

The Web The Web

 The Web, short for the World Wide Web (WWW), is a system of  All these areas require a vehicle called
“The Web Application” that
Business,
Commerce
interconnected digital documents and resources accessed and Finance
Communicati

via the internet using web browsers.

on, Media
Transportation
 takes raw information associated with the and
Entertainment
area of interest;
 It was invented by Tim Berners-Lee in 1989  structures it in a way that is meaningful;
Politics
The Education
web
 builds a packaged presentation that is
organized, aesthetic and interactive (where
required);
Medicine Engineering

 and delivers it to your Web browser in a

manner that initiates a conversation. Government

14 15
 2/26/2026

Principles of Web Engineering Practice Questions?

The basic principles of Web Engineering can, however, be described  A company wants to develop a web application for
similarly to those of Software Engineering (cf. e.g. Lowe 1999, Selmi managing inventory across multiple warehouses. How would
you approach gathering requirements for this application,
2005): 1) Clearly defined goals and requirements and what web engineering principles would you apply in its
design and development?
2) Systematic development of a Web  A startup company is planning to develop a new e-
application in phases
commerce platform to compete in the market. How would
you advise them on the importance of incorporating web
3) Careful planning of these phases engineering principles from the early stages of development,
and what methodologies would you recommend to ensure
4) Continuous audit of the entire
the success of their project?
development process.

17 29

Evolution of Web Technologies Web 1.0 (Static Web)

Primarily static web

 Timeline: Late 1980s to pages with limited
 The evolution of web technologies can be broadly early 2000s. interactivity.
categorized into several stages, often referred to as
"Web X.0,"  Examples: Early websites Content consumption-
centric; users mainly
like Yahoo!, AOL, and read information.

 indicating different eras marked by technological personal homepages. Basic HTML and CSS
advancements, changes in user interaction, and the Characteristics used for web
development.
overall architecture of the web.
Early browsers like
 These evolutions have popularly been called Web 1.0, Mosaic and Netscape
Navigator dominated.
2.0 and 3.0 in the media.
Limited multimedia
content; mostly text
and images.

30 31
 2/26/2026

Web 1.5 (Dynamic Web) Web 2.0 (Social Web)

 Timeline: Early to mid-2000s.

 Timeline: Late 1990s to early 2000s.
 Characteristics:
 Characteristics:  Focus on user-generated content, collaboration, and social
 Introduction of dynamic content through technologies like networking.
JavaScript and server-side scripting languages (e.g., PHP, ASP).  Introduction of AJAX (Asynchronous JavaScript and XML) for
 Basic forms and limited user interactivity. smoother, more dynamic interactions without full page reloads.
 Emergence of databases for content management (e.g., MySQL).
 Rich internet applications (RIAs) allowing desktop-like experiences
in the browser.
 Websites became more interactive but still relied heavily on server-  Rise of social media platforms, blogging, and content sharing.
side processing.
 Emergence of web services and APIs, enabling data exchange
 Examples: Websites incorporating dynamic elements like and mashups.
discussion forums, guestbooks, and basic e-commerce.  Examples: YouTube, Wikipedia, Facebook, Twitter, and the
adoption of blogging platforms like WordPress.

32 33

Web 3.0 (Semantic Web) Web 4.0 (Decentralized Web)

 Timeline: Mid-2000s onwards (ongoing concept).

 Timeline: Still speculative, with some early developments.
 Characteristics:
 Characteristics:
 Focus on machine-readable content and semantic understanding.
 Emphasis on decentralization, blockchain technology, and peer-to-
 Emphasis on data interoperability and linked data. peer networks.
 Integration of AI and machine learning for personalized
 Focus on privacy, security, and ownership of data.
experiences and intelligent assistants.
 Development of decentralized applications (DApps) and
 Evolution towards the "Internet of Things" (IoT), connecting physical
platforms.
devices and data.
 Potential disruption of centralized services and business models.
 Continued development of technologies like HTML5, CSS3, and
JavaScript frameworks for richer user experiences.  Examples: Blockchain-based platforms like Ethereum,
 Examples: Semantic search engines, AI-driven decentralized social networks, and file storage solutions like
recommendation systems, and IoT applications. IPFS.

34 35
 2/26/2026

How Does a Web Browser Work? Web Clients

 Browser and the World Wide Web utilize Hypertext

 Thereare many other forms of client software also
Transfer Protocol (HTTP) to transfer documents
present, including
 text-only browsers,

 browsers running on cell phones,

 and browsers that speak a page (over the phone, for

example) rather than displaying the page

36 37

Web Servers Practice Questions

 The primary feature of every web server is to  Imagine you're a web developer in the late 1990s
accept HTTP requests from web clients and tasked with creating a website for a local business.
What tools and technologies would you primarily use,
return an appropriate resource (if available) in
and what characteristics would define your website?
the HTTP response.
 How would you describe the primary features and
limitations of websites developed during the Web 1.0
era? How did users interact with these websites?

38 40
 2/26/2026

Practice Questions Practice Questions

 You're managing a website that needs to handle user  As a social media manager for a company, you're
input through forms and display dynamic content planning to leverage Web 2.0 technologies to engage
based on user interactions. What technologies would with customers and build a community around your
you employ, and how would they improve user brand. How would you utilize platforms and features
experience compared to static websites? characteristic of this era to achieve your goals?

 What distinguishes Web 1.5 from its predecessor, Web  Explain the key features of Web 2.0 platforms like
1.0, in terms of user interaction and technological Facebook and Twitter. How did the introduction of
advancements? How did server-side scripting AJAX and user-generated content revolutionize the
contribute to dynamic content generation? web experience during this period?

41 42

Practice Questions Practice Questions

 You're a product manager for a search engine company  Imagine you are designing a new online platform that
looking to enhance the user experience by implementing aims to revolutionize the way people interact, share
semantic search capabilities. How would you explain the content, and conduct transactions on the web. How
concept of the Semantic Web to your development team, would you approach the selection and integration of
and what technologies would you consider implementing?
web technologies from different eras (Web 1.0, Web 1.5,
 Describe how Web 3.0 differs from Web 2.0 in terms of its Web 2.0, Web 3.0, and Web 4.0) to create a cohesive
focus and underlying technologies. How do AI-driven and innovative user experience?
recommendation systems exemplify the evolution towards
Web 3.0?

43 44
 2/26/2026

Web Applications Categories of Web Applications

 A Web application is a system that utilizes  Web applications have varying degrees of
W3C standards & technologies to deliver complexity.
Web-specific resources to clients (typically)
through a browser.  They may be purely informational or handle full-
size/full- fledged 24/7 e-commerce applications.
 Web resources are virtual files that are
stored in the database and that you can  Fig. 1-1 identifies different categories of Web
retrieve by using a unique URL address. applications depending on their development history
 Technology + interaction.
and their degree of complexity

45 46

Categories of Web Applications Categories of Web Applications

47 48
 2/26/2026

Document-Centric Web sites drawback

 These Web pages are usually updated manually using

 Document centric Web sites are the precursor respective tools.
to Web applications.
 Especially for Web sites requiring frequent changes or for
sites with huge numbers of pages this is a significant cost
 Web pages are stored on a Web server as factor and often results in outdated information.
ready-made, i.e. static, HTML documents and
sent to the Web client in response to a request.  Additionally, there is a danger of inconsistencies, as some
content is frequently represented redundantly on several
Web pages for easy access.

49 50

advantage Interactive Web applications

 The main benefits are the simplicity and stability of such  With the introduction of the Common Gateway Interface and
Web sites and the short response time, as the pages are HTML forms, interactive Web applications emerged,
already stored on the Web server.
 offering a first, simple, form of interactivity by means of forms, radio
buttons and selection menus.

 Example: Static homepages, webcasts, and simple web

presences for small businesses belong in this category.  Web pages and links to other pages are generated
dynamically according to user input.

51 52
 2/26/2026

Interactive Web applications Transactional Web applications

 Examples for this category are  Transactional Web applications were created to
provide more interactivity,
 virtual exhibitions,
 giving the user the possibility of not only interacting with the
 news sites, application in a read-only manner, but also by performing
updates on the underlying content.
 timetable information.
 Considering a tourism information system this would allow, for
example, to update the content in a decentralized way or
make it possible to book rooms

53 54

Transactional Web applications Workflow-Based Applications

 The prerequisite for this are database systems  Workflow-based Web applications allow the handling of work flows
within or between different companies, public authorities, and
 that allow efficient and consistent handling of the increasing private users.
amount of content in Web applications
 Designed to handle business processes across departments, organizations &
 and offer the possibility of structured queries. enterprises

 A driving force for this is the availability of appropriate Web services

 Example: Online banking, online shopping, and to guarantee interoperability.
(Reservation) booking systems belong in this category.

55 56
 2/26/2026

Workflow-Based Applications Workflow-Based Applications

 Structured processes,  Examples for this category are

 Business-to-Business solutions (B2B solutions) in e-commerce,

 the complexity of the services in question, the autonomy of the
participating companies  e-government applications in the area of public administration

 and the necessity for the workflows to be robust and flexible are  or Web-based support of patient workflows in the health sector.
the main challenges.

57 58

Collaborative Web applications

 Whereas workflow-based Web applications require a  There the need for communication between the
certain structuring of the automated processes and cooperating users is particularly high.
operations,

 Collaborative Web applications support shared in

 Collaborative Web applicaions are employed formation and workspaces
especially for cooperation purposes in unstructured
operations

59 60
 2/26/2026

Portal-Oriented

Examples:  Portal-oriented Web applications provide a single point

of access to separate, potentially heterogeneous
 Shared workspaces (Wikis, Office Live, Google sources of information and services
Docs)
 General portals for access to Web
 Support of meetings and decision making, e.g.
chat rooms – Browser, such as Firefox or IE
 Shared schedule management – Search services, such as Google or Yahoo!
– Media groups
 E-learning platforms
– Community portals

61 62

Portal-Oriented Ubiquitous

 Customized services delivered anywhere via multiple devices.

 Specialized portals Access everywhere at any time.
– Business portals  Example:
– Marketplace portals
 Menus for users that enter a restaurant between 11am and 2pm.
– Community portals
 For this type of system it is important to take into account the
limitations of mobile devices (bandwidth, screen size, memory,
immaturity of software, etc.)

63 64
 2/26/2026

Ubiquitous Semantic Web

 HCI(Human-Computer Interaction) is critical  The goal of the Semantic Web is to present information on
the Web not merely for humans, but also in a machine
 Limitations of devices (screen size, bandwidth?) readable form
 Context of use
 Semantic Web technologies enable engineers and
researchers to combine arbitrary data in arbitrary ways in an
 Still an emerging field; most devices have single focus: attempt to better understand and predict daily field
-Personalization operations.
-Location-aware
 E.g. a weather forecasting website.
-Multi-platform delivery

65 66

Practice Questions Practice Questions

 Consider you are using a food delivery web application to  Identify which category of web application is followed by
order food. You visit the website and enter your location to the following webpages/websites:
browse the available restaurants in your area. After selecting
a restaurant, you explore their menu and add items to your  E-banking page of a Bank
cart. Once you have finalized your order, you proceed to the  CMS portal for students of SSUET
checkout page where you enter your delivery address and  MS-Teams online class
 Google Apps
select a payment method. Finally, you confirm the order and  AccuWeather: weather forecasting site
receive a confirmation message with the estimated delivery  Home page of [Link]
time.  Online ticket reservation system of an Airline
 Latest News & Events blog in [Link]
 Identify and explain the web applications involved in the  NITB: e-governance platform in Pakistan
 Twitter
whole process.

68 69