MORE ABOUT THIS SITE
 



Check out About This Site for our statement of purpose and legal mumble jumble.

Read a little About Us in the Background section.

Navigate anywhere on this site using the Site Map.

 
     

   

The Making of FinchAviary.com - The Website

Development Tools | Equipment | Web Site Design

Wow. If you are here, you must be really bored! I would have thought the word "Technical" in the link would have sent you running for cover. Did you run out of interesting stuff to browse on this site? Or did you just click the link by accident? What did you think you would find here? Is there anybody (besides me, that is) who visits a site and says, "I wonder how they did that? I wonder what tool they used? I wonder why they did it that way?"

I don't know. But what the heck? I'm here to share my experiences, and this web site has been part of my finch experience. So, here is the how and why of FinchAviary.com. Please keep in mind that although I am a software engineer by trade, I am less than an amateur when it comes to web development and design. My web education consists of a few beginner HTML books and some pretty good books on Perl and CGI. My artistic and page layout skills are nonexistent. Experienced web designers will probably get a good laugh out of this. But if you are new to web development, you might find something useful here.

And if you couldn't care less about any of this -- oh well. You didn't have to click on the link, now did you? Get that click-happy mouse under control and visit the pages that actually mean something to you! Here's your ticket out of this nightmare: Take me back home, please!

Development Tools

HTML Editor
This site was developed using Macromedia DreamWeaver 4. DreamWeaver allows you to work with your web pages graphically, which makes it easier to lay your page out and to create a pleasing look. Many developers are strongly opposed to using a graphical interface for web design because the HTML generated by such software tends to get ugly. I found the source generated by DreamWeaver to be pretty clean, but you can look at it yourself and decide.

I recommend you learn a little about HTML before working with an editor. Although DreamWeaver makes generating HTML very easy - you probably won't know what to do with it unless you understand the basic elements behind HTML. The good news is that the basics are not very difficult. HTML is just a way of tagging text so that it can be represented in a special uniformly formatted way across browsers of very different systems.

Site Management
In addition to using DreamWeaver as an HTML editor, I also take advantage of its site management capabilities. A site management tool will automate tedious tasks such as updating links when you move or rename files through its site management interface. It also can check for broken links on the site and can handle transfer of files to the web server.

FTP
FTP stands for File Transfer Protocol. This is the means by which you can transfer files from your local PC to the web server, where they can be viewed by others. I use DreamWeaver to accomplish this task for any of my HTML files and graphic/video/audio files.

I use WS_FTP PRO to transfer CGI/Perl scripts in text mode or to do large batches of file transfers. A trial version of this software is available for free download to home users. Text mode must be used to transfer Perl scripts because of the difference between the way Unix and Windows handle the end-of-line condition. I found WS_FTP PRO to be more reliable than Dreamweaver when transferring large numbers of files at once.

Note: CGI/Perl scripts are programs that are designed to run on the web. They are useful for any form-based logic (eg, guestbooks, surveys, comment forms, etc). Your web server must be set up for running Perl scripts in order to use these on your site. Creating these scripts takes a little programming knowledge, however.

Graphics Editing
I've tried many different graphics editing programs for creating and editing the graphics and photographs that appear on this site, including PhotoShop, Paint Shop Pro, and Macromedia Fireworks. At first, I found these programs difficult to work with. After studying photography for a little while, however, I have taken a strong liking to Photoshop CS. It can make even my pictures look decent. It has a pretty large learning curve associated with it, however. A limited version of Photoshop, called Photoshop Elements, is available at a much lower price (around $100) and can do many of the things that Photoshop can, if you want the power without the excessive cost.

For those of you who want an easy photo editor, I originally had used Microsoft Picture It! Publisher Platinum Edition to touch up most of the graphics taken during the construction of the aviary. I originally purchased this program for creating photo album pages from my digital camera pictures. It took a little getting used to, but once I was familiar with it, I found that I could create web graphics and touch up my photographs much more quickly with this tool than with any of the others (I do not use it's web page generator, however). Be warned: it is a Microsoft product and has its flaws, including periodic system crashes, even on top-of-the-line equipment [only when it's really important, of course]). Still, Picture It! is capable of producing some rather sophisticated photo effects using a simple interface at an inexpensive price (inexpensive is the key word here). If you are a graphics guru, you won't want to abandon your tool of choice, but if you are not comfortable with those high-end tools or don't have the budget for them, this program might address your needs.

Webcam Software
We are currently on our second generation webcam. The first webcam used a free program called TeVeo VIDiO Suite to run my webcam. I chose this software because it was one of the few webcam applications that allowed streaming video to be viewed through the firewall at my office. It also was capable of producing some pretty quick frame rates, even when you logged on with a dial-up. In addition, it did not enforce any advertising other than a link to their page - no annoying slow loading banners and no pop-up ads (I will not use any tool or service that inflicts a pop-up advertisement on my visitors). However, TeVeo support gradually declined until it was non-existant and their site was hacked from time to time. Eventually they went away altogether.

Another decent free streaming webcam alternative is Camarades. I can view their video from behind the firewall at work, but they popup an advertisement for their site (a FinchAviary.com no-no). Clicking on the video also takes you directly to Camarades site. In addition, video stops transmitting after a certain time limit. I did not care for these nuisances, so I opted against using Camarades to handle my webcam.

I've heard of the possibility of using Microsoft Windows Media Encoder for streaming video, but I haven't had the opportunity to look into this alternative. I am not sure whether this option would accommodate visitors who access the website via a Mac (knowing Microsoft, somehow, I doubt it).

The second generation webcam was a network webcam. The webcam is a server unto itself and has its own internal software so that no additional software is required to run it. In fact, you do not even need a computer to run the network cam.

Video Editing
Video clips were edited and rendered with Pinnacle Studio DV 8. I highly recommend this software for novice home videomakers. Of the consumer-end video editing packages, I found this one the easiest to use, producing the most polished results (other products I've tried include MGI Videowave and Ulead's Video Studio). Higher-end packages, like Adobe Premiere, are very expensive. I've used Premiere and it has some pretty cool effects and capabilities, but the learning curve is steep and it crashed my system a bit. For my personal stuff, I don't really need that level of sophistication.

Equipment

Photographs
Photographs of the construction of the aviary were taken with a Canon PowerShot S100 Digital Elph camera. Size and/or Resolution was reduced for faster web-page loading. Alternatively, video frames were grabbed from a Canon Ultura or Canon ZR40 MiniDV digital camcorder for use as still pictures on the web site. While the resolution of the video camera is not as good as the digital camera, the output is still high enough quality for web page use.

Newer photographs, including photographs of the birds, were taken with a Canon Digital Rebel (300D). Again, size and resolution were reduced for faster web=page loading.

Videos (MPEGs)
Videos were recorded using a Canon Ultura MiniDV or a Canon ZR40 digital camcorder and captured using Pinnacle Studio DV Firewire capture card (included with Pinnacle Studio DV software).

Webcam
The first generation webcam was a Logitech QuickCam Pro 3000 webcam . This is a USB camera. In order to connect the webcam in the aviary to the server in our basement, 2 USB active extension cables were required. USB technology limits the length of a USB cable to 5 meters (about 15 feet). In order to supply enough power to transfer data over greater distances, a hub is necessary. Each active extension cable contains a built-in single-connection hub. If active extension cables or hubs are not used, the device may not work. Since streaming video means transferring large quantities of data, we decided that we should not risk any other cabling and we shelled out the bucks for active extension cables (they cost about $25-30 a piece).

The second generation webcam is an Axis 205 network camera. This webcam has a built-in server, so it does not even need a computer to run (it has a small computer inside the cam instead).

A note on streaming webcams
Here's a little info about how streaming webcams work, since it is quite different from those that just update an image every so often. A regular webcam is programmed to take a picture at given intervals. Those pictures are then uploaded by the webcam software to a location on your webserver where the user will be able to see the most recent picture uploaded. Sometimes, a java applet or something similar will run on the page to refresh the image, saving the visitor from having to reload the page.

That works great for images that are not refreshed too often, but it does not work so well when you want fast frame rates. This is because the image needs to be uploaded from your computer and saved onto the web server, then accessed (downloaded) by the visitor's computer, and all this while refreshing at a fast rate. Streaming video is possible because it eliminates the middleman (the web server) and sends the images directly from your computer at home to the visitor's browser, without it ever needing to be saved anywhere other than your PC. This is accomplished through the webcam software (first generation software was TeVeo VIDiO Suite, second generation was software or firmware loaded on the Axis 205 camera) and a page that is found on your web server that accesses a page on your computer at home via an open port. The page on your home computer includes some Javascript that makes everything work right. Or an applet is loaded on the viewer's PC when they access the camera for the first time. This, at least, is my understanding. Fortunately, the software handles most of the dirty work for you.What you do need to understand is that when a visitor opens your webcam page on your webserver, the user is redirected to your personal computer to view the image. Your Internet connection will then be used to upload the image to the user's browser. Thus, the frame rate is limited by the speed of your connection and the speed of the user's connection. Plus, the more people viewing the cam at once, the more taxing the transfer will be on your Internet connection, affecting frame rate.

Web Site Design

When I decided to create this site, I created some ground rules to ensure my site would live up to certain standards. Although this is just a personal site, I wanted it to have the feel of a professional one. I knew that wouldn't be totally realistic since I am not a web developer by trade, and particularly because I lack skills in the field of graphic design. But there are certain things that I could do to ensure my visitors a pleasant experience.

Advertising Policy
You will find no commercial advertising on my site. I do provide links to sites that sell finch-related products because I know how difficult it can be to find some of these things. But I have no financial interest in any of these companies, nor do I receive any compensation for promoting them. I do not make use of loud or annoying graphics to link to such sites. It is not my intentions to boost the sales of any business - only to help you find what you might be looking for. It makes no difference to me where you buy your supplies from as long as you find what you are looking for.

At times, I take advantage of a free product or service provided by another company. For example, PicoSearch used to fuel my site search tool. TeVeo VIDiO Suite used to run my webcam. Part of the agreement with such companies usually involves including a link to their site. This is the only type of advertising you will see here. Note that I replaced the PicoSearch search tool with a script because they began inserted flagrant ads onto the results page.

I will not use any product or service that inflicts an advertising banner on my site. I've found that the banners often incur significant download times. And on a personal level, I find them to be annoying and distracting, and I disapprove of some of the deceptive techniques used to get a user to click on them.

Finally, I will not use any product or service that imposes a pop-up advertisement on my site. Pop-up ads are my biggest pet peeve, and you will never see one originating from this site, I promise.

This being said, I have no influence over the external sites that I link to. While you will not see banner advertising or pop-up ads on FinchAviary.com, you may run into them when following links from my site to external sites.

Domain Name
A domain name is an inexpensive way to give your site a little more polish. In reality, it only means that you pay a few bucks a year for the right to use the name, but it carries with it a positive reflection on your site and the connotation (real or imagined) that you are really serious about your subject. Most importantly, it helps visitors to remember your URL. Thus, I registered FinchAviary.com as my domain name.

Perhaps the greatest benefit to registering a domain name is that it is not tied to any particular hosting service. Should I decide to change to a different web hosting company, my URL will stay the same. Thus, visitor's bookmarks will still work and the switch would be transparent to everyone but me.

Navigation
One of the biggest challenges for me was to design a navigation path that would make it easy for guests to find the page they are looking for. I find it frustrating to know that the information I am searching for is available on a particular site, but I just can't seem to find the right page. I've worked exceedingly hard to make it easy to find the information or page you are looking for, but I realize that I still have miles to go. I will keep trying to improve this aspect, but I've found that the more information you have, the easier it is for topics to become buried. The more accessible I try to make them, the more cluttered the interface becomes, the more difficult it is to navigate again. It is a real catch-22.

To assist in navigation, I've provided the following features:

Top Menu - This is a pretty standard interface. I've divided the content of my site into major categories. Links to the main page of each category can be found in the form of buttons spread across the top of each body page.

Table of Contents - Because many of the major categories have subtopics, the first page of each such category is a Table of Contents, detailing the subtopics covered within. Every page within the category can be linked to from the Table of Contents page.

Sub Menus - Each body page within a given category contains a submenu consisting of text links to the other subtopics in that same category (so you don't have to go back to the Table of Contents page to jump to another topic within the category).

Previous/Next/Top Buttons - Because I seemed to have a lot to say on certain topics, I decided it was prudent to break them up into shorter pages. To keep the continuity of one article topic spread across multiple pages, Previous and Next buttons are used on these pages to advance to the next page once you've reached the end of the current page. Previous and Next buttons will take you from first page in a given category, to the last - so if you don't want to miss anything in that category, navigate using the Previous and Next buttons. A Top button was also provided to take the viewer immediately back to the top of the page without needing to manage the scrollbar.

Site Map - I've provided a site map that contains links to every page on my site from one location. The site map orders the pages under their categories, to help visitors understand how the site is organized. If you are having difficulty finding what you are looking for, I recommend checking the site map, as every page on the site will be linked to from there.

Search Engine - I've added search engine functionality to this site to allow my visitors to find any page containing a given text string. I used PicoSearch for a while, but removed their service when they started advertising on the results pages. It took me a while to find a suitable replacement. I now use the Perlfect Search script to index and search my site.

Highlights and What's New- There are certain pages that I believe help make my site unique and that may be of special interest to visitors. These pages are linked to from the Highlights column on the home page. That way, one does not have to dig through all the content on the site to find these special sections. Links to these topics also appear periodically throughout the site, in places where they fit the context and are more likely to be of interest to the visitor. Any new additions to the site are listed on the What's New page.

Frames
The original design used frames. After giving the site a make-over, the frames were removed. Experience has taught me that while frames can be cool, doing without frames leads to a cleaner design. It also makes it easier for search tools and search engines to scan and map pages correctly.

TOP

 

 

   



HOME | CONSTRUCTION | CARE | BIRDS | ACCESSORIES | BACKGROUND
AVICAM | GALLERY | GUESTBOOK | LINKS | SEARCH

SITE MAP | DISCLAIMER | CONTACT US
(c)2004 FinchAviary.com