CYC475 - Topics in Cyber

Security (Web Technologies

and Programming)
WEEK1: INTRODUCTION TO THE COURSE
NAJLA RAZA – LECTURER
COMSATS UNIVERSITY, ISLAMABAD CAMPUS
Lecture Contents

 Introductions
 Overview of Web Platforms
 Web terminologies
 Web Communication Protocol (HTTP)
 Web Generations
 Standards and constraints
About me!

 Najla Raza
 MS(Software Systems & Engineering)
 13 years experience in Industry with a multinational organization
 Over 06 years teaching experience in different universities
 Web 3.0 certified developer
 Freelancer with a passion for Web Development
About the Course (Metadata)

 3 credit hours of theory and practice within class

 So please bring your laptops!
 Assessments as per CUI policy
 Additional surprise quizzes anytime during the semester
 No compromise on deadlines of submissions
 No compromise on Attendance (please manage any clashes)
 Mobile phones should be switched off/turned to silent during class.
About you?

 Your name is ……
 Your CGPA is ……
 Your grade in last programming course was……
 Your views about Web Technologies….
 Any previous experience with web technologies?
What is Web Technology?

 Web technology is a broad field that encompasses the tools, processes

and protocols used to create, deliver and manage web content over the
internet.
 Web technologies refers to the way computers/devices communicate
with each other using markup languages. It involves communication
across the web and create, deliver or manage web content using
hypertext markup language (HTML).
 Web Development/ Web Programming/ Web App Development refers to
the creation of websites/applications for the internet (and sometimes
for the Intranet).
Web Terminologies

 Web Page: A document available on the World Wide Web that can
include text, images, and multimedia content, typically written in HTML
(HyperText Markup Language).
Web Terminologies

 Website: A collection of related web pages hosted under a single

domain name, accessible via the internet.
Web Terminologies

 Web Server: A server software or hardware dedicated to running

websites, serving web pages to users upon request. Common examples
include Apache, Nginx, and Microsoft IIS.
Web Terminologies

 Web Server: A server software or hardware dedicated to running

websites, serving web pages to users upon request. Common examples
include Apache, Nginx, and Microsoft IIS.
Web Terminologies

 Browser: A software application (e.g., Chrome, Firefox, Safari) that

allows users to access and interact with web content.
Web Terminologies

 Client-Server Model: The architecture that divides tasks between

clients (user devices) and servers (centralized machines that provide
resources or services).
Division of Web Structure

 Frontend: The part of a web application that interacts with the user,
typically developed using HTML, CSS, and JavaScript.

 Backend: The server-side component that handles data processing,

database interactions, and the logic of the application. It is the part of
the website that users cannot interact with. It can be developed using
various programming languages like Python, Ruby, Java, or PHP.
Frontend
Backend
Division of Web Structure

 API (Application Programming Interface): A set of protocols and

tools for building software applications, enabling communication
between different software components.
Web Communication Protocol (HTTP)

 HTTP (Hypertext Transfer Protocol): The foundational protocol used

for transmitting data over the web. It defines how messages are
formatted and transmitted, and how web servers and browsers should
respond to various commands.
 HTTPS (HTTP Secure): An extension of HTTP that uses SSL/TLS to
encrypt data for secure communication over a computer network.
 Request-Response Cycle: The fundamental mechanism by which
HTTP operates. The client (browser) sends an HTTP request to the
server, which then processes the request and sends back an HTTP
response containing the requested resource or an error message.
Web Communication Protocol (HTTP)

 Methods (or Verbs):

 GET: Requests data from a server at the specified resource.
 POST: Sends data to a server to create/update a resource.
 PUT: Updates a resource or creates it if it doesn't exist.
 DELETE: Deletes the specified resource.
 HEAD, OPTIONS, PATCH: Additional methods providing more granular control
over interactions with resources.
Web Communication Protocol (HTTP)

 Status Codes:
 Numeric codes in HTTP responses that indicate the outcome of the
HTTP request.1xx: Informational responses (e.g., 101 Switching
Protocols)
 2xx: Success (e.g., 200 OK, 201 Created)
 3xx: Redirection (e.g., 301 Moved Permanently, 302 Found)
 4xx: Client errors (e.g., 404 Not Found, 403 Forbidden)
 5xx: Server errors (e.g., 500 Internal Server Error, 502 Bad Gateway)
Web Generations

 Web 1.0 (Static Web):

 Early 1990s to early 2000s.
 Static pages with content directly coded in HTML. Little to no
interactivity, mostly read-only.
 Early personal websites, online directories, and simple business sites.
Web Generations

 Web 2.0 (Dynamic and Social Web):

 Early 2000s to present.
 Emphasis on user-generated content, interactivity, and collaboration.
The rise of social media, blogs, wikis, and other platforms allowing user
participation.
 AJAX, APIs, HTML5, JavaScript frameworks (e.g., Angular, React), and
CSS3.
 Facebook, Wikipedia, YouTube.
Web Generations

 Web 3.0 (Semantic Web):

 Emerging concept, ongoing development.
 Focuses on the use of AI and machine learning to create a more
intelligent and connected web. It aims to interpret and understand the
data, enabling better interaction between humans and machines.
 RDF (Resource Description Framework), OWL (Web Ontology Language),
blockchain.
 AI-driven applications, decentralized web (e.g., blockchain-based
platforms).
Web Standards

 W3C (World Wide Web Consortium): The main international

standards organization for the web, developing protocols and guidelines
that ensure long-term growth and interoperability.
 HTML/CSS/JavaScript: Core technologies standardized by W3C that
define the structure, style, and behavior of web pages.
 Web Accessibility (WCAG - Web Content Accessibility
Guidelines): Guidelines ensuring that websites are accessible to all
users, including those with disabilities.
 Responsive Web Design: Design approach ensuring web pages
render well on a variety of devices and window or screen sizes.
Constraints

 Browser Compatibility: Ensuring websites work consistently across

different web browsers (e.g., Chrome, Firefox, Edge).
 Security: Implementing best practices to protect against threats like
cross-site scripting (XSS), SQL injection, and data breaches.
 Performance: Optimizing websites to load quickly and perform
efficiently, especially on mobile devices with varying internet speeds.
 Scalability: Designing websites and web applications to handle growth
in terms of user traffic and data volume without performance
degradation.
 Privacy: Compliance with regulations such as GDPR (General Data
Protection Regulation) to protect user data and ensure privacy.
Who is a Web Developer?

 A web developer is a professional who specializes in designing, creating

and maintaining websites and web applications.
 They use a variety of programming languages, frameworks and tools to
build both the visible parts of a website (front end) and the underlying
infrastructure (back end).
Web Developer Roles

 Front End:
 Building and maintaining the user interface (UI) of a website.Converting design mockups
into functional web pages using HTML, CSS, and JavaScript.Ensuring cross-browser
compatibility and responsiveness for different devices. Familiarity with JavaScript
frameworks/libraries like React, Angular, or Vue.js.
 Back End:
 Developing and managing server-side application logic.Building and maintaining
databases and ensuring data integrity.Implementing APIs (Application Programming
Interfaces) that connect the front end with the back end. Proficiency in server-side
languages like Python, Ruby, PHP, Java, or Node.js.Experience with databases such as
MySQL, PostgreSQL, MongoDB, or SQLite.
 Full Stack:
 Handling both the client-side and server-side aspects of a web application.
Market Trends (Front-end)
Market Trends (Front-end)
Market Trends (Back end)
Market Trends (Back end)
Market Trends (Full Stack)
Our Goal

 Our objective is to attain a minimum of beginner to intermediate

proficiency in this course, starting from the fundamentals of web
development, including HTML and CSS, and progressing to a proficient
understanding of a user friendly framework.
Online Resources

 https://www.w3schools.com