WEB 322

WEB PROGRAMMING TOOLS AND FRAMEWORKS

WEEK 1 - LECTURE 1
OVERVIEW OF THE WEB
What is the Internet
• A global system of interconnected
computer networks.

• Devices use the TCP/IP protocol talk to

other devices.

WEB322 - Overview of the Web 2

TCP/IP Protocol Bob Kahn

• Transmission Control Protocol/Internet Protocol

• Developed in 1978 by Bob Kahn & Vint Cerf.
• A set of rules that governs the connection of
computer systems to the internet.
Vit Cerf
• How information should be packaged (packets),
sent, received, and routed.
• Each device on the Internet has an IP address.

WEB322 - Overview of the Web 3

The World Wide Web (WWW) aka
The Web
• A “digital space” that is composed of billions
connected electronic documents stored.
• Hosted by web server software
• Viewed by web browsers.
• Based on a networking architecture called the
Client-Server Model.
• Created by Timothy Berners-Lee in 1989.
• Also created the World Wide Web Consortium (W3C).
• W3C oversees the continued development and
standards of the Web.

WEB322 - Overview of the Web 4

Client-Server Model
Server
• Hosts one or more server programs.
• Share resources with clients.
• Waits for incoming requests from clients.
Client
• Requests content from a server.
• Initiates a communication
session with a server.
Examples
• Email
• World Wide Web

WEB322 - Overview of the Web 5

Hypertext Transfer Protocol (HTTP)
• A client-server application-layer protocol designed for communication
between web browsers and web servers.
• Protocol: the official procedure or system of rules governing affairs of
state or diplomatic occasions.
• Hypertext: a word or words that contain a link to a website or
webpage.

WEB322 - Overview of the Web 6

More of HTTP with respect to the
web.
• Clients and servers communicate by exchanging individual messages.

• Messages are sent by the client, usually a web browser, these are
called requests.

• Servers answer client requests by sending a message back, these are

called responses.

WEB322 - Overview of the Web 7

Restaurant Scenario
What rules must the
wait staff and
customer follow for
the customer to get
what they want?

WEB322 - Overview of the Web 8

Making a Request
What’s in a Request?
1. Type in a URL in the address box of • A HTTP method such as GET, POST,
the browser PUT, or DELETE. This defines the
operation the client wants to
2. The browser translates the URL into
perform.
a request message according to the
HTTP protocol. • The path of the resource to grab.
3. The request is sent to the destination • The version of the HTTP protocol
server. used.
• Headers that convey additional
information for the server.
• A body (for some methods like
POST).

WEB322 - Overview of the Web 9

Responding to a Request
1. The server receives the request. What’s in a Response?
2. The request is interpreted. • The version of the HTTP protocol.
3. A response is delivered to the • A status code: was the request
client. successful or not? Why?
• A status message: a non-
authoritative short description of
the status code.
• HTTP headers, similar to a request.
• A body containing the requested
resource.

WEB322 - Overview of the Web 10

Types of Websites
• Static Websites
• Dynamic Websites
• Single Page Applications

WEB322 - Overview of the Web 11

Static Websites
• This is the oldest and simplest approach to building websites.
• It is a website that returns the same hard-coded content and data
from the server whenever a particular resource is requested.
• These websites are not suitable for environments that require fast-
changing content.

WEB322 - Overview of the Web 12

Dynamic Websites
• A server generates the content of a website by pulling information
from some source of data (on-the-fly).
• Once constructed, the content is sent back to the client.
• A downside: Users must wait for the web pages to be created on the
server before they are sent back to the client.
• Well suited for environments that require users of the site to generate
their own data and for environments that require fast-changing
content.

WEB322 - Overview of the Web 13

Single Page Application (SPA)
• A modern approach to building websites.
• If you click around, things happen instantly, once the page is loaded.
• Inspired by mobile apps.

WEB322 - Overview of the Web 14

Responsive Design
A website’s design and
development should respond to
the user's environment based
on screen size, platform and
orientation.

WEB322 - Overview of the Web 15

Branches of web development
1. Front-End
2. Back-End
3. Full Stack

WEB322 - Overview of the Web 16

Front-End Web Development
The front-end of a website is the part that the users will see and
interact with, in other words, the user interface that appears in the
browser. The front-end is also known as the presentation layer.

WEB322 - Overview of the Web 17

Back-End Web Development
• The back-end is the part of the website that users don’t see. It refers
to the server side, which is responsible for returning the page, and for
storing or fetching user data.

WEB322 - Overview of the Web 18

Full-Stack Development
• Full-stack development encompasses both front-end and back-end
development work. Full-stack developer roles require a holistic view
of every website, to find a full solution.
• A developer in this position must know where (and how) to apply the
various front-end and back-end technologies. They must be familiar
with HTML, CSS and JavaScript, as well as a few popular backend
languages. Many of them will specialize in one specific back-end
language.

WEB322 - Overview of the Web 19

Front-End Technologies
• HTML is used to set and define the structure of web page.
• CSS is used to style the web page. It deals with the aesthetics of the website.
• JavaScript is used to add interactivity to the interface of websites. With
JavaScript your websites can perform arithmetic, user validation, timed image
scrolling, animation, and more.
• Vanilla JavaScript is JS without any library or framework.

WEB322 - Overview of the Web 20

JavaScript Frameworks
• Promote modular and component based front-
end code.
• Use to build very interactive user interfaces.
• You should learn at least one.
• Example of JS Frameworks:
• React - Most popular in the Industry
• Vue - Gaining popularity
• Angular - Used in enterprise development but losing
steam.

WEB322 - Overview of the Web 21

CSS Frameworks
• Makes your life easier and decrease the time it
takes to build a user interface.
• Good for prototyping
• You should learn at least one.
• Popular CSS Frameworks:
• Bootstrap (The most popular of all the CSS
Frameworks)
• Materialize CSS
• Bulma (A light-weight CSS framework, very easy to use)

WEB322 - Overview of the Web 22

Some Back-End Technologies

WEB322 - Overview of the Web 23

Web Development Tools

WEB322 - Overview of the Web 24

Web Browsers
• A web browser is a software program that allows a user to locate,
access, and display web pages.

WEB322 - Overview of the Web 25

Code Editors

WEB322 - Overview of the Web 26

WEB322 - Overview of the Web 27