Learn about the basics of the Internet and the World Wide Web

The Structure of the Web

The world wide web is essentially a network of networks. A network is a series of computers that are connected to each other. When you connect to the web, you're connecting to millions of computers all over the world. The web is also what we call a client-server system. The computer you use to connect to the internet is a client. The client connects to the network through your ISP (Internet Service Provider) Wether it's someone like Earhtlink, BellSouth, AOL or Road Runner), your system connects to the internet by first connecting to another network (the ISP).

How you connect to the Internet

You manage the flow of information to and from your computer through some type of software package...generally a browser, which allows you to call up pages. You might also connect to the Internet through your email client. Finally, if you're creating web pages, you might use an FTP client (File Transfer Protocol), which allows you to upload and download files to a location on a remote hard drive.

When you want to retrieve a web site, you start your browser, then type in the URL (Uniform Resource Locator) into an area of your browser. The URL gets looked up by something called a DNS (Domain Name Server) that tells your computer the IP address of the machine (server) that holds the information. An IP address identifies a single computer on the internet. Think of the DNS server as the yellow pages. If you want to know where to find a Denny's you can go online or reach for your phone book and look up the name. The name will give you an address and your browser can use that info to get to where you want to go. Most clients have dynamic IP addresses, which means every time you connect to your ISP, your IP address changes (your ISP hands you a new one from their batch of IP addresses). Some clients and most servers have static IP addresses (IP addresses that don't change).

How information gets transferred

Once your computer knows where to find the information, it sends a request for info to that address. The computer that has that information sends it back until it reaches your computer and is displayed on your screen. The interesting part about the web is that the connection that is made is never a direct connection. The information is broken up into little pieces (packets) that are sent through a series of computers. The packets of information travel through a series of network points to get to your machine. The reason for this indirect approach may seem like a disadvantage at first, but is one of the strengths of the internet.

The information is sent through the network in different packets so that if any resistance is met along the way (if a server is busy), the network can find the most efficient way to transmit the information to it's destination.

HTML

The information that is transferred to your computer usually consists of some type of page with text and graphics. The page is a document much like the documents you create locally on your computer. The document is in a language called HTML (Hypertext Markup Language). You can create a page for the web using a program that writes in this language like DreamWeaver. You can also examine this language yourself.

Keeping stuff small

Since a page is broken into individual packets and all that information has to go through many places to get to/from your computer, the more information, the more packets and the more time it takes to transfer those packets of info. Therefore one of the goals of a web designer is to minimize the amount of packets on the web. Designers accomplish this by compressing all of their graphics to make them more efficient and easy to transfer to through the web.

GIF

Gif is a graphic format most commonly used for images that do not have a lot of colors in them. Therefore it works best for solid filled logos and does not work so well for photos.

Because a GIF graphic can use a maximum of 256 color, it is generally not suited for photographic work.

GIF is a lossless file format, which means that the compression algorythms do not affect image quality

The GIF format can also use one of it's colors as a transparent color.

The type of compression that this program uses looks for similar patterns on an image horizontally across a row of pixels. So that a gradient from top to bottom will compress better than a gradient from left to right. Try it and see.

Interlacing is available in this format. If this option is chosen, the browser will load a low resolution version of the image first and it will load several passes after that improving the quality of the image at every pass.

The less colors a GIF image uses, the better the compression. That's why there's an option to decrease the amount of colors that an animation exports with in this area.

Dithering, another option available for a GIF file will dramatically increase the file size so use this function only when you need to make the GIF files can be animated, so 99% of the banners & tiles (even the ones with photographs) will be in GIF format even though this is not the preferred format for photographs.

The more of an image that changes between frames the better the compression on animated GIFs, keep this in mind when you're designing a banner and try and keep the areas that change a lot to a minimum.

JPEG

Lossy Compression format, the more compression, the less quality the final image will have

The JPEG format does not support animation.

Supports 24 bit color so this is the optimal format for photos

Because of the way it compresses images, it does an awful job with images of solid colors and will even leave artifacts on plain white backgrounds. Never use JPEG images for logos.

It does not support transparency

Progressive option is similar to the interlaced GIF option, allows people to see some kind of lower resolution version of the image quickly.

PNG

Stands for Portable Network Graphics, it was designed to replace the GIF format, which was developed during the infancy of online services by CompuServe, the PNG format has three main advantages over .gif

It provides for 8-bit transparency channels, where .gif only allows one color to be transparent, the PNG format allows for full alpha channel transparency. What that means is that you can get a drop shadow to blend nicely onto any type of background with PNG, but not with .gif.

PNG also allows for Gamma Correction. You can create more accurate color graphics that will look the same color on different machines.

The PNG format will also compress better than .gif...between 5-25% better.

PNG, like the GIF format is a lossless format.

It does not allow for animation, so for banners, the .gif format is still prevalent.

SWF

The swf format is used by Macromedia Flash (and others) to deploy scalable vector-based graphics online. Vector based graphics are very efficient and small. It's like the difference between creating a graphic in Photoshop (bitmap) versus creating a graphic in Illustrator (vector).

This format allows for the inclusion of bitmapped graphics, but if they are included, they are stored inside the vector files as PNG or more than likely JPG graphics.

The format cannot be read by any browser by default. It requires a software plug-in to your browser in order to work. However, over 94% of browsers have the plug in.

The format is extensible, which means that new features can be added to new versions, and when the files play on browsers with older versions of the plug ins, the files will still play (without the newer features working, of course)

The format supports streaming, so users don't have to wait until the entire file is loaded in order to see something.

blog comments powered by Disqus