Understanding networking for web designers

When learning to become a web designer, it is critical to understand how networking works since so many different parts come together to make a web site work.

When a web site goes down, it can be anyone of the different parts that has failed. Being able to pinpoint that part, and who is responsible for it is key to getting the web site back up and running again quickly.

Internet and WWW aren’t the same thing

First of all, let’s get one thing straight. The internet and the World Wide Web are not the same thing.

The internet is a series of interconnected networks. It is a network of networks built of of private, public, academic, business, and government networks.

A Quick History

Mainframes

U.S. Army Photo from M. Weik, A technician changes a bad tube in the ENIAC computer circa 1940.
“U.S. Army Photo”, from M. Weik, “The ENIAC Story” A technician changes a tube. Caption reads “Replacing a bad tube meant checking among ENIAC’s 19,000 possibilities.” Center: Possibly John Holberton https://flic.kr/p/8QEF6m https://creativecommons.org/licenses/by-nc/2.0/

Before the invention of networking, computers were room-sized monsters weighing in at several tons that were individually programmed for specific tasks.

One computer would be coded to do one thing, while another would be coded in a completely different way. There was no direct way for these machines to communicate. To exchange information from one machine to the other involved programming some means of converting the information from scratch.

Practically speaking, there was no exchange of data.

ARPANET

Work on what would become the internet started as an American military project in the 1960s. The primary precursor network, the ARPANET, initially served as a backbone for interconnection of regional academic and military networks in the 1980s.

It’s origin comes from various efforts to quickly distribute new software and other computer science innovations as well as developing communication systems that could survive nuclear war.

TCP/IP

TCP/IP control panel on macOS
TCP/IP control panel on macOS High Sierra

The key development in connecting computers into networks was the invention of TCP/IP. From early research in 1973 it was formally adopted as a standard by the US military in 1982.

Today, all modern computers that are connected to networks use TCP/IP. This includes all operating systems such as Windows, macOS, Linux, iOS and Android.

Domain Name Servers

When your web browser tries to connect to a web site, it does not know where to go. The browser has to look up the IP address of the web site from the World Wide Web’s “phone book” which is called a “Domain name Server”.

For example, if you want to go to the DuckDuckGo search engine you will type https://duckduckgo.com intop the browser URL bar. The problem is that computers don’t understand letters. They only understand numbers.

So, Firefox sends a query to the DNS server: “where can I find https://duckduckgo.com?”.

The DNS server replies: “107.20.240.232”. The browser then sends a request to 107.20.240.232 for it’s default page. The default page is called index.

And that is when the web site first displays on your screen.

In some cases when your web site is not working, it can be that the web server computer is down. But it can also be that the domain name system isn’t working (for example because your payment was due and didn’t pay your bill on time).

Whois
Whois search performed in a macOS terminal window
Whois search performed in a macOS terminal window

Once you decide to start a new web site you have to come up with a name and then check to see if it is already taken. To do this you use a tool called whois.

You can perform a whois search in the terminal, or you can use a web site such as https://whois.icann.org/en or https://www.whois.com/whois

The easiest way is to use the terminal. For example if you want to search for a domain name called “geekdesigner.ca” type the following code in the terminal window and hit enter.

whois geekdesigner.ca

The query results will tell you if the domain name is available or not.

Registrars
Screen capture from the Canadian Internet Registration Authority (CIRA) web site video tutorial on how to register a web site.
Screen capture from the Canadian Internet Registration Authority (CIRA) web site video tutorial on how to register a web site.

Once you have chosen your web site domain name and you have confirmed its availability, you must apply to have your chosen domain name included in the DNS “phone book”.

A company that specializes in registering domain names is called a registrar.

In Canada, only registrars based in Canada can offer the .ca top level domain name. You can get your hosting anywhere on the planet, but you must use a Canadian registrar.

(There are often package deals where you can get web site hosting and domain names together, but it is considered a ‘best practice’ to have your domain names managed elsewhere than at your host. That way if one service fails, you can still perform workarounds to keep your web site online. If both fail, you are out of luck.)

Internet for Designers

World Wide Web

The World Wide Web is text-based network of servers running a web server software and exchanging information (such as HTML pages, CSS and Javascript files, images, etc) through the HTTP protocol.

To get your web site online you need a web server, also known as a “host”. There are thousands of companies that offer this service. Some of the better known companies are Dreamhost, Bluehost, and Siteground.

Siteground is a particularly good choice for hosting WordPress sites.

The WWW started quite small

There was a point in time, in the mid-90s, that the World Wide Web was tiny. Just a server or two and a handful of static pages.

Static pages are web pages that don’t change with user interaction, they are just plain text.

But due to the fact that Tim Berners-Lee decided to give the technology away for free – as opposed to selling or licensing it – it became (to put it mildly) a hit.

Because of it’s popularity, pages started becoming more numerous. Sites and servers were doubling every few months, year over year. From a designer’s point of view, this was a problem.. Managing a handful of pages is one thing. Managing a web application with over two billion users (like Facebook) is much more problematic.

There is no huge warehouse somewhere in California with a few million employees copying and pasting your tweets and then FTP-ing them to the web server. Machines do that.

There was no option. It was impossible to continue embedding text and image content directly into HTML pages. The process would have to be automated. So, a new type of system was invented: dynamic web sites, or web pages that are created automatically at the time you request them with up-to-date information pulled from a database.

LAMP Stack

In modern web design, the standard web site server system is something known as the “LAMP Stack”. The stack is built of the following pieces of software:

  • Linux operating system
  • Apache web server
  • MySQL database server
  • PHP scripting language
Web Server

The most common web server software is Apache. It is free and open source, which explains it’s immense popularity.

The role of the web server is to listen to HTTP requests coming in on port 80 and send the appropriate answer. For example, when you visit example.com you are requesting the default page example.com/index.html. Apache is the service that listens, understands the request, reads index.html from the server’s hard disk and then sends it to your browser.

Database Server
View of the interface of PHPMyAdmin, which is a front-end to MySQL.
View of the interface of PHPMyAdmin, which is a front-end to MySQL.

Once a web site has gotten too large, the information that used to be typed into the HTML pages directly gets stored in a database instead.

A database is basically a spreadsheet-like set of information with rows (one for each page of the site) and columns for each type of information such as title, author, description, etc.

The most popular web backend database is called MySQL. But since it is a backend software it does not have a graphic user interface. However, there is a PHP web application that provides this on most web server installations: PHPMyAdmin.

PHP

Finally the last piece of the puzzle is how exactly does Apache tell MySQL what information it needs? The answer is PHP.

PHP is a server-side scripting language that is made to be embedded into HTML. For example here is how you would insert a title variable into the HTML title metatag:

<title><?php echo $title ?></title>

In other words when building a page with PHP, you are actually just using the PHP to fill in the blanks within an HTML template.

Author: Eric Girouard

Eric Girouard is a photography and design teacher in the Graphic & Web Design department, which he joined in 2001. He holds a BFA in Fine Art specializing in Drawing & Painting from Concordia University. His stock images were distributed worldwide by Corbis. Eric also worked at Trey Ratcliff’s “The Arcanum – Magical Academy of Artistic Mastery” and served as a photo contest judge for Viewbug.com.

Leave a Reply