The Fundamentals

1
 Learning outcomes
At the end of this chapter, students are expected to
Understand how internet works
Explain what a web server is and how it works
Explain what a web browser is and how it works
Become familiar with concepts of web hosting
Differentiate between Webpages, Websites and Web Apps
Understand Internet Protocols
Become familiar with HTTP
Learn how to use browser developer tools (lab session)

2
 The internet
The internet is an international network of connected computers.
Internet is a cooperative effort governed by a system of standards and rules.
The purpose of connecting computers together is to share information and
resources.
There are many ways information can be passed between computers, including
email (POP3/IMAP/SMTP),
file transfer (FTP),
secure shell (SSH)
Hyper text transfer (HTTP) etc.,
These standardized methods for transferring data or documents over a network
are known as protocols.

3
 The Web
The web (originally called the World Wide Web) is one of the ways
information can be shared over the internet.
The web is unique in that it allows documents to be linked to one another
via hypertext links
thus forming a huge “web” of connected information.
The web uses a protocol called HTTP (HyperText Transfer Protocol).
This acronym should look familiar because it is the first four letters of
nearly all website addresses

4
 Internet vs WWW
The terms Internet and World Wide Web are often used without much
distinction. However, the two things are not the same.
The world wide web, or web for short, are the pages you see when you're
at a device and you're online
The Internet is a global system of interconnected computer networks.

5
 Server
A web page becomes accessible when it is hosted on a web server.
"Hosting" means that all the web pages of a website and their
supporting files are available on a specific computer.
Thus, a web server is a computer that hosts a website on the
Internet.
There’s nothing special about the computers used as servers
themselves.
The computers used can be anything from a high-powered Unix
machine to a humble personal computer.
It’s actually the server software that makes it all happen.
6
 Web server cont’d
The role of a server software is
1. to wait for a request of information, and
2. then to retrieve and send that information back as quickly as
possible
 There are many server software options, but the two most popular
are Apache and Microsoft Internet Information Services (IIS).

7
 Client
If the web server does the serving, the software that does the requesting is
called the client
People use desktop browsers and mobile browsers as clients to access
documents on the web
The most popular desktop browsers include Edge, Internet Explorer,
Chrome, Firefox, Safari, and Opera.
These days, however, more than half of web traffic comes from mobile
browsers on smartphones and tablets such as
Safari on iOS,
Chrome browsers on Android devices,
Opera Mini, and a myriad of other default and installable mobile browsers
8
 Web Browser
Web browser is a software application for retrieving, presenting and
traversing information resources on the World Wide Web.
A browser's primary control is the address bar.
You enter a URL (Uniform Resource Locator) that describes to the
browser where to find the item you want,
And the browser contacts the web server and requests the item which the
server then sends back.

9
 Web Page Addresses (URLs)
Every page and resource on the web has its own special address called a
URL (pronounced “U-R-L,” not “erl”),
URL stands for Uniform Resource Locator.
Some URLs are short.
Others may look like several strings of characters separated by dots
(periods) and slashes,
However, each part has a specific purpose.

10
 The Parts of a URL
A complete URL is generally made up of three components:
the protocol,
the site name, and
the absolute path to the document or resource,

11
 1. http:// : The letters “HTTP” let the server know to use HyperText
Transfer Protocol, or get the server into “web mode.”
2. www.example.com: This portion of the URL identifies the website by
its domain name. The domain name is “example.com” .The “www.” part
at the beginning is the particular hostname at that domain.
 The hostname “www” has become a convention, but is not a rule. In fact, sometimes the
hostname may be omitted. There can be more than one website at a domain (called
subdomains). For example, there might also be “development.example.com,”
“clients.example.com,” and so on.
3. /2018/samples/first.html : The words separated by slashes are the
directory names, starting with the root directory of the host (as indicated
by the initial /).
12
 Ice breaker
Where is the absolute path in the following
URL?
How does the server know which webpage to
retrieve?
http://www.paradigm.com

13
 Pointing to default files
Many addresses do not include a filename, but simply point to a directory,
like this: http://www.paradigm.com
When a server receives a request for a directory name instead of a
specific file, it looks in the given directory for a default document,
typically named index.html
So when someone types the previous URLs into his browser, what he’ll
actually see is this: http://www.paradigm.com/index.html
The name of the default file (also referred to as the index file) may vary,
and depends on how the server is configured.
some servers use the filename default.html

14
 Website, Webpage, Web App
A website is a group of globally accessible, interlinked web pages
which have a single domain name. Examples ???
A webpage is part of a website
A webpage is a single document on the web which uses a unique
URL
A web page is a text file that contains text, images, hyperlinks, and
sound
Web Apps are Internet-enabled apps that are accessed through a web
browser. Therefore, you don’t require to download or install them.
Examples ??
15
 Network Architecture of the web

16
 Client-Server Architecture
The Web is an example of a system that uses client-server architecture.
Network Architecture is the way network services and devices are
structured together to serve the connectivity needs of client devices and
applications.
In client-server architecture every process or computer in the network
functions as a server or client.
The web consists of web servers, which are computers with information to
provide, and web clients (aka, browsers), which are consumers of
information.
Do you know of any other kind of network architecture??

17
 Client-Server Architecture Cont’d
Client – The client can be any computer that requests something from the
server. For example – when visiting any website we request a webpage
using a browser. (here we act as a client)
Server – On the other hand, the server is the computer that is designed to
serve the requests to the client. For the same example, the client asks for a
webpage then the server responds with the webpage to the client. The
server
Stores and protects data
Processes requests from clients
Is always on

18
 TCP/IP protocol
Client/server messages are exchanged via the TCP/IP protocol until the
connection is complete.
A network protocol is a set of established rules that specify how to format,
send and receive data.
Network protocols are like a common language for computers.
The computers within a network may use vastly different software and
hardware; however, the use of protocols enables them to communicate
with each other regardless.
The main function of TCP/IP is that it governs how information is sent
and received in the form of packets between source and destination.

19
 TCP/IP protocol
TCP/IP is a two-layer program.
Transmission Control Protocol and Internet Protocol (TCP/IP) are two
different communication protocols.
The higher layer, Transmission Control Protocol (TCP) splits a message
to packets which were transmitted across the internet
whereas The lower layer, Internet Protocol (IP) is accountable to address
of every packet hence a chance to forward the exact destination.

20
 The TCP/IP model is divided into four different layers (reading
assignment):
0

Application layer: provides network

services to applications.
Examples protocols: HTTP, FTP, SMTP

Transport layer: Provides reliable end-to-

end communication between applications.
Breaks down data into packets. Ensures that
packets are delivered to the correct
destination in the correct order.
Main protocols: TCP, UDP

21
 The TCP/IP model is divided into four different layers (reading
assignment):
0

Internet layer: Routes packets between

different networks. Uses IP addresses to
identify devices on the network.
Main protocol: IP
Network Access layer: Transmits packets
over the physical network media.
Examples protocols: Ethernet, Wi-Fi,
cellular data

22
 Overview of HTTP protocol
HTTP is the underlying protocol used by the World Wide Web.
HTTP defines how messages are formatted and transmitted, and what
actions Web servers and browsers should take in response to various
commands.
We do CRUD operations (Create, Read, Update, Delete) by sending HTTP
requests with different HTTP methods, sometimes called HTTP verbs.

23
 Overview of HTTP protocol
Communication between a host and a client occurs, via a
request/response pair.
When you type a URL into your web browser and press Enter, your
browser sends a request called an HTTP request to the web server that
hosts the website you want to visit.
The server then sends back an HTTP response, which contains the data
for the web page you requested for.

24
 Cont.…..
HTTP methods/ verbs
They specify the action that should be performed on the host.
GET: fetch an existing resource. The URL contains all the necessary
information the server needs to locate and return the resource.
POST: create a new resource. POST requests usually carry a payload that
specifies the data for the new resource.
PUT: update an existing resource. The payload may contain the updated data
for the resource.
DELETE: delete an existing resource.

25
 Cont.…..
Status Codes / HTTP messages
With URLs and verbs, the client can initiate requests to the server. In return,
the server responds with status codes and message payloads
2xx: Successful
 This tells the client that the request was successfully processed.
3xx: Redirection
 This requires the client to take additional action.
4xx: Client Error
 These codes are used when the server thinks that the client is at fault, either by requesting
an invalid resource or making a bad request.
5xx: Server Error
 This class of codes are used to indicate a server failure while processing the request.

26
 Concerns in contemporary web environment

27
 Concerns in contemporary web environment
 Web designers never know exactly how the pages they create will be
viewed.
They don’t know which of the dozens of browsers might be used,
whether it is on a desktop computer or something more portable,
how large the browser window will be,
what fonts are installed,
whether functionality such as JavaScript is enabled,
how fast the internet connection is,
whether the pages are being read by a screen reader, and so on.

28
 Concerns in contemporary web environment
The following are methods for coping with the inescapable element
of the Unknown when creating a website :
Web standards
Progressive enhancement
Responsive Web Design
Accessibility
Site performance

29
 Web standards
Web standards are specifications for web designers and developers to
follow, ensuring that the websites they build are usable and accessible to
all, regardless of the device they use to access the Internet.
The W3C is the best known web standards body, but there are others such
as,
ECMA (who publish the standard for ECMAScript, which JavaScript is
based on)
Sticking with web standards is your primary tool for ensuring your site is
consistent on all standards-compliant browsers

30
 Progressive enhancement
Progressive enhancement means to start with a baseline experience
that makes core functionality available to even the most rudimentary
browsers first.
Then overlaying more advanced features (features that aren’t really
critical to the brand or message) for the browsers that can handle
them.
Such as, animation or
wrapping text around images in interesting shapes,

31
 Progressive enhancement
For example,
there are differences in how browsers handle JavaScript (particularly
on non-desktop devices), so some users opt to turn JavaScript off
completely.
Therefore, according to progressive enhancement principles, we need
to make sure basic functionality, such as
linking from page to page or data submission via forms, is
unbroken even when JavaScript is off.

32
 Responsive Web Design
In 2016, mobile internet usage surpassed desktop usage.
Which means that the percentage of web traffic that comes from devices
other than desktop browsers is larger.
Accustomed to designing exclusively for large desktop screens, web
designers were unclear about how to accommodate screens that are much
smaller.
Moreover, another majority accesses the web from a number of different
platforms (phone, tablet, computer) over the course of the day.
And still expect to have a similar experience regardless of how they access
your site.

33
 Responsive Web Design
Responsive Web Design (RWD) is a strategy for providing appropriate
layouts to devices based on the size of the viewport (browser window).
The key to Responsive Web Design is serving a single HTML document
to all devices, but applying different style sheets based on the screen size
in order to provide the most optimized layout for that device.
For example, when a page is viewed on a smartphone, it appears in one
column with large links for easy tapping.
But when that same page is viewed on a large desktop browser, the content
rearranges into multiple columns with traditional navigation elements.

34
 Example of a responsive site that adapts to fit small, medium, and
large screens and all sizes in between.

35
 Accessibility
So far, we’ve only addressed visual browsers controlled with mouse
pointers or fingertips.
 It is critical, however, to keep in mind that people access the web in many
different ways—
with a keyboard, mouse, voice commands, screen readers, Braille output,
magnifiers, joysticks, foot pedals, and so on.
Web designers must build pages in a manner that creates as few barriers as
possible to getting to information, regardless of the user’s ability and the
device used to access the web.
In other words, you must design for accessibility.

36
 Site performance
Everyone knows how frustrating it is to wait for a web page to fully
display.
Studies show that users expect a site to load in under two seconds, and
nearly a third of your audience will leave your site for another if it doesn’t.
Furthermore, those people aren’t likely to come back.
Google has added site speed to its search algorithm, so if your site is a
slow, it’s not likely to show up in the first screen of results.
There are many things you can do to improve the performance of your
site, and they fall under two broad categories:
1. limiting file sizes and
2. reducing the number of requests to the server
37
 Things you can do to improve the performance of your site
Optimize images so they are the smallest file size possible without
sacrificing quality.
Streamline HTML markup, avoiding unnecessary levels of nested
elements.
Minimize HTML and CSS documents by removing extra character spaces
and line returns.
Keep JavaScript to a minimum.
Reduce the number of times the browser makes requests of the server
(known as HTTP requests).

38
 Takeaway question
List two unknown factors you need to consider when designing and
developing a site.

39
 Website creation roles

40
 Website creation roles
Websites are more than just code and pictures, there are a multitude of
decisions and areas of expertise that go into building it.
Before launching a website, creators must
produce and organize content, design from the broadest goals to the finest
details, write code, and coordinate everything with the server
One person may end up specializing in just one area of expertise and
work as part of a team of specialists.
But, when designing websites on your own, you will need to wear many
hats and handle many web-related disciplines,
even if it might only seem like the “things you do to make a website”

41
 Website creation roles
The following are some of the Website creation roles
Content Wrangling
Design
Development

42
 Content wrangling
Everything web developers do supports the process of delivering content,
message, or functionality to users.
Good writing can help the user interfaces we create be more effective,
from button labels to error messages.
Someone needs to create all this content and maintain it
There are two content-related specialists in modern web development: the
Information Architect (IA) and the Content Strategist.

43
 Information Architects typically start by conducting user research to
understand the needs of their target audience.
They then use this information to create a plan for how the
information should be organized and labeled.
A Content Strategist makes sure that every bit of text on a site, from
long explanatory text down to the labels on buttons, supports the
brand identity and marketing goals of the organization.

44
 Design
On the web, the first matter of business is designing how the site works.
Before deciding on colors and fonts, it is important to identify
the site’s goals,
how it will be used, and
how visitors move through it
These tasks fall under the disciplines of User Experience (UX) design,
Interaction Design (IxD), and User Interface (UI) design.
There is a lot of overlap between these responsibilities, and it is not
uncommon for one person or team to handle all three.

45
 Design
User Experience (UX) Designers:
UX designers focus on the overall experience a user has with a product.
They aim to make products functional, accessible, and enjoyable to use
Common tasks for a UX designer might include,
conducting user research,
developing user personas,
creating user journey maps,
building wireframes and prototypes,
performing user testing, and
collaborating with stakeholders, UI designers, and developers

46
 Design
Interaction Designers:
Interaction design is a discipline that examines the interaction (via an
interface) between a system and its user.
It may also incorporate design focused on how information should be
presented within such a system to enable the user to best understand that
information.
User Interface (UI) Designers:
UI refers to the screens, buttons, toggles, icons, and other visual elements that
you interact with when using a website, app, or other electronic device.
UI designers create the graphical portions of mobile apps, websites, and
devices—the elements that a user directly interacts with.

47
 Design
These roles often overlap in the product development lifecycle.
A good product often requires both good UI and good UX.
For example,
a banking app could look great and have intuitive navigation (UI),
but if it loads slowly or makes you click through numerous screens to
transfer money (UX), it doesn’t matter how good it looks.

48
 Visual (graphic) design
Because the web is a visual medium, web pages require attention to their
visual presentation.
A graphic designer creates the “look and feel” of the site.
Such as, the logos, graphics, colors and layout etc..
The “look and feel” ensure that the site makes a good first impression
and is consistent with the brand and message of the organization it
represents.
Graphic designers create and present their visual designs to clients using
sketches or mockups created in Photoshop (or a similar tool) of the way
the site might look

49
 Development
The team that handles the creation of the files that make up a site (like the
documents, style sheets, and scripts) is called the development or
production department.
Development falls under two broad categories: frontend development and
backend development.
Frontend refers to any aspect of the design process that appears in or
relates directly to the browser.
Backend developers focus on the server, including the applications and
databases that run on it.
Backend developers are responsible for installing and configuring the server
software.
50
 Development
Frontend development includes the following web technologies:
HyperText Markup Language (HTML),
Cascading Style Sheets (CSS),
JavaScript and DOM scripting, including AJAX and JavaScript-based
frameworks
Backend development includes the following web technologies :
Server software (Apache, Microsoft IIS),
Web application languages (PHP, Ruby, Python, ASP.NET),
Database software (MySQL, Oracle, SQL Server)

Backend development is beyond the scope of this course!

51
 Other roles
Product manager
guides site design and development in a way that meets business goals
has an understanding of the target market and the processes involved in the
creation of the site itself
develops the overall strategy for the site from a marketing perspective,
including how and when it gets released
Project manager
coordinates the designers, developers, and everyone else who is working on
the site.
manages timelines, development approaches, deliverables,
works to make sure that the project gets done on time and on budget.

52
 Other roles
Search Engine Optimization (SEO) specialist
It is crucial that a site be easily found by search engines.
SEO is a discipline focused on tuning a website structure and code in a way
that increases the chances it will be highly ranked in search results.

53
 End of chapter one

54