Web Engineering

Building the Modern Web

Module 1 Agenda
• Introduction to Web Engineering
• Key Concepts
• The Web Development Process
• Web Technologies
• Web Development Tools
• Challenges in Web Engineering
Introduction to Web Engineering
What is Web Engineering?
• Web engineering is a discipline that focuses specifically on the principles,
methodologies, and techniques used in designing, developing, deploying,
and maintaining web applications and websites.
• It encompasses the systematic and structured approach to creating web-
based software solutions that meet user needs while also considering
factors such as performance, security, scalability, and maintainability.
• Web engineering plays a crucial role in meeting the demands of the
digital age, as web applications and websites have become central to
communication, commerce, education, entertainment, and more.
• It emphasizes best practices, standards, and a structured approach to
building robust and reliable web-based solutions that align with business
goals and user expectations.
World Wide Web
• The World Wide Web, often abbreviated as the "WWW" or simply the
"web," is a global system of interconnected hypertext documents and
multimedia content accessed via the Internet.
• It is a vast and decentralized information space where users can browse,
search for, and interact with a wide range of digital resources, including
text, images, videos, and applications.
• The World Wide Web is one of the most significant and influential
developments in the history of the Internet.
• The World Wide Web was invented by Sir Tim Berners-Lee in the late
1980s and early 1990s while he was working at CERN, the European
Organization for Nuclear Research.
Web Engineering – Key Concepts
Key Concepts
• Website - A website is a collection of web pages or digital content that is
accessible over the internet through a web browser. It serves as a digital
location or space on the World Wide Web where individuals,
organizations, or businesses can share information, provide services, or
engage with their audience. Websites are a fundamental element of the
online presence and communication of various entities and can serve
various purposes.
• Web Application - A web application, often abbreviated as "web app," is
a software program or application that runs on a web server and is
accessed by users through a web browser over the internet or an intranet.
It is a type of application that is designed to be used through a web
interface, making it accessible from various devices with internet
connectivity, such as computers, smartphones, and tablets.
Key Concepts (contd.)
Static and Dynamic Websites are two common types of websites, and they
differ in terms of their content, structure, and how they are generated or
served to users. Here's a comparison of static and dynamic websites.
• Static Websites - have fixed content that remains the same for all users.
Each page is manually created, and changes require manual modification
of the HTML code. These are typically built using HTML and CSS. They
may include some JavaScript for interactivity, but the content doesn't
change based on user input.
• Dynamic Websites - generate content on the fly, often in real-time.
Content can change based on user interactions, data from databases, or
other external factors. These use server-side scripting languages like PHP,
Python, Ruby, or Node.js in combination with databases (e.g., MySQL,
PostgreSQL) to create pages dynamically.
Key Concepts (contd.)
Front-end vs. Back-end – it refers to two distinct parts of a web application
or software system, each with its own responsibilities and technologies.
• Front-end - is the part of a website that users see and interact directly
when they visit a web page. It encompasses all the visual and interactive
elements that make up the user interface (UI) and user experience (UX)
of a website. The front-end is responsible for presenting content and
functionality in an aesthetically pleasing and user-friendly manner.
• Back-end - is the part of a website or web application that operates
behind the scenes and is responsible for managing server-side
processes, databases, and server operations. It focuses on server-side
logic and data handling, ensuring that websites function correctly,
securely, and efficiently.
Key Concepts (contd.)
Client-Server Architecture - is a fundamental design approach used in web
applications and networked systems. In this architecture, a networked
computer system is divided into two main components: the client and the
server. Each of these components has distinct roles and responsibilities in
facilitating communication and delivering services over a network, such as the
Internet.
• Client - is the end-user's device or application that requests and consumes
services or resources from a remote server. It is typically a web browser (e.g.,
Chrome, Firefox, Safari) running on a user's computer, smartphone, or tablet.
• Server – is a powerful, centralized computer or software application
responsible for processing and fulfilling client requests. The server hosts the
web application's back-end, which includes the application's business logic,
data processing, and data storage.
Key Concepts (contd.)
Responsive Design - is an approach to web design and development that
aims to create websites and web applications that adapt and display
effectively on a variety of devices and screen sizes. The goal of responsive
design is to ensure that the user experience remains optimal, regardless of
whether a website is viewed on a desktop computer, laptop, tablet,
smartphone, or other devices with different screen dimensions and
resolutions.
The Web Development Process
The Web Development Process
• The web development life cycle, also known as the web development
process or web development methodology, refers to the series of steps
and phases that web developers and teams follow when creating a website
or web application.
• This structured approach ensures that a web project is well-planned,
executed efficiently, and produces a high-quality final product. The web
development life cycle typically consists of several stages:
1. Requirement Analysis
2. Planning
3. Design
4. Development
5. Testing
6. Deployment
7. Maintenance and Updates
8. Optimization and Scaling (Optional)
The Web Development Process (contd.)
1 - Requirements Analysis:
• The first step is to understand and gather the requirements for the web project.
This involves consulting with stakeholders, clients, and end-users to identify the
project's goals, features, functionalities, and design preferences.
• During this phase, project objectives, target audience, content requirements, and
technical specifications are defined.
2- Planning:
• Based on the gathered requirements, a detailed project plan is created. This plan
outlines the project scope, timeline, budget, and resources required for
development.
• Planning also involves creating a site map or information architecture to define
the structure and navigation of the website.
The Web Development Process (contd.)
3 - Design:
• In the design phase, web designers create the visual elements and user interface
(UI) of the website. This includes designing layouts, graphics, color schemes,
typography, and other visual elements.
• Prototypes may be created to provide a visual representation of the website's
structure and layout before full design implementation.
4 - Development:
• This phase involves the actual coding and development of the website or web
application. Web developers write the code using programming languages such
as HTML, CSS, JavaScript, and server-side scripting languages (e.g., PHP, Python).
• Database development and integration may also occur in this stage if the project
requires database-driven functionality.
The Web Development Process (contd.)
5- Testing:
• Quality assurance and testing are crucial to identify and fix issues in the web
project. This includes various types of testing, such as functional testing, usability
testing, compatibility testing (cross-browser and cross-device), and performance
testing.
• Bugs, errors, and issues are documented and addressed during this phase.
6 - Deployment:
• Once the web application or website has passed testing and quality checks, it is
deployed to a production server or hosting environment. This makes the site
accessible to users on the internet.
• Server configuration, domain name setup, and content migration may be part of
the deployment process.
The Web Development Process (contd.)
7 - Maintenance and Updates:
• After deployment, the website requires ongoing maintenance and updates. This
includes regular software updates, security patches, content updates, and
addressing user feedback.
• Monitoring and analytics tools may be used to track the website's performance
and user behaviour.
8 - Optimization and Scaling (Optional):
• Depending on the project's growth and user demands, optimization and scaling
may be necessary. This involves improving performance, scalability, and adding
new features.
Web Technologies
Web Technologies
• Web technologies, also known as web development
technologies or web stack technologies, are a collection of
software tools, programming languages, frameworks, protocols,
and standards that are used to build and maintain websites and
web applications.
• These technologies are essential for creating various web-
related functionalities, user interfaces, and interactive features
on the World Wide Web.
• Some key web technologies include:
Web Technologies (contd.)
1. HTML (Hypertext Markup Language)
2. CSS (Cascading Style Sheets)
3. JavaScript
4. Server-Side Scripting Languages
5. Databases
6. Web Development Frameworks
7. Web Servers
8. APIs (Application Programming Interfaces)
9. Version Control Systems
10. Content Management Systems (CMS)
11. Web Standards and Protocols
12. Security Technologies
13. Front-End Libraries
Web Technologies (contd.)
1 - HTML (Hypertext Markup Language): HTML is the standard markup
language used to structure and format web documents. It defines the elements
and layout of web pages, including text, images, links, forms, and multimedia.

2 - CSS (Cascading Style Sheets): CSS is used to style and format the
appearance of web content created with HTML. It controls aspects like layout,
typography, colours, spacing, and responsiveness.

3 - JavaScript: JavaScript is a versatile programming language that enables the

creation of interactive and dynamic web content. It can be used for tasks such
as form validation, animations, user interface enhancements, and data
manipulation.
Web Technologies (contd.)
4- Server-Side Scripting Languages: These languages are used to build the
server-side logic of web applications. Common server-side scripting languages
include PHP, Python (e.g., Django), Ruby (e.g., Ruby on Rails), Node.js, and
Java (e.g., Java EE).

5 - Databases: Databases are used to store and manage data for web
applications. Relational databases like MySQL, PostgreSQL, and SQL Server are
commonly used, as well as NoSQL databases like MongoDB for certain
applications.

6- Web Development Frameworks: Frameworks provide pre-built components,

libraries, and tools that streamline web development. Examples include React,
Angular, Vue.js (for front-end development) and Django, Ruby on Rails (for
back-end development).
Web Technologies (contd.)
7 - Web Servers: Web servers are software applications responsible for
handling HTTP requests from clients (e.g., web browsers) and serving web
content. Common web servers include Apache, Nginx, and Microsoft
Internet Information Services (IIS).

8 - APIs (Application Programming Interfaces): APIs allow different

software systems to communicate and exchange data. Web APIs are used to
connect web applications with external services, data sources, or third-party
platforms.

9 Version Control Systems: Tools like Git are used to manage and track
changes to web code, enabling collaborative development and version
management.
Web Technologies (contd.)
10 - Content Management Systems (CMS): CMS platforms like WordPress,
Drupal, and Joomla provide tools for creating and managing web content,
making it easier for non-technical users to maintain websites.

11- Web Standards and Protocols: Web technologies adhere to various

standards and protocols, including HTTP/HTTPS (Hypertext Transfer
Protocol), W3C (World Wide Web Consortium) standards, and REST
(Representational State Transfer) principles.

12 - Security Technologies: Security technologies like SSL/TLS encryption,

HTTPS, and security libraries are used to protect web applications and user data
from threats and attacks.

14- Front-End Libraries: Libraries like jQuery, Bootstrap, and Material-UI offer pre-
built UI components and functionalities to speed up front-end development.
Web Development Tools
Web Development Tools
• Web development tools are software applications, utilities, and resources
that assist web developers and designers in creating, testing, debugging,
and maintaining websites and web applications.
• These tools streamline the development process, improve productivity,
and help ensure the quality and functionality of web projects.
• Here are some essential web development tools:
Web Development Tools
1. Text Editors and Integrated Development Environments (IDEs)
2. Version Control Systems (VCS)
3. Web Browsers and Developer Tools
4. Package Managers
5. Task Runners and Build Tools
6. CSS Preprocessors
7. Responsive Design Testing Tools
8. Code Linters and Validators
9. Performance and Page Speed Tools
10. API Testing and Documentation Tools
11. Content Management Systems (CMS)
12. Database Management Tools
13. Security Scanning and Testing Tools
14. Accessibility Testing Tools
15. Content Delivery Networks (CDNs)
Web Development Tools (contd.)
1- Text Editors and Integrated Development Environments (IDEs):
• Text editors like Visual Studio Code, Sublime Text, and Atom provide
code editing with syntax highlighting, autocompletion, and extensions for
various programming languages.
• IDEs like JetBrains PhpStorm, Eclipse, and WebStorm offer integrated
environments with advanced coding features, debugging, and project
management tools.

2 - Version Control Systems (VCS):

• Git is the most widely used VCS, allowing developers to track changes,
collaborate, and manage code repositories. Git clients like GitKraken and
Sourcetree provide graphical interfaces.
• Hosting platforms like GitHub, GitLab, and Bitbucket offer cloud-based
Git repository hosting and collaboration features.
Web Development Tools (contd.)
3- Web Browsers and Developer Tools:
• Web browsers like Chrome, Firefox, Opera and Safari come with built-in
developer tools that allow developers to inspect, debug, and analyze web
pages, including elements, network requests, and JavaScript code.
• Browser extensions like the Web Developer Extension and Firebug
provide additional debugging and web development capabilities.
4- Package Managers:
• Package managers like npm (Node Package Manager) and yarn
(alternative to npm) are used for managing and installing JavaScript
libraries and dependencies for web projects.
5- Task Runners and Build Tools:
• Tools like Grunt, Gulp, and webpack automate repetitive tasks like file
minification, compilation, and bundling, improving project efficiency.
Web Development Tools (contd.)
6- CSS Preprocessors:
• Preprocessors like SASS and LESS enhance CSS development with features
like variables, nesting, and mixins. They compile into standard CSS for web
deployment.
7- Responsive Design Testing Tools:
• Tools like BrowserStack, Responsinator, and Chrome DevTools' Device
Mode help developers test websites and web applications on various
screen sizes and devices to ensure responsiveness.
8 - Code Linters and Validators:
• Linters such as ESLint (for JavaScript) and Prettier help enforce coding
standards, identify errors, and ensure code consistency.
• HTML and CSS validators check code against W3C standards to ensure
compliance and proper markup.
Web Development Tools (contd.)
9- Performance and Page Speed Tools:
• Tools like Google PageSpeed Insights and GTmetrix analyze website
performance, suggest optimizations, and measure page load times.
• Profiling tools like Chrome DevTools' Performance tab help identify
bottlenecks and optimize web page performance.
10- API Testing and Documentation Tools:
• Tools like Postman and Swagger are used for testing and documenting
RESTful APIs, making it easier to work with external services.
11 - Content Management Systems (CMS):
• CMS platforms like WordPress, Joomla, and Drupal provide web development
tools and templates for building and managing content-driven websites.
12 - Database Management Tools:
• Tools like phpMyAdmin, Sequel Pro, and DBeaver assist in managing and
querying databases for web applications.
Web Development Tools (contd.)
13 - Security Scanning and Testing Tools:
• Security tools like OWASP ZAP and Nessus help identify and address security
vulnerabilities and threats in web applications.

14- Accessibility Testing Tools:

• Tools like Axe, Wave, and aXe-core are used to check web content for
accessibility compliance and assistive technology compatibility.

15- Content Delivery Networks (CDNs):

• CDNs like Cloudflare and Akamai improve web application performance by
distributing content across multiple servers and locations.
Challenges in Web Engineering
Challenges in Web Engineering
• Web engineering, like any other field of software development, comes
with its set of challenges and complexities.
• These challenges can vary depending on the project, technology stack,
and the evolving nature of the web.
• Some common challenges in web engineering include:
Challenges in Web Engineering (contd.)
1. Rapid Technological Evolution
2. Cross-Browser Compatibility
3. Mobile Responsiveness
4. Performance Optimization
5. Security Concerns
6. Scalability
7. Maintainability and Code Quality
8. Data Management
9. User Experience (UX)
10. Content Management
11. Version Control and Collaboration
12. Testing and Quality Assurance
13. Third-Party Integration
14. Regulatory Compliance
15. Project Management
16. Technical Debt
17. User Authentication and Authorization
18. Optimizing for SEO
Challenges in Web Engineering (contd.)
Rapid Technological Evolution: The web landscape is constantly evolving with new languages,
frameworks, and tools emerging regularly. Keeping up with these changes and making informed
technology choices can be challenging.

Cross-Browser Compatibility: Ensuring that web applications work consistently across various web
browsers (e.g., Chrome, Firefox, Safari, Edge, Internet Explorer) can be difficult due to differences in
rendering engines and standards support.

Mobile Responsiveness: Designing and developing websites and applications that are responsive and
function well on a wide range of mobile devices with different screen sizes and resolutions is a complex
task.

Performance Optimization: Achieving fast load times and optimal performance, especially for large-
scale web applications, requires careful optimization of assets, code, and server configurations.

Security Concerns: Web applications are vulnerable to various security threats, including SQL injection,
cross-site scripting (XSS), and data breaches. Implementing robust security measures is essential.
Challenges in Web Engineering (contd.)
Scalability: Ensuring that web applications can handle increased traffic and user load as they grow in
popularity requires planning for scalability, load balancing, and server resources.

Maintainability and Code Quality: As web projects grow, maintaining code quality and readability
becomes challenging. Establishing coding standards, documentation, and best practices is essential.

Data Management: Managing and securing data, including user data, database design, and data
privacy compliance (e.g., GDPR), is a complex and critical aspect of web engineering.

User Experience (UX): Creating a positive user experience, including intuitive navigation, responsive
design, and accessibility for all users, is essential but can be challenging to achieve.

Content Management: Developing content management systems (CMS) and workflows for content
creation and updates, especially for large websites, can be complex.

Version Control and Collaboration: Coordinating work among team members, managing code
versions, and resolving conflicts in collaborative development environments can be challenging.
Challenges in Web Engineering (contd.)
Testing and Quality Assurance: Comprehensive testing, including cross-browser testing,
security testing, and performance testing, is time-consuming and requires dedicated
resources.
Third-Party Integration: Integrating external APIs, services, and third-party components can
introduce compatibility and security challenges.
Regulatory Compliance: Ensuring compliance with industry regulations and standards, such
as accessibility requirements or payment card industry (PCI) standards, can be complex and
requires ongoing effort.
Project Management: Efficiently managing web development projects, including scope,
timelines, budgets, and client expectations, is a continuous challenge.
Technical Debt: Accumulating technical debt (poorly designed or unoptimized code) over
time can hinder future development and require refactoring efforts.
User Authentication and Authorization: Implementing secure user authentication and
authorization systems can be complex, particularly for applications with different user roles
and permissions.
Optimizing for SEO: Ensuring that web content is optimized for search engines (SEO) to
improve visibility and ranking in search results can be a challenging and ongoing task.
Lecture 1 Concluded, Thanks