Widgets

Widgets
The easiest way to put tools on your site!

Widgets, also known as gadgets and a growing list of other synonyms, are a much more convenient way of adding tools and features to either your desktop or your website. Many of them use a new programming concept called Ajax. In this tutorial we'll just call them widgets.

For example, if you like the little 5-day weather forecast at the top, you can just move your mouse over the top right corner and a "COPY ME" button pops up. Go ahead, try it and see what happens!

You'll find this page and a few that follow loaded with widgets from sites such as SpringWidgets.com and YourMinis.com.

Before you start grabbing everything that looks pretty, heed this warning: Some widgets may contain harmful code (spyware, malware, viruses, trojans, etc.) so if you put it on a page, be sure to run that page through a virus or adware/spyware checker before you launch it into cyberspace.

Some of them may seem to be spyware because, by their very nature, they need to access certain things about your computer - location, etc. - to do what they are supposed to do. Just use some wise judgment.

Many of these widgets can be resized and tweaked with color schemes to better match your own site, so be sure to take advantage of that. Look at the one just to your left. At the bottom is a button called OPTIONS. Click it and you'll see you can customize it, download it to use on your desktop, or grab the code to embed it right on your web page!

In my case, I know that if I want to put a widget in the left or right column, I don't want it wider than 200 pixels, so everything will look consistent.

Larger ones would appear in this center column. The example below, though not exactly a widget, is from Veoh.com, an excellent source of downloadable and embeddable videos - much higher quality than YouTube or Google. This is an example of excellent anime (this is the first of a whole series called "Avatar: The Last Airbender"), from which you could create an entire page, section or site devoted to anime.

Online Videos by Veoh.com

Now you might note that with the addition of this video, the whole page stretches out just beyond what is comfortable for the visitor. You don't really want them to have to slide their bottom bar back and forth slideways to read the page. So this means you may have to redesign your page somewhat by eliminating one of the outside columns.

Another way is to shrink the center video the way you can resize the widgets. Let's look at the code:

Now, this needs to all appear as one line in your HTML code. However, look at what I've emphasized in bold:

width="540" height="438"

That can be changed, but to avoid distortion, you need to make sure that the changes are proportional. If you shrink the width from 540 to 400 (-140) that does not mean you can just subtract 140 from the 438 height to get 298. Here we get into a little high school math.

540/400 = 438/x
original width (540) / new width (400) = original height (438) / new height (X)
We want to find out what X is to keep it proportionate.

540
___
400

438
___
X

540 x X

438 x 400

So what is X? Well, if you recall that high school math, 540X = 400x438 or 540X = 175,200 (you can go to PROGRAMS - ACCESSORIES - CALCULATOR to figure this out). Then you divide 175,200 by 540 and find that X = 324.4444. Round that off to 324 or 325 (one pixel's difference won't distort it).

Remember - multiply the top left by the bottom right, and the bottom left by the top right. Just remember - CRISSCROSS!

Finally, we see that we've subtracted 140 from the width and 113 from the height to keep it proportional.

Now, our new HTML code looks like this:

Let's look at it:

Online Videos by Veoh.com

While the video is now smaller, the page isn't narrower ... because the original, over-sized one still exists above.

Let's take a look at a new copy of this page without the over-sized original!

Free & Low-cost eBooks,CDs, Software, & DVDs from the Online Bookstore