Programmer's Sample Page
Business of Web Development
Web Content Practicum
Spring 2005

Calendar:

1) http://www.creativeartstherapies.org/cgi-bin/calendar.pl
Uses Perl calendar program available from:
http://www.calendarscript.com

2) http://www.extropia.com/cgi-local/demo/webcal.cgi
Uses Perl calendar program available from:
http://www.extropia.com

3) http://www.calsnet.net/lomi_clinic
Uses a free calendar hosting service, from:
http://www.calendars.net

Calendars.net has a multitude of user-customizable attributes including colors and start-up display (day, week, month). Logo/artwork & links can be embedded in the title, header or footer text.

The free server is sometimes slow to respond at peak usage, presumably driving impatient users to move up to the paid service. $30/yr (then $20/yr thereafter) puts the calendar on a faster server, and removes the ads and/or calendars.net logo).

For a price, they will host up to 20 merged calendars (useful if several related organizations/departments/individuals wish to coordinate their activities) Here’s an example of several environmental groups merged calendar: http://our.calendars.net/or/default

Slide Show:

1) http://www.pga.com/pgachampionship/2004
Uses simple Flash Actionscript from:
http://www.whatdoiknow.org

Provides elegant, browser-independent dissolve transitions
See another example of it: http://whatdoiknow.org/other/slideshow/slideshow.html

2) http://www.costaricaturtles.com/images/photos/slides/river.html
(uses JavaScript from http://www.js-examples.com/search/?op=2&q=303 called "Ultimate Slideshow" it can put multiple slideshows on a page)

3) http://www.heritagepetaluma.com/about/mission_statement.html
(custom JavaScript, origin unknown)

Display Random Image on page visit / refresh:

1) http://student.santarosa.edu/graphics
Uses JavaScript, origin unknown. Look near bottom left-hand corner of page, click reload/refresh or click the image itself - image changes most of the time, but because it’s random, occasionally the same image is repeated.

Online Form:

1) http://www.creativeartstherapies.org/membership.html (uses Perl script ‘formmail.pl’)

2) http://www.routesforyouth.org/donate.html (uses PHP script ‘send.php3’)
(survey, registration, communication, etc.)

3) http://www.feltafoundation.org/parentsurvey.shtml (uses PHP script Phorm.php)

‘Phorm.php’ can both E-mail as well as log data to a file or a MySQL database

PayPal / online Credit Card donation:

Collect donations using PayPal:
https://www.paypal.com/cgi-bin/webscr?cmd=_help-ext&leafid=2524&answer_id=4759869
PayPal collects 2.9% plus $0.30 per transaction.

Example:
http://www.sonomawebsig.org
Click on Renew Membership > Click Here, which brings up the credit card entry form.

Online Commerce:

1) http://www.ccnow.com ($9.95/mo + 9%)

2) http://smallbusiness.yahoo.com/merchant ($40/mo + 1.5%)

3) http://www.paypal.com/cgi-bin/webscr?cmd=_merchant-outside (2.9% + $0.30 per transaction)

4) http://pages.ebay.com/storefronts/featuredstores.html ($9.95/mo + complex schedule; difficult to compare – depends on # of items/images listed and # of transactions)

A merchant account is required in order to accept credit card payments. Acquired separately, these accounts can be quite expensive ($100-$300 initial, plus monthly fees).  Therefore, for small-scale online commerce, it is generally best to use a provider similar to the ones listed.  

Guestbook:

1) http://www.extropia.com/cgi-local/demo/guestbook.cgi

2) http://purpleyin.com/demo/view.php

There are also hosted guestbook sites which often provide additional features such as filtering unwanted words, banning IP addresses of troublesome individuals/domains, backups, etc.

Mailing List:

Many hosting services support mailing lists, so it shouldn’t be difficult to address this need.

If the client wishes to manage the mailing list from his/her own computer, programs like Mail List King ($49) http://www.xequte.com/maillistking provide this capability by utilizing the client's SMTP and POP3 mail server account. The drawback to this method is that because the subscriber list is managed on one individual’s computer, that person must be able to handle support issues, such as mail configuration, list backup, etc. Also, some ISPs limit the quantity of E-mails sent through the SMTP mail server, in an attempt to thwart spammers (ex: Hostway limits to 50 mails per hour), making it difficult to deal with large group mailings.

Forum:

1) http://phorum.org/phorum5/list.php?14

2) http://www.phpbb.com/phpBB/viewtopic.php?t=260461&view=next

#1 & #2 are both PHP packages that run on the client’s server. The advantage is that there is no advertising, and Email privacy is ensured. The disadvantage is that any forum operated on a client’s server will require occasional support, at the client's expense.

Also, whenever a website visitor has access to a program (as in submitting data from forms), there exists an opportunity for hackers to exploit weaknesses in the software for committing malicious acts. So there is a slight risk to operating a complex bit of software on one’s server, especially free software where the source code is often in the public domain (as in 'phpbb').      

3) http://www.bravenet.com/webtools/forum/index.php

A free forum service, Bravenet uses advertising and spam to support their site. The spam is supposedly optional; you are allowed to unsubscribe from all but their Members Update list.

4) http://groups.yahoo.com

Also free and supported by advertising and user-interests/demographics. Yahoo claims not to share your E-mail address with “partners” except those operating under confidentiality agreements.

5) http://www.google.com/googlegroups/tour/index.html

Similar to Yahoo, Google uses advertising to support their forums.

6) http://www.message-boards.net/message-boards.htm#samples ($9.95/mo)

I would expect neither advertising nor spam from a service I paid for!

Password Protected Page:

Some hosting providers such as iPowerWeb provide a robust GUI that enables non-webmasters to setup password protection of a directory. Others, such as Sonic, advise using the .htaccess technique http://www.sonic.net/support/faq/web/htaccess.shtml#ht7

Search Feature:

1) http://www.scriptarchive.com/search.html

2) http://www.thesitewizard.com/archive/searchengine.shtml

These use Perl scripts to do realtime keyword searches inside the files on your website.
While they work fine for small sites, large, high-traffic sites should use pre-indexed searches, which are much faster and reduce the load on the server.

3) http://www.google.com/searchcode.html

This Google search bar consists of a chunk of HTML that you copy & paste onto your web page.  It produces a text field and a button to search either the web or your site.    Note that the terms of use require the Google graphic http://www.google.com/services/terms_free.html    Check this page for some alternates that you may link to in the pasted code. http://www.google.com/stickers.html  There is one that is a little smaller than the one in the below example, and they also have them on grey and black backgrounds.  Just click the one you want to use, and copy & paste the URL from the address bar into the 'src' attribute in the HTML.

Google also offers a free feature which allows the search results page to be customized to look similar to your site: http://www.google.com/services/free.html   Google will still place ads on the customized search results page.

Because Google is an indexed search, it is very fast, and can support many simultaneous searches (not likely the latter would be needed by any of our sites).  One limitation is that changes to the website might take a few days to be reflected in searches - you may submit your site to Google whenever you wish, but it may take the spider a while to "crawl" to your site and update its index.

WWW WWW.SantaRosa.EDU

4) http://www.perlfect.com/freescripts/search/

Perlfect search is an indexing search engine, which makes this package a little more complex due to it requiring a companion database for the index.   The advantage of indexed searches is that they are faster than realtime searches, and on large sites with many people searching simultaneously, that is important.  The downside of indexed search engines is that the index must be updated after every change to the website, or that change will not appear in searches.   In contrast, a realtime search will always find new content during a search. 

E-mail Address Protection:

Spammers are increasing efforts to harvest E-mail addresses posted on web pages.  Using web-crawlers, they scan pages looking for strings of the form:  something@something.something.  

Even though using an HTML 'mailto', such as Contact Bill Gates prevents the address from being displayed, the page source still has the address intact: < a href="mailto:billgates@microsoft.com">Contact Bill Gates</a>, making it very easy for the scanner to find and extract the address.

One of the early tricks to prevent address harvesting was to alter the "@":  "billgates(at)microsoft.com".   But the spammers started scanning for that as well, forcing people to become creative: "bill gates(<a><t>)microsoft (dot) com", etc.   Not everybody will figure out that the address needs to be edited, so a better alternative is needed.

One way is to use a tiny bit of JavaScript to assemble a 'mailto' in the browser at the moment the page is loaded.   This is effective because currently, the spammers don't process JavaScript as part of their scanning - it would take too much time. Besides, they collect plenty of E-mail addresses without resorting to such measures. 

This JavaScript:
<script>
  document.write('<a href="mailto:' + 'billgates' + '@' + 'microsoft' + '.' + 'com' + '">')
</script>
Contact Bill Gates </a>

Produces a mailto link that looks like:
Contact Bill Gates

Now the only problem is if the visitor has JavaScript disabled.   A small percentage of people, mostly corporate-browser users, and people who must browse under extremely tight security, have JavaScript disabled.  That means our build-the-mailto-on-the-fly JavaScript won't run on those computers.  

For testing purposes, it is useful to know how to disable JavaScript processing in your browser. 

For example, if you disable JavaScript, and reload this page, you'll see what the above 'mailto's look like.  With scripting disabled, my address near the top of the page will be visible as plain text with an embedded picture of the "@" sign (more on this below).   However, Bill Gates' mailto will still read "Contact Bill Gates", but will no longer be a hypertext mailto.  As a result, the only way to retrieve the actual E-mail address is to view the HTML source, find the JavaScript, and decipher the address - not exactly user-friendly.

A good workaround for this is to use the actual E-mail address in the hypertext, but without the "@", which is what the scanners look for first. 

The "(at)" string or one of its clever variants would suffice, but a more aesthetic way to encode it is to use a tiny GIF of an "@", as I have done in my address above.

So the above JavaScript with the "Contact Bill Gates" hypertext would need to be changed to:

<script>
  document.write('<a href="mailto:' + 'billgates' + '@' + 'microsoft' + '.' + 'com' + '">')
</script> billgates<img src="atsign.gif" align="absbottom" border="0" alt="'at'" title="'at'">microsoft.com</a>

When that displays, it will look like:

billgatesmicrosoft.com

With JavaScript disabled, the address will still be readable.  Copy & paste will work with limitations; the GIF will not be included, causing the pasted string to appear as "billgatesmicrosoft.com".  

It's not 100% perfect, but it enables an E-mail address to appear on a website without being automatically harvested by spammers.  

For a good example, see: http://www.feltafoundation.org/bd_contact.html

For more information regarding hiding E-mail addresses, see:

Proponents of encoding mailto's:
http://www.joemaller.com/js-mailer.shtml
http://www.outfront.net/tutorials_02/adv_tech/spam-proof.htm

From the 'outfront' page:

Should I worry?
Yes. The Federal Trade Commission (FTC) did a study in 2002 in which they posted different newly created “undercover” email addresses on various websites. They found that within six weeks, 86 percent of the posted email addresses were receiving spam.

How to disable JavaScript:

For Internet Explorer (IE6):
Tools > Internet Options > Security > Internet > Custom Level
scroll down to Scripting > Active Scripting and click the "Disable" radio button, then click [OK] [OK]

Note: The above disables JavaScript for pages accessed on the Internet. If you wish to disable it for viewing local pages on the Intranet (i.e. while using Dreamweaver's Preview feature, or browsing your local files), you should click on the "Intranet" icon in the Security window, instead of the "Internet"icon.  In IE, these controls are separate and independent of each other.

For Mozilla Firefox (1.0):
Tools > Options > Web Features and un-check the "Enable JavaScript" checkbox, then click [OK]

Remember to re-enable JavaScript when done testing. At least keep in mind that if you or other users of your computer subsequently have difficulty accessing certain features on web pages, this is the likely cause.  I can vouch from experience that family members become very annoyed when you run off to class and leave their favorite browser unable to process JavaScript!