Course Content

The video below comes from a PBS series on the history of the Internet hosted by Robert Cringely. The whole series was quite entertaining but long to watch. So I have extracted for you the segment that describes how the browser came to be and how Netscape got into the business.

Anatomy of a URL

What does Uniform Resource Locator Really (URL) Mean?

Fortunately, just that.. it is a uniform way to locate your resource (in this case web site). Take a look at the picture below. Each part of the URL is spelled out for you:

In order to understand why we are being very specific as to the name of the files and the location/folders that you post your assignments, you need to know the make-up of URLs and how browsers are able to find things.

In short, there are three things that can go wrong:

1. wrong folder name... browsing tends to be unforgiving. files using capital letters need to be specified in the URL address box (meaning you probably should avoid them when possible), spaces can sometimes be misinterpreted (therefore use underscores, dashes or some other kind of separator). So, when you are asked to name your file, be sure you follow it exactly. When your instructor specifies a variable (like your last name), the following is standard generally used: [yourlastname]-newsletter where [yourlastname] is your actual last name (no spaces and the brackets are omitted). They are there only to let you know that we are asking for a variable. for example:  lenz-newsletter.html
2. wrong extension... .htm and .html CAN MEAN the same thing but some servers do not recognize them as being equal. The name of your main page file names must be called index.html. Please be EXACT.... do not call it ANYTHING ELSE!!!!! not index.htm, not INDEX.HTM, not index1.htm but index.html. Please do not get cute here.. you do not have to name your site, your project, your team etc., in the file name. This is explained in more detail below.
3. speaking of folders, the other thing that will cause your project not to be found is that you place your project inside the wrong folder set up on the site to receive it. As noted in the anatomy of a URL shown above, the URL is only 'uniform' if the folder designations are followed exactly. To repeat, we are asking for a very specific folder name. Your files MUST be loaded into a folder with the EXACT folder name!!!

What the index.html page does

There is one other 'special' page type in this. Under normal situations the hosting server company will specify to you how your main page needs to be named. This could be index.html, index.htm, main.html, etc.... If you are using one of those, follow their instructions.  The default is almost always index.html.  What this gets you is removing the need to actually name your main page in the URL (saving your user few key-strokes). We are not using this but it still works the same. If you name your main page is called index.html, then you would not need to specify anything in the URL.. the browser will automatically see it and open it.

To recap, notice four things here:

1. You need the http:// designation... this is what specifies that it is Web page to be located by the browser.
2. The file type html may be saved as htm by some editors. Go ahead and save it in the program and then rename the file to .html before you send it to me. In the old days MACS used to use the four letters and Windows three.. We ask you to a standardize and only use index.html for your main pages.
3. Notice no spaces are used between words in the folder name. This is not required but recommended in order to maintain integrity of the designation (typos etc).
4. Lastly, spell out the file names exactly, capital letters included. Some servers ARE CASE SENSITIVE and will not locate your page if you use capitals but do not specify in the Browser. It is your choice to use capitals letters or not but be aware of the consequences.

Sorry it has to be so long, but we set up a system for us to use where all the projects are kept separate. If you lease a Web site server provider, yours would not be as long and could be called whatever you wanted it to be. For a site called edtecher.org the edtecher part is referred to as the domain name. These are managed by ICANN, an international non-profit organization. To get one of your choosing, you have to pay a renewable license fee.. usually $9-10 per year.

The ".org" part is called the Top Level Domain or TLD. This is something you should study a bit so you know its history and future evolution.  There are now at least a hundred top level domain types that define location or content type.

What the web pages do, then, is create a GUI to manage access to the folders and files located on the server. So, in the case of our sample project , if there was no main page when you specify the location (without index.html front age), this is what you would see (example is based on the file naming conventions used for another course):

In our example there are no sub-folders or files. But if there were, these would simply be listed. You could actually click on them to see them, but this is kind of messy. So, the first thing that a Web page does is to create a clean user interface to the file structure (GUI).  If there was a file named index.html the browser would render the html on that page

The Big Six

There are dozens and dozens of browsers out there (as you will see below). But based on usage, there appear to be Six that have garnered the most attention:

IT IS LIKELY THAT YOU HAVE YOUR FAVORITE AMONG THE ABOVE. THIS COURSE PROVIDES YOU AN OPPORTUNITY TO EXPLORE ONE OR TWO OF THEM TO SEE IF YOU LIKE ANY OF THEM BETTER. EACH HAS ITS ADVANTAGES AND DISADVANTAGES. AND SOME COMPANIES ONLY BUILD TO ONE OF THEM.. MEANING THAT THEIR WEB SITE MAY NOT WORK AT ALL OR WITH LIMITED CAPABILITIES. FOR THAT REASON IT IS LIKELY THAT YOU WILL HAVE MORE THAN ONE ON YOUR TASK BAR AND REFER TO EACH ONE FOR SPECIFIC PURPOSES.

Net-Net (Sorry for the Pun)

Internet browsers are your gateway to the Internet. In looking for a browser be certain to look for good security. You want a browser which will guard against pop-up windows, viruses, and phishing frauds. Most all browsers offer the same features, but it’s the little differences which will help you decide.

The order of popularity has evolved over time. Their differences are a study in technology innovation.

Browser Plug-Ins

Adding to the utility of these different browsers is the add-ons/plug-ins offered by each. Ever notice how some files you can open up to watch, listen to, or look at right off your browser (like an audio, movie or image)? While others you have to download to your computer first (like a pdf file or Word document)? Most Web browsers incorporate multimedia features so you can read them right off the the Internet. Most likely, your Web browser will figure out whether it cannot read the file the problem and tell you that you will have to download it. In some cases, you will have to determine what's missing on your own. These additional programs have been given a very sensible name - plug-ins. They 'plug into' your Web browser to give it additional multimedia powers. As technology advances, so does the ability to do things right on the Internet.

The latest revision to the Web, HTML 5.0 will contain more and more of these built-in capabilities. That means you will not have to download them to run them, and this includes Word docs spreadsheets, video, audio and even Flash and Shockwave files.

Here are a few plug-ins that you might already have. When you look at these sites you will notice that there are free "basic" plug-ins. For now, some of them carry a price tag but chances are in the next three years or so these cost based items will become freebies also.

• Adobe Acrobat Reader: As mentioned, this program allows your Web browser to display documents in their original form. It is very widely used.
• RealPlayer: Allows your computer to play all kinds of audio and video programs. It can turn your computer into an online radio or television.
• Shockwave and Flash: These are popular plug-ins from Adobe that animate e-cards, banners and screens on Web pages. They are very common, and most versions of Web Browsers include them. However, if your Web browser is older, you may need to update these plug-ins.
• Quicktime: This video player from Apple is one of the most common video player for Web pages. It works on both Mac and PC computers, and it allows you to play video clips that you download.
• Firefox Add-ons - Firefox has released a complete Website showing you all the available plug-ins
• Windows Explorer Plug-Ins - Not to be outdone, there are also hundreds of plug ins for Windows Explorer.
• Check your favorite browser (such as Safari, Chrome etc) to see what plug ins are available for these.

Do This!

As you may be aware there are several options with regards to picking a browser to use. one thing we know is that:

Not all Browsers are Created Equal

Most of you may have only heard of a couple of different browsers. Truth is that there are several dozens out there. Too many, in fact to describe each one here. Wikipedia of all places has done a fairly good job creating several comparison tables that , if nothing more, will help you understand the vastness of the browser universe. Note that there MAY be some inaccuracies in each of the tables due mostly to the ever-changing landscape. This information is being offered only to point out how much there is to learn about this environment.

To add to this discussion here are a few places to read other’s opinions and findings about the differences among that various browsers:

• Browser Wars Part 1
• Browser Wars part 2

I can imagine you can find many others on your own.

Mini-Case Study

Just for fun, take a look at an issue we are currently experiencing during a revamping of a Website I use in my research. The original site, digitalbooktalk.com was written using a custom theme and integration with a database. We did this because the content management system we were using was in its infancy and did not support lots of the functionality we needed. So now, after about eight years, we have refreshed it and updated its look. The new url we are using is digitalbooktalk.net. We rerouted users to this new one whenever they enter digitalbooktalk.com as the URL.

To get an idea about differences in browser support, first, open the following page using Firefox:

City of Ember

note the formatting problems… now do the same inside of Chrome.. note that the problems are gone…. same exact code, different browser support… just one of the many anomalies you will encounter as a Web developer…

Browser Assignment #1

The first deliverable for this activity is to post on to the Drop Box (found under Assignments Tab) your response to the following question(s):

1. Which Browser do you use most often?
2. Why?
3. Based on this assignment, have you changed your idea/preference?
4. Why/why not?
5. Perhaps you have another idea about setting up your ‘browser tool bag?… explain (note we are not talking search engine here only browsers.. that discussion comes later)

Browser Assignment #2:

In the second Drop Box for this cycle, describe your plan, as a web developer, how you would ensure the page/site you develop works on all five browsers (or, do you even bother with this? why? why not?).

Browser Assignment #3

As you may be seeing many of the browsers, even though they started out as open source, have evolved into using more and more proprietary functions. For this discussion, answer the following question and post it in the Drop Box in Canvas:

• What are the relative advantages and disadvantages of using proprietary functionality in browsers versus leaving it completely open source?

 NOTE: NEXT CYCLE WE WILL BE REVISITING YOUR REFLECTION IN THE FORM OF A PEER REVIEW IN CANVAS. MORE TO FOLLOW— 

In Lessons-6207. Both comments and pings are currently closed.