header2000

In this session, we will first give some examples of networks. Second, we will introduce some terms related to computer networks. We will then explain how computer networks work. Finally, we will explain what web browsers are and why we should learn how to use more than one web browser.

2.1 What is a Network?
A Network is a group of people or computers that are connected in some way so they can work together to share information.

01

Do you have a network you use to share information?

02

These people are sharing information… They are a network.

Another term for building computer networks is Information Technology:

03

This course could be called a course in Information Technology. Often courses in Information Technology can be very difficult and confusing:

04

How are we doing so far???

2.2 How information gets from your computer to the Internet
You open a web browser and do a web search. You then click on a link to a website. Your computer sends a signal to a router in your home or school. The router sends the signal to an Internet Service Provider.

Eventually, the signal reaches a Server which is hosting the website you would like to see. A single server can host up to one thousand websites. Think of the server as being a big hotel where hundreds of websites live.

The server responds to your signal by “serving” up your website – just like how restaurant serves up a meal that you have ordered. The website is sent back to the Internet Service provider who sends it back to the router who sends it back to your laptop where the website magically appears on your laptop screen. All of these steps can happen in less than one second.

Here is a simple diagram of this process:

05

Here is a more complex diagram of this process:

06

Here is another diagram of the Internet showing how the hardware is connected together.

07

The Internet has local networks with just a few computers connected with a router to regional Internet Service Providers. The Internet also has large server farms with millions of computers connected to each other. These networks are then connected together to form the Internet.

2.3 Important Networking Terms
HTML and CSS – Two computer languages that are used to build web pages. HTML stands for Hyper Text Markup Language and CSS stands for Cascade Style Sheets. HTML controls the structure of web content, in other words, what order the content appears on the web page. CSS controls the appearance of web content, in other words, how our content looks on the web page. Together, these two languages are the foundation of every website in the world.

08

Web Page – An HTML document that displays in a web browser and typically includes links to other web pages.

Website - a group of interconnected web pages with links to each other typically by displaying the same menu of links at the top of side of each of the individual web pages.

Web search engine – a program that ranks web pages based upon the popularity of the web page and the content of the web page – including heading words and keywords. Almost all web pages are visited after using a search engine to do a web search.

World Wide Web – a service made of connected web pages (also called hypertext or HTML documents) linked together across the Internet.

Internet – the global collection of computer networks and their connections. Data sent over the Internet includes web pages, email, videos and voice conversations.

Router – A router is a device in your home or school that connects computers to the Internet and connects networks to one another (typically one or more local area networks (LANs) to a wide area network (WAN)), and directs packets of information between networks.

Server – A computer that is connected to the Internet and contains and serves up web pages.

Web browser – a computer program to view web pages.

2.4 Web Browsers for Building Websites
One of the most overlooked and most important tools for building websites are the web browsers you use to build and test your websites. For security reasons, you should not build a website with any browser that has invasive “call home” functions. These include the most popular web browser, Google Chrome, and the two Microsoft web browsers, Edge and Internet Explorer. The problem with Call Home web browsers is that the same open back door used by the companies that make these browsers can also be used by hackers to access and bring down your website. You also want to avoid any web browsers that are not open source as there is no way to check the code. This includes not only the two Microsoft browsers but also the Safari, Vivaldi and Opera browsers.

One of the major benefits of using Linux is to have a more secure operating system that does not have back doors. You also need a web browser that does not have back doors. Linux Mint – like most other Linux operating systems - comes with the Firefox web browser pre-installed. But we need several other web browsers to efficiently build and test our website.

Ideally, we would like the web browsers to be inside of the Mint Software Manager. Applications in the Mint Software center have two important advantages. First, they are very easy to install with just the click of a button. But equally important, these applications have been reviewed by the Linux Mint community for compatibility with Linux Mint and for security and function. Open the Mint Software Center and type web browser into the search box.

09

You will see the top two entries are Firefox and Chromium. Chromium is the open source version of the Google Chrome web browser - without all of the spying and call home functions. We will install both of these browsers and explain how to use them in a moment.

Next type waterfox into the search box.

10

Waterfox is a more private version of Firefox. We will also install Waterfox.

We should then add all three of these web browsers to our panel so we can quickly access them. You might be wondering why do we even need more than one web browser?

The first and most important reason is for testing and previewing our web pages as we build them. What we want is to build our website with one browser and then periodically review the changes we have made in a different browser. For security reasons, we will use Waterfox to build our web pages. Then to test our web pages, we will use Firefox. The benefit of Firefox is that we can quickly and easily clear our browser cache in the top menu by clicking on History, Clear Recent History.

11

You do need to display this top menu. You can add this by going to Firefox settings. Then click Customize and in Toolbars at the bottom of the screen, click on Menu Bar. Do the same to add the top menu to Waterfox.

Benefits of Waterfox over Firefox
Unlike Google Chrome, you can turn off most of the Call Home functions in Firefox. But these functions are enabled by default. You can disable these Call Home functions by going to Options > Privacy & Security > Firefox Data Collection. But  Waterfox disables the Firefox Call Home functions by default. One drawback of Waterfox is defaulting to the Bing Search Engine. But it is easy to replace this search engine with a better one such as Start Page using the Preferences settings.

How to Use Waterfox and Firefox Together to Build Web Pages
Whether you are building an HTML website with Gitlab or a Database website with Joomla, open your browser. Then go to the log in page and log into your website account. Then open the file for the web page you are working on. Then open the Firefox browser and enter the URL for the front end of the web page you are working on. Here is a screen shot of the home page for Pet Education Center back end in Waterfox on the left and front end in Firefox on the right.

12

Make a change in the index.html file. Then click Commit Changes. Wait for the change to be posted (the blue icon will turn green in about 10 seconds). Then at the top of the Firefox browser, click History, Clear Clear Recent History. Everything. Clear Now. Then reload the page by clicking on the half circle to the left of the small house.

Why you do not want to Preview the Page with the same browser you are using to build the page
If we loaded the front end of the page with our Waterfox browser and then clicked Clear Recent History, you would automatically be logged out of your Gitlab back end or the Joomla back end – requiring you to log back into your account to make more changes. Because building a website requires making literally hundreds of changes, it is very important to use this two browser side by side method for building and testing your web page changes.

Why should we use Chromium as our third browser?
Occasionally, you will need to check or verify changes using the email account associated with your Gitlab account and or your Joomla account. A benefit of Chromium is that you can automatically stay logged into your Gmail Website Account or at least open it with a single click. We do not want to use this Chromium browser for testing the front end of our web pages because that involved clearing the browser cache many times and each time, we would clear all of the history data to our Gmail account requiring us to log back into this account. We will also use this same Gmail account to access files on Google Drive and to log into the front end and back end of our Google Youtube account.

How to have several browsers open at once
There is generally not room for more than two windows to be visible at the same time on your desktop. So I will have Libre Writer open on the right side of my desktop with Chromium open to my Gmail account on the left side.

13

Therefore, when I am working on web pages, I open the Waterfox and Firefox browsers. Then click on the top of the browser and move both of them to a second workspace.

14

To go back and forth between work spaces, click on the All Windows icon in the panel.

15

Just to the right of the workspace All Windows icon is the Shutter icon which I click on whenever I want to use Shutter to take a screen shot.

What’s Next?
Now that we know how computers work and how networks work, in our next article, we will review how our economy works.