John Galea's Web Tips Page

Introduction

Once you have been around the Web for a while you start to see some excellent pages with some neat tricks. You ask yourself ... how do you do that? Well magic is only magic until you figure out how it is done. If you want to continue thinking of it as magic ... don't read on.

I am fairly new to a lot of this, so I'll add more tips as I figure them out.

Creating your own videoes

The true bastian of high end multimedia gurues ... Creating your own videoes for computers has never been so cheap and relatively simple.

Min requirement

Parameters to choose in capturing you video

There are a lot of different parameters you can choose that will dramatically effect the size and quality of your video:

Video Parameters

Audio Parameters

Do not forget that if you are capturing your audio from a TV tuner card there are two things you must consider. First does the TV Tuner card have a stereo decoder in it? And second if it is coming from a VCR most (if not all) VCRs do not put stereo into the cable out. You will need to connnect with video and audio input into your capture card, if the card supports it.

Settings

There are A LOT of settings that impact your video. Brightness, contrast, tuning, and audio recording level.

Captured Sizes

Raw uncompressed sizes are really QUITE BIG. I captured a 610 second video at 320x240, 10 fps, 24 bit color, 22K 16bit mono and it ended up at a wopping 677 MB.

I also captured a video a 80 second video at 320x240, 10 fps, 24 bit color 11K 8 bit mono. The uncompressed video was 160MB. Listed in the table below is the ending size of this file.

Creating a finished product

Editing can add different audio tracks, special effects, fade in and out, and splice different video sections into one final video. Now the next set of choices begin. There are really three common video formats, AVI, MPEG and MOV. MOV is really Apple based, however Windows versions of players are readily evailable. Lumiere does not support MPEG, so I have not played much with MPEGs. AVIs is where I have spent the most time. Underneath the AVI umbrella there are a number of different encoding algorithms, each has there strengths and weaknesses. I personally judge the algorithm based on three characteristics: color distortion (also called color aliasing), blockiness of the video and lastly the amount of compression achieved. The first two really define the overall quality feel of the video.

Encoding algorithms

Most encoding algorithms also allow you to control the compression amount with increasing compression decreasing file size and quality going hand in hand. Quality column in the table below refers to the selected quality setting used by the program in encoding the file. Not all encoding algorithms are supported by the avi player. The default avi player of NT and Win95 support Microsoft, and Cinepack, however do not support Intel Indeo (R) Video Interactive.

You will find a favourite encoding algorithm, however I have noticed one will be best for one video, and another will be best for another different video. So experiment.

I have tried the following:

Encoding Algorithms
Encode Color Quality Blockyness Compression Size Quality Compression
Microsoft Video Good Bad Good 28MB 75% 5.7
Intel Indeo Bad Good Excellent 16MB 90% 10
Radius Cinepak Excellent Excellent Good 20MB 75% 8
My personal choice is Cinepak.

The worst thing you can do is use extremely high quality settings and then using high amounts of compression to make up for this bad choice.

Animated GIFs

Ever been on a page and seen an animation? Look at my email pic, this is an animated GIF. The GIF image format is amazing, it can do a lot. There are two GIF formats (that I am aware of. GIF87 and GIF89. As far as I understand it GIF89 has most of the neat features. That said most of the picture viewers do not support animated GIFs. The browsers however do.

How do I create animated GIFs? It is actually quite simple. You need to get a series of images that you want to turn into an animated GIF. I recommend you start out by making sure all of the images are the exact same dimensions. There are numerous packages that can then make up the animation. You specify a series of parameters such as looping or not, length of time per pic and done.

The tools that do animated GIFs include Microsoft GIF Animator, Alchemy GIF construction set Sausage Software Hot Dog Pro HTML editor and many others I'm sure. I used Microsoft's GIF Animator, simple and small.

Here are some links about animated GIFs:
Graphics

If you find an animated GIF on a page that you like, you can save it off just like any other picture. Just press your right mouse button on top of the image and select save (assuming you are using Netscape of Internet Explorer).

Transparent images

Ever been on a page and instead of having a square edge around a picture the picture seems to blend into the background on the page? This is done by defining a color as transparent and the browser allows the background to shine through this color. The picture is saved defining the transparent color. Various image viewers support transparent images. One such package is Web Image

Progressive or Interlaced GIFs

Ever seen a picture slowly come into focus? These are called progressive or interlaced images. Currently the most common are GIF89. Progressive JPGs are also coming, however GIF89 are more common. To create a progressive GIF simply load in the image and save it as interlaced or progressive GIF89. Various image viewers support these. One such package is Lview

Making your own digital images

Everyone wants to have original pics for their web site. Doing so can be done is a lot of different ways. Making bad or average quality pics is easy. Making professional quality pics on the other hand is quite difficult. There are lots of hidden catches waiting for you.

Color Depth of pics

Color depth is probably over focussed. Any depth greater than 24 bit is probably not appreciated by anything but the extreme viewer. Lower than 24 bit is a personal call. Anything less than 16 bit however creates poor quality images with plenty of distortion to the pic. 24 bit means 16 million different colors available for your picture. 16 bit means 64 thousand different colors.

Sources of images

Digital images can come from digital cameras, video capture cards, scanners and probably a few others. Here are my experiences on these.

Digital Cameras

The latest craze to catch the gadget meister in you these are largely toys. Unless you spend a fair bit of money (more than $1000) the quality you get is only fair. Definitely not the quality pics you see from the pros. This may be Ok, it is up to you. The easiest way to determine the quality of the camera is check out the optics on the front of the camera. Does it seem like it has as much optics as say a normal camera? If not then do not expect much. Close distances only, (sub 3 feet) and only average quality. Checkout the size of the pics the camera cab take.

This is changing and will get better over time, but right now my opinion is ... toy.

Expensive digital cameras can produce excellent pics.

Video Capture

These are becoming more and more common. Snappy, TV tuners and the like all offer this type of capability. I actually have the ATI TV tuner which allows full motion and still capture. The quality you will get from these is at best average. The two largest limitations are image size, and overall quality of the pic. Face it cable TV and video analyzed at a frame by frame level is not the best quality. One of the determining factors here is the amount of motion on the screen at the time of the capture. Greater motion means blurry pics.

Scanners

All scanners are not created equal. In the past I believed that the more you pay the better you get. After living with a VERY inexpensive Microtek Scanmaker E3 for 2 days, I am sold and in fact personally bought one. This scanner has caused me to totally rewrite this section!

DPI resolution is actually not the most important of the parameters. 300 is really quite good. Scanners often quote a simulated or interpolated DPI rather than an actual optical DPI. Personally I think this is a farce.

Scanners have come a long way in the last two to three years. Older scanners lack TWAIN compliant drivers needed to deal with non-proprietary code. Scanners tied to one specific image editor are really limited by the quality of this ap.

TWAIN (jokingly referred to as Technology Without An Interesting Name) is an industry standard scanner independent interface allowing the end user to use any graphics editing package they choose to work with the scanner.

Scanning photographs, magazines and newspapers

Scanning photographs is actually the easiest and most satisfactory. The reason is actually quite simple. Photographs are quite high resolution making scanning, even blowing the image up, the easiest.

Scanning magazines and newspapers is actually quite a bit more difficult. The resolution of newsprint is especially low. Most scans I have tried of magazines and newspapers and been dissatisfied with most. Definitely not professional quality. Recently I got the pleasure of playing with a Microtec Scanmaker III. (600x1200 DPI) and now my Microtek Scanmaker E3. The twain driver for these scanners includes an option to correct for newsprint and magazines. Using this option makes all the difference in the world. The scan is done a little differently (you can tell by the sounds coming from the scanner) and then the image is post processed to remove the screen effects as the program calls it. This post process is time consuming. The amount of time this run takes is VERY sensitive to the DPI. Keep it to 300 DPI Max. You can also control the drive used by the TWAIN driver. I created a RAMDRIVE and made it the temporary drive. I then insured that the size of the scan was less than the size of the RAMDRIVE, This dramatically reduced the time this post scan run took. I have been able to make professional quality images! Newsprint is still not perfect, but very good!

I recommend you always scan the image in a mode that ends up with two to three times the size of the desired pic.

Here is an excellent example of the quality of images this scanner is capable of. This image is large 469KB. Scanned at 300 DPI with a descreen of magazine turned on. The image is from a calendar. Check it out!
For more scanning tips checkout Wayne's scanning tips.

New Parallel Scanners

Scanners have really changed over time and the price of them has come dramatically down. I have one of the older Microtek Scanmaker E3 SCSI scanners. I like SCSI, but installation requires opening the system to add the SCSI card and they are a little more expensive. The new trend is to very inexpensive parallel port scanners. I had a chance to play with one of the new Microtek V310 paralell. Installation was a challenge requiring 1.5 hour support call with Microtek. Tech support person told me that they have seen tech support times increase since moving to parallel. Not much of a surprise the parallel port is getting to be a busy place when you include Zip drives, printers, scanners, etc.

The main difference between parallel port and SCSI (other than installation which is a one time pain) is speed. And there is quite a difference. I scanned two images on these two scanners. First image was 4.5x6" 300 DPI 6.8MB postcard. The parallel required 100 seconds Vs 32 seconds for my SCSI scanner. Next I scanned a large 8.1x9.8" 300 DPI 21MB image. On the parallel this image took 300 seconds and a stunning 50 seconds on the SCSI. Quite a difference.

Editing the image

The software used to edit the image is actually as important as the scanner or camera. There are a lot of bad things inexpensive graphics editors do.

The first bad thing to watch for is some of the editors save the picture in the color depth that the PC is in when the save is done. This without warning you. So you start with a nice 24 bit pic, save it after editing it and boom 16 million colors becomes 16 ... yuk.

Next bad thing that can happen is when you resize an image. Good programs resample the pic. If the resize takes place immediately it probably did not resample.

Image formats

All image formats are not created equal. Image formats include some form of compression of the data. Uncompressed image formats include TIF and BMP. Uncompressed images would slow download and chew up space on the web server. Compressed image formats include IF and JPG.

There are two types of compression loss less and lossy. Lossy means that the image after the compression is not the same as it was before the compression. The difference may no be noticeable. Completely Loss less compressions generally only achieve two to one compression.

GIF is considered los less, while JPG is lossy. The amount of loss is controllable by the graphics editing program. Higher compression means smaller file sizes, but it also means more lost data. Most inexpensive graphics editing programs do not allow the user to choose this. I personally can tell the difference on some pics.

Image Maps

Ever been on a page and seen an image that when you move your cursor to various places on the image the pointer changes to different URL locations? These are called image maps. There are more than one way of doing these. I'm going to tell you how I do it. I create a catalog for example, however you can do this using any image. Then you define the area that will make up the link to the specific site you want. The easiest way to do this is using what is called client side image maps. The definition of the coordinates and the URL to those coordinates is in the HTML for the page you are on.

Many packages will allow you to generate the client side image map. These include Sausage Software Hot Dog Pro HTML editor Mapthis and Luckman's Web Edit to name just a few.

Background Pictures

This one is simple a tag simply tells the browser to put the image on the background of the page. The tag is
BODY BACKGROUND="OS2WARP.jpg" bgcolor="#ffffff" for example.

Background Sounds

This one is also simple, a tag tells the browser to play the wav or midi file. The tag is
bgsound src="http://www.burgoyne.com/pages/chas/intro.mid" loop=infinite

Rating your site

The internet has become an unfriendly place for our children. Innocent searches such as diving, beaver and other common words often yield distasteful information. I have certainly ended up places I did not want to be. It is important as web masters that we accept the responsibility that is ours!

Rating systems are really not all that difficult to understand. There are a number of different types of rating systems, none of which are perfect. The PICS system requires you the web master to rate your site according to a number of different categories. The two systems I have checked into are . These are not the only ones, however they are the ones I have checked into so far. You follow the link, select rate your site. Answer a few simple questions as to content on your site and an HTML insert for your web page is generated. You include this in you web pages and the browser if so enabled will block children from places they ought not to be. That said here are my suggestions for how to achieve this:

As a parent I thank you for taking the time to rate your site.

Oh ya, just in case you did not know, MS Internet Explorer includes ratings for RSAC and SafeSurf can be added simply. Yo Netscape ... wakeup!

Putting a counter on your page

Once you put a page out there you really need to get some feedback. People in general will not email you. Ok, I said it ... So given that the way you can tell what you are doing right and wrong is by tracking your hit rate to your page. Check with your provider they may offer this service. However, if they do not (and most don't) then you will need an alternate way. The easiest (and it's free) is to use Web Counter. You go to there site. Register a counter with them. They will give you an HTML tag that you put in your page. Then each time someone hits your page the graphic is pulled from Web counter and that is the way they track your hit rate. Really works quite well. It can however be one of the reasons you page is slow to load, Web counter does get busy.

Here is another site offering Free counters.

How do people find my site

There are many opinions on this one, however I'll give you mine. Here are some ideas:
  1. each of the Web search engines listed on my homepage have an add a URL section. This is free! You fill out some question, wait a little bit and then your site can be found easily. However this is not the end. There are many other ways pf getting the word out.
  2. usenet news groups can be used to announce your web site. Place the URL on the bottom signature of any appends you put in the usenet forum. Be careful though this can be more trouble than it is worth. Some providers have asked that sites be closed down from too much traffic.
  3. one technique that I use is when I find a site that I am going to add to my site, I email the web master. This is a courtesey anyway. From there I mention that if the web master would like to add my site that would be fine.
  4. there are lots of other sites probably on the same topic as yours. You can think of them as competition, but why not think of them as allies. Send them an email, maybe they might put a link to your site for people that want more information.

Frames

Frames can make a site look much better. I recently converted my site over to frames. The best way to think of frames is that there is one HTML page for the definition of the overall frames layout of the page. Then there are HTML pages for each section or area of the page. Links to other pages can go specifically into an area of the frame or to another window or replace the existing window. The choice is yours. There are some non-obvious side effects to frames. Because there are separate pages for each area of the page, the number of pages you have increase. This effects your ratings which may be specific to the page, and can also effect the search engines. You may need to add each section of the frames to the search engines.

Administration

Web pages are not static. Static web pages, those who do not change often, are useless. There are administrative details you need to consider as a Web master:

Themes

Themes are all the rage on the Web. So what are themes you ask. Themes are a collection of Windows settings including pointers, colors, icons, backgrounds and screen savers. All these could be changed manually in Win3.1 In Win95 MS brought out an add on for Win95 called Plus. For 60 bucks you got themes which let you change all these setting with one click and a task scheduler. Whoopie. There is an excellent program available from here called Desktop Themes that also does this. It is shareware so you can find it around the net.

Creating Themes

Creating themes is simple. They are text. However there is an excellent themes editor available on Windows 95. Just search on themes edit.

Creating Icons and Animated Cursors

Ever seen a pointer or cursor that was animated? This is quite easy to do. If is simply a series of pointers tied together into an animated string called an ani. There is an excellent program for creating animated icons and cursors calledMicro Angelo. This program will let you start with bitmaps and convert them to icons and lots of other neat tools. Really a great program.
Homepage

Adding a Java Clock to your page

To add a clock just like this one you simply have to copy the HTML below this line into your page. To see the HTML select View, and then Source on Netscape or MS Internet Explorer.

Allowing your users to register and receive email when you update

Once again simply View, Source and copy the HTML just below this:

Would you like to receive email when this site updates?


Email me