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
- You will of course require a way to capture the video into the computer.
The ATI TV Tuner card I have for example will do the trick. It was cheap
$100.
- You will need quite a bit of space free on a fairly fast hard drive
to insure that you do not drop frames.
- A Pentium is really required to be able to encode the files in a reasonable
amount of time
- lastly you will require a program to do the editing/encoding. I recently
discovered and love Corel Lumiere. It is cheap $79 US.
- perhaps a CD-R to master your video to CD.
- of course the most important thing you will need is ... TIME and a lot of it!
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
- size of frames Common sizes of frames include 80x60, 160x120, 240x180 and
the largest common size is 32x240. This will have a VERY dramatic effect on tbe
size of the file created.
- frame rate which refers to the number of frames per second captured.
This is really a function of the amount of motion in the video you are trying
to capture. TV is 25-30 fps, however I have captured even high motion sports
videoes at 10 fps and been VERY satisfied with the results. In checking a number
of what I consider to be good quality professional videoes and most of
them have been done at 8 fps.
- color depth I recommend no less than 256, and prefer 16 bit
Audio Parameters
- mono or stereo
- sampling rate CD quality is 44.1 KHZ which is massive overkill for
most videoes
- sample size CD quality is 16 bit which really makes a fair bit of
difference
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:
- register your site with the most common ratings, then come back and
cover off each individual page
- be careful with the email sent to you. Getting the html that you should
put on you page after the fact is a manual and painful process
- be careful in rating your site, once again changing this is a manual
and painful process
- just do it. It really should not take a lot of time and it is worth it
to keep our kids safe!
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:
- 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.
- 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.
- 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.
- 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:
- link management
the location of web pages changes. Over time you must find a way to validate your links on an ongoing basis.
I recommend at least once a month. Nothing is more frustrating than getting to a site and having a dead link. If
you run into a couple of them your customer may just leave without trying the rest! Companies reorganize there web sites
web masters change internet providers and web masters decide simply to stop publishing a given web page. The net is you
must validate your links on an ongoing basis.
See my
list of my favorite programs for a suggested program to help with this.
- remember to spell check you pages.
- remember to check the syntax of your Web page
Browsers are very forgiving to HTML syntax errors. Browser often crash, maybe the two are related, maybe they
are not, however I recommend you always check the syntax of your page before publishing. Browsers will
interpret syntax error differently, so beware.
See my
list of my favorite programs for a suggested program to help with this.
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