1. What is The Web?
• World Wide Web aka. ‘The Web’
is a way of exchanging
information between computers
on the Internet
• A network of pages containing
images, text and sound which
can be viewed using browser
software.
• Internet: The global
infrastructure which facilitates
the data transfer
• Browser: A software application
for accessing information on the
World Wide Web.
1
2. Web Components
• Web Page: A container to hold
texts, images videos and sounds
• Web Site: A collection of related
web pages and associated items
• Web Server: A computer that
stores web site and delivers web
pages on client’s request
• Uniform Resource Locator (URL):
aka. Web Address is a pointer to a
web site stored on a web server
2
4. • Hypertext Markup Language (HTML)
• Cascading Stylesheet (CSS)
• Client-side Scripting (JavaScript)
• Server-side Programming (.NET/PHP/J2EE)
• Databases (SQL Server / MySQL / Oracle /
MongoDB)
Web Application Development
4
5. Software Engineering
• Software engineering is an engineering
discipline that is concerned with all aspects of
software production
• Software Engineering is the science and art of
building significant software systems that are:
– on time
– on budget
– with acceptable performance
– with correct operation
5
7. Web Engineering
• Web engineering is the study of the process,
used to create high quality Web-based
applications
• Web engineering draws heavily on the
principles and management activities found in
software engineering processes
• Web engineering extends Software Engineering
to Web applications
7
8. Scenarios
A company is looking to
launch an e-commerce
website to sell their products
online. As a web engineer,
you are tasked with designing
and developing the website.
What are the key
considerations you need to
keep in mind during the
design and development
process?
8
11. Web Engineering
• The application of systematic and quantifiable
approaches to cost-effective analysis, design,
implementation, testing, operation, and
maintenance of high-quality web applications
11
12. Defining Web Application
• The application of systematic and quantifiable
approaches to cost-effective analysis, design,
implementation, testing, operation, and maintenance of
high-quality web applications
• Application development on the Web remains largely ad
hoc.
– Spontaneous, one-time events
– Individual experience
– Little or no documentation for code/design
• Short-term savings lead to long-term problems in
operation, maintenance, usability, etc.
12
13. The case of Web Engineering
• 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
– Systematic, phased development
– Careful planning
– Iterative & continuous auditing of the entire process
13
14. Categories of Web Applications
• Document-centric websites
• Interactive and transactional web applications
• Workflow-based web applications
• Collaborative and social web applications
• Portal-oriented web applications
• Ubiquitous web applications
14
15. Document-centric Websites
• Originator to Web applications
• Static HTML documents
• Manual updates
• Pros
– Simple, stable, short response times
• Cons
– High management costs for frequent updates
& large collections
– More prone to inconsistent/redundant info
• Example: static home pages
15
16. Interactive and Transactional Web Applications
• Not only read-only content but also allow content
modification
• Come with the introduction of HTML forms
• Simple interactivity
• Dynamic page creation
– Web pages and links to other pages generated
dynamically based on user input
• Content updates -> Transactions
– Database connectivity
– Increased complexity
• Examples: news sites, booking systems, online banking
16
17. Workflow based Applications
• Designed to handle business processes across
departments, organizations & enterprises
• Automates processes consisting of series of
steps
• Business logic defines the structure
• High complexity; autonomous entities
• Examples: B2B & e-Government
17
18. Collaborative & Social Web Applications
• Unstructured, cooperative environments
– Support shared information workspaces to
create, edit and manage shared information
– Interpersonal communication is paramount
• Classic example: Wikis
• The Social Web
– Moving towards communities of interest
• Examples: Blogs, facebook, twitter etc.
18
19. Web Portals
• One specially-designed at a website which
brings information together from diverse
sources in a uniform way
• Each information source gets its dedicated area
• Specialized portals
– Business portals
– Marketplace portals
– Community portals
19
20. Ubiquitous web application
• These kind of applications provides customized
facilities for any device from anywhere at any
time.
• It has limited interaction facility and support
limited device.
• It require advance knowledge of context where
the web application is being used for dynamic
adjustment.
• Services based on location is an example of such
web application.
20
21. Knowledge-based web application
• This kind of application is used for
providing knowledge for both human
and machine.
• The knowledge management is based
on semantic web technologies.
• Example: Expert System
21
23. Characteristics of Web Applications
• How do Web applications differ
from traditional applications?
• 3 dimensions
– Product-based
– Usage-based
– Development-based
23
25. Usage-based Characteristics
● Much greater diversity compared to traditional
non-Web applications
– Users vary in numbers, cultural background, devices, h/w,
s/w, location etc
● Social Context (Users)
– Spontaneity - scalability
– Heterogeneous groups
● Technical Context (Network & Devices)
– Quality-of-Service
● Natural Context (Place & Time)
– Globality
– Availability
25
26. Development-based Characteristics
● The Development Team
– Multidisciplinary – print publishing, s/w development,
marketing & computing, art & technology
● Technical Infrastructure
– Lack of control on the client side
● Integration
– Internal – with existing legacy systems
– External – with Web services
– Integration issues: correct interaction, guaranteed QoS
26
Editor's Notes
User inputs the web application URL into their web browser and hits Enter.
The web server receives the request and sends back the HTML code that makes up the web page.
The web browser renders the HTML code and displays the web page on the user's device.
The user interacts with the web page by clicking on links or buttons, filling out forms, and so on.
As the user interacts with the web page, the browser sends requests to the web server, asking for additional data or resources.
The web server responds to these requests by sending back more data or resources, which the browser uses to update the web page.
This process of sending requests and receiving responses continues until the user has completed their task within the web application.
Web engineering is a subset of software engineering that deals specifically with the development of web-based software systems. Therefore, the principles, techniques, and best practices of software engineering are also applicable to web engineering.
In order to develop high-quality web-based software systems, web engineers must follow the same fundamental principles of software engineering, such as requirements gathering, analysis and design, testing, and maintenance.
software engineering provides the foundational principles and practices that web engineering builds upon to design, develop, test, and maintain web-based software systems.
AI software is a type of computer program that uses machine learning algorithms, natural language processing, and other techniques to simulate human intelligence and perform tasks that would typically require human intelligence to complete.
Web application is a software program that runs on a web server and can be accessed by users over the internet using a web browser. Web applications are designed to be interactive and allow users to perform tasks or access information through a web-based interface.
Examples of web applications include email clients, online banking portals, e-commerce websites, and project management tools.
Product line software: Microsoft Office: Each program in the suite shares a common user interface and set of features, but is designed for a different set of tasks.
Search engine optimization
the waterfall model should only be applied when requirements are well understood and unlikely to change radically during development as this model
-> The process to gather the software requirements from client, analyze and document them
-> System and software design involves defining the architecture, components, and interfaces of a system or software solution to meet specified requirements.
-> Implementation is the process of writing and coding software based on the design, while unit testing is the process of testing individual units or components of the software to ensure they function correctly in isolation.
-> Integration testing is the process of testing how multiple software components work together, while system testing is the process of testing the entire system as a whole to ensure it meets functional and non-functional requirements.
-> Operation and maintenance refer to the ongoing processes of managing, updating, and supporting a system or software solution to ensure it continues to function effectively and efficiently throughout its lifecycle.
Requirements Gathering: The development team meets with the client to understand the requirements for the website, including the purpose, features, and target audience.
Design: Based on the requirements, the development team creates a design for the website, including the layout, color scheme, and overall look and feel.
Implementation: Using the design as a guide, the development team begins coding the website, including the HTML, CSS, and JavaScript necessary for the site's functionality.
Testing: Once the development is complete, the team conducts various testing activities to ensure that the website works as intended, including unit testing, integration testing, and system testing.
Deployment: Once testing is complete and any necessary fixes have been made, the website is deployed to a production environment and made available to users.
Maintenance: After deployment, the team provides ongoing maintenance and support for the website, including bug fixes, security updates, and feature enhancements as needed.
Regenerate response
document-centric websites primarily focus on presenting and sharing information through documents.
Personalized services
Aims to
-> Increasing scope: As a website grows and evolves, its scope can expand, requiring new features and functionality. This can add complexity to the website's architecture and codebase, as well as to the development process itself.
-> Integration with other systems: As websites become more integrated with other systems, such as databases, third-party APIs, and social media platforms, the complexity of the development process can increase.
-> Mobile responsiveness: With the rise of mobile devices, websites need to be responsive and optimized for different screen sizes and devices. This can add complexity to the development process, particularly if the website was not designed with mobile responsiveness in mind from the beginning.
-> Security
Security: As websites become more complex and handle more sensitive data, the need for security measures also increases. This can add complexity to the development process, particularly if the website needs to comply with strict security regulations or standards.
