Web Tech Evolution: From Web1.0 to Web3.0, Protocols & Future Trends

The Evolution of Web Technologies: A Timeline of Change

1. The Three Eras of the Web: Web1.0, Web2.0, and Web3.0

The web has evolved through three distinct phases, each transforming how users interact with information and services. Below is a comparison table and a timeline to visualize these changes.

Key Differences: Web1.0 vs. Web2.0 vs. Web3.0

Visual Timeline of Web Evolution

2. How the Web Works: Client-Server Architecture

Every interaction on the web follows a client-server model, where:

• Client: Your device (browser, app) sends requests (e.g., loading a webpage).
• Server: A remote computer (e.g., Google’s servers) processes requests and sends back responses.

The OSI Model vs. TCP/IP Model (How Data Travels)

While the OSI model is a theoretical 7-layer framework, the TCP/IP model (used in real networks) simplifies it to 4 layers. Below is a layered diagram showing how data (e.g., an HTTP request) moves from your browser to a server.

Real-World Example: Loading a YouTube Video

1. Your browser (client) sends an HTTP request to YouTube’s server.
2. The request travels through TCP/IP layers (encapsulated in packets).
3. YouTube’s server processes the request, compresses the video, and sends it back.
4. Your browser decodes the video and displays it.

3. Core Web Protocols: HTTP, HTTPS, FTP, and SMTP

Protocols are the "rules" that define how data is exchanged. Below are the most critical ones:

A. HTTP/HTTPS: The Backbone of the Web

• HTTP (HyperText Transfer Protocol): Transfers data between web servers and clients (e.g., loading a webpage).
• HTTPS (HTTP Secure): Encrypts data using TLS/SSL to prevent hacking (e.g., online banking).

HTTP Request/Response Cycle (Sequence Diagram)

sequenceDiagram
    participant Client as Browser
    participant Server as Web Server
    Client->>Server: GET /index.html (HTTP Request)
    Server-->>Client: 200 OK (HTML Response)
    Client->>Server: POST /login (Form Submission)
    Server-->>Client: 302 Redirect (Login Success)

Real-World Example: eSewa Transactions

• When you pay a bill on eSewa, your browser sends an HTTPS POST request to eSewa’s server.
• The server verifies your payment, encrypts the transaction, and sends a confirmation.

B. FTP (File Transfer Protocol)

• Used to upload/download files (e.g., hosting a website via FileZilla).
• SFTP (Secure FTP): Encrypted version for secure file transfers.

C. SMTP (Simple Mail Transfer Protocol)

• Used for sending emails (e.g., Gmail, Ncell’s email service).
• Works with POP3/IMAP for receiving emails.

4. Web Technologies Comparison: HTML5 vs. CSS3 vs. JavaScript vs. PHP

Real-World Example: Kathmandu Traffic Routes (AJAX in Action)

• When you type a destination in Google Maps, an AJAX request fetches real-time traffic data without reloading the page.
• The JavaScript updates the map dynamically using Google Maps API.

5. Emerging Trends: Progressive Web Apps (PWAs) and Edge Computing

A. Progressive Web Apps (PWAs)

• Definition: Web apps that work like native apps (e.g., offline access, push notifications).
• Example: Twitter Lite (works offline), AliExpress (fast loading).

PWA Features Comparison

B. Edge Computing

• Definition: Processing data closer to the user (e.g., on a local server) to reduce latency.
• Example: Cloudflare (CDN for faster global websites), 5G networks (real-time gaming).

In the Real World

1. eSewa (Nepal)

   • Idea Used: HTTPS + PHP for secure transactions.
   • How: When you pay a bill, eSewa’s server validates your request via PHP, encrypts it with HTTPS, and processes the payment in real-time.

2. Pathao (Ride-Hailing App)

   • Idea Used: AJAX + JavaScript for real-time driver tracking.
   • How: The app constantly sends AJAX requests to Pathao’s server to update driver locations without refreshing the screen.

3. NEPSE (Stock Market)

   • Idea Used: WebSockets (real-time updates).
   • How: Stock prices update instantly via WebSocket connections, not traditional HTTP requests.

4. Google Search

   • Idea Used: Edge Computing (CDNs).
   • How: Google’s servers cache search results in data centers near you, reducing load time.

Exam Tip

1. Memorize the differences between Web1.0, Web2.0, and Web3.0—exams often ask for comparisons.
2. Draw the TCP/IP model in exams if asked about data transmission.
3. Practice writing HTTP requests/responses (e.g., GET, POST methods).
4. Relate theories to Nepali examples (e.g., eSewa uses HTTPS, Daraz uses AJAX).
5. For coding questions, always include:
   • Proper DOCTYPE (<!DOCTYPE html>).
   • Meta tags (charset, viewport).
   • Semantic HTML5 (<header>, <section>).