UNIT 1

1. Introduction to Web Engineering

• Definition: Web engineering focuses on developing and managing web applications.

It addresses complexity, diversity, and the need for controlled growth of web-based
systems.

• History: The rapid evolution of the Internet and World Wide Web has transformed
industries like manufacturing, education, and banking.

• Purpose: Supports creative development while ensuring maintainability and

scalability.

2. Evolution of Web Applications

• Progression from static HTML pages to dynamic, interactive web applications using
technologies like HTML5, CSS3, and WebGL.

• Key contributors include advancements in media integration, information science,

and networking technologies.

3. Need for Web Engineering

• Diverse applications, from small-scale information dissemination to large-scale

enterprise solutions.

• Industries like construction, banking, and government utilize web applications to

optimize operations.

4. Categories of Web Applications

1. Document-Centric: Static HTML documents, manually updated.

2. Interactive: Dynamic content based on user input (e.g., HTML forms, CGI).

3. Transactional: User-modifiable data, backed by structured queries and databases.

4. Workflow-Based: Enables B2B operations; robust and flexible.

5. Collaborative: Focus on group communication (e.g., forums, e-learning).

6. Portal-Oriented: Single access point for diverse information (e.g., search engines).
 7. Knowledge-Based: Semantic web technologies for knowledge sharing.

5. Characteristics of Web Applications

• Immediacy: Quick deployment and updates.

• Security: Vital due to network access.

• Aesthetics: Influences user engagement and application success.

6. Comparison: Software vs. Web Engineering

• Software Engineering: General problem-solving with software.

• Web Engineering: Specialized in web development, often involving unique

frameworks and web-specific tools.

7. World Wide Web (WWW)

• Subset of the Internet, consisting of interlinked web pages accessed via browsers.

• Core Technologies by Tim Berners-Lee:

1. Universal Document Identifier (UDI).

2. Hypertext Markup Language (HTML).

3. Hypertext Transfer Protocol (HTTP).

8. TCP/IP and Networking Layers

• TCP/IP: Handles data transmission and routing in networks.

• OSI Layers:

o Application, Presentation, Session, Transport, Network, Data Link, Physical.

• Software Components:

o Protocols like SMTP (email), FTP (file transfer), and HTTP (web).
9. Wireless Application Protocol (WAP)

• Enables wireless communication standards.

• Protocols: Wireless Transaction Protocol (WTP), Wireless Datagram Protocol (WDP).

10. Key Web Protocols

• HTTP/HTTPS: Core protocols for web communication; HTTPS adds encryption.

• FTP: Facilitates file transfers between computers.

11. Search Engines

• Functioning: Use crawlers (spiders, robots) to index the internet.

• Types:

1. Directories: Human-edited; enhance search engine visibility.

2. Meta Search Engines: Aggregate results from multiple search engines.

12. Web Servers

• Definition: Computers hosting web content.

• Working:

o Respond to client requests via file delivery or dynamic generation.

• Architectures:

1. Multi-Processing: Parent process delegates requests.

2. Multi-Threaded: Each thread handles a connection.

3. Hybrid: Combines both approaches.

13. Web Caching

• Temporary storage of web documents to reduce load and bandwidth consumption.

14. Case Studies

1. IIS (Internet Information Services):

o NUMA-aware for optimized performance.

o Supports multiple worker processes for load balancing.

2. Apache HTTP Server:

o Key driver of the World Wide Web's growth.

o Open-source and widely adopted.

UNIT 2
1. Information Architecture (IA)

• Definition: The art of modeling and organizing complex systems to create usable
environments.

• Applications: Library systems, content management systems, database development,

technical writing, and web development.

• Core Qualities:

o Structural design of shared information environments.

o Methods for organizing and labeling websites, intranets, and online

communities.

o Incorporating design principles into the digital landscape.

2. Role of Information Architect

• Responsibilities:

o Define project scope, objectives, and target audience.

o Organize and map site content to appropriate sections.

o Design navigation systems and prevent user confusion.

o Coordinate team tasks and client communication.

o Ensure success criteria are documented and shared with all stakeholders.
 o Collaborate with designers, engineers, and quality control teams.

3. Collaboration and Communication

• Importance:

o Effective communication ensures all team members understand their roles.

o Documentation, like blueprint diagrams, must be clear to members with

varying technical expertise.

• Web Collaboration Techniques:

o Remote multi-user conferences, phone/text chat.

o Unified communication systems to facilitate teamwork.

4. Organizing Information

• Purpose:

o Make information easy to find and understand for users.

o Support casual browsing and directed searches.

• Challenges:

o Decentralization of information due to the Internet.

o Need to balance physical and digital constraints.

• Organizing Websites:

o Involves categorization (schemes) and structure (relationships between

content).

5. Web Design and Development Phases

1. Information Gathering: Identify goals, target audience, and content needs.

2. Planning: Create a site map; decide on interactive elements and technologies.

3. Design: Determine the website's look and feel, ensuring alignment with brand
identity.
 4. Development: Build the website using graphics, navigation, and content.

5. Testing and Delivery: Test for functionality, compatibility, and optimization.

6. Maintenance: Regular updates to content and features.

6. Design Issues

• Accessibility: Ensure the website works for all users, regardless of ability or location.

• Browser Compatibility: Design websites to function across major browsers.

• Navigational Structure: Ensure intuitive and effective navigation.

• Content Positioning: Place readable, well-organized content with suitable fonts and
colors.

7. Conceptual and High-Level Design

• Conceptual Design:

o Broad outline of functions and interactions.

o Focus on user needs and experiences.

• High-Level Design (HLD):

o Architecture diagrams identifying major system components.

o Overview understandable to administrators and stakeholders.

8. Navigation Systems

• Types:

1. Hierarchical Navigation: Primary navigation system based on content

hierarchy.

2. Global Navigation: Site-wide navigation allowing vertical/lateral movement.

3. Local Navigation: Specific to sub-sites (e.g., product catalogs).

4. Ad Hoc Navigation: Editorially created links embedded within content.

• Browser Navigation Features:

 o Back, forward, history, and bookmarks enhance user experience.

9. Searching Systems

• Needed for large or dynamic websites where navigation alone is insufficient.

• Automates indexing to improve content accessibility.

10. Good vs. Bad Web Design

• Good Design:

o Clear conversion paths, meaningful headings, and easy navigation.

• Bad Design:

o Overloads users with information; focuses more on promotions than user

experience.

11. Web Publishing

• Process:

o Create and upload content using web development tools.

o Publish on web servers (shared or dedicated).

• Advantages:

o Cost-effective and accessible globally.

12. Requirements Engineering for Web Applications

• Definition: Process to identify, document, and validate requirements for web

applications.

• Importance:

o Addresses the heterogeneous audience and complex usability needs.

o Involves functional, non-functional, and domain requirements.

• Activities:
1. Elicitation: Identify requirements from stakeholders.

2. Analysis: Validate that all needs are captured.

3. Specification: Document requirements formally.

4. Validation: Ensure requirements are cohesive and traceable.

5. Management: Handle changes throughout development.

13. Evaluating Web Development Quality

• Metrics:

o Code quality (standards-compliance).

o Browser/mobile compatibility.

o SEO optimization.

o Accessibility and usability.

14. Web Security

• Risks:

o Vulnerabilities in web servers and networks.

• Solutions:

o Regular audits and updates to software, coding, and server configurations.

15. Web Effort Estimation

• Challenges:

o Estimating time, cost, and effort for web projects.

• Recommendations:

o Balance productivity and security.

o Implement transparent systems for user interactions.

 UNIT 3
1. HTML (Hypertext Markup Language)

• Definition: A standard markup language for creating web pages and applications.

• Structure:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

• Elements:

o Start and end tags with attributes.

o Example:

html

Copy code

<p>This is a paragraph.</p>

• Head Tags:

o <title>: Page title.

o <meta>: Metadata (description, keywords, etc.).

 o <link>: External resources (e.g., CSS).

o <script>: JavaScript.

o <style>: Inline styles.

• Body Tags: Contain visible content on the webpage.

• DOCTYPES: Declare document type for compatibility.

2. DHTML (Dynamic HTML)

• Definition: Enhances HTML by integrating:

o CSS for styling.

o JavaScript for interactivity.

o Document Object Model (DOM) for dynamic content manipulation.

• Comparison with HTML:

o HTML creates static pages; DHTML adds dynamic effects.

o DHTML uses client-side scripting (JavaScript) and CSS.

3. CSS (Cascading Style Sheets)

• Purpose: Control presentation and layout of HTML elements.

• Types:

1. External:

html

Copy code

<link rel="stylesheet" type="text/css" href="styles.css">

2. Internal:

html

Copy code

<style>
 body { background-color: lightblue; }

</style>

3. Inline:

html

Copy code

<p style="color:red;">This is a paragraph.</p>

• Syntax:

css

Copy code

selector {

property: value;

• Features:

o Borders, margins, padding.

o Positioning: absolute, relative, fixed.

4. JavaScript

• Definition: A client-side scripting language for dynamic content.

• Uses:

o Validating forms.

o Modifying HTML and CSS dynamically.

o Handling browser events (e.g., clicks).

o Creating cookies.

• Example:

javascript

Copy code
document.getElementById("demo").innerHTML = "Hello World!";

5. Server-Side Technologies

PHP (Hypertext Preprocessor)

• Definition: Server-side scripting language embedded in HTML.

• Uses:

o Manage dynamic content.

o Interact with databases.

o Session tracking.

• Example:

php

Copy code

<?php echo "Hello, World!"; ?>

JSP (Java Server Pages)

• Definition: Technology for embedding Java code in HTML.

• Advantages:

o Platform-independent.

o Easier integration with Java APIs.

o Handles dynamic content better than static HTML.

ASP (Active Server Pages)

• Definition: Microsoft's server-side scripting engine for web applications.

• Features:

o Improved performance over CGI.

o Integration with IIS (Internet Information Services).

6. AJAX (Asynchronous JavaScript and XML)

 • Definition: Combines JavaScript and XML for asynchronous web updates.

• Benefits:

o Reduces server load by fetching data without reloading pages.

o Uses XMLHttpRequest for server communication.

• Example:

javascript

Copy code

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "data.xml", true);

xhttp.send();

7. Web Forms

• Elements:

o <input>: Text fields, radio buttons, etc.

o <textarea>: Multi-line input.

o <select>: Dropdowns.

• Example:

html

Copy code

<form>

<input type="text" name="name">

<select>

<option value="1">Option 1</option>

</select>

</form>
8. Cookies

• Definition: Small data files stored on the client for session tracking.

• JavaScript Example:

javascript

Copy code

document.cookie = "username=John Doe";

9. Multimedia in HTML

• Images:

html

Copy code

<img src="image.jpg" alt="Description">

• Audio:

html

Copy code

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

</audio>

• Video:

html

Copy code

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

</video>

10. Rich Internet Applications (RIA)

 • AJAX facilitates RIA by providing:

o Dynamic and responsive interfaces.

o Improved user experience through real-time updates.

UNIT 4
Technologies for Web Applications II

XML (Extensible Markup Language)

• Definition: A markup language used to carry and store data, designed to be self-
descriptive.

• Features:

o Allows defining custom tags.

o Focuses on the structure and content of data, not its presentation.

o Case-sensitive.

• Need:

o Facilitates data exchange.

o Replaces EDI (Electronic Data Interchange) by being more flexible and cost-
efficient.

HTML vs. XML

Aspect HTML XML

Purpose Displays data. Transports and stores data.

Case Sensitivity Not case-sensitive. Case-sensitive.

Tag Definition Predefined tags. Custom-defined tags.

Dynamic Nature Static (presentation focus) Dynamic (data transport focus).

Document Validation in XML

• Ensures XML documents are well-formed and valid.

 • Tools like DTD (Document Type Definition) define valid elements and structures.

• Methods:

o Internal DTD (defined within the XML file).

o External DTD (referenced via external files).

Embedding XML in HTML

• XML data can be included in HTML using <xml> tags.

• Example of embedding XML data as a "data island":

UNIT 5
• E-Commerce

• Definition:
E-Commerce refers to the buying, selling, and exchanging of goods, services, and
information through the internet or other electronic networks. It utilizes ICT
(Information and Communication Technology) and EFT (Electronic Funds Transfer).

• Components:

• ICT (Information and Communication Technology):

Ensures communication between businesses and customers, making e-commerce
seamless.

• EFT (Electronic Funds Transfer):

Digital transfer of money, enabling online payments and transactions.

• EDI (Electronic Data Interchange):

The computer-to-computer exchange of business documents in a standard electronic
format.

• Business Models:

• 1. Business-to-Business (B2B)

• A business sells its products to another business for resale.

• Examples: Wholesalers ordering products from manufacturers.

• Advantages:

• Reduced overhead costs.

• Streamlined supply chain.

• 2. Business-to-Consumer (B2C)

• A business directly sells products or services to consumers.

• Examples: Amazon, Flipkart.

• Features:

• Focuses on user experience and convenience.

• Requires digital marketing strategies to attract customers.

• 3. Consumer-to-Consumer (C2C)

• Consumers sell directly to other consumers.

• Examples: OLX, eBay.

• Advantages:

• Minimal costs.

• Opens new markets for individuals.

• Disadvantages:

• Risk of fraud due to lack of trust between buyers and sellers.

• 4. Consumer-to-Business (C2B)

• Consumers offer their products or services to businesses.

• Examples: Freelancers on platforms like Upwork.

• Features:

• Consumer-initiated pricing.

• Reverse auction systems.

• 5. Government Models (B2G, G2B, G2C)

• Facilitates trade and interaction between governments, businesses, and citizens.

• B2G: Businesses provide services to governments (e.g., tender applications).

• G2B: Governments facilitate services for businesses (e.g., e-procurement portals).

• G2C: Governments provide citizen services (e.g., birth certificates, tax payments).
•

• Features of E-Commerce

• Non-Cash Payment:

• Use of digital payment methods like credit/debit cards, UPI, and digital wallets.

• 24x7 Availability:

• Business transactions can occur any time, ensuring global accessibility.

• Advertising & Marketing:

• Digital platforms provide enhanced reach and targeted marketing.

• Improved Sales:

• Automation in product listing and order processing increases efficiency.

• Inventory Management:

• Real-time tracking of stock reduces overhead and errors.

• Communication Improvement:

• Fast, efficient, and reliable communication between businesses and customers.

• E-Commerce Security

• Security Challenges

• Hacking and Unauthorized Access:

• Hackers can gain access to sensitive customer data.

• Fraudulent Transactions:

• Fake or compromised transactions pose risks.

• Viruses and Malware:

• Can disrupt e-commerce websites, leading to data loss.

• Technical Components:

• Client Software:

• Secure browser sessions to prevent phishing and malware attacks.

• Server Software:

• Regular updates and patches to ensure protection from vulnerabilities.

• Network Transport:

• Use of protocols like HTTPS and VPN for secure communication.

• Security Measures:

• Encryption: Secures sensitive information during transmission.

• Authentication: Validates user identity using credentials like OTP or biometrics.

• Firewalls: Filters unauthorized access to the network.

• Digital Certificates: Ensures the authenticity of websites and users.

• Payment Systems in E-Commerce

• Types of Payment Systems:

• Credit/Debit Cards:

• Widely used for online payments with CVV and OTP authentication.

• E-Wallets:

• Preloaded accounts like Paytm and Google Pay.

• RTGS/NEFT:

• Bank-to-bank real-time or deferred net settlements.

• E-Cash:

• Virtual money stored on devices for small transactions.

• Advanced Payment Protocols:

• SSL (Secure Socket Layer):

• Encrypts data between client and server.

• SET (Secure Electronic Transactions):

• Developed by Visa/MasterCard to secure credit card transactions.

•
• Cryptography in E-Commerce

• Need for Cryptography:

• Ensures privacy, authentication, and integrity of sensitive data.

• Types of Cryptography:

• Secret-Key Cryptography:

• A single shared key for encryption and decryption.

• Challenges: Key distribution and management.

• Public-Key Cryptography:

• Uses a pair of keys (public and private).

• Advantages: Secure key sharing and scalability.

• Digital Signatures:

• Ensures document authenticity and non-repudiation.

• How It Works:

• A one-way hash is encrypted with the sender’s private key.

• Recipients decrypt it with the sender’s public key to verify integrity.

• Cybercrimes in E-Commerce

• Types of Cybercrimes:

• Cyberstalking:

• Harassing individuals using electronic means.

• Spoofing:

• Creating fake emails or websites to deceive users.

• Data Theft:

• Stealing sensitive customer information.

• Virus Attacks:

• Deploying malware to disrupt operations.

• Preventive Measures:

• Regular security audits.

• Implementation of multi-factor authentication.

• Employee awareness and training.

• Marketing in E-Commerce

• Key Channels:

• Pay-Per-Click (PPC):

• Paid advertisements targeting specific audiences.

• Search Engine Optimization (SEO):

• Increases visibility in organic search results.

• Affiliate Marketing:

• Partnering with websites to promote products on a commission basis.

• Email Marketing:

• Personalized emails to retain customers and increase sales.

• Conversion Optimization:

• Enhancing website usability, faster loading times, and intuitive interfaces.

• Legal and Ethical Issues in E-Commerce

• Ethical Issues:

• Web Tracking: Monitoring user behavior with cookies.

• Privacy Concerns: Protecting customer identity and financial details.

• Legal Challenges:

• Fraud Prevention:

• Combating identity theft and phishing attacks.

• Copyright Violations:
• Protecting intellectual property rights.

• Domain Name Conflicts:

• Resolving disputes over similar or misleading domain names.

• Regulations:

• Countries regulate encryption technologies and mandate privacy policies to protect

users.