Introduction to

Web Development

Chapter 1

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

© 2017 Pearson
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
http://www.funwebdev.com
 What is Web Development?
Web development is a term that takes on different meanings depending on the audience and context.

In practice, web development requires people with complementary but distinct expertise working
together toward a single goal.

Graphic designer: regards as the application of good graphic design strategies,

Database administrator: regards as a simple interface to an underlying database.
Software engineers and programmers: regards as a classic software development task with phases and
deliverables,
Systems administrator: sees a system that has to be secured from attackers.

With so many different classes of user and meanings for the term, it's no wonder that web
development is often poorly understood.

A true grasp of web development requires an understanding of multiple perspectives.

The design and layout of a website are closely related to the code and the database.
The quality of the graphics is related to the performance and configuration of the server, and
The security of the system spans every aspect of development.

All of these seemingly independent perspectives are interrelated and therefore a web developer (of
any type) should have a foundational understanding of all aspects, even if they only possess expertise
in a handful of areas.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Chapter 1
1 A Complicated
Ecosystem 2 Definitions and
History

3 The Client-
Server Model 4 Where is the
Internet?

5 Working in Web
Development 6 Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Chapter 1
1 A Complicated
Ecosystem 2 Definitions and
History

3 The Client-
Server Model 4 Where is the
Internet?

5 Working in Web
Development 6 Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 A Complicated Ecosystem
In Figure, web development can be understood as
an ecosystem, or is visualized as a three-story
building in this image, is the idea that one can
understand web development as an activity with
three broad levels.

At the basement level are the foundational

components: Servers, Configuration, Networks,
and Protocols which are the basic building blocks.
.
The main-floor level includes the topics usually
understood to constitute web development:
HTML, CSS, JavaScript, and some type of server-
side programming language, such as PHP,
Javascript, Databases, APIs, and Tools.

Finally, on the upper level reside the most

advanced topics: Search Algorithms, Integration,
Frameworks, Security Threats, or Advanced
Programming Design.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Chapter 1
1 A Complicated
Ecosystem 2 Definitions and
History

3 The Client-
Server Model 4 Where is the
Internet?

5 Working in Web
Development 6 Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Definitions and History
The Internet and WWW are different (but related) things

• Internet = Web?
The answer is no

• The World-Wide Web (WWW or simply

the Web) is certainly what most people
think of when they see the word
“internet.”

• But the WWW is only a subset of the

Internet.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Definitions and History
A Short History of the Internet

• Telephone Network
• Packet Networks
• ARPANET (1969)
• X.25 (1974)
• USENET (1979)
• TCP/IP (1983)  INTERNET

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Communication Definitions
We will begin with the telephone

Earlier technologies like radio, telegraph, and the telephone provided the
same speed of communication, albeit(though) in an analog form.
• Telephone networks provide a good starting place to learn about
modern digital communications.
• In the early days of telephone networks, calls were routed
through operators who physically connected caller and receiver
by connecting a wire to a switchboard to complete the circuit.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 9
 Circuit Switching
• A circuit switching establishes an actual physical
connection between two people through a series of
physical switches.

• Circuit Switching Weaknesses

• You must establish a link, and maintain
a dedicated circuit, for the duration of
the call
• Difficult to have multiple conversations
simultaneously
• Wastes bandwidth since even the
silences are transmitted, unused
capacity in the network is not being
used efficiently

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 10
 ARPANET
The beginnings of the Internet

• The research network ARPANET was created. In the 1960s

ARPANET did not use circuit switching, it used packet
switching
• ARPANET: Advanced Research Project Agency Network
• A packet-switched network does not require a continuous
connection.
• Instead, it splits the messages into smaller chunks called
packets and routes them to the appropriate place based
on the destination address
• Packets can take different routes to the destination
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 11
 Packet Switching
Isn’t this more complicated?

• While packet switching may seem a more

complicated and inefficient approach than circuit
switching, it is:
• more robust as it is not reliant on a single pathway
that may fail
• a more efficient use of network resources, since a
circuit can be use to communicate and transmit data
between multiple connections

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 12
 Packet Switching

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 13
 Short History of the Internet
Perhaps not short enough

• The early ARPANET network

was funded and controlled by
the United States government,
and was used exclusively for
academic and scientific 1969
purposes.
• The early network started small
with just a handful of connected
campuses in 1969 and grew to a
few hundred by the early 1980s.
1977
http://classes.design.ucla.edu/Spring06/161A/projects/camile/arpanet/

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 14
 TCP/IP
Rides to the rescue

• In addition to ARPANET, other networks were created such as X.25 and

USENET.
• To promote the growth and unification of the disparate networks a suite of
protocols was invented to unify the networks together.
• By 1981, new networks built in the US began to adopt the TCP/IP
(Transmission Control Protocol / Internet Protocol) communication model
while older networks were transitioned over to it.
• Any organization, private or public, could potentially connect to this new
network so long as they adopted the TCP/IP protocol.
• On January 1, 1983, TCP/IP was adopted across all of ARPANET, marking the
end of the research network that spawned the Internet.
• The next decade saw an explosion in the numbers of users, but the Internet
of the late 1980s and the very early 1990s did not resemble the Internet we
know today.
• During these early years, email and text-based systems were the extent of
the Internet experience.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 15
 Definitions and History
The Birth of the Web (1990)

1. URLS
2. HTTP
3. SERVERS
4. BROWSERS
5. HTML

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Core Features of the Web
The Birth of the Web (1990)
The invention of the WWW is usually attributed to the British Tim Berners-Lee, who, along with the Belgian
Robert Cailliau, published a proposal in 1990 for a hypertext system while both were working at CERN in
Switzerland.

Shortly after that initial proposal Sir Tim Berners-Lee (developed

the main features of the web:
1. A URL to uniquely identify a resource on the WWW.
2. The HTTP protocol to describe how requests and responses
operate.
3. The HTML markup language to publish documents.
4. A software program (later called web server software) that
can respond to HTTP requests.
5. A program (later called a browser) to make HTTP requests
from URLs and that can display the HTML it receives.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 17
 Definitions and History
The Growth of the Internet

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Definitions and History
Web Applications in Comparison to Desktop Applications

Advantages:
• Accessible from any Internet-enabled computer.
• Usable with different operating systems and browser
applications.
• Easier to roll out program updates since only software on the
server needs to be updated as opposed to every computer in
the organization using the software.
• Centralized storage on the server means fewer security
concerns about local storage (which is important for sensitive
information such as health care data).

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Definitions and History
Web Applications in Comparison to Desktop Applications

Disadvantages:
• Requirement to have an active Internet connection (the Internet is not
always available everywhere at all times).
• Security concerns about sensitive private data being transmitted over
the Internet.
• Concerns over the storage, licensing, and use of uploaded data.
• Problems with certain websites not having an identical appearance
across all browsers.
• Restrictions on access to operating system resources can prevent
additional software from being installed and hardware from being
accessed (like Adobe Flash on iOS).
• Clients or their IT staff may have additional plugins added to their
browsers, which provide added control over their browsing experience,
but which might interfere with JavaScript, cookies, or advertisements.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
What is an “Intranet”? A short digression
• One of the more common terms you might encounter in web development is the term “intranet” (with an “a”),
which refers to an internet network that is local to an organization or business.

• Intranet resources are often private, meaning that only employees (or authorized external parties such as
customers or suppliers) have access to those resources.

• Thus Internet (with an “e”) is a broader term that encompasses both private (intranet) and public networked
resources.

• Intranets are typically protected from unauthorized external access via security features such as firewalls or private
IP ranges.

• Because intranets are private, search engines such as Google have limited or no access to content within a private
intranet.

• Due to this private nature, it is difficult to accurately gauge, for instance, how many web pages exist within
intranets, and what technologies are more common in them.

• Some especially expansive estimates guess that almost half of all web resources are hidden in private intranets.

• Being aware of intranets is also important when one considers the job market and market usage of different web
technologies.

• If one focuses just on the public internet, it will appear that, for instance, PHP, MySQL, and WordPress, are
absolutely dominant in their market share.

• But when one adds in the private world of corporate intranets, other technologies such as ASP.NET, JSP, SharePoint,
Oracle, SAP, and IBM WebSphere, are just as important.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 21
 Intranet versus Internet

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 22
 Definitions and History
Static Websites versus Dynamic Websites

• In the earliest days of the web, a

webmaster (the term popular in
the 1990s for the person who was
responsible for creating and
supporting a web site) would
publish web pages, and
periodically update them.
• In those early days, the skills
needed to create a web site were
pretty basic: one needed
knowledge of the HTML markup
language and perhaps familiarity
with editing and creating images.
• This type of web site is commonly
referred to as a static web site, in
that it consists only of HTML
pages that look identical for all
users at all times.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Definitions and History
Static Websites versus Dynamic Websites

Within a few years of the invention of the web, sites began to get more
complicated as more and more sites began to use programs running on web
servers to generate content dynamically.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Definitions and History
Static Websites versus Dynamic Websites
The illustration shows six steps of interaction between an
user and a dynamic website depicted as:
1. User at a terminal says, “I want to see vacation.php"”
2. Server recognizes that it must run a dynamic script that
is on its hard drive.
3. Server executes or interprets the script. (page titled
“vacation.php”).
4. Scripts “outputs” HTML (html script).
5. Server “sends” generated HTML and the image file to
user.
6. Browser executes the Javascript.
7. Javascript may make additional requests (back and forth
arrows between the user terminal and the server).
8. Browser displays HTML as modified by the Javascript
(An assembled webpage is displayed on the user's
terminal).

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Definitions and History
Web 2.0 and Beyond

• Web 2.0 Dynamic

• Web 3.0 Semantic
• Web Science
• …

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Web 2.0 and Beyond
In the mid-2000s, a new buzzword entered the computer lexicon: Web 2.0.
This term had two meanings, one for users and one for developers:
For the users, Web 2.0 referred to an interactive experience where users could contribute
and consume web content, thus creating a more user-driven web experience. Some of the
most popular websites today fall into this category: Facebook, YouTube, and Wikipedia. This
shift to allow feedback from the user, such as comments on a story, threads in a message
board, or a profile on a social networking site has revolutionized what it means to use a web
application.

For software developers, Web 2.0 also referred to a change in the paradigm of how dynamic
websites are created. Programming logic, which previously existed only on the server, began
to migrate to the browser (see Figure 1.9 ). This required learning JavaScript, a rather tricky
programming language that runs in the browser, as well as mastering the rather difficult
programming techniques involved in asynchronous communication.
Web development in the Web 2.0 world is significantly more complicated today than it was
even a decade ago. The skills to create a good-looking static web page are not the same as
those required to write software that facilitates user interactions. Many programmers are
poor visual user interface designers, and many designers can't program. This separation of
software creation and visual user interface design is essential for any complex Web 2.0
application.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Sociotechnological Integration —Web Science
In recent years, researchers have begun studying the impact of the web on society. Consider for a moment how we
manage and share our photos, videos, and messages with one another; think how we would have done these things
only a decade or two ago.
If there will be a Web 3.0, what it will look like is uncertain. Some people have, however, argued that Web 3.0 will be
something called the semantic web. Semantic means, quite literally, “meaning.”
The semantic web thus adds context and meaning to web pages in the form of special markup. These semantic
elements would allow search engines and other data-mining agents to make sense of the content.

Currently, a block of text on the web could be anything: a poem, an article, or a copyright notice. Search engines at
present mainly just match the text you are searching for with text in the page. Currently, these search engines have to
use sophisticated algorithms to try to figure out what the page is all about. While we humans can easily (and quickly)
determine the broad essence of a page's content, it is much harder for a computer algorithm to do the same.
The goal of the semantic web is to make it easier to figure out those meanings, thereby dramatically improving the
nature of search on the web.

Currently, there are a number of semistandardized, but complicated, approaches for adding semantic qualifiers to
HTML; some examples include RDF (Resource Description Framework), OWL (Web Ontology Language), and SKOS
(Simple Knowledge Organization System). In recent years, a simplified approach for adding semantic information to web
pages, known as schema.org, has become popular.

If you look at each interaction on the web as more than just a technical exchange using protocols and file transmission,
there is often an underlying social need motivating each exchange. The technical system facilitates a social interaction
and social interactions span nearly the entire human experience, so there is now an entire area of study looking at the
web as a sociotechnical system.

Web Science, as it is known, studies the sociotechnical systems that apply the web in areas as diverse as finance,
politics, activism, romance, and hate speech. This is just another example of how the web can facilitate entirely new
areas of study.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Chapter 1
1 A Complicated
Ecosystem 2 Definitions and
History

3 The Client-
Server Model 4 Where is the
Internet?

5 Working in Web
Development 6 Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
The Client-Server Model
The web is sometimes referred to as a client-server model of communications.

In the client-server model, there are two types of actors: clients and servers.
Server:
The server is a computer agent that is normally active 24/7, listening for
requests from clients.
The server in this model is the central repository, the command center, and the
central hub of the client-server model. It hosts web applications, stores user
and program data, and performs security authorization tasks. Since one server
may serve many thousands, or millions of client requests, the demands on
servers can be high.
Client:
A client is a computer agent that makes requests and receives responses from
the server, in the form of response codes, images, text files, and other data.
Client machines are the desktops, laptops, smart phones, and tablets. These
machines have a broad range of specifications regarding operating system,
processing speed, screen size, available memory, and storage.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 30
The Client-Server Model
Request-Response Loop
• Within the client-server model, the request-response loop is
the most basic mechanism on the server for receiving requests
and transmitting data in response.
• The client initiates a request to a server and gets a response
that could include some resource like an HTML file, an image or
some other data.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 31
The Client-Server Model
The Peer-to-Peer Alternative
• In the peer-to-peer model where each
computer is functionally identical, each
node is able to send and receive directly
with one another.

• In such a model each peer acts as both a

client and server able to upload and
download information.

• Neither is required to be connected 24/7,

and each computer is functionally equal.
•
• Video chat and bit torrent protocols are
examples of the peer-to-peer model.

• The client-server model, in contrast,

defines clear and distinct roles for the
server.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 The Client-Server Model Server Types
A server is rarely just a single computer

• Earlier, the server was shown as a single machine, which is fine from a conceptual standpoint.
• The client views the server as a single machine ready to serve a resources requested through a URL.
• However, most real-world web sites are typically not served from a single server machine, but by
many servers.
• It is common to split the functionality of a web site between several different types of servers.

• Web Servers
• Application Servers
• Database Servers
• Mail Servers
• Media Servers
• Authentication Servers
• …

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Server Types
Web servers: A computer servicing HTTP requests. This typically refers to a computer running web
server software, such as Apache or Microsoft IIS (Internet Information Services).

Application servers: A server that hosts and executes web applications which may be created in
PHP, ASP.NET, Ruby on Rails, or some other web development technology..

Database servers: A computer that is devoted to running a Database Management System (DBMS)
such as MySQL, Oracle, or MongoDB, that is being used by web applications.

Mail servers: A computer creating and satisfying mail requests, typically using the Simple Mail
Transfer Protocol (SMTP) for sending mail.
Media servers (streaming server): is a special type of server dedicated to servicing requests for
images and videos.
Authentication servers: An authentication server handles the most common security needs of
web applications. This may involve interacting with local networking resources, such as LDAP
(Lightweight Directory Access Protocol) or Active Directory.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 34
Real-World Server Installations
Server Farms
• There is often replication of each of the different server types

• A busy site can receive thousands or even tens of thousands of requests a second;
globally popular sites such as Facebook receive millions of requests a second.

• A single web server that is also acting as an application or database server will be hard-
pressed to handle more than a few hundred requests a second, so the usual strategy for
busier sites is to use a server farm.

• Server farms goal is to distribute incoming requests between clusters of machines so

that any given web or data server is not excessively overloaded.

• Special routers called load balancers distribute incoming requests to available

machines.

• Even if a site can handle its load via a single server, it is not uncommon to still use a
server farm because it provides failover redundancy.

• That is, if the hardware fails in a single server, one of the replicated servers in the
farm will maintain the site’s availability.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed. 35
 The Client-Server Model
Real-World Server Installations – Server Farm

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 The Client-Server Model
Real-World Server Installations – Server Rack

• In a server farm, the computers

(servers) are stacked. That is, a
farm will have its servers and
hard drives stacked on top of
each other in server racks.
• Each computer is also known as
blade computer.
• A typical server farm will
consist of many server racks,
each containing many
servers.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 The Client-Server Model
Real-World Server Installations – Data Center

• Most large web sites will exist in mirrored

data centers in different locations to
prevent the potential for site down times.
• As a consequence, the costs for multiple
redundant data centers are quite high, and
only larger web companies can afford to
create and manage their own.
• Most web companies will instead
lease space from a third-party data
center.
• It is also common for the reverse to be true
– that is, a single server machine may host
multiple sites.
• Large commercial web hosting
companies others will typically host
hundreds or thousands of sites on a
single machine (or mirrored on several
servers).

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Chapter 1
1 A Complicated
Ecosystem 2 Definitions and
History

3 The Client-
Server Model 4 Where is the
Internet?

5 Working in Web
Development 6 Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?

It is quite common for the Internet to be visually represented as a cloud, which is

way to think about the Internet given the importance of light and magnetic pulses to
its operation. To many people using it, the Internet does seem to lack a concrete
physical manifestation beyond our computer and cell phone screens.

But it is important to recognize that our global network of networks does not work
using magical water vapor, but is implemented via millions of miles of copper wires
and fiber-optic cables connecting millions of server computers and probably an
equal number of routers, switches, and other networked devices, along with
thousands of air conditioning units and specially constructed server rooms and
buildings.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
From the Computer to the Local Provider

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Where Is the Internet?
From the Computer to the Local Provider
Broadband modem, also called a cable modem or DSL (digital subscriber line) modem, is a bridge between
the network hardware outside the house (typically controlled by a phone or cable company) and the
network hardware inside the house. These devices are often supplied by the ISP.

Wireless Router is the most visible manifestation of the Internet in one's home, in that it is a device we
typically need to purchase and install (although many companies will provide and install these as part of the
setup process).

Routers are one of the most important and ubiquitous hardware devices that make the Internet work. At its
simplest, a router is a hardware device that forwards data packets from one network to another network.
When the router receives a data packet, it examines the packet's destination address and then forwards it to
another destination.

A router uses a Routing Table to help determine where a packet should be sent. It is a table of connections
between target addresses and the destination (typically another router) to which the router can deliver the
packet.

In Figure 1.17 , the different routing tables use Next-Hop Routing, in which the router only knows the
address of the next step of the path to the destination; it leaves it to that next step to continue the routing
process. The packet thus makes a variety of successive hops until it reaches its destination.

There are a lot of details that have been left out of this particular illustration.
Routers will make use of submasks, timestamps, distance metrics, and routing algorithms to supplement or
even replace routing tables; but those are all topics for a network architecture course.

Submasks: A Subnet mask is a 32-bit number that masks an IP address and divides the IP address into
network address and host address.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
(Simplified) Routing Tables

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
(Simplified) Routing Tables

Once we leave the confines of our own homes, the hardware of the Internet becomes
much murkier (dark and gloomy). In Figure 1.16 , the various neighborhood broadband
cables (which are typically using copper, aluminum, or other metals) are aggregated
and connected to fiber optic cable via fiber connection boxes.

Fiber optic cable (or simply optical fiber) is a glass-based wire that transmits light and
has significantly greater bandwidth and speed in comparison to metal wires. In some
cities (or large buildings), you may have fiber optic cable going directly into individual
buildings; in such a case, the fiber junction box will reside in the building.

These fiber optic cables eventually make their way to an ISP's head-end, which is a
facility that may contain a cable modem termination system (CMTS) or a digital
subscriber line access multiplexer (DSLAM) in a DSLbased system. This is a special type
of very large router that connects and aggregates subscriber connections to the larger
Internet.

These different head-ends may connect directly to the wider Internet, or instead be
connected to a master head-end, which provides the connection to the rest of the
Internet.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
From the Local Provider to the Ocean’s Edge

Eventually your ISP has to pass on your requests for Internet packets to other
networks.

This intermediate step typically involves one or more regional network hubs.

Your ISP may have a large national network with optical fiber connecting most of the
main cities in the country.

Some countries have multiple national or regional networks, each with their own
optical network.

A general principle in network design is that the fewer the router hops (and thus the more
direct the path), the quicker the response.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
From the Local Provider to the Ocean’s Edge

The networks in Country A are all interconnected, but rely on Network A2 to connect them to the
networks in Country B and C. Network B1 has many connections to other countries' networks. The
networks within Country C and D are not interconnected, and thus rely on connections to international
networks in order to transfer information between the two domestic networks. For instance, even
though the actual distance between a node in Network C1 and a node in C2 might only be a few miles,
those packets might have to travel many hundreds or even thousands of miles between networks A2
and/or B1.
A general principle in network design is that the fewer the router hops (and thus the more direct the
path), the quicker the response. Figure 1.18 illustrates some hypothetical connections between several
different networks spread across four countries. As you can see, just like in the real world, the countries
in the illustration differ in their degree of internal and external interconnectedness.
Clearly, this is an inefficient system, but is a reasonable approximation of the state of the Internet in the
late 1990s (and in some regions of the world, this is still the case), when almost all Internet traffic went
through a few Network Access Points (NAP), most of which were in the United States.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
From the Local Provider to the Ocean’s Edge

This type of network configuration began to change in the 2000s, as more and more networks began to
interconnect with each other using an Internet exchange point (IX or IXP). These IXPs allow different ISPs
to peer (that is, interconnect) with one another in a shared facility, thereby improving performance for
each partner in the peer relationship.

As you can see, IXPs provide a way for networks within a country to interconnect. Now networks in
Countries C and D no longer need to make hops out of their country for domestic communications.
Notice as well that for each of the IXPs, there are connections not only with networks within their
country, but also with other countries' networks as well.

Multiple paths between IXPs provide a powerful way to handle outages and keep packets flowing.
Another key strength of IXPs is that they provide an easy way for networks to connect to many other
networks at a single location.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
From the Local Provider to the Ocean’s Edge –IXP and Data Centers

As you can see in Figure 1.20, different networks connect not

only to other networks within an IXP, but to the networks of
large companies, such as Microsoft and Facebook are also
connecting to multiple other networks simultaneously as a
way of improving the performance of their sites.

Real IXPs, such as at Palo Alto (PAIX), Amsterdam (AMS-IX),

Frankfurt (CECIX), and London (LINX), allow many hundreds of
networks and companies to interconnect and have
throughput of over 1000 gigabits per second.

The scale of peering in these IXPs is way beyond that shown

in Figure 1.20 (which shows peering with only five others);
companies within these IXPs use large routers from Cisco and
Brocade that have hundreds of ports allowing hundreds of
simultaneous peering relationships.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
From the Local Provider to the Ocean’s Edge –IXP and Data Centers

In recent years, major web companies have joined the

network companies in making use of IXPs. As shown in
Figure 1.21 , this sometimes involves mirroring
(duplicating) a site's infrastructure (i.e., web and data
servers) in a data center located near the IXP.

For instance, Equinix Ashburn IX in Ashburn, Virginia, is

surrounded by several gigantic data centers just across
the street from the IXP.

This real-world geographic correspondence to the

digital world encapsulates an arrangement that benefits
both the networks and the web companies. The
website will have incremental speed enhancements (by
reducing the travel distance for these sites) across all
the networks it is peered with at the IXP, while the
network will have improved performance for its
customers when they visit the most popular websites.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Where Is the Internet?
Across the Oceans

Eventually, international Internet communication

will need to travel underwater. The amount of
undersea fiber optic cable is quite staggering and is
growing yearly.

As can be seen in Figure 1.22 , over 250 undersea

fiber optic cable systems operated by a variety of
different companies span the globe.

For places not serviced by undersea cable (such as

Antarctica, much of the Canadian Arctic islands,
and other small islands throughout the world),
Internet connectivity is provided by orbiting
satellites. It should be noted that satellite links
(which have smaller bandwidth in comparison to
fiber optic) account for an exceptionally small
percentage of oversea Internet communication.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Chapter 1
1 A Complicated
Ecosystem 2 Definitions and
History

3 The Client-
Server Model 4 Where is the
Internet?

5 Working in Web
Development 6 Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Working in Web Development
Fifteen years ago, this would have been a much simpler section. Back then, there were web
developers, web designers, and webmasters. However, as the web has evolved and
expanded in complexity, the range of roles (and the names used to describe them) has also
expanded.

Furthermore, the terminology to describe web development activities keeps changing. Ten
years ago, a web programmer was someone who did server-side development, perhaps in
PHP or ASP.NET. As JavaScript became more important to web development, a distinction
between front-end development (JavaScript) and back-end development (PHP/ASP.NET/etc)
made its way into high-tech job ads. As you can see in the following list, today there are
even more distinctions in the web development job world.
With so many distinct areas that one can become an expert in, it's comforting to realize that
web development is a team effort. Building and maintaining a web presence requires more
than technical ability, and many brilliant developers are not also brilliant artists, designers,
managers, and marketing experts. Working in the world of web development therefore
usually requires a team of people with various complementary (matching) skill sets as well
as some areas of overlap and cooperation.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Working in Web Development
Roles and Skills

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Working in Web Development
Roles and Skills

 Hardware Architect/Network Architect/Systems Engineer:

The people who design the specifications for the servers in a data center. Design and
manage the layout of the physical and logical network are essential somewhere along
the way, whether at your company or your host's. These roles require networking and
operating systems knowledge.
 System Administrator:
Once the system is built and wired to the network, system administrators choose and
install the network operating system, then manage the shared operating system
environments for other users. This position is combined with the hardware architect in
smaller firms.
 Database Administrator/Data Architect:
The database administrator (DBA) is a role found in larger companies. In these
companies, there are many databases, often from many divisions, all of which need to
be managed, secured, and backed up. Database administrators will perform
maintenance on the databases as well as manage access for user and software accounts.
They sometimes write triggers and advanced queries for users upon request as well as
manage database indexes.
A data architect role is more focused on the design and integration of data. In recent
years, managing and making use of large sets of often unrelated data has become
increasingly important for web companies.
In smaller companies, these different data roles are often combined with the system
administrator and/or developer ones.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Working in Web Development
Roles and Skills
 Security Specialist/Consultant/Expert:
A good system administrator and network architect will certainly have insights into security as
they perform their duties. Security is so vital to web development, and because the
knowledge necessary to do security work is complicated and ever changing, it is not
uncommon for companies to outsource their security needs to security specialists. These
specialists will test for vulnerabilities, implement security best practices, and make updates
and changes to programming code or hardware infrastructure to protect a site against well-
known or newly emerging (called zero-hour) threats.
 Developer/Programmer:
Programmers can be assigned a wide range of tasks aside from simple coding. Writing good
documentation, using version control software, engaging in code reviews, running test cases,
and more might be typical tasks, depending on company practices. Programmer positions
often begin at the entry level, with higher-level design decisions left to software engineers
and senior developers. In terms of the web development world, the terms programmers or
developer are quite broad; typically, however, this term is used to indicate a job focused more
on server-side development using languages like PHP.
 Front-End Developer/UX Developer:
Increasingly complex front-end development requires software developers with an aptitude
for graphical user interface design (nowadays more typically referred to as user-experience or
UX design) and an understanding of human–computer interaction (HCI) principals. This
typically requires in-depth JavaScript expertise along with good CSS skills.
Another increasingly commonly used synonym for front-end developer is UX developer. The
main difference between a UX developer and a UX/UI designer (described below), is that the
UX developer is involved mainly in the implementation of the user experience and less in the
actual design of it.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Working in Web Development
Roles and Skills (II)
 Software Engineer:
A software engineer is a programmer who is adept at the language of analysis and design, and uses
established best practices in the development of software. Sometimes the role of a programmer
and software engineer are used interchangeably, but a software engineer has more knowledge of
the software development life cycle and can effectively gather requirements and speak with clients
about technical and business matters.
 UX Designer/UI Designer/Information Architect:
These are names that focus on the structure, design and usability of a website. Also referred to as
the user interface, the term UX has become the preferred term because improving how a website
is used is just as important (or even more important) nowadays as improving how a website
appears. While coding skills can be helpful, this type of work more often involves the development
of prototypes, making mockup designs, and analyzing user experience data. In larger web
development firms, this type of work also commonly involves working in conjunction with creatives
in the art department.
 Tester/Quality Assurance:
Testers are the people who try to identify flaws in software before it gets released. This type of
work is often called quality assurance (QA). Although some test roles are for non-experts, many
testers know how to program and might write automated tests as well as develop testing plans
from requirements. Although these duties are often integrated with developers, they can form a
job all their own.
 SEO Specialist:
Search engine optimization (SEO) refers to the process of improving the discoverability of web
content by search engines. Uses board (as well as the under-handed) techniques which used to
improve SEO results. An SEO specialist needs to be familiar with these techniques as well as
analytics, testing approaches, social networking APIs, and even content creation strategies.
Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Working in Web Development
Roles and Skills (II)
 Content Strategists/Marketing Technologist:
Regardless of technological features, websites ultimately succeed due to the quality of their content. A Content
Strategist (also called a marketing technologist) is someone who uses his or her experience with existing and
emerging web technologies in conjunction with knowledge about the audience to craft engaging web content.
This type of work might also be done by an SEO specialist or an information architect. Writing and marketing
skills as well as knowledge of content management systems, email services, and social networking interfaces are
important for this job.
 Project Manager/Product Manager:
Websites are complicated projects often involving the work of many different people with different skill sets and
personalities. Getting all these people to
work together in a timely and effective manner typically requires the committed effort and knowledge of project
managers (also called product managers). Knowledge of planning and estimation methodologies is helpful, as
are more general people management skills.
 Business Analyst:
Although a software engineer in an analysis role might speak to clients and get requirements, that role is often
given a different name and assigned to someone with especially good communication skills. A business analyst is
the interface between the various divisions of the company and the website (and IT in general). These people
can easily speak to the HR, marketing, and legal divisions, and then translate those requirements into tasks that
software engineers can take on.
 Nontechnical Roles:
Aside from all the technical roles above, there are additional important roles that require expertise outside of
technology. These roles include traditional ones found in almost every company: accountants, writers, designers,
editors, lawyers, salespeople, and managers. There are also a wide variety of new roles that are unique to the
web space, such as analytics manager, motion designer, social media analyst, cloud architect, and the
intriguingly (interestingly) named growth hacker. Getting people from different backgrounds with different
expertise to work together is how companies balance the business, technology, and art of website development.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Working in Web Development
Roles and Skills (III)
Two new terms are becoming increasingly popular in regards to web development
employment.
Full-Stack Developer:
In the list of web roles, specialization of skills is the main focus.
A full-stack developer is the opposite. In Figure 1.23, the full-stack developer
appears multiple times, roaming up and down the stairs between different job roles.
This was our way of visualizing the unique (some say impossible) nature of the full-
stack developer.
Rather than specializing in server-side development, or client-side user experience
construction, or database administration, a full-stack developer ideally has
competency and experience in all of these domains. Many companies even expect
full-stack developers to be knowledgeable about various system administration
tasks, such as setting up a web server and handling security issues.
DevOps (Development and Operations):
Like the above full-stack developer, DevOps refers to integration rather than
specialization. For most people who use the term, DevOps refers to a development
methodology in which developers, testers, and others on the operations or
hardware side work together right from the beginning of the development process.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Working in Web Development
Types of Web Development Companies

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
Working in Web Development
Types of Web Development Companies
Hosting Companies
There are companies that will manage servers on your behalf. These hosting companies or data centers offer many
employment opportunities, especially related to hardware, networking, and system administration roles.
Design Companies
Design companies are at the opposite end of the spectrum, with few technical positions available. These firms will provide
professional artistic and design services that might go beyond the web and include logos and branding in general. Some
companies produce mockups in Photoshop, for example, which a web developer (at another company) can then turn into
a website.
Website Solution Companies
Website solution companies focus on the programming and deployment of websites for their clients. There are technical
positions to help manage the existing sites (working in conjunction with hosting companies) as well as development jobs
to build the latest custom site.
Vertically Integrated Companies
Vertically integrated companies are increasingly becoming the one-stop shop for web development. They are called
vertically integrated because these companies combine hosting, design, and application solutions into one company. This
allows these companies to achieve economies of scale and appeal to nontechnical clients who can go there for all their
web-related needs, large or small.
Start-Up Companies
Start-up ventures in web development have been some of the biggest success stories in the business world. Start-ups are
often attractive places for new graduates to work, with less competition from experienced candidates and potentially lots
of jobs available from developers to designers and system administrators. The smaller start-ups companies often require
full-stack developers, who can take on any role from system administrator through to lead developer.
Internal Web Development
Although many companies outsource their web presence, others assign the work to an internal division, normally under
the umbrella of IT or marketing. Although many of these roles are simple caretaker positions, others can be quite
engaging, requiring real programming expertise. Many companies have lots of internal data they would not share with
outsiders and thus prefer inhouse expertise for the development of web interfaces and systems to manage and display
that confidential data. Often these websites exist only with an organization's Intranet rather than as public websites on
the Internet.

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Chapter 1
1 A Complicated
Ecosystem 2 Definitions and
History

3 The Client-
Server Model 4 Where is the
Internet?

5 Working in Web
Development 6 Summary

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Summary
Key Terms

application server (IX or IXP) request-response loop

authentication server Internet service provider response
bandwidth (ISP) router
broadband modem load balancers routing table
cable modem termination mail server semantic web
system media server server
circuit switching Mosaic server farm
client Netscape Navigator server racks
client-server model Network Access Points shared hosting
data center (NAP) static website
database server next-hop routing user experience
DevOps packet virtual server
dynamic website packet switching webmaster
failover redundancy peer Web 2.0
fiber optic cable peer-to-peer World Wide Web
full-stack developer model Consortium (W3C)
HTTP request
intranet Request for Comments
Internet exchange point (RFC)

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.
 Questions?

Randy Connolly and Ricardo Hoar Modified by Mohammed Siddiqui Fundamentals of Web Development - 2nd Ed.