Lecture # 1

CSC336 Web Technologies

Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ

Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1

Overview of
Web Platforms
Agenda

• Overview of Web Terminologies

• Web Communication Protocol (HTTP)
• Web Generations
• Standards & Constraints
Introduction to Web Platforms

• Definition of Web Platforms

“Web platforms are digital environments or frameworks that allow users
to interact with, develop, and deploy web-based applications and services.”
• Importance in Modern Technology
They provide a structured way for developers to create, manage, and deliver
content and functionality over the internet
 Key components
Web platforms can vary in complexity and scope, but they typically include several key components:
1. Infrastructure: The underlying technology stack, including servers, databases, and network
resources that support web applications.
2. Development Tools: Software and frameworks that aid in building web applications. This
includes languages (like HTML, CSS, JavaScript), libraries, and frameworks (such as React,
Angular, or Django).
3. Content Management: Systems or tools that help manage, organize, and deliver content.
Examples include WordPress, Drupal, and Joomla.
4. User Interface (UI): The elements and design that users interact with directly, such as web
pages, forms, and navigation menus.
5. Application Programming Interfaces (APIs): Interfaces that allow different software systems to
communicate and interact with each other. APIs are crucial for integrating third-party services
and enabling complex functionalities.
6. Security Features: Measures and protocols to protect data and ensure secure interactions
between users and the platform. This includes authentication, encryption, and access controls.
 Examples of web platforms
• Social Media Platforms: Facebook, Twitter, Instagram, which allow
users to create and share content.
• E-commerce Platforms: Shopify, Magento, WooCommerce, which
enable businesses to sell products and services online.
• Content Management Systems (CMS): WordPress, Drupal, Joomla,
which help users create and manage website content without deep
technical knowledge.
• Cloud Platforms: Amazon Web Services (AWS), Google Cloud
Platform (GCP), Microsoft Azure, which provide infrastructure and
services for building and hosting web applications.
Web Communication Protocol -
HTTP
• Definition of HTTP
• HTTP, or Hypertext Transfer Protocol, is a foundational protocol used for transmitting
data over the web.
• HTTP is the protocol used for transferring hypertext (text with links) and other
resources between a web server and a web client (such as a browser).
• Role in Web Communication
• It defines how messages are formatted and transmitted, and how web servers and
browsers should respond to various commands.
 HTTP - Request and Response Cycle

HTTP operates on a request-

response model:
• Client (Browser) requests
content from Server
• Server sends the requested
content back to the Client in
the form of Response
HTTP Methods

• GET
• Retrieve data from the server (e.g., requesting a web page).
• POST
• Submit data to be processed by the server (e.g., submitting a form).
• PUT/PATCH
• Updates existing data on the server.
• DELETE
• Deletes data from the server.
HTTP Status Codes

1xx Informational Responses

2xx Success Responses (e.g., 200 OK)

3xx Redirection Responses

4xx Client Error Responses (e.g., 404 Not Found)

5xx Server Error Responses (e.g., 500 Internal Server Error)

HTTP Headers
HTTP messages include headers that provide additional information
about the request or response. For instance:
• ‘Content-Type’ specifies the type of data being sent
• ‘Authorization’ includes credentials for accessing protected
resources.
HTTPS - Secure Communication

• HTTPS
• HTTP Secure
• SSL/TLS
• Encrypts communication between client and server
• Importance of Security
• HTTPS (Hypertext Transfer Protocol Secure) is an extension of HTTP that uses
encryption (via SSL/TLS) to secure the data transmitted between the client and
server, protecting it from eavesdropping and tampering.
Web Generations - Overview

1 2 3
Web 1.0 Web 2.0 Web 3.0
• The Static Web • The Social Web • The Semantic Web
 Web 1.0 - The Static Web

Timeframe Characteristics Examples

1990s Static pages, limited interactivity Early websites with basic HTML
 Web 2.0 - The Social Web

Timeframe Characteristics Examples

2000s Dynamic content, user-generated Facebook, Twitter, YouTube
content, social media
 Web 3.0 - The Semantic Web

Timeframe Characteristics Examples

2010s onwards Machine-readable content, AI- Google’s Knowledge Graph, Voice
driven, personalized experiences Assistants
 Web 4.0 - The Intelligent Web (Future)

Predicted Evolution Characteristics Potential Impact

Advanced AI, IoT integration, Revolutionize user experience
immersive experiences with advanced AI-driven
personalization, seamless
integration of physical and
digital worlds.
Web Standards - Introduction

• Definition of Web Standards

Web standards are guidelines and specifications established by organizations such as the World
Wide Web Consortium (W3C) and the Internet Engineering Task Force (IETF) to ensure consistent,
interoperable, and accessible web content and technologies across different devices and
platforms.
• Importance in Web Development
Web standards are crucial in web development for ensuring:
• Compatibility
• Accessibility
• Consistency
across diverse browsers and devices, leading to a more reliable and user-friendly web
experience.
Key Web Standards Organizations
• W3C
• World Wide Web Consortium
• IETF
• Internet Engineering Task Force
• WHATWG
• Web Hypertext Application Technology Working Group
HTML & CSS Standards

HTML5 Latest version, features, and importance

CSS3 Latest version, new features (flexbox, grid)

JavaScript Standards (ECMAScript)

Evolution of JavaScript

Current Standard ECMAScript 2023

Key Features Asynchronous programming, modules, etc.

Web Accessibility Standards

• WCAG
• Web Content Accessibility Guidelines
• Importance of Accessible Web Design
• Accessible web design is essential for ensuring that all users, including those with
disabilities, can effectively interact with and navigate websites, promoting
inclusivity and equal access to information.
• Examples
• Text-to-speech, keyboard navigation
 Importance of Speed and
Performance

Web
Performance Standards
Page load time,
mobile
responsiveness

Standards
Google
Tools Lighthouse,
WebPageTest
Web Security
Standards
• Best Practices
• Secure coding, data
encryption,
authentication
• Common Standards
• OWASP Top Ten
Web Constraints - Introduction
• Definition of Constraints in Web Development
In web development, constraints refer to limitations or restrictions imposed on
design, functionality, or technology, such as browser compatibility, performance
requirements, and accessibility standards, that guide the development process and
influence how web applications are built and optimized.
• Importance of Understanding Constraints
Understanding constraints is vital for web development as it ensures the creation
of functional, performant, and compatible web solutions within defined limitations
and requirements.
 Technical Constraints

Browser Compatibility Device Compatibility Bandwidth Limitations

Ensuring consistent experiences Adapting to different screen sizes Optimizing for low-bandwidth
across browsers and devices connections
 Legal and Ethical Constraints

Data Privacy Laws Intellectual Property Ethical Considerations

GDPR, CCPA Copyright, patents in web Ensuring fair use, avoiding dark
development patterns
 • User Experience (UX)
• Designing with the user in mind

Design • Accessibility
• Meeting standards for disabled users
Constraints • Consistency
• Ensuring a uniform design language across
platforms
 Content Constraints

Localization SEO Content Load

Adapting content for different Search Engine Optimization best Managing large multimedia files
languages and cultures practices and dynamic content
 Balancing Standards & Constraints

Importance of Practical Approaches Examples of Successful

Maintaining Balance Web Platforms
 Examples of Successful Web Platform
Examples of successful web platforms include:
1. Amazon: Dominates e-commerce with a vast product range,
personalized recommendations, and robust logistics.
2. Facebook: Connects billions of users through social networking,
messaging, and content sharing.
3. WordPress: Powers a significant portion of websites with its flexible
content management system and extensive plugin ecosystem.
4. Netflix: Delivers on-demand video streaming with personalized
content recommendations and a user-friendly interface.
5. Shopify: Enables businesses of all sizes to set up and manage online
stores with ease.