Art by Marilyn Califf

<<< Return to Art Gallery
Get your own Art Gallery!
Request free estimate

Owner's Guide
(for the artist )

Designing this site

System Flowchart

ASP module details

Database Specs

About this Online Art Gallery
------------------ Introduction ----------------
The old Web site that preceded this one had several problems and limitations. First, the old Home page took nearly two minutes to load via a dialup line! Secondly, the site owner (the artist) needed periodic changes to her online catalog, but could do nothing but call her Webmaster and wait patiently for changes to the hardcoded Html files.

See Designing this site for a discussions of how these and other problems were solved during the redesign. The old Home page may still be online here or here

The new Web site that you're exploring now allows the artist to make changes to her (or his) catalog at any time via the Web. And the new Home page loads in about 15 seconds, instead of two minutes! Many other improvements and enhancements were made. (In programmer's terms, the new site is a dynamically generated, database driven, content management system.)

Visitors to the site follow a sequence of Web pages that guide them through the online Art Gallery by:
1. First displaying the existing art categories, and offering a link to each one.
2. Then displaying the selected category, and offering a link to individual images.
3. And finally displaying a large image of the selected work of art.
( In programmer's terms, these Web pages are dynamically generated from a database via ASP and VBscript, using a "drill down" technique to let the visitor explore the database content. These modules could be modified to display any kind of image, for example products, or photos of church members.)

The heart of the system is a program that lets the user (the artist) make changes to the database via the Web. (In programmer's terms, this is a single, re-entrant ASP / VBscript module that handles all of the standard database functions for one table: List, add, change, and delete. Only the site owner (the artist) has access to this program. This module could be changed to handle any Microsoft Access or Sql Server database . Standardized JavaScript routines are used to validate Html form data.)

The author personally built all four modules from scratch, and hand coded them without the use of any Html editor or Html generator. All are good examples of my high quality standards for program code: well organized and structured, clean and easy to read, and well documented. (Source code can be requested from the author via Email)

go to Top

Designing this site
This article explains how the new pages for the site "Art by Marilyn" were redesigned. The old Home page may still be online here or here
If you're on a dial-up line, be patient!

------------ Problems found -------------

As I looked at the old Home Page, I felt it had several problems.......
1. The page loaded very slowly via a dialup connection - almost 2 minutes!
2. Space was wasted, especially on the critical top half of the page.
3. Redundant information wasted additional space on the left.

4. The page lacked a focused message .
5. The page gave a misleading impression of what is was about.
6. Marketing was weak - almost nonexistent.

7. The color scheme was confusing and distracting.
8. The page couldn't be resized.
9. The page couldn't be printed.

------------- Analysis and solutions ---------

1. The Home page was very slow to load via a dialup connection - requiring almost 2 minutes! This is a big problem because every customer counts! On the Web, many people still have a relatively slow connection, and grow impatient while waiting for a page to load. Often they'll leave before ever seeing it!
The main problem was that the old Home Page contained many images, one quite large. My task was to determine which images were necessary, and which could be eliminated or reduced in size. There were 4 types of image on the page ......

A. Art to be sold - these sample images were obviously important and could not be eliminated or shrunk. Therefore, all were kept as-is. Categories that contained the most items were moved to the top of the page.

B. The big photo of purple flowers across the top of the page was the biggest problem. It looked nice, but did not deliver any clear message (to me). In fact it seemed to say, "This site is about the photography of flowers" (See problem # 5) This image also wasted a lot of space on the page. (Problem #2.) However this image did provide a color scheme - which was already picked up by the purple background at the lower right of the page.
The solution? I kept the image, but shrunk in to a narrow bar across the top of the page.

C. The logo - the image of "Making Art by Marilyn" at upper left was ok as a logo, but took up a lot of space (Problem #2), and helped shove the important images of art so low on the page that they were not visible if the visitor did not scroll down. Visitors might leave the site before they even saw the art !
The solution? I shrunk the image and colored it purple to match the color scheme. (An even better solution would be to use plain text if the font style is not critical. Comic Sans MS is similar.)

D. Images on left side of the page. These were very confusing to me, and might be to others. Did these images link to photos of flowers? (Problem #5) I finally realized that these were redundant links (Problem #3) that went to the same destination as the art photo links. In other words, the whole left side of the page was unnecessary.
The solution? I eliminated the links and images on the left. This opened up vital space that could now be used for additional marketing functions. (Problem #6) The elimination of these images also helped focus attention on the photos of art for sale (Problem #4), and helped simplify the color scheme. (Problem #7)

Conclusion to problem #1. The old Home Page took nearly 2 minutes to load via a dialup line (at 3-5 K per second). The new page loads in 15 seconds - eight times faster. While working on this time delay problem, several other issues also got solved.

----------------- end problem #1 ------------------
2. Much space was wasted on the page, especially on its critical top half.
Already solved while addressing problem 1 above.

3. Redundant information wasted additional space on the left side. (The same links were listed in 3 different places on the page). Solved while addressing problem 1.

4. The page lacked a focused message . The only hint of the site's purpose was the words "Art for sale" - in very small letters, barely visible halfway down the page.
The solution? On the new Home Page I placed these words higher up on the page in much larger letters, and in a bold color against a dark background.

5. The page gave a misleading impression of what is was about.
Already solved while addressing problem 1.

6. Marketing was weak - almost nonexistent. The old Home Page basically just displayed the images of art, and was very "low key" about even saying they were for sale. (Problem #4)
The solution - the new page states this clearly, and offers the visitor specific incentives to buy.....
* "Why invest in art?" explains the value and benefits of owning art work.
* "Services" enhances the artist's income opportunities.
* "About the artist" "introduces" the artist to the buyer in a personal way. People want to know who they are buying from, and might buy simply because they like your perspective or personality. This could link to a new page with a photo of the artist and a short biography.
* "Artist supplies" and "Art galleries" are opportunities to "trade links" with other businesses. You send your visitors to their site with these links, and you request that they send their visitors to your site. This helps both of you do more business.

7. The color scheme was confusing and distracting. The old Home Page was dominated by a large purple background that did not complement the photos of art for sale.
The solution was to use a neutral dark gray background, which makes the art photo colors brighter by contrast. I then placed individual "mattes" around each art photo to enhance its specific color scheme.

8. The page couldn't be resized . Solved by stating Html table widths as a percentage of the screen width, rather than stating a fixed size in pixels - wherever possible.

9. The page couldn't be printed . Partly solved in #8 above. Printing is now better, although pages with images rarely print well no matter what you do.

go to Top

ASP module details
Index.asp selects records from the Image database using the following SQL statement : "Select * From Images Where ImgSequence=0 ". This selects only the category header records, and we list their content across and down the page - primarily a "best sample image". The individual links to each category all call the same module - "Index2.asp", but pass to it the specific selected category number.

Index2.asp uses the category number passed from Index.asp to "Select * From Images Where ImgCategory= (..... the passed value.....)" The links from this page to individual images all call the same module "BigImage.asp", but pass to it the ImageID (unique key) of the selected record.

BigImage.asp uses the ImageID passed from Index2.asp to "Select * From Images Where ImageID=(...... the passed value .......)". This module can be made to display a large image, a small image, or both - depending on control values passed to it.

FileMaintenance.asp is a single re-entrant module that handles the four basic functions necessary with any data file:

List - selects all records from the Image database, and lists them in order by Category and Sequence number. Only a few important fields are listed, along with two selectable links to Change and Delete. Clicking either link re-calls FileMaintenance.asp, passes a control code for what to do next, and the RecordID (unique key) of the selected record.

Add -inserts a blank record into the database, and captures the "autonumber" generated RecordID field, which it passes to the Change routine - along with a control code that says "change".

Change - uses the RecordID passed to it to generate an Html form, pre-filled with the current contents of the database record (all blank or zero if this is a newly added record), and a hidden field with the RecordID. The form submit button first executes Javascript validation routines, and then re-calls FileMaintenance.asp, passing to it all the data fields (whether changed or not), the hidden RecordID, and an instruction to update the record. Then control is passed back to the List function.

Delete - uses the RecordID passed to it to do the delete. Then control is passed back to the List function.

go to Top

Database Specs for table: Images

Most fields contain non-critical info for display - none are required.
In "category header" records (ImgSequence=0), * = a valid field, other fields ignored.

Field-Name Data-Type Expected-Usage Comment

ImageID AutoNumber For use by programmer

* ImgCategory numeric 1-1000 Primary list sequence

* ImgSequence

numeric 0-1000 Secondary list sequence
0 value indicates category header record

* ImgTitle Text 40 char * If seq = 0, holds category title
If seq > 0, holds image title

QtyOnHand
numeric < 100?

QtySold
numeric < 100?

Price
Currency <$3000

* ShowVisitors Text Y,N * If NO, and seq = 0, whole category is hidden.
If NO, and seq > 0, this image is hidden.

Media
Text 20 char

Height numeric 99.9 Height of original

Width
numeric 99.9 Width of original

Depth
numeric 99.9 Depth of original

For display on left side of page ......

* AboutText Text 255 char * If seq = 0, "About category"
If seq > 0, "About image"

* SmallImage Text 40 char * If seq = 0, link to best of category - small
If seq > 0, link to any small image

SmallWidthPX
numeric 999 Displayed width in pixels: 50 - 250

SmallHeightPX
numeric 999 Displayed height in pixels: 50 - 250

BigImage
Text 40 char Link to big image (auto generated)

BigWidthPX
numeric 999 Displayed width in pixels: 250 - 550

BigHeightPX
numeric 999 Displayed height in pixels: 250 - 550

Text1
Text 30 Border color

Text2
Text 30 - unused -

Text3
Text 30 - unused -

Number1 numeric 999 Big Image size in kilobytes (unused)

Number2
numeric 999 - unused -

Number3 numeric 999 - unused -

go to Top

go to Top

Owner's Guide
for your online "Art Gallery"

----------- Visiting a real art gallery -----------

Imagine a real Art Gallery where a visitor can walk into several rooms and see different types of art. There are two entrances: a public "front door" for visitors, and a private "back door" for the owner and employees. Pretend you're a visitor walking in the front door......

Your purpose is to quickly see what's in the gallery, decide what you like, and maybe purchase a piece of art. If you've been here before, you might be most interested in seeing what's new.

As you open the door and enter the lobby, someone welcomes you with a friendly smile, and offers you an attractive brochure with information about the gallery, it's owner, the artists, and their work. As you scan thru the brochure, you also find helpful suggestions on buying art, and - perhaps most important - you find a map of the building that shows what kind of art is in which room.

You choose a room to explore, and walk in. Standing in the center of the room, you turn slowly to look at each piece of art from a distance. One piece looks especially interesting, so you walk up to it for a closer look.

As you closely examine this one work of art , you consider what to do next:
1. You might mark it's title in your brochure so you can quickly come back and see it again.
2. You might decide to buy it now, and then walk back to the lobby to find a sales person.
3. You may look at the other art in this room.
4. Go to another room.
5. Or walk out the front door.

----------- Your online Art Gallery -----------

Browsing thru your online Art Gallery is like walking thru a real gallery, with a few differences. The visitors entrance to your online Art Gallery is a Web address. It takes you thru the front door and into the lobby - the first Web page of your site. Now you can go to different rooms - which we call categories. Individual images of your works of art are identified by a sequence number. Here are the new terms we'll use ....
Visitors entrance (public front door) = Web address of your site
Lobby = first page the visitor sees (Home page or List of Categories)
Rooms = Categories
Single images = are identified by a Sequence number

The initial setup of your Art Gallery has been started by your Webmaster. We've already built some "rooms", and "hung up" a few images of your art. Later in this Owner's Guide we'll show you how to add your own new images, new categories, or make changes. You'll be able to do this at any time from your computer at home - at no additional charge.

To "walk in" as a visitor , do these steps on your computer .....
* Start your browser (Internet Explorer or Netscape).
* Type in the "Visitors entrance" Web address, which is listed at the bottom of this Owner's Guide. Do not type any spaces.
* You should see the web page entitled "List of Categories". Look for this title at the upper left of the page just below your site logo. If you don't see this page, contact your Webmaster.
* If you see this page ok, save this link by doing an "Add to Favorites" or "Add to Bookmarks". Test this saved shortcut link by first typing a different Web address like "Google.com". Then come back to your Art Gallery by using the Bookmark you just saved.

Visitors see three main pages ......

1. The "List of Categories" page is the lobby, brochure, and friendly salesperson of your online Art Gallery. Hopefully this first page is attractive, welcomes your visitors, tells about you and your work, and offers some incentives to buy. This page is also a map of the rooms in your gallery, because it lists the title of each art category, and displays a "best sample image" for each one.
The numbers in parentheses (nnn, nnn) following the category title are the category number and the sequence number within the category. Note that all the sequence numbers on this page are zero, which identifies these titles as "category headings". Print this page on paper, then click on any image (or the link just above it) to choose a room or category to explore.

2. The "Single Category" page that you see next shows small images of the art in one room or category. Again note that there are numbers in parentheses that indicate the (Category, Sequence) of various items. The category heading across the top of the page has a sequence number of zero, but the individual images shown below have sequence numbers that are not zero. Also notice that the images are shown in numeric order from left to right across the page, and then top to bottom. Print this page on paper, then click on any image (or the link just below it) to request a closeup image.

3. The "Single Image" page. As a visitor, you're now examining an enlarged "close-up" of one work of art ........
1. You might mark it's title in your brochure so you can later find it quickly. (To help your visitor do this, we may someday add a "shopping cart" feature to the Art Gallery.)
2. You might decide to buy now, and need to walk back to the lobby to find a sales person. (You as a visitor do this by clicking the link at the upper right of all pages that says "Email the artist". Email is probably the cheapest and simplest way to handle a low volume of purchases. You don't need any fancy or expensive software.)
3. You may look at the other art in this room. (By scrolling up and down.)
4. Go to another room. (By clicking the "Home" link.)
5. Or walk out the front door. (By going to another Web site. There's no way to stop a visitor from leaving, but it would be helpful to first get their name, Email address, and maybe their comments and suggestions. Later, we may add these features also.)

------------------ Your Art Image Database -----------------

A filing system called a database contains the text information your visitors see, and controls the sequence in which images are displayed. Visitors can only SEE the database info, but cannot change it. You can do both.

To list or change the info in your Art Image database, first start your browser if you haven't already done so. Then type in the "Owner's entrance" link at the bottom of this Owner's Guide. (If it's not listed, ask your Webmaster.) Save this link as a Bookmark or Favorite, because you'll need it again. This link starts the "Art Database Handler", which automatically prints a "Database List" that looks like this ....

Category	Sequence	....Title....	Image-Name	Show	Actions
nnn	nnn		(Filename on disk)	Y	Change Delete
nnn	nnn		(Filename on disk)	Y	Change Delete

Add New Record

Each line across the page shows one "database record" - which contains information about one image. Note that each database record "points to" an actual image - which is stored somewhere else - by using the "Filename on disk". Print this "Database List" on paper, and compare it to the 3 pages your visitors see. Note that you and your visitors see the same categories in numeric order, and - within each category - the same sequence numbers. Also note that the first sequence number in each category is zero, which identifies this as a category header.

------------ Changing Database information -------------------

To change what your visitors see, you change the information in your database, using your "Art Database Handler". Notice that on the "Database List", at the far right of each line, there's a link to Change or to Delete the information on that line or "record". At the bottom of the list you see a link to Add New Record (new image). Don't Add or Delete anything yet.

Important cautions. Your WebMaster will make a periodic "backup" copy of your database and can "restore" it as it was at the time the backup was made. If you need to make several changes, first request an extra backup before you begin (in case you need to start over) and after you finish (so you won't have to do it again). And always keep a current printed "Database list" in a safe place.

To change a Category title - With the "Database list" on your screen, choose the line (database record) you want to change, and click Change. You should see the "Edit Database Info" page. Ignore everything on this page except the one piece of information you want to change. Type in your new title, and at the bottom of the page - click "Update the Database". Now check that your new title appears on the "Database List", and on the visitor pages.

To change information about an individual image - Choose the individual image record to change, click Change, and change the necessary pieces of information (fields). The most common changes are to: the image title, media, H (actual height), W(width), and D(depth), and price. Verify your changes.

To list an image in a new sequence (within same category), change its sequence number.

To move an image from one category to another, change its category number, and also assign it a new, unused sequence number within the new category.

To show an existing image in two different categories at the same time (for instance in "Best sellers" and in "Newest art"), you need two database records that both point to the same image on disk. First, click the Change link on the existing image but don't make any changes. Instead just print the "Edit Database Info" page on paper.
Now Add New Record, and reenter the info you just printed. In this new record, change the Category and Sequence number, and then "Update the Database".

Don't delete - unless you've sold the original work of art, and you have no way to make reproductions, and you're absolutely sure you never again will want to offer this item for viewing or for sale. Instead of deleting, set the "Show" field to N (NO). The image will disappear from all the visitor pages, but will still be on on your "Database List". (Setting "Show" to NO in a category header makes the whole category disappear. )

----------- Adding new images ----------

To list a new image (or category header) that has never been displayed before, first Add a New Record. Assign a Category and Sequence that will make the image appear in the correct sequence. Assign a title and an image name (which will be its name on disk) similar to it's title but abbreviated. Enter only the first part of its filename, but not its file extension (JPG). Now Update the record. Remaining info can be set up later.

Now create the actual image ....
* Take a digital photo of your original work of art. Avoid using a flash; bright indirect natural light is better. Try to get as close to the item as possible, so it's image will almost fill your frame. It can be shrunk later, but it cannot be enlarged without reducing its quality. Make sure your image is square with the camera's frame before pressing the shutter button. Take several shots so you can choose the best one later.
* Or scan your item if it's physically thin and flat like a painting, and if it is small enough to lay on your scanner. * Load the resulting digital image into your computer - or a friend's. You might set up three directories or folders entitled: "ORIGINAL images" (where you initially load your image), "PROCESSED Images" (where you load a COPY of the ORIGINAL), and "FINAL Images". In the following steps, leave the ORIGINAL image as-is, and use its COPY.
* Use your photo processing software to trim away the unnecessary space around the image COPY. (Most modern computers and digital cameras come with this software at no charge.)
* Create a small FINAL version with the proper size - about 150 by 150 pixels. It's name on disk must match the name in the database that you entered above, plus the extension .JPG. EG - Filename.JPG is the image name on your computer's disk storage.
* Create a large FINAL version with the proper size - about 300 by 300 pixels. It's name on disk must also match the name in the database that you entered above, plus the letters BIG, and then the extension .JPG. EG - FilenameBIG.JPG is its name on your computer's disk storage.
* Send both images to your WebMaster via a CD or 3 1/2" diskette. (One or two small images could be sent via Email attachment.)
* Your WebMaster will upload the images to your site's server space.

------------------ Quick Reference ---------------

The "Visitor's entrance" is http:// 3doves.com /tony /demos /ArtByMarilyn /Index.asp
The "Owner's entrance" or "Art Database Handler" link is http:// 3doves.com /tony /demos /ArtByMarilyn /______________
Your Webmaster is Anthony Francis Cernosek. Send Email to TCernosek@Earthlink.Net

Remember to publicize your Art Gallery's Web address any way you can. ....
* Print it on your business cards
* Print it on your brochures
* Include it in Emails you send
* "Trade links" with businesses related to yours. Ask them to list your Web address on their site, and offer to do the same in return.

go to Top

This site © 2004 by Anthony Francis Cernosek
This site built from scratch manually. No Web editing tools were used.
Tested in Internet Explorer 5.0 and Netscape 4.7 on an iMac OS 9.2
Warranty disclaimer -
WebMaster: TCernosek@EarthLink.Net